[libadwaita/wip/exalm/scrollbar] stylesheet: Rework scrollbar style

[Alexander Mikhaylenko <alexm src gnome org>]

commit b0667ee8b018bcd26707216911937001b8ba3f76
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Oct 12 02:44:14 2021 +0500

    stylesheet: Rework scrollbar style
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/130

 src/stylesheet/_colors.scss            |   1 +
 src/stylesheet/widgets/_scrolling.scss | 127 ++++++++++++++++++++-------------
 2 files changed, 78 insertions(+), 50 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index a976bb74..ef8a0e0d 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -31,6 +31,7 @@ $headerbar_backdrop_color: $bg_color;
 $card_bg_color: if($variant == 'light', #ffffff, transparentize(white, .945));
 $card_fg_color: $fg_color;
 $card_border_color: if($variant == 'light', gtkalpha(currentColor, .18), gtkalpha(currentColor, .18));
+$scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .1));
 
 $popover_bg_color: if($variant == 'light', #ffffff, #383838);
 $popover_fg_color: $fg_color;
diff --git a/src/stylesheet/widgets/_scrolling.scss b/src/stylesheet/widgets/_scrolling.scss
index df05bd29..dc93d6e5 100644
--- a/src/stylesheet/widgets/_scrolling.scss
+++ b/src/stylesheet/widgets/_scrolling.scss
@@ -3,11 +3,10 @@ $_scrollbar_bg_color: transparentize(black, .9);
 scrollbar {
   $_slider_min_length: 40px;
   $_slider_width: 8px;
-  $_scrollbar_transition: all 300ms $ease-out-quad;
-  $_fine-tune_slider_border: $_slider_width - 3; //#3672
+  $_scrollbar_transition: all 200ms linear;
 
-  background-color: $_scrollbar_bg_color;
-  transition: $_scrollbar_transition;
+  background-color: $base_color;
+  color: $text_color;
 
   // scrollbar border
   &.top    { box-shadow: inset 0 -1px $borders_color; padding-bottom: 1px; }
@@ -15,65 +14,97 @@ scrollbar {
   &.left   { box-shadow: inset -1px 0 $borders_color; padding-right:  1px; }
   &.right  { box-shadow: inset  1px 0 $borders_color; padding-left:   1px; }
 
-  > range > trough > slider {
-    min-width: $_slider_width;
-    min-height: $_slider_width;
-    margin: -1px;
-    border: 4px solid transparent;
-    border-radius: 10px;
-    background-clip: padding-box;
-    background-color: gtkalpha(currentColor, .6);
+  > range > trough {
+    margin: 7px;
     transition: $_scrollbar_transition;
+    border-radius: 10px;
+    outline: 1px solid transparent;
 
-    &:hover { background-color: gtkalpha(currentColor, .8); }
+    > slider {
+      min-width: $_slider_width;
+      min-height: $_slider_width;
+      margin: -6px;
+      border: 6px solid transparent;
+      border-radius: 10px;
+      background-clip: padding-box;
+      background-color: currentColor;
+      opacity: .2;
+      transition: $_scrollbar_transition;
 
-    &:hover:active { background-color: $accent_bg_color; }
+      &:hover { opacity: .4; }
 
-    &:disabled { background-color: transparent; }
-  }
+      &:hover:active { opacity: .6; }
 
-  > range.fine-tune {
-    > trough > slider {
-      transition: none;
-      min-width: $_fine-tune_slider_border+1;
-      min-height: $_fine-tune_slider_border+1;
+      &:disabled { opacity: .0; }
     }
+  }
+
+  &.horizontal > range > trough {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
 
-    &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; }
-    &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; }
+  &.vertical > range > trough {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+
+  > range.fine-tune > trough > slider {
+    &, &:hover, &:hover:active {
+      background-color: $accent_color;
+    }
   }
 
   &.overlay-indicator {
-    &:not(.dragging):not(.hovering) {
-      box-shadow: none;
-      opacity: 0.4;
-      background-color: transparent;
+    background: none;
+    color: inherit;
+    box-shadow: none;
+    padding: 0;
+
+    > range > trough > slider {
+      outline: 1px solid $scrollbar_outline_color;
+      outline-offset: -6px;
+    }
 
+    &:not(.hovering) > range > trough > slider {
+      min-width: 3px;
+      min-height: 3px;
+    }
+
+    &.hovering > range > trough {
+      outline-color: gtkalpha($scrollbar_outline_color, .25);
+      background-color: gtkalpha(currentColor, .1);
+    }
+
+    &.horizontal {
       > range > trough > slider {
-        margin: 0;
-        min-width: 3px;
-        min-height: 3px;
-        background-color: $fg_color;
-        border: 1px solid if($variant == 'light', white, black);
+        min-width: $_slider_min_length;
       }
 
-      &.horizontal {
-        > range > trough > slider {
-          margin: 0 2px;
-          min-width: $_slider_min_length;
-        }
+      &.hovering > range > trough > slider {
+        min-height: 8px;
       }
 
-      &.vertical {
-        > range > trough > slider {
-          margin: 2px 0;
-          min-height: $_slider_min_length;
-        }
+      &:not(.hovering) > range > trough {
+        margin-top: 3px;
+        margin-bottom: 3px;
       }
     }
 
-    &.dragging,
-    &.hovering { opacity: 0.8; }
+    &.vertical {
+      > range > trough > slider {
+        min-height: $_slider_min_length;
+      }
+
+      &.hovering > range > trough > slider {
+        min-width: 8px;
+      }
+
+      &:not(.hovering) > range > trough {
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+    }
   }
 
   &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
@@ -105,14 +136,10 @@ scrolledwindow {
     // Only color the top-left (or top right in RTL) pixel, to visually connect
     // the borders of the two scrollbars.
 
-    background: $borders_color,
-                linear-gradient(to bottom, transparent 1px, $_scrollbar_bg_color 1px),
-                linear-gradient(to right, transparent 1px, $_scrollbar_bg_color 1px);
+    background: linear-gradient(to bottom right, $borders_color 1px, $base_color 1px);
 
     &:dir(rtl) {
-      background: $borders_color,
-                  linear-gradient(to bottom, transparent 1px, $_scrollbar_bg_color 1px),
-                  linear-gradient(to left, transparent 1px, $_scrollbar_bg_color 1px);
+      background: linear-gradient(to bottom left, $borders_color 1px, $base_color 1px);
     }
   }
 }