manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Migrate from CSS to SCSS. There's still a lot of potential, though.

Browse source
This commit is contained in:
Manuel Friedli 2019-05-09 19:04:17 +02:00
parent dd1e7a2d18
commit d00292fbb9
16 changed files with 161 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
css/uhr-black.scss
View file

@ -12,7 +12,8 @@ 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 {
.black {
&.uhr {
background-color: #111;
.dot:not(.active) {
@ -24,8 +25,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
color: rgba(255, 255, 255, 0.1);
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
}
}
}
.black .onoffswitch-inner:before {
.onoffswitch-inner:before {
background-color: #111;
}
}

22
css/uhr-red.css → css/uhr-blue.scss
View file

@ -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;
}
.uhr.red .dot:not(.active) {
.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) {
.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;
}
}

28
css/uhr-blue.css → css/uhr-green.scss
View file

@ -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;
}
}

41
css/uhr-pink.css
View file

@ -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
View 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;
}
}

28
css/uhr-green.css → css/uhr-red.scss
View file

@ -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;
}
}

28
css/uhr-white.css → css/uhr-white.scss
View file

@ -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 {
.white {
&.uhr {
background-color: #ccc;
}
.uhr.white .dot.active {
.dot.active {
border-color: #fff;
box-shadow: 0 0 0.1em #fff;
}
}
.uhr.white .letter.active {
.letter.active {
color: #fff;
text-shadow: 0 0 0.1em #fff;
}
}
.white .onoffswitch-inner:before {
background-color: #ccc;
}
.uhr.white .dot:not(.active) {
.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) {
.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;
}
}

28
css/uhr-yellow.css → css/uhr-yellow.scss
View file

@ -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 {
.yellow {
&.uhr {
background-color: #fd0;
}
.uhr.yellow .dot.active {
.dot.active {
border-color: #fff;
box-shadow: 0 0 0.1em #fff;
}
}
.uhr.yellow .letter.active {
.letter.active {
color: #fff;
text-shadow: 0 0 0.1em #fff;
}
}
.yellow .onoffswitch-inner:before {
background-color: #fd0;
}
.uhr.yellow .dot:not(.active) {
.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) {
.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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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}

12
webpack.common.js
View file

@ -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: [