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