Adwaita: Avoid fine-tune scrollbars jumping

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

5 files changed, 18 insertions, 16 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index fc994b0962..634a1475fd 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2642,6 +2642,7 @@ scrollbar {
   $_slider_min_length: 40px;
   $_slider_width: 8px;
   $_scrollbar_transition: all 300ms $ease-out-quad;
+  $_fine-tune_slider_border: $_slider_width - 3; //3672
 
   // disable steppers
   @at-root * {
@@ -2686,12 +2687,13 @@ scrollbar {
 
   &.fine-tune {
     slider {
-      min-width: $_slider_width - 2;
-      min-height: $_slider_width - 2;
+      transition: none;
+      min-width: $_fine-tune_slider_border+1;
+      min-height: $_fine-tune_slider_border+1;
     }
 
-    &.horizontal slider { border-width: 6px 4px; }
-    &.vertical slider { border-width: 4px 6px; }
+    &.horizontal slider { border-width: $_fine-tune_slider_border 4px; }
+    &.vertical slider { border-width: 4px $_fine-tune_slider_border; }
   }
 
   &.overlay-indicator {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 25482cf750..b1907ffdf2 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -994,11 +994,11 @@ scrollbar slider:backdrop { background-color: #5a5a59; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
+scrollbar.fine-tune slider { transition: none; min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 78844c1e7e..db393f5663 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1002,11 +1002,11 @@ scrollbar slider:backdrop { background-color: #cecfce; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
+scrollbar.fine-tune slider { transition: none; min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 9819e90b50..feceac828c 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1074,11 +1074,11 @@ scrollbar slider:backdrop { background-color: #5a5a59; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
+scrollbar.fine-tune slider { transition: none; min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 0562e212bb..8cb1122f1f 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1082,11 +1082,11 @@ scrollbar slider:backdrop { background-color: #cecfce; }
 
 scrollbar slider:disabled { background-color: transparent; }
 
-scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; }
+scrollbar.fine-tune slider { transition: none; min-width: 6px; min-height: 6px; }
 
-scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; }
+scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }
 
-scrollbar.fine-tune.vertical slider { border-width: 4px 6px; }
+scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }