[gtk+] Adwaita: fix scale theming

[Lapo Calamandrei <lapo src gnome org>]

commit 5ae7f62f25c20e24e642c99c1409900d403462b3
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu May 19 17:05:46 2016 +0200

    Adwaita: fix scale theming
    
    rely on toplevel styleclass for scale with marks.
    
    See https://bugzilla.gnome.org/show_bug.cgi?id=766440

 gtk/theme/Adwaita/_common.scss           |   64 +++++++---------
 gtk/theme/Adwaita/gtk-contained-dark.css |  122 +++++++++++++-----------------
 gtk/theme/Adwaita/gtk-contained.css      |  122 +++++++++++++-----------------
 3 files changed, 132 insertions(+), 176 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 779f84e..ee73853 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2789,7 +2789,6 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
 
 scale {
   // sizing
-
   $_marks_lenght: 6px;
   $_marks_distance: 6px;
 
@@ -2802,6 +2801,7 @@ scale {
   highlight { margin: -1px; }
 
   // the slider is inside the trough, so to have make it bigger there's a negative margin
+
   slider {
     min-height: 18px;
     min-width: 18px;
@@ -2982,17 +2982,17 @@ scale {
 
   @each $dir_class, $dir_infix in ('horizontal', 'horz'),
                                   ('vertical', 'vert') {
-    @each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
-                                      ('scale-has-marks-below', ':first-child:not(:only-child)') {
+    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
       @each $state, $state_infix in ('', ''),
-                               (':hover', '-hover'),
-                               (':active', '-active'),
-                               (':disabled', '-insensitive'),
-                               (':backdrop', '-backdrop'),
-                               (':backdrop:disabled', '-backdrop-insensitive') {
-        &.#{$dir_class} {
-          %#{$marks_infix}-#{$dir_infix},
-          contents#{$nth_child} > trough > slider {
+                                    (':hover', '-hover'),
+                                    (':active', '-active'),
+                                    (':disabled', '-insensitive'),
+                                    (':backdrop', '-backdrop'),
+                                    (':backdrop:disabled', '-backdrop-insensitive') {
+        &.#{$dir_class}.#{$marks_class} {
+
+          slider {
             &#{$state} {
               // an asymmetric slider asset is used here, so the margins are uneven, the smaller
               // margin is set on the point side.
@@ -3005,6 +3005,7 @@ scale {
               background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset} 2 png'));
 
               $_scale_slider_bg_pos: bottom;
+
               @if $dir_class == 'horizontal' {
                 min-height: 26px;
                 min-width: 22px;
@@ -3041,8 +3042,7 @@ scale {
             }
           }
 
-          @at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
-          &.fine-tune contents#{$nth_child} > trough > slider {
+          &.fine-tune slider {
             // bigger negative margins to make the trough grow here as well
             margin: -7px;
 
@@ -3083,11 +3083,11 @@ scale {
       }
 
       slider {
-        &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-          @extend %scale-has-marks-above-horz;
-
-          margin-bottom: -15px;
-          margin-top: 6px;
+        &:dir(ltr), &:dir(rtl) { // specificity bumb
+          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+            margin-bottom: -15px;
+            margin-top: 6px;
+          }
         }
       }
     }
@@ -3105,8 +3105,6 @@ scale {
 
         slider {
           &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            @extend %scale-has-marks-below-vert;
-
             margin-left: -15px;
             margin-right: 6px;
           }
@@ -3125,8 +3123,6 @@ scale {
 
         slider {
           &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            @extend %scale-has-marks-above-vert;
-
             margin-right: -15px;
             margin-left: 6px;
           }
@@ -3136,18 +3132,18 @@ scale {
 
     &.fine-tune {
       &.horizontal {
-        padding: 0 0 12px 0;
+        &:dir(ltr), &:dir(rtl) { // specificity bump
+          padding: 0 0 12px 0;
 
-        trough {
-          padding-bottom: 7px;
-          background-position: 0 -6px;
-        }
-
-        slider {
-          @extend %scale-has-marks-above-horz-fine-tune;
+          trough {
+            padding-bottom: 7px;
+            background-position: 0 -6px;
+          }
 
-          margin-bottom: -15px;
-          margin-top: 6px;
+          slider {
+            margin-bottom: -15px;
+            margin-top: 6px;
+          }
         }
       }
 
@@ -3161,8 +3157,6 @@ scale {
           }
 
           slider {
-            @extend %scale-has-marks-below-vert-fine-tune;
-
             margin-left: -15px;
             margin-right: 6px;
           }
@@ -3177,8 +3171,6 @@ scale {
           }
 
           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 c5bda20..11a444d 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -3285,8 +3285,7 @@ scale {
     min-width: 6px; }
   scale.vertical.fine-tune indicator {
     min-width: 3px; }
-  scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal 
slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-before:not(.marks-after) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3298,11 +3297,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:hover, scale.color.horizontal slider:hover:backdrop:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.horizontal.marks-before:not(.marks-after) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3314,11 +3312,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:active:backdrop:disabled, scale.color.horizontal slider:active,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.horizontal.marks-before:not(.marks-after) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3330,11 +3327,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.horizontal.marks-before:not(.marks-after) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3346,11 +3342,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:backdrop,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.horizontal.marks-before:not(.marks-after) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3362,11 +3357,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:backdrop:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3378,10 +3372,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3393,10 +3387,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.horizontal.marks-after:not(.marks-before) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3408,10 +3402,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
+  scale.horizontal.marks-after:not(.marks-before) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3423,10 +3417,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.horizontal.marks-after:not(.marks-before) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3438,10 +3432,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.horizontal.marks-after:not(.marks-before) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3453,10 +3447,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3468,11 +3462,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, 
scale.color.vertical:dir(rtl) slider,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3484,11 +3477,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:hover:backdrop:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.vertical.marks-before:not(.marks-after) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3500,11 +3492,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:active:backdrop:disabled, scale.color.vertical:dir(rtl) slider:active,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.vertical.marks-before:not(.marks-after) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3516,11 +3507,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.vertical.marks-before:not(.marks-after) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3532,11 +3522,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:backdrop,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.vertical.marks-before:not(.marks-after) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3548,11 +3537,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:backdrop:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3564,11 +3552,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, 
scale.color.vertical:dir(ltr) slider,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3580,11 +3567,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:hover:backdrop:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.vertical.marks-after:not(.marks-before) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3596,11 +3582,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:active:backdrop:disabled, scale.color.vertical:dir(ltr) slider:active,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.vertical.marks-after:not(.marks-before) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3612,11 +3597,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.vertical.marks-after:not(.marks-before) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3628,11 +3612,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:backdrop,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.vertical.marks-after:not(.marks-before) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3644,11 +3627,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:backdrop:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3660,7 +3642,7 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
   scale.color {
@@ -3676,7 +3658,7 @@ scale {
         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:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider {
+      scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, 
scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, 
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal 
slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal 
slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) {
         margin-bottom: -15px;
         margin-top: 6px; }
     scale.color.vertical:dir(ltr) {
@@ -3699,12 +3681,12 @@ scale {
       scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, 
scale.color.vertical:dir(rtl) slider {
         margin-right: -15px;
         margin-left: 6px; }
-    scale.color.fine-tune.horizontal {
+    scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) {
       padding: 0 0 12px 0; }
-      scale.color.fine-tune.horizontal trough {
+      scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough {
         padding-bottom: 7px;
         background-position: 0 -6px; }
-      scale.color.fine-tune.horizontal slider {
+      scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider {
         margin-bottom: -15px;
         margin-top: 6px; }
     scale.color.fine-tune.vertical:dir(ltr) {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 1123697..1c0bcb1 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3314,8 +3314,7 @@ scale {
     min-width: 6px; }
   scale.vertical.fine-tune indicator {
     min-width: 3px; }
-  scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal 
slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-before:not(.marks-after) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3327,11 +3326,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:hover, scale.color.horizontal slider:hover:backdrop:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.horizontal.marks-before:not(.marks-after) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3343,11 +3341,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:active:backdrop:disabled, scale.color.horizontal slider:active,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.horizontal.marks-before:not(.marks-after) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3359,11 +3356,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.horizontal.marks-before:not(.marks-after) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3375,11 +3371,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:backdrop,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.horizontal.marks-before:not(.marks-after) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3391,11 +3386,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.color.horizontal slider:backdrop:disabled,
-  scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3407,10 +3401,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > 
trough > slider {
+  scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-top: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3422,10 +3416,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.horizontal.marks-after:not(.marks-before) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3437,10 +3431,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
+  scale.horizontal.marks-after:not(.marks-before) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3452,10 +3446,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.horizontal.marks-after:not(.marks-before) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3467,10 +3461,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.horizontal.marks-after:not(.marks-before) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3482,10 +3476,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3497,11 +3491,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+  scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-bottom: -11px; }
-  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, 
scale.color.vertical:dir(rtl) slider,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3513,11 +3506,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:hover:backdrop:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.vertical.marks-before:not(.marks-after) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3529,11 +3521,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:active:backdrop:disabled, scale.color.vertical:dir(rtl) slider:active,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.vertical.marks-before:not(.marks-after) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3545,11 +3536,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.vertical.marks-before:not(.marks-after) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3561,11 +3551,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:backdrop,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.vertical.marks-before:not(.marks-after) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3577,11 +3566,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(rtl) slider:backdrop:disabled,
-  scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3593,11 +3581,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune 
contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-before:not(.marks-after).fine-tune slider {
     margin: -7px;
     margin-left: -11px; }
-  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, 
scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, 
scale.color.vertical:dir(ltr) slider,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before) slider {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3609,11 +3596,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:hover:backdrop:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.vertical.marks-after:not(.marks-before) slider:hover {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3625,11 +3611,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:active:backdrop:disabled, scale.color.vertical:dir(ltr) slider:active,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.vertical.marks-after:not(.marks-before) slider:active {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3641,11 +3626,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.vertical.marks-after:not(.marks-before) slider:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3657,11 +3641,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:backdrop,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.vertical.marks-after:not(.marks-before) slider:backdrop {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3673,11 +3656,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
-  scale.color.vertical:dir(ltr) slider:backdrop:disabled,
-  scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled {
     margin: -10px;
     border-style: none;
     border-radius: 0;
@@ -3689,7 +3671,7 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune 
contents:first-child:not(:only-child) > trough > slider {
+  scale.vertical.marks-after:not(.marks-before).fine-tune slider {
     margin: -7px;
     margin-right: -11px; }
   scale.color {
@@ -3705,7 +3687,7 @@ scale {
         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:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider {
+      scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, 
scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, 
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal 
slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal 
slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) {
         margin-bottom: -15px;
         margin-top: 6px; }
     scale.color.vertical:dir(ltr) {
@@ -3728,12 +3710,12 @@ scale {
       scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, 
scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, 
scale.color.vertical:dir(rtl) slider {
         margin-right: -15px;
         margin-left: 6px; }
-    scale.color.fine-tune.horizontal {
+    scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) {
       padding: 0 0 12px 0; }
-      scale.color.fine-tune.horizontal trough {
+      scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough {
         padding-bottom: 7px;
         background-position: 0 -6px; }
-      scale.color.fine-tune.horizontal slider {
+      scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider {
         margin-bottom: -15px;
         margin-top: 6px; }
     scale.color.fine-tune.vertical:dir(ltr) {