update scrollbar and scale styling

7 files changed, 435 insertions, 261 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index fcd02a5..1e07c48 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -1630,20 +1630,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #a5abb5;
@@ -1653,9 +1659,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1679,32 +1687,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1915,19 +1920,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #444a58);
     border: 1px solid #262933;
@@ -1967,6 +1990,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #2d303b); }
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index c7d32f3..00dc464 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -1629,20 +1629,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #8a8e96;
@@ -1652,9 +1658,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1678,32 +1686,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1914,19 +1919,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #fbfbfc);
     border: 1px solid rgba(123, 142, 186, 0.5);
@@ -1966,6 +1989,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #cfd6e6); }
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 3234d22..7671bf3 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -1630,20 +1630,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #a5abb5;
@@ -1653,9 +1659,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1679,32 +1687,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1915,19 +1920,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #444a58);
     border: 1px solid #262933;
@@ -1967,6 +1990,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #2d303b); }
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 de9f415..250f875 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -1629,20 +1629,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #8a8e96;
@@ -1652,9 +1658,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1678,32 +1686,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1914,19 +1919,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #fbfbfc);
     border: 1px solid rgba(123, 142, 186, 0.5);
@@ -1966,6 +1989,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #cfd6e6); }
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index ed13ded..bbe9836 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -1633,20 +1633,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #8a8e96;
@@ -1656,9 +1662,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1682,32 +1690,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1918,19 +1923,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #fbfbfc);
     border: 1px solid rgba(123, 142, 186, 0.5);
@@ -1970,6 +1993,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #cfd6e6); }
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index 8d362ef..d747a20 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -1633,20 +1633,26 @@ notebook {
           color: #5294E2; }
 
 * {
-  -GtkRange-slider-width: 13;
-  -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkScrollbar-min-slider-length: 42;
-  -GtkRange-stepper-spacing: 0;
-  -GtkRange-trough-under-steppers: 1; }
+  -GtkScrollbar-has-forward-stepper: false; }
 
 scrollbar button {
   border: none; }
 
+scrollbar.vertical button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+
+scrollbar.vertical button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+
+scrollbar.horizontal button.down {
+  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+
+scrollbar.horizontal button.up {
+  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4;
-  -GtkRange-slider-width: 6px; }
+  opacity: 0.4; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
     margin: 0;
     background-color: #8a8e96;
@@ -1656,9 +1662,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
     border-style: none;
     background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-width: 4px;
     margin-top: 2px;
     margin-bottom: 2px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-height: 4px;
     margin-left: 2px;
     margin-right: 2px; }
 
@@ -1682,32 +1690,29 @@ scrollbar slider {
   border-radius: 100px;
   margin: 3px; }
 
-scrollbar.fine-tune slider {
+scrollbar.vertical.fine-tune slider {
+  min-width: 4px;
   margin: 4px; }
 
 scrollbar.vertical slider {
-  margin-left: 4px; }
-  scrollbar.vertical slider:dir(rtl) {
-    margin-left: 3px;
-    margin-right: 4px; }
-
-scrollbar.vertical.fine-tune .slider {
-  margin-left: 5px; }
-  scrollbar.vertical.fine-tune .slider:dir(rtl) {
-    margin-left: 4px;
-    margin-right: 5px; }
-
-scrollbar.vertical trough {
+  min-height: 42px;
+  min-width: 6px;
+  margin: 3px; }
+
+scrollbar.vertical trough:dir(ltr) {
   border-left-style: solid; }
-  scrollbar.vertical trough:dir(rtl) {
-    border-left-style: none;
-    border-right-style: solid; }
 
-scrollbar.horizontal slider {
-  margin-top: 4px; }
+scrollbar.vertical trough:dir(rtl) {
+  border-right-style: solid; }
 
 scrollbar.horizontal.fine-tune slider {
-  margin-top: 5px; }
+  min-height: 4px;
+  margin: 4px; }
+
+scrollbar.horizontal slider {
+  min-height: 6px;
+  min-width: 42px;
+  margin-top: 3px; }
 
 scrollbar.horizontal trough {
   border-top-style: solid; }
