Adwaita: Scrollbar transitions and size

- tone down the size of the controller again
- transition between the indicator and control fluidly

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/1886

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 5588e4fb40aae8e7219bd5298f809462201e66a9..8adce445a7bda5e8deb0c4adb08877be9b51db0f 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2278,11 +2278,14 @@ notebook {
 /**************
  * Scrollbars *
  **************/
+
 scrollbar {
   $_slider_min_length: 40px;
+  $_slider_width: 8px;
+  $_scrollbar_transition: all 300ms $ease-out-quad;
 
   background-color: $scrollbar_bg_color;
-  transition: 300ms $ease-out-quad;
+  transition: $_scrollbar_transition;
 
   // scrollbar border
   &.top { border-bottom: 1px solid $borders_color; }
@@ -2291,13 +2294,14 @@ scrollbar {
   &.right { border-left: 1px solid $borders_color; }
 
   > range > trough > slider {
-    min-width: 10px;
-    min-height: 10px;
+    min-width: $_slider_width;
+    min-height: $_slider_width;
     margin: -1px;
     border: 4px solid transparent;
     border-radius: 10px;
     background-clip: padding-box;
     background-color: $scrollbar_slider_color;
+    transition: $_scrollbar_transition;
 
     &:hover { background-color: $scrollbar_slider_hover_color; }
 
@@ -2308,8 +2312,8 @@ scrollbar {
 
   > range.fine-tune {
     > trough > slider {
-      min-width: 6px;
-      min-height: 6px;
+      min-width: $_slider_width - 2;
+      min-height: $_slider_width - 2;
     }
 
     &.horizontal > trough > slider { border-width: 6px 4px; }