Adwaita: Gtkscale

- added slider assets for scales with marks
- experimental touch friendly fine-tune mode, grow the trough istead
  of shrinking the slider

gtk/resources/theme/Adwaita/_common.scss

@@ -1211,12 +1211,18 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
 /************
  * GtkScale *
  ************/
-.scale {
+.scale,
+.scale.scale-has-marks-above.scale-has-marks-below,
+.scale.vertical.scale-has-marks-above.scale-has-marks-below {
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 20;
   -GtkRange-trough-border: 2;
   outline-offset: -9px;
   margin: 10px;
+  &.fine-tune {
+    margin: 8px;
+    &.trough { border-radius: 4px; }
+  }
   &.slider {
     //FIXME: better gradient on the slider and hover state
     @include button(normal, $noedge: true);
@@ -1229,6 +1235,7 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
     &:hover {
       @include button(hover, $noedge: true);
       border-color: darken($borders_color,3%);
+      border-radius: 50%; // needed for double marks scales
       box-shadow: inset 0 1px if($variant=='light', white,
                                  transparentize(white,0.85)),
                   inset 0 #{-2px} if($variant=='light', white,
@@ -1236,10 +1243,14 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
                   inset 0 #{-1px} mix($bg_color,$borders_color,70%);
     }
     &:insensitive {
+      border-style: solid; // needed for double marks scales or they'll get
+      border-radius: 50%;  // overridden
       background-image: linear-gradient(to bottom, $insensitive_bg_color);
       box-shadow: none;
     }
     &:backdrop {
+      border-style: solid; // needed for double marks scales or they'll get
+      border-radius: 50%;  // overridden
       border-color: darken($backdrop_borders_color,3%);
       background-image: linear-gradient(to bottom, $backdrop_bg_color);
       box-shadow: none;
@@ -1253,12 +1264,6 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
       border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
                            darken($selected_bg_color,15%)); 
     }
-    &.fine-tune:active { //FIXME: Lapo doesn't like the shrinkage. Bad for touch
-      border: 4px solid transparent; //margin
-      //FIXME: there's a square background under the slider
-      box-shadow: inset 0 2px $borders_edge,
-                  inset 0 0 0 1px darken($selected_borders_color,3%); //border
-    }
   }
   &.trough {
     border-width: 1px;
@@ -1295,6 +1300,56 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
   }
 }
  
