gtk.css
ASCII text, with very long lines (657)
1
@keyframes ripple_effect {
2
from {
3
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0)); }
4
to {
5
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } }
6
@keyframes flat_ripple_effect {
7
from {
8
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.15)); }
9
to {
10
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } }
11
@keyframes row_ripple_effect {
12
from {
13
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.05)); }
14
to {
15
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } }
16
@keyframes tab_ripple_effect {
17
from {
18
background-image: radial-gradient(circle farthest-corner at center, rgba(66, 165, 245, 0.6) 0%, transparent 0%); }
19
50% {
20
background-image: radial-gradient(circle farthest-corner at center, rgba(66, 165, 245, 0.6) 100%, transparent 0%); }
21
to {
22
background-image: radial-gradient(circle farthest-corner at center, transparent 100%, transparent 0%); } }
23
@keyframes header_ripple_effect {
24
from {
25
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 0%, transparent 0%); }
26
to {
27
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 100%, transparent 0%); } }
28
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
32
-GtkTextView-error-underline-color: #DD2C00;
33
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
35
-GtkWidget-text-handle-width: 24;
36
-GtkWidget-text-handle-height: 24;
37
-GtkDialog-button-spacing: 4;
38
-GtkDialog-action-area-border: 0;
39
outline-style: solid;
40
outline-width: 2px;
41
outline-color: alpha(currentColor, 0.3);
42
outline-offset: -4px;
43
-gtk-outline-radius: 2px;
44
-gtk-secondary-caret-color: #42A5F5; }
45
46
/***************
47
* Base States *
48
***************/
49
.background {
50
background-color: #F5F5F5;
51
color: rgba(0, 0, 0, 0.8); }
52
53
/*
54
These wildcard seems unavoidable, need to investigate.
55
Wildcards are bad and troublesome, use them with care,
56
or better, just don't.
57
Everytime a wildcard is used a kitten dies, painfully.
58
*/
59
*:disabled {
60
-gtk-icon-effect: dim; }
61
62
.gtkstyle-fallback {
63
background-color: #F5F5F5;
64
color: rgba(0, 0, 0, 0.8); }
65
.gtkstyle-fallback:hover {
66
background-color: #e8e8e8;
67
color: rgba(0, 0, 0, 0.8); }
68
.gtkstyle-fallback:active {
69
background-color: gainsboro;
70
color: rgba(0, 0, 0, 0.8); }
71
.gtkstyle-fallback:disabled {
72
background-color: #F5F5F5;
73
color: rgba(0, 0, 0, 0.32); }
74
.gtkstyle-fallback:selected {
75
background-color: #42A5F5;
76
color: #FFFFFF; }
77
78
.view, iconview {
79
background-color: #FFFFFF;
80
color: rgba(0, 0, 0, 0.8); }
81
.view:hover, iconview:hover, .view:active, iconview:active, .view:selected, iconview:selected {
82
border-radius: 2px; }
83
.view:disabled, iconview:disabled {
84
color: rgba(0, 0, 0, 0.32); }
85
86
.view text, iconview text,
87
textview text {
88
background-color: #FFFFFF;
89
color: rgba(0, 0, 0, 0.8); }
90
.view text:disabled, iconview text:disabled,
91
textview text:disabled {
92
color: rgba(0, 0, 0, 0.32); }
93
94
textview border {
95
background-color: #fafafa;
96
color: rgba(0, 0, 0, 0.48); }
97
98
.rubberband,
99
rubberband,
100
flowbox rubberband,
101
treeview.view rubberband,
102
.content-view rubberband {
103
border: 1px solid #40C4FF;
104
background-color: rgba(64, 196, 255, 0.3); }
105
106
flowbox flowboxchild {
107
outline-offset: -2px;
108
padding: 4px;
109
border-radius: 2px; }
110
111
label {
112
caret-color: currentColor; }
113
label.separator {
114
color: rgba(0, 0, 0, 0.8); }
115
label selection {
116
background-color: #42A5F5;
117
color: #FFFFFF; }
118
label:disabled {
119
color: rgba(0, 0, 0, 0.32); }
120
121
.dim-label, label.separator, .titlebar:not(headerbar) .subtitle,
122
headerbar .subtitle {
123
opacity: 0.6; }
124
125
assistant .sidebar {
126
padding: 4px 0; }
127
assistant .sidebar label {
128
min-height: 36px;
129
padding: 0 12px;
130
color: rgba(0, 0, 0, 0.48);
131
font-weight: 500; }
132
assistant .sidebar label.highlight {
133
color: rgba(0, 0, 0, 0.8); }
134
135
popover.background.touch-selection, popover.background.magnifier, popover.background.osd, .csd popover.background.touch-selection, .csd popover.background.magnifier, .csd popover.background.osd, .app-notification,
136
.app-notification.frame, .osd .scale-popup, .floating-bar, .osd {
137
opacity: 0.9; }
138
139
/*********************
140
* Spinner Animation *
141
*********************/
142
@keyframes spin {
143
to {
144
-gtk-icon-transform: rotate(1turn); } }
145
@keyframes spin_colors {
146
1% {
147
color: #66BB6A; }
148
25% {
149
color: #66BB6A; }
150
26% {
151
color: #42A5F5; }
152
50% {
153
color: #42A5F5; }
154
51% {
155
color: #FFA726; }
156
75% {
157
color: #FFA726; }
158
76% {
159
color: #EF5350; }
160
100% {
161
color: #EF5350; } }
162
spinner {
163
background: none;
164
opacity: 0;
165
-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); }
166
spinner:checked {
167
opacity: 1;
168
animation: spin 1s linear infinite, spin_colors 4s linear infinite; }
169
spinner:checked:disabled {
170
opacity: 0.4; }
171
172
/****************
173
* Text Entries *
174
****************/
175
spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry,
176
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical),
177
entry {
178
min-height: 36px;
179
padding: 0 8px;
180
border-radius: 2px;
181
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
182
border-image: none;
183
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
184
background-color: #FFFFFF;
185
color: rgba(0, 0, 0, 0.8); }
186
spinbutton:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry:focus,
187
notebook > stack:not(:only-child) revealer spinbutton:focus:not(.vertical),
188
entry:focus {
189
border-image: none;
190
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
191
spinbutton:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry:disabled,
192
notebook > stack:not(:only-child) revealer spinbutton:disabled:not(.vertical),
193
entry:disabled {
194
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
195
background-color: #fafafa;
196
color: rgba(0, 0, 0, 0.32); }
197
spinbutton.flat:not(.vertical), notebook > stack:not(:only-child) entry,
198
notebook > stack:not(:only-child) spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry.flat,
199
notebook > stack:not(:only-child) revealer spinbutton.flat:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical),
200
entry.flat {
201
border-radius: 0;
202
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
203
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px;
204
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
205
background-color: transparent;
206
color: rgba(0, 0, 0, 0.8); }
207
spinbutton.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry:focus,
208
notebook > stack:not(:only-child) spinbutton:focus:not(.vertical), colorchooser .popover.osd spinbutton:focus:not(.vertical),
209
entry.flat:focus {
210
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 100%, transparent 0%) 0 0 2/0 0 2px;
211
box-shadow: inset 0 -1px alpha(currentColor, 0.3); }
212
spinbutton.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry:disabled,
213
notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), colorchooser .popover.osd spinbutton:disabled:not(.vertical),
214
entry.flat:disabled {
215
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
216
background-color: transparent;
217
color: rgba(0, 0, 0, 0.32); }
218
spinbutton:not(.vertical) image, notebook > stack:not(:only-child) revealer entry image,
219
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image,
220
entry image {
221
color: alpha(currentColor, 0.75); }
222
spinbutton:not(.vertical) image:hover, notebook > stack:not(:only-child) revealer entry image:hover,
223
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:hover, spinbutton:not(.vertical) image:active, notebook > stack:not(:only-child) revealer entry image:active,
224
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:active,
225
entry image:hover,
226
entry image:active {
227
color: currentColor; }
228
spinbutton:not(.vertical) image:disabled, notebook > stack:not(:only-child) revealer entry image:disabled,
229
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:disabled,
230
entry image:disabled {
231
color: alpha(currentColor, 0.6); }
232
spinbutton:not(.vertical) image.left, notebook > stack:not(:only-child) revealer entry image.left,
233
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.left,
234
entry image.left {
235
padding-left: 2px;
236
padding-right: 6px; }
237
spinbutton:not(.vertical) image.right, notebook > stack:not(:only-child) revealer entry image.right,
238
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.right,
239
entry image.right {
240
padding-left: 6px;
241
padding-right: 2px; }
242
spinbutton:not(.vertical) undershoot.left, notebook > stack:not(:only-child) revealer entry undershoot.left,
243
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.left,
244
entry undershoot.left {
245
background-color: transparent;
246
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
247
padding-left: 1px;
248
background-size: 1px 12px;
249
background-repeat: repeat-y;
250
background-origin: content-box;
251
background-position: left top; }
252
spinbutton:not(.vertical) undershoot.right, notebook > stack:not(:only-child) revealer entry undershoot.right,
253
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.right,
254
entry undershoot.right {
255
background-color: transparent;
256
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
257
padding-right: 1px;
258
background-size: 1px 12px;
259
background-repeat: repeat-y;
260
background-origin: content-box;
261
background-position: right top; }
262
spinbutton.error:not(.vertical), notebook > stack:not(:only-child) revealer entry.error,
263
notebook > stack:not(:only-child) revealer spinbutton.error:not(.vertical),
264
entry.error {
265
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
266
border-image: none;
267
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
268
background-color: #DD2C00;
269
color: #FFFFFF; }
270
spinbutton.error:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry.error:focus,
271
entry.error:focus {
272
border-image: none;
273
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
274
spinbutton.error:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry.error:disabled,
275
entry.error:disabled {
276
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
277
background-color: #fafafa;
278
color: rgba(0, 0, 0, 0.32); }
279
spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error,
280
notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical),
281
entry.error.flat {
282
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
283
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px;
284
box-shadow: inset 0 -1px #DD2C00;
285
background-color: transparent;
286
color: rgba(0, 0, 0, 0.8); }
287
spinbutton.error.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.error:focus,
288
notebook > stack:not(:only-child) spinbutton.error:focus:not(.vertical), colorchooser .popover.osd spinbutton.error:focus:not(.vertical),
289
entry.error.flat:focus {
290
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 100%, transparent 0%) 0 0 2/0 0 2px;
291
box-shadow: inset 0 -1px #DD2C00; }
292
spinbutton.error.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.error:disabled,
293
notebook > stack:not(:only-child) spinbutton.error:disabled:not(.vertical), colorchooser .popover.osd spinbutton.error:disabled:not(.vertical),
294
entry.error.flat:disabled {
295
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
296
background-color: transparent;
297
color: rgba(0, 0, 0, 0.32); }
298
spinbutton.warning:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning,
299
notebook > stack:not(:only-child) revealer spinbutton.warning:not(.vertical),
300
entry.warning {
301
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
302
border-image: none;
303
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
304
background-color: #FF6D00;
305
color: #FFFFFF; }
306
spinbutton.warning:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning:focus,
307
entry.warning:focus {
308
border-image: none;
309
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
310
spinbutton.warning:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning:disabled,
311
entry.warning:disabled {
312
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
313
background-color: #fafafa;
314
color: rgba(0, 0, 0, 0.32); }
315
spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning,
316
notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical),
317
entry.warning.flat {
318
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
319
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px;
320
box-shadow: inset 0 -1px #FF6D00;
321
background-color: transparent;
322
color: rgba(0, 0, 0, 0.8); }
323
spinbutton.warning.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.warning:focus,
324
notebook > stack:not(:only-child) spinbutton.warning:focus:not(.vertical), colorchooser .popover.osd spinbutton.warning:focus:not(.vertical),
325
entry.warning.flat:focus {
326
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 100%, transparent 0%) 0 0 2/0 0 2px;
327
box-shadow: inset 0 -1px #FF6D00; }
328
spinbutton.warning.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.warning:disabled,
329
notebook > stack:not(:only-child) spinbutton.warning:disabled:not(.vertical), colorchooser .popover.osd spinbutton.warning:disabled:not(.vertical),
330
entry.warning.flat:disabled {
331
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
332
background-color: transparent;
333
color: rgba(0, 0, 0, 0.32); }
334
spinbutton:not(.vertical) progress, notebook > stack:not(:only-child) revealer entry progress,
335
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) progress,
336
entry progress {
337
margin: 2px -6px;
338
border-style: none none solid;
339
border-width: 2px;
340
border-color: #42A5F5;
341
background-color: transparent; }
342
343
treeview entry.flat, treeview entry {
344
min-height: 0;
345
padding: 2px;
346
border-radius: 0;
347
background-color: #FFFFFF; }
348
treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus {
349
border-image: none;
350
box-shadow: none; }
351
352
/***********
353
* Buttons *
354
***********/
355
@keyframes needs_attention {
356
from {
357
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)); }
358
to {
359
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#FF4081), to(transparent)); } }
360
button {
361
min-height: 24px;
362
min-width: 16px;
363
padding: 6px 10px;
364
border-radius: 2px;
365
font-weight: 500;
366
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
367
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
368
background-color: #FAFAFA;
369
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
370
color: rgba(0, 0, 0, 0.6); }
371
button:hover {
372
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
373
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
374
color: rgba(0, 0, 0, 0.8); }
375
button:active {
376
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-image 0;
377
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
378
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
379
color: rgba(0, 0, 0, 0.8); }
380
button:disabled {
381
box-shadow: none;
382
background-color: alpha(currentColor, 0.3);
383
color: rgba(0, 0, 0, 0.24); }
384
button:disabled > label {
385
color: inherit; }
386
button:checked {
387
background-color: #42A5F5;
388
color: #FFFFFF; }
389
button:checked:disabled {
390
background-color: alpha(currentColor, 0.3);
391
color: rgba(66, 165, 245, 0.4); }
392
button:checked:disabled > label {
393
color: inherit; }
394
.inline-toolbar
395
button, modelbutton.flat,
396
.menuitem.button.flat, spinbutton:not(.vertical) button, spinbutton.vertical button, toolbar.osd button, .app-notification button,
397
.app-notification.frame button, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
398
headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check,
399
radio, calendar.button, messagedialog.csd .dialog-action-area button, button.sidebar-button, .gedit-search-slider button,
400
button.flat {
401
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
402
box-shadow: none;
403
background-color: transparent;
404
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
405
color: rgba(0, 0, 0, 0.6); }
406
.inline-toolbar
407
button:hover, modelbutton.flat:hover,
408
.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, toolbar.osd button:hover, .app-notification button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action),
409
headerbar button:hover:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover,
410
radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover, .gedit-search-slider button:hover,
411
button.flat:hover {
412
box-shadow: none;
413
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.15));
414
color: rgba(0, 0, 0, 0.8); }
415
.inline-toolbar
416
button:active, modelbutton.flat:active,
417
.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, toolbar.osd button:active, .app-notification button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action),
418
headerbar button:active:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:active, scrollbar button:active, check:active,
419
radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active, .gedit-search-slider button:active,
420
button.flat:active {
421
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
422
animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
423
box-shadow: none;
424
color: rgba(0, 0, 0, 0.8); }
425
.inline-toolbar
426
button:disabled, modelbutton.flat:disabled,
427
.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, toolbar.osd button:disabled, .app-notification button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action),
428
headerbar button:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled,
429
radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled, .gedit-search-slider button:disabled,
430
button.flat:disabled {
431
box-shadow: none;
432
background-color: transparent;
433
color: rgba(0, 0, 0, 0.24); }
434
.inline-toolbar
435
button:disabled > label, modelbutton.flat:disabled > label,
436
.menuitem.button.flat:disabled > label, spinbutton:not(.vertical) button:disabled > label, spinbutton.vertical button:disabled > label, toolbar.osd button:disabled > label, .app-notification button:disabled > label, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action) > label,
437
headerbar button:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:disabled > label, scrollbar button:disabled > label, check:disabled > label,
438
radio:disabled > label, calendar.button:disabled > label, messagedialog.csd .dialog-action-area button:disabled > label, button.sidebar-button:disabled > label, .gedit-search-slider button:disabled > label,
439
button.flat:disabled > label {
440
color: inherit; }
441
.inline-toolbar
442
button:checked, modelbutton.flat:checked,
443
.menuitem.button.flat:checked, spinbutton:not(.vertical) button:checked, spinbutton.vertical button:checked, toolbar.osd button:checked, .app-notification button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action),
444
headerbar button:checked:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked, scrollbar button:checked, check:checked,
445
radio:checked, calendar.button:checked, messagedialog.csd .dialog-action-area button:checked, button.sidebar-button:checked, .gedit-search-slider button:checked,
446
button.flat:checked {
447
background-color: alpha(currentColor, 0.3);
448
color: rgba(0, 0, 0, 0.8); }
449
.inline-toolbar
450
button:checked:disabled, modelbutton.flat:checked:disabled,
451
.menuitem.button.flat:checked:disabled, spinbutton:not(.vertical) button:checked:disabled, spinbutton.vertical button:checked:disabled, toolbar.osd button:checked:disabled, .app-notification button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action),
452
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked:disabled, scrollbar button:checked:disabled, check:checked:disabled,
453
radio:checked:disabled, calendar.button:checked:disabled, messagedialog.csd .dialog-action-area button:checked:disabled, button.sidebar-button:checked:disabled, .gedit-search-slider button:checked:disabled,
454
button.flat:checked:disabled {
455
background-color: alpha(currentColor, 0.3);
456
color: rgba(0, 0, 0, 0.32); }
457
.inline-toolbar
458
button:checked:disabled > label, modelbutton.flat:checked:disabled > label,
459
.menuitem.button.flat:checked:disabled > label, spinbutton:not(.vertical) button:checked:disabled > label, spinbutton.vertical button:checked:disabled > label, toolbar.osd button:checked:disabled > label, .app-notification button:checked:disabled > label, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action) > label,
460
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:checked:disabled > label, scrollbar button:checked:disabled > label, check:checked:disabled > label,
461
radio:checked:disabled > label, calendar.button:checked:disabled > label, messagedialog.csd .dialog-action-area button:checked:disabled > label, button.sidebar-button:checked:disabled > label, .gedit-search-slider button:checked:disabled > label,
462
button.flat:checked:disabled > label {
463
color: inherit; }
464
.inline-toolbar
465
button:not(.text-button), spinbutton:not(.vertical) button, notebook > header tab button.flat, check,
466
radio, button.titlebutton, .nautilus-circular-button, .gedit-document-panel row button.flat,
467
button.image-button {
468
min-width: 24px;
469
padding: 6px;
470
-gtk-outline-radius: 100px;
471
border-radius: 100px; }
472
button.text-button {
473
padding-left: 16px;
474
padding-right: 16px; }
475
.inline-toolbar
476
button.text-button:not(.text-button), spinbutton:not(.vertical) button.text-button, notebook > header tab button.text-button.flat, check.text-button,
477
radio.text-button, button.text-button.titlebutton, .text-button.nautilus-circular-button, .gedit-document-panel row button.text-button.flat,
478
button.text-button.image-button {
479
padding-left: 10px;
480
padding-right: 10px;
481
-gtk-outline-radius: 2px;
482
border-radius: 2px; }
483
.inline-toolbar
484
button.text-button:not(.text-button) label:last-child, spinbutton:not(.vertical) button.text-button label:last-child, notebook > header tab button.text-button.flat label:last-child, check.text-button label:last-child,
485
radio.text-button label:last-child, button.text-button.titlebutton label:last-child, .text-button.nautilus-circular-button label:last-child, .gedit-document-panel row button.text-button.flat label:last-child,
486
button.text-button.image-button label:last-child {
487
padding-left: 2px;
488
padding-right: 6px; }
489
.inline-toolbar
490
button.text-button:not(.text-button) label:first-child, spinbutton:not(.vertical) button.text-button label:first-child, notebook > header tab button.text-button.flat label:first-child, check.text-button label:first-child,
491
radio.text-button label:first-child, button.text-button.titlebutton label:first-child, .text-button.nautilus-circular-button label:first-child, .gedit-document-panel row button.text-button.flat label:first-child,
492
button.text-button.image-button label:first-child {
493
padding-left: 6px;
494
padding-right: 2px; }
495
.inline-toolbar .linked > button, .linked > modelbutton.flat,
496
.linked > .menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action),
497
headerbar .linked > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow, scrollbar .linked > button, .linked > check,
498
.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .gedit-search-slider .linked > button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat,
499
.linked.vertical > .menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action),
500
headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow, scrollbar .linked.vertical > button, .linked.vertical > check,
501
.linked.vertical > radio, .linked.vertical > calendar.button, messagedialog.csd .dialog-action-area .linked.vertical > button, .linked.vertical > button.sidebar-button, .gedit-search-slider .linked.vertical > button, .linked >
502
button.flat, .linked.vertical >
503
button.flat {
504
border-radius: 2px; }
505
.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat,
506
.linked > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action),
507
headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.image-button, notebook > header tab .linked > button.flat, scrollbar .linked > button.image-button, .linked > check,
508
.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .gedit-document-panel row .linked > button.flat, .gedit-search-slider .linked > button.image-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat,
509
.linked.vertical > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action),
510
headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.image-button, notebook > header tab .linked.vertical > button.flat, scrollbar .linked.vertical > button.image-button, .linked.vertical > check,
511
.linked.vertical > radio, .linked.vertical > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.image-button, .linked.vertical > button.image-button.sidebar-button, .linked.vertical > button.flat.titlebutton, .linked.vertical > .flat.nautilus-circular-button, .gedit-document-panel row .linked.vertical > button.flat, .gedit-search-slider .linked.vertical > button.image-button, .linked >
512
button.flat.image-button, .linked.vertical >
513
button.flat.image-button {
514
-gtk-outline-radius: 100px;
515
border-radius: 100px; }
516
.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat,
517
.linked > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button.text-button, spinbutton.vertical .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
518
headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.text-button.image-button, notebook > header tab .linked > button.flat.text-button, scrollbar .linked > button.text-button.image-button, .linked > check.text-button,
519
.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .gedit-document-panel row .linked > button.flat.text-button, .gedit-search-slider .linked > button.text-button.image-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat,
520
.linked.vertical > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button.text-button, spinbutton.vertical .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
521
headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.text-button.image-button, notebook > header tab .linked.vertical > button.flat.text-button, scrollbar .linked.vertical > button.text-button.image-button, .linked.vertical > check.text-button,
522
.linked.vertical > radio.text-button, .linked.vertical > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.text-button.image-button, .linked.vertical > button.text-button.image-button.sidebar-button, .linked.vertical > button.flat.text-button.titlebutton, .linked.vertical > .flat.text-button.nautilus-circular-button, .gedit-document-panel row .linked.vertical > button.flat.text-button, .gedit-search-slider .linked.vertical > button.text-button.image-button, .linked >
523
button.flat.text-button.image-button, .linked.vertical >
524
button.flat.text-button.image-button {
525
-gtk-outline-radius: 2px;
526
border-radius: 2px; }
527
.info button:disabled,
528
.question button:disabled,
529
.warning button:disabled,
530
.error button:disabled, row:selected
531
button:disabled {
532
color: rgba(255, 255, 255, 0.3); }
533
row:selected button.sidebar-button, .info button.flat,
534
.question button.flat,
535
.warning button.flat,
536
.error button.flat, .gedit-search-slider entry.error ~ button, row:selected
537
button.flat {
538
color: rgba(255, 255, 255, 0.75); }
539
row:selected button.sidebar-button:hover, .info button.flat:hover,
540
.question button.flat:hover,
541
.warning button.flat:hover,
542
.error button.flat:hover, .gedit-search-slider entry.error ~ button:hover, row:selected button.sidebar-button:active, .info button.flat:active,
543
.question button.flat:active,
544
.warning button.flat:active,
545
.error button.flat:active, .gedit-search-slider entry.error ~ button:active, row:selected
546
button.flat:hover, row:selected
547
button.flat:active {
548
color: #FFFFFF; }
549
row:selected button.sidebar-button:disabled, .info button.flat:disabled,
550
.question button.flat:disabled,
551
.warning button.flat:disabled,
552
.error button.flat:disabled, .gedit-search-slider entry.error ~ button:disabled, row:selected
553
button.flat:disabled {
554
color: rgba(255, 255, 255, 0.3); }
555
button.osd {
556
padding: 12px 16px; }
557
button.osd.image-button {
558
padding: 12px; }
559
button.osd:disabled {
560
opacity: 0; }
561
button.suggested-action {
562
background-color: #FF4081;
563
color: #FFFFFF; }
564
button.suggested-action:disabled {
565
box-shadow: none;
566
background-color: alpha(currentColor, 0.3);
567
color: rgba(0, 0, 0, 0.32); }
568
button.suggested-action:disabled > label {
569
color: inherit; }
570
button.suggested-action:checked {
571
background-color: #ff79a7; }
572
button.suggested-action.flat {
573
background-color: transparent;
574
color: #FF4081; }
575
button.suggested-action.flat:disabled {
576
box-shadow: none;
577
background-color: transparent;
578
color: rgba(0, 0, 0, 0.32); }
579
button.suggested-action.flat:disabled > label {
580
color: inherit; }
581
button.destructive-action {
582
background-color: #FF5252;
583
color: #FFFFFF; }
584
button.destructive-action:disabled {
585
box-shadow: none;
586
background-color: alpha(currentColor, 0.3);
587
color: rgba(0, 0, 0, 0.32); }
588
button.destructive-action:disabled > label {
589
color: inherit; }
590
button.destructive-action:checked {
591
background-color: #ff8686; }
592
button.destructive-action.flat {
593
background-color: transparent;
594
color: #FF5252; }
595
button.destructive-action.flat:disabled {
596
box-shadow: none;
597
background-color: transparent;
598
color: rgba(0, 0, 0, 0.32); }
599
button.destructive-action.flat:disabled > label {
600
color: inherit; }
601
.stack-switcher >
602
button {
603
outline-offset: -4px; }
604
.stack-switcher >
605
button > label {
606
padding-left: 6px;
607
padding-right: 6px; }
608
.stack-switcher >
609
button > image {
610
padding-left: 6px;
611
padding-right: 6px;
612
padding-top: 3px;
613
padding-bottom: 3px; }
614
.stack-switcher >
615
button.text-button {
616
padding-left: 10px;
617
padding-right: 10px; }
618
.stack-switcher >
619
button.image-button {
620
padding-left: 4px;
621
padding-right: 4px; }
622
.stack-switcher >
623
button.needs-attention:checked > label,
624
.stack-switcher >
625
button.needs-attention:checked > image {
626
animation: none;
627
background-image: none; }
628
button separator {
629
min-width: 0;
630
min-height: 0;
631
background: transparent; }
632
.primary-toolbar
633
button {
634
-gtk-icon-shadow: none; }
635
636
.stack-switcher >
637
button.needs-attention > label,
638
.stack-switcher >
639
button.needs-attention > image, stacksidebar row.needs-attention > label {
640
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
641
background-repeat: no-repeat;
642
background-position: right 3px;
643
background-size: 6px 6px; }
644
.stack-switcher >
645
button.needs-attention > label:dir(rtl),
646
.stack-switcher >
647
button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) {
648
background-position: left 3px; }
649
650
.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat),
651
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) >
652
entry:not(.flat), .linked >
653
button, .gedit-search-slider button:dir(ltr), .gedit-search-slider button:dir(rtl), .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) {
654
border-radius: 0; }
655
656
.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat),
657
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) >
658
entry:not(.flat), .linked >
659
button, .gedit-search-slider button:dir(ltr), .gedit-search-slider button:dir(rtl) {
660
-gtk-outline-radius: 2px; }
661
.linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:first-child:not(.flat),
662
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), .linked:not(.vertical) >
663
entry:first-child:not(.flat), .linked >
664
button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .gedit-search-slider button:first-child:dir(ltr), .gedit-search-slider button:first-child:dir(rtl) {
665
border-top-left-radius: 2px;
666
border-bottom-left-radius: 2px; }
667
.linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:last-child:not(.flat),
668
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), .linked:not(.vertical) >
669
entry:last-child:not(.flat), .linked >
670
button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .gedit-search-slider button:last-child:dir(ltr), .gedit-search-slider button:last-child:dir(rtl) {
671
border-top-right-radius: 2px;
672
border-bottom-right-radius: 2px; }
673
.linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:only-child:not(.flat),
674
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), .linked:not(.vertical) >
675
entry:only-child:not(.flat), .linked >
676
button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .gedit-search-slider button:only-child:dir(ltr), .gedit-search-slider button:only-child:dir(rtl) {
677
border-radius: 2px; }
678
679
.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat),
680
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical >
681
entry:not(.flat), .linked.vertical >
682
button, .linked.vertical > combobox > box > button.combo {
683
border-radius: 0; }
684
685
.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat),
686
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical >
687
entry:not(.flat), .linked.vertical >
688
button {
689
-gtk-outline-radius: 2px; }
690
.linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:first-child:not(.flat),
691
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), .linked.vertical >
692
entry:first-child:not(.flat), .linked.vertical >
693
button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
694
border-top-left-radius: 2px;
695
border-top-right-radius: 2px; }
696
.linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:last-child:not(.flat),
697
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), .linked.vertical >
698
entry:last-child:not(.flat), .linked.vertical >
699
button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
700
border-bottom-left-radius: 2px;
701
border-bottom-right-radius: 2px; }
702
.linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:only-child:not(.flat),
703
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), .linked.vertical >
704
entry:only-child:not(.flat), .linked.vertical >
705
button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
706
border-radius: 2px; }
707
708
/* menu buttons */
709
modelbutton.flat,
710
.menuitem.button.flat {
711
min-height: 28px;
712
padding-left: 8px;
713
padding-right: 8px;
714
border-radius: 2px;
715
color: inherit; }
716
modelbutton.flat check:not(:checked):not(:indeterminate),
717
modelbutton.flat radio:not(:checked):not(:indeterminate),
718
.menuitem.button.flat check:not(:checked):not(:indeterminate),
719
.menuitem.button.flat radio:not(:checked):not(:indeterminate) {
720
color: alpha(currentColor, 0.6); }
721
modelbutton.flat check, modelbutton.flat check:hover,
722
modelbutton.flat radio,
723
modelbutton.flat radio:hover,
724
.menuitem.button.flat check,
725
.menuitem.button.flat check:hover,
726
.menuitem.button.flat radio,
727
.menuitem.button.flat radio:hover {
728
background-image: none; }
729
modelbutton.flat check:active,
730
modelbutton.flat radio:active,
731
.menuitem.button.flat check:active,
732
.menuitem.button.flat radio:active {
733
animation: none; }
734
modelbutton.flat check:last-child,
735
modelbutton.flat radio:last-child,
736
.menuitem.button.flat check:last-child,
737
.menuitem.button.flat radio:last-child {
738
margin-left: -8px;
739
margin-right: -16px; }
740
modelbutton.flat check:first-child,
741
modelbutton.flat radio:first-child,
742
.menuitem.button.flat check:first-child,
743
.menuitem.button.flat radio:first-child {
744
margin-left: -16px;
745
margin-right: -8px; }
746
747
modelbutton.flat arrow {
748
background: none; }
749
modelbutton.flat arrow:hover {
750
background: none; }
751
modelbutton.flat arrow.left {
752
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
753
modelbutton.flat arrow.right {
754
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
755
756
button.color {
757
min-height: 24px;
758
min-width: 24px;
759
padding: 6px; }
760
761
/*********
762
* Links *
763
*********/
764
*:link, button:link,
765
button:visited, *:link:hover, button:hover:link,
766
button:hover:visited, *:link:active, button:active:link,
767
button:active:visited {
768
color: #42A5F5; }
769
*:link:visited,
770
button:visited, *:link:visited:hover,
771
button:visited:hover, *:link:visited:active,
772
button:visited:active {
773
color: #E040FB; }
774
.info *:link, .info button:link,
775
.info button:visited,
776
.question *:link,
777
.question button:link,
778
.question button:visited,
779
.warning *:link,
780
.warning button:link,
781
.warning button:visited,
782
.error *:link,
783
.error button:link,
784
.error button:visited, *:link:selected, button:selected:link,
785
button:selected:visited, .selection-mode.titlebar:not(headerbar) .subtitle:link,
786
headerbar.selection-mode .subtitle:link, *:selected *:link, *:selected button:link,
787
*:selected button:visited {
788
color: #FFFFFF; }
789
790
button:link > label,
791
button:visited > label {
792
text-decoration-line: underline; }
793
794
/*****************
795
* GtkSpinButton *
796
*****************/
797
spinbutton:not(.vertical) {
798
padding: 0; }
799
notebook > stack:not(:only-child) spinbutton:not(.vertical) entry,
800
spinbutton:not(.vertical) entry {
801
min-width: 32px;
802
margin: 0;
803
border-image: none;
804
border-radius: 0;
805
box-shadow: none;
806
background-color: transparent; }
807
spinbutton:not(.vertical) button {
808
min-height: 24px;
809
min-width: 24px;
810
padding: 0;
811
border: solid 6px transparent; }
812
spinbutton:not(.vertical) button.up {
813
margin-left: -3px; }
814
spinbutton:not(.vertical) button.down {
815
margin-right: -3px; }
816
spinbutton.vertical:disabled {
817
color: rgba(0, 0, 0, 0.32); }
818
spinbutton.vertical:drop(active) {
819
box-shadow: none; }
820
spinbutton.vertical entry {
821
min-height: 36px;
822
min-width: 48px;
823
padding: 0; }
824
spinbutton.vertical button {
825
min-height: 36px;
826
min-width: 48px;
827
padding: 0; }
828
spinbutton.vertical button.up {
829
border-radius: 2px 2px 0 0; }
830
spinbutton.vertical button.down {
831
border-radius: 0 0 2px 2px; }
832
treeview spinbutton:not(.vertical) {
833
min-height: 0;
834
border-style: none;
835
border-radius: 0; }
836
treeview spinbutton:not(.vertical) entry {
837
min-height: 0;
838
padding: 1px 2px; }
839
840
/**************
841
* ComboBoxes *
842
**************/
843
combobox arrow {
844
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
845
min-height: 16px;
846
min-width: 16px; }
847
combobox menu,
848
combobox .menu,
849
combobox .context-menu {
850
padding: 2px 0; }
851
combobox menu menuitem,
852
combobox .menu menuitem,
853
combobox .context-menu menuitem {
854
min-height: 36px;
855
padding: 0 10px; }
856
combobox:drop(active) {
857
box-shadow: none; }
858
859
/************
860
* Toolbars *
861
************/
862
toolbar {
863
-GtkWidget-window-dragging: true;
864
padding: 3px;
865
background-color: #F5F5F5; }
866
.osd toolbar {
867
background-color: transparent; }
868
toolbar.osd, .app-notification,
869
.app-notification.frame {
870
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
871
padding: 6px;
872
border-radius: 2px;
873
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
874
background-color: #FFFFFF; }
875
toolbar.osd:backdrop, .app-notification:backdrop {
876
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
877
toolbar.osd.left, .left.app-notification, toolbar.osd.right, .right.app-notification, toolbar.osd.top, .top.app-notification, toolbar.osd.bottom, .bottom.app-notification {
878
border-radius: 0; }
879
toolbar.horizontal separator {
880
margin: 3px; }
881
toolbar.vertical separator {
882
margin: 3px; }
883
toolbar:not(.inline-toolbar):not(.osd) scale,
884
toolbar:not(.inline-toolbar):not(.osd) entry,
885
toolbar:not(.inline-toolbar):not(.osd) spinbutton,
886
toolbar:not(.inline-toolbar):not(.osd) button {
887
margin: 3px; }
888
toolbar:not(.inline-toolbar):not(.osd) switch {
889
margin: 9px 3px; }
890
891
.inline-toolbar {
892
padding: 6px;
893
border-style: solid;
894
border-width: 0 1px 1px;
895
border-color: rgba(0, 0, 0, 0.1);
896
background-color: #fafafa; }
897
898
searchbar,
899
.location-bar {
900
padding: 6px;
901
border-style: solid;
902
border-width: 0 0 1px;
903
border-color: rgba(0, 0, 0, 0.1);
904
background-color: #F5F5F5;
905
background-clip: border-box; }
906
907
/***************
908
* Header bars *
909
***************/
910
.titlebar:not(headerbar),
911
headerbar {
912
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1), color 0.2s cubic-bezier(0, 0, 0.2, 1);
913
min-height: 48px;
914
padding: 0 6px;
915
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.2);
916
background-color: #455A64;
917
color: #FFFFFF; }
918
.titlebar:backdrop:not(headerbar),
919
headerbar:backdrop {
920
color: rgba(255, 255, 255, 0.75); }
921
.titlebar:not(headerbar) .title,
922
headerbar .title {
923
padding-left: 12px;
924
padding-right: 12px;
925
font-weight: bold; }
926
.titlebar:not(headerbar) .subtitle,
927
headerbar .subtitle {
928
padding-left: 12px;
929
padding-right: 12px;
930
font-size: smaller; }
931
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
932
headerbar button:not(.suggested-action):not(.destructive-action) {
933
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px;
934
color: alpha(currentColor, 0.75); }
935
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):hover, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):active,
936
headerbar button:not(.suggested-action):not(.destructive-action):hover,
937
headerbar button:not(.suggested-action):not(.destructive-action):active {
938
color: currentColor; }
939
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled,
940
headerbar button:not(.suggested-action):not(.destructive-action):disabled {
941
color: alpha(currentColor, 0.3); }
942
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled > label,
943
headerbar button:not(.suggested-action):not(.destructive-action):disabled > label {
944
color: inherit; }
945
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
946
headerbar button:not(.suggested-action):not(.destructive-action):checked {
947
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
948
background-color: transparent;
949
color: currentColor; }
950
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
951
headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled {
952
background-color: transparent;
953
color: alpha(currentColor, 0.4); }
954
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label,
955
headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled > label {
956
color: inherit; }
957
.titlebar:not(headerbar) button.suggested-action:disabled, .titlebar:not(headerbar) button.destructive-action:disabled,
958
headerbar button.suggested-action:disabled,
959
headerbar button.destructive-action:disabled {
960
color: alpha(currentColor, 0.4); }
961
.titlebar:not(headerbar) button.suggested-action:disabled > label, .titlebar:not(headerbar) button.destructive-action:disabled > label,
962
headerbar button.suggested-action:disabled > label,
963
headerbar button.destructive-action:disabled > label {
964
color: inherit; }
965
.selection-mode.titlebar:not(headerbar),
966
headerbar.selection-mode {
967
transition: background-color 0 0.3s, color 0.2s cubic-bezier(0, 0, 0.2, 1);
968
animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
969
background-color: #42A5F5;
970
color: #FFFFFF; }
971
.selection-mode.titlebar:backdrop:not(headerbar),
972
headerbar.selection-mode:backdrop {
973
color: rgba(255, 255, 255, 0.75); }
974
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
975
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
976
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px; }
977
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action), .selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):hover, .selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):active,
978
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action),
979
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):hover,
980
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):active {
981
color: currentColor; }
982
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled,
983
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled {
984
color: alpha(currentColor, 0.4); }
985
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled > label,
986
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled > label {
987
color: inherit; }
988
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
989
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked {
990
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
991
color: currentColor; }
992
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
993
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled {
994
color: alpha(currentColor, 0.4); }
995
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label,
996
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled > label {
997
color: inherit; }
998
.selection-mode.titlebar:not(headerbar) .selection-menu,
999
headerbar.selection-mode .selection-menu {
1000
padding-left: 16px;
1001
padding-right: 16px; }
1002
.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow,
1003
headerbar.selection-mode .selection-menu GtkArrow {
1004
-GtkArrow-arrow-scaling: 1; }
1005
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow,
1006
headerbar.selection-mode .selection-menu .arrow {
1007
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1008
.fullscreen .titlebar:not(headerbar), .tiled .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen
1009
headerbar, .tiled
1010
headerbar, .maximized
1011
headerbar {
1012
border-radius: 0;
1013
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
1014
.default-decoration.titlebar:not(headerbar),
1015
headerbar.default-decoration {
1016
min-height: 24px;
1017
padding: 6px;
1018
border-width: 0; }
1019
.default-decoration.titlebar:not(headerbar) button.titlebutton,
1020
headerbar.default-decoration button.titlebutton {
1021
min-height: 24px;
1022
min-width: 24px;
1023
margin: 0;
1024
padding: 0; }
1025
.default-decoration.titlebar:not(headerbar) button.titlebutton:active,
1026
headerbar.default-decoration button.titlebutton:active {
1027
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); }
1028
.solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd
1029
headerbar:dir(rtl), .solid-csd
1030
headerbar:dir(ltr) {
1031
margin-left: -1px;
1032
margin-right: -1px;
1033
margin-top: -1px;
1034
border-radius: 0;
1035
box-shadow: none; }
1036
1037
headerbar entry,
1038
headerbar spinbutton,
1039
headerbar button {
1040
margin-top: 6px;
1041
margin-bottom: 6px; }
1042
headerbar switch {
1043
margin-top: 12px;
1044
margin-bottom: 12px; }
1045
1046
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1047
border-top-left-radius: 2px;
1048
border-top-right-radius: 2px; }
1049
1050
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + headerbar, window:not(.tiled):not(.maximized):not(.fullscreen) headerbar:first-child {
1051
border-top-left-radius: 2px; }
1052
window:not(.tiled):not(.maximized):not(.fullscreen) headerbar:last-child {
1053
border-top-right-radius: 2px; }
1054
1055
window.csd > .titlebar:not(headerbar) {
1056
padding: 0;
1057
background-color: transparent;
1058
background-image: none;
1059
border-style: none;
1060
box-shadow: none; }
1061
.titlebar:not(headerbar) > separator {
1062
background-color: #455A64;
1063
background-image: image(rgba(0, 0, 0, 0.1)); }
1064
1065
/************
1066
* Pathbars *
1067
************/
1068
.path-bar button.text-button, .path-bar button.image-button, .path-bar button {
1069
padding-left: 6px;
1070
padding-right: 6px; }
1071
.path-bar button image {
1072
padding-left: 4px;
1073
padding-right: 4px; }
1074
.path-bar button.slider-button {
1075
padding-left: 0;
1076
padding-right: 0; }
1077
1078
/**************
1079
* Tree Views *
1080
**************/
1081
treeview.view {
1082
border-left-color: alpha(currentColor, 0.3);
1083
border-top-color: rgba(0, 0, 0, 0.1); }
1084
* {
1085
-GtkTreeView-horizontal-separator: 4;
1086
-GtkTreeView-grid-line-width: 1;
1087
-GtkTreeView-grid-line-pattern: '';
1088
-GtkTreeView-tree-line-width: 1;
1089
-GtkTreeView-tree-line-pattern: '';
1090
-GtkTreeView-expander-size: 16; }
1091
treeview.view:hover, treeview.view:active, treeview.view:selected {
1092
border-radius: 0; }
1093
treeview.view.separator {
1094
min-height: 5px;
1095
color: rgba(0, 0, 0, 0.1); }
1096
treeview.view:drop(active) {
1097
border-style: solid none;
1098
border-width: 1px;
1099
border-color: #FF4081; }
1100
treeview.view:drop(active).after {
1101
border-top-style: none; }
1102
treeview.view:drop(active).before {
1103
border-bottom-style: none; }
1104
treeview.view.expander {
1105
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1106
-gtk-icon-transform: rotate(-90deg);
1107
color: rgba(0, 0, 0, 0.6); }
1108
treeview.view.expander:dir(rtl) {
1109
-gtk-icon-transform: rotate(90deg); }
1110
treeview.view.expander:checked {
1111
-gtk-icon-transform: unset; }
1112
treeview.view.expander:hover, treeview.view.expander:active {
1113
color: rgba(0, 0, 0, 0.8); }
1114
treeview.view.expander:disabled {
1115
color: rgba(0, 0, 0, 0.24); }
1116
treeview.view.expander:selected {
1117
color: rgba(255, 255, 255, 0.75); }
1118
treeview.view.expander:selected:hover, treeview.view.expander:selected:active {
1119
color: #FFFFFF; }
1120
treeview.view.expander:selected:disabled {
1121
color: rgba(255, 255, 255, 0.3); }
1122
treeview.view.progressbar {
1123
border-style: none none solid;
1124
border-width: 4px;
1125
border-color: #42A5F5;
1126
background-color: transparent;
1127
background-image: none; }
1128
treeview.view.progressbar:selected {
1129
border-color: currentColor; }
1130
treeview.view.trough {
1131
border-style: none none solid;
1132
border-width: 4px;
1133
border-color: rgba(66, 165, 245, 0.3);
1134
background-color: transparent;
1135
background-image: none; }
1136
treeview.view.trough:selected {
1137
border-color: alpha(currentColor, 0.3); }
1138
treeview.view header button {
1139
padding: 2px 6px;
1140
border-style: none solid solid none;
1141
border-width: 1px;
1142
border-color: rgba(0, 0, 0, 0.1);
1143
border-radius: 0;
1144
background-clip: border-box; }
1145
treeview.view header button, treeview.view header button:hover, treeview.view header button:active {
1146
box-shadow: none; }
1147
treeview.view header button, treeview.view header button:disabled {
1148
background-color: #FFFFFF; }
1149
treeview.view header button:last-child {
1150
border-right-style: none; }
1151
treeview.view button.dnd,
1152
treeview.view header.button.dnd {
1153
padding: 2px 6px;
1154
border-style: none solid solid;
1155
border-width: 1px;
1156
border-color: rgba(0, 0, 0, 0.1);
1157
border-radius: 0;
1158
box-shadow: none;
1159
background-color: #FFFFFF;
1160
background-clip: border-box;
1161
color: #42A5F5; }
1162
treeview.view acceleditor > label {
1163
background-color: #42A5F5; }
1164
1165
/*********
1166
* Menus *
1167
*********/
1168
menubar,
1169
.menubar {
1170
-GtkWidget-window-dragging: true;
1171
padding: 0;
1172
background-color: #455A64; }
1173
menubar > menuitem,
1174
.menubar > menuitem {
1175
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
1176
min-height: 20px;
1177
padding: 4px 8px;
1178
color: rgba(255, 255, 255, 0.75); }
1179
menubar > menuitem:hover,
1180
.menubar > menuitem:hover {
1181
transition: none;
1182
background-color: alpha(currentColor, 0.15);
1183
color: #FFFFFF; }
1184
menubar > menuitem:disabled,
1185
.menubar > menuitem:disabled {
1186
color: rgba(255, 255, 255, 0.3); }
1187
1188
menu,
1189
.menu,
1190
.context-menu {
1191
margin: 4px 0;
1192
padding: 4px 0;
1193
background-color: #FFFFFF;
1194
border: 1px solid rgba(0, 0, 0, 0.1); }
1195
.csd menu, .csd
1196
.menu, .csd
1197
.context-menu {
1198
border: none;
1199
border-radius: 2px; }
1200
menu menuitem,
1201
.menu menuitem,
1202
.context-menu menuitem {
1203
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
1204
min-height: 20px;
1205
min-width: 40px;
1206
padding: 4px 8px;
1207
font: initial;
1208
text-shadow: none; }
1209
menu menuitem:hover,
1210
.menu menuitem:hover,
1211
.context-menu menuitem:hover {
1212
transition: none;
1213
background-color: alpha(currentColor, 0.15); }
1214
menu menuitem:disabled,
1215
.menu menuitem:disabled,
1216
.context-menu menuitem:disabled {
1217
color: rgba(0, 0, 0, 0.32); }
1218
menu menuitem arrow,
1219
.menu menuitem arrow,
1220
.context-menu menuitem arrow {
1221
min-height: 16px;
1222
min-width: 16px; }
1223
menu menuitem arrow:dir(ltr),
1224
.menu menuitem arrow:dir(ltr),
1225
.context-menu menuitem arrow:dir(ltr) {
1226
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1227
margin-left: 8px; }
1228
menu menuitem arrow:dir(rtl),
1229
.menu menuitem arrow:dir(rtl),
1230
.context-menu menuitem arrow:dir(rtl) {
1231
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1232
margin-right: 8px; }
1233
menu menuitem label:dir(rtl), menu menuitem label:dir(ltr),
1234
.menu menuitem label:dir(rtl),
1235
.menu menuitem label:dir(ltr),
1236
.context-menu menuitem label:dir(rtl),
1237
.context-menu menuitem label:dir(ltr) {
1238
color: inherit; }
1239
menu > arrow,
1240
.menu > arrow,
1241
.context-menu > arrow {
1242
min-height: 16px;
1243
min-width: 16px;
1244
padding: 4px;
1245
border-radius: 0;
1246
background-color: #FFFFFF;
1247
color: rgba(0, 0, 0, 0.6); }
1248
menu > arrow.top,
1249
.menu > arrow.top,
1250
.context-menu > arrow.top {
1251
margin-top: -4px;
1252
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1253
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1254
menu > arrow.bottom,
1255
.menu > arrow.bottom,
1256
.context-menu > arrow.bottom {
1257
margin-bottom: -4px;
1258
border-top: 1px solid rgba(0, 0, 0, 0.1);
1259
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1260
menu > arrow:hover,
1261
.menu > arrow:hover,
1262
.context-menu > arrow:hover {
1263
background-image: image(alpha(currentColor, 0.15));
1264
color: rgba(0, 0, 0, 0.8); }
1265
menu > arrow:disabled,
1266
.menu > arrow:disabled,
1267
.context-menu > arrow:disabled {
1268
border-color: transparent;
1269
background-color: transparent;
1270
color: transparent; }
1271
menu separator,
1272
.menu separator,
1273
.context-menu separator {
1274
margin: 4px 0; }
1275
1276
menuitem accelerator {
1277
color: alpha(currentColor, 0.6); }
1278
menuitem check:dir(ltr),
1279
menuitem radio:dir(ltr) {
1280
margin-right: -8px;
1281
margin-left: -16px; }
1282
menuitem check:dir(rtl),
1283
menuitem radio:dir(rtl) {
1284
margin-right: -16px;
1285
margin-left: -8px; }
1286
1287
.csd.popup {
1288
border-radius: 2px; }
1289
1290
/***************
1291
* Popovers *
1292
***************/
1293
popover.background {
1294
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1295
padding: 0;
1296
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1297
background-color: #FAFAFA; }
1298
popover.background:backdrop {
1299
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
1300
popover.background, .csd popover.background {
1301
border-style: solid;
1302
border-width: 1px;
1303
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1304
border-radius: 3px; }
1305
popover.background > list,
1306
popover.background > .view,
1307
popover.background > iconview,
1308
popover.background > toolbar {
1309
border-style: none;
1310
box-shadow: none;
1311
background-color: transparent; }
1312
popover.background separator {
1313
margin: 4px 0; }
1314
popover.background list separator {
1315
margin: 0; }
1316
1317
/*************
1318
* Notebooks *
1319
*************/
1320
notebook > header {
1321
border-width: 1px;
1322
border-color: rgba(0, 0, 0, 0.1);
1323
background-color: #F5F5F5;
1324
background-clip: border-box; }
1325
notebook > header.top {
1326
border-bottom-style: solid; }
1327
notebook > header.top > tabs {
1328
margin-bottom: -1px; }
1329
notebook > header.top > tabs > tab:hover {
1330
box-shadow: inset 0 -2px alpha(currentColor, 0.3); }
1331
notebook > header.top > tabs > tab:checked {
1332
box-shadow: inset 0 -2px #42A5F5; }
1333
notebook > header.bottom {
1334
border-top-style: solid; }
1335
notebook > header.bottom > tabs {
1336
margin-top: -1px; }
1337
notebook > header.bottom > tabs > tab:hover {
1338
box-shadow: inset 0 2px alpha(currentColor, 0.3); }
1339
notebook > header.bottom > tabs > tab:checked {
1340
box-shadow: inset 0 2px #42A5F5; }
1341
notebook > header.left {
1342
border-right-style: solid; }
1343
notebook > header.left > tabs {
1344
margin-right: -1px; }
1345
notebook > header.left > tabs > tab:hover {
1346
box-shadow: inset -2px 0 alpha(currentColor, 0.3); }
1347
notebook > header.left > tabs > tab:checked {
1348
box-shadow: inset -2px 0 #42A5F5; }
1349
notebook > header.right {
1350
border-left-style: solid; }
1351
notebook > header.right > tabs {
1352
margin-left: -1px; }
1353
notebook > header.right > tabs > tab:hover {
1354
box-shadow: inset 2px 0 alpha(currentColor, 0.3); }
1355
notebook > header.right > tabs > tab:checked {
1356
box-shadow: inset 2px 0 #42A5F5; }
1357
notebook > header.top > tabs > arrow {
1358
border-top-style: none; }
1359
notebook > header.bottom > tabs > arrow {
1360
border-bottom-style: none; }
1361
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
1362
padding-left: 4px;
1363
padding-right: 4px; }
1364
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
1365
margin-left: -8px;
1366
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
1367
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
1368
margin-right: -8px;
1369
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
1370
notebook > header.left > tabs > arrow {
1371
border-left-style: none; }
1372
notebook > header.right > tabs > arrow {
1373
border-right-style: none; }
1374
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
1375
padding-top: 4px;
1376
padding-bottom: 4px; }
1377
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
1378
margin-top: -8px;
1379
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1380
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
1381
margin-bottom: -8px;
1382
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1383
notebook > header > tabs > arrow {
1384
min-height: 16px;
1385
min-width: 16px;
1386
border-radius: 0; }
1387
notebook > header tab {
1388
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1389
min-height: 24px;
1390
min-width: 24px;
1391
padding: 6px 12px;
1392
outline-offset: -6px;
1393
border-width: 1px;
1394
border-color: transparent;
1395
color: rgba(0, 0, 0, 0.6);
1396
font-weight: 500; }
1397
notebook > header tab:hover {
1398
color: rgba(0, 0, 0, 0.8); }
1399
notebook > header tab:hover.reorderable-page {
1400
border-color: rgba(0, 0, 0, 0.1);
1401
background-color: #fafafa; }
1402
notebook > header tab:disabled {
1403
color: rgba(0, 0, 0, 0.24); }
1404
notebook > header tab:checked {
1405
animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1);
1406
color: rgba(0, 0, 0, 0.8); }
1407
notebook > header tab:checked:disabled {
1408
color: rgba(0, 0, 0, 0.32); }
1409
notebook > header tab:checked.reorderable-page {
1410
border-color: rgba(0, 0, 0, 0.1);
1411
background-color: #FFFFFF; }
1412
notebook > header tab button.flat {
1413
min-width: 24px;
1414
min-height: 24px;
1415
padding: 0; }
1416
notebook > header tab button.flat:last-child {
1417
margin-left: 6px;
1418
margin-right: -6px; }
1419
notebook > header tab button.flat:first-child {
1420
margin-left: -6px;
1421
margin-right: 6px; }
1422
notebook > header.top tabs, notebook > header.bottom tabs {
1423
padding-left: 8px;
1424
padding-right: 8px; }
1425
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
1426
margin-left: 0; }
1427
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
1428
margin-right: 0; }
1429
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
1430
margin: 0 -1px;
1431
border-style: none solid; }
1432
notebook > header.left tabs, notebook > header.right tabs {
1433
padding-top: 8px;
1434
padding-bottom: 8px; }
1435
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
1436
margin-top: 0; }
1437
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
1438
margin-bottom: 0; }
1439
notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
1440
margin: -1px 0;
1441
border-style: solid none; }
1442
notebook > stack:not(:only-child) {
1443
background-color: #FFFFFF; }
1444
1445
/**************
1446
* Scrollbars *
1447
**************/
1448
scrollbar {
1449
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1450
background-color: #FFFFFF;
1451
background-clip: padding-box; }
1452
* {
1453
-GtkScrollbar-has-backward-stepper: false;
1454
-GtkScrollbar-has-forward-stepper: false; }
1455
scrollbar.top {
1456
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
1457
scrollbar.bottom {
1458
border-top: 1px solid rgba(0, 0, 0, 0.1); }
1459
scrollbar.left {
1460
border-right: 1px solid rgba(0, 0, 0, 0.1); }
1461
scrollbar.right {
1462
border-left: 1px solid rgba(0, 0, 0, 0.1); }
1463
scrollbar slider {
1464
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0;
1465
min-width: 8px;
1466
min-height: 8px;
1467
border: 4px solid transparent;
1468
border-radius: 100px;
1469
background-clip: padding-box;
1470
background-color: rgba(0, 0, 0, 0.48); }
1471
scrollbar slider:hover {
1472
background-color: rgba(0, 0, 0, 0.6); }
1473
scrollbar slider:active {
1474
background-color: rgba(0, 0, 0, 0.8); }
1475
scrollbar slider:disabled {
1476
background-color: rgba(0, 0, 0, 0.192); }
1477
scrollbar.fine-tune slider {
1478
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0, min-width 0, min-height 0;
1479
min-width: 4px;
1480
min-height: 4px; }
1481
scrollbar.fine-tune.horizontal slider {
1482
margin: 2px 0; }
1483
scrollbar.fine-tune.vertical slider {
1484
margin: 0 2px; }
1485
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1486
border-color: transparent;
1487
background-color: transparent; }
1488
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
1489
min-width: 4px;
1490
min-height: 4px;
1491
margin: 2px;
1492
border: 2px solid rgba(255, 255, 255, 0.3); }
1493
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
1494
min-width: 4px;
1495
min-height: 4px;
1496
margin: 2px;
1497
border: 2px solid rgba(255, 255, 255, 0.3);
1498
border-radius: 100px;
1499
background-color: rgba(0, 0, 0, 0.48);
1500
background-clip: padding-box;
1501
-gtk-icon-source: none; }
1502
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
1503
background-color: rgba(0, 0, 0, 0.192); }
1504
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
1505
min-width: 24px; }
1506
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
1507
min-width: 8px; }
1508
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
1509
min-height: 24px; }
1510
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
1511
min-height: 8px; }
1512
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
1513
background-color: rgba(255, 255, 255, 0.9); }
1514
scrollbar.horizontal slider {
1515
min-width: 24px; }
1516
scrollbar.vertical slider {
1517
min-height: 24px; }
1518
scrollbar button {
1519
min-width: 16px;
1520
min-height: 16px;
1521
padding: 0;
1522
border-radius: 0; }
1523
scrollbar.vertical button.down {
1524
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1525
scrollbar.vertical button.up {
1526
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1527
scrollbar.horizontal button.down {
1528
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
1529
scrollbar.horizontal button.up {
1530
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
1531
1532
/**********
1533
* Switch *
1534
**********/
1535
switch {
1536
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1537
margin: 6px 0;
1538
border: 4px solid transparent;
1539
border-radius: 100px;
1540
background-color: alpha(currentColor, 0.3);
1541
background-clip: padding-box;
1542
font-size: 0; }
1543
switch:disabled {
1544
color: rgba(0, 0, 0, 0.32); }
1545
switch:checked {
1546
background-color: rgba(255, 64, 129, 0.5); }
1547
switch:checked:disabled {
1548
background-color: rgba(255, 64, 129, 0.2);
1549
color: rgba(0, 0, 0, 0.32); }
1550
switch slider {
1551
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1552
border-image: none;
1553
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1554
background-color: #FFFFFF;
1555
color: rgba(0, 0, 0, 0.8);
1556
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
1557
min-width: 24px;
1558
min-height: 24px;
1559
margin: -4px 0 -4px -4px;
1560
-gtk-outline-radius: 100px;
1561
border-radius: 100px; }
1562
switch:hover slider {
1563
border-image: none;
1564
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1565
switch:disabled slider {
1566
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1567
background-color: #fafafa;
1568
color: rgba(0, 0, 0, 0.32); }
1569
switch:checked slider {
1570
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0, background-color 0 0.3s;
1571
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1);
1572
margin: -4px -4px -4px 0;
1573
background-color: #FF4081;
1574
color: #FFFFFF; }
1575
switch:checked:disabled slider {
1576
animation: none; }
1577
1578
/*************************
1579
* Check and Radio items *
1580
*************************/
1581
.view.content-view.check:not(list), iconview.content-view.check:not(list) {
1582
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1583
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
1584
margin: 8px;
1585
background-color: transparent; }
1586
1587
.view.content-view.check:hover:not(list), iconview.content-view.check:hover:not(list) {
1588
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1589
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-hover-selectionmode.png"), url("assets/checkbox-hover-selectionmode@2.png"));
1590
margin: 8px;
1591
background-color: transparent; }
1592
1593
.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list) {
1594
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1595
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
1596
margin: 8px;
1597
background-color: transparent; }
1598
1599
.view.content-view.check:checked:hover:not(list), iconview.content-view.check:checked:hover:not(list) {
1600
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1601
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover-selectionmode.png"), url("assets/checkbox-checked-hover-selectionmode@2.png"));
1602
margin: 8px;
1603
background-color: transparent; }
1604
1605
checkbutton.text-button,
1606
radiobutton.text-button {
1607
padding: 2px;
1608
outline-offset: 0; }
1609
checkbutton.text-button label:not(:only-child),
1610
radiobutton.text-button label:not(:only-child) {
1611
margin: 0 4px; }
1612
1613
check,
1614
radio {
1615
min-height: 24px;
1616
min-width: 24px;
1617
margin: -12px;
1618
padding: 12px; }
1619
check:checked, check:checked:disabled,
1620
radio:checked,
1621
radio:checked:disabled {
1622
background-color: transparent; }
1623
check:checked, check:indeterminate,
1624
radio:checked,
1625
radio:indeterminate {
1626
color: #FF4081; }
1627
check:checked:disabled, check:indeterminate:disabled,
1628
radio:checked:disabled,
1629
radio:indeterminate:disabled {
1630
color: rgba(255, 64, 129, 0.4); }
1631
row check:not(:checked):not(:indeterminate), row
1632
radio:not(:checked):not(:indeterminate) {
1633
color: alpha(currentColor, 0.75); }
1634
row check:not(:checked):not(:indeterminate):hover, row check:not(:checked):not(:indeterminate):active, row
1635
radio:not(:checked):not(:indeterminate):hover, row
1636
radio:not(:checked):not(:indeterminate):active {
1637
color: currentColor; }
1638
menu menuitem check, menu menuitem
1639
radio {
1640
transition: none;
1641
margin: -16px; }
1642
menu menuitem check:not(:checked):not(:indeterminate), menu menuitem
1643
radio:not(:checked):not(:indeterminate) {
1644
color: alpha(currentColor, 0.6); }
1645
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
1646
radio, menu menuitem
1647
radio:hover, menu menuitem
1648
radio:disabled {
1649
background-image: none; }
1650
1651
check {
1652
-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1653
check:checked {
1654
-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1655
check:indeterminate {
1656
-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1657
1658
radio {
1659
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
1660
radio {
1661
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1662
radio:indeterminate {
1663
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1664
radio:checked {
1665
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; }
1666
radio:checked:disabled {
1667
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; }
1668
radio:indeterminate:checked {
1669
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
1670
1671
@keyframes check_check {
1672
from {
1673
-gtk-icon-transform: rotate(90deg); }
1674
to {
1675
-gtk-icon-transform: unset; } }
1676
@keyframes check_radio {
1677
from {
1678
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
1679
to {
1680
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } }
1681
@keyframes check_indeterminate {
1682
from {
1683
-gtk-icon-transform: unset; }
1684
50% {
1685
-gtk-icon-transform: scale(0, 1); }
1686
to {
1687
-gtk-icon-transform: unset; } }
1688
modelbutton.flat check:not(:indeterminate):checked,
1689
.menuitem.button.flat check:not(:indeterminate):checked,
1690
check:not(:indeterminate):checked {
1691
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1692
1693
check:not(:indeterminate):checked:active {
1694
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
1695
1696
modelbutton.flat check:indeterminate:checked, modelbutton.flat radio:indeterminate:checked,
1697
.menuitem.button.flat check:indeterminate:checked,
1698
.menuitem.button.flat radio:indeterminate:checked,
1699
check:indeterminate:checked, radio:indeterminate:checked {
1700
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1701
1702
check:indeterminate:checked:active, radio:indeterminate:checked:active {
1703
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
1704
1705
menu menuitem check:not(:indeterminate):checked,
1706
menu menuitem radio:not(:indeterminate):checked,
1707
menu menuitem check:indeterminate:checked,
1708
menu menuitem radio:indeterminate:checked {
1709
animation: none; }
1710
1711
treeview.view check,
1712
treeview.view radio {
1713
padding: 0; }
1714
treeview.view check:checked:hover, treeview.view check:selected:checked:hover,
1715
treeview.view radio:checked:hover,
1716
treeview.view radio:selected:checked:hover {
1717
background-image: none; }
1718
treeview.view check,
1719
treeview.view radio {
1720
color: rgba(0, 0, 0, 0.6); }
1721
treeview.view check:hover, treeview.view check:active,
1722
treeview.view radio:hover,
1723
treeview.view radio:active {
1724
color: rgba(0, 0, 0, 0.8); }
1725
treeview.view check:disabled,
1726
treeview.view radio:disabled {
1727
color: rgba(0, 0, 0, 0.24); }
1728
treeview.view check:checked, treeview.view check:indeterminate,
1729
treeview.view radio:checked,
1730
treeview.view radio:indeterminate {
1731
color: #FF4081; }
1732
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
1733
treeview.view radio:checked:disabled,
1734
treeview.view radio:indeterminate:disabled {
1735
color: rgba(255, 64, 129, 0.4); }
1736
treeview.view check:selected,
1737
treeview.view radio:selected {
1738
color: rgba(255, 255, 255, 0.75); }
1739
treeview.view check:selected:hover, treeview.view check:selected:active,
1740
treeview.view radio:selected:hover,
1741
treeview.view radio:selected:active {
1742
color: #FFFFFF; }
1743
treeview.view check:selected:disabled,
1744
treeview.view radio:selected:disabled {
1745
color: rgba(255, 255, 255, 0.3); }
1746
treeview.view check:selected:checked, treeview.view check:selected:indeterminate,
1747
treeview.view radio:selected:checked,
1748
treeview.view radio:selected:indeterminate {
1749
color: #FF4081; }
1750
treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled,
1751
treeview.view radio:selected:checked:disabled,
1752
treeview.view radio:selected:indeterminate:disabled {
1753
color: rgba(255, 64, 129, 0.4); }
1754
1755
treeview.view radio:checked {
1756
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png")));
1757
border-image: none; }
1758
1759
/************
1760
* GtkScale *
1761
************/
1762
scale {
1763
min-height: 12px;
1764
min-width: 12px;
1765
padding: 12px; }
1766
scale * {
1767
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
1768
scale slider {
1769
min-height: 24px;
1770
min-width: 24px;
1771
margin: -10px; }
1772
scale trough {
1773
outline-offset: 2px;
1774
background-color: alpha(currentColor, 0.3); }
1775
scale trough:disabled {
1776
color: rgba(0, 0, 0, 0.32); }
1777
scale highlight {
1778
background-color: #FF4081; }
1779
scale highlight:disabled {
1780
background-color: transparent; }
1781
scale fill {
1782
background-color: alpha(currentColor, 0.3); }
1783
scale fill:disabled {
1784
background-color: transparent; }
1785
scale slider {
1786
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1787
background-repeat: no-repeat;
1788
background-position: center;
1789
background-size: calc(100% - 8px); }
1790
scale slider {
1791
background-image: -gtk-scaled(url("assets/slider.png"), url("assets/slider@2.png")); }
1792
scale slider:disabled {
1793
background-image: -gtk-scaled(url("assets/slider-insensitive.png"), url("assets/slider-insensitive@2.png")); }
1794
scale slider:hover {
1795
background-size: calc(100% - 4px); }
1796
scale slider:active {
1797
background-size: calc(100% - 0px); }
1798
scale.fine-tune slider {
1799
background-size: calc(100% - 12px); }
1800
scale value {
1801
color: alpha(currentColor, 0.6); }
1802
scale marks {
1803
color: alpha(currentColor, 0.3); }
1804
scale marks.top {
1805
margin-bottom: 8px;
1806
margin-top: -16px; }
1807
scale marks.bottom {
1808
margin-top: 8px;
1809
margin-bottom: -16px; }
1810
scale marks.top {
1811
margin-right: 8px;
1812
margin-left: -16px; }
1813
scale marks.bottom {
1814
margin-left: 8px;
1815
margin-right: -16px; }
1816
scale.horizontal indicator {
1817
min-height: 8px;
1818
min-width: 1px; }
1819
scale.vertical indicator {
1820
min-height: 1px;
1821
min-width: 8px; }
1822
scale.color.horizontal slider,
1823
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1824
min-height: 30px;
1825
min-width: 24px;
1826
margin-top: -16px;
1827
background-position: center calc(100% - 4px); }
1828
scale.color.horizontal slider,
1829
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1830
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
1831
scale.color.horizontal slider:hover,
1832
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1833
background-position: center calc(100% - 2px); }
1834
scale.color.horizontal slider:active,
1835
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1836
background-position: center calc(100% - 0px); }
1837
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1838
background-position: center calc(100% - 6px); }
1839
scale.color.horizontal slider,
1840
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1841
min-height: 30px;
1842
min-width: 24px;
1843
margin-top: -16px;
1844
background-position: center calc(100% - 4px); }
1845
scale.color.horizontal slider:disabled,
1846
scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
1847
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-insensitive@2.png")); }
1848
scale.color.horizontal slider:hover,
1849
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1850
background-position: center calc(100% - 2px); }
1851
scale.color.horizontal slider:active,
1852
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1853
background-position: center calc(100% - 0px); }
1854
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1855
background-position: center calc(100% - 6px); }
1856
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1857
min-height: 30px;
1858
min-width: 24px;
1859
margin-bottom: -16px;
1860
background-position: center calc(4px); }
1861
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1862
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); }
1863
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1864
background-position: center calc(2px); }
1865
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1866
background-position: center calc(0px); }
1867
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1868
background-position: center calc(6px); }
1869
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1870
min-height: 30px;
1871
min-width: 24px;
1872
margin-bottom: -16px;
1873
background-position: center calc(4px); }
1874
scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
1875
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-insensitive@2.png")); }
1876
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1877
background-position: center calc(2px); }
1878
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1879
background-position: center calc(0px); }
1880
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1881
background-position: center calc(6px); }
1882
scale.color.vertical:dir(rtl) slider,
1883
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1884
min-height: 24px;
1885
min-width: 30px;
1886
margin-left: -16px;
1887
background-position: calc(4px) center; }
1888
scale.color.vertical:dir(rtl) slider,
1889
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1890
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); }
1891
scale.color.vertical:dir(rtl) slider:hover,
1892
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1893
background-position: calc(2px) center; }
1894
scale.color.vertical:dir(rtl) slider:active,
1895
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1896
background-position: calc(0px) center; }
1897
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1898
background-position: calc(6px) center; }
1899
scale.color.vertical:dir(rtl) slider,
1900
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1901
min-height: 24px;
1902
min-width: 30px;
1903
margin-left: -16px;
1904
background-position: calc(4px) center; }
1905
scale.color.vertical:dir(rtl) slider:disabled,
1906
scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
1907
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-insensitive@2.png")); }
1908
scale.color.vertical:dir(rtl) slider:hover,
1909
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1910
background-position: calc(2px) center; }
1911
scale.color.vertical:dir(rtl) slider:active,
1912
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1913
background-position: calc(0px) center; }
1914
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1915
background-position: calc(6px) center; }
1916
scale.color.vertical:dir(ltr) slider,
1917
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1918
min-height: 24px;
1919
min-width: 30px;
1920
margin-right: -16px;
1921
background-position: calc(100% - 4px) center; }
1922
scale.color.vertical:dir(ltr) slider,
1923
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1924
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); }
1925
scale.color.vertical:dir(ltr) slider:hover,
1926
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1927
background-position: calc(100% - 2px) center; }
1928
scale.color.vertical:dir(ltr) slider:active,
1929
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1930
background-position: calc(100% - 0px) center; }
1931
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
1932
background-position: calc(100% - 6px) center; }
1933
scale.color.vertical:dir(ltr) slider,
1934
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1935
min-height: 24px;
1936
min-width: 30px;
1937
margin-right: -16px;
1938
background-position: calc(100% - 4px) center; }
1939
scale.color.vertical:dir(ltr) slider:disabled,
1940
scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
1941
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-insensitive@2.png")); }
1942
scale.color.vertical:dir(ltr) slider:hover,
1943
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1944
background-position: calc(100% - 2px) center; }
1945
scale.color.vertical:dir(ltr) slider:active,
1946
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1947
background-position: calc(100% - 0px) center; }
1948
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
1949
background-position: calc(100% - 6px) center; }
1950
scale.color {
1951
min-height: 0;
1952
min-width: 0; }
1953
scale.color.horizontal {
1954
padding: 0 0 12px 0; }
1955
scale.color.horizontal trough {
1956
padding-bottom: 4px; }
1957
scale.color.horizontal slider {
1958
margin-bottom: -14px;
1959
margin-top: 0; }
1960
scale.color.vertical:dir(ltr) {
1961
padding: 0 0 0 12px; }
1962
scale.color.vertical:dir(ltr) trough {
1963
padding-left: 4px; }
1964
scale.color.vertical:dir(ltr) slider {
1965
margin-left: -14px;
1966
margin-right: 0; }
1967
scale.color.vertical:dir(rtl) {
1968
padding: 0 12px 0 0; }
1969
scale.color.vertical:dir(rtl) trough {
1970
padding-right: 4px; }
1971
scale.color.vertical:dir(rtl) slider {
1972
margin-right: -14px;
1973
margin-left: 0; }
1974
1975
/*****************
1976
* Progress bars *
1977
*****************/
1978
progressbar {
1979
color: rgba(0, 0, 0, 0.48);
1980
font-size: smaller; }
1981
progressbar.horizontal trough,
1982
progressbar.horizontal progress {
1983
min-height: 4px; }
1984
progressbar.vertical trough,
1985
progressbar.vertical progress {
1986
min-width: 4px; }
1987
progressbar trough {
1988
background-color: rgba(66, 165, 245, 0.3); }
1989
progressbar progress {
1990
background-color: #42A5F5; }
1991
1992
/*************
1993
* Level Bar *
1994
*************/
1995
levelbar block {
1996
min-width: 36px;
1997
min-height: 4px; }
1998
levelbar.vertical block {
1999
min-width: 4px;
2000
min-height: 36px; }
2001
levelbar trough {
2002
padding: 2px;
2003
border-radius: 2px;
2004
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2005
border-image: none;
2006
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2007
background-color: #FFFFFF;
2008
color: rgba(0, 0, 0, 0.8); }
2009
levelbar trough:disabled {
2010
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2011
background-color: #fafafa;
2012
color: rgba(0, 0, 0, 0.32); }
2013
levelbar.horizontal.discrete block {
2014
margin: 0 1px; }
2015
levelbar.vertical.discrete block {
2016
margin: 1px 0; }
2017
levelbar.horizontal.discrete trough {
2018
padding: 2px 1px; }
2019
levelbar.vertical.discrete trough {
2020
padding: 1px 2px; }
2021
levelbar block.low {
2022
background-color: #FF6D00; }
2023
levelbar block.high, levelbar block:not(.empty) {
2024
background-color: #42A5F5; }
2025
levelbar block.full {
2026
background-color: #00C853; }
2027
levelbar block.empty {
2028
background-color: alpha(currentColor, 0.3);
2029
color: rgba(0, 0, 0, 0.32); }
2030
2031
/****************
2032
* Print dialog *
2033
*****************/
2034
printdialog paper {
2035
padding: 0;
2036
border: 1px solid rgba(0, 0, 0, 0.1);
2037
background: #FFFFFF;
2038
color: rgba(0, 0, 0, 0.8); }
2039
printdialog .dialog-action-box {
2040
margin: 12px; }
2041
2042
/**********
2043
* Frames *
2044
**********/
2045
frame > border,
2046
.frame {
2047
margin: 0;
2048
padding: 0;
2049
border: 1px solid rgba(0, 0, 0, 0.1);
2050
border-radius: 0;
2051
box-shadow: none; }
2052
frame > border.flat,
2053
.frame.flat {
2054
border-style: none; }
2055
2056
actionbar > revealer > box {
2057
padding: 6px;
2058
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2059
2060
scrolledwindow viewport.frame {
2061
border-style: none; }
2062
scrolledwindow overshoot.top {
2063
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2064
background-repeat: no-repeat;
2065
background-position: center top;
2066
background-color: transparent;
2067
border: none;
2068
box-shadow: none; }
2069
scrolledwindow overshoot.bottom {
2070
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2071
background-repeat: no-repeat;
2072
background-position: center bottom;
2073
background-color: transparent;
2074
border: none;
2075
box-shadow: none; }
2076
scrolledwindow overshoot.left {
2077
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2078
background-repeat: no-repeat;
2079
background-position: left center;
2080
background-color: transparent;
2081
border: none;
2082
box-shadow: none; }
2083
scrolledwindow overshoot.right {
2084
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2085
background-repeat: no-repeat;
2086
background-position: right center;
2087
background-color: transparent;
2088
border: none;
2089
box-shadow: none; }
2090
scrolledwindow undershoot.top {
2091
background-color: transparent;
2092
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2093
padding-top: 1px;
2094
background-size: 12px 1px;
2095
background-repeat: repeat-x;
2096
background-origin: content-box;
2097
background-position: left top; }
2098
scrolledwindow undershoot.bottom {
2099
background-color: transparent;
2100
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2101
padding-bottom: 1px;
2102
background-size: 12px 1px;
2103
background-repeat: repeat-x;
2104
background-origin: content-box;
2105
background-position: left bottom; }
2106
scrolledwindow undershoot.left {
2107
background-color: transparent;
2108
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2109
padding-left: 1px;
2110
background-size: 1px 12px;
2111
background-repeat: repeat-y;
2112
background-origin: content-box;
2113
background-position: left top; }
2114
scrolledwindow undershoot.right {
2115
background-color: transparent;
2116
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2117
padding-right: 1px;
2118
background-size: 1px 12px;
2119
background-repeat: repeat-y;
2120
background-origin: content-box;
2121
background-position: right top; }
2122
scrolledwindow junction {
2123
border-style: solid none none solid;
2124
border-width: 1px;
2125
border-color: rgba(0, 0, 0, 0.1);
2126
background-color: #FFFFFF; }
2127
scrolledwindow junction:dir(rtl) {
2128
border-style: solid solid none none; }
2129
2130
separator {
2131
min-width: 1px;
2132
min-height: 1px;
2133
background: rgba(0, 0, 0, 0.1); }
2134
2135
/*********
2136
* Lists *
2137
*********/
2138
list {
2139
border-color: rgba(0, 0, 0, 0.1);
2140
background-color: #FFFFFF; }
2141
list row {
2142
padding: 2px; }
2143
2144
row {
2145
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
2146
row:hover {
2147
transition: none; }
2148
row.activatable, .view, iconview, treeview.view header button {
2149
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
2150
row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover {
2151
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); }
2152
row.activatable.has-open-popup, .has-open-popup.view, iconview.has-open-popup, treeview.view header button.has-open-popup, row.activatable:active, .view:active, iconview:active, treeview.view header button:active {
2153
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
2154
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
2155
2156
/*********************
2157
* App Notifications *
2158
*********************/
2159
.app-notification,
2160
.app-notification.frame {
2161
margin: 8px; }
2162
.app-notification border,
2163
.app-notification.frame border {
2164
border: none; }
2165
2166
/*************
2167
* Expanders *
2168
*************/
2169
expander arrow {
2170
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2171
min-width: 16px;
2172
min-height: 16px;
2173
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2174
-gtk-icon-transform: rotate(-90deg);
2175
color: rgba(0, 0, 0, 0.6); }
2176
expander arrow:dir(rtl) {
2177
-gtk-icon-transform: rotate(90deg); }
2178
expander arrow:checked {
2179
-gtk-icon-transform: unset; }
2180
expander arrow:hover, expander arrow:active {
2181
color: rgba(0, 0, 0, 0.8); }
2182
expander arrow:disabled {
2183
color: rgba(0, 0, 0, 0.24); }
2184
expander arrow:selected {
2185
color: rgba(255, 255, 255, 0.75); }
2186
expander arrow:selected:hover, expander arrow:selected:active {
2187
color: #FFFFFF; }
2188
expander arrow:selected:disabled {
2189
color: rgba(255, 255, 255, 0.3); }
2190
2191
/************
2192
* Calendar *
2193
***********/
2194
calendar {
2195
padding: 1px;
2196
border: 1px solid rgba(0, 0, 0, 0.1);
2197
color: rgba(0, 0, 0, 0.8); }
2198
calendar:disabled {
2199
color: rgba(0, 0, 0, 0.32); }
2200
calendar:selected {
2201
border-radius: 3px; }
2202
calendar.header {
2203
border-style: none none solid;
2204
border-radius: 0; }
2205
calendar.highlight {
2206
color: alpha(currentColor, 0.6);
2207
font-weight: 500; }
2208
calendar:indeterminate {
2209
color: alpha(currentColor, 0.4); }
2210
2211
/***********
2212
* Dialogs *
2213
***********/
2214
messagedialog.background {
2215
background-color: #FAFAFA; }
2216
messagedialog .titlebar {
2217
min-height: 24px;
2218
border-style: none;
2219
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2220
background-color: #FAFAFA; }
2221
messagedialog.csd.background {
2222
border-bottom-left-radius: 2px;
2223
border-bottom-right-radius: 2px; }
2224
messagedialog.csd .dialog-action-area button {
2225
padding: 8px 16px;
2226
border-top: 1px solid rgba(0, 0, 0, 0.1);
2227
border-radius: 0; }
2228
messagedialog.csd .dialog-action-area button:first-child {
2229
border-bottom-left-radius: 2px; }
2230
messagedialog.csd .dialog-action-area button:last-child {
2231
border-bottom-right-radius: 2px; }
2232
2233
filechooser .dialog-action-box {
2234
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2235
filechooser #pathbarbox {
2236
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
2237
2238
filechooserbutton:drop(active) {
2239
box-shadow: none; }
2240
2241
/***********
2242
* Sidebar *
2243
***********/
2244
.sidebar {
2245
border-style: none;
2246
background-color: #FAFAFA; }
2247
stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
2248
border-right: 1px solid rgba(0, 0, 0, 0.1);
2249
border-left-style: none; }
2250
stacksidebar.sidebar:dir(rtl) list
2251
.sidebar:dir(rtl), stacksidebar.sidebar.right list
2252
.sidebar:dir(rtl), .sidebar.right {
2253
border-left: 1px solid rgba(0, 0, 0, 0.1);
2254
border-right-style: none; }
2255
.sidebar list {
2256
background-color: transparent; }
2257
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
2258
border-style: none; }
2259
2260
stacksidebar row {
2261
padding: 10px 4px; }
2262
stacksidebar row > label {
2263
padding-left: 6px;
2264
padding-right: 6px; }
2265
2266
/****************
2267
* File chooser *
2268
****************/
2269
placessidebar > viewport.frame {
2270
border-style: none; }
2271
placessidebar row {
2272
min-height: 32px;
2273
padding: 0; }
2274
placessidebar row > revealer {
2275
padding: 0 12px; }
2276
placessidebar row:selected {
2277
color: #FFFFFF; }
2278
placessidebar row:disabled {
2279
color: rgba(0, 0, 0, 0.32); }
2280
placessidebar row image.sidebar-icon {
2281
opacity: 0.6; }
2282
placessidebar row image.sidebar-icon:dir(ltr) {
2283
padding-right: 8px; }
2284
placessidebar row image.sidebar-icon:dir(rtl) {
2285
padding-left: 8px; }
2286
placessidebar row label.sidebar-label:dir(ltr) {
2287
padding-right: 2px; }
2288
placessidebar row label.sidebar-label:dir(rtl) {
2289
padding-left: 2px; }
2290
button.sidebar-button {
2291
min-height: 24px;
2292
min-width: 24px;
2293
margin-top: 0;
2294
margin-bottom: 0;
2295
padding: 0;
2296
border-radius: 100%;
2297
-gtk-outline-radius: 100%; }
2298
placessidebar row.sidebar-placeholder-row {
2299
min-height: 2px;
2300
padding: 0 8px;
2301
background-image: image(#FF4081);
2302
background-clip: content-box; }
2303
placessidebar row.sidebar-new-bookmark-row {
2304
color: #FF4081; }
2305
placessidebar row:drop(active):not(:disabled) {
2306
box-shadow: inset 0 0 0 2px #FF4081; }
2307
2308
placesview .server-list-button > image {
2309
-gtk-icon-transform: rotate(0turn); }
2310
placesview .server-list-button:checked > image {
2311
-gtk-icon-transform: rotate(-0.5turn); }
2312
placesview > actionbar > revealer > box > label {
2313
padding-left: 8px;
2314
padding-right: 8px; }
2315
2316
/*********
2317
* Paned *
2318
*********/
2319
paned > separator {
2320
min-width: 1px;
2321
min-height: 1px;
2322
-gtk-icon-source: none;
2323
border-style: none;
2324
background-color: transparent;
2325
background-image: image(rgba(0, 0, 0, 0.1));
2326
background-size: 1px 1px; }
2327
paned > separator.wide {
2328
min-width: 6px;
2329
min-height: 6px;
2330
background-color: #F5F5F5;
2331
background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1));
2332
background-size: 1px 1px, 1px 1px; }
2333
paned.horizontal > separator {
2334
background-repeat: repeat-y; }
2335
paned.horizontal > separator:dir(ltr) {
2336
margin: 0 -8px 0 0;
2337
padding: 0 8px 0 0;
2338
background-position: left; }
2339
paned.horizontal > separator:dir(rtl) {
2340
margin: 0 0 0 -8px;
2341
padding: 0 0 0 8px;
2342
background-position: right; }
2343
paned.horizontal > separator.wide {
2344
margin: 0;
2345
padding: 0;
2346
background-repeat: repeat-y, repeat-y;
2347
background-position: left, right; }
2348
paned.vertical > separator {
2349
margin: 0 0 -8px 0;
2350
padding: 0 0 8px 0;
2351
background-repeat: repeat-x;
2352
background-position: top; }
2353
paned.vertical > separator.wide {
2354
margin: 0;
2355
padding: 0;
2356
background-repeat: repeat-x, repeat-x;
2357
background-position: bottom, top; }
2358
2359
/**************
2360
* GtkInfoBar *
2361
**************/
2362
infobar {
2363
border-style: none; }
2364
2365
.info {
2366
background-color: #66BB6A; }
2367
2368
.question {
2369
background-color: #42A5F5; }
2370
2371
.warning {
2372
background-color: #FFA726; }
2373
2374
.error {
2375
background-color: #EF5350; }
2376
2377
.info,
2378
.question,
2379
.warning,
2380
.error {
2381
color: #FFFFFF; }
2382
2383
/************
2384
* Tooltips *
2385
************/
2386
tooltip {
2387
border-radius: 2px;
2388
box-shadow: none; }
2389
tooltip.background {
2390
background-color: rgba(255, 255, 255, 0.9); }
2391
tooltip decoration {
2392
background-color: transparent; }
2393
tooltip label {
2394
min-height: 20px;
2395
padding: 2px 2px; }
2396
tooltip * {
2397
padding: 0;
2398
background-color: transparent;
2399
color: inherit; }
2400
2401
/*****************
2402
* Color Chooser *
2403
*****************/
2404
colorswatch.top {
2405
border-top-left-radius: 2.5px;
2406
border-top-right-radius: 2.5px; }
2407
colorswatch.top overlay {
2408
border-top-left-radius: 2px;
2409
border-top-right-radius: 2px; }
2410
colorswatch.bottom {
2411
border-bottom-left-radius: 2.5px;
2412
border-bottom-right-radius: 2.5px; }
2413
colorswatch.bottom overlay {
2414
border-bottom-left-radius: 2px;
2415
border-bottom-right-radius: 2px; }
2416
colorswatch.left, colorswatch:first-child:not(.top) {
2417
border-top-left-radius: 2.5px;
2418
border-bottom-left-radius: 2.5px; }
2419
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
2420
border-top-left-radius: 2px;
2421
border-bottom-left-radius: 2px; }
2422
colorswatch.right, colorswatch:last-child:not(.bottom) {
2423
border-top-right-radius: 2.5px;
2424
border-bottom-right-radius: 2.5px; }
2425
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
2426
border-top-right-radius: 2px;
2427
border-bottom-right-radius: 2px; }
2428
colorswatch.dark overlay {
2429
color: white; }
2430
colorswatch.light overlay {
2431
color: rgba(0, 0, 0, 0.8); }
2432
colorswatch.dark {
2433
color: white; }
2434
colorswatch.light {
2435
color: rgba(0, 0, 0, 0.8); }
2436
colorswatch:drop(active) {
2437
box-shadow: none; }
2438
colorswatch:drop(active).light overlay {
2439
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; }
2440
colorswatch:drop(active).dark overlay {
2441
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; }
2442
colorswatch overlay {
2443
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2444
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2445
colorswatch overlay:hover {
2446
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2447
colorswatch#add-color-button {
2448
border-radius: 2px 2px 0 0;
2449
color: white; }
2450
colorswatch#add-color-button:only-child {
2451
border-radius: 2px; }
2452
colorswatch#add-color-button overlay {
2453
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
2454
color: white; }
2455
colorswatch:disabled {
2456
opacity: 0.4; }
2457
colorswatch:disabled overlay {
2458
box-shadow: none; }
2459
colorswatch#editor-color-sample {
2460
border-radius: 2.5px; }
2461
colorswatch#editor-color-sample overlay {
2462
border-radius: 2px; }
2463
2464
colorchooser .popover.osd {
2465
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2466
border-radius: 2px;
2467
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2468
background-color: #FFFFFF; }
2469
colorchooser .popover.osd:backdrop {
2470
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2471
2472
/********
2473
* Misc *
2474
********/
2475
.content-view {
2476
background-color: #F5F5F5; }
2477
2478
/**********************
2479
* Window Decorations *
2480
*********************/
2481
decoration {
2482
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2483
border-radius: 2px 2px 0 0;
2484
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
2485
margin: 8px; }
2486
decoration:backdrop {
2487
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; }
2488
.maximized decoration, .fullscreen decoration, .tiled decoration {
2489
border-radius: 0; }
2490
.popup decoration {
2491
box-shadow: none; }
2492
.ssd decoration {
2493
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); }
2494
.csd.popup decoration {
2495
border-radius: 2px;
2496
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2497
tooltip.csd decoration {
2498
border-radius: 2px;
2499
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2500
messagedialog.csd decoration {
2501
border-radius: 2px; }
2502
.solid-csd decoration {
2503
margin: 0;
2504
padding: 4px;
2505
border-radius: 0;
2506
box-shadow: inset 0 0 0 3px #455A64, inset 0 1px rgba(255, 255, 255, 0.2);
2507
background-color: rgba(0, 0, 0, 0.1); }
2508
2509
.view:selected, iconview:selected, .view text selection, iconview text selection,
2510
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2511
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2512
entry selection, modelbutton.flat:selected,
2513
.menuitem.button.flat:selected, row:selected, calendar:selected {
2514
background-color: #42A5F5; }
2515
row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection,
2516
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2517
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2518
entry selection, modelbutton.flat:selected,
2519
.menuitem.button.flat:selected, row:selected, calendar:selected {
2520
color: #FFFFFF; }
2521
row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled,
2522
textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled,
2523
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled,
2524
entry selection:disabled, modelbutton.flat:disabled:selected,
2525
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected {
2526
color: rgba(255, 255, 255, 0.4); }
2527
2528
.monospace {
2529
font-family: monospace; }
2530
2531
/**********************
2532
* Touch Copy & Paste *
2533
*********************/
2534
cursor-handle {
2535
border-radius: 100px;
2536
background-color: #FF4081;
2537
background-image: none; }
2538
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) {
2539
padding-left: 6px;
2540
border-top-right-radius: 0; }
2541
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) {
2542
padding-right: 6px;
2543
border-top-left-radius: 0; }
2544
cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) {
2545
-GtkWidget-text-handle-width: 24;
2546
-GtkWidget-text-handle-height: 30;
2547
-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
2548
2549
.context-menu {
2550
font: initial; }
2551
2552
button.circular {
2553
border-radius: 100px;
2554
-gtk-outline-radius: 100px; }
2555
button.circular label {
2556
padding: 0; }
2557
2558
.keycap {
2559
min-width: 12px;
2560
min-height: 26px;
2561
margin-top: 2px;
2562
padding-bottom: 2px;
2563
padding-left: 8px;
2564
padding-right: 8px;
2565
border: solid 1px rgba(0, 0, 0, 0.1);
2566
border-radius: 3px;
2567
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
2568
background-color: #FFFFFF;
2569
color: rgba(0, 0, 0, 0.8);
2570
font-size: smaller; }
2571
2572
*:drop(active) {
2573
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
2574
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 2px #FF4081;
2575
caret-color: #FF4081; }
2576
2577
stackswitcher button.text-button {
2578
min-width: 100px; }
2579
2580
stackswitcher button.circular,
2581
stackswitcher button.text-button.circular {
2582
min-width: 36px;
2583
min-height: 36px;
2584
padding: 0; }
2585
2586
.floating-bar {
2587
min-height: 32px;
2588
padding: 0;
2589
border-style: solid solid none;
2590
border-width: 1px;
2591
border-color: rgba(0, 0, 0, 0.1);
2592
border-radius: 3px 3px 0 0;
2593
background-color: #FFFFFF;
2594
background-clip: padding-box;
2595
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
2596
.floating-bar.left {
2597
margin-right: 7px;
2598
border-left-style: none;
2599
border-top-left-radius: 0; }
2600
.floating-bar.right {
2601
margin-left: 7px;
2602
border-right-style: none;
2603
border-top-right-radius: 0; }
2604
.floating-bar button {
2605
min-height: 24px;
2606
min-width: 24px;
2607
margin: 4px;
2608
padding: 0; }
2609
2610
/************
2611
* Nautilus *
2612
************/
2613
.nautilus-window,
2614
.nautilus-window notebook,
2615
.nautilus-window notebook > stack {
2616
background: #FFFFFF; }
2617
2618
.nautilus-desktop-window,
2619
.nautilus-desktop-window notebook,
2620
.nautilus-desktop-window notebook > stack {
2621
background: transparent; }
2622
2623
.nautilus-desktop.nautilus-canvas-item {
2624
color: #FFFFFF;
2625
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2626
2627
.nautilus-desktop.nautilus-canvas-item:selected {
2628
text-shadow: none; }
2629
2630
@keyframes needs_attention_keyframes {
2631
0% {
2632
background-color: transparent; }
2633
50% {
2634
background-color: alpha(currentColor, 0.3); }
2635
100% {
2636
background-color: transparent; } }
2637
.nautilus-operations-button-needs-attention {
2638
color: #FF4081;
2639
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
2640
2641
.nautilus-operations-button-needs-attention-multiple {
2642
color: #FF4081;
2643
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2644
animation-iteration-count: 2; }
2645
2646
.disk-space-display.unknown {
2647
background-color: #FF6D00; }
2648
2649
.disk-space-display.used {
2650
background-color: #42A5F5; }
2651
2652
.disk-space-display.free {
2653
background-color: alpha(currentColor, 0.3);
2654
color: rgba(0, 0, 0, 0.32); }
2655
2656
.documents-entry-tag {
2657
margin: 3px -2px 3px 8px;
2658
padding: 0 8px;
2659
border-radius: 100px;
2660
box-shadow: none;
2661
background-color: #42A5F5;
2662
color: #FFFFFF; }
2663
.documents-entry-tag:hover {
2664
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2665
2666
.documents-entry-tag.button {
2667
margin: 0 -2px;
2668
padding: 4px;
2669
border-radius: 100px;
2670
box-shadow: none;
2671
color: rgba(255, 255, 255, 0.75); }
2672
.documents-entry-tag.button:hover, .documents-entry-tag.button:active {
2673
color: #FFFFFF; }
2674
2675
.nautilus-window searchbar {
2676
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2677
2678
.nautilus-window .searchbar-container {
2679
margin-top: -1px; }
2680
2681
/*********
2682
* gedit *
2683
*********/
2684
/* Only normal state is handle */
2685
.open-document-selector-name-label {
2686
font-weight: bold; }
2687
2688
/* Only normal state is handle */
2689
.open-document-selector-path-label {
2690
color: alpha(currentColor, 0.6);
2691
font-size: smaller; }
2692
2693
.gedit-document-panel {
2694
background-color: #FAFAFA; }
2695
2696
.gedit-document-panel-group-row,
2697
.gedit-document-panel-group-row:hover {
2698
border-top: 1px solid alpha(currentColor, 0.3); }
2699
2700
.gedit-document-panel-group-row:first-child,
2701
.gedit-document-panel-group-row:first-child:hover {
2702
border-top: 0px; }
2703
2704
/* Try to look as the notebook tab close button */
2705
.gedit-document-panel row button.flat {
2706
min-height: 24px;
2707
min-width: 24px;
2708
padding: 0;
2709
margin-top: 8px;
2710
margin-bottom: 8px; }
2711
2712
statusbar {
2713
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2714
2715
.gedit-search-slider {
2716
margin: 4px 4px 8px; }
2717
.gedit-search-slider .gedit-search-entry-occurrences-tag {
2718
all: unset;
2719
padding: 0 4px;
2720
color: alpha(currentColor, 0.6); }
2721
.gedit-search-slider entry:dir(ltr) {
2722
margin-right: -72px;
2723
padding-right: 80px; }
2724
.gedit-search-slider entry:dir(ltr) .gedit-search-entry-occurrences-tag {
2725
margin-right: -8px; }
2726
.gedit-search-slider entry:dir(rtl) {
2727
margin-left: -72px;
2728
padding-left: 80px; }
2729
.gedit-search-slider entry:dir(rtl) .gedit-search-entry-occurrences-tag {
2730
margin-left: -8px; }
2731
2732
.gedit-search-slider .linked:not(.vertical) > entry,
2733
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
2734
border-radius: 2px; }
2735
2736
/***********
2737
* Firefox *
2738
***********/
2739
menubar {
2740
color: rgba(255, 255, 255, 0.75); }
2741
menubar:hover {
2742
color: #FFFFFF; }
2743
2744
separator {
2745
color: rgba(0, 0, 0, 0.1); }
2746
2747
/* FIXME: not working */
2748
window.background > widget > check,
2749
window.background > widget > radio {
2750
margin: 0;
2751
padding: 0; }
2752
2753
window.background > widget > radio:checked {
2754
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png")));
2755
border-image: none; }
2756
2757
/***********
2758
* Synapse *
2759
***********/
2760
box > widget > widget:selected {
2761
background-color: #42A5F5; }
2762
2763
/* GTK NAMED COLORS
2764
----------------
2765
use responsibly! */
2766
/*
2767
widget text/foreground color */
2768
@define-color theme_fg_color rgba(0, 0, 0, 0.8);
2769
/*
2770
text color for entries, views and content in general */
2771
@define-color theme_text_color rgba(0, 0, 0, 0.8);
2772
/*
2773
widget base background color */
2774
@define-color theme_bg_color #F5F5F5;
2775
/*
2776
text widgets and the like base background color */
2777
@define-color theme_base_color #FFFFFF;
2778
/*
2779
base background color of selections */
2780
@define-color theme_selected_bg_color #42A5F5;
2781
/*
2782
text/foreground color of selections */
2783
@define-color theme_selected_fg_color #FFFFFF;
2784
/*
2785
base background color of insensitive widgets */
2786
@define-color insensitive_bg_color #F5F5F5;
2787
/*
2788
text foreground color of insensitive widgets */
2789
@define-color insensitive_fg_color rgba(0, 0, 0, 0.32);
2790
/*
2791
insensitive text widgets and the like base background color */
2792
@define-color insensitive_base_color #fafafa;
2793
/*
2794
widget text/foreground color on backdrop windows */
2795
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8);
2796
/*
2797
text color for entries, views and content in general on backdrop windows */
2798
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8);
2799
/*
2800
widget base background color on backdrop windows */
2801
@define-color theme_unfocused_bg_color #F5F5F5;
2802
/*
2803
text widgets and the like base background color on backdrop windows */
2804
@define-color theme_unfocused_base_color #FFFFFF;
2805
/*
2806
base background color of selections on backdrop windows */
2807
@define-color theme_unfocused_selected_bg_color #42A5F5;
2808
/*
2809
text/foreground color of selections on backdrop windows */
2810
@define-color theme_unfocused_selected_fg_color #FFFFFF;
2811
/*
2812
insensitive color on backdrop windows*/
2813
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.32);
2814
/*
2815
widgets main borders color */
2816
@define-color borders rgba(0, 0, 0, 0.1);
2817
/*
2818
widgets main borders color on backdrop windows */
2819
@define-color unfocused_borders rgba(0, 0, 0, 0.1);
2820
/*
2821
these are pretty self explicative */
2822
@define-color warning_color #FF6D00;
2823
@define-color error_color #DD2C00;
2824
@define-color success_color #00C853;
2825
@define-color content_view_bg #FFFFFF;
2826