Adwaita: WIP for new range theme

gtk/theme/Adwaita/_common.scss

@@ -2482,40 +2482,43 @@ treeview.view radio {
 }
 
 scale {
-  outline-offset: -10px;
-  -gtk-outline-radius: 7px;
-
+  // sizing
   &.horizontal {
+    min-height: 34px;
+    padding-left: 12px;
+    padding-right: 12px;
+
     trough {
-      margin: 15px 12px;
-      min-height: 3px;
-    }
-    slider {
-      margin: 5px 1px;
-      min-height: 22px;
-      min-width: 22px;
+      padding-left: 2px;
+      padding-right: 2px;
+
+      fill,
+      highlight { margin: -1px -3px; }
     }
   }
 
   &.vertical {
+    min-width: 34px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
     trough {
-      margin: 12px 15px;
-      min-width: 3px;
-    }
-    slider {
-      margin: 1px 5px;
-      min-height: 22px;
-      min-width: 22px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+
+      fill,
+      highlight { margin: -3px -1px; }
     }
   }
 
-  &.fine-tune {
-    outline-offset: -8px;
-    -gtk-outline-radius: 10px;
+  trough {
+    outline-offset: 11px;
+    -gtk-outline-radius: 4px;
 
-    trough {
-      margin: 12px;
-      &, fill, highlight { border-radius: 5px; }
+    slider {
+      min-height: 20px;
+      min-width: 20px;
+      margin: -9px;
     }
   }
 
@@ -2614,10 +2617,11 @@ scale {
 
         @at-root %#{$marks_infix}-#{$dir_infix},
         &.#{$dir_class} trough#{$nth_child} {
-          slider {
+          > slider {
             &#{$state} {
-              margin: 0 1px;
               $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+              //@warn $dir_class;
+              //@warn $marks_pos;
               //@warn $_scale_asset; // uncomment for debuggin purpose...
               border-style: none;
               border-radius: 0;
@@ -2625,20 +2629,33 @@ scale {
               background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
 
               $_scale_slider_bg_pos: bottom;
-              @if $dir_infix == 'horz' {
-                min-height: 25px;
-                min-width: 20px;
+              @if $dir_class == 'horizontal' {
+                min-height: 26px;
+                min-width: 22px;
+
                 @if $marks_infix == 'scale-has-marks-above' {
+                  margin-top: -13px;
+
                   $_scale_slider_bg_pos: top;
-                  margin-top: 1px;
                 }
+                @else { margin-bottom: -13px; }
               }
 
               @else {
-                min-height: 20px;
-                min-width: 25px;
-                @if $marks_infix == 'scale-has-marks-above' { $_scale_slider_bg_pos: left bottom; }
-                @else { $_scale_slider_bg_pos: right bottom; }
+                min-height: 22px;
+                min-width: 26px;
+
+                @if $marks_infix == 'scale-has-marks-above' {
+                  margin-left: -13px;
+
+                  $_scale_slider_bg_pos: left bottom;
+                }
+
+                @else {
+                  margin-right: -13px;
+
+                  $_scale_slider_bg_pos: right bottom;
+                }
               }
 
               background-position: $_scale_slider_bg_pos;