Migrate from CSS to SCSS. There's still a lot of potential, though.
This commit is contained in:
parent
dd1e7a2d18
commit
d00292fbb9
16 changed files with 161 additions and 147 deletions
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
|
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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);
|
||||
}
|
43
css/uhr-pink.scss
Normal file
43
css/uhr-pink.scss
Normal file
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
2
dist/assets/uhr-black.css
vendored
2
dist/assets/uhr-black.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-blue.css
vendored
2
dist/assets/uhr-blue.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-green.css
vendored
2
dist/assets/uhr-green.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-pink.css
vendored
2
dist/assets/uhr-pink.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-red.css
vendored
2
dist/assets/uhr-red.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-white.css
vendored
2
dist/assets/uhr-white.css
vendored
|
@ -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}
|
||||
|
|
2
dist/assets/uhr-yellow.css
vendored
2
dist/assets/uhr-yellow.css
vendored
|
@ -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}
|
||||
|
|
|
@ -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: [
|
||||
|
|
Loading…
Reference in a new issue