+$asset_suffix: if($variant=='dark', '-dark', '');
+@each $d,$dn in ('', 'horz'),
+                ('.vertical', 'vert') {
+  @each $w,$we in  ('scale-has-marks-below','scale_marks_below'),
+                   ('scale-has-marks-above','scale_marks_above') {
+    .scale#{$d}.#{$w} {
+      -GtkScale-slider-length: 20;
+      -GtkRange-slider-width: 24;
+      -GtkRange-trough-border: 2;
+ 
+      @extend %#{$we}_#{$dn};
+
+      @each $s,$as in ('',''),
+                      (':hover','-hover'),
+                      (':active','-active'),
+                      (':insensitive','-insensitive'),
+                      (':backdrop','-backdrop'),
+                      (':backdrop:insensitive','-backdrop-insensitive') {
+        &.slider#{$s} {
+          $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
+          border-style: none;
+          border-radius: 0;
+          background-color: transparent;
+          background-image: -gtk-scaled(url('#{$_url}.png'),
+                            url('#{$_url}@2.png'));
+          background-repeat: no-repeat;
+          background-position: center;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+
+%scale_marks_above_horz {
+  margin: 14px 10px 10px;
+  &.fine-tune { margin: 12px 8px 8px; }
+}
+%scale_marks_below_horz {
+  margin: 10px 10px 14px;
+  &.fine-tune { margin: 8px 8px 12px; }
+}
+%scale_marks_above_vert {
+  margin: 10px 10px 10px 14px;
+  &.fine-tune { margin: 8px 8px 8px 12px; }
+}
+%scale_marks_below_vert {
+  margin: 10px 14px 10px 10px;
+  &.fine-tune { margin: 8px 12px 8px 8px; }
+}
 
 /*****************
  * Progress bars *

gtk/resources/theme/Adwaita/assets.txt

@@ -70,4 +70,51 @@ radio-mixed-active-dark
 radio-mixed-insensitive-dark
 radio-mixed-backdrop-dark
 radio-mixed-backdrop-insensitive-dark
-
+slider-horz-scale-has-marks-below
+slider-horz-scale-has-marks-below-hover
+slider-horz-scale-has-marks-below-active
+slider-horz-scale-has-marks-below-insensitive
+slider-horz-scale-has-marks-below-backdrop
+slider-horz-scale-has-marks-below-backdrop-insensitive
+slider-vert-scale-has-marks-below
+slider-vert-scale-has-marks-below-hover
+slider-vert-scale-has-marks-below-active
+slider-vert-scale-has-marks-below-insensitive
+slider-vert-scale-has-marks-below-backdrop
+slider-vert-scale-has-marks-below-backdrop-insensitive
+slider-horz-scale-has-marks-above
+slider-horz-scale-has-marks-above-hover
+slider-horz-scale-has-marks-above-active
+slider-horz-scale-has-marks-above-insensitive
+slider-horz-scale-has-marks-above-backdrop
+slider-horz-scale-has-marks-above-backdrop-insensitive
+slider-vert-scale-has-marks-above
+slider-vert-scale-has-marks-above-hover
+slider-vert-scale-has-marks-above-active
+slider-vert-scale-has-marks-above-insensitive
+slider-vert-scale-has-marks-above-backdrop
+slider-vert-scale-has-marks-above-backdrop-insensitive
+slider-horz-scale-has-marks-below-dark
+slider-horz-scale-has-marks-below-hover-dark
+slider-horz-scale-has-marks-below-active-dark
+slider-horz-scale-has-marks-below-insensitive-dark
+slider-horz-scale-has-marks-below-backdrop-dark
+slider-horz-scale-has-marks-below-backdrop-insensitive-dark
+slider-vert-scale-has-marks-below-dark
+slider-vert-scale-has-marks-below-hover-dark
+slider-vert-scale-has-marks-below-active-dark
+slider-vert-scale-has-marks-below-insensitive-dark
+slider-vert-scale-has-marks-below-backdrop-dark
+slider-vert-scale-has-marks-below-backdrop-insensitive-dark
+slider-horz-scale-has-marks-above-dark
+slider-horz-scale-has-marks-above-hover-dark
+slider-horz-scale-has-marks-above-active-dark
+slider-horz-scale-has-marks-above-insensitive-dark
+slider-horz-scale-has-marks-above-backdrop-dark
+slider-horz-scale-has-marks-above-backdrop-insensitive-dark
+slider-vert-scale-has-marks-above-dark
+slider-vert-scale-has-marks-above-hover-dark
+slider-vert-scale-has-marks-above-active-dark
+slider-vert-scale-has-marks-above-insensitive-dark
+slider-vert-scale-has-marks-above-backdrop-dark
+slider-vert-scale-has-marks-above-backdrop-insensitive-dark

gtk/resources/theme/Adwaita/gtk-contained-dark.css

@@ -1539,13 +1539,25 @@ GtkCheckButton.text-button:selected {
 /************
  * GtkScale *
  ************/
-.scale {
+.scale,
+.scale.scale-has-marks-above.scale-has-marks-below,
+.scale.vertical.scale-has-marks-above.scale-has-marks-below {
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 20;
   -GtkRange-trough-border: 2;
   outline-offset: -9px;
   margin: 10px; }
-  .scale.slider {
+  .scale.fine-tune,
+  .scale.scale-has-marks-above.scale-has-marks-below.fine-tune,
+  .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune {
+    margin: 8px; }
+    .scale.fine-tune.trough,
+    .scale.scale-has-marks-above.scale-has-marks-below.fine-tune.trough,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough {
+      border-radius: 4px; }
+  .scale.slider,
+  .scale.scale-has-marks-above.scale-has-marks-below.slider,
+  .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
@@ -1557,7 +1569,9 @@ GtkCheckButton.text-button:selected {
     border-radius: 50%;
     border-color: #151717;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px #393f3f, inset 0 -1px #2a2f2f; }
-    .scale.slider:hover {
+    .scale.slider:hover,
+    .scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
       border-width: 1px;
       border-style: solid;
       color: #eeeeec;
@@ -1567,15 +1581,26 @@ GtkCheckButton.text-button:selected {
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       border-color: #151717;
+      border-radius: 50%;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(255, 255, 255, 0.14), inset 0 -1px #303535; }
-    .scale.slider:insensitive {
+    .scale.slider:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.slider:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:insensitive {
+      border-style: solid;
+      border-radius: 50%;
       background-image: linear-gradient(to bottom, #323636);
       box-shadow: none; }
-    .scale.slider:backdrop {
+    .scale.slider:backdrop,
+    .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
+      border-style: solid;
+      border-radius: 50%;
       border-color: #171a1a;
       background-image: linear-gradient(to bottom, #393f3f);
       box-shadow: none; }
-    .scale.slider:backdrop:insensitive {
+    .scale.slider:backdrop:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
       color: #454c4c;
@@ -1583,38 +1608,285 @@ GtkCheckButton.text-button:selected {
       background-image: linear-gradient(to bottom, #393f3f);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       border-color: #454c4c; }
-    .scale.slider:active {
+    .scale.slider:active,
+    .scale.scale-has-marks-above.scale-has-marks-below.slider:active,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
       border: 1px solid #14375d; }
-    .scale.slider.fine-tune:active {
-      border: 4px solid transparent;
-      box-shadow: inset 0 2px rgba(238, 238, 236, 0.1), inset 0 0 0 1px #0c233b; }
-  .scale.trough {
+  .scale.trough,
+  .scale.scale-has-marks-above.scale-has-marks-below.trough,
+  .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
     border-width: 1px;
     border-style: solid;
     border-radius: 3px;
     border-color: #1c1f1f;
     background-color: #2d3232;
     box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    .scale.trough.highlight {
+    .scale.trough.highlight,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
       border-color: #0f2b48;
       background-color: #215d9c;
       box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-      .scale.trough.highlight:backdrop {
+      .scale.trough.highlight:backdrop,
+      .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
         border-color: #215d9c;
         background-color: #215d9c;
         box-shadow: none; }
-    .scale.trough:insensitive, .scale.trough.hilight:insensitive {
+    .scale.trough:insensitive, .scale.trough.hilight:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
       border-color: #1c1f1f;
       background-color: #323636;
       box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-    .scale.trough:backdrop {
+    .scale.trough:backdrop,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
       border-color: #1e2222;
       background-color: #2a2f2f;
       box-shadow: none; }
-    .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive {
+    .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
       border-color: #454c4c;
       background-color: #393f3f; }
 
+.scale.scale-has-marks-below {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 24;
+  -GtkRange-trough-border: 2; }
+  .scale.scale-has-marks-below.slider {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-dark.png"), url("assets/slider-horz-scale-has-marks-below-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-below.slider:hover {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-hover-dark.png"), url("assets/slider-horz-scale-has-marks-below-hover-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-below.slider:active {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-active-dark.png"), url("assets/slider-horz-scale-has-marks-below-active-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-below.slider:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-below.slider:backdrop {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-dark.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-below.slider:backdrop:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+
+.scale.scale-has-marks-above {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 24;
+  -GtkRange-trough-border: 2; }
+  .scale.scale-has-marks-above.slider {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-above.slider:hover {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover-dark.png"), url("assets/slider-horz-scale-has-marks-above-hover-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-above.slider:active {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active-dark.png"), url("assets/slider-horz-scale-has-marks-above-active-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-above.slider:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-above.slider:backdrop {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-dark.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.scale-has-marks-above.slider:backdrop:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+
+.scale.vertical.scale-has-marks-below {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 24;
+  -GtkRange-trough-border: 2; }
+  .scale.vertical.scale-has-marks-below.slider {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-dark.png"), url("assets/slider-vert-scale-has-marks-below-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-below.slider:hover {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-hover-dark.png"), url("assets/slider-vert-scale-has-marks-below-hover-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-below.slider:active {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-active-dark.png"), url("assets/slider-vert-scale-has-marks-below-active-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-below.slider:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-below.slider:backdrop {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-dark.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-below.slider:backdrop:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+
+.scale.vertical.scale-has-marks-above {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 24;
+  -GtkRange-trough-border: 2; }
+  .scale.vertical.scale-has-marks-above.slider {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-dark.png"), url("assets/slider-vert-scale-has-marks-above-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-above.slider:hover {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-hover-dark.png"), url("assets/slider-vert-scale-has-marks-above-hover-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-above.slider:active {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-active-dark.png"), url("assets/slider-vert-scale-has-marks-above-active-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-above.slider:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-above.slider:backdrop {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-dark.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+  .scale.vertical.scale-has-marks-above.slider:backdrop:insensitive {
+    border-style: none;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark@2.png"));
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: none; }
+
+.scale.scale-has-marks-above {
+  margin: 14px 10px 10px; }
+  .fine-tune.scale.scale-has-marks-above {
+    margin: 12px 8px 8px; }
+
+.scale.scale-has-marks-below {
+  margin: 10px 10px 14px; }
+  .fine-tune.scale.scale-has-marks-below {
+    margin: 8px 8px 12px; }
+
+.scale.vertical.scale-has-marks-above {
+  margin: 10px 10px 10px 14px; }
+  .fine-tune.scale.vertical.scale-has-marks-above {
+    margin: 8px 8px 8px 12px; }
+
+.scale.vertical.scale-has-marks-below {
+  margin: 10px 14px 10px 10px; }
+  .fine-tune.scale.vertical.scale-has-marks-below {
+    margin: 8px 12px 8px 8px; }
+
 /*****************
  * Progress bars *
  *****************/