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