Update styling for switches and select boxes

22 files changed, 241 insertions, 69 deletions

diff --git a/src/js/Helper/ServerThemeHelper.js b/src/js/Helper/ServerThemeHelper.js
index 48485dd..b5b3434 100644
--- a/src/js/Helper/ServerThemeHelper.js
+++ b/src/js/Helper/ServerThemeHelper.js
@@ -1,6 +1,6 @@
 import ObjectClone from 'passwords-client/src/Utility/ObjectClone';
 import ServerTheme from '@js/Themes/Server';
-import Theme from '@js/Models/Theme/Theme';
+import Theme       from '@js/Models/Theme/Theme';
 
 class ServerThemeHelper {
 
@@ -19,6 +19,7 @@ class ServerThemeHelper {
         this._setBadgeColors(theme, colors);
         this._setElementColors(colors, theme);
         this._setButtonColors(theme, colors);
+        this._setSliderColors(theme, colors);
         this._setTabColors(theme, colors);
 
         return new Theme(theme);
@@ -62,8 +63,22 @@ class ServerThemeHelper {
      * @param {Object} colors
      * @private
      */
+    _setSliderColors(theme, colors) {
+        theme.colors['slider-bg'] = colors.primary.fg;
+        theme.colors['slider-fg'] = colors.primary.bg;
+        theme.colors['slider-br'] = colors.primary.bg;
+        theme.colors['slider-active-bg'] = colors.primary.bg;
+        theme.colors['slider-active-fg'] = colors.primary.fg;
+        theme.colors['slider-active-br'] = colors.primary.fg;
+    }
+
+    /**
+     * @param {Object} theme
+     * @param {Object} colors
+     * @private
+     */
     _setElementColors(colors, theme) {
-        let fgPrimary = parseInt(colors.primary.bg.replace('#', ''), 16) <= 8355711 ? colors.primary.bg:this._lighten(colors.primary.bg, -30);
+        let fgPrimary = parseInt(colors.primary.bg.replace('#', ''), 16) <= 8355711 ? colors.primary.bg : this._lighten(colors.primary.bg, -30);
         theme.colors['element-bg'] = colors.background.bg;
         theme.colors['element-fg'] = this._lighten(colors.background.fg, 30);
         theme.colors['element-hover-bg'] = this._lighten(colors.background.bg, -7);
@@ -86,7 +101,11 @@ class ServerThemeHelper {
         let textColor = collection.get('theme.color.text').getValue();
         let primaryColor = collection.get('theme.color.primary').getValue();
         let backgroundColor = collection.get('theme.color.background').getValue();
-        let backgroundTextColor = backgroundColor === '#ffffff' ? '#000000':'#ffffff';
+
+        /** "Fix" for PHPStorm reformatting colors on its own **/
+        let b               = '000',
+            w               = 'fff',
+            backgroundTextColor = backgroundColor === `#${w}` || backgroundColor === `#${w}${w}` ? `#${b}${b}` : `#${w}${w}`;
 
         return {primary: {bg: primaryColor, fg: textColor}, background: {bg: backgroundColor, fg: backgroundTextColor}};
     }
@@ -102,13 +121,15 @@ class ServerThemeHelper {
      */
     _lighten(color, percent) {
         color = color.replace('#', '');
+        if(color.length === 3) color = color[0]+color[0]+color[1]+color[1]+color[2]+color[2];
+
         let num = parseInt(color, 16),
             amt = Math.round(2.55 * percent),
             R   = (num >> 16) + amt,
             B   = (num >> 8 & 0x00FF) + amt,
             G   = (num & 0x0000FF) + amt;
 
-        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0:R:255) * 0x10000 + (B < 255 ? B < 1 ? 0:B:255) * 0x100 + (G < 255 ? G < 1 ? 0:G:255)).toString(16).slice(1);
+        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1);
     }
 }
 
diff --git a/src/js/Themes/AdaptaLight.json b/src/js/Themes/AdaptaLight.json
index 4cc92fa..dce40c9 100644
--- a/src/js/Themes/AdaptaLight.json
+++ b/src/js/Themes/AdaptaLight.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#5294E2",
         "button-hover-fg"        : "#FFFFFF",
+        "slider-bg"              : "#FFFFFF",
+        "slider-fg"              : "#5294E2",
+        "slider-br"              : "#5294E2",
+        "slider-active-bg"       : "#5294E2",
+        "slider-active-fg"       : "#FFFFFF",
+        "slider-active-br"       : "#5294E2",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/AdaptaTeal.json b/src/js/Themes/AdaptaTeal.json
index 57c00e5..4715f4d 100644
--- a/src/js/Themes/AdaptaTeal.json
+++ b/src/js/Themes/AdaptaTeal.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#37EE7C",
         "button-hover-fg"        : "#F9F9FA",
+        "slider-bg"              : "#263238",
+        "slider-fg"              : "#37EE7C",
+        "slider-br"              : "#37EE7C",
+        "slider-active-bg"       : "#37EE7C",
+        "slider-active-fg"       : "#263238",
+        "slider-active-br"       : "#37EE7C",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/ArcDark.json b/src/js/Themes/ArcDark.json
index 8f44c23..e0287d7 100644
--- a/src/js/Themes/ArcDark.json
+++ b/src/js/Themes/ArcDark.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#5296E5",
         "button-hover-fg"        : "#D3DAE3",
+        "slider-bg"              : "#383C4A",
+        "slider-fg"              : "#ABB4C2",
+        "slider-br"              : "#ABB4C2",
+        "slider-active-bg"       : "#5296E5",
+        "slider-active-fg"       : "#2F343F",
+        "slider-active-br"       : "#5296E5",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/ArcLight.json b/src/js/Themes/ArcLight.json
index cb12f41..5c41811 100644
--- a/src/js/Themes/ArcLight.json
+++ b/src/js/Themes/ArcLight.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#5294E2",
         "button-hover-fg"        : "#F5F6F7",
+        "slider-bg"              : "#E7E8EB",
+        "slider-fg"              : "#5C616C",
+        "slider-br"              : "#5C616C",
+        "slider-active-bg"       : "#5294E2",
+        "slider-active-fg"       : "#F5F6F7",
+        "slider-active-br"       : "#5294E2",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/Dark.json b/src/js/Themes/Dark.json
index 37c35ff..88c6a74 100644
--- a/src/js/Themes/Dark.json
+++ b/src/js/Themes/Dark.json
@@ -1,6 +1,6 @@
 {
-    "id": "dark",
-    "label": "ThemeDark",
+    "id"    : "dark",
+    "label" : "ThemeDark",
     "badge" : {
         "color-bg": "#0c63db",
         "color-fg": "#d8d8d8",
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#0c63db",
         "button-hover-fg"        : "#181818",
+        "slider-bg"              : "#363639",
+        "slider-fg"              : "#ffffff",
+        "slider-br"              : "#323335",
+        "slider-active-bg"       : "#0060df",
+        "slider-active-fg"       : "#ffffff",
+        "slider-active-br"       : "#003eaa",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/Hacker.json b/src/js/Themes/Hacker.json
index 57f9e42..721ca44 100644
--- a/src/js/Themes/Hacker.json
+++ b/src/js/Themes/Hacker.json
@@ -24,6 +24,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#00ff00",
         "button-hover-fg"        : "#000000",
+        "slider-bg"              : "#000000",
+        "slider-fg"              : "#00ff00",
+        "slider-br"              : "#00ff00",
+        "slider-active-bg"       : "#00ff00",
+        "slider-active-fg"       : "#000000",
+        "slider-active-br"       : "#00ff00",
         "info-bg"                : "#0000ff",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#ffff00",
diff --git a/src/js/Themes/Light.json b/src/js/Themes/Light.json
index 8c225ca..4e5e269 100644
--- a/src/js/Themes/Light.json
+++ b/src/js/Themes/Light.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#0996f8",
         "button-hover-fg"        : "#ffffff",
+        "slider-bg"              : "#eeeeee",
+        "slider-fg"              : "#ffffff",
+        "slider-br"              : "#dcdddd",
+        "slider-active-bg"       : "#0060df",
+        "slider-active-fg"       : "#ffffff",
+        "slider-active-br"       : "#003eaa",
         "info-bg"                : "#0652dd",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#ffc312",
diff --git a/src/js/Themes/OledDark.json b/src/js/Themes/OledDark.json
index 6d0c985..d9ce79d 100644
--- a/src/js/Themes/OledDark.json
+++ b/src/js/Themes/OledDark.json
@@ -23,6 +23,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#0c63db",
         "button-hover-fg"        : "#000000",
+        "slider-bg"              : "#363639",
+        "slider-fg"              : "#ffffff",
+        "slider-br"              : "#323335",
+        "slider-active-bg"       : "#0060df",
+        "slider-active-fg"       : "#ffffff",
+        "slider-active-br"       : "#003eaa",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/RGB.json b/src/js/Themes/RGB.json
index a11ec9e..15009f4 100644
--- a/src/js/Themes/RGB.json
+++ b/src/js/Themes/RGB.json
@@ -24,6 +24,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#0c63db",
         "button-hover-fg"        : "#181818",
+        "slider-bg"              : "#363639",
+        "slider-fg"              : "#ffffff",
+        "slider-br"              : "#323335",
+        "slider-active-bg"       : "#0060df",
+        "slider-active-fg"       : "#ffffff",
+        "slider-active-br"       : "#003eaa",
         "info-bg"                : "#0c63db",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#eca700",
diff --git a/src/js/Themes/Server.json b/src/js/Themes/Server.json
index 08c8b74..27c3d51 100644
--- a/src/js/Themes/Server.json
+++ b/src/js/Themes/Server.json
@@ -28,6 +28,12 @@
         "button-fg"              : "inherit",
         "button-hover-bg"        : "#0082c9",
         "button-hover-fg"        : "#ffffff",
+        "slider-bg"              : "#eeeeee",
+        "slider-fg"              : "#ffffff",
+        "slider-br"              : "#dcdddd",
+        "slider-active-bg"       : "#0082c9",
+        "slider-active-fg"       : "#ffffff",
+        "slider-active-br"       : "#0082c9",
         "info-bg"                : "#0097e6",
         "info-fg"                : "#ffffff",
         "warning-bg"             : "#ffc312",
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
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
index bdf0633..d2aedf0 100644
--- a/src/scss/_theme.scss
+++ b/src/scss/_theme.scss
@@ -29,6 +29,17 @@
     --button-border-radius-large    : 100px;
 
     /**
+     * Slider
+     */
+    --slider-bg-color               : #eeeeee;
+    --slider-fg-color               : #ffffff;
+    --slider-br-color               : #dcdddd;
+    --slider-active-bg-color        : #0060df;
+    --slider-active-fg-color        : #ffffff;
+    --slider-active-br-color        : #003eaa;
+    --slider-border-radius          : .6em;
+
+    /**
      * Tab borders (box-shadow)
      */
     --tab-border                    : 0 -1px 0 var(--element-hover-bg-color) inset;
diff --git a/src/vue/Components/Form/SelectField.vue b/src/vue/Components/Form/SelectField.vue
index 16e2f4e..d2cb25d 100644
--- a/src/vue/Components/Form/SelectField.vue
+++ b/src/vue/Components/Form/SelectField.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="select-field" :class="{disabled:disabled}">
-        <select @change="handleChange" v-on="listeners" v-bind="$attrs" :disabled="disabled">
+    <div class="input-select" :class="{disabled:disabled}">
+        <select @change="handleChange" v-on="listeners" v-bind="$attrs" :id="id" :disabled="disabled">
             <option v-for="option in optionList"
                     :key="option.id"
                     :value="option.id"
@@ -32,6 +32,10 @@
             disabled : {
                 type   : Boolean,
                 default: false
+            },
+            id       : {
+                type   : String,
+                default: ''
             }
         },
 
@@ -47,10 +51,10 @@
                         options.push({id, label: config, disabled: false, description: null});
                     } else {
                         let option = {
-                            id         : config.hasOwnProperty('id') ? config.id:id,
+                            id         : config.hasOwnProperty('id') ? config.id : id,
                             label      : config.label,
-                            disabled   : config.hasOwnProperty('disabled') ? config.disabled === true:false,
-                            description: config.hasOwnProperty('description') ? config.description:null
+                            disabled   : config.hasOwnProperty('disabled') ? config.disabled === true : false,
+                            description: config.hasOwnProperty('description') ? config.description : null
                         };
 
                         options.push(option);
@@ -87,7 +91,7 @@
 </script>
 
 <style lang="scss">
-.select-field {
+.input-select {
     cursor           : pointer;
     background-color : var(--element-hover-bg-color);
     border-radius    : var(--button-border-radius);
@@ -102,6 +106,9 @@
         position         : relative;
         width            : 100%;
         z-index          : 1;
+        overflow         : hidden;
+        text-overflow    : ellipsis;
+        color            : var(--element-fg-color);
     }
 
     &.disabled {
diff --git a/src/vue/Components/Form/SliderField.vue b/src/vue/Components/Form/SliderField.vue
index 098ff66..729c113 100644
--- a/src/vue/Components/Form/SliderField.vue
+++ b/src/vue/Components/Form/SliderField.vue
@@ -7,7 +7,7 @@
                :id="id"
                :name="name"
                v-model="model"
-               v-on="listeners"/>
+               v-on="listeners" />
     </span>
 </template>
 
@@ -42,11 +42,11 @@
 
         computed: {
             getClassNames() {
-                return 'input-slider ' + (this.value ? 'on':'off');
+                return 'input-slider ' + (this.value ? 'on' : 'off');
             },
             getTitle() {
                 if(this.title.length === 0) {
-                    return LocalisationService.translate(this.value ? 'InputSliderOn':'InputSliderOff');
+                    return LocalisationService.translate(this.value ? 'InputSliderOn' : 'InputSliderOff');
                 }
 
                 return LocalisationService.translate(this.title);
@@ -90,39 +90,46 @@
     display     : inline-flex;
     align-items : center;
     width       : 1.75em;
-    height      : 1em;
+    height      : 1.1em;
+    min-width   : 1.75em;
     cursor      : pointer;
+    flex-shrink : 0;
+    flex-grow   : 0;
 
     .input-slider-bar {
         margin           : 0;
-        background-color : var(--element-hover-bg-color);
-        border-radius    : var(--button-border-radius-large);
-        border           : 2px solid var(--element-hover-bg-color);
+        background-color : var(--slider-bg-color);
+        border-radius    : var(--slider-border-radius);
+        border           : 1px solid var(--slider-br-color);
         width            : 100%;
         display          : inline-block;
         height           : 100%;
     }
 
     .input-slider-button {
-        background-color : var(--element-fg-color);
-        border-radius    : var(--button-border-radius-large);
+        background-color : var(--slider-fg-color);
+        border-radius    : var(--slider-border-radius);
+        border           : 1px solid var(--slider-br-color);
         position         : absolute;
         top              : 2px;
         left             : 2px;
-        height           : calc(1em - 4px);
-        width            : calc(1em - 4px);
+        height           : calc(1.1em - 4px);
+        width            : calc(1.1em - 4px);
         transition       : left .15s ease-in-out;
         box-sizing       : border-box;
+        overflow         : hidden;
     }
 
     &.on {
         .input-slider-bar {
-            background-color : var(--element-active-fg-color);
-            border           : 2px solid var(--element-active-fg-color);
+            background-color : var(--slider-active-bg-color);
+            border-color     : var(--slider-active-br-color);
         }
 
         .input-slider-button {
-            left : calc(100% - 1em + 2px);
+            left             : calc(100% - 1.1em + 2px);
+            background-color : var(--slider-active-fg-color);
+            border-color     : var(--slider-active-br-color);
         }
     }
 
diff --git a/src/vue/Components/Options/Setting/HelpText.vue b/src/vue/Components/Options/Setting/HelpText.vue
index 52c58cf..d538a5e 100644
--- a/src/vue/Components/Options/Setting/HelpText.vue
+++ b/src/vue/Components/Options/Setting/HelpText.vue
@@ -52,7 +52,7 @@
     position         : relative;
     background-color : var(--button-bg-color);
     color            : var(--button-fg-color);
-    transition       : var(--button-transition), z-index 0s ease-in-out 1s;
+    transition       : var(--button-transition), z-index 0s ease-in-out .25s;
     z-index          : 1;
 
     &.open,
diff --git a/src/vue/Components/Theming/CustomColorSet.vue b/src/vue/Components/Theming/CustomColorSet.vue
index 8d0dbe8..0586f72 100644
--- a/src/vue/Components/Theming/CustomColorSet.vue
+++ b/src/vue/Components/Theming/CustomColorSet.vue
@@ -16,12 +16,16 @@
         props: {
             name  : String,
             type  : String,
-            colors: Object
+            colors: Object,
+            second: {
+                type: String,
+                default: 'hover'
+            }
         },
 
         data() {
             let keyBase  = `${this.name}-${this.type}`,
-                keyHover = `${this.name}-hover-${this.type}`;
+                keyHover = `${this.name}-${this.second}-${this.type}`;
 
             return {
                 defaultBase : this.colors[keyBase],
@@ -35,12 +39,18 @@
 
         computed: {
             label() {
+                if(this.type === 'br') return 'BorderColorLabel';
+
                 return this.type === 'bg' ? 'BackgroundColorLabel':'ForegroundColorLabel';
             },
             baseTitle() {
+                if(this.type === 'br') return 'BorderColorBaseTitle';
+
                 return this.type === 'bg' ? 'BackgroundColorBaseTitle':'ForegroundColorBaseTitle';
             },
             hoverTitle() {
+                if(this.type === 'br') return 'BorderColorHoverTitle';
+
                 return this.type === 'bg' ? 'BackgroundColorHoverTitle':'ForegroundColorHoverTitle';
             },
             baseDisabled() {
diff --git a/src/vue/Components/Theming/CustomTheme.vue b/src/vue/Components/Theming/CustomTheme.vue
index f06b9e3..766d0f0 100644
--- a/src/vue/Components/Theming/CustomTheme.vue
+++ b/src/vue/Components/Theming/CustomTheme.vue
@@ -14,6 +14,10 @@
         <custom-color-set name="button" type="bg" :colors="colors" v-on:update="update"/>
         <custom-color-inherit name="button" type="fg" :colors="colors" v-on:update="update"/>
         <custom-color-set name="button" type="fg" :colors="colors" v-on:update="update"/>
+        <translate tag="h4" say="CustomSliderElement"/>
+        <custom-color-set name="slider" type="bg" second="active" :colors="colors" v-on:update="update"/>
+        <custom-color-set name="slider" type="fg" second="active" :colors="colors" v-on:update="update"/>
+        <custom-color-set name="slider" type="br" second="active" :colors="colors" v-on:update="update"/>
         <translate tag="h4" say="CustomToasts"/>
         <custom-color-toast name="info" label="ToastInfoColors" :colors="colors" v-on:update="update"/>
         <custom-color-toast name="success" label="ToastSuccessColors" :colors="colors" v-on:update="update"/>
diff --git a/src/vue/Components/Tools/Generate.vue b/src/vue/Components/Tools/Generate.vue
index 61e6aef..3de13d6 100644
--- a/src/vue/Components/Tools/Generate.vue
+++ b/src/vue/Components/Tools/Generate.vue
@@ -6,24 +6,24 @@
             </div>
             <div class="options">
                 <div class="option" @click="generatePassword">
-                    <icon icon="redo" font="solid" :spin="generating"/>
+                    <icon icon="redo" font="solid" :spin="generating" />
                 </div>
-                <icon icon="clipboard" @click="copy()" draggable="true" @dragstart="drag($event)"/>
+                <icon icon="clipboard" @click="copy()" draggable="true" @dragstart="drag($event)" />
                 <!--                <icon icon="paste" font="solid"/>-->
             </div>
         </div>
         <div class="generate-password-options">
-            <div class="option">
-                <slider-field id="generate-add-numbers" v-model=" numbers"/>
-                <translate tag="label" for="generate-add-numbers" say="LabelGenerateAddNumbers"/>
+            <div class="option numbers">
+                <slider-field id="generate-add-numbers" v-model=" numbers" />
+                <translate tag="label" for="generate-add-numbers" say="LabelGenerateAddNumbers" />
             </div>
-            <div class="option">
-                <slider-field id="generate-add-special" v-model="special"/>
-                <translate tag="label" for="generate-add-special" say="LabelGenerateAddSpecial"/>
+            <div class="option special">
+                <slider-field id="generate-add-special" v-model="special" />
+                <translate tag="label" for="generate-add-special" say="LabelGenerateAddSpecial" />
             </div>
-            <div class="option">
-                <translate tag="label" for="generate-add-strength" say="LabelGenerateStrength"/>
-                <select-field id="generate-add-strength" v-model="strength" :options="strengthOptions"/>
+            <div class="option strength">
+                <translate tag="label" for="generate-add-strength" say="LabelGenerateStrength" />
+                <select-field id="generate-add-strength" v-model="strength" :options="strengthOptions" />
             </div>
         </div>
     </div>
@@ -31,14 +31,14 @@
 
 <script>
     import LocalisationService from '@js/Services/LocalisationService';
-    import Icon from '@vue/Components/Icon';
-    import ToastService from '@js/Services/ToastService';
-    import ErrorManager from '@js/Manager/ErrorManager';
-    import SliderField from '@vue/Components/Form/SliderField';
-    import Translate from '@vue/Components/Translate';
-    import SelectField from '@vue/Components/Form/SelectField';
-    import MessageService from '@js/Services/MessageService';
-    import SettingsService from "@js/Services/SettingsService";
+    import Icon                from '@vue/Components/Icon';
+    import ToastService        from '@js/Services/ToastService';
+    import ErrorManager        from '@js/Manager/ErrorManager';
+    import SliderField         from '@vue/Components/Form/SliderField';
+    import Translate           from '@vue/Components/Translate';
+    import SelectField         from '@vue/Components/Form/SelectField';
+    import MessageService      from '@js/Services/MessageService';
+    import SettingsService     from '@js/Services/SettingsService';
 
     export default {
         components: {SelectField, Translate, SliderField, Icon},
@@ -101,7 +101,7 @@
             copy() {
                 let data  = this.password,
                     label = LocalisationService.translate('PropertyPassword');
-                    MessageService.send({type: 'clipboard.write', payload: {type: 'password', value: data}}).catch(ErrorManager.catch);
+                MessageService.send({type: 'clipboard.write', payload: {type: 'password', value: data}}).catch(ErrorManager.catch);
 
                 ToastService
                     .success(['PasswordPropertyCopied', label])
@@ -187,35 +187,38 @@
     }
 
     .generate-password-options {
-        display        : grid;
-        margin         : .75rem .5rem 0;
-        grid-auto-flow : column;
+        display             : grid;
+        margin              : .75rem .5rem 0;
+        grid-template-areas : "numbers special" "strength strength";
+        grid-row-gap        : .5rem;
 
         .option {
             display     : flex;
             align-items : center;
+            gap         : .25rem;
 
             label {
-                cursor : pointer;
+                cursor    : pointer;
+                flex-grow : 1;
             }
 
             .input-slider {
-                margin-right : .25rem;
+                font-size : 14px;
             }
 
-            #generate-add-strength {
-                padding       : 0;
-                border        : 0;
-                background    : var(--button-bg-color);
-                color         : var(--button-fg-color);
-                border-radius : var(--button-border-radius);
-                width         : 5rem;
-                margin-left   : .25rem;
-
-                &:hover,
-                &:active {
-                    background : var(--button-hover-bg-color);
-                    color      : var(--button-hover-fg-color);
+            &.numbers {
+                grid-area : numbers;
+            }
+
+            &.special {
+                grid-area : special;
+            }
+
+            &.strength {
+                grid-area : strength;
+
+                .input-select {
+                    flex-grow : 1;
                 }
             }
         }