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