A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 gtk.css

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