[gtk: 1/2] Adwaita: Fix fine-tune mode for scales with marks

[Timm Bäder <baedert src gnome org>]

commit afbadc5e1bc504d368d34d135a91bf1f33a0eafb
Author: Alex Monday <monday15 gmx com>
Date:   Mon Apr 1 14:48:45 2019 +0500

    Adwaita: Fix fine-tune mode for scales with marks
    
    Remove old fine-tune marks style, add margins for fine-tune marks to
    compensate trough growth, prevent horizontal fine-tune trough growth in
    horizontal direction, prevent vertical fine-tune trough growth in
    vertical direction.
    
    Closes https://gitlab.gnome.org/GNOME/gtk/issues/1799

 gtk/theme/Adwaita/_common.scss           | 34 ++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css | 68 ++++++++++++++++----------------
 gtk/theme/Adwaita/gtk-contained.css      | 68 ++++++++++++++++----------------
 3 files changed, 85 insertions(+), 85 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index e873ac7ccc..06a4d4d55d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3175,18 +3175,6 @@ scale {
 
   value { color: gtkalpha(currentColor, 0.55); }
 
-  &.fine-tune marks {
-    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
-                                                     (bottom, bottom, top),
-                                                     (top, left, right),
-                                                     (bottom, right, left) {
-      &.#{$marks_class} {
-        margin-#{$marks_margin}: $_marks_distance;
-        margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
-      }
-    }
-  }
-
   &.horizontal {
     >marks {
       color: gtkalpha(currentColor, 0.55);
@@ -3203,7 +3191,12 @@ scale {
     >value.top    { margin-bottom: 9px; }
     >value.bottom { margin-top: 9px; }
 
-    &.fine-tune indicator { min-height: ($_marks_length - 3px); }
+    &.fine-tune >marks {
+      &.top { margin-top: 3px; }
+      &.bottom { margin-bottom: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
   }
 
   &.vertical {
@@ -3222,7 +3215,12 @@ scale {
     >value.top    { margin-bottom: 9px; }
     >value.bottom { margin-top: 9px; }
 
-    &.fine-tune indicator { min-width: ($_marks_length - 3px); }
+    &.fine-tune >marks {
+      &.top { margin-left: 3px; }
+      &.bottom { margin-right: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
   }
 
   // *WARNING* scale with marks madness following
@@ -3293,16 +3291,18 @@ scale {
           }
 
           &.fine-tune slider {
-            // bigger negative margins to make the trough grow here as well
-            margin: -7px;
-
             @if $dir_class == 'horizontal' {
+              // bigger negative margins to make the trough grow here as well
+              margin: -7px -10px;
+
               @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
 
               @else { margin-bottom: -11px; }
             }
 
             @else {
+              margin: -10px -7px;
+
               @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
 
               @else { margin-right: -11px; }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 51f77d4493..2ff6b4f962 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1307,14 +1307,6 @@ row:selected scale slider:disabled, row:selected scale slider { border-color: #0
 
 scale value { color: alpha(currentColor,0.55); }
 
-scale.fine-tune marks.top { margin-bottom: 6px; margin-top: -9px; }
-
-scale.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -9px; }
-
-scale.fine-tune marks.top { margin-right: 6px; margin-left: -9px; }
-
-scale.fine-tune marks.bottom { margin-left: 6px; margin-right: -9px; }
-
 scale.horizontal > marks { color: alpha(currentColor,0.55); }
 
 scale.horizontal > marks.top { margin-bottom: 6px; }
@@ -1327,7 +1319,11 @@ scale.horizontal > value.top { margin-bottom: 9px; }
 
 scale.horizontal > value.bottom { margin-top: 9px; }
 
-scale.horizontal.fine-tune indicator { min-height: 3px; }
+scale.horizontal.fine-tune > marks.top { margin-top: 3px; }
+
+scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; }
+
+scale.horizontal.fine-tune > marks indicator { min-height: 3px; }
 
 scale.vertical > marks { color: alpha(currentColor,0.55); }
 
@@ -1341,103 +1337,107 @@ scale.vertical > value.top { margin-bottom: 9px; }
 
 scale.vertical > value.bottom { margin-top: 9px; }
 
-scale.vertical.fine-tune indicator { min-width: 3px; }
+scale.vertical.fine-tune > marks.top { margin-left: 3px; }
+
+scale.vertical.fine-tune > marks.bottom { margin-right: 3px; }
+
+scale.vertical.fine-tune > marks indicator { min-height: 3px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider { margin: -10px; 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")); min-height: 26px; min-width: 22px; margin-top: 
-14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:hover { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:active { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:disabled { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:backdrop { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; 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")); min-height: 26px; 
min-width: 22px; margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; 
}
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-after:not(.marks-before) slider { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:hover { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:active { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:disabled { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:backdrop { margin: -10px; 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")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; 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")); min-height: 26px; 
min-width: 22px; margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: 
none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.vertical.marks-before:not(.marks-after) slider { margin: -10px; 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")); min-height: 22px; min-width: 26px; margin-left: 
-14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:hover { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:active { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:disabled { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:backdrop { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; 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")); min-height: 22px; 
min-width: 26px; margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; 
box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider { margin: -10px; 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")); min-height: 22px; min-width: 26px; margin-right: 
-14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:hover { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:active { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:disabled { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:backdrop { margin: -10px; 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")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; 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")); min-height: 22px; 
min-width: 26px; margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; 
box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.color { min-height: 0; min-width: 0; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 1f548a2bb3..df55c9a302 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1327,14 +1327,6 @@ row:selected scale slider:disabled, row:selected scale slider { border-color: #1
 
 scale value { color: alpha(currentColor,0.55); }
 
-scale.fine-tune marks.top { margin-bottom: 6px; margin-top: -9px; }
-
-scale.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -9px; }
-
-scale.fine-tune marks.top { margin-right: 6px; margin-left: -9px; }
-
-scale.fine-tune marks.bottom { margin-left: 6px; margin-right: -9px; }
-
 scale.horizontal > marks { color: alpha(currentColor,0.55); }
 
 scale.horizontal > marks.top { margin-bottom: 6px; }
@@ -1347,7 +1339,11 @@ scale.horizontal > value.top { margin-bottom: 9px; }
 
 scale.horizontal > value.bottom { margin-top: 9px; }
 
-scale.horizontal.fine-tune indicator { min-height: 3px; }
+scale.horizontal.fine-tune > marks.top { margin-top: 3px; }
+
+scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; }
+
+scale.horizontal.fine-tune > marks indicator { min-height: 3px; }
 
 scale.vertical > marks { color: alpha(currentColor,0.55); }
 
@@ -1361,103 +1357,107 @@ scale.vertical > value.top { margin-bottom: 9px; }
 
 scale.vertical > value.bottom { margin-top: 9px; }
 
-scale.vertical.fine-tune indicator { min-width: 3px; }
+scale.vertical.fine-tune > marks.top { margin-left: 3px; }
+
+scale.vertical.fine-tune > marks.bottom { margin-right: 3px; }
+
+scale.vertical.fine-tune > marks indicator { min-height: 3px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 
0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), 
url("assets/slider-horz-scale-has-marks-above 2 png")); min-height: 26px; min-width: 22px; margin-top: -14px; 
background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover.png"), 
url("assets/slider-horz-scale-has-marks-above-hover 2 png")); min-height: 26px; min-width: 22px; margin-top: 
-14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active.png"), 
url("assets/slider-horz-scale-has-marks-above-active 2 png")); min-height: 26px; min-width: 22px; margin-top: 
-14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), 
url("assets/slider-horz-scale-has-marks-above-insensitive 2 png")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop.png"), 
url("assets/slider-horz-scale-has-marks-above-backdrop 2 png")); min-height: 26px; min-width: 22px; 
margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: 
none; border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive.png"), 
url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive 2 png")); min-height: 26px; min-width: 
22px; margin-top: -14px; background-position: top; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; }
+scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px -10px; margin-top: -11px; }
 
 scale.horizontal.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 
0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), 
url("assets/slider-horz-scale-has-marks-below 2 png")); min-height: 26px; min-width: 22px; margin-bottom: 
-14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below-hover.png"), 
url("assets/slider-horz-scale-has-marks-below-hover 2 png")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below-active.png"), 
url("assets/slider-horz-scale-has-marks-below-active 2 png")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), 
url("assets/slider-horz-scale-has-marks-below-insensitive 2 png")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop.png"), 
url("assets/slider-horz-scale-has-marks-below-backdrop 2 png")); min-height: 26px; min-width: 22px; 
margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: 
none; border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive.png"), 
url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive 2 png")); min-height: 26px; min-width: 
22px; margin-bottom: -14px; background-position: bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; }
+scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px -10px; margin-bottom: -11px; 
}
 
 scale.vertical.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 0; 
background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), 
url("assets/slider-vert-scale-has-marks-above 2 png")); min-height: 22px; min-width: 26px; margin-left: 
-14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above-hover.png"), 
url("assets/slider-vert-scale-has-marks-above-hover 2 png")); min-height: 22px; min-width: 26px; margin-left: 
-14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above-active.png"), 
url("assets/slider-vert-scale-has-marks-above-active 2 png")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), 
url("assets/slider-vert-scale-has-marks-above-insensitive 2 png")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop.png"), 
url("assets/slider-vert-scale-has-marks-above-backdrop 2 png")); min-height: 22px; min-width: 26px; 
margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive.png"), 
url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive 2 png")); min-height: 22px; min-width: 
26px; margin-left: -14px; background-position: left bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; }
+scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -10px -7px; margin-left: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 0; 
background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), 
url("assets/slider-vert-scale-has-marks-below 2 png")); min-height: 22px; min-width: 26px; margin-right: 
-14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below-hover.png"), 
url("assets/slider-vert-scale-has-marks-below-hover 2 png")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below-active.png"), 
url("assets/slider-vert-scale-has-marks-below-active 2 png")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), 
url("assets/slider-vert-scale-has-marks-below-insensitive 2 png")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop.png"), 
url("assets/slider-vert-scale-has-marks-below-backdrop 2 png")); min-height: 22px; min-width: 26px; 
margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; }
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: none; 
border-radius: 0; background-color: transparent; background-image: 
-gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive.png"), 
url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive 2 png")); min-height: 22px; min-width: 
26px; margin-right: -14px; background-position: right bottom; background-repeat: no-repeat; box-shadow: none; 
}
 
-scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; }
+scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -10px -7px; margin-right: -11px; }
 
 scale.color { min-height: 0; min-width: 0; }