From a291003ad4aeb92e475bbc1a52e259ca3c6b3c0d Mon Sep 17 00:00:00 2001
From: Lapo Calamandrei <calamandrei@gmail.com>
Date: Wed, 2 Dec 2015 21:03:03 +0100
Subject: [PATCH] Adwaita: first stab at GtkScale and GtkProgressBar rewrite

...scale has marks stuff missing, coming soon.
---
 gtk/theme/Adwaita/_colors.scss           |   1 +
 gtk/theme/Adwaita/_common.scss           | 388 ++++++----------
 gtk/theme/Adwaita/gtk-contained-dark.css | 556 ++++++-----------------
 gtk/theme/Adwaita/gtk-contained.css      | 552 ++++++----------------
 4 files changed, 403 insertions(+), 1094 deletions(-)

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 52ca0a93dc..6e6039e509 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -15,6 +15,7 @@ $borders_edge: if($variant == 'light', white, transparentize($fg_color, 0.9));
 $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%));
 $top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 35%);
 
 $scrollbar_bg_color: darken($bg_color, 7%);
 
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 0049141750..4cfc9187d0 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2123,306 +2123,178 @@ checkbutton.text-button, radiobutton.text-button {
 /************
  * GtkScale *
  ************/
+
 scale {
   // FIXME: rationalize
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 24;
   -GtkRange-trough-border: 2;
+
   outline-offset: -9px;
-  outline-radius: 4px;
+  outline-radius: 6px;
 
   &.fine-tune {
     outline-offset: -7px;
-    outline-radius: 6px;
-    & highlight,
-    & fill,
-    & trough {
+    outline-radius: 8px;
+
+    trough,
+    fill,
+    highlight {
+      margin: 10px;
       border-radius: 4px;
-      &:not(:first-child):not(:last-child),
-      &:only-child {
-        margin: 10px;
-      }
     }
   }
 
-  & trough,
-  & fill,
-  & highlight {
-    &:not(:first-child):not(:last-child),
-    &:only-child {
-      margin: 12px;
-    }
-  }
+  trough,
+  fill,
+  highlight { margin: 12px; }
 
-  & trough:not(:first-child):not(:last-child),
-  & trough:only-child {
-    & slider { margin: 2px 0; }
-  }
-  &.vertical trough:not(:first-child):not(:last-child),
-  &.vertical trough:only-child {
-    & slider { margin: 0 2px; }
-  }
+  &:not(.vertical) slider { margin: 2px 0; }
+
+  &.vertical slider { margin: 0 2px; }
+
+  trough { @extend %trough; }
+
+  highlight { @extend %highlight; }
+
+  slider {
+    // FIXME: scale-has-marks-* missing
+    $_slider_edge_color: transparentize(black, 0.9);
+    @include button(normal, $edge: $_slider_edge_color);
+    border: 1px solid darken($borders_color, 3%);
+    border-radius: 100%;
+
+    &:hover { @include button(hover, $edge: $_slider_edge_color); }
+
+    &:active { border-color: $selected_borders_color; }
+
+    &:insensitive { @include button (insensitive); }
 
-  & trough {
-    border: 1px solid $borders_color;
-    border-radius: 3px;
-    background-color: mix($bg_color, $borders_color, 60%);
-    box-shadow: inset 1px 1px transparentize(black, 0.9),
-                _widget_edge();
-    & slider {
-      //FIXME: better gradient on the slider and hover state
-      @include button(normal);
-      border: 1px solid;
-      border-radius: 50%;
-      border-color: darken($borders_color,3%);
-      box-shadow: inset 0 1px if($variant=='light', white,
-                                 transparentize(white,0.85)),
-                  inset 0 #{-2px} $bg_color,
-                  inset 0 #{-1px} mix($bg_color, $borders_color, 50%);
-      &:hover {
-        @include button(hover);
-        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,
-                                       transparentize(white, 0.86)),
-                    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;
-      }
-      &:backdrop:insensitive {
-        @include button(backdrop-insensitive);
-      }
-      &:active {
-        @include button(active);
-        border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
-                             darken($selected_bg_color,15%));
-      }
-      //OSD sliders
-      .osd & {
-        @include button(osd);
-        background-color: opacify($osd_bg_color, 1);
-        &:hover { @include button(osd-hover); }
-        &:active { @include button(osd-active); }
-        &:backdrop { @include button(osd-backdrop); }
-      }
-    }
-    & highlight {
-      @include progressbar_fill;
-      border: 1px solid $borders_color;
-      border-radius: 3px;
-      box-shadow: _widget_edge();
-      &.vertical { @include progressbar_fill(vertical); }
-      &:backdrop {
-         border-color: if($variant=='light', $selected_bg_color,
-                                             $selected_borders_color);
-         background-color: $selected_bg_color;
-         box-shadow: none;
-      }
-    }
-    & fill {
-      background: none;
-      background-color: red;
-      border: 1px solid $borders_color;
-      border-radius: 3px;
-      box-shadow: _widget_edge();
-    }
-    &:insensitive, &.vertical:insensitive {
-      border-color: $insensitive_borders_color;
-      background-image: none;
-      background-color: $insensitive_bg_color;
-      box-shadow: _widget_edge();
-    }
     &:backdrop {
-      border-color: $backdrop_borders_color;
-      background-color: mix($backdrop_bg_color, $borders_color, 50%);
-      box-shadow: none;
-    }
-    &:backdrop:insensitive, .highlight:backdrop:insensitive {
-      border-color: $backdrop_borders_color;
-      background-color: $insensitive_bg_color;
+      @include button(backdrop);
+      &:insensitive { @include button(backdrop-insensitive); }
     }
 
-    //OSD troughs
+    // OSD
     .osd & {
-      border-color: $osd_borders_color;
-      box-shadow: none;
-      margin: 9px;
-      &.fine-tune { margin: 7px; }
-      background-color: transparentize($osd_borders_color, 0.2);
-      outline-color: transparentize($osd_fg_color, 0.8);
-      outline-offset: -8px;
-      &.highlight {
-        background-image: none;
-        background-color: $selected_bg_color;
-      }
-      &:insensitive, &:backdrop:insensitive {
-        border-color: transparent;
-        background-color: transparent;
-      }
+      @include button(osd);
+      border-color: darken($osd_borders_color, 3%);
+      background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+      &:hover { @include button(osd-hover); }
+
+      &:active { @include button(osd-active); }
+
+      &:insensitive { @include button(osd-insensitive); }
+
       &:backdrop {
-        border-color: $osd_borders_color;
-        background-image: none;
-      }
-    }
-  }
-  // scales on selected list rows
-  row:selected & {
-    border-color: $selected_borders_color;
-    box-shadow: inset 1px 1px transparentize(black, 0.9);
-    &:backdrop { box-shadow: none; }
-    &.highlight:backdrop { border-color: $selected_borders_color; }
-    &:insensitive,
-    &.highlight:insensitive {
-      border-color: $selected_bg_color;
-      box-shadow: none;
-      background-color: mix($selected_fg_color, $selected_bg_color, 50%);
-      background-image: none;
-      &:backdrop { background-color: mix($backdrop_selected_fg_color, $selected_bg_color, 50%); }
-    }
-  }
-}
+        @include button(osd-backdrop);
 
-scale marks {
-  color: gtkalpha(currentColor, 0.5); // marks color
-}
-
-@each $d,$dn in ('', 'horz'),
-                ('.vertical', 'vert') {
-  @each $ws,$w,$we in  (':first-child:not(:last-child)','scale-has-marks-below','scale_marks_below'),
-                       (':not(:first-child):last-child','scale-has-marks-above','scale_marks_above') {
-    scale#{$d} {
-      &.fine-tune trough#{$ws} { @extend %#{$we}_#{$dn}_ft; }
-      & trough#{$ws} {
-        @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;
-          }
-        }
+        &:insensitive { @include button(osd-backdrop-insensitive); }
       }
     }
   }
 }
 
