rewrite scale style

7 files changed, 974 insertions, 807 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index c0cbf7b..d440046 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -1327,22 +1327,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #454c5c);
+  background-color: #454c5c;
   border-color: rgba(21, 23, 28, 0.67); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, #50586b);
+    background-color: #50586b;
     border-color: rgba(21, 23, 28, 0.67); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, rgba(63, 69, 84, 0.991));
+    background-color: rgba(63, 69, 84, 0.991);
     border-color: rgba(21, 23, 28, 0.67); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.37)); }
+  background-color: rgba(21, 23, 28, 0.37); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.27)); }
+    background-color: rgba(21, 23, 28, 0.27); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2046,132 +2046,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #444a58);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #2d303b; }
+    scale trough:disabled {
+      background-color: rgba(45, 48, 59, 0.55); }
+    .osd scale trough {
+      background-color: rgba(69, 74, 89, 0.95); }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #444a58;
     border: 1px solid #262933;
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, #505666);
-      border-color: #262933; }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #3c414e);
-      border-color: rgba(38, 41, 51, 0.8); }
+      background-color: #505666; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #3c414e;
+      border-color: rgba(38, 41, 51, 0.8); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #2d303b); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(45, 48, 59, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95));
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index e363054..b299672 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -1326,22 +1326,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #454c5c);
+  background-color: #454c5c;
   border-color: rgba(21, 23, 28, 0.67); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, #50586b);
+    background-color: #50586b;
     border-color: rgba(21, 23, 28, 0.67); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, rgba(63, 69, 84, 0.991));
+    background-color: rgba(63, 69, 84, 0.991);
     border-color: rgba(21, 23, 28, 0.67); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.37)); }
+  background-color: rgba(21, 23, 28, 0.37); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.27)); }
+    background-color: rgba(21, 23, 28, 0.27); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2045,132 +2045,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #fbfbfc);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #cfd6e6; }
+    scale trough:disabled {
+      background-color: rgba(207, 214, 230, 0.55); }
+    .osd scale trough {
+      background-color: rgba(69, 74, 89, 0.95); }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #fbfbfc;
     border: 1px solid rgba(123, 142, 186, 0.5);
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, white);
-      border-color: rgba(123, 142, 186, 0.5); }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #fbfbfb);
-      border-color: rgba(123, 142, 186, 0.3); }
+      background-color: white; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #fbfbfb;
+      border-color: rgba(123, 142, 186, 0.3); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #cfd6e6); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95));
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index 98a9b14..d7caa74 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -1327,22 +1327,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #454c5c);
+  background-color: #454c5c;
   border-color: rgba(21, 23, 28, 0.7); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, #50586b);
+    background-color: #50586b;
     border-color: rgba(21, 23, 28, 0.7); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, #3e4553);
+    background-color: #3e4553;
     border-color: rgba(21, 23, 28, 0.7); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.4)); }
+  background-color: rgba(21, 23, 28, 0.4); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.3)); }
+    background-color: rgba(21, 23, 28, 0.3); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2046,132 +2046,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #444a58);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #2d303b; }
+    scale trough:disabled {
+      background-color: rgba(45, 48, 59, 0.55); }
+    .osd scale trough {
+      background-color: #454a59; }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #444a58;
     border: 1px solid #262933;
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, #505666);
-      border-color: #262933; }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #3c414e);
-      border-color: rgba(38, 41, 51, 0.8); }
+      background-color: #505666; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #3c414e;
+      border-color: rgba(38, 41, 51, 0.8); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #2d303b); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(45, 48, 59, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, #454a59);
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index 10e3f31..80c9c64 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -1326,22 +1326,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #454c5c);
+  background-color: #454c5c;
   border-color: rgba(21, 23, 28, 0.7); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, #50586b);
+    background-color: #50586b;
     border-color: rgba(21, 23, 28, 0.7); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, #3e4553);
+    background-color: #3e4553;
     border-color: rgba(21, 23, 28, 0.7); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.4)); }
