Adwaita: make scrollbars largerwip/jimmac/larger-scrollbars-rectangular

when not showing overlay indicators, but expanded controls, use a bit
larger size.

indicator rounded, controller rectangular

FIXME: metrics (margin not respected for overlay)

fixes https://gitlab.gnome.org/GNOME/gtk/issues/1886

3 files changed, 24 insertions, 21 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 828e78c4db..f8474465a4 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2613,11 +2613,11 @@ scrollbar {
 
   // slider
   slider {
-    min-width: 6px;
-    min-height: 6px;
+    min-width: 12px;
+    min-height: 12px;
     margin: -1px;
-    border: 4px solid transparent;
-    border-radius: 8px;
+    border: none;
+    border-radius: 0;
     background-clip: padding-box;
     background-color: $scrollbar_slider_color;
 
@@ -2632,12 +2632,12 @@ scrollbar {
 
   &.fine-tune {
     slider {
-      min-width: 4px;
-      min-height: 4px;
+      min-width: 6px;
+      min-height: 6px;
     }
 
-    &.horizontal slider { border-width: 5px 4px; }
-    &.vertical slider { border-width: 4px 5px; }
+    &.horizontal slider { border-width: 6px 4px; }
+    &.vertical slider { border-width: 4px 6px; }
   }
 
   &.overlay-indicator {
@@ -2647,11 +2647,14 @@ scrollbar {
       background-color: transparent;
 
       slider {
-        margin: 0;
-        min-width: 3px;
-        min-height: 3px;
+        &:dir(ltr), &:dir(rtl) {
+        border-radius: 10px;
+        margin: 4px !important;
+        min-width: 4px;
+        min-height: 4px;
         background-color: $fg_color;
         border: 1px solid if($variant == 'light', white, black);
+        }
       }
 
       button {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index df6b6ab05c..8832bce2e2 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1030,7 +1030,7 @@ scrollbar.right { border-left: 1px solid #1b1b1b; }
 
 scrollbar:backdrop { background-color: #2d2d2d; border-color: #202020; transition: 200ms ease-out; }
 
-scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #a4a4a3; }
+scrollbar slider { min-width: 12px; min-height: 12px; margin: -1px; border: none; border-radius: 0; background-clip: padding-box; background-color: #a4a4a3; }
 
 scrollbar slider:hover { background-color: #c9c9c7; }
 
@@ -1040,15 +1040,15 @@ scrollbar slider:backdrop { background-color: #5a5a59; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; }
+scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }
 
-scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #eeeeec; border: 1px solid black; }
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider:dir(ltr), scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider:dir(rtl) { border-radius: 10px; margin: 4px !important; min-width: 4px; min-height: 4px; background-color: #eeeeec; border: 1px solid black; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #eeeeec; background-clip: padding-box; border-radius: 100%; border: 1px solid black; -gtk-icon-source: none; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index c8dbbb4961..e83e2d6f7f 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1038,7 +1038,7 @@ scrollbar.right { border-left: 1px solid #cdc7c2; }
 
 scrollbar:backdrop { background-color: #efedec; border-color: #d5d0cc; transition: 200ms ease-out; }
 
-scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #7e8182; }
+scrollbar slider { min-width: 12px; min-height: 12px; margin: -1px; border: none; border-radius: 0; background-clip: padding-box; background-color: #7e8182; }
 
 scrollbar slider:hover { background-color: #565b5c; }
 
@@ -1048,15 +1048,15 @@ scrollbar slider:backdrop { background-color: #cecfce; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; }
+scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }
 
-scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #2e3436; border: 1px solid white; }
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider:dir(ltr), scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider:dir(rtl) { border-radius: 10px; margin: 4px !important; min-width: 4px; min-height: 4px; background-color: #2e3436; border: 1px solid white; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #2e3436; background-clip: padding-box; border-radius: 100%; border: 1px solid white; -gtk-icon-source: none; }