-%scale_marks_above_horz { margin: 14px 10px 10px 10px; }
-%scale_marks_below_horz { margin: 10px 10px 14px 10px; }
-%scale_marks_above_vert { margin: 10px 10px 10px 14px; }
-%scale_marks_below_vert { margin: 10px 14px 10px 10px; }
-%scale_marks_above_horz_ft { margin: 12px  8px  8px  8px; }
-%scale_marks_below_horz_ft { margin:  8px  8px 12px  8px; }
-%scale_marks_above_vert_ft { margin:  8px  8px  8px 12px; }
-%scale_marks_below_vert_ft { margin:  8px 12px  8px  8px; }
+%trough {
+  border: 1px solid $borders_color;
+  border-radius: 3px;
+  background-color: $dark_fill;
+  box-shadow: inset 1px 1px transparentize(black, 0.9),
+              _widget_edge();
+
+  &:insensitive {
+    background-color: $insensitive_bg_color;
+    box-shadow: _widget_edge();
+  }
+
+  &:backdrop {
+    background-color: $backdrop_dark_fill;
+    border-color: $backdrop_borders_color;
+    box-shadow: none;
+    &:insensitive { background-color: $insensitive_bg_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);
+
+    &:insensitive { background-color: $osd_insensitive_bg_color; }
+  }
+}
+
+%highlight {
+  border: 1px solid $selected_borders_color;
+  border-radius: 3px;
+  background-color: $selected_bg_color;
+
+  &:insensitive {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &:backdrop {
+    border-color: if($variant=='light', $selected_bg_color,
+                                        $selected_borders_color);
+    &:insensitive {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+    &:insensitive { border-color: transparent; }
+  }
+}
 
 /*****************
  * Progress bars *
  *****************/
 
 progressbar {
+  // FIXME: insensitive state missing
   padding: 0;
   font-size: smaller;
   color: transparentize($fg_color, 0.6);
-  box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set
-              _widget_edge();                           // here ot it gets
-                                                        // clipped
 
-  &:backdrop {
-    color: $backdrop_insensitive_color;
-  }
-  &.osd {
-    -GtkProgressBar-min-horizontal-bar-height: 3;
-    trough {
-      border-style: none;
-      background-color: transparent;
-      box-shadow: none;
-    }
-  }
+  box-shadow: _widget_edge();      // needs to be set here;
+  &:backdrop { box-shadow: none; }
+
   trough {
-    border: 1px solid $borders_color;
-    border-radius: 3px;
-    background-color: mix($borders_color, $bg_color, 35%);
-    &:backdrop {
-      border-color: $backdrop_borders_color;
-      background-color: $backdrop_dark_fill;
-      box-shadow: 0 1px transparentize(white,1);
+    @extend %trough;
+  }
+
+  &:backdrop trough { @extend %trough:backdrop; } // looks like states are not passed to the trough component here
+
+  progress {
+    @extend %highlight;
+    border-radius: 1.5px;
+    &.left {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    &.right {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+    &.top {
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+    &.bottom {
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
     }
   }
-}
 
-progressbar.horizontal progress {
-  @include progressbar_fill;
-  border: 1px solid $selected_borders_color;
-  border-radius: 1.5px;
-  box-shadow: none; //needed for clipping
-  &.left {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  &.right {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  &.left.right {
-    box-shadow: none;
-  }
+  &:backdrop progress { @extend %highlight:backdrop; } // states not passed here as well
 }
 
-progressbar.vertical progress {
-  @include progressbar_fill(vertical);
-  border: 1px solid $selected_borders_color;
-  border-radius: 1.5px;
-  box-shadow: none; //needed for clipping
-  &.bottom {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    box-shadow: none;
-  }
-  &.top {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
-  &:backdrop {
-    border-color: if($variant=='light', $selected_bg_color,
-                                        $selected_borders_color);
-    background-image: none;
-    background-color: $selected_bg_color;
-    box-shadow: none;
-  }
-  &.osd {
-    background-image: none;
-    background-color: $selected_bg_color;
-    border-style: none;
-    border-radius: 0;
-  }
-}
-
-
 /*************
  * Level Bar *
  *************/
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index a3b1cf4d3d..a23179fa4a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2913,397 +2913,152 @@ scale {
   -GtkRange-slider-width: 24;
   -GtkRange-trough-border: 2;
   outline-offset: -9px;
-  outline-radius: 4px; }
+  outline-radius: 6px; }
   scale.fine-tune {
     outline-offset: -7px;
-    outline-radius: 6px; }
-    scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
+    outline-radius: 8px; }
+    scale.fine-tune trough,
+    scale.fine-tune fill,
+    scale.fine-tune highlight {
+      margin: 10px;
       border-radius: 4px; }
-      scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
-        margin: 10px; }
-  scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
+  scale trough,
+  scale fill,
+  scale highlight {
     margin: 12px; }
-  scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
+  scale:not(.vertical) slider {
     margin: 2px 0; }
-  scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
+  scale.vertical slider {
     margin: 0 2px; }
-  scale trough {
-    border: 1px solid #1c1f1f;
-    border-radius: 3px;
-    background-color: #2d3232;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    scale trough slider {
+  scale slider {
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.3);
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1);
+    border: 1px solid #151717;
+    border-radius: 100%; }
+    scale slider:hover {
       color: #eeeeec;
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #1c1f1f;
-      background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
-      border: 1px solid;
-      border-radius: 50%;
-      border-color: #151717;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px #393f3f, inset 0 -1px #2b2f2f; }
-      scale trough slider:hover {
-        color: #eeeeec;
-        outline-color: rgba(238, 238, 236, 0.3);
-        border-color: #1c1f1f;
-        background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
-        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 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 trough slider:insensitive {
-        border-style: solid;
-        border-radius: 50%;
-        background-image: linear-gradient(to bottom, #333636);
-        box-shadow: none; }
-      scale trough slider:backdrop {
-        border-style: solid;
-        border-radius: 50%;
-        border-color: #181a1a;
-        background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: none; }
-      scale trough slider:backdrop:insensitive {
+      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1); }
+    scale slider:active {
+      border-color: #0f2b48; }
+    scale slider:insensitive {
+      color: #949796;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #333636);
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+      scale slider:insensitive > .label {
+        color: inherit; }
+    scale slider:backdrop {
+      color: #949796;
+      border-color: #1f2222;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
+      scale slider:backdrop:insensitive {
         color: #5d6767;
         border-color: #1f2222;
         background-image: linear-gradient(to bottom, #333636);
         text-shadow: none;
         -gtk-icon-shadow: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
-        scale trough slider:backdrop:insensitive > .label {
+        scale slider:backdrop:insensitive > .label {
           color: inherit; }
-      scale trough slider:active {
-        color: #eeeeec;
-        outline-color: rgba(238, 238, 236, 0.3);
-        border-color: #1c1f1f;
-        background-image: linear-gradient(to bottom, #232727, #292d2d 40%, #2d3232);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-        box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1);
-        border: 1px solid #14375d; }
-      .osd scale trough slider {
-        color: #eeeeec;
+    .osd scale slider {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+      background-clip: padding-box;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+      outline-color: rgba(238, 238, 236, 0.3);
+      border-color: rgba(0, 0, 0, 0.7);
+      background-color: #202526; }
+      .osd scale slider:hover {
+        color: white;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+        background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
         background-clip: padding-box;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         -gtk-icon-shadow: 0 1px black;
-        outline-color: rgba(238, 238, 236, 0.3);
-        background-color: #202526; }
-        .osd scale trough slider:hover {
-          color: white;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
-          background-clip: padding-box;
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-          text-shadow: 0 1px black;
-          -gtk-icon-shadow: 0 1px black;
-          outline-color: rgba(238, 238, 236, 0.3); }
-        .osd scale trough slider:active {
-          color: white;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
-          background-clip: padding-box;
-          box-shadow: none;
-          text-shadow: none;
-          -gtk-icon-shadow: none;
-          outline-color: rgba(238, 238, 236, 0.3); }
-        .osd scale trough slider:backdrop {
-          color: #eeeeec;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
-          background-clip: padding-box;
-          box-shadow: none;
-          text-shadow: none;
-          -gtk-icon-shadow: none; }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
-      border: 1px solid #1c1f1f;
-      border-radius: 3px;
-      box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-      scale trough highlight.vertical {
-        background-image: linear-gradient(to right, #215d9c 2px, #266cb5); }
-      scale trough highlight:backdrop {
-        border-color: #0f2b48;
-        background-color: #215d9c;
-        box-shadow: none; }
-    scale trough fill {
-      background: none;
-      background-color: red;
-      border: 1px solid #1c1f1f;
-      border-radius: 3px;
-      box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-    scale trough:insensitive, scale trough.vertical:insensitive {
-      border-color: #1c1f1f;
-      background-image: none;
-      background-color: #333636;
-      box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-    scale trough:backdrop {
-      border-color: #1f2222;
-      background-color: #2b2f2f;
-      box-shadow: none; }
-    scale trough:backdrop:insensitive, scale trough .highlight:backdrop:insensitive {
-      border-color: #1f2222;
-      background-color: #333636; }
-    .osd scale trough {
-      border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: none;
-      margin: 9px;
-      background-color: rgba(0, 0, 0, 0.5);
-      outline-color: rgba(238, 238, 236, 0.2);
-      outline-offset: -8px; }
-      .osd scale trough.fine-tune {
-        margin: 7px; }
-      .osd scale trough.highlight {
-        background-image: none;
-        background-color: #215d9c; }
-      .osd scale trough:insensitive, .osd scale trough:backdrop:insensitive {
-        border-color: transparent;
-        background-color: transparent; }
-      .osd scale trough:backdrop {
+        outline-color: rgba(238, 238, 236, 0.3); }
+      .osd scale slider:active {
+        color: white;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: none; }
-  row:selected scale {
-    border-color: #0f2b48;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
-    row:selected scale:backdrop {
-      box-shadow: none; }
-    row:selected scale.highlight:backdrop {
-      border-color: #0f2b48; }
-    row:selected scale:insensitive, row:selected scale.highlight:insensitive {
-      border-color: #215d9c;
-      box-shadow: none;
-      background-color: #90aece;
-      background-image: none; }
-      row:selected scale:insensitive:backdrop, row:selected scale.highlight:insensitive:backdrop {
-        background-color: #90aece; }
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+        outline-color: rgba(238, 238, 236, 0.3); }
+      .osd scale slider:insensitive {
+        color: #878a89;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none; }
+      .osd scale slider:backdrop {
+        color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none; }
 
-scale marks {
-  color: alpha(currentColor,0.5); }
+scale trough, progressbar trough {
+  border: 1px solid #1c1f1f;
+  border-radius: 3px;
+  background-color: #2f3434;
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+  scale trough:insensitive, progressbar trough:insensitive {
+    background-color: #333636;
+    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+  scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
+    background-color: #303535;
+    border-color: #1f2222;
+    box-shadow: none; }
+    scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
+      background-color: #333636; }
+  .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2); }
+    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
+      background-color: rgba(53, 57, 58, 0.5); }
 
-scale trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:first-child:not(:last-child) 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child 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 trough:not(:first-child):last-child {
-  margin: 14px 10px 10px 10px; }
-
-scale trough:first-child:not(:last-child) {
-  margin: 10px 10px 14px 10px; }
-
-scale.vertical trough:not(:first-child):last-child {
-  margin: 10px 10px 10px 14px; }
-
-scale.vertical trough:first-child:not(:last-child) {
-  margin: 10px 14px 10px 10px; }
-
-scale.fine-tune trough:not(:first-child):last-child {
-  margin: 12px  8px  8px  8px; }
-
-scale.fine-tune trough:first-child:not(:last-child) {
-  margin: 8px  8px 12px  8px; }
-
-scale.vertical.fine-tune trough:not(:first-child):last-child {
-  margin: 8px  8px  8px 12px; }
-
-scale.vertical.fine-tune trough:first-child:not(:last-child) {
-  margin: 8px 12px  8px  8px; }
+scale highlight, progressbar progress {
+  border: 1px solid #0f2b48;
+  border-radius: 3px;
+  background-color: #215d9c; }
+  scale highlight:insensitive, progressbar progress:insensitive {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
+    border-color: #0f2b48; }
+    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
+      background-color: transparent;
+      border-color: transparent; }
+  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
+    border-color: rgba(0, 0, 0, 0.7); }
+    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
+      border-color: transparent; }
 
 /*****************
  * Progress bars *
@@ -3312,60 +3067,23 @@ progressbar {
   padding: 0;
   font-size: smaller;
   color: rgba(238, 238, 236, 0.4);
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+  box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
   progressbar:backdrop {
-    color: #5d6767; }
-  progressbar.osd {
-    -GtkProgressBar-min-horizontal-bar-height: 3; }
-    progressbar.osd trough {
-      border-style: none;
-      background-color: transparent;
-      box-shadow: none; }
-  progressbar trough {
-    border: 1px solid #1c1f1f;
-    border-radius: 3px;
-    background-color: #2f3434; }
-    progressbar trough:backdrop {
-      border-color: #1f2222;
-      background-color: #303535;
-      box-shadow: 0 1px rgba(255, 255, 255, 0); }
-
-progressbar.horizontal progress {
-  background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
-  border: 1px solid #0f2b48;
-  border-radius: 1.5px;
-  box-shadow: none; }
-  progressbar.horizontal progress.left {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px; }
-  progressbar.horizontal progress.right {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px; }
-  progressbar.horizontal progress.left.right {
     box-shadow: none; }
-
-progressbar.vertical progress {
-  background-image: linear-gradient(to right, #215d9c 2px, #266cb5);
-  border: 1px solid #0f2b48;
-  border-radius: 1.5px;
-  box-shadow: none; }
-  progressbar.vertical progress.bottom {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    box-shadow: none; }
-  progressbar.vertical progress.top {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px; }
-  progressbar.vertical progress:backdrop {
-    border-color: #0f2b48;
-    background-image: none;
-    background-color: #215d9c;
-    box-shadow: none; }
-  progressbar.vertical progress.osd {
-    background-image: none;
-    background-color: #215d9c;
-    border-style: none;
-    border-radius: 0; }
+  progressbar progress {
+    border-radius: 1.5px; }
+    progressbar progress.left {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px; }
+    progressbar progress.right {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px; }
+    progressbar progress.top {
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px; }
+    progressbar progress.bottom {
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px; }
 
 /*************
  * Level Bar *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index cac2b0e044..66f0d6971a 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3075,397 +3075,152 @@ scale {
   -GtkRange-slider-width: 24;
   -GtkRange-trough-border: 2;
   outline-offset: -9px;
-  outline-radius: 4px; }
+  outline-radius: 6px; }
   scale.fine-tune {
     outline-offset: -7px;
-    outline-radius: 6px; }
-    scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
+    outline-radius: 8px; }
+    scale.fine-tune trough,
+    scale.fine-tune fill,
+    scale.fine-tune highlight {
+      margin: 10px;
       border-radius: 4px; }
-      scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
-        margin: 10px; }
-  scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
+  scale trough,
+  scale fill,
+  scale highlight {
     margin: 12px; }
-  scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
+  scale:not(.vertical) slider {
     margin: 2px 0; }
-  scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
+  scale.vertical slider {
     margin: 0 2px; }
-  scale trough {
-    border: 1px solid #a1a1a1;
-    border-radius: 3px;
-    background-color: #cfcfcf;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    scale trough slider {
+  scale slider {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1);
+    border: 1px solid #999999;
+    border-radius: 100%; }
+    scale slider:hover {
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
+      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
       text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      box-shadow: inset 0 1px white, 0 1px white;
-      border: 1px solid;
-      border-radius: 50%;
-      border-color: #999999;
-      box-shadow: inset 0 1px white, inset 0 -2px #ededed, inset 0 -1px #c7c7c7; }
-      scale trough slider:hover {
-        color: #2e3436;
-        outline-color: rgba(46, 52, 54, 0.3);
-        border-color: #a1a1a1;
-        background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        box-shadow: inset 0 1px white, 0 1px white;
-        border-color: #999999;
-        border-radius: 50%;
-        box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #d6d6d6; }
-      scale trough slider:insensitive {
-        border-style: solid;
-        border-radius: 50%;
-        background-image: linear-gradient(to bottom, #f4f4f4);
-        box-shadow: none; }
-      scale trough slider:backdrop {
-        border-style: solid;
-        border-radius: 50%;
-        border-color: #a1a1a1;
-        background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: none; }
-      scale trough slider:backdrop:insensitive {
+      box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1); }
+    scale slider:active {
+      border-color: #184472; }
+    scale slider:insensitive {
+      color: #8e9192;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #f4f4f4);
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+      scale slider:insensitive > .label {
+        color: inherit; }
+    scale slider:backdrop {
+      color: #8e9192;
+      border-color: darkgray;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+      scale slider:backdrop:insensitive {
         color: #c7c7c7;
         border-color: darkgray;
         background-image: linear-gradient(to bottom, #f4f4f4);
         text-shadow: none;
         -gtk-icon-shadow: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-        scale trough slider:backdrop:insensitive > .label {
+        scale slider:backdrop:insensitive > .label {
           color: inherit; }
-      scale trough slider:active {
-        color: #2e3436;
-        outline-color: rgba(46, 52, 54, 0.3);
-        border-color: #a1a1a1;
-        background-image: linear-gradient(to bottom, #d6d6d6, gainsboro 40%, #e0e0e0);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px white;
-        border: 1px solid #153d65; }
-      .osd scale trough slider {
-        color: #eeeeec;
+    .osd scale slider {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+      background-clip: padding-box;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+      outline-color: rgba(238, 238, 236, 0.3);
+      border-color: rgba(0, 0, 0, 0.7);
+      background-color: #202526; }
+      .osd scale slider:hover {
+        color: white;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+        background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
         background-clip: padding-box;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         -gtk-icon-shadow: 0 1px black;
-        outline-color: rgba(238, 238, 236, 0.3);
-        background-color: #202526; }
-        .osd scale trough slider:hover {
-          color: white;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
-          background-clip: padding-box;
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-          text-shadow: 0 1px black;
-          -gtk-icon-shadow: 0 1px black;
-          outline-color: rgba(238, 238, 236, 0.3); }
-        .osd scale trough slider:active {
-          color: white;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
-          background-clip: padding-box;
-          box-shadow: none;
-          text-shadow: none;
-          -gtk-icon-shadow: none;
-          outline-color: rgba(238, 238, 236, 0.3); }
-        .osd scale trough slider:backdrop {
-          color: #eeeeec;
-          border-color: rgba(0, 0, 0, 0.7);
-          background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
-          background-clip: padding-box;
-          box-shadow: none;
-          text-shadow: none;
-          -gtk-icon-shadow: none; }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
-      border: 1px solid #a1a1a1;
-      border-radius: 3px;
-      box-shadow: 0 1px white; }
-      scale trough highlight.vertical {
-        background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); }
-      scale trough highlight:backdrop {
-        border-color: #4a90d9;
-        background-color: #4a90d9;
-        box-shadow: none; }
-    scale trough fill {
-      background: none;
-      background-color: red;
-      border: 1px solid #a1a1a1;
-      border-radius: 3px;
-      box-shadow: 0 1px white; }
-    scale trough:insensitive, scale trough.vertical:insensitive {
-      border-color: #a1a1a1;
-      background-image: none;
-      background-color: #f4f4f4;
-      box-shadow: 0 1px white; }
-    scale trough:backdrop {
-      border-color: darkgray;
-      background-color: #c7c7c7;
-      box-shadow: none; }
-    scale trough:backdrop:insensitive, scale trough .highlight:backdrop:insensitive {
-      border-color: darkgray;
-      background-color: #f4f4f4; }
-    .osd scale trough {
-      border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: none;
-      margin: 9px;
-      background-color: rgba(0, 0, 0, 0.5);
-      outline-color: rgba(238, 238, 236, 0.2);
-      outline-offset: -8px; }
-      .osd scale trough.fine-tune {
-        margin: 7px; }
-      .osd scale trough.highlight {
-        background-image: none;
-        background-color: #4a90d9; }
-      .osd scale trough:insensitive, .osd scale trough:backdrop:insensitive {
-        border-color: transparent;
-        background-color: transparent; }
-      .osd scale trough:backdrop {
+        outline-color: rgba(238, 238, 236, 0.3); }
+      .osd scale slider:active {
+        color: white;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: none; }
-  row:selected scale {
-    border-color: #184472;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
-    row:selected scale:backdrop {
-      box-shadow: none; }
-    row:selected scale.highlight:backdrop {
-      border-color: #184472; }
-    row:selected scale:insensitive, row:selected scale.highlight:insensitive {
-      border-color: #4a90d9;
-      box-shadow: none;
-      background-color: #a5c8ec;
-      background-image: none; }
-      row:selected scale:insensitive:backdrop, row:selected scale.highlight:insensitive:backdrop {
-        background-color: #a5c8ec; }
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+        outline-color: rgba(238, 238, 236, 0.3); }
+      .osd scale slider:insensitive {
+        color: #878a89;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none; }
+      .osd scale slider:backdrop {
+        color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none; }
 
-scale marks {
-  color: alpha(currentColor,0.5); }
+scale trough, progressbar trough {
+  border: 1px solid #a1a1a1;
+  border-radius: 3px;
+  background-color: #d2d2d2;
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
+  scale trough:insensitive, progressbar trough:insensitive {
+    background-color: #f4f4f4;
+    box-shadow: 0 1px white; }
+  scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
+    background-color: #d5d5d5;
+    border-color: darkgray;
+    box-shadow: none; }
+    scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
+      background-color: #f4f4f4; }
+  .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2); }
+    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
+      background-color: rgba(53, 57, 58, 0.5); }
 
-scale trough:first-child:not(:last-child) slider {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:first-child:not(:last-child) slider:hover {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:first-child:not(:last-child) slider:active {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:first-child:not(:last-child) slider:insensitive {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:first-child:not(:last-child) slider:backdrop {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:first-child:not(:last-child) 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.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive@2.png"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-
-scale trough:not(:first-child):last-child slider {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:not(:first-child):last-child slider:hover {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:not(:first-child):last-child slider:active {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:not(:first-child):last-child slider:insensitive {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:not(:first-child):last-child slider:backdrop {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale trough:not(:first-child):last-child 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.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive@2.png"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-
-scale.vertical trough:first-child:not(:last-child) slider {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:first-child:not(:last-child) slider:hover {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:first-child:not(:last-child) slider:active {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:first-child:not(:last-child) slider:insensitive {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:first-child:not(:last-child) slider:backdrop {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:first-child:not(:last-child) 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.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive@2.png"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-
-scale.vertical trough:not(:first-child):last-child slider {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:not(:first-child):last-child slider:hover {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:not(:first-child):last-child slider:active {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:not(:first-child):last-child slider:insensitive {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:not(:first-child):last-child slider:backdrop {
-  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"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-scale.vertical trough:not(:first-child):last-child 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.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive@2.png"));
-  background-repeat: no-repeat;
-  background-position: center;
-  box-shadow: none; }
-
-scale trough:not(:first-child):last-child {
-  margin: 14px 10px 10px 10px; }
-
-scale trough:first-child:not(:last-child) {
-  margin: 10px 10px 14px 10px; }
-
-scale.vertical trough:not(:first-child):last-child {
-  margin: 10px 10px 10px 14px; }
-
-scale.vertical trough:first-child:not(:last-child) {
-  margin: 10px 14px 10px 10px; }
-
-scale.fine-tune trough:not(:first-child):last-child {
-  margin: 12px  8px  8px  8px; }
-
-scale.fine-tune trough:first-child:not(:last-child) {
-  margin: 8px  8px 12px  8px; }
-
-scale.vertical.fine-tune trough:not(:first-child):last-child {
-  margin: 8px  8px  8px 12px; }
-
-scale.vertical.fine-tune trough:first-child:not(:last-child) {
-  margin: 8px 12px  8px  8px; }
+scale highlight, progressbar progress {
+  border: 1px solid #184472;
+  border-radius: 3px;
+  background-color: #4a90d9; }
+  scale highlight:insensitive, progressbar progress:insensitive {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
+    border-color: #4a90d9; }
+    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
+      background-color: transparent;
+      border-color: transparent; }
+  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
+    border-color: rgba(0, 0, 0, 0.7); }
+    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
+      border-color: transparent; }
 
 /*****************
  * Progress bars *
@@ -3474,60 +3229,23 @@ progressbar {
   padding: 0;
   font-size: smaller;
   color: rgba(46, 52, 54, 0.4);
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
+  box-shadow: 0 1px white; }
   progressbar:backdrop {
-    color: #c7c7c7; }
-  progressbar.osd {
-    -GtkProgressBar-min-horizontal-bar-height: 3; }
-    progressbar.osd trough {
-      border-style: none;
-      background-color: transparent;
-      box-shadow: none; }
-  progressbar trough {
-    border: 1px solid #a1a1a1;
-    border-radius: 3px;
-    background-color: #d2d2d2; }
-    progressbar trough:backdrop {
-      border-color: darkgray;
-      background-color: #d5d5d5;
-      box-shadow: 0 1px rgba(255, 255, 255, 0); }
-
-progressbar.horizontal progress {
-  background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
-  border: 1px solid #184472;
-  border-radius: 1.5px;
-  box-shadow: none; }
-  progressbar.horizontal progress.left {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px; }
-  progressbar.horizontal progress.right {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px; }
-  progressbar.horizontal progress.left.right {
     box-shadow: none; }
-
-progressbar.vertical progress {
-  background-image: linear-gradient(to right, #4a90d9 2px, #63a0de);
-  border: 1px solid #184472;
-  border-radius: 1.5px;
-  box-shadow: none; }
-  progressbar.vertical progress.bottom {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    box-shadow: none; }
-  progressbar.vertical progress.top {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px; }
-  progressbar.vertical progress:backdrop {
-    border-color: #4a90d9;
-    background-image: none;
-    background-color: #4a90d9;
-    box-shadow: none; }
-  progressbar.vertical progress.osd {
-    background-image: none;
-    background-color: #4a90d9;
-    border-style: none;
-    border-radius: 0; }
+  progressbar progress {
+    border-radius: 1.5px; }
+    progressbar progress.left {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px; }
+    progressbar progress.right {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px; }
+    progressbar progress.top {
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px; }
+    progressbar progress.bottom {
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px; }
 
 /*************
  * Level Bar *