From d00292fbb95a43d862d6802e7755b06d2dd42760 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 May 2019 19:04:17 +0200 Subject: [PATCH] Migrate from CSS to SCSS. There's still a lot of potential, though. --- css/uhr-black.scss | 26 ++++++++------- css/{uhr-red.css => uhr-blue.scss} | 28 ++++++++-------- css/{uhr-blue.css => uhr-green.scss} | 28 ++++++++-------- css/uhr-pink.css | 41 ----------------------- css/uhr-pink.scss | 43 ++++++++++++++++++++++++ css/{uhr-green.css => uhr-red.scss} | 28 ++++++++-------- css/{uhr-white.css => uhr-white.scss} | 44 +++++++++++++------------ css/{uhr-yellow.css => uhr-yellow.scss} | 44 +++++++++++++------------ dist/assets/uhr-black.css | 2 +- dist/assets/uhr-blue.css | 2 +- dist/assets/uhr-green.css | 2 +- dist/assets/uhr-pink.css | 2 +- dist/assets/uhr-red.css | 2 +- dist/assets/uhr-white.css | 2 +- dist/assets/uhr-yellow.css | 2 +- webpack.common.js | 12 +++---- 16 files changed, 161 insertions(+), 147 deletions(-) rename css/{uhr-red.css => uhr-blue.scss} (59%) rename css/{uhr-blue.css => uhr-green.scss} (60%) delete mode 100644 css/uhr-pink.css create mode 100644 css/uhr-pink.scss rename css/{uhr-green.css => uhr-red.scss} (59%) rename css/{uhr-white.css => uhr-white.scss} (50%) rename css/{uhr-yellow.css => uhr-yellow.scss} (50%) diff --git a/css/uhr-black.scss b/css/uhr-black.scss index bf55a62..764c4be 100644 --- a/css/uhr-black.scss +++ b/css/uhr-black.scss @@ -12,20 +12,22 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.black { - background-color: #111; +.black { + &.uhr { + background-color: #111; - .dot:not(.active) { - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + .dot:not(.active) { + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + + .letter:not(.active) { + color: rgba(255, 255, 255, 0.1); + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } } - .letter:not(.active) { - color: rgba(255, 255, 255, 0.1); - text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + .onoffswitch-inner:before { + background-color: #111; } } - -.black .onoffswitch-inner:before { - background-color: #111; -} diff --git a/css/uhr-red.css b/css/uhr-blue.scss similarity index 59% rename from css/uhr-red.css rename to css/uhr-blue.scss index 621517c..613e709 100644 --- a/css/uhr-red.css +++ b/css/uhr-blue.scss @@ -12,20 +12,22 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.red { - background-color: #700; -} +.blue { + &.uhr { + background-color: #00a; -.red .onoffswitch-inner:before { - background-color: #700; -} + .dot:not(.active) { + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } -.uhr.red .dot:not(.active) { - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); -} + .letter:not(.active) { + color: rgba(255, 255, 255, 0.1); + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + } -.uhr.red .letter:not(.active) { - color: rgba(255, 255, 255, 0.1); - text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + .onoffswitch-inner:before { + background-color: #00a; + } } diff --git a/css/uhr-blue.css b/css/uhr-green.scss similarity index 60% rename from css/uhr-blue.css rename to css/uhr-green.scss index 743fc10..56b9abb 100644 --- a/css/uhr-blue.css +++ b/css/uhr-green.scss @@ -12,20 +12,22 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.blue { - background-color: #00a; -} +.green { + &.uhr { + background-color: #0c0; -.blue .onoffswitch-inner:before { - background-color: #00a; -} + .dot:not(.active) { + border-color: rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + } -.uhr.blue .dot:not(.active) { - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); -} + .letter:not(.active) { + color: rgba(0, 0, 0, 0.1); + text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + } + } -.uhr.blue .letter:not(.active) { - color: rgba(255, 255, 255, 0.1); - text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + .onoffswitch-inner:before { + background-color: #0c0; + } } diff --git a/css/uhr-pink.css b/css/uhr-pink.css deleted file mode 100644 index 27525f4..0000000 --- a/css/uhr-pink.css +++ /dev/null @@ -1,41 +0,0 @@ -/* -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -You should have received a copy of the GNU General Public License -along with this program. If not, see . -*/ -.uhr.pink { - background-color: #f0a; -} - -.uhr.pink .dot.active { - border-color: #fff; - box-shadow: 0 0 0.1em #fff; -} - -.uhr.pink .letter.active { - color: #fff; - text-shadow: 0 0 0.1em #fff; -} - -.pink .onoffswitch-inner:before { - background-color: #f0a; -} - -.uhr.pink .dot:not(.active) { - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); -} - -.uhr.pink .letter:not(.active) { - color: rgba(255, 255, 255, 0.1); - text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); -} diff --git a/css/uhr-pink.scss b/css/uhr-pink.scss new file mode 100644 index 0000000..5c9a3dd --- /dev/null +++ b/css/uhr-pink.scss @@ -0,0 +1,43 @@ +/* +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ +.pink { + &.uhr { + background-color: #f0a; + + .dot.active { + border-color: #fff; + box-shadow: 0 0 0.1em #fff; + } + + .letter.active { + color: #fff; + text-shadow: 0 0 0.1em #fff; + } + + .dot:not(.active) { + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + + .letter:not(.active) { + color: rgba(255, 255, 255, 0.1); + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + } + + .onoffswitch-inner:before { + background-color: #f0a; + } +} diff --git a/css/uhr-green.css b/css/uhr-red.scss similarity index 59% rename from css/uhr-green.css rename to css/uhr-red.scss index bd821a5..428ee49 100644 --- a/css/uhr-green.css +++ b/css/uhr-red.scss @@ -12,20 +12,22 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.green { - background-color: #0c0; -} +.red { + &.uhr { + background-color: #700; -.green .onoffswitch-inner:before { - background-color: #0c0; -} + .dot:not(.active) { + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } -.uhr.green .dot:not(.active) { - border-color: rgba(0, 0, 0, 0.1); - box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); -} + .letter:not(.active) { + color: rgba(255, 255, 255, 0.1); + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + } -.uhr.green .letter:not(.active) { - color: rgba(0, 0, 0, 0.1); - text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + .onoffswitch-inner:before { + background-color: #700; + } } diff --git a/css/uhr-white.css b/css/uhr-white.scss similarity index 50% rename from css/uhr-white.css rename to css/uhr-white.scss index 7989be0..969d1a0 100644 --- a/css/uhr-white.css +++ b/css/uhr-white.scss @@ -12,30 +12,32 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.white { - background-color: #ccc; -} +.white { + &.uhr { + background-color: #ccc; -.uhr.white .dot.active { - border-color: #fff; - box-shadow: 0 0 0.1em #fff; -} + .dot.active { + border-color: #fff; + box-shadow: 0 0 0.1em #fff; + } -.uhr.white .letter.active { - color: #fff; - text-shadow: 0 0 0.1em #fff; -} + .letter.active { + color: #fff; + text-shadow: 0 0 0.1em #fff; + } -.white .onoffswitch-inner:before { - background-color: #ccc; -} + .dot:not(.active) { + border-color: rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + } -.uhr.white .dot:not(.active) { - border-color: rgba(0, 0, 0, 0.1); - box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); -} + .letter:not(.active) { + color: rgba(0, 0, 0, 0.1); + text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + } + } -.uhr.white .letter:not(.active) { - color: rgba(0, 0, 0, 0.1); - text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); + .onoffswitch-inner:before { + background-color: #ccc; + } } diff --git a/css/uhr-yellow.css b/css/uhr-yellow.scss similarity index 50% rename from css/uhr-yellow.css rename to css/uhr-yellow.scss index d109178..9d44d1b 100644 --- a/css/uhr-yellow.css +++ b/css/uhr-yellow.scss @@ -12,30 +12,32 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -.uhr.yellow { - background-color: #fd0; -} +.yellow { + &.uhr { + background-color: #fd0; -.uhr.yellow .dot.active { - border-color: #fff; - box-shadow: 0 0 0.1em #fff; -} + .dot.active { + border-color: #fff; + box-shadow: 0 0 0.1em #fff; + } -.uhr.yellow .letter.active { - color: #fff; - text-shadow: 0 0 0.1em #fff; -} + .letter.active { + color: #fff; + text-shadow: 0 0 0.1em #fff; + } -.yellow .onoffswitch-inner:before { - background-color: #fd0; -} + .dot:not(.active) { + border-color: rgba(0, 0, 0, 0.05); + box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05); + } -.uhr.yellow .dot:not(.active) { - border-color: rgba(0, 0, 0, 0.05); - box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05); -} + .letter:not(.active) { + color: rgba(0, 0, 0, 0.05); + text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05); + } + } -.uhr.yellow .letter:not(.active) { - color: rgba(0, 0, 0, 0.05); - text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05); + .onoffswitch-inner:before { + background-color: #fd0; + } } diff --git a/dist/assets/uhr-black.css b/dist/assets/uhr-black.css index 21b75c7..e02e7f2 100644 --- a/dist/assets/uhr-black.css +++ b/dist/assets/uhr-black.css @@ -1 +1 @@ -.uhr.black{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black .onoffswitch-inner:before{background-color:#111} +.black.uhr{background-color:#111}.black.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black .onoffswitch-inner:before{background-color:#111} diff --git a/dist/assets/uhr-blue.css b/dist/assets/uhr-blue.css index 85d8597..92e51e6 100644 --- a/dist/assets/uhr-blue.css +++ b/dist/assets/uhr-blue.css @@ -1 +1 @@ -.uhr.blue{background-color:#00a}.blue .onoffswitch-inner:before{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)} +.blue.uhr{background-color:#00a}.blue.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.blue.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.blue .onoffswitch-inner:before{background-color:#00a} diff --git a/dist/assets/uhr-green.css b/dist/assets/uhr-green.css index cdd5d56..77a98dd 100644 --- a/dist/assets/uhr-green.css +++ b/dist/assets/uhr-green.css @@ -1 +1 @@ -.uhr.green{background-color:#0c0}.green .onoffswitch-inner:before{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)} +.green.uhr{background-color:#0c0}.green.uhr .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.green.uhr .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}.green .onoffswitch-inner:before{background-color:#0c0} diff --git a/dist/assets/uhr-pink.css b/dist/assets/uhr-pink.css index 657023f..efde2c3 100644 --- a/dist/assets/uhr-pink.css +++ b/dist/assets/uhr-pink.css @@ -1 +1 @@ -.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink .onoffswitch-inner:before{background-color:#f0a}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)} +.pink.uhr{background-color:#f0a}.pink.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.pink.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.pink.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.pink .onoffswitch-inner:before{background-color:#f0a} diff --git a/dist/assets/uhr-red.css b/dist/assets/uhr-red.css index b572799..fd902e7 100644 --- a/dist/assets/uhr-red.css +++ b/dist/assets/uhr-red.css @@ -1 +1 @@ -.uhr.red{background-color:#700}.red .onoffswitch-inner:before{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)} +.red.uhr{background-color:#700}.red.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.red.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.red .onoffswitch-inner:before{background-color:#700} diff --git a/dist/assets/uhr-white.css b/dist/assets/uhr-white.css index 92639d2..c921f95 100644 --- a/dist/assets/uhr-white.css +++ b/dist/assets/uhr-white.css @@ -1 +1 @@ -.uhr.white{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)} +.white.uhr{background-color:#ccc}.white.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.white.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white.uhr .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.white.uhr .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}.white .onoffswitch-inner:before{background-color:#ccc} diff --git a/dist/assets/uhr-yellow.css b/dist/assets/uhr-yellow.css index 7292498..60a4638 100644 --- a/dist/assets/uhr-yellow.css +++ b/dist/assets/uhr-yellow.css @@ -1 +1 @@ -.uhr.yellow{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)} +.yellow.uhr{background-color:#fd0}.yellow.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.yellow.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow.uhr .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.yellow.uhr .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)}.yellow .onoffswitch-inner:before{background-color:#fd0} diff --git a/webpack.common.js b/webpack.common.js index 711f0b1..9109683 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -17,12 +17,12 @@ module.exports = (env, argv) => ({ layout_pt: require.resolve('./src/layout/layout-pt.ts'), style_main: require.resolve('./resources/styles/uhr.scss'), style_black: require.resolve('./css/uhr-black.scss'), - style_blue: require.resolve('./css/uhr-blue.css'), - style_green: require.resolve('./css/uhr-green.css'), - style_pink: require.resolve('./css/uhr-pink.css'), - style_red: require.resolve('./css/uhr-red.css'), - style_white: require.resolve('./css/uhr-white.css'), - style_yellow: require.resolve('./css/uhr-yellow.css') + style_blue: require.resolve('./css/uhr-blue.scss'), + style_green: require.resolve('./css/uhr-green.scss'), + style_pink: require.resolve('./css/uhr-pink.scss'), + style_red: require.resolve('./css/uhr-red.scss'), + style_white: require.resolve('./css/uhr-white.scss'), + style_yellow: require.resolve('./css/uhr-yellow.scss') }, module: { rules: [