Update styling for switches and select boxes

4 files changed, 51 insertions, 2 deletions

diff --git a/src/platform/generic/_locales/de/messages.json b/src/platform/generic/_locales/de/messages.json
index fcfb2b2..aece811 100644
--- a/src/platform/generic/_locales/de/messages.json
+++ b/src/platform/generic/_locales/de/messages.json
@@ -760,6 +760,10 @@
         "message"    : "Schaltflächen",
         "description": "Headline for the button styling settings in the custom theme settings"
     },
+    "CustomSliderElement"           : {
+        "message"    : "Schalter",
+        "description": "Headline for the switch styling settings in the custom theme settings"
+    },
     "CustomToasts"                  : {
         "message"    : "Mini-Benachrichtigungen",
         "description": "Headline for the toast notification styling settings in the custom theme settings"
@@ -776,6 +780,10 @@
         "message"    : "Vordergrundfarbe",
         "description": "Label of foreground / text color options in the custom theme settings"
     },
+    "BorderColorLabel"          : {
+        "message"    : "Umrandungsfarbe",
+        "description": "Label of border color options in the custom theme settings"
+    },
     "BackgroundInheritLabel"        : {
         "message"    : "Hintergrund erben",
         "description": "Label of options to inherit the background color in the custom theme settings"
@@ -800,6 +808,14 @@
         "message"    : "Diese Farbe wird für den Vordergrund und Umrandungen verwendet wenn das Element mit der Maus überfahren wird",
         "description": "Tooltip of the color input field in the custom theme settings for the hover / active foreground / text color for an element"
     },
+    "BorderColorBaseTitle"      : {
+        "message"    : "Diese Farbe wird für Umrandungen verwendet",
+        "description": "Tooltip of the color input field in the custom theme settings for the default border color for an element"
+    },
+    "BorderColorHoverTitle"     : {
+        "message"    : "Diese Farbe wird für Umrandungen verwendet wenn das Element aktiv ist",
+        "description": "Tooltip of the color input field in the custom theme settings for the hover / active border color for an element"
+    },
     "BackgroundInheritTitle"        : {
         "message"    : "Falls aktiviert wird die Farbe des übergeordneten Elements übernommen",
         "description": "Tooltip for the checkbox to inherit the background color (from the parent element in the html) in the custom theme settings"
diff --git a/src/platform/generic/_locales/en/messages.json b/src/platform/generic/_locales/en/messages.json
index 2181064..975d2be 100644
--- a/src/platform/generic/_locales/en/messages.json
+++ b/src/platform/generic/_locales/en/messages.json
@@ -774,6 +774,10 @@
         "message"    : "Buttons",
         "description": "Headline for the button styling settings in the custom theme settings"
     },
+    "CustomSliderElement"           : {
+        "message"    : "Switches",
+        "description": "Headline for the switch styling settings in the custom theme settings"
+    },
     "CustomToasts"                  : {
         "message"    : "Toast notifications",
         "description": "Headline for the toast notification styling settings in the custom theme settings"
@@ -790,6 +794,10 @@
         "message"    : "Foreground color",
         "description": "Label of foreground / text color options in the custom theme settings"
     },
+    "BorderColorLabel"          : {
+        "message"    : "Border color",
+        "description": "Label of border color options in the custom theme settings"
+    },
     "BackgroundInheritLabel"        : {
         "message"    : "Inherit background",
         "description": "Label of options to inherit the background color in the custom theme settings"
@@ -814,6 +822,14 @@
         "message"    : "This color is used for texts and borders if the element is active",
         "description": "Tooltip of the color input field in the custom theme settings for the hover / active foreground / text color for an element"
     },
+    "BorderColorBaseTitle"      : {
+        "message"    : "This color is usually used for borders",
+        "description": "Tooltip of the color input field in the custom theme settings for the default border color for an element"
+    },
+    "BorderColorHoverTitle"     : {
+        "message"    : "This color is used for borders if the element is active",
+        "description": "Tooltip of the color input field in the custom theme settings for the hover / active border color for an element"
+    },
     "BackgroundInheritTitle"        : {
         "message"    : "If activated, the value will be inherited from the parent element",
         "description": "Tooltip for the checkbox to inherit the background color (from the parent element in the html) in the custom theme settings"
diff --git a/src/platform/generic/css/themes/hacker.css b/src/platform/generic/css/themes/hacker.css
index 6fbcba6..c6e591e 100644
--- a/src/platform/generic/css/themes/hacker.css
+++ b/src/platform/generic/css/themes/hacker.css
@@ -2,6 +2,15 @@
     --element-active-fg-color : var(--element-fg-color);
 }
 
-.input-slider .input-slider-bar {
-    border: 1px solid var(--element-active-bg-color);
+.input-select,
+.input-select select {
+    color : var(--element-hover-fg-color);
+}
+
+.input-select::after {
+    opacity: 1;
+}
+
+.input-slider.on .input-slider-button {
+    border-color : var(--slider-active-fg-color);
 }
\ No newline at end of file
diff --git a/src/platform/generic/css/themes/server.css b/src/platform/generic/css/themes/server.css
index e88a65b..b9eb43b 100644
--- a/src/platform/generic/css/themes/server.css
+++ b/src/platform/generic/css/themes/server.css
@@ -25,4 +25,12 @@ body #manager > .tab-container > .tabs > .tab {
 body #manager > .tab-container > .tabs > .tab.active {
     background : none;
     color      : var(--tabs-active-fg-color);
+}
+
+body .input-slider.off .input-slider-button {
+    border-color : var(--slider-bg-color);
+}
+
+body .input-slider.on .input-slider-button {
+    border-color : var(--slider-active-bg-color);
 }
\ No newline at end of file