Bring scrollbar closer to source material

gtk-3.0/gtk-widgets.css

@@ -1408,36 +1408,70 @@ scale {
 
 scrollbar {
   border: none;
-  background-color: shade(@theme_bg_color, 0.9); }
+  background-color: mix(@theme_bg_color, @theme_fg_color, 0.1); }
   scrollbar trough {
     border: none;
     border-radius: 0; }
   scrollbar:backdrop {
-    background-color: shade(@theme_bg_color, 0.9); }
-  scrollbar button, scrollbar button:backdrop, scrollbar button:hover, scrollbar button:hover:backdrop, scrollbar button:active, scrollbar button:active:backdrop, scrollbar button:disabled, scrollbar button:disabled:backdrop {
-    padding: 3px;
-    border-color: transparent;
-    background-color: transparent; }
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.1); }
+  scrollbar button:hover {
+    box-shadow: none;
+    border-color: mix(@theme_bg_color, @theme_fg_color, 0.1);
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.2); }
+  scrollbar button:active {
+    box-shadow: none;
+    border-color: mix(@theme_bg_color, @theme_fg_color, 0.1);
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.6); }
+  scrollbar button, scrollbar button:backdrop, scrollbar button:disabled, scrollbar button:disabled:backdrop {
+    padding: 4px;
+    border-color: mix(@theme_bg_color, @theme_fg_color, 0.1);
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.1); }
   scrollbar slider {
     min-width: 45px;
     min-height: 14px;
     margin: 0;
     border: none;
     border-radius: 0px;
     background-clip: padding-box;
-    background-color: shade(@theme_bg_color, 0.6); }
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.4); }
     scrollbar slider:hover {
-      background-color: shade(@theme_bg_color, 0.8); }
+      background-color: mix(@theme_bg_color, @theme_fg_color, 0.35); }
       scrollbar slider:hover:active {
-        background-color: shade(@theme_bg_color, 0.3); }
+        background-color: mix(@theme_bg_color, @theme_fg_color, 0.6); }
     scrollbar slider:backdrop {
-      background-color: shade(@theme_bg_color, 0.55); }
+      background-color: mix(@theme_bg_color, @theme_fg_color, 0.45); }
     scrollbar slider:disabled {
       background-color: transparent; }
   scrollbar.vertical slider {
     min-width: 14px;
     min-height: 45px; }
-  scrollbar.overlay-indicator {
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    border: none;
+    opacity: 0.7;
+    margin: 0;
+    background-color: transparent; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 2px;
+      min-height: 2px;
+      background-color: mix(@theme_bg_color, @theme_fg_color, 0.6);
+      border: 2px solid transparent;
+      border-radius: 2px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 0;
+      min-height: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
+      min-width: 0;
+      min-height: 0;
+      padding: 0;
+      border: none;
+      box-shadow: none;
+      color: transparent;
+      background-color: transparent; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
     opacity: 1; }
   scrollbar.horizontal slider {
     min-width: 40px; }
@@ -1446,17 +1480,25 @@ scrollbar {
     min-width: 6px; }
     scrollbar.horizontal button.down {
       -gtk-icon-source: url("assets/arrow-right.svg"); }
+      scrollbar.horizontal button.down:active {
+        -gtk-icon-source: url("assets/arrow-right-active.svg"); }
     scrollbar.horizontal button.up {
       -gtk-icon-source: url("assets/arrow-left.svg"); }
+      scrollbar.horizontal button.up:active {
+        -gtk-icon-source: url("assets/arrow-left-active.svg"); }
   scrollbar.vertical slider {
     min-height: 40px; }
   scrollbar.vertical button {
     min-height: 6px;
     min-width: 6px; }
     scrollbar.vertical button.down {
       -gtk-icon-source: url("assets/arrow-down.svg"); }
+      scrollbar.vertical button.down:active {
+        -gtk-icon-source: url("assets/arrow-down-active.svg"); }
     scrollbar.vertical button.up {
       -gtk-icon-source: url("assets/arrow-up.svg"); }
+      scrollbar.vertical button.up:active {
+        -gtk-icon-source: url("assets/arrow-up-active.svg"); }
   treeview ~ scrollbar.vertical {
     border-top: 1px solid @borders;
     margin-top: -1px; }
@@ -1553,15 +1595,9 @@ filechooser placessidebar.sidebar row, filechooser placessidebar.sidebar view ro
 .sidebar frame, .sidebar.frame {
   border: none; }
 .sidebar scrollbar {
-  background-color: alpha(@light_shadow, 0.5); }
-  .sidebar scrollbar.horizontal button.down {
-    -gtk-icon-source: url("assets/arrow-right-dark.svg"); }
-  .sidebar scrollbar.horizontal button.up {
-    -gtk-icon-source: url("assets/arrow-left-dark.svg"); }
-  .sidebar scrollbar.vertical button.down {
-    -gtk-icon-source: url("assets/arrow-down-dark.svg"); }
-  .sidebar scrollbar.vertical button.up {
-    -gtk-icon-source: url("assets/arrow-up-dark.svg"); }
+  background-color: mix(@sidebar_bg_color, @light_shadow, 0.2); }
+  .sidebar scrollbar button {
+    background-color: mix(@sidebar_bg_color, @light_shadow, 0.2); }
 paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
   border: none; }