215 lines
11 KiB
Diff
215 lines
11 KiB
Diff
|
From ca34428d177cbe5044c11e12b1bd9ef5e045c917 Mon Sep 17 00:00:00 2001
|
||
|
|
From: Jakub Steiner <jimmac@gmail.com>
|
||
|
|
Date: Mon, 15 Feb 2021 12:53:36 +0100
|
||
|
|
Subject: [PATCH 3/3] 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
|
||
|
|
---
|
||
|
|
gtk/theme/Adwaita/_common.scss | 13 ++++++++-----
|
||
|
|
gtk/theme/Adwaita/gtk-contained-dark.css | 4 ++--
|
||
|
|
gtk/theme/Adwaita/gtk-contained.css | 4 ++--
|
||
|
|
gtk/theme/HighContrast/gtk-contained-inverse.css | 16 ++++++++++------
|
||
|
|
gtk/theme/HighContrast/gtk-contained.css | 16 ++++++++++------
|
||
|
|
5 files changed, 32 insertions(+), 21 deletions(-)
|
||
|
|
|
||
|
|
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
|
||
|
|
index 581da9ef45..fc994b0962 100644
|
||
|
|
--- a/gtk/theme/Adwaita/_common.scss
|
||
|
|
+++ b/gtk/theme/Adwaita/_common.scss
|
||
|
|
@@ -2640,6 +2640,8 @@ notebook {
|
||
|
|
**************/
|
||
|
|
scrollbar {
|
||
|
|
$_slider_min_length: 40px;
|
||
|
|
+ $_slider_width: 8px;
|
||
|
|
+ $_scrollbar_transition: all 300ms $ease-out-quad;
|
||
|
|
|
||
|
|
// disable steppers
|
||
|
|
@at-root * {
|
||
|
|
@@ -2648,7 +2650,7 @@ scrollbar {
|
||
|
|
}
|
||
|
|
|
||
|
|
background-color: $scrollbar_bg_color;
|
||
|
|
- transition: 300ms $ease-out-quad;
|
||
|
|
+ transition: $_scrollbar_transition;
|
||
|
|
|
||
|
|
// scrollbar border
|
||
|
|
&.top { border-bottom: 1px solid $borders_color; }
|
||
|
|
@@ -2664,13 +2666,14 @@ scrollbar {
|
||
|
|
|
||
|
|
// slider
|
||
|
|
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; }
|
||
|
|
|
||
|
|
@@ -2683,8 +2686,8 @@ scrollbar {
|
||
|
|
|
||
|
|
&.fine-tune {
|
||
|
|
slider {
|
||
|
|
- min-width: 6px;
|
||
|
|
- min-height: 6px;
|
||
|
|
+ min-width: $_slider_width - 2;
|
||
|
|
+ min-height: $_slider_width - 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.horizontal slider { border-width: 6px 4px; }
|
||
|
|
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
|
||
|
|
index 9bb4c1c2fb..25482cf750 100644
|
||
|
|
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
|
||
|
|
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
|
||
|
|
@@ -970,7 +970,7 @@ notebook > stack:not(:only-child) { background-color: #2d2d2d; }
|
||
|
|
notebook > stack:not(:only-child):backdrop { background-color: #303030; }
|
||
|
|
|
||
|
|
/************** Scrollbars * */
|
||
|
|
-scrollbar { background-color: #313131; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
+scrollbar { background-color: #313131; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
* { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
|
||
|
|
|
||
|
|
@@ -984,7 +984,7 @@ scrollbar.right { border-left: 1px solid #1b1b1b; }
|
||
|
|
|
||
|
|
scrollbar:backdrop { background-color: #2d2d2d; border-color: #202020; transition: 200ms ease-out; }
|
||
|
|
|
||
|
|
-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; }
|
||
|
|
+scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
scrollbar slider:hover { background-color: #c9c9c7; }
|
||
|
|
|
||
|
|
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
|
||
|
|
index 6a429b32f3..78844c1e7e 100644
|
||
|
|
--- a/gtk/theme/Adwaita/gtk-contained.css
|
||
|
|
+++ b/gtk/theme/Adwaita/gtk-contained.css
|
||
|
|
@@ -978,7 +978,7 @@ notebook > stack:not(:only-child) { background-color: #ffffff; }
|
||
|
|
notebook > stack:not(:only-child):backdrop { background-color: #fcfcfc; }
|
||
|
|
|
||
|
|
/************** Scrollbars * */
|
||
|
|
-scrollbar { background-color: #cecece; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
+scrollbar { background-color: #cecece; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
* { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
|
||
|
|
|
||
|
|
@@ -992,7 +992,7 @@ scrollbar.right { border-left: 1px solid #cdc7c2; }
|
||
|
|
|
||
|
|
scrollbar:backdrop { background-color: #efedec; border-color: #d5d0cc; transition: 200ms ease-out; }
|
||
|
|
|
||
|
|
-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; }
|
||
|
|
+scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
scrollbar slider:hover { background-color: #565b5c; }
|
||
|
|
|
||
|
|
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
|
||
|
|
index 10115a8a08..9819e90b50 100644
|
||
|
|
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
|
||
|
|
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
|
||
|
|
@@ -1050,7 +1050,7 @@ notebook > stack:not(:only-child) { background-color: #2d2d2d; }
|
||
|
|
notebook > stack:not(:only-child):backdrop { background-color: #303030; }
|
||
|
|
|
||
|
|
/************** Scrollbars * */
|
||
|
|
-scrollbar { background-color: #313131; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
+scrollbar { background-color: #313131; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
* { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
|
||
|
|
|
||
|
|
@@ -1064,7 +1064,7 @@ scrollbar.right { border-left: 1px solid #686868; }
|
||
|
|
|
||
|
|
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: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
scrollbar slider:hover { background-color: #c9c9c7; }
|
||
|
|
|
||
|
|
@@ -1074,11 +1074,11 @@ 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; }
|
||
|
|
|
||
|
|
@@ -1918,7 +1918,11 @@ decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9p
|
||
|
|
|
||
|
|
decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(104, 104, 104, 0.9); transition: 200ms ease-out; }
|
||
|
|
|
||
|
|
-.maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; }
|
||
|
|
+.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
|
||
|
|
+
|
||
|
|
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
|
||
|
|
+
|
||
|
|
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
|
||
|
|
|
||
|
|
.popup decoration { box-shadow: none; }
|
||
|
|
|
||
|
|
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
|
||
|
|
index 5d95105101..0562e212bb 100644
|
||
|
|
--- a/gtk/theme/HighContrast/gtk-contained.css
|
||
|
|
+++ b/gtk/theme/HighContrast/gtk-contained.css
|
||
|
|
@@ -1058,7 +1058,7 @@ notebook > stack:not(:only-child) { background-color: #ffffff; }
|
||
|
|
notebook > stack:not(:only-child):backdrop { background-color: #fcfcfc; }
|
||
|
|
|
||
|
|
/************** Scrollbars * */
|
||
|
|
-scrollbar { background-color: #cecece; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
+scrollbar { background-color: #cecece; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
* { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
|
||
|
|
|
||
|
|
@@ -1072,7 +1072,7 @@ scrollbar.right { border-left: 1px solid #877b6e; }
|
||
|
|
|
||
|
|
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: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
|
|
|
||
|
|
scrollbar slider:hover { background-color: #565b5c; }
|
||
|
|
|
||
|
|
@@ -1082,11 +1082,11 @@ 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; }
|
||
|
|
|
||
|
|
@@ -1934,7 +1934,11 @@ decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9p
|
||
|
|
|
||
|
|
decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; }
|
||
|
|
|
||
|
|
-.maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; }
|
||
|
|
+.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
|
||
|
|
+
|
||
|
|
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
|
||
|
|
+
|
||
|
|
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
|
||
|
|
|
||
|
|
.popup decoration { box-shadow: none; }
|
||
|
|
|
||
|
|
--
|
||
|
|
2.29.2
|
||
|
|
|