1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
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
|
