Improve slider ui

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>

3 files changed, 33 insertions, 18 deletions

diff --git a/src/vue/Components/Form/SliderField.vue b/src/vue/Components/Form/SliderField.vue
index 7be03a2..098ff66 100644
--- a/src/vue/Components/Form/SliderField.vue
+++ b/src/vue/Components/Form/SliderField.vue
@@ -45,7 +45,9 @@
                 return 'input-slider ' + (this.value ? 'on':'off');
             },
             getTitle() {
-                if(this.title.length === 0) return;
+                if(this.title.length === 0) {
+                    return LocalisationService.translate(this.value ? 'InputSliderOn':'InputSliderOff');
+                }
 
                 return LocalisationService.translate(this.title);
             },
@@ -93,29 +95,34 @@
 
     .input-slider-bar {
         margin           : 0;
-        background-color : var(--element-active-fg-color);
+        background-color : var(--element-hover-bg-color);
         border-radius    : var(--button-border-radius-large);
+        border           : 2px solid var(--element-hover-bg-color);
         width            : 100%;
         display          : inline-block;
         height           : 100%;
     }
 
     .input-slider-button {
-        background-color : var(--element-active-bg-color);
+        background-color : var(--element-fg-color);
         border-radius    : var(--button-border-radius-large);
-        border           : 2px solid var(--element-active-fg-color);
         position         : absolute;
-        top              : 0;
-        left             : 0;
-        height           : 100%;
-        width            : 1em;
+        top              : 2px;
+        left             : 2px;
+        height           : calc(1em - 4px);
+        width            : calc(1em - 4px);
         transition       : left .15s ease-in-out;
         box-sizing       : border-box;
     }
 
     &.on {
+        .input-slider-bar {
+            background-color : var(--element-active-fg-color);
+            border           : 2px solid var(--element-active-fg-color);
+        }
+
         .input-slider-button {
-            left : calc(100% - 1em);
+            left : calc(100% - 1em + 2px);
         }
     }
 
diff --git a/src/vue/Components/Options/Setting/HelpText.vue b/src/vue/Components/Options/Setting/HelpText.vue
index 20f543c..52c58cf 100644
--- a/src/vue/Components/Options/Setting/HelpText.vue
+++ b/src/vue/Components/Options/Setting/HelpText.vue
@@ -52,12 +52,15 @@
     position         : relative;
     background-color : var(--button-bg-color);
     color            : var(--button-fg-color);
-    transition       : var(--button-transition);
+    transition       : var(--button-transition), z-index 0s ease-in-out 1s;
+    z-index          : 1;
 
     &.open,
     &:hover {
         background-color : var(--button-hover-bg-color);
         color            : var(--button-hover-fg-color);
+        transition       : var(--button-transition);
+        z-index          : 2;
 
         .text {
             background-color : var(--button-hover-bg-color);
@@ -65,12 +68,17 @@
             max-height       : 12rem;
             transition       : max-height .25s ease-in-out;
         }
+
+        .icon-info-circle {
+            color : var(--button-hover-fg-color);
+        }
     }
 
     .icon {
         padding : .5rem;
         display : block;
         cursor  : pointer;
+        color   : var(--info-bg-color);
     }
 
     .icon-exclamation-triangle {
@@ -87,13 +95,13 @@
         transition : background-color 0s .25s linear, color 0s .25s linear, max-height .25s ease-in-out;
 
         span {
-            padding    : .5rem;
-            display    : block;
-            text-align : justify;
-            -webkit-hyphens: auto;
-            -moz-hyphens: auto;
-            -ms-hyphens: auto;
-            hyphens: auto;
+            padding         : .5rem;
+            display         : block;
+            text-align      : justify;
+            -webkit-hyphens : auto;
+            -moz-hyphens    : auto;
+            -ms-hyphens     : auto;
+            hyphens         : auto;
         }
     }
 }
diff --git a/src/vue/Components/Options/Settings.vue b/src/vue/Components/Options/Settings.vue
index a1f7a6e..cfa24cf 100644
--- a/src/vue/Components/Options/Settings.vue
+++ b/src/vue/Components/Options/Settings.vue
@@ -26,7 +26,7 @@
         <div class="setting">
             <slider-field id="clipboard-clear-passwords" v-model="clearClipboard"/>
             <translate tag="label" for="clipboard-clear-passwords" say="SettingsClearClipboardPasswords"/>
-            <help-text type="warning" text="HelpClearClipboardPasswords"/>
+            <help-text type="info" text="HelpClearClipboardPasswords"/>
         </div>
         <div class="setting">
             <translate tag="label" for="clipboard-clear-delay" say="SettingsClearClipboardDelay"/>