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 <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;
-}
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 <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;
+    }
 }
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 <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;
+    }
 }
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 <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);
-}
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 <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;
+    }
+}
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 <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;
+    }
 }
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 <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;
+    }
 }
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 <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;
+    }
 }
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: [