@@ -1918,19 +1923,37 @@ checkbutton check {
     margin: 0; }
 
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px; }
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px; }
   scale marks {
-    color: alpha(currentColor,0.7); }
-  scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight {
-    border-radius: 5px;
-    margin: 3px; }
+    color: alpha(currentColor,0.3); }
+    scale marks.top {
+      margin-bottom: -4px; }
+    scale marks.bottom {
+      margin-top: -4px; }
+    scale marks.left {
+      margin-right: -4px; }
+    scale marks.right {
+      margin-left: -4px; }
+  scale.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px; }
+  scale.vertical mark 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; }
   scale slider {
+    min-width: 15px;
+    min-height: 15px;
+    margin: -6px;
     background-clip: border-box;
     background-image: linear-gradient(to bottom, #fbfbfc);
     border: 1px solid rgba(123, 142, 186, 0.5);
@@ -1970,6 +1993,8 @@ scale {
         background-image: linear-gradient(to bottom, #b1cff2);
         border-color: #b1cff2; }
   scale trough {
+    outline-offset: 2px;
+    -gtk-outline-radius: 2px;
     margin: 5px;
     border: none;
     background-image: linear-gradient(to bottom, #cfd6e6); }
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index 9256c0b..0f57cdb 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -1732,15 +1732,8 @@ $_scrollbar_bg_color: darken($base_color, 1%);
 
 scrollbar {
   @at-root * {
-    -GtkRange-slider-width: 13;
-    -GtkRange-trough-border: 0;
     -GtkScrollbar-has-backward-stepper: false;
     -GtkScrollbar-has-forward-stepper: false;
-    -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
-                                         // sadly can't be in '.slider'
-                                         // where it belongs
-    -GtkRange-stepper-spacing: 0;
-    -GtkRange-trough-under-steppers: 1;
   }
 
   $_slider_margin: 3px;
@@ -1748,12 +1741,28 @@ scrollbar {
 
   button { border: none; }
 
+  &.vertical {
+    button.down {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+    button.up {
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+  }
+
+  &.horizontal {
+    button.down {
+      -gtk-icon-source: -gtk-icontheme('pan-right-symbolic');
+    }
+    button.up {
+      -gtk-icon-source: -gtk-icontheme('pan-left-symbolic');
+    }
+  }
+
   &.overlay-indicator {
     &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
       opacity: 0.4;
 
-      -GtkRange-slider-width: 6px;
-
       slider {
         margin: 0;
         background-color: mix($fg_color, $bg_color, 70%);
@@ -1766,17 +1775,17 @@ scrollbar {
         background-color: transparent;
       }
 
-      // w/o the following margin tweaks the slider shrinks when hovering/dragging
       &.vertical slider {
+        min-width: 4px;
         margin-top: $_slider_margin - 1px;
         margin-bottom: $_slider_margin - 1px;
       }
 
       &.horizontal slider {
+        min-height: 4px;
         margin-left: $_slider_margin - 1px;
         margin-right: $_slider_margin - 1px;
       }
-
     }
 
     &.dragging,
@@ -1808,42 +1817,37 @@ scrollbar {
     margin: $_slider_margin;
   }
 
-  &.fine-tune slider { margin: $_slider_fine_tune_margin; }
-
   &.vertical {
 
-    slider {
-      margin-left: 1px + $_slider_margin;
-
-      &:dir(rtl) {
-        margin-left: $_slider_margin;
-        margin-right: 1px + $_slider_margin;
-      }
+    &.fine-tune slider {
+      min-width: 4px;
+      margin: $_slider_fine_tune_margin;
     }
 
-    &.fine-tune .slider {
-      margin-left: 1px + $_slider_fine_tune_margin;
-
-      &:dir(rtl) {
-        margin-left: $_slider_fine_tune_margin;
-        margin-right: 1px + $_slider_fine_tune_margin;
-      }
+    slider {
+      min-height: 42px;
+      min-width: 6px;
+      margin: $_slider_margin;
     }
 
     trough {
-      border-left-style: solid;
-
-      &:dir(rtl) {
-        border-left-style: none;
-        border-right-style: solid;
-      }
+      &:dir(ltr) { border-left-style: solid; }
+      &:dir(rtl) { border-right-style: solid; }
     }
   }
 
   &.horizontal {
-    slider { margin-top: 1px + $_slider_margin; }
 
-    &.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; }
+    &.fine-tune slider {
+      min-height: 4px;
+      margin: $_slider_fine_tune_margin;
+    }
+
+    slider {
+      min-height: 6px;
+      min-width: 42px;
+      margin-top: $_slider_margin;
+    }
 
     trough { border-top-style: solid; }
   }
@@ -1970,19 +1974,34 @@ checkbutton check {
 // GtkScale
 //
 scale {
-  -GtkScale-slider-length: 15;
-  -GtkRange-slider-width: 15;
-  -GtkRange-trough-border: 0;
-  outline-offset: -1px;
-  -gtk-outline-radius: 2px;
+  min-height: 9px;
+  min-width: 9px;
+  padding: 5px;
+
+  marks {
+    color: gtkalpha(currentColor, 0.3);
+
+    &.top { margin-bottom: -4px; }
+    &.bottom { margin-top: -4px; }
+    &.left { margin-right: -4px; }
+    &.right { margin-left: -4px; }
+  }
 
-  marks { color: gtkalpha(currentColor, 0.7); }
+  &.horizontal mark indicator {
+    min-height: 3px;
+    min-width: 1px;
+  }
+  &.vertical mark indicator {
+    min-height: 1px;
+    min-width: 3px;
+  }
 
   &.fine-tune {
-    trough, fill, highlight {
-    border-radius: 5px;
-    margin: 3px;
-    }
+    padding: 3px;
+
+    trough, fill, highlight { border-radius: 5px; }
+
+    slider { margin: -4px; }
   }
 
   trough, fill, highlight {
@@ -1992,6 +2011,9 @@ scale {
   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);
     border: 1px solid $_slider_border;
@@ -2044,6 +2066,8 @@ scale {
   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);