[gtk+] Adwaita: gtkcolorscale styling.

[Lapo Calamandrei <lapo src gnome org>]

commit 85d022080042d86eeef0e680b53660dd229fade9
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Mar 10 13:35:08 2016 +0100

    Adwaita: gtkcolorscale styling.

 gtk/theme/Adwaita/_common.scss           |  124 ++++++++++++++++++++++++-
 gtk/theme/Adwaita/gtk-contained-dark.css |  150 ++++++++++++++++++++++-------
 gtk/theme/Adwaita/gtk-contained.css      |  150 ++++++++++++++++++++++-------
 3 files changed, 348 insertions(+), 76 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 8bc70f1..2e058f5 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2711,8 +2711,8 @@ scale {
                                (':disabled', '-insensitive'),
                                (':backdrop', '-backdrop'),
                                (':backdrop:disabled', '-backdrop-insensitive') {
-        @at-root %#{$marks_infix}-#{$dir_infix},
         &.#{$dir_class} {
+          %#{$marks_infix}-#{$dir_infix},
           contents#{$nth_child} > trough > slider {
             &#{$state} {
               margin: -10px;
@@ -2758,6 +2758,7 @@ scale {
             }
           }
 
+          @at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
           &.fine-tune contents#{$nth_child} > trough > slider {
             margin: -7px;
 
@@ -2777,10 +2778,125 @@ scale {
   }
 
   &.color {
-    &.horizontal { trough { @extend %scale-has-marks-above-horz; }}
+    min-height: 0;
+    min-width: 0;
+
+    trough {
+      background-image: linear-gradient(to top, $borders_color);
+      background-repeat: no-repeat;
+    }
+
+    &.horizontal {
+      padding: 0 0 15px 0;
+
+      trough {
+        padding-bottom: 4px;
+        background-position: 0 -3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      slider {
+        &:hover, &:backdrop, & {
+          @extend %scale-has-marks-above-horz;
+          margin-bottom: -15px;
+          margin-top: 6px;
+        }
+      }
+    }
+
     &.vertical {
-      &:dir(ltr) trough { @extend %scale-has-marks-below-vert; }
-      &:dir(rtl) trough { @extend %scale-has-marks-above-vert; }
+      &:dir(ltr) {
+        padding: 0 0 0 15px;
+
+        trough {
+          padding-left: 4px;
+          background-position: 3px 0;
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        slider {
+          &:hover, &:backdrop, & {
+            @extend %scale-has-marks-below-vert;
+
+            margin-left: -15px;
+            margin-right: 6px;
+          }
+        }
+      }
+
+      &:dir(rtl) {
+        padding: 0 15px 0 0;
+
+        trough {
+          padding-right: 4px;
+          background-position: -3px 0;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        slider {
+          &:hover, &:backdrop, & {
+            @extend %scale-has-marks-above-vert;
+
+            margin-right: -15px;
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+
+    &.fine-tune {
+      &.horizontal {
+        padding: 0 0 12px 0;
+
+        trough {
+          padding-bottom: 7px;
+          background-position: 0 -6px;
+        }
+
+        slider {
+          @extend %scale-has-marks-above-horz-fine-tune;
+
+          margin-bottom: -15px;
+          margin-top: 6px;
+        }
+      }
+
+      &.vertical {
+        &:dir(ltr) {
+          padding: 0 0 0 12px;
+
+          trough {
+            padding-left: 7px;
+            background-position: 6px 0;
+          }
+
+          slider {
+            @extend %scale-has-marks-below-vert-fine-tune;
+
+            margin-left: -15px;
+            margin-right: 6px;
+          }
+        }
+
+        &:dir(rtl) {
+          padding: 0 12px 0 0;
+
+          trough {
+            padding-right: 7px;
+            background-position: -6px 0;
+          }
+
+          slider {
+            @extend %scale-has-marks-above-vert-fine-tune;
+
+            margin-right: -15px;
+            margin-left: 6px;
+          }
+        }
+      }
     }
   }
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index d66e000..d4f31eb 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2859,7 +2859,8 @@ scale {
     min-width: 6px; }
   scale.vertical.fine-tune indicator {
     min-width: 3px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal 
contents:last-child:not(:only-child) > trough > slider {
+  scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2870,10 +2871,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.horizontal slider:hover,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2884,10 +2886,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.horizontal slider:active,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2898,10 +2901,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.horizontal slider:disabled,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2912,10 +2916,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.horizontal slider:backdrop,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2926,10 +2931,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.horizontal slider:backdrop:disabled,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2940,7 +2946,7 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider {
@@ -3027,7 +3033,8 @@ scale {
   scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, 
scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3038,10 +3045,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(rtl) slider:hover,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3052,10 +3060,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(rtl) slider:active,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3066,10 +3075,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(rtl) slider:disabled,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3080,10 +3090,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(rtl) slider:backdrop,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3094,10 +3105,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > 
slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > 
slider:backdrop:disabled {
+  scale.color.vertical:dir(rtl) slider:backdrop:disabled,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3108,10 +3120,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, 
scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3122,10 +3135,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(ltr) slider:hover,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3136,10 +3150,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(ltr) slider:active,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3150,10 +3165,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(ltr) slider:disabled,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3164,10 +3180,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(ltr) slider:backdrop,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3178,10 +3195,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > 
slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > 
slider:backdrop:disabled {
+  scale.color.vertical:dir(ltr) slider:backdrop:disabled,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3192,9 +3210,69 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
+  scale.color {
+    min-height: 0;
+    min-width: 0; }
+    scale.color trough {
+      background-image: linear-gradient(to top, #1c1f1f);
+      background-repeat: no-repeat; }
+    scale.color.horizontal {
+      padding: 0 0 15px 0; }
+      scale.color.horizontal trough {
+        padding-bottom: 4px;
+        background-position: 0 -3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; }
+      scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal 
slider {
+        margin-bottom: -15px;
+        margin-top: 6px; }
+    scale.color.vertical:dir(ltr) {
+      padding: 0 0 0 15px; }
+      scale.color.vertical:dir(ltr) trough {
+        padding-left: 4px;
+        background-position: 3px 0;
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0; }
+      scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider {
+        margin-left: -15px;
+        margin-right: 6px; }
+    scale.color.vertical:dir(rtl) {
+      padding: 0 15px 0 0; }
+      scale.color.vertical:dir(rtl) trough {
+        padding-right: 4px;
+        background-position: -3px 0;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0; }
+      scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider {
+        margin-right: -15px;
+        margin-left: 6px; }
+    scale.color.fine-tune.horizontal {
+      padding: 0 0 12px 0; }
+      scale.color.fine-tune.horizontal trough {
+        padding-bottom: 7px;
+        background-position: 0 -6px; }
+      scale.color.fine-tune.horizontal slider {
+        margin-bottom: -15px;
+        margin-top: 6px; }
+    scale.color.fine-tune.vertical:dir(ltr) {
+      padding: 0 0 0 12px; }
+      scale.color.fine-tune.vertical:dir(ltr) trough {
+        padding-left: 7px;
+        background-position: 6px 0; }
+      scale.color.fine-tune.vertical:dir(ltr) slider {
+        margin-left: -15px;
+        margin-right: 6px; }
+    scale.color.fine-tune.vertical:dir(rtl) {
+      padding: 0 12px 0 0; }
+      scale.color.fine-tune.vertical:dir(rtl) trough {
+        padding-right: 7px;
+        background-position: -6px 0; }
+      scale.color.fine-tune.vertical:dir(rtl) slider {
+        margin-right: -15px;
+        margin-left: 6px; }
 
 /*****************
  * Progress bars *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index e33835b..e40c9dc 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2890,7 +2890,8 @@ scale {
     min-width: 6px; }
   scale.vertical.fine-tune indicator {
     min-width: 3px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal 
contents:last-child:not(:only-child) > trough > slider {
+  scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2901,10 +2902,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.horizontal slider:hover,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2915,10 +2917,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.horizontal slider:active,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2929,10 +2932,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.horizontal slider:disabled,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2943,10 +2947,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.horizontal slider:backdrop,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2957,10 +2962,11 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, 
scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.horizontal slider:backdrop:disabled,
+  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -2971,7 +2977,7 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
     margin: -7px;
     margin-top: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider {
@@ -3058,7 +3064,8 @@ scale {
   scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, 
scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3069,10 +3076,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(rtl) slider:hover,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3083,10 +3091,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(rtl) slider:active,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3097,10 +3106,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(rtl) slider:disabled,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3111,10 +3121,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, 
scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(rtl) slider:backdrop,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3125,10 +3136,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > 
slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > 
slider:backdrop:disabled {
+  scale.color.vertical:dir(rtl) slider:backdrop:disabled,
+  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3139,10 +3151,11 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, 
scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3153,10 +3166,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(ltr) slider:hover,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3167,10 +3181,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(ltr) slider:active,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3181,10 +3196,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(ltr) slider:disabled,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3195,10 +3211,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, 
scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(ltr) slider:backdrop,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3209,10 +3226,11 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > 
slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > 
slider:backdrop:disabled {
+  scale.color.vertical:dir(ltr) slider:backdrop:disabled,
+  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3223,9 +3241,69 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, 
scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
     margin: -7px;
     margin-right: -11px; }
+  scale.color {
+    min-height: 0;
+    min-width: 0; }
+    scale.color trough {
+      background-image: linear-gradient(to top, #9d9d99);
+      background-repeat: no-repeat; }
+    scale.color.horizontal {
+      padding: 0 0 15px 0; }
+      scale.color.horizontal trough {
+        padding-bottom: 4px;
+        background-position: 0 -3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; }
+      scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal 
slider {
+        margin-bottom: -15px;
+        margin-top: 6px; }
+    scale.color.vertical:dir(ltr) {
+      padding: 0 0 0 15px; }
+      scale.color.vertical:dir(ltr) trough {
+        padding-left: 4px;
+        background-position: 3px 0;
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0; }
+      scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider {
+        margin-left: -15px;
+        margin-right: 6px; }
+    scale.color.vertical:dir(rtl) {
+      padding: 0 15px 0 0; }
+      scale.color.vertical:dir(rtl) trough {
+        padding-right: 4px;
+        background-position: -3px 0;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0; }
+      scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider {
+        margin-right: -15px;
+        margin-left: 6px; }
+    scale.color.fine-tune.horizontal {
+      padding: 0 0 12px 0; }
+      scale.color.fine-tune.horizontal trough {
+        padding-bottom: 7px;
+        background-position: 0 -6px; }
+      scale.color.fine-tune.horizontal slider {
+        margin-bottom: -15px;
+        margin-top: 6px; }
+    scale.color.fine-tune.vertical:dir(ltr) {
+      padding: 0 0 0 12px; }
+      scale.color.fine-tune.vertical:dir(ltr) trough {
+        padding-left: 7px;
+        background-position: 6px 0; }
+      scale.color.fine-tune.vertical:dir(ltr) slider {
+        margin-left: -15px;
+        margin-right: 6px; }
+    scale.color.fine-tune.vertical:dir(rtl) {
+      padding: 0 12px 0 0; }
+      scale.color.fine-tune.vertical:dir(rtl) trough {
+        padding-right: 7px;
+        background-position: -6px 0; }
+      scale.color.fine-tune.vertical:dir(rtl) slider {
+        margin-right: -15px;
+        margin-left: 6px; }
 
 /*****************
  * Progress bars *