[gtk+] High Contrast: reimplement gtk scale

[Jakub Steiner <jimmac src gnome org>]

commit e44617b3510ed394604a1624de7d6c5dffd28dfa
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Mar 15 14:22:11 2016 +0100

    High Contrast: reimplement gtk scale
    
    - sync with Adwaita to the new box model
    
    https://bugzilla.gnome.org/show_bug.cgi?id=763613

 gtk/theme/HighContrast/_colors.scss              |    2 +
 gtk/theme/HighContrast/_common.scss              |  270 +++++++++++++++++-----
 gtk/theme/HighContrast/gtk-contained-inverse.css |  271 +++++++++++++++-------
 gtk/theme/HighContrast/gtk-contained.css         |  271 +++++++++++++++-------
 4 files changed, 575 insertions(+), 239 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss
index 41f264a..d77e6d6 100644
--- a/gtk/theme/HighContrast/_colors.scss
+++ b/gtk/theme/HighContrast/_colors.scss
@@ -19,6 +19,7 @@ $warning_color: #f57900;
 $error_color: #cc0000;
 $success_color: #73d216;
 $destructive_color: #ef2929;
+$dark_fill: mix($fg_color, $bg_color, 50%);
 
 $osd_fg_color: #fff;
 $osd_bg_color: transparentize(#000,0.2);
@@ -34,6 +35,7 @@ $backdrop_base_color: $base_color;
 $backdrop_bg_color: $bg_color;
 $backdrop_fg_color: $fg_color;
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($fg_color, $bg_color, 30%);
 
 //apps rely on some named colors to be exported
 /* GTK NAMED COLORS */
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 5757b0f..fb5ee72 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1656,85 +1656,237 @@ checkbutton check {
 /************
  * GtkScale *
  ************/
-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;
-  outline-offset: -9px;
-  -gtk-outline-radius: 4px;
+%scale_trough {
+  border: 2px solid $borders_color;
+  border-radius: 4px;
+  background-color: $dark_fill;
+  box-shadow: none;
+
+  &:disabled {
+    background-color: $insensitive_bg_color;
+  }
+
+  &:backdrop {
+    background-color: $backdrop_dark_fill;
+    border-color: $backdrop_borders_color;
+
+    &:disabled { background-color: $insensitive_bg_color; }
+  }
+
+  // ...on selected list rows
+  row:selected & {
+    &, &:disabled { border-color: $selected_borders_color; }
+  }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+    background-color: transparentize($osd_borders_color, 0.2);
+    box-shadow: none;
+    outline-color: transparentize($osd_fg_color, 0.8);
+
+    &:disabled { background-color: $insensitive_bg_color; }
+  }
+}
+
+%scale_highlight {
+  border: 2px solid $selected_borders_color;
+  border-radius: 4px;
+  background-color: $selected_bg_color;
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &:backdrop {
+    border-color: $backdrop_dark_fill;
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // ...on selected list rows
+  row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+
+    &:disabled { border-color: transparent; }
+  }
+}
+
+scale {
+  // sizing
+
+  $_marks_lenght: 6px;
+  $_marks_distance: 6px;
+
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px;
+
+  fill,
+  highlight { margin: -1px; }
+
+  slider {
+    min-height: 18px;
+    min-width: 18px;
+    margin: -9px;
+  }
 
   &.fine-tune {
-    outline-offset: -7px;
-    -gtk-outline-radius: 6px;
-    & trough {
-      border-radius: 4px;
-      margin: 8px;
+    &.horizontal {
+      padding-top: 9px;
+      padding-bottom: 9px;
+      min-height: 16px;
+    }
+
+    &.vertical {
+      padding-left: 9px;
+      padding-right: 9px;
+      min-width: 16px;
+    }
+
+    slider { margin: -6px; }
+
+    fill,
+    highlight,
+    trough {
+      border-radius: 5px;
+      -gtk-outline-radius: 7px;
     }
   }
+
+  // the backing bit
   trough {
-    slider {
-      //FIXME: better gradient on the slider and hover state
-      @include button(normal, $edge: none);
-      border-radius: 50%;
-      border-color: darken($borders_color,3%);
-      &:hover {
-        @include button(hover, $edge: none);
-        border-color: darken($borders_color,3%);
-        border-radius: 50%; // needed for double marks scales
+    @extend %scale_trough;
+
+    outline-offset: 2px;
+    -gtk-outline-radius: 5px;
+  }
+
+  // the colored part of the backing bit
+  highlight { @extend %scale_highlight; }
+
+  // this is another differently styled part of the backing bit, the most relevant use case is for example
+  // in media player to indicate how much video stream as been cached
+  fill {
+    @extend %scale_trough;
+
+    &, &:backdrop {
+      background-color: $borders_color;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      &, &:backdrop {
+        border-color: transparent;
+        background-color: transparent;
       }
+    }
+
+    // OSD
+    .osd & {
+      background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
       &:disabled {
-        border-style: solid; // needed for double marks scales or they'll get
-        border-radius: 50%;  // overridden
-        background-image: none;
-        box-shadow: none;
+        &, &:backdrop {
+          border-color: transparent;
+          background-color: transparent;
+        }
       }
+    }
+  }
+
+  slider {
+    @include button(normal);
+
+    border: 2px solid $borders_color;
+    border-radius: 100%;
+
+    &:hover { @include button(hover); }
+
+    &:active { border-color: $selected_borders_color; }
+
+    &:disabled { @include button (insensitive); }
+
+    &:backdrop {
+      @include button(backdrop);
+      &:disabled { @include button(backdrop-insensitive); }
+    }
+
+    // ...on selected list rows
+    row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
+
+    // OSD
+    .osd & {
+      @include button(osd);
+      border-color: $osd_borders_color;
+      background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+      &:hover { @include button(osd-hover); }
+
+      &:active { @include button(osd-active); }
+
+      &:disabled { @include button(osd-insensitive); }
+
       &: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: none;
-        box-shadow: none;
-      }
-      &:backdrop:disabled { @include button(backdrop-insensitive);}
-      &:active {
-        border: 1px solid darken($selected_borders_color,3%);
+        @include button(osd-backdrop);
+
+        &:disabled { @include button(osd-backdrop-insensitive); }
       }
     }
   }
-  trough {
-    margin: 10px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 3px;
-    border-color: $borders_color;
-    background-color: mix($bg_color,$borders_color,60%);
-    box-shadow: inset 1px 1px transparentize(black, 0.9);
-    &.highlight {
-      border-color: $selected_borders_color;
-      background-color: $selected_bg_color;
-      &:backdrop {
-         border-color: $insensitive_fg_color;
-         background-color: $insensitive_fg_color;
-         box-shadow: none;
+
+  value { color: gtkalpha(currentColor, 0.4); }
+
+  marks {
+    color: gtkalpha(currentColor, 0.4);
+
+    @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_lenght);
       }
     }
-    &:disabled, &.hilight:disabled {
-      border-color: $insensitive_borders_color;
-      background-color: $insensitive_bg_color;
+  }
+
+  &.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_lenght - 3px);
+      }
     }
-    &:backdrop {
-      border-color: $backdrop_borders_color;
-      background-color: mix($backdrop_bg_color,$borders_color);
-      box-shadow: none;
+  }
+  &.horizontal {
+    indicator {
+      min-height: $_marks_lenght;
+      min-width: 1px;
     }
-    &:backdrop:disabled, .hilight:backdrop:disabled {
-      border-color: $insensitive_fg_color;
-      background-color: $backdrop_bg_color;
+
+    &.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
+  }
+  &.vertical {
+    indicator {
+      min-height: 1px;
+      min-width: $_marks_lenght;
     }
+
+    &.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
   }
 }
 
+
 /*****************
  * Progress bars *
  *****************/
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index e681823..e97f99d 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1813,114 +1813,205 @@ checkbutton check {
 /************
  * GtkScale *
  ************/
-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;
-  outline-offset: -9px;
-  -gtk-outline-radius: 4px; }
-  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 {
-    outline-offset: -7px;
-    -gtk-outline-radius: 6px; }
-    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;
-      margin: 8px; }
-  scale trough slider,
-  scale.scale-has-marks-above.scale-has-marks-below trough slider,
-  scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider {
+scale trough, scale fill {
+  border: 2px solid gray;
+  border-radius: 4px;
+  background-color: gray;
+  box-shadow: none; }
+  scale trough:disabled, scale fill:disabled {
+    background-color: #070707; }
+  scale trough:backdrop, scale fill:backdrop {
+    background-color: #4d4d4d;
+    border-color: #737373; }
+    scale trough:backdrop:disabled, scale fill:backdrop:disabled {
+      background-color: #070707; }
+  row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, 
scale row:selected fill:disabled {
+    border-color: #aaa; }
+  .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
+    border-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0);
+    box-shadow: none;
+    outline-color: rgba(255, 255, 255, 0.2); }
+    .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd 
fill:disabled {
+      background-color: #070707; }
+
+scale highlight {
+  border: 2px solid #aaa;
+  border-radius: 4px;
+  background-color: #aaa; }
+  scale highlight:disabled {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop {
+    border-color: #4d4d4d; }
+    scale highlight:backdrop:disabled {
+      background-color: transparent;
+      border-color: transparent; }
+  row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale 
row:selected highlight:disabled {
+    border-color: #aaa; }
+  .osd scale highlight, scale .osd highlight {
+    border-color: rgba(255, 255, 255, 0.2); }
+    .osd scale highlight:disabled, scale .osd highlight:disabled {
+      border-color: transparent; }
+
+scale {
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px; }
+  scale fill,
+  scale highlight {
+    margin: -1px; }
+  scale slider {
+    min-height: 18px;
+    min-width: 18px;
+    margin: -9px; }
+  scale.fine-tune.horizontal {
+    padding-top: 9px;
+    padding-bottom: 9px;
+    min-height: 16px; }
+  scale.fine-tune.vertical {
+    padding-left: 9px;
+    padding-right: 9px;
+    min-width: 16px; }
+  scale.fine-tune slider {
+    margin: -6px; }
+  scale.fine-tune fill,
+  scale.fine-tune highlight,
+  scale.fine-tune trough {
+    border-radius: 5px;
+    -gtk-outline-radius: 7px; }
+  scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 5px; }
+  scale fill, scale fill:backdrop {
+    background-color: gray;
+    box-shadow: none; }
+  scale fill:disabled, scale fill:disabled:backdrop {
+    border-color: transparent;
+    background-color: transparent; }
+  .osd scale fill {
+    background-color: rgba(255, 255, 255, 0.4); }
+    .osd scale fill:disabled, .osd scale fill:disabled:backdrop {
+      border-color: transparent;
+      background-color: transparent; }
+  scale slider {
     border-width: 2px;
     border-style: solid;
     color: #fff;
     background-image: none;
     background-color: #000;
     border-color: gray;
-    border-radius: 50%;
-    border-color: #787878; }
-    scale trough slider:hover,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:hover,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:hover {
+    border: 2px solid gray;
+    border-radius: 100%; }
+    scale slider:hover {
       border-width: 2px;
       border-style: solid;
       color: #fff;
       background-color: #000;
       border-color: gray;
-      background-image: none;
-      border-color: #787878;
-      border-radius: 50%; }
-    scale trough slider:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled {
+      background-image: none; }
+    scale slider:active {
+      border-color: #aaa; }
+    scale slider:disabled {
+      border-width: 2px;
       border-style: solid;
-      border-radius: 50%;
+      color: gray;
+      background-color: #070707;
+      border-color: #494949;
       background-image: none;
-      box-shadow: none; }
-    scale trough slider:backdrop,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop {
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+    scale slider:backdrop {
+      border-width: 2px;
       border-style: solid;
-      border-radius: 50%;
-      border-color: #6b6b6b;
+      color: #fff;
+      background-color: #000;
+      border-color: #737373;
       background-image: none;
-      box-shadow: none; }
-    scale trough slider:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled {
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+      scale slider:backdrop:disabled {
+        border-width: 2px;
+        border-style: solid;
+        color: gray;
+        background-color: #070707;
+        border-color: #494949;
+        background-image: none; }
+    row:selected scale slider, row:selected scale slider:disabled {
+      border-color: #aaa; }
+    .osd scale slider {
       border-width: 2px;
       border-style: solid;
-      color: gray;
-      background-color: #070707;
-      border-color: #494949;
-      background-image: none; }
-    scale trough slider:active,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:active,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:active {
-      border: 1px solid #a2a2a2; }
-  scale trough,
-  scale.scale-has-marks-above.scale-has-marks-below trough,
-  scale.vertical.scale-has-marks-above.scale-has-marks-below trough {
-    margin: 10px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 3px;
-    border-color: gray;
-    background-color: #333333;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
-    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: #aaa;
-      background-color: #aaa; }
-      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: gray;
-        background-color: gray;
+      color: #fff;
+      background-image: none;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none;
+      border-color: rgba(255, 255, 255, 0.2);
+      background-color: black; }
+      .osd scale slider:hover {
+        border-width: 2px;
+        border-style: solid;
+        color: #fff;
+        background-color: rgba(77, 77, 77, 0.8);
+        border-color: rgba(255, 255, 255, 0.2);
         box-shadow: none; }
-    scale trough:disabled, scale trough.hilight:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled {
-      border-color: #494949;
-      background-color: #070707; }
-    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: #737373;
-      background-color: #404040;
-      box-shadow: none; }
-    scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled {
-      border-color: gray;
-      background-color: #000; }
+      .osd scale slider:active {
+        border-width: 2px;
+        border-style: solid;
+        color: rgba(0, 0, 0, 0.8);
+        background-color: #fff;
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      .osd scale slider:disabled {
+        border-width: 2px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.2);
+        color: gray; }
+      .osd scale slider:backdrop {
+        border-width: 2px;
+        border-style: solid; }
+        .osd scale slider:backdrop:disabled {
+          border-width: 2px;
+          border-style: solid; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 6px;
+      margin-top: -12px; }
+    scale marks.bottom {
+      margin-top: 6px;
+      margin-bottom: -12px; }
+    scale marks.top {
+      margin-right: 6px;
+      margin-left: -12px; }
+    scale marks.bottom {
+      margin-left: 6px;
+      margin-right: -12px; }
+  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 indicator {
+    min-height: 6px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 3px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 6px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 3px; }
 
 /*****************
  * Progress bars *
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 4418aa4..9ce1360 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1813,114 +1813,205 @@ checkbutton check {
 /************
  * GtkScale *
  ************/
-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;
-  outline-offset: -9px;
-  -gtk-outline-radius: 4px; }
-  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 {
-    outline-offset: -7px;
-    -gtk-outline-radius: 6px; }
-    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;
-      margin: 8px; }
-  scale trough slider,
-  scale.scale-has-marks-above.scale-has-marks-below trough slider,
-  scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider {
+scale trough, scale fill {
+  border: 2px solid gray;
+  border-radius: 4px;
+  background-color: gray;
+  box-shadow: none; }
+  scale trough:disabled, scale fill:disabled {
+    background-color: white; }
+  scale trough:backdrop, scale fill:backdrop {
+    background-color: #b3b3b3;
+    border-color: #8d8d8d; }
+    scale trough:backdrop:disabled, scale fill:backdrop:disabled {
+      background-color: white; }
+  row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, 
scale row:selected fill:disabled {
+    border-color: #000; }
+  .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
+    border-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0);
+    box-shadow: none;
+    outline-color: rgba(255, 255, 255, 0.2); }
+    .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd 
fill:disabled {
+      background-color: white; }
+
+scale highlight {
+  border: 2px solid #000;
+  border-radius: 4px;
+  background-color: #000; }
+  scale highlight:disabled {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop {
+    border-color: #b3b3b3; }
+    scale highlight:backdrop:disabled {
+      background-color: transparent;
+      border-color: transparent; }
+  row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale 
row:selected highlight:disabled {
+    border-color: #000; }
+  .osd scale highlight, scale .osd highlight {
+    border-color: rgba(255, 255, 255, 0.2); }
+    .osd scale highlight:disabled, scale .osd highlight:disabled {
+      border-color: transparent; }
+
+scale {
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px; }
+  scale fill,
+  scale highlight {
+    margin: -1px; }
+  scale slider {
+    min-height: 18px;
+    min-width: 18px;
+    margin: -9px; }
+  scale.fine-tune.horizontal {
+    padding-top: 9px;
+    padding-bottom: 9px;
+    min-height: 16px; }
+  scale.fine-tune.vertical {
+    padding-left: 9px;
+    padding-right: 9px;
+    min-width: 16px; }
+  scale.fine-tune slider {
+    margin: -6px; }
+  scale.fine-tune fill,
+  scale.fine-tune highlight,
+  scale.fine-tune trough {
+    border-radius: 5px;
+    -gtk-outline-radius: 7px; }
+  scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 5px; }
+  scale fill, scale fill:backdrop {
+    background-color: gray;
+    box-shadow: none; }
+  scale fill:disabled, scale fill:disabled:backdrop {
+    border-color: transparent;
+    background-color: transparent; }
+  .osd scale fill {
+    background-color: rgba(255, 255, 255, 0.4); }
+    .osd scale fill:disabled, .osd scale fill:disabled:backdrop {
+      border-color: transparent;
+      background-color: transparent; }
+  scale slider {
     border-width: 2px;
     border-style: solid;
     color: #000;
     background-image: none;
     background-color: #fff;
     border-color: gray;
-    border-radius: 50%;
-    border-color: #787878; }
-    scale trough slider:hover,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:hover,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:hover {
+    border: 2px solid gray;
+    border-radius: 100%; }
+    scale slider:hover {
       border-width: 2px;
       border-style: solid;
       color: #000;
       background-color: #fff;
       border-color: gray;
-      background-image: none;
-      border-color: #787878;
-      border-radius: 50%; }
-    scale trough slider:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled {
+      background-image: none; }
+    scale slider:active {
+      border-color: #000; }
+    scale slider:disabled {
+      border-width: 2px;
       border-style: solid;
-      border-radius: 50%;
+      color: gray;
+      background-color: white;
+      border-color: silver;
       background-image: none;
-      box-shadow: none; }
-    scale trough slider:backdrop,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop {
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+    scale slider:backdrop {
+      border-width: 2px;
       border-style: solid;
-      border-radius: 50%;
-      border-color: #858585;
+      color: #000;
+      background-color: #fff;
+      border-color: #8d8d8d;
       background-image: none;
-      box-shadow: none; }
-    scale trough slider:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled {
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+      scale slider:backdrop:disabled {
+        border-width: 2px;
+        border-style: solid;
+        color: gray;
+        background-color: white;
+        border-color: silver;
+        background-image: none; }
+    row:selected scale slider, row:selected scale slider:disabled {
+      border-color: #000; }
+    .osd scale slider {
       border-width: 2px;
       border-style: solid;
-      color: gray;
-      background-color: white;
-      border-color: silver;
-      background-image: none; }
-    scale trough slider:active,
-    scale.scale-has-marks-above.scale-has-marks-below trough slider:active,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:active {
-      border: 1px solid black; }
-  scale trough,
-  scale.scale-has-marks-above.scale-has-marks-below trough,
-  scale.vertical.scale-has-marks-above.scale-has-marks-below trough {
-    margin: 10px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 3px;
-    border-color: gray;
-    background-color: #cccccc;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
-    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: #000;
-      background-color: #000; }
-      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: gray;
-        background-color: gray;
+      color: #fff;
+      background-image: none;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none;
+      border-color: rgba(255, 255, 255, 0.2);
+      background-color: black; }
+      .osd scale slider:hover {
+        border-width: 2px;
+        border-style: solid;
+        color: #fff;
+        background-color: rgba(77, 77, 77, 0.8);
+        border-color: rgba(255, 255, 255, 0.2);
         box-shadow: none; }
-    scale trough:disabled, scale trough.hilight:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled {
-      border-color: silver;
-      background-color: white; }
-    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: #8d8d8d;
-      background-color: silver;
-      box-shadow: none; }
-    scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
-    scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
-    scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled {
-      border-color: gray;
-      background-color: #fff; }
+      .osd scale slider:active {
+        border-width: 2px;
+        border-style: solid;
+        color: rgba(0, 0, 0, 0.8);
+        background-color: #fff;
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      .osd scale slider:disabled {
+        border-width: 2px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.2);
+        color: gray; }
+      .osd scale slider:backdrop {
+        border-width: 2px;
+        border-style: solid; }
+        .osd scale slider:backdrop:disabled {
+          border-width: 2px;
+          border-style: solid; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 6px;
+      margin-top: -12px; }
+    scale marks.bottom {
+      margin-top: 6px;
+      margin-bottom: -12px; }
+    scale marks.top {
+      margin-right: 6px;
+      margin-left: -12px; }
+    scale marks.bottom {
+      margin-left: 6px;
+      margin-right: -12px; }
+  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 indicator {
+    min-height: 6px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 3px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 6px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 3px; }
 
 /*****************
  * Progress bars *