tweak osd scale slider

7 files changed, 46 insertions, 14 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index 235b49e..2c88e00 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -2100,10 +2100,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, rgba(53, 57, 69, 0.95));
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index d9b98c1..e4077f5 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -2099,10 +2099,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, rgba(53, 57, 69, 0.95));
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index d7f1282..575a787 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -2100,10 +2100,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, #353945);
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index 9fc0b32..5a62280 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -2099,10 +2099,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, #353945);
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index 2c4c41f..060ad71 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -2103,10 +2103,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, #353945);
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index a6fd06c..b50c13c 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -2103,10 +2103,14 @@ scale {
       background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
     .osd scale slider {
-      background-image: linear-gradient(to bottom, rgba(53, 57, 69, 0.95));
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+      background-image: linear-gradient(to bottom, #5294E2);
       border-color: #5294E2; }
       .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #5294E2); }
+        background-image: linear-gradient(to bottom, #7eafe9);
+        border-color: #7eafe9; }
       .osd scale slider:active {
         background-image: linear-gradient(to bottom, #2679db);
         border-color: #2679db; }
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index 7e293b5..bb8f166 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -2124,10 +2124,18 @@ scale {
     }
     //OSD sliders
     .osd & {
-      background-image: linear-gradient(to bottom, $osd_bg_color);
+      min-width: 11px;
+      min-height: 11px;
+      margin: -4px;
+
+      background-image: linear-gradient(to bottom, $selected_bg_color);
       border-color: $selected_bg_color;
 
-      &:hover { background-image: linear-gradient(to bottom, $selected_bg_color); }
+      &:hover {
+        background-image: linear-gradient(to bottom, lighten($selected_bg_color, 10%));
+        border-color: lighten($selected_bg_color, 10%)
+;
+      }
       &:active {
         background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
         border-color: darken($selected_bg_color, 10%);