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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.black { .black {
&.uhr {
background-color: #111; background-color: #111;
.dot:not(.active) { .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); color: rgba(255, 255, 255, 0.1);
text-shadow: 0 0 0.1em 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; 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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.red { .blue {
background-color: #700; &.uhr {
} background-color: #00a;
.red .onoffswitch-inner:before { .dot:not(.active) {
background-color: #700;
}
.uhr.red .dot:not(.active) {
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0.1em 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); color: rgba(255, 255, 255, 0.1);
text-shadow: 0 0 0.1em 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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.blue { .green {
background-color: #00a; &.uhr {
} background-color: #0c0;
.blue .onoffswitch-inner:before { .dot:not(.active) {
background-color: #00a; 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) { .letter:not(.active) {
border-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
} }
}
.uhr.blue .letter:not(.active) { .onoffswitch-inner:before {
color: rgba(255, 255, 255, 0.1); background-color: #0c0;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); }
} }

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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.green { .red {
background-color: #0c0; &.uhr {
} background-color: #700;
.green .onoffswitch-inner:before { .dot:not(.active) {
background-color: #0c0; 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) { .letter:not(.active) {
border-color: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
} }
}
.uhr.green .letter:not(.active) { .onoffswitch-inner:before {
color: rgba(0, 0, 0, 0.1); background-color: #700;
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1); }
} }

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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.white { .white {
&.uhr {
background-color: #ccc; background-color: #ccc;
}
.uhr.white .dot.active { .dot.active {
border-color: #fff; border-color: #fff;
box-shadow: 0 0 0.1em #fff; box-shadow: 0 0 0.1em #fff;
} }
.uhr.white .letter.active { .letter.active {
color: #fff; color: #fff;
text-shadow: 0 0 0.1em #fff; text-shadow: 0 0 0.1em #fff;
} }
.white .onoffswitch-inner:before { .dot:not(.active) {
background-color: #ccc;
}
.uhr.white .dot:not(.active) {
border-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.1em 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); color: rgba(0, 0, 0, 0.1);
text-shadow: 0 0 0.1em 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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.uhr.yellow { .yellow {
&.uhr {
background-color: #fd0; background-color: #fd0;
}
.uhr.yellow .dot.active { .dot.active {
border-color: #fff; border-color: #fff;
box-shadow: 0 0 0.1em #fff; box-shadow: 0 0 0.1em #fff;
} }
.uhr.yellow .letter.active { .letter.active {
color: #fff; color: #fff;
text-shadow: 0 0 0.1em #fff; text-shadow: 0 0 0.1em #fff;
} }
.yellow .onoffswitch-inner:before { .dot:not(.active) {
background-color: #fd0;
}
.uhr.yellow .dot:not(.active) {
border-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0.1em 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); color: rgba(0, 0, 0, 0.05);
text-shadow: 0 0 0.1em 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'), layout_pt: require.resolve('./src/layout/layout-pt.ts'),
style_main: require.resolve('./resources/styles/uhr.scss'), style_main: require.resolve('./resources/styles/uhr.scss'),
style_black: require.resolve('./css/uhr-black.scss'), style_black: require.resolve('./css/uhr-black.scss'),
style_blue: require.resolve('./css/uhr-blue.css'), style_blue: require.resolve('./css/uhr-blue.scss'),
style_green: require.resolve('./css/uhr-green.css'), style_green: require.resolve('./css/uhr-green.scss'),
style_pink: require.resolve('./css/uhr-pink.css'), style_pink: require.resolve('./css/uhr-pink.scss'),
style_red: require.resolve('./css/uhr-red.css'), style_red: require.resolve('./css/uhr-red.scss'),
style_white: require.resolve('./css/uhr-white.css'), style_white: require.resolve('./css/uhr-white.scss'),
style_yellow: require.resolve('./css/uhr-yellow.css') style_yellow: require.resolve('./css/uhr-yellow.scss')
}, },
module: { module: {
rules: [ rules: [