+  background-color: rgba(21, 23, 28, 0.4); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.3)); }
+    background-color: rgba(21, 23, 28, 0.3); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2045,132 +2045,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #fbfbfc);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #cfd6e6; }
+    scale trough:disabled {
+      background-color: rgba(207, 214, 230, 0.55); }
+    .osd scale trough {
+      background-color: #454a59; }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #fbfbfc;
     border: 1px solid rgba(123, 142, 186, 0.5);
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, white);
-      border-color: rgba(123, 142, 186, 0.5); }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #fbfbfb);
-      border-color: rgba(123, 142, 186, 0.3); }
+      background-color: white; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #fbfbfb;
+      border-color: rgba(123, 142, 186, 0.3); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #cfd6e6); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, #454a59);
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index 5a8c07f..9602e3c 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -1330,22 +1330,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #fbfbfc);
+  background-color: #fbfbfc;
   border-color: rgba(82, 93, 118, 0.3); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, white);
+    background-color: white;
     border-color: rgba(82, 93, 118, 0.3); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, #f5f5f7);
+    background-color: #f5f5f7;
     border-color: rgba(82, 93, 118, 0.3); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.15)); }
+  background-color: rgba(82, 93, 118, 0.15); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.1)); }
+    background-color: rgba(82, 93, 118, 0.1); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2049,132 +2049,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #fbfbfc);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #cfd6e6; }
+    scale trough:disabled {
+      background-color: rgba(207, 214, 230, 0.55); }
+    .osd scale trough {
+      background-color: #454a59; }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #fbfbfc;
     border: 1px solid rgba(123, 142, 186, 0.5);
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, white);
-      border-color: rgba(123, 142, 186, 0.5); }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #fbfbfb);
-      border-color: rgba(123, 142, 186, 0.3); }
+      background-color: white; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #fbfbfb;
+      border-color: rgba(123, 142, 186, 0.3); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #cfd6e6); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, #454a59);
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index 87b6e62..127966a 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -1330,22 +1330,22 @@ window.csd > .titlebar:not(headerbar):backdrop {
   opacity: 0.75; }
 
 .primary-toolbar scale slider, headerbar scale slider {
-  background-image: linear-gradient(to bottom, #fbfbfc);
+  background-color: #fbfbfc;
   border-color: rgba(82, 93, 118, 0.3); }
   .primary-toolbar scale slider:hover, headerbar scale slider:hover {
-    background-image: linear-gradient(to bottom, white);
+    background-color: white;
     border-color: rgba(82, 93, 118, 0.3); }
   .primary-toolbar scale slider:active, headerbar scale slider:active {
-    background-image: linear-gradient(to bottom, #5294E2);
+    background-color: #5294E2;
     border-color: #5294E2; }
   .primary-toolbar scale slider:disabled, headerbar scale slider:disabled {
-    background-image: linear-gradient(to bottom, rgba(245, 246, 247, 0.985));
+    background-color: rgba(245, 246, 247, 0.985);
     border-color: rgba(82, 93, 118, 0.3); }
 
 .primary-toolbar scale trough, headerbar scale trough {
-  background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.15)); }
+  background-color: rgba(82, 93, 118, 0.15); }
   .primary-toolbar scale trough:disabled, headerbar scale trough:disabled {
-    background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.1)); }
+    background-color: rgba(82, 93, 118, 0.1); }
 
 .path-bar button.text-button, .path-bar button.image-button, .path-bar button {
   padding-left: 6px;
@@ -2049,132 +2049,152 @@ radio {
     margin: 0; }
 
 scale {
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px; }
-  scale value {
-    color: alpha(currentColor,0.4); }
-  scale marks {
-    color: alpha(currentColor,0.4); }
-    scale marks.top {
-      margin-bottom: -2px;
-      margin-top: 2px; }
-    scale marks.bottom {
-      margin-top: -2px;
-      margin-bottom: 2px; }
-    scale marks.top {
-      margin-right: -2px;
-      margin-left: 2px; }
-    scale marks.bottom {
-      margin-left: -2px;
-      margin-right: 2px; }
-  scale.fine-tune marks {
-    color: alpha(currentColor,0.4); }
-    scale.fine-tune marks.top {
-      margin-bottom: -4px;
-      margin-top: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-top: -4px;
-      margin-bottom: 4px; }
-    scale.fine-tune marks.top {
-      margin-right: -4px;
-      margin-left: 4px; }
-    scale.fine-tune marks.bottom {
-      margin-left: -4px;
-      margin-right: 4px; }
-  scale.horizontal indicator {
-    min-height: 3px;
-    min-width: 1px; }
-  scale.vertical indicator {
-    min-height: 1px;
-    min-width: 3px; }
-  scale.fine-tune {
-    padding: 3px; }
-    scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-      border-radius: 5px; }
-    scale.fine-tune slider {
-      margin: -4px; }
-  scale trough, scale fill, scale highlight {
-    border-radius: 2.5px; }
+  min-height: 10px;
+  min-width: 10px; }
+  scale.horizontal {
+    padding: 6px 0; }
+    scale.horizontal trough {
+      padding: 0 7px; }
+    scale.horizontal highlight, scale.horizontal fill {
+      margin: 0 -7px; }
+  scale.vertical {
+    padding: 0 6px; }
+    scale.vertical trough {
+      padding: 7px 0; }
+    scale.vertical highlight, scale.vertical fill {
+      margin: -7px 0; }
   scale slider {
-    min-width: 15px;
     min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, #fbfbfc);
+    min-width: 15px;
+    margin: -6px; }
+  scale.fine-tune.horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    min-height: 15px; }
+  scale.fine-tune.vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    min-width: 15px; }
+  scale.fine-tune slider {
+    margin: -4px; }
+  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: 4.5px;
+    border-radius: 2.5px;
+    background-color: #cfd6e6; }
+    scale trough:disabled {
+      background-color: rgba(207, 214, 230, 0.55); }
+    .osd scale trough {
+      background-color: rgba(69, 74, 89, 0.95); }
+      .osd scale trough highlight {
+        background-color: #5294E2; }
+    row:selected scale trough,
+    infobar scale trough {
+      background-color: rgba(0, 0, 0, 0.2); }
+      row:selected scale trough highlight,
+      infobar scale trough highlight {
+        background-color: #ffffff; }
+        row:selected scale trough highlight:disabled,
+        infobar scale trough highlight:disabled {
+          background-color: #b1cff2; }
+      row:selected scale trough:disabled,
+      infobar scale trough:disabled {
+        background-color: rgba(0, 0, 0, 0.1); }
+  scale highlight {
+    border-radius: 2.5px;
+    background-color: #5294E2; }
+    scale highlight:disabled {
+      background-color: rgba(82, 148, 226, 0.55); }
+  scale fill {
+    border-radius: 2.5px;
+    background-color: rgba(82, 148, 226, 0.5); }
+    scale fill:disabled {
+      background-color: transparent; }
+  scale slider {
+    background-color: #fbfbfc;
     border: 1px solid rgba(123, 142, 186, 0.5);
-    border-radius: 50%;
-    box-shadow: none; }
+    border-radius: 100%;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-property: background, border; }
     scale slider:hover {
-      background-image: linear-gradient(to bottom, white);
-      border-color: rgba(123, 142, 186, 0.5); }
-    scale slider:disabled {
-      background-image: linear-gradient(to bottom, #fbfbfb);
-      border-color: rgba(123, 142, 186, 0.3); }
+      background-color: white; }
     scale slider:active {
-      background-image: linear-gradient(to bottom, #5294E2);
-      border-color: #5294E2; }
-    .osd scale slider {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-      background-image: linear-gradient(to bottom, #5294E2);
+      background-clip: border-box;
+      background-color: #5294E2;
       border-color: #5294E2; }
-      .osd scale slider:hover {
-        background-image: linear-gradient(to bottom, #7eafe9);
-        border-color: #7eafe9; }
-      .osd scale slider:active {
-        background-image: linear-gradient(to bottom, #2679db);
-        border-color: #2679db; }
+    scale slider:disabled {
+      background-color: #fbfbfb;
+      border-color: rgba(123, 142, 186, 0.3); }
     row:selected scale slider,
     infobar scale slider {
-      background-image: linear-gradient(to bottom, #ffffff);
+      background-clip: border-box;
+      background-color: #ffffff;
       border-color: #ffffff; }
       row:selected scale slider:hover,
       infobar scale slider:hover {
-        background-image: linear-gradient(to bottom, #e5effb);
+        background-color: #e5effb;
         border-color: #e5effb; }
       row:selected scale slider:active,
       infobar scale slider:active {
-        background-image: linear-gradient(to bottom, #a9caf1);
+        background-color: #a9caf1;
         border-color: #a9caf1; }
       row:selected scale slider:disabled,
       infobar scale slider:disabled {
-        background-image: linear-gradient(to bottom, #b1cff2);
+        background-color: #b1cff2;
         border-color: #b1cff2; }
-  scale trough {
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, #cfd6e6); }
-    scale trough highlight {
-      background-image: linear-gradient(to bottom, #5294E2); }
-      scale trough highlight:disabled {
-        background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); }
-    scale trough fill {
-      background: none;
-      background-color: rgba(82, 148, 226, 0.5); }
-    scale trough:disabled {
-      background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); }
-    .osd scale trough {
-      background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95));
-      outline-color: rgba(186, 195, 207, 0.2); }
-      .osd scale trough highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, #5294E2); }
-    row:selected scale trough,
-    infobar scale trough {
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); }
-      row:selected scale trough highlight,
-      infobar scale trough highlight {
-        background-image: linear-gradient(to bottom, #ffffff); }
-        row:selected scale trough highlight:disabled,
-        infobar scale trough highlight:disabled {
-          background-image: linear-gradient(to bottom, #b1cff2); }
-      row:selected scale trough:disabled,
-      infobar scale trough:disabled {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); }
+    .osd scale slider {
+      background-clip: border-box;
+      background-color: #5294E2;
+      border-color: #5294E2; }
+      .osd scale slider:hover {
+        background-color: #7eafe9;
+        border-color: #7eafe9; }
+      .osd scale slider:active {
+        background-color: #2679db;
+        border-color: #2679db; }
+  scale value {
+    color: alpha(currentColor,0.4); }
+  scale marks {
+    color: alpha(currentColor,0.4); }
+    scale marks.top {
+      margin-bottom: 1px;
+      margin-top: -4px; }
+    scale marks.bottom {
+      margin-top: 1px;
+      margin-bottom: -4px; }
+    scale marks.top {
+      margin-right: 1px;
+      margin-left: -4px; }
+    scale marks.bottom {
+      margin-left: 1px;
+      margin-right: -4px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 0px;
+    margin-top: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 0px;
+    margin-bottom: -2px; }
+  scale.fine-tune marks.top {
+    margin-right: 0px;
+    margin-left: -2px; }
+  scale.fine-tune marks.bottom {
+    margin-left: 0px;
+    margin-right: -2px; }
+  scale.horizontal indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 2px; }
+  scale.vertical indicator {
+    min-height: 1px;
+    min-width: 3px; }
+  scale.vertical.fine-tune indicator {
+    min-width: 2px; }
 
 progressbar {
   padding: 0;
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index b093fa6..b045b74 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -323,12 +323,11 @@ $_dot_color: $selected_bg_color;
   }
 }
 
+  $button_transition: all 200ms $ease-out-quad;
 button {
-  $_button_transition: all 200ms $ease-out-quad;
-
   min-height: 22px;
   min-width: 20px;
-  transition: $_button_transition;
+  transition: $button_transition;
   border: 1px solid;
   border-radius: 3px;
   padding: 2px 6px;
@@ -346,10 +345,10 @@ button {
     transition: none;
 
     &:hover {
-      transition: $_button_transition;
+      transition: $button_transition;
       transition-duration: 350ms;
 
-      &:active { transition: $_button_transition; }
+      &:active { transition: $button_transition; }
     }
   }
 
@@ -1341,26 +1340,26 @@ headerbar {
       $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3));
       $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%));
 
-      background-image: linear-gradient(to bottom, $_slider_bg);
+      background-color: $_slider_bg;
       border-color: $_slider_border;
 
       &:hover {
-        background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%));
+        background-color: lighten($_slider_bg, 5%);
         border-color: $_slider_border;
       }
       &:active {
-        background-image: linear-gradient(to bottom, $selected_bg_color);
+        background-color: $selected_bg_color;
         border-color: $selected_bg_color;
       }
       &:disabled {
-        background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%));
+        background-color: mix($_slider_bg, $header_bg, 70%);
         border-color: $_slider_border;
       }
     }
     trough {
-      background-image: linear-gradient(to bottom, $_trough_bg);
+      background-color: $_trough_bg;
 
-      &:disabled { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); }
+      &:disabled { background-color: if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1)); }
     }
   }
 }
@@ -2052,175 +2051,223 @@ radio {
 //
 scale {
   $_marks_length: 3px;
-  $_marks_margin: -2px;
+  $_marks_distance: 1px;
 
-  min-height: 9px;
-  min-width: 9px;
-  padding: 5px;
+  min-height: 10px;
+  min-width: 10px;
 
-  value { color: gtkalpha(currentColor, 0.4); }
+  &.horizontal {
+    padding: 6px 0;
 
-  marks {
-    color: gtkalpha(currentColor, 0.4);
+    trough { padding: 0 7px; }
+    highlight, fill { margin: 0 -7px; }
+  }
+  &.vertical {
+    padding: 0 6px;
 
-    @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_margin;
-        margin-#{$marks_pos}: -$_marks_margin;
-      }
+    trough { padding: 7px 0; }
+    highlight, fill { margin: -7px 0; }
+  }
+
+  // The slider is inside the trough, negative margin to make it bigger
+  slider {
+    min-height: 15px;
+    min-width: 15px;
+    margin: -6px;
+  }
+
+  // Click-and-hold the slider to activate
+  &.fine-tune {
+    &.horizontal {
+      padding-top: 4px;
+      padding-bottom: 4px;
+      min-height: 15px;
+    }
+
+    &.vertical {
+      padding-left: 4px;
+      padding-right: 4px;
+      min-width: 15px;
+    }
+
+    // Make the trough grow in fine-tune mode
+    slider { margin: -4px; }
+
+    fill,
+    highlight,
+    trough {
+      border-radius: 5px;
+      -gtk-outline-radius: 7px;
     }
   }
 
-  &.fine-tune marks {
-    color: gtkalpha(currentColor, 0.4);
+  // Trough
+  trough {
+    $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
 
-    @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_margin - 2px;
-        margin-#{$marks_pos}: -$_marks_margin + 2px;
+    outline-offset: 2px;
+    -gtk-outline-radius: 4.5px;
+
+    border-radius: 2.5px;
+    background-color: $_scale_trough_bg;
+
+    &:disabled { background-color: transparentize($_scale_trough_bg, 0.45); }
+
+    //OSD troughs
+    .osd & {
+      background-color: lighten($osd_bg_color, 7%);
+
+      highlight {
+        background-color: $selected_bg_color;
+
+        &:disabled {  }
       }
+
+      &:disabled {  }
     }
-  }
 
-  &.horizontal indicator {
-    min-height: $_marks_length;
-    min-width: 1px;
-  }
-  &.vertical indicator {
-    min-height: 1px;
-    min-width: $_marks_length;
-  }
+    // Troughs in selected list-rows and infobars
+    row:selected &,
+    infobar & {
+      background-color: transparentize(black, 0.8);
 
-  &.fine-tune {
-    padding: 3px;
+      highlight {
+        background-color: $selected_fg_color;
 
-    trough, fill, highlight { border-radius: 5px; }
+        &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
+      }
 
-    slider { margin: -4px; }
+      &:disabled { background-color: transparentize(black, 0.9); }
+    }
   }
 
-  trough, fill, highlight {
+  // The colored part of trough
+  highlight {
     border-radius: 2.5px;
+    background-color: $selected_bg_color;
+
+    &:disabled { background-color: transparentize($selected_bg_color, 0.45); }
+  }
+
+  // this is another differently styled part of the trough, the most relevant use case is for example
+  // in media player to indicate how much video stream as been cached
+  fill {
+    border-radius: 2.5px;
+    background-color: transparentize($selected_bg_color, 0.5);
+
+    &:disabled { background-color: transparent; }
   }
 
   slider {
     $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
 
-    min-width: 15px;
-    min-height: 15px;
-    margin: -6px;
-    background-clip: border-box;
-    background-image: linear-gradient(to bottom, $button_bg);
+    background-color: $button_bg;
     border: 1px solid $_slider_border;
-    border-radius: 50%;
-    box-shadow: none;
+    border-radius: 100%;
+
+    transition: $button_transition;
+    transition-property: background, border;
+
+    &:hover { background-color: lighten($button_bg, 5%); }
 
-    &:hover {
-    background-image: linear-gradient(to bottom, lighten($button_bg, 5%));
-    border-color: $_slider_border;
-    }
-    &:disabled {
-      background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
-      border-color: transparentize($_slider_border, 0.2);
-    }
     &:active {
-      background-image: linear-gradient(to bottom, $selected_bg_color);
+      background-clip: border-box;
+      background-color: $selected_bg_color;
       border-color: $selected_bg_color;
     }
-    //OSD sliders
-    .osd & {
-      min-width: 11px;
-      min-height: 11px;
-      margin: -4px;
-
-      background-image: linear-gradient(to bottom, $selected_bg_color);
-      border-color: $selected_bg_color;
 
-      &:hover {
-        background-image: linear-gradient(to bottom, lighten($selected_bg_color, 10%));
-        border-color: lighten($selected_bg_color, 10%)
-;
-      }
-      &:active {
-        background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
-        border-color: darken($selected_bg_color, 10%);
-      }
+    &:disabled {
+      background-color: mix($entry_bg, $bg_color, 55%);
+      border-color: transparentize($_slider_border, 0.2);
     }
-    //selected list-row and infobar sliders
+
+    // Selected list-row and infobar sliders
     row:selected &,
     infobar & {
-      background-image: linear-gradient(to bottom, $selected_fg_color);
+      background-clip: border-box;
+      background-color: $selected_fg_color;
       border-color: $selected_fg_color;
 
       &:hover {
-        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%));
+        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
         border-color: mix($selected_fg_color, $selected_bg_color, 85%);
       }
       &:active {
-        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%));
+        background-color: mix($selected_fg_color, $selected_bg_color, 50%);
         border-color: mix($selected_fg_color, $selected_bg_color, 50%);
       }
       &:disabled{
-        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%));
+        background-color: mix($selected_fg_color, $selected_bg_color, 55%);
         border-color: mix($selected_fg_color, $selected_bg_color, 55%);
       }
     }
-  }
-  trough {
-    $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
 
-    outline-offset: 2px;
-    -gtk-outline-radius: 2px;
-    margin: 5px;
-    border: none;
-    background-image: linear-gradient(to bottom, $_scale_trough_bg);
-    highlight {
-      background-image: linear-gradient(to bottom, $selected_bg_color);
+    // OSD sliders
+    .osd & {
+      background-clip: border-box;
+      background-color: $selected_bg_color;
+      border-color: $selected_bg_color;
 
-      &:disabled {
-        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45));
+      &:hover {
+        background-color: lighten($selected_bg_color, 10%);
+        border-color: lighten($selected_bg_color, 10%)
       }
-    }
-    fill {
-      background: none;
-      background-color: transparentize($selected_bg_color, 0.5);
-    }
-    &:disabled {
-      background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45));
-    }
-
-    //OSD troughs
-    .osd & {
-      background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%));
-      outline-color: transparentize($osd_fg_color, 0.8);
 
-      highlight {
-        background-image: none;
-        background-image: linear-gradient(to bottom, $selected_bg_color);
+      &:active {
+        background-color: darken($selected_bg_color, 10%);
+        border-color: darken($selected_bg_color, 10%);
       }
+
       &:disabled {  }
     }
-    // troughs in selected list-rows and infobars
-    row:selected &,
-    infobar & {
-      background-image: linear-gradient(to bottom, transparentize(black, 0.8));
+  }
 
-      highlight {
-        background-image: linear-gradient(to bottom, $selected_fg_color);
+  value { color: gtkalpha(currentColor, 0.4); }
+
+  marks {
+    color: gtkalpha(currentColor, 0.4);
 
-        &:disabled { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); }
+    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+                                                     (bottom, bottom, top),
+                                                     (top, left, right),
+                                                     (bottom, right, left) {
+      &.#{$marks_class} {
+        margin-#{$marks_margin}: $_marks_distance;
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
       }
-      &:disabled { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); }
     }
   }
+
+  &.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 - 1px);
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
+      }
+    }
+  }
+  &.horizontal {
+    indicator {
+      min-height: $_marks_length;
+      min-width: 1px;
+    }
+
+    &.fine-tune indicator { min-height: ($_marks_length - 1px); }
+  }
+  &.vertical {
+    indicator {
+      min-height: 1px;
+      min-width: $_marks_length;
+    }
+
+    &.fine-tune indicator { min-width: ($_marks_length - 1px); }
+  }
 }
 
+
 //
 // Progress bars
 //