Adwaita: fix scale theming

rely on toplevel styleclass for scale with marks.

See https://bugzilla.gnome.org/show_bug.cgi?id=766440

3 files changed, 132 insertions, 176 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6ba6355d81..d6a0534117 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2779,7 +2779,6 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
 
 scale {
   // sizing
-
   $_marks_lenght: 6px;
   $_marks_distance: 6px;
 
@@ -2792,6 +2791,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;
@@ -2959,17 +2959,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.
@@ -2981,6 +2981,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;
@@ -3017,8 +3018,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;
 
@@ -3059,11 +3059,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;
+          }
         }
       }
     }
@@ -3081,8 +3081,6 @@ scale {
 
         slider {
           &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            @extend %scale-has-marks-below-vert;
-
             margin-left: -15px;
             margin-right: 6px;
           }
@@ -3101,8 +3099,6 @@ scale {
 
         slider {
           &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            @extend %scale-has-marks-above-vert;
-
             margin-right: -15px;
             margin-left: 6px;
           }
@@ -3112,18 +3108,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;
+          }
         }
       }
 
@@ -3137,8 +3133,6 @@ scale {
           }
 
           slider {
-            @extend %scale-has-marks-below-vert-fine-tune;
-
             margin-left: -15px;
             margin-right: 6px;
           }
@@ -3153,8 +3147,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 e975dc1fd6..d3b82de6f9 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -3135,8 +3135,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;
@@ -3147,11 +3146,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;
@@ -3162,11 +3160,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;
@@ -3177,11 +3174,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;
@@ -3192,11 +3188,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;
@@ -3207,11 +3202,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;
@@ -3222,10 +3216,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;
@@ -3236,10 +3230,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;
@@ -3250,10 +3244,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;
@@ -3264,10 +3258,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;
@@ -3278,10 +3272,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;
@@ -3292,10 +3286,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;
@@ -3306,11 +3300,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;
@@ -3321,11 +3314,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;
@@ -3336,11 +3328,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;
@@ -3351,11 +3342,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;
@@ -3366,11 +3356,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;
@@ -3381,11 +3370,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;
@@ -3396,11 +3384,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;
@@ -3411,11 +3398,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;
@@ -3426,11 +3412,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;
@@ -3441,11 +3426,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;
@@ -3456,11 +3440,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;
@@ -3471,11 +3454,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;
@@ -3486,7 +3468,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 {
@@ -3502,7 +3484,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) {
@@ -3525,12 +3507,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 4f14f71300..da26a8c7cd 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3164,8 +3164,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;
@@ -3176,11 +3175,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;
@@ -3191,11 +3189,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;
@@ -3206,11 +3203,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;
@@ -3221,11 +3217,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;
@@ -3236,11 +3231,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;
@@ -3251,10 +3245,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;
@@ -3265,10 +3259,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;
@@ -3279,10 +3273,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;
@@ -3293,10 +3287,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;
@@ -3307,10 +3301,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;
@@ -3321,10 +3315,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;
@@ -3335,11 +3329,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;
@@ -3350,11 +3343,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;
@@ -3365,11 +3357,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;
@@ -3380,11 +3371,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;
@@ -3395,11 +3385,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;
@@ -3410,11 +3399,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;
@@ -3425,11 +3413,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;
@@ -3440,11 +3427,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;
@@ -3455,11 +3441,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;
@@ -3470,11 +3455,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;
@@ -3485,11 +3469,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;
@@ -3500,11 +3483,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;
@@ -3515,7 +3497,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 {
@@ -3531,7 +3513,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) {
@@ -3554,12 +3536,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) {