A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 gtk.css

View raw Download
text/plain • 120.4 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(66, 165, 245, 0.6) 0%, transparent 0%); }
19
50% {
20
background-image: radial-gradient(circle farthest-corner at center, rgba(66, 165, 245, 0.6) 100%, transparent 0%); }
21
to {
22
background-image: radial-gradient(circle farthest-corner at center, transparent 100%, transparent 0%); } }
23
@keyframes header_ripple_effect {
24
from {
25
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 0%, transparent 0%); }
26
to {
27
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 100%, transparent 0%); } }
28
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
32
-GtkTextView-error-underline-color: #DD2C00;
33
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
35
-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: #42A5F5; }
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: #42A5F5;
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 #40C4FF;
120
background-color: rgba(64, 196, 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: #42A5F5;
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), #42A5F5 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), #42A5F5 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: 1px;
262
background-size: 1px 12px;
263
background-repeat: repeat-y;
264
background-origin: content-box;
265
background-position: left top; }
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: 1px;
272
background-size: 1px 12px;
273
background-repeat: repeat-y;
274
background-origin: content-box;
275
background-position: right top; }
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: #42A5F5;
355
background-color: transparent; }
356
357
treeview acceleditor > label {
358
background-color: #42A5F5; }
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: #42A5F5;
405
color: #FFFFFF; }
406
button:checked:disabled {
407
background-color: alpha(currentColor, 0.3);
408
color: rgba(66, 165, 245, 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: #42A5F5; }
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:backdrop:not(headerbar),
970
headerbar:backdrop {
971
color: rgba(255, 255, 255, 0.75); }
972
.titlebar:not(headerbar) .title,
973
headerbar .title {
974
padding-left: 12px;
975
padding-right: 12px;
976
font-weight: bold; }
977
.titlebar:not(headerbar) .subtitle,
978
headerbar .subtitle {
979
padding-left: 12px;
980
padding-right: 12px;
981
font-size: smaller; }
982
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
983
headerbar button:not(.suggested-action):not(.destructive-action) {
984
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px;
985
color: alpha(currentColor, 0.75); }
986
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):hover, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):active,
987
headerbar button:not(.suggested-action):not(.destructive-action):hover,
988
headerbar button:not(.suggested-action):not(.destructive-action):active {
989
color: currentColor; }
990
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled,
991
headerbar button:not(.suggested-action):not(.destructive-action):disabled {
992
color: alpha(currentColor, 0.3); }
993
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled > label,
994
headerbar button:not(.suggested-action):not(.destructive-action):disabled > label {
995
color: inherit; }
996
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
997
headerbar button:not(.suggested-action):not(.destructive-action):checked {
998
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
999
background-color: transparent;
1000
color: currentColor; }
1001
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
1002
headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled {
1003
background-color: transparent;
1004
color: alpha(currentColor, 0.4); }
1005
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label,
1006
headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled > label {
1007
color: inherit; }
1008
.titlebar:not(headerbar) button.suggested-action:disabled, .titlebar:not(headerbar) button.destructive-action:disabled,
1009
headerbar button.suggested-action:disabled,
1010
headerbar button.destructive-action:disabled {
1011
color: alpha(currentColor, 0.4); }
1012
.titlebar:not(headerbar) button.suggested-action:disabled > label, .titlebar:not(headerbar) button.destructive-action:disabled > label,
1013
headerbar button.suggested-action:disabled > label,
1014
headerbar button.destructive-action:disabled > label {
1015
color: inherit; }
1016
.selection-mode.titlebar:not(headerbar),
1017
headerbar.selection-mode {
1018
animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
1019
color: #FFFFFF; }
1020
.selection-mode.titlebar:backdrop:not(headerbar),
1021
headerbar.selection-mode:backdrop {
1022
color: rgba(255, 255, 255, 0.75); }
1023
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
1024
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
1025
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px; }
1026
.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,
1027
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action),
1028
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):hover,
1029
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):active {
1030
color: currentColor; }
1031
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled,
1032
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled {
1033
color: alpha(currentColor, 0.4); }
1034
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled > label,
1035
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled > label {
1036
color: inherit; }
1037
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
1038
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked {
1039
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
1040
color: currentColor; }
1041
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
1042
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled {
1043
color: alpha(currentColor, 0.4); }
1044
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label,
1045
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled > label {
1046
color: inherit; }
1047
.selection-mode.titlebar:not(headerbar) .selection-menu,
1048
headerbar.selection-mode .selection-menu {
1049
padding-left: 16px;
1050
padding-right: 16px; }
1051
.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow,
1052
headerbar.selection-mode .selection-menu GtkArrow {
1053
-GtkArrow-arrow-scaling: 1; }
1054
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow,
1055
headerbar.selection-mode .selection-menu .arrow {
1056
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1057
.tiled .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .tiled
1058
headerbar, .maximized
1059
headerbar {
1060
border-radius: 0;
1061
box-shadow: none; }
1062
.default-decoration.titlebar:not(headerbar),
1063
headerbar.default-decoration {
1064
min-height: 24px;
1065
padding: 6px;
1066
border-width: 0; }
1067
.default-decoration.titlebar:not(headerbar) button.titlebutton,
1068
headerbar.default-decoration button.titlebutton {
1069
min-height: 24px;
1070
min-width: 24px;
1071
margin: 0;
1072
padding: 0; }
1073
.default-decoration.titlebar:not(headerbar) button.titlebutton:active,
1074
headerbar.default-decoration button.titlebutton:active {
1075
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); }
1076
1077
headerbar entry,
1078
headerbar spinbutton,
1079
headerbar button {
1080
margin-top: 6px;
1081
margin-bottom: 6px; }
1082
1083
.titlebar {
1084
border-top-left-radius: 2px;
1085
border-top-right-radius: 2px; }
1086
1087
separator:first-child + headerbar, headerbar:first-child {
1088
border-top-left-radius: 2px; }
1089
.tiled separator:first-child + headerbar, .maximized separator:first-child + headerbar, .tiled headerbar:first-child, .maximized headerbar:first-child {
1090
border-radius: 0; }
1091
headerbar:last-child {
1092
border-top-right-radius: 2px; }
1093
.tiled headerbar:last-child, .maximized headerbar:last-child {
1094
border-radius: 0; }
1095
1096
window.csd > .titlebar:not(headerbar) {
1097
padding: 0;
1098
background-color: transparent;
1099
background-image: none;
1100
border-style: none;
1101
box-shadow: none; }
1102
.titlebar:not(headerbar) > separator {
1103
background-color: #455A64;
1104
background-image: image(rgba(0, 0, 0, 0.1)); }
1105
1106
/************
1107
* Pathbars *
1108
************/
1109
.path-bar button.text-button, .path-bar button.image-button, .path-bar button {
1110
padding-left: 6px;
1111
padding-right: 6px; }
1112
.path-bar button image {
1113
padding-left: 4px;
1114
padding-right: 4px; }
1115
.path-bar button.slider-button {
1116
padding-left: 0;
1117
padding-right: 0; }
1118
1119
/**************
1120
* Tree Views *
1121
**************/
1122
treeview.view {
1123
-GtkTreeView-grid-line-width: 1;
1124
-GtkTreeView-grid-line-pattern: '';
1125
-GtkTreeView-tree-line-width: 1;
1126
-GtkTreeView-tree-line-pattern: '';
1127
-GtkTreeView-expander-size: 16;
1128
border-left-color: alpha(currentColor, 0.3);
1129
border-top-color: rgba(0, 0, 0, 0.1); }
1130
treeview.view:hover, treeview.view:active, treeview.view:selected {
1131
border-radius: 0; }
1132
treeview.view.separator {
1133
min-height: 5px;
1134
color: rgba(0, 0, 0, 0.1); }
1135
treeview.view:drop(active) {
1136
border-style: solid none;
1137
border-width: 1px;
1138
border-color: #FF4081; }
1139
treeview.view:drop(active).after {
1140
border-top-style: none; }
1141
treeview.view:drop(active).before {
1142
border-bottom-style: none; }
1143
treeview.view.expander {
1144
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1145
-gtk-icon-transform: rotate(-90deg);
1146
color: rgba(0, 0, 0, 0.6); }
1147
treeview.view.expander:dir(rtl) {
1148
-gtk-icon-transform: rotate(90deg); }
1149
treeview.view.expander:checked {
1150
-gtk-icon-transform: unset; }
1151
treeview.view.expander:hover, treeview.view.expander:active {
1152
color: rgba(0, 0, 0, 0.8); }
1153
treeview.view.expander:disabled {
1154
color: rgba(0, 0, 0, 0.24); }
1155
treeview.view.expander:selected {
1156
color: rgba(255, 255, 255, 0.75); }
1157
treeview.view.expander:selected:hover, treeview.view.expander:selected:active {
1158
color: #FFFFFF; }
1159
treeview.view.expander:selected:disabled {
1160
color: rgba(255, 255, 255, 0.3); }
1161
treeview.view.progressbar {
1162
border-style: none none solid;
1163
border-width: 4px;
1164
border-color: #42A5F5;
1165
background-color: transparent;
1166
background-image: none; }
1167
treeview.view.progressbar:selected {
1168
border-color: currentColor; }
1169
treeview.view.trough {
1170
border-style: none none solid;
1171
border-width: 4px;
1172
border-color: rgba(66, 165, 245, 0.3);
1173
background-color: transparent;
1174
background-image: none; }
1175
treeview.view.trough:selected {
1176
border-color: alpha(currentColor, 0.3); }
1177
treeview.view header button {
1178
padding: 2px 6px;
1179
border-style: none solid solid none;
1180
border-width: 1px;
1181
border-color: rgba(0, 0, 0, 0.1);
1182
border-radius: 0;
1183
background-clip: border-box; }
1184
treeview.view header button, treeview.view header button:hover, treeview.view header button:active {
1185
box-shadow: none; }
1186
treeview.view header button, treeview.view header button:disabled {
1187
background-color: #FFFFFF; }
1188
treeview.view header button:last-child {
1189
border-right-style: none; }
1190
treeview.view button.dnd,
1191
treeview.view header.button.dnd {
1192
padding: 2px 6px;
1193
border-style: none solid solid;
1194
border-width: 1px;
1195
border-color: rgba(0, 0, 0, 0.1);
1196
border-radius: 0;
1197
box-shadow: none;
1198
background-color: #FFFFFF;
1199
background-clip: border-box;
1200
color: #42A5F5; }
1201
1202
/*********
1203
* Menus *
1204
*********/
1205
menubar,
1206
.menubar {
1207
-GtkWidget-window-dragging: true;
1208
padding: 0;
1209
background-color: #455A64; }
1210
menubar > menuitem,
1211
.menubar > menuitem {
1212
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
1213
min-height: 20px;
1214
padding: 4px 8px;
1215
color: rgba(255, 255, 255, 0.75); }
1216
menubar > menuitem:hover,
1217
.menubar > menuitem:hover {
1218
transition: none;
1219
background-color: alpha(currentColor, 0.15);
1220
color: #FFFFFF; }
1221
menubar > menuitem:disabled,
1222
.menubar > menuitem:disabled {
1223
color: rgba(255, 255, 255, 0.3); }
1224
1225
menu,
1226
.menu {
1227
margin: 4px 0;
1228
padding: 4px 0;
1229
background-color: #FFFFFF;
1230
border: 1px solid rgba(0, 0, 0, 0.1); }
1231
.csd menu, .csd
1232
.menu {
1233
border: none;
1234
border-radius: 2px; }
1235
menu menuitem,
1236
.menu menuitem {
1237
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
1238
min-height: 20px;
1239
min-width: 40px;
1240
padding: 4px 8px;
1241
font: initial;
1242
text-shadow: none; }
1243
menu menuitem:hover,
1244
.menu menuitem:hover {
1245
transition: none;
1246
background-color: alpha(currentColor, 0.15); }
1247
menu menuitem:disabled,
1248
.menu menuitem:disabled {
1249
color: rgba(0, 0, 0, 0.32); }
1250
menu menuitem arrow,
1251
.menu menuitem arrow {
1252
min-height: 16px;
1253
min-width: 16px; }
1254
menu menuitem arrow:dir(ltr),
1255
.menu menuitem arrow:dir(ltr) {
1256
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1257
margin-left: 8px; }
1258
menu menuitem arrow:dir(rtl),
1259
.menu menuitem arrow:dir(rtl) {
1260
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1261
margin-right: 8px; }
1262
menu > arrow,
1263
.menu > arrow {
1264
min-height: 16px;
1265
min-width: 16px;
1266
padding: 4px;
1267
border-radius: 0;
1268
background-color: #FFFFFF;
1269
color: rgba(0, 0, 0, 0.6); }
1270
menu > arrow.top,
1271
.menu > arrow.top {
1272
margin-top: -4px;
1273
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1274
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1275
menu > arrow.bottom,
1276
.menu > arrow.bottom {
1277
margin-bottom: -4px;
1278
border-top: 1px solid rgba(0, 0, 0, 0.1);
1279
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1280
menu > arrow:hover,
1281
.menu > arrow:hover {
1282
background-image: image(alpha(currentColor, 0.15));
1283
color: rgba(0, 0, 0, 0.8); }
1284
menu > arrow:disabled,
1285
.menu > arrow:disabled {
1286
border-color: transparent;
1287
background-color: transparent;
1288
color: transparent; }
1289
menu separator,
1290
.menu separator {
1291
margin: 4px 0; }
1292
1293
menuitem accelerator {
1294
color: alpha(currentColor, 0.6); }
1295
menuitem check:dir(ltr),
1296
menuitem radio:dir(ltr) {
1297
margin-right: -8px;
1298
margin-left: -16px; }
1299
menuitem check:dir(rtl),
1300
menuitem radio:dir(rtl) {
1301
margin-right: -16px;
1302
margin-left: -8px; }
1303
1304
.csd.popup {
1305
border-radius: 2px; }
1306
1307
/***************
1308
* Popovers *
1309
***************/
1310
popover.background {
1311
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1312
padding: 0;
1313
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1314
background-color: #FAFAFA; }
1315
popover.background:backdrop {
1316
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
1317
popover.background, .csd popover.background {
1318
border-style: solid;
1319
border-width: 1px;
1320
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1321
border-radius: 3px; }
1322
popover.background > list,
1323
popover.background > .view,
1324
popover.background > iconview,
1325
popover.background > toolbar {
1326
border-style: none;
1327
box-shadow: none;
1328
background-color: transparent; }
1329
popover.background separator {
1330
margin: 4px 0; }
1331
popover.background list separator {
1332
margin: 0; }
1333
1334
/*************
1335
* Notebooks *
1336
*************/
1337
notebook > header {
1338
border-width: 1px;
1339
border-color: rgba(0, 0, 0, 0.1);
1340
background-color: #F5F5F5;
1341
background-clip: border-box; }
1342
notebook > header.top {
1343
border-bottom-style: solid; }
1344
notebook > header.top > tabs > tab:not(.reorderable-page) {
1345
margin-bottom: -1px; }
1346
notebook > header.top > tabs > tab:not(.reorderable-page):hover {
1347
box-shadow: inset 0 -2px alpha(currentColor, 0.3); }
1348
notebook > header.top > tabs > tab:not(.reorderable-page):checked {
1349
box-shadow: inset 0 -2px #42A5F5; }
1350
notebook > header.bottom {
1351
border-top-style: solid; }
1352
notebook > header.bottom > tabs > tab:not(.reorderable-page) {
1353
margin-top: -1px; }
1354
notebook > header.bottom > tabs > tab:not(.reorderable-page):hover {
1355
box-shadow: inset 0 2px alpha(currentColor, 0.3); }
1356
notebook > header.bottom > tabs > tab:not(.reorderable-page):checked {
1357
box-shadow: inset 0 2px #42A5F5; }
1358
notebook > header.left {
1359
border-right-style: solid; }
1360
notebook > header.left > tabs > tab:not(.reorderable-page) {
1361
margin-right: -1px; }
1362
notebook > header.left > tabs > tab:not(.reorderable-page):hover {
1363
box-shadow: inset -2px 0 alpha(currentColor, 0.3); }
1364
notebook > header.left > tabs > tab:not(.reorderable-page):checked {
1365
box-shadow: inset -2px 0 #42A5F5; }
1366
notebook > header.right {
1367
border-left-style: solid; }
1368
notebook > header.right > tabs > tab:not(.reorderable-page) {
1369
margin-left: -1px; }
1370
notebook > header.right > tabs > tab:not(.reorderable-page):hover {
1371
box-shadow: inset 2px 0 alpha(currentColor, 0.3); }
1372
notebook > header.right > tabs > tab:not(.reorderable-page):checked {
1373
box-shadow: inset 2px 0 #42A5F5; }
1374
notebook > header.top > tabs > arrow {
1375
border-top-style: none; }
1376
notebook > header.bottom > tabs > arrow {
1377
border-bottom-style: none; }
1378
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
1379
padding-left: 4px;
1380
padding-right: 4px; }
1381
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
1382
margin-left: -8px;
1383
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
1384
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
1385
margin-right: -8px;
1386
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
1387
notebook > header.left > tabs > arrow {
1388
border-left-style: none; }
1389
notebook > header.right > tabs > arrow {
1390
border-right-style: none; }
1391
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
1392
padding-top: 4px;
1393
padding-bottom: 4px; }
1394
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
1395
margin-top: -8px;
1396
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1397
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
1398
margin-bottom: -8px;
1399
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1400
notebook > header > tabs > arrow {
1401
min-height: 16px;
1402
min-width: 16px;
1403
border-radius: 0; }
1404
notebook > header tab {
1405
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1406
min-height: 24px;
1407
min-width: 24px;
1408
padding: 6px 12px;
1409
outline-offset: -6px;
1410
border-width: 1px;
1411
border-color: transparent;
1412
color: rgba(0, 0, 0, 0.6);
1413
font-weight: 500; }
1414
notebook > header tab:hover {
1415
color: rgba(0, 0, 0, 0.8); }
1416
notebook > header tab:hover.reorderable-page {
1417
border-color: rgba(0, 0, 0, 0.1);
1418
background-color: #fafafa; }
1419
notebook > header tab:disabled {
1420
color: rgba(0, 0, 0, 0.24); }
1421
notebook > header tab:checked {
1422
color: rgba(0, 0, 0, 0.8); }
1423
notebook > header tab:checked:disabled {
1424
color: rgba(0, 0, 0, 0.32); }
1425
notebook > header tab:checked:not(.reorderable-page) {
1426
animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1); }
1427
notebook > header tab:checked.reorderable-page {
1428
border-color: rgba(0, 0, 0, 0.1);
1429
background-color: #FFFFFF; }
1430
notebook > header tab button.flat {
1431
min-width: 24px;
1432
min-height: 24px;
1433
padding: 0; }
1434
notebook > header tab button.flat:last-child {
1435
margin-left: 6px;
1436
margin-right: -6px; }
1437
notebook > header tab button.flat:first-child {
1438
margin-left: -6px;
1439
margin-right: 6px; }
1440
notebook > header.top tabs, notebook > header.bottom tabs {
1441
padding-left: 8px;
1442
padding-right: 8px; }
1443
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
1444
margin-left: 0; }
1445
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
1446
margin-right: 0; }
1447
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
1448
margin: 0 -1px;
1449
border-style: none solid; }
1450
notebook > header.left tabs, notebook > header.right tabs {
1451
padding-top: 8px;
1452
padding-bottom: 8px; }
1453
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
1454
margin-top: 0; }
1455
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
1456
margin-bottom: 0; }
1457
notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
1458
margin: -1px 0;
1459
border-style: solid none; }
1460
notebook > stack:not(:only-child) {
1461
background-color: #FFFFFF; }
1462
1463
/**************
1464
* Scrollbars *
1465
**************/
1466
scrollbar {
1467
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1468
background-color: #FFFFFF;
1469
background-clip: padding-box; }
1470
* {
1471
-GtkScrollbar-has-backward-stepper: false;
1472
-GtkScrollbar-has-forward-stepper: false; }
1473
scrollbar.top {
1474
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
1475
scrollbar.bottom {
1476
border-top: 1px solid rgba(0, 0, 0, 0.1); }
1477
scrollbar.left {
1478
border-right: 1px solid rgba(0, 0, 0, 0.1); }
1479
scrollbar.right {
1480
border-left: 1px solid rgba(0, 0, 0, 0.1); }
1481
scrollbar slider {
1482
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0;
1483
min-width: 8px;
1484
min-height: 8px;
1485
border: 4px solid transparent;
1486
border-radius: 100px;
1487
background-clip: padding-box;
1488
background-color: rgba(0, 0, 0, 0.48); }
1489
scrollbar slider:hover {
1490
background-color: rgba(0, 0, 0, 0.6); }
1491
scrollbar slider:active {
1492
background-color: rgba(0, 0, 0, 0.8); }
1493
scrollbar slider:disabled {
1494
background-color: rgba(0, 0, 0, 0.192); }
1495
scrollbar.fine-tune slider {
1496
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0, min-width 0, min-height 0;
1497
min-width: 4px;
1498
min-height: 4px; }
1499
scrollbar.fine-tune.horizontal slider {
1500
margin: 2px 0; }
1501
scrollbar.fine-tune.vertical slider {
1502
margin: 0 2px; }
1503
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1504
border-color: transparent;
1505
background-color: transparent; }
1506
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
1507
min-width: 4px;
1508
min-height: 4px;
1509
margin: 2px;
1510
border: 2px solid rgba(255, 255, 255, 0.3); }
1511
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
1512
min-width: 4px;
1513
min-height: 4px;
1514
margin: 2px;
1515
border: 2px solid rgba(255, 255, 255, 0.3);
1516
border-radius: 100px;
1517
background-color: rgba(0, 0, 0, 0.48);
1518
background-clip: padding-box;
1519
-gtk-icon-source: none; }
1520
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
1521
background-color: rgba(0, 0, 0, 0.192); }
1522
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
1523
min-width: 24px; }
1524
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
1525
min-width: 8px; }
1526
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
1527
min-height: 24px; }
1528
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
1529
min-height: 8px; }
1530
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
1531
background-color: rgba(255, 255, 255, 0.9); }
1532
scrollbar.horizontal slider {
1533
min-width: 24px; }
1534
scrollbar.vertical slider {
1535
min-height: 24px; }
1536
scrollbar button {
1537
min-width: 16px;
1538
min-height: 16px;
1539
padding: 0;
1540
border-radius: 0; }
1541
scrollbar.vertical button.down {
1542
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
1543
scrollbar.vertical button.up {
1544
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
1545
scrollbar.horizontal button.down {
1546
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
1547
scrollbar.horizontal button.up {
1548
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
1549
1550
/**********
1551
* Switch *
1552
**********/
1553
switch {
1554
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
1555
margin: 6px 0;
1556
border: 4px solid transparent;
1557
border-radius: 100px;
1558
background-color: alpha(currentColor, 0.3);
1559
background-clip: padding-box;
1560
font-size: 0; }
1561
switch:disabled {
1562
color: rgba(0, 0, 0, 0.32); }
1563
switch:checked {
1564
background-color: rgba(255, 64, 129, 0.5); }
1565
switch:checked:disabled {
1566
background-color: rgba(255, 64, 129, 0.2);
1567
color: rgba(0, 0, 0, 0.32); }
1568
switch slider {
1569
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1570
border-image: none;
1571
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1572
background-color: #FFFFFF;
1573
color: rgba(0, 0, 0, 0.8);
1574
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
1575
min-width: 24px;
1576
min-height: 24px;
1577
margin: -4px 0 -4px -4px;
1578
-gtk-outline-radius: 100px;
1579
border-radius: 100px;
1580
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)); }
1581
switch:hover slider {
1582
border-image: none;
1583
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1584
switch:disabled slider {
1585
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1586
background-color: #fafafa;
1587
color: rgba(0, 0, 0, 0.32); }
1588
switch:checked slider {
1589
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
1590
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
1591
margin: -4px -4px -4px 0;
1592
color: #FFFFFF; }
1593
switch:checked:disabled slider {
1594
animation: none; }
1595
1596
/*************************
1597
* Check and Radio items *
1598
*************************/
1599
.view.content-view.check:not(list), iconview.content-view.check:not(list) {
1600
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1601
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
1602
margin: 8px;
1603
background-color: transparent; }
1604
.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 {
1605
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1606
.view.content-view.check:not(list):disabled, iconview.content-view.check:not(list):disabled {
1607
-gtk-icon-shadow: none; }
1608
1609
.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list) {
1610
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1611
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-active-selectionmode.png"), url("assets/checkbox-active-selectionmode@2.png"));
1612
margin: 8px;
1613
background-color: transparent; }
1614
.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 {
1615
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1616
.view.content-view.check:active:not(list):disabled, iconview.content-view.check:active:not(list):disabled {
1617
-gtk-icon-shadow: none; }
1618
1619
.view.content-view.check:disabled:not(list), iconview.content-view.check:disabled:not(list) {
1620
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1621
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-insensitive-selectionmode.png"), url("assets/checkbox-insensitive-selectionmode@2.png"));
1622
margin: 8px;
1623
background-color: transparent; }
1624
.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 {
1625
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1626
.view.content-view.check:disabled:not(list):disabled, iconview.content-view.check:disabled:not(list):disabled {
1627
-gtk-icon-shadow: none; }
1628
1629
.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list) {
1630
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1631
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
1632
margin: 8px;
1633
background-color: transparent; }
1634
.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 {
1635
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1636
.view.content-view.check:checked:not(list):disabled, iconview.content-view.check:checked:not(list):disabled {
1637
-gtk-icon-shadow: none; }
1638
1639
.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list) {
1640
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1641
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active-selectionmode.png"), url("assets/checkbox-checked-active-selectionmode@2.png"));
1642
margin: 8px;
1643
background-color: transparent; }
1644
.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 {
1645
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1646
.view.content-view.check:checked:active:not(list):disabled, iconview.content-view.check:checked:active:not(list):disabled {
1647
-gtk-icon-shadow: none; }
1648
1649
.view.content-view.check:disabled:checked:not(list), iconview.content-view.check:disabled:checked:not(list) {
1650
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1651
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive-selectionmode.png"), url("assets/checkbox-checked-insensitive-selectionmode@2.png"));
1652
margin: 8px;
1653
background-color: transparent; }
1654
.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 {
1655
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1656
.view.content-view.check:disabled:checked:not(list):disabled, iconview.content-view.check:disabled:checked:not(list):disabled {
1657
-gtk-icon-shadow: none; }
1658
1659
checkbutton.text-button, radiobutton.text-button {
1660
padding: 2px 0;
1661
outline-offset: 0; }
1662
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
1663
margin-left: 4px; }
1664
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
1665
margin-right: 4px; }
1666
1667
check,
1668
radio {
1669
min-height: 24px;
1670
min-width: 24px;
1671
-gtk-icon-source: none;
1672
margin: -12px -8px;
1673
padding: 12px;
1674
outline-offset: 4px;
1675
color: alpha(currentColor, 0.75); }
1676
check:hover, check:active,
1677
radio:hover,
1678
radio:active {
1679
color: currentColor; }
1680
check:checked, check:checked:disabled,
1681
radio:checked,
1682
radio:checked:disabled {
1683
background-color: transparent; }
1684
check:checked, check:indeterminate,
1685
radio:checked,
1686
radio:indeterminate {
1687
color: #FF4081; }
1688
check:checked:disabled, check:indeterminate:disabled,
1689
radio:checked:disabled,
1690
radio:indeterminate:disabled {
1691
color: rgba(255, 64, 129, 0.4); }
1692
check:only-child,
1693
radio:only-child {
1694
margin: -12px; }
1695
menu menuitem check, menu menuitem
1696
radio {
1697
transition: none;
1698
margin: -16px -16px; }
1699
menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem
1700
radio:not(:checked):not(:indeterminate):hover {
1701
color: alpha(currentColor, 0.75); }
1702
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
1703
radio, menu menuitem
1704
radio:hover, menu menuitem
1705
radio:disabled {
1706
background-image: none; }
1707
1708
check {
1709
-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1710
check:checked {
1711
-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1712
check:indeterminate {
1713
-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1714
1715
radio {
1716
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px;
1717
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1718
radio:checked {
1719
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; }
1720
radio:checked:disabled {
1721
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; }
1722
radio:indeterminate {
1723
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1724
radio:indeterminate:checked {
1725
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
1726
1727
@keyframes check_check {
1728
from {
1729
-gtk-icon-transform: rotate(90deg); }
1730
to {
1731
-gtk-icon-transform: unset; } }
1732
@keyframes check_radio {
1733
from {
1734
-gtk-icon-transform: scale(0); }
1735
to {
1736
-gtk-icon-transform: unset; } }
1737
@keyframes check_indeterminate {
1738
from {
1739
-gtk-icon-transform: unset; }
1740
50% {
1741
-gtk-icon-transform: scale(0, 1); }
1742
to {
1743
-gtk-icon-transform: unset; } }
1744
check:not(:indeterminate):checked {
1745
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1746
1747
check:not(:indeterminate):checked:active {
1748
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; }
1749
1750
check:indeterminate:checked, radio:indeterminate:checked {
1751
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1752
1753
check:indeterminate:checked:active, radio:indeterminate:checked:active {
1754
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; }
1755
1756
menu menuitem check:not(:indeterminate):checked,
1757
menu menuitem radio:not(:indeterminate):checked,
1758
menu menuitem check:indeterminate:checked,
1759
menu menuitem radio:indeterminate:checked {
1760
animation: none; }
1761
1762
treeview.view check,
1763
treeview.view radio {
1764
padding: 0; }
1765
treeview.view check:checked:hover, treeview.view check:selected:checked:hover,
1766
treeview.view radio:checked:hover,
1767
treeview.view radio:selected:checked:hover {
1768
background-image: none; }
1769
treeview.view check,
1770
treeview.view radio {
1771
color: rgba(0, 0, 0, 0.6); }
1772
treeview.view check:hover, treeview.view check:active,
1773
treeview.view radio:hover,
1774
treeview.view radio:active {
1775
color: rgba(0, 0, 0, 0.8); }
1776
treeview.view check:disabled,
1777
treeview.view radio:disabled {
1778
color: rgba(0, 0, 0, 0.24); }
1779
treeview.view check:checked, treeview.view check:indeterminate,
1780
treeview.view radio:checked,
1781
treeview.view radio:indeterminate {
1782
color: #FF4081; }
1783
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
1784
treeview.view radio:checked:disabled,
1785
treeview.view radio:indeterminate:disabled {
1786
color: rgba(255, 64, 129, 0.4); }
1787
treeview.view check:selected,
1788
treeview.view radio:selected {
1789
color: rgba(255, 255, 255, 0.75); }
1790
treeview.view check:selected:hover, treeview.view check:selected:active,
1791
treeview.view radio:selected:hover,
1792
treeview.view radio:selected:active {
1793
color: #FFFFFF; }
1794
treeview.view check:selected:disabled,
1795
treeview.view radio:selected:disabled {
1796
color: rgba(255, 255, 255, 0.3); }
1797
treeview.view check:selected:checked, treeview.view check:selected:indeterminate,
1798
treeview.view radio:selected:checked,
1799
treeview.view radio:selected:indeterminate {
1800
color: #FF4081; }
1801
treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled,
1802
treeview.view radio:selected:checked:disabled,
1803
treeview.view radio:selected:indeterminate:disabled {
1804
color: rgba(255, 64, 129, 0.4); }
1805
1806
treeview.view radio:checked {
1807
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png")));
1808
border-image: none; }
1809
1810
/************
1811
* GtkScale *
1812
************/
1813
scale {
1814
min-height: 12px;
1815
min-width: 12px;
1816
padding: 12px; }
1817
scale * {
1818
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
1819
scale slider {
1820
min-height: 24px;
1821
min-width: 24px;
1822
margin: -10px; }
1823
scale trough {
1824
outline-offset: 2px;
1825
background-color: alpha(currentColor, 0.3); }
1826
scale trough:disabled {
1827
color: rgba(0, 0, 0, 0.32); }
1828
scale highlight {
1829
background-color: #FF4081; }
1830
scale highlight:disabled {
1831
background-color: transparent; }
1832
scale fill {
1833
background-color: alpha(currentColor, 0.3); }
1834
scale fill:disabled {
1835
background-color: transparent; }
1836
scale slider {
1837
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1838
background-repeat: no-repeat;
1839
background-position: center;
1840
background-size: calc(100% - 8px); }
1841
scale slider {
1842
background-image: -gtk-scaled(url("assets/slider.png"), url("assets/slider@2.png")); }
1843
scale slider:disabled {
1844
background-image: -gtk-scaled(url("assets/slider-insensitive.png"), url("assets/slider-insensitive@2.png")); }
1845
scale slider:hover {
1846
background-size: calc(100% - 4px); }
1847
scale slider:active {
1848
background-size: calc(100% - 0px); }
1849
scale.fine-tune slider {
1850
background-size: calc(100% - 12px); }
1851
scale value {
1852
color: alpha(currentColor, 0.6); }
1853
scale marks {
1854
color: alpha(currentColor, 0.3); }
1855
scale marks.top {
1856
margin-bottom: 8px;
1857
margin-top: -16px; }
1858
scale marks.bottom {
1859
margin-top: 8px;
1860
margin-bottom: -16px; }
1861
scale marks.top {
1862
margin-right: 8px;
1863
margin-left: -16px; }
1864
scale marks.bottom {
1865
margin-left: 8px;
1866
margin-right: -16px; }
1867
scale.horizontal indicator {
1868
min-height: 8px;
1869
min-width: 1px; }
1870
scale.vertical indicator {
1871
min-height: 1px;
1872
min-width: 8px; }
1873
scale.color.horizontal slider,
1874
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1875
min-height: 30px;
1876
min-width: 24px;
1877
margin-top: -16px;
1878
background-position: center calc(100% - 4px); }
1879
scale.color.horizontal slider,
1880
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1881
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
1882
scale.color.horizontal slider:hover,
1883
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1884
background-position: center calc(100% - 2px); }
1885
scale.color.horizontal slider:active,
1886
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1887
background-position: center calc(100% - 0px); }
1888
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1889
background-position: center calc(100% - 6px); }
1890
scale.color.horizontal slider,
1891
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1892
min-height: 30px;
1893
min-width: 24px;
1894
margin-top: -16px;
1895
background-position: center calc(100% - 4px); }
1896
scale.color.horizontal slider:disabled,
1897
scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
1898
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")); }
1899
scale.color.horizontal slider:hover,
1900
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1901
background-position: center calc(100% - 2px); }
1902
scale.color.horizontal slider:active,
1903
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1904
background-position: center calc(100% - 0px); }
1905
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1906
background-position: center calc(100% - 6px); }
1907
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1908
min-height: 30px;
1909
min-width: 24px;
1910
margin-bottom: -16px;
1911
background-position: center calc(4px); }
1912
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1913
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); }
1914
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1915
background-position: center calc(2px); }
1916
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1917
background-position: center calc(0px); }
1918
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1919
background-position: center calc(6px); }
1920
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1921
min-height: 30px;
1922
min-width: 24px;
1923
margin-bottom: -16px;
1924
background-position: center calc(4px); }
1925
scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
1926
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")); }
1927
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1928
background-position: center calc(2px); }
1929
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1930
background-position: center calc(0px); }
1931
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1932
background-position: center calc(6px); }
1933
scale.color.vertical:dir(rtl) slider,
1934
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1935
min-height: 24px;
1936
min-width: 30px;
1937
margin-left: -16px;
1938
background-position: calc(4px) center; }
1939
scale.color.vertical:dir(rtl) slider,
1940
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1941
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); }
1942
scale.color.vertical:dir(rtl) slider:hover,
1943
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1944
background-position: calc(2px) center; }
1945
scale.color.vertical:dir(rtl) slider:active,
1946
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1947
background-position: calc(0px) center; }
1948
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1949
background-position: calc(6px) center; }
1950
scale.color.vertical:dir(rtl) slider,
1951
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1952
min-height: 24px;
1953
min-width: 30px;
1954
margin-left: -16px;
1955
background-position: calc(4px) center; }
1956
scale.color.vertical:dir(rtl) slider:disabled,
1957
scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
1958
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")); }
1959
scale.color.vertical:dir(rtl) slider:hover,
1960
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1961
background-position: calc(2px) center; }
1962
scale.color.vertical:dir(rtl) slider:active,
1963
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1964
background-position: calc(0px) center; }
1965
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1966
background-position: calc(6px) center; }
1967
scale.color.vertical:dir(ltr) slider,
1968
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1969
min-height: 24px;
1970
min-width: 30px;
1971
margin-right: -16px;
1972
background-position: calc(100% - 4px) center; }
1973
scale.color.vertical:dir(ltr) slider,
1974
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1975
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); }
1976
scale.color.vertical:dir(ltr) slider:hover,
1977
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1978
background-position: calc(100% - 2px) center; }
1979
scale.color.vertical:dir(ltr) slider:active,
1980
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1981
background-position: calc(100% - 0px) center; }
1982
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
1983
background-position: calc(100% - 6px) center; }
1984
scale.color.vertical:dir(ltr) slider,
1985
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1986
min-height: 24px;
1987
min-width: 30px;
1988
margin-right: -16px;
1989
background-position: calc(100% - 4px) center; }
1990
scale.color.vertical:dir(ltr) slider:disabled,
1991
scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
1992
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")); }
1993
scale.color.vertical:dir(ltr) slider:hover,
1994
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1995
background-position: calc(100% - 2px) center; }
1996
scale.color.vertical:dir(ltr) slider:active,
1997
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1998
background-position: calc(100% - 0px) center; }
1999
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
2000
background-position: calc(100% - 6px) center; }
2001
scale.color {
2002
min-height: 0;
2003
min-width: 0; }
2004
scale.color.horizontal {
2005
padding: 0 0 12px 0; }
2006
scale.color.horizontal trough {
2007
padding-bottom: 4px; }
2008
scale.color.horizontal slider {
2009
margin-bottom: -14px;
2010
margin-top: 0; }
2011
scale.color.vertical:dir(ltr) {
2012
padding: 0 0 0 12px; }
2013
scale.color.vertical:dir(ltr) trough {
2014
padding-left: 4px; }
2015
scale.color.vertical:dir(ltr) slider {
2016
margin-left: -14px;
2017
margin-right: 0; }
2018
scale.color.vertical:dir(rtl) {
2019
padding: 0 12px 0 0; }
2020
scale.color.vertical:dir(rtl) trough {
2021
padding-right: 4px; }
2022
scale.color.vertical:dir(rtl) slider {
2023
margin-right: -14px;
2024
margin-left: 0; }
2025
2026
/*****************
2027
* Progress bars *
2028
*****************/
2029
progressbar {
2030
color: rgba(0, 0, 0, 0.48);
2031
font-size: smaller; }
2032
progressbar.horizontal trough,
2033
progressbar.horizontal progress {
2034
min-height: 4px; }
2035
progressbar.vertical trough,
2036
progressbar.vertical progress {
2037
min-width: 4px; }
2038
progressbar trough {
2039
background-color: rgba(66, 165, 245, 0.3); }
2040
progressbar progress {
2041
background-color: #42A5F5; }
2042
2043
/*************
2044
* Level Bar *
2045
*************/
2046
levelbar block {
2047
min-width: 36px;
2048
min-height: 4px; }
2049
levelbar.vertical block {
2050
min-width: 4px;
2051
min-height: 36px; }
2052
levelbar trough {
2053
padding: 2px;
2054
border-radius: 2px;
2055
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2056
border-image: none;
2057
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2058
background-color: #FFFFFF;
2059
color: rgba(0, 0, 0, 0.8); }
2060
levelbar trough:disabled {
2061
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2062
background-color: #fafafa;
2063
color: rgba(0, 0, 0, 0.32); }
2064
levelbar.horizontal.discrete block {
2065
margin: 0 1px; }
2066
levelbar.vertical.discrete block {
2067
margin: 1px 0; }
2068
levelbar.horizontal.discrete trough {
2069
padding: 2px 1px; }
2070
levelbar.vertical.discrete trough {
2071
padding: 1px 2px; }
2072
levelbar block.low {
2073
background-color: #FF6D00; }
2074
levelbar block.high {
2075
background-color: #42A5F5; }
2076
levelbar block.full {
2077
background-color: #00C853; }
2078
levelbar block.empty {
2079
background-color: alpha(currentColor, 0.3);
2080
color: rgba(0, 0, 0, 0.32); }
2081
2082
/****************
2083
* Print dialog *
2084
*****************/
2085
printdialog paper {
2086
padding: 0;
2087
border: 1px solid rgba(0, 0, 0, 0.1);
2088
background: #FFFFFF;
2089
color: rgba(0, 0, 0, 0.8); }
2090
printdialog .dialog-action-box {
2091
margin: 12px; }
2092
2093
/**********
2094
* Frames *
2095
**********/
2096
frame > border,
2097
.frame {
2098
margin: 0;
2099
padding: 0;
2100
border: 1px solid rgba(0, 0, 0, 0.1);
2101
border-radius: 0;
2102
box-shadow: none; }
2103
frame > border.flat,
2104
.frame.flat {
2105
border-style: none; }
2106
2107
actionbar > revealer > box {
2108
padding: 6px;
2109
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2110
2111
scrolledwindow viewport.frame {
2112
border-style: none; }
2113
scrolledwindow overshoot.top {
2114
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2115
background-repeat: no-repeat;
2116
background-position: center top;
2117
background-color: transparent;
2118
border: none;
2119
box-shadow: none; }
2120
scrolledwindow overshoot.bottom {
2121
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2122
background-repeat: no-repeat;
2123
background-position: center bottom;
2124
background-color: transparent;
2125
border: none;
2126
box-shadow: none; }
2127
scrolledwindow overshoot.left {
2128
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2129
background-repeat: no-repeat;
2130
background-position: left center;
2131
background-color: transparent;
2132
border: none;
2133
box-shadow: none; }
2134
scrolledwindow overshoot.right {
2135
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2136
background-repeat: no-repeat;
2137
background-position: right center;
2138
background-color: transparent;
2139
border: none;
2140
box-shadow: none; }
2141
scrolledwindow undershoot.top {
2142
background-color: transparent;
2143
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2144
padding-top: 1px;
2145
background-size: 12px 1px;
2146
background-repeat: repeat-x;
2147
background-origin: content-box;
2148
background-position: left top; }
2149
scrolledwindow undershoot.bottom {
2150
background-color: transparent;
2151
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2152
padding-bottom: 1px;
2153
background-size: 12px 1px;
2154
background-repeat: repeat-x;
2155
background-origin: content-box;
2156
background-position: left bottom; }
2157
scrolledwindow undershoot.left {
2158
background-color: transparent;
2159
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2160
padding-left: 1px;
2161
background-size: 1px 12px;
2162
background-repeat: repeat-y;
2163
background-origin: content-box;
2164
background-position: left top; }
2165
scrolledwindow undershoot.right {
2166
background-color: transparent;
2167
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2168
padding-right: 1px;
2169
background-size: 1px 12px;
2170
background-repeat: repeat-y;
2171
background-origin: content-box;
2172
background-position: right top; }
2173
scrolledwindow junction {
2174
border-style: solid none none solid;
2175
border-width: 1px;
2176
border-color: rgba(0, 0, 0, 0.1);
2177
background-color: #FFFFFF; }
2178
scrolledwindow junction:dir(rtl) {
2179
border-style: solid solid none none; }
2180
2181
separator {
2182
min-width: 1px;
2183
min-height: 1px;
2184
background: rgba(0, 0, 0, 0.1); }
2185
2186
/*********
2187
* Lists *
2188
*********/
2189
list {
2190
border-color: rgba(0, 0, 0, 0.1);
2191
background-color: #FFFFFF; }
2192
list row {
2193
padding: 2px; }
2194
2195
row {
2196
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
2197
row:hover {
2198
transition: none; }
2199
row.activatable, .view, iconview, treeview.view header button {
2200
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
2201
row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover {
2202
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); }
2203
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 {
2204
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
2205
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
2206
2207
/*********************
2208
* App Notifications *
2209
*********************/
2210
.app-notification,
2211
.app-notification.frame {
2212
margin: 8px; }
2213
.app-notification border,
2214
.app-notification.frame border {
2215
border: none; }
2216
2217
/*************
2218
* Expanders *
2219
*************/
2220
expander arrow {
2221
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2222
min-width: 16px;
2223
min-height: 16px;
2224
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2225
-gtk-icon-transform: rotate(-90deg);
2226
color: rgba(0, 0, 0, 0.6); }
2227
expander arrow:dir(rtl) {
2228
-gtk-icon-transform: rotate(90deg); }
2229
expander arrow:checked {
2230
-gtk-icon-transform: unset; }
2231
expander arrow:hover, expander arrow:active {
2232
color: rgba(0, 0, 0, 0.8); }
2233
expander arrow:disabled {
2234
color: rgba(0, 0, 0, 0.24); }
2235
expander arrow:selected {
2236
color: rgba(255, 255, 255, 0.75); }
2237
expander arrow:selected:hover, expander arrow:selected:active {
2238
color: #FFFFFF; }
2239
expander arrow:selected:disabled {
2240
color: rgba(255, 255, 255, 0.3); }
2241
2242
/************
2243
* Calendar *
2244
***********/
2245
calendar {
2246
padding: 1px;
2247
border: 1px solid rgba(0, 0, 0, 0.1);
2248
color: rgba(0, 0, 0, 0.8); }
2249
calendar:disabled {
2250
color: rgba(0, 0, 0, 0.32); }
2251
calendar:selected {
2252
border-radius: 3px; }
2253
calendar.header {
2254
border: none;
2255
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2256
border-radius: 0; }
2257
calendar:indeterminate {
2258
color: alpha(currentColor, 0.4); }
2259
calendar.highlight {
2260
color: alpha(currentColor, 0.6);
2261
font-weight: 500; }
2262
2263
/***********
2264
* Dialogs *
2265
***********/
2266
messagedialog.background {
2267
background-color: #FAFAFA; }
2268
messagedialog .titlebar {
2269
min-height: 24px;
2270
border-style: none;
2271
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2272
background-color: #FAFAFA; }
2273
messagedialog.csd.background {
2274
border-bottom-left-radius: 2px;
2275
border-bottom-right-radius: 2px; }
2276
messagedialog.csd .dialog-action-area button {
2277
padding: 8px 16px;
2278
border-top: 1px solid rgba(0, 0, 0, 0.1);
2279
border-radius: 0; }
2280
messagedialog.csd .dialog-action-area button:first-child {
2281
border-bottom-left-radius: 2px; }
2282
messagedialog.csd .dialog-action-area button:last-child {
2283
border-bottom-right-radius: 2px; }
2284
2285
filechooser .dialog-action-box {
2286
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2287
filechooser #pathbarbox {
2288
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
2289
2290
filechooserbutton:drop(active) {
2291
box-shadow: none; }
2292
2293
/***********
2294
* Sidebar *
2295
***********/
2296
.sidebar {
2297
border-style: none;
2298
background-color: #FAFAFA; }
2299
stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
2300
border-right: 1px solid rgba(0, 0, 0, 0.1);
2301
border-left-style: none; }
2302
stacksidebar.sidebar:dir(rtl) list
2303
.sidebar:dir(rtl), stacksidebar.sidebar.right list
2304
.sidebar:dir(rtl), .sidebar.right {
2305
border-left: 1px solid rgba(0, 0, 0, 0.1);
2306
border-right-style: none; }
2307
.sidebar list {
2308
background-color: transparent; }
2309
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
2310
border-style: none; }
2311
2312
stacksidebar row {
2313
padding: 10px 4px; }
2314
stacksidebar row > label {
2315
padding-left: 6px;
2316
padding-right: 6px; }
2317
2318
/****************
2319
* File chooser *
2320
****************/
2321
placessidebar > viewport.frame {
2322
border-style: none; }
2323
placessidebar row {
2324
min-height: 32px;
2325
padding: 0; }
2326
placessidebar row > revealer {
2327
padding: 0 12px; }
2328
placessidebar row:selected {
2329
color: #FFFFFF; }
2330
placessidebar row:disabled {
2331
color: rgba(0, 0, 0, 0.32); }
2332
placessidebar row image.sidebar-icon {
2333
opacity: 0.6; }
2334
placessidebar row image.sidebar-icon:dir(ltr) {
2335
padding-right: 8px; }
2336
placessidebar row image.sidebar-icon:dir(rtl) {
2337
padding-left: 8px; }
2338
placessidebar row label.sidebar-label:dir(ltr) {
2339
padding-right: 2px; }
2340
placessidebar row label.sidebar-label:dir(rtl) {
2341
padding-left: 2px; }
2342
button.sidebar-button {
2343
min-height: 24px;
2344
min-width: 24px;
2345
margin-top: 0;
2346
margin-bottom: 0;
2347
padding: 0;
2348
border-radius: 100%;
2349
-gtk-outline-radius: 100%; }
2350
placessidebar row.sidebar-placeholder-row {
2351
min-height: 2px;
2352
padding: 0 8px;
2353
background-image: image(#FF4081);
2354
background-clip: content-box; }
2355
placessidebar row.sidebar-new-bookmark-row {
2356
color: #FF4081; }
2357
placessidebar row:drop(active):not(:disabled) {
2358
box-shadow: inset 0 0 0 2px #FF4081; }
2359
2360
placesview .server-list-button > image {
2361
-gtk-icon-transform: rotate(0turn); }
2362
placesview .server-list-button:checked > image {
2363
-gtk-icon-transform: rotate(-0.5turn); }
2364
placesview > actionbar > revealer > box > label {
2365
padding-left: 8px;
2366
padding-right: 8px; }
2367
2368
/*********
2369
* Paned *
2370
*********/
2371
paned > separator {
2372
min-width: 1px;
2373
min-height: 1px;
2374
-gtk-icon-source: none;
2375
border-style: none;
2376
background-color: transparent;
2377
background-image: image(rgba(0, 0, 0, 0.1));
2378
background-size: 1px 1px; }
2379
paned > separator.wide {
2380
min-width: 6px;
2381
min-height: 6px;
2382
background-color: #F5F5F5;
2383
background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1));
2384
background-size: 1px 1px, 1px 1px; }
2385
paned.horizontal > separator {
2386
background-repeat: repeat-y; }
2387
paned.horizontal > separator:dir(ltr) {
2388
margin: 0 -8px 0 0;
2389
padding: 0 8px 0 0;
2390
background-position: left; }
2391
paned.horizontal > separator:dir(rtl) {
2392
margin: 0 0 0 -8px;
2393
padding: 0 0 0 8px;
2394
background-position: right; }
2395
paned.horizontal > separator.wide {
2396
margin: 0;
2397
padding: 0;
2398
background-repeat: repeat-y, repeat-y;
2399
background-position: left, right; }
2400
paned.vertical > separator {
2401
margin: 0 0 -8px 0;
2402
padding: 0 0 8px 0;
2403
background-repeat: repeat-x;
2404
background-position: top; }
2405
paned.vertical > separator.wide {
2406
margin: 0;
2407
padding: 0;
2408
background-repeat: repeat-x, repeat-x;
2409
background-position: bottom, top; }
2410
2411
/**************
2412
* GtkInfoBar *
2413
**************/
2414
infobar {
2415
border-style: none; }
2416
2417
.info {
2418
background-color: #66BB6A; }
2419
2420
.question {
2421
background-color: #42A5F5; }
2422
2423
.warning {
2424
background-color: #FFA726; }
2425
2426
.error {
2427
background-color: #EF5350; }
2428
2429
.info,
2430
.question,
2431
.warning,
2432
.error {
2433
color: #FFFFFF; }
2434
2435
/************
2436
* Tooltips *
2437
************/
2438
tooltip {
2439
border-radius: 2px;
2440
box-shadow: none; }
2441
tooltip.background {
2442
background-color: rgba(255, 255, 255, 0.9); }
2443
tooltip decoration {
2444
background-color: transparent; }
2445
tooltip label {
2446
min-height: 20px;
2447
padding: 2px 2px; }
2448
tooltip * {
2449
padding: 0;
2450
background-color: transparent;
2451
color: inherit; }
2452
2453
/*****************
2454
* Color Chooser *
2455
*****************/
2456
colorswatch.top {
2457
border-top-left-radius: 2.5px;
2458
border-top-right-radius: 2.5px; }
2459
colorswatch.top overlay {
2460
border-top-left-radius: 2px;
2461
border-top-right-radius: 2px; }
2462
colorswatch.bottom {
2463
border-bottom-left-radius: 2.5px;
2464
border-bottom-right-radius: 2.5px; }
2465
colorswatch.bottom overlay {
2466
border-bottom-left-radius: 2px;
2467
border-bottom-right-radius: 2px; }
2468
colorswatch.left, colorswatch:first-child:not(.top) {
2469
border-top-left-radius: 2.5px;
2470
border-bottom-left-radius: 2.5px; }
2471
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
2472
border-top-left-radius: 2px;
2473
border-bottom-left-radius: 2px; }
2474
colorswatch.right, colorswatch:last-child:not(.bottom) {
2475
border-top-right-radius: 2.5px;
2476
border-bottom-right-radius: 2.5px; }
2477
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
2478
border-top-right-radius: 2px;
2479
border-bottom-right-radius: 2px; }
2480
colorswatch.dark overlay {
2481
color: white; }
2482
colorswatch.light overlay {
2483
color: rgba(0, 0, 0, 0.8); }
2484
colorswatch.dark {
2485
color: white; }
2486
colorswatch.light {
2487
color: rgba(0, 0, 0, 0.8); }
2488
colorswatch:drop(active) {
2489
box-shadow: none; }
2490
colorswatch:drop(active).light overlay {
2491
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; }
2492
colorswatch:drop(active).dark overlay {
2493
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; }
2494
colorswatch overlay {
2495
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2496
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2497
colorswatch overlay:hover {
2498
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2499
colorswatch#add-color-button {
2500
border-radius: 2px 2px 0 0;
2501
color: white; }
2502
colorswatch#add-color-button:only-child {
2503
border-radius: 2px; }
2504
colorswatch#add-color-button overlay {
2505
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
2506
color: white; }
2507
colorswatch:disabled {
2508
opacity: 0.4; }
2509
colorswatch:disabled overlay {
2510
box-shadow: none; }
2511
colorswatch#editor-color-sample {
2512
border-radius: 2.5px; }
2513
colorswatch#editor-color-sample overlay {
2514
border-radius: 2px; }
2515
2516
colorchooser .popover.osd {
2517
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2518
border-radius: 2px;
2519
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2520
background-color: #FFFFFF; }
2521
colorchooser .popover.osd:backdrop {
2522
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2523
2524
/********
2525
* Misc *
2526
********/
2527
.content-view {
2528
background-color: #F5F5F5; }
2529
2530
/**********************
2531
* Window Decorations *
2532
*********************/
2533
decoration {
2534
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2535
border-radius: 2px 2px 0 0;
2536
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
2537
margin: 8px; }
2538
decoration:backdrop {
2539
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; }
2540
.fullscreen decoration, .tiled decoration {
2541
border-radius: 0; }
2542
.popup decoration {
2543
box-shadow: none; }
2544
.ssd decoration {
2545
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); }
2546
.csd.popup decoration {
2547
border-radius: 2px;
2548
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2549
tooltip.csd decoration {
2550
border-radius: 2px;
2551
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2552
messagedialog.csd decoration {
2553
border-radius: 2px; }
2554
.solid-csd decoration {
2555
margin: 4px;
2556
border-radius: 0;
2557
box-shadow: none;
2558
background-color: #F5F5F5; }
2559
2560
.view:selected, iconview:selected, .view text selection, iconview text selection,
2561
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2562
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2563
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
2564
popover.background radiobutton:selected,
2565
.menuitem.button.flat:selected, row:selected, calendar:selected {
2566
background-color: #42A5F5; }
2567
row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection,
2568
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2569
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2570
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
2571
popover.background radiobutton:selected,
2572
.menuitem.button.flat:selected, row:selected, calendar:selected {
2573
color: #FFFFFF; }
2574
row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled,
2575
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,
2576
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled,
2577
entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected,
2578
popover.background radiobutton:disabled:selected,
2579
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected {
2580
color: rgba(255, 255, 255, 0.4); }
2581
2582
.monospace {
2583
font: Monospace; }
2584
2585
/**********************
2586
* Touch Copy & Paste *
2587
*********************/
2588
cursor-handle {
2589
border-radius: 100px;
2590
background-color: #FF4081;
2591
background-image: none; }
2592
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) {
2593
padding-left: 6px;
2594
border-top-right-radius: 0; }
2595
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) {
2596
padding-right: 6px;
2597
border-top-left-radius: 0; }
2598
cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) {
2599
-GtkWidget-text-handle-width: 24;
2600
-GtkWidget-text-handle-height: 30;
2601
-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
2602
2603
.context-menu {
2604
font: initial; }
2605
2606
button.circular {
2607
border-radius: 100px;
2608
-gtk-outline-radius: 100px; }
2609
button.circular label {
2610
padding: 0; }
2611
2612
.keycap {
2613
min-width: 12px;
2614
min-height: 26px;
2615
margin-top: 2px;
2616
padding-bottom: 2px;
2617
padding-left: 8px;
2618
padding-right: 8px;
2619
border: solid 1px rgba(0, 0, 0, 0.1);
2620
border-radius: 3px;
2621
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
2622
background-color: #FFFFFF;
2623
color: rgba(0, 0, 0, 0.8);
2624
font-size: smaller; }
2625
2626
*:drop(active) {
2627
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
2628
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;
2629
caret-color: #FF4081; }
2630
2631
stackswitcher button.text-button {
2632
min-width: 100px; }
2633
2634
stackswitcher button.circular,
2635
stackswitcher button.text-button.circular {
2636
min-width: 36px;
2637
min-height: 36px;
2638
padding: 0; }
2639
2640
.floating-bar {
2641
min-height: 32px;
2642
padding: 0;
2643
border-style: solid solid none;
2644
border-width: 1px;
2645
border-color: rgba(0, 0, 0, 0.1);
2646
border-radius: 3px 3px 0 0;
2647
background-color: #FFFFFF;
2648
background-clip: padding-box;
2649
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
2650
.floating-bar.left {
2651
margin-right: 7px;
2652
border-left-style: none;
2653
border-top-left-radius: 0; }
2654
.floating-bar.right {
2655
margin-left: 7px;
2656
border-right-style: none;
2657
border-top-right-radius: 0; }
2658
.floating-bar button {
2659
min-height: 24px;
2660
min-width: 24px;
2661
margin: 4px;
2662
padding: 0; }
2663
2664
/************
2665
* Nautilus *
2666
************/
2667
.nautilus-window,
2668
.nautilus-window notebook,
2669
.nautilus-window notebook > stack {
2670
background: #FFFFFF; }
2671
2672
.nautilus-desktop-window,
2673
.nautilus-desktop-window notebook,
2674
.nautilus-desktop-window notebook > stack {
2675
background: transparent; }
2676
2677
.nautilus-desktop.nautilus-canvas-item {
2678
color: #FFFFFF;
2679
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2680
2681
.nautilus-desktop.nautilus-canvas-item:selected {
2682
text-shadow: none; }
2683
2684
@keyframes needs_attention_keyframes {
2685
0% {
2686
background-color: transparent; }
2687
50% {
2688
background-color: alpha(currentColor, 0.3); }
2689
100% {
2690
background-color: transparent; } }
2691
.nautilus-operations-button-needs-attention {
2692
color: #FF4081;
2693
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
2694
2695
.nautilus-operations-button-needs-attention-multiple {
2696
color: #FF4081;
2697
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2698
animation-iteration-count: 2; }
2699
2700
.disk-space-display.unknown {
2701
background-color: #FF6D00; }
2702
2703
.disk-space-display.used {
2704
background-color: #42A5F5; }
2705
2706
.disk-space-display.free {
2707
background-color: alpha(currentColor, 0.3);
2708
color: rgba(0, 0, 0, 0.32); }
2709
2710
.documents-entry-tag {
2711
margin: 3px -2px 3px 8px;
2712
padding: 0 8px;
2713
border-radius: 100px;
2714
box-shadow: none;
2715
background-color: #42A5F5;
2716
color: #FFFFFF; }
2717
.documents-entry-tag:hover {
2718
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2719
2720
.documents-entry-tag.button {
2721
margin: 0 -2px;
2722
padding: 4px;
2723
border-radius: 100px;
2724
box-shadow: none;
2725
color: rgba(255, 255, 255, 0.75); }
2726
.documents-entry-tag.button:hover, .documents-entry-tag.button:active {
2727
color: #FFFFFF; }
2728
2729
.nautilus-window searchbar {
2730
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2731
2732
.nautilus-window .searchbar-container {
2733
margin-top: -1px; }
2734
2735
/* GTK NAMED COLORS
2736
----------------
2737
use responsibly! */
2738
/*
2739
widget text/foreground color */
2740
@define-color theme_fg_color rgba(0, 0, 0, 0.8);
2741
/*
2742
text color for entries, views and content in general */
2743
@define-color theme_text_color rgba(0, 0, 0, 0.8);
2744
/*
2745
widget base background color */
2746
@define-color theme_bg_color #F5F5F5;
2747
/*
2748
text widgets and the like base background color */
2749
@define-color theme_base_color #FFFFFF;
2750
/*
2751
base background color of selections */
2752
@define-color theme_selected_bg_color #42A5F5;
2753
/*
2754
text/foreground color of selections */
2755
@define-color theme_selected_fg_color #FFFFFF;
2756
/*
2757
base background color of insensitive widgets */
2758
@define-color insensitive_bg_color #F5F5F5;
2759
/*
2760
text foreground color of insensitive widgets */
2761
@define-color insensitive_fg_color rgba(0, 0, 0, 0.32);
2762
/*
2763
insensitive text widgets and the like base background color */
2764
@define-color insensitive_base_color #fafafa;
2765
/*
2766
widget text/foreground color on backdrop windows */
2767
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8);
2768
/*
2769
text color for entries, views and content in general on backdrop windows */
2770
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8);
2771
/*
2772
widget base background color on backdrop windows */
2773
@define-color theme_unfocused_bg_color #F5F5F5;
2774
/*
2775
text widgets and the like base background color on backdrop windows */
2776
@define-color theme_unfocused_base_color #FFFFFF;
2777
/*
2778
base background color of selections on backdrop windows */
2779
@define-color theme_unfocused_selected_bg_color #42A5F5;
2780
/*
2781
text/foreground color of selections on backdrop windows */
2782
@define-color theme_unfocused_selected_fg_color #FFFFFF;
2783
/*
2784
widgets main borders color */
2785
@define-color borders rgba(0, 0, 0, 0.1);
2786
/*
2787
widgets main borders color on backdrop windows */
2788
@define-color unfocused_borders rgba(0, 0, 0, 0.1);
2789
/*
2790
these are pretty self explicative */
2791
@define-color warning_color #FF6D00;
2792
@define-color error_color #DD2C00;
2793
@define-color success_color #00C853;
2794
@define-color content_view_bg #FFFFFF;
2795