A fork of the Materia GTK theme.

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

 gtk-compact.css

View raw Download
text/plain • 121.39 kiB
ASCII text, with very long lines (417)
        
            
1
@keyframes ripple_effect {
2
to {
3
background-size: 1000% 1000%;
4
}
5
}
6
7
@keyframes header_ripple_effect {
8
from {
9
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 0%, transparent 0%);
10
}
11
to {
12
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 100%, transparent 0%);
13
}
14
}
15
16
* {
17
background-clip: padding-box;
18
-GtkToolButton-icon-spacing: 0;
19
-GtkTextView-error-underline-color: #DD2C00;
20
-GtkScrolledWindow-scrollbar-spacing: 0;
21
-GtkToolItemGroup-expander-size: 11;
22
-GtkWidget-text-handle-width: 24;
23
-GtkWidget-text-handle-height: 24;
24
-GtkDialog-button-spacing: 4;
25
-GtkDialog-action-area-border: 0;
26
outline-style: solid;
27
outline-width: 2px;
28
outline-color: transparent;
29
outline-offset: -4px;
30
-gtk-outline-radius: 2px;
31
-gtk-secondary-caret-color: #42A5F5;
32
}
33
34
switch:focus slider,
35
notebook:focus tab,
36
*:focus {
37
outline-color: alpha(currentColor, 0.3);
38
}
39
40
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: #F5F5F5;
45
color: rgba(0, 0, 0, 0.8);
46
}
47
48
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
58
.gtkstyle-fallback {
59
background-color: #F5F5F5;
60
color: rgba(0, 0, 0, 0.8);
61
}
62
63
.gtkstyle-fallback:hover {
64
background-color: #e8e8e8;
65
color: rgba(0, 0, 0, 0.8);
66
}
67
68
.gtkstyle-fallback:active {
69
background-color: gainsboro;
70
color: rgba(0, 0, 0, 0.8);
71
}
72
73
.gtkstyle-fallback:disabled {
74
background-color: #F5F5F5;
75
color: rgba(0, 0, 0, 0.32);
76
}
77
78
.gtkstyle-fallback:selected {
79
background-color: #42A5F5;
80
color: #FFFFFF;
81
}
82
83
.view {
84
background-color: #FFFFFF;
85
color: rgba(0, 0, 0, 0.8);
86
}
87
88
.view:disabled {
89
color: rgba(0, 0, 0, 0.32);
90
}
91
92
textview text {
93
background-color: #FFFFFF;
94
}
95
96
textview border {
97
background-color: #FAFAFA;
98
}
99
100
iconview, .nautilus-canvas-item, .caja-canvas-item {
101
border-radius: 2px;
102
}
103
104
.rubberband,
105
rubberband,
106
flowbox rubberband,
107
treeview.view rubberband,
108
.content-view rubberband,
109
.content-view .rubberband {
110
border: 1px solid #40C4FF;
111
background-color: rgba(64, 196, 255, 0.3);
112
}
113
114
flowbox flowboxchild {
115
padding: 4px;
116
border-radius: 2px;
117
}
118
119
.content-view .tile:selected {
120
background-color: transparent;
121
color: inherit;
122
}
123
124
label {
125
caret-color: currentColor;
126
}
127
128
label.separator {
129
color: rgba(0, 0, 0, 0.8);
130
}
131
132
label selection {
133
background-color: #42A5F5;
134
color: #FFFFFF;
135
}
136
137
label:disabled {
138
color: rgba(0, 0, 0, 0.32);
139
}
140
141
tab label:disabled,
142
button label:disabled {
143
color: inherit;
144
}
145
146
.dim-label, label.separator, .titlebar:not(headerbar) .subtitle,
147
headerbar .subtitle {
148
opacity: 0.6;
149
}
150
151
assistant .sidebar {
152
padding: 4px 0;
153
}
154
155
assistant .sidebar label {
156
min-height: 32px;
157
padding: 0 12px;
158
color: rgba(0, 0, 0, 0.48);
159
font-weight: 500;
160
}
161
162
assistant .sidebar label.highlight {
163
color: rgba(0, 0, 0, 0.8);
164
}
165
166
popover.background.touch-selection, popover.background.magnifier, popover.background.osd, .app-notification, .osd .scale-popup, .nautilus-window .floating-bar, .osd {
167
opacity: 0.9;
168
}
169
170
/*********************
171
* Spinner Animation *
172
*********************/
173
@keyframes spin {
174
to {
175
-gtk-icon-transform: rotate(1turn);
176
}
177
}
178
179
@keyframes spin_colors {
180
1% {
181
color: #66BB6A;
182
}
183
25% {
184
color: #66BB6A;
185
}
186
26% {
187
color: #42A5F5;
188
}
189
50% {
190
color: #42A5F5;
191
}
192
51% {
193
color: #FFA726;
194
}
195
75% {
196
color: #FFA726;
197
}
198
76% {
199
color: #EF5350;
200
}
201
100% {
202
color: #EF5350;
203
}
204
}
205
206
spinner {
207
background: none;
208
opacity: 0;
209
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
210
}
211
212
spinner:checked {
213
opacity: 1;
214
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
215
}
216
217
spinner:checked:disabled {
218
opacity: 0.4;
219
}
220
221
/****************
222
* Text Entries *
223
****************/
224
spinbutton:not(.vertical),
225
entry {
226
min-height: 32px;
227
padding: 0 8px;
228
border-radius: 2px;
229
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
230
border-image: none;
231
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
232
background-color: #FFFFFF;
233
color: rgba(0, 0, 0, 0.8);
234
}
235
236
spinbutton:focus:not(.vertical),
237
entry:focus {
238
border-image: none;
239
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
240
}
241
242
spinbutton:disabled:not(.vertical),
243
entry:disabled {
244
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
245
background-color: #FAFAFA;
246
color: rgba(0, 0, 0, 0.32);
247
}
248
249
spinbutton.flat:not(.vertical), notebook > stack:not(:only-child) entry:not(.search),
250
notebook > stack:not(:only-child) spinbutton:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical), entry.preferences-search, layoutpane entry.search, editortweak entry.search, #login_window entry,
251
entry.flat {
252
border-radius: 0;
253
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
254
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px;
255
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
256
background-color: transparent;
257
color: rgba(0, 0, 0, 0.8);
258
}
259
260
spinbutton.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry:focus:not(.search),
261
notebook > stack:not(:only-child) spinbutton:focus:not(.vertical), colorchooser .popover.osd spinbutton:focus:not(.vertical), entry.preferences-search:focus, layoutpane entry.search:focus, editortweak entry.search:focus, #login_window entry:focus,
262
entry.flat:focus {
263
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 100%, transparent 0%) 0 0 2/0 0 2px;
264
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
265
}
266
267
spinbutton.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry:disabled:not(.search),
268
notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), colorchooser .popover.osd spinbutton:disabled:not(.vertical), entry.preferences-search:disabled, layoutpane entry.search:disabled, editortweak entry.search:disabled, #login_window entry:disabled,
269
entry.flat:disabled {
270
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
271
background-color: transparent;
272
color: rgba(0, 0, 0, 0.32);
273
}
274
275
spinbutton:not(.vertical) image,
276
entry image {
277
color: alpha(currentColor, 0.75);
278
}
279
280
spinbutton:not(.vertical) image:hover, spinbutton:not(.vertical) image:active,
281
entry image:hover,
282
entry image:active {
283
color: currentColor;
284
}
285
286
spinbutton:not(.vertical) image:disabled,
287
entry image:disabled {
288
color: alpha(currentColor, 0.6);
289
}
290
291
spinbutton:not(.vertical) image.left,
292
entry image.left {
293
margin-left: 2px;
294
margin-right: 6px;
295
}
296
297
spinbutton:not(.vertical) image.right,
298
entry image.right {
299
margin-left: 6px;
300
margin-right: 2px;
301
}
302
303
spinbutton:not(.vertical) undershoot.left,
304
entry undershoot.left {
305
background-color: transparent;
306
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
307
padding-left: 1px;
308
background-size: 1px 12px;
309
background-repeat: repeat-y;
310
background-origin: content-box;
311
background-position: left top;
312
}
313
314
spinbutton:not(.vertical) undershoot.right,
315
entry undershoot.right {
316
background-color: transparent;
317
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
318
padding-right: 1px;
319
background-size: 1px 12px;
320
background-repeat: repeat-y;
321
background-origin: content-box;
322
background-position: right top;
323
}
324
325
spinbutton.error:not(.vertical),
326
entry.error {
327
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
328
border-image: none;
329
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
330
background-color: #DD2C00;
331
color: #FFFFFF;
332
}
333
334
spinbutton.error:focus:not(.vertical),
335
entry.error:focus {
336
border-image: none;
337
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
338
}
339
340
spinbutton.error:disabled:not(.vertical),
341
entry.error:disabled {
342
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
343
background-color: #FAFAFA;
344
color: rgba(0, 0, 0, 0.32);
345
}
346
347
spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error:not(.search),
348
notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical), entry.error.preferences-search, layoutpane entry.error.search, editortweak entry.error.search, #login_window entry.error,
349
entry.error.flat {
350
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
351
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px;
352
box-shadow: inset 0 -1px #DD2C00;
353
background-color: transparent;
354
color: rgba(0, 0, 0, 0.8);
355
}
356
357
spinbutton.error.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.error:focus:not(.search),
358
notebook > stack:not(:only-child) spinbutton.error:focus:not(.vertical), colorchooser .popover.osd spinbutton.error:focus:not(.vertical), entry.error.preferences-search:focus, layoutpane entry.error.search:focus, editortweak entry.error.search:focus, #login_window entry.error:focus,
359
entry.error.flat:focus {
360
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 100%, transparent 0%) 0 0 2/0 0 2px;
361
box-shadow: inset 0 -1px #DD2C00;
362
}
363
364
spinbutton.error.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.error:disabled:not(.search),
365
notebook > stack:not(:only-child) spinbutton.error:disabled:not(.vertical), colorchooser .popover.osd spinbutton.error:disabled:not(.vertical), entry.error.preferences-search:disabled, layoutpane entry.error.search:disabled, editortweak entry.error.search:disabled, #login_window entry.error:disabled,
366
entry.error.flat:disabled {
367
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
368
background-color: transparent;
369
color: rgba(0, 0, 0, 0.32);
370
}
371
372
spinbutton.warning:not(.vertical),
373
entry.warning {
374
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
375
border-image: none;
376
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
377
background-color: #FF6D00;
378
color: #FFFFFF;
379
}
380
381
spinbutton.warning:focus:not(.vertical),
382
entry.warning:focus {
383
border-image: none;
384
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
385
}
386
387
spinbutton.warning:disabled:not(.vertical),
388
entry.warning:disabled {
389
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
390
background-color: #FAFAFA;
391
color: rgba(0, 0, 0, 0.32);
392
}
393
394
spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning:not(.search),
395
notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical), entry.warning.preferences-search, layoutpane entry.warning.search, editortweak entry.warning.search, #login_window entry.warning,
396
entry.warning.flat {
397
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
398
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px;
399
box-shadow: inset 0 -1px #FF6D00;
400
background-color: transparent;
401
color: rgba(0, 0, 0, 0.8);
402
}
403
404
spinbutton.warning.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.warning:focus:not(.search),
405
notebook > stack:not(:only-child) spinbutton.warning:focus:not(.vertical), colorchooser .popover.osd spinbutton.warning:focus:not(.vertical), entry.warning.preferences-search:focus, layoutpane entry.warning.search:focus, editortweak entry.warning.search:focus, #login_window entry.warning:focus,
406
entry.warning.flat:focus {
407
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 100%, transparent 0%) 0 0 2/0 0 2px;
408
box-shadow: inset 0 -1px #FF6D00;
409
}
410
411
spinbutton.warning.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.warning:disabled:not(.search),
412
notebook > stack:not(:only-child) spinbutton.warning:disabled:not(.vertical), colorchooser .popover.osd spinbutton.warning:disabled:not(.vertical), entry.warning.preferences-search:disabled, layoutpane entry.warning.search:disabled, editortweak entry.warning.search:disabled, #login_window entry.warning:disabled,
413
entry.warning.flat:disabled {
414
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
415
background-color: transparent;
416
color: rgba(0, 0, 0, 0.32);
417
}
418
419
spinbutton:not(.vertical) progress,
420
entry progress {
421
margin: 2px -6px;
422
border-bottom: 2px solid #42A5F5;
423
background-color: transparent;
424
}
425
426
.linked:not(.vertical) > spinbutton.flat:not(.vertical), notebook > stack:not(:only-child) .linked:not(.vertical) > entry:not(.search),
427
notebook > stack:not(:only-child) .linked:not(.vertical) > spinbutton:not(.vertical), colorchooser .popover.osd .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry.preferences-search, layoutpane .linked:not(.vertical) > entry.search, editortweak .linked:not(.vertical) > entry.search, #login_window .linked:not(.vertical) > entry,
428
.linked.vertical > spinbutton.flat:not(.vertical), notebook > stack:not(:only-child)
429
.linked.vertical > entry:not(.search),
430
notebook > stack:not(:only-child)
431
.linked.vertical > spinbutton:not(.vertical), colorchooser .popover.osd
432
.linked.vertical > spinbutton:not(.vertical),
433
.linked.vertical > entry.preferences-search, layoutpane
434
.linked.vertical > entry.search, editortweak
435
.linked.vertical > entry.search, #login_window
436
.linked.vertical > entry, .linked:not(.vertical) >
437
entry.flat,
438
.linked.vertical >
439
entry.flat {
440
border-radius: 0;
441
}
442
443
treeview entry.flat, treeview entry {
444
min-height: 0;
445
padding: 2px;
446
border-radius: 0;
447
background-color: #FFFFFF;
448
}
449
450
treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus {
451
border-image: none;
452
box-shadow: none;
453
}
454
455
/***********
456
* Buttons *
457
***********/
458
@keyframes needs_attention {
459
from {
460
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent));
461
}
462
to {
463
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#FF4081), to(transparent));
464
}
465
}
466
467
468
button {
469
min-height: 24px;
470
min-width: 16px;
471
padding: 4px 8px;
472
border-radius: 2px;
473
font-weight: 500;
474
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-size 0.5s cubic-bezier(0, 0, 0.2, 1), background-image 1s cubic-bezier(0, 0, 0.2, 1);
475
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;
476
background-color: #FAFAFA;
477
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
478
background-repeat: no-repeat;
479
background-position: center;
480
background-size: 1000% 1000%;
481
color: rgba(0, 0, 0, 0.6);
482
}
483
484
485
button:hover {
486
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;
487
color: rgba(0, 0, 0, 0.8);
488
}
489
490
491
button:active {
492
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
493
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
494
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.15);
495
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 10%, transparent 0%);
496
background-size: 0% 0%;
497
color: rgba(0, 0, 0, 0.8);
498
}
499
500
501
button:disabled {
502
box-shadow: none;
503
background-color: alpha(currentColor, 0.3);
504
color: rgba(0, 0, 0, 0.24);
505
}
506
507
508
button:checked {
509
background-color: #42A5F5;
510
color: #FFFFFF;
511
}
512
513
514
button:checked:disabled {
515
background-color: alpha(currentColor, 0.3);
516
color: rgba(66, 165, 245, 0.4);
517
}
518
519
modelbutton.flat,
520
.menuitem.button.flat, spinbutton:not(.vertical) button, spinbutton.vertical button, popover.background.menu button,
521
popover.background button.model, notebook > header > tabs > arrow, scrollbar button, check,
522
radio, calendar.button, messagedialog.csd .dialog-action-area button, button.sidebar-button, .gedit-search-slider button, popover.messagepopover .popover-action-area button, PanelToplevel > widget > button, .lightdm-gtk-greeter button, :not(headerbar) .caja-pathbar button, .caja-pathbar :not(headerbar) button, :not(headerbar)
523
.path-bar button, layouttabbar button, .mate-panel-menu-bar #PanelApplet button:not(.flat), toolbar button, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
524
headerbar button:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button,
525
button.flat {
526
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0.5s cubic-bezier(0, 0, 0.2, 1), background-image 1s cubic-bezier(0, 0, 0.2, 1);
527
box-shadow: inset 0 0 0 9999px transparent;
528
background-color: transparent;
529
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
530
background-repeat: no-repeat;
531
background-position: center;
532
background-size: 1000% 1000%;
533
color: alpha(currentColor, 0.75);
534
}
535
536
modelbutton.flat:hover,
537
.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, popover.background.menu button:hover,
538
popover.background button.model:hover, notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover,
539
radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover, .gedit-search-slider button:hover, popover.messagepopover .popover-action-area button:hover, PanelToplevel > widget > button:hover, .lightdm-gtk-greeter button:hover, :not(headerbar) .caja-pathbar button:hover, .caja-pathbar :not(headerbar) button:hover, :not(headerbar)
540
.path-bar button:hover, layouttabbar button:hover, .mate-panel-menu-bar #PanelApplet button:hover:not(.flat), toolbar button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action),
541
headerbar button:hover:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button:hover,
542
button.flat:hover {
543
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.15);
544
color: currentColor;
545
}
546
547
modelbutton.flat:active,
548
.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, popover.background.menu button:active,
549
popover.background button.model:active, notebook > header > tabs > arrow:active, scrollbar button:active, check:active,
550
radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active, .gedit-search-slider button:active, popover.messagepopover .popover-action-area button:active, PanelToplevel > widget > button:active, .lightdm-gtk-greeter button:active, :not(headerbar) .caja-pathbar button:active, .caja-pathbar :not(headerbar) button:active, :not(headerbar)
551
.path-bar button:active, layouttabbar button:active, .mate-panel-menu-bar #PanelApplet button:active:not(.flat), toolbar button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action),
552
headerbar button:active:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button:active,
553
button.flat:active {
554
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
555
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
556
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.15);
557
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 10%, transparent 0%);
558
background-size: 0% 0%;
559
color: currentColor;
560
}
561
562
modelbutton.flat:disabled,
563
.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, popover.background.menu button:disabled,
564
popover.background button.model:disabled, notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled,
565
radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled, .gedit-search-slider button:disabled, popover.messagepopover .popover-action-area button:disabled, PanelToplevel > widget > button:disabled, .lightdm-gtk-greeter button:disabled, :not(headerbar) .caja-pathbar button:disabled, .caja-pathbar :not(headerbar) button:disabled, :not(headerbar)
566
.path-bar button:disabled, layouttabbar button:disabled, .mate-panel-menu-bar #PanelApplet button:disabled:not(.flat), toolbar button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action),
567
headerbar button:disabled:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button:disabled,
568
button.flat:disabled {
569
box-shadow: none;
570
background-color: transparent;
571
color: alpha(currentColor, 0.3);
572
}
573
574
:not(headerbar) .caja-pathbar button:checked, .caja-pathbar :not(headerbar) button:checked, :not(headerbar)
575
.path-bar button:checked, layouttabbar button:checked, .mate-panel-menu-bar #PanelApplet button:checked:not(.flat), toolbar button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action),
576
headerbar button:checked:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button:checked,
577
button.flat:checked {
578
background-color: alpha(currentColor, 0.3);
579
color: currentColor;
580
}
581
582
:not(headerbar) .caja-pathbar button:checked:disabled, .caja-pathbar :not(headerbar) button:checked:disabled, :not(headerbar)
583
.path-bar button:checked:disabled, layouttabbar button:checked:disabled, .mate-panel-menu-bar #PanelApplet button:checked:disabled:not(.flat), toolbar button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action),
584
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification button:checked:disabled,
585
button.flat:checked:disabled {
586
background-color: alpha(currentColor, 0.3);
587
color: alpha(currentColor, 0.4);
588
}
589
590
591
button.text-button {
592
padding-left: 16px;
593
padding-right: 16px;
594
}
595
596
597
button.image-button {
598
min-width: 24px;
599
padding: 4px;
600
}
601
602
603
button.text-button.image-button label:first-child {
604
margin-left: 12px;
605
}
606
607
608
button.text-button.image-button label:last-child {
609
margin-right: 12px;
610
}
611
612
613
button.text-button.image-button image:not(:only-child) {
614
margin: 0 4px;
615
}
616
617
toolbar .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action),
618
headerbar .linked > button:not(.suggested-action):not(.destructive-action), actionbar > revealer > box .linked > button:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification .linked > button, toolbar
619
.linked.vertical > button, .titlebar:not(headerbar)
620
.linked.vertical > button:not(.suggested-action):not(.destructive-action),
621
headerbar
622
.linked.vertical > button:not(.suggested-action):not(.destructive-action), actionbar > revealer > box
623
.linked.vertical > button:not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification
624
.linked.vertical > button, .linked >
625
button.flat,
626
.linked.vertical >
627
button.flat {
628
border-radius: 2px;
629
}
630
631
infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, infobar.error button:disabled, row:selected
632
button:disabled {
633
color: rgba(255, 255, 255, 0.3);
634
}
635
636
637
button.osd {
638
padding: 10px 14px;
639
}
640
641
642
button.osd.image-button {
643
padding: 10px;
644
}
645
646
647
button.osd:disabled {
648
opacity: 0;
649
}
650
651
652
button.suggested-action {
653
background-color: #FF4081;
654
color: #FFFFFF;
655
}
656
657
658
button.suggested-action:disabled {
659
box-shadow: none;
660
background-color: alpha(currentColor, 0.3);
661
color: rgba(0, 0, 0, 0.32);
662
}
663
664
665
button.suggested-action:checked {
666
background-color: #ff79a7;
667
}
668
669
670
button.suggested-action.flat {
671
background-color: transparent;
672
color: #FF4081;
673
}
674
675
676
button.suggested-action.flat:disabled {
677
box-shadow: none;
678
background-color: transparent;
679
color: alpha(currentColor, 0.4);
680
}
681
682
683
button.suggested-action.flat:checked {
684
background-color: alpha(currentColor, 0.3);
685
}
686
687
688
button.destructive-action {
689
background-color: #FF5252;
690
color: #FFFFFF;
691
}
692
693
694
button.destructive-action:disabled {
695
box-shadow: none;
696
background-color: alpha(currentColor, 0.3);
697
color: rgba(0, 0, 0, 0.32);
698
}
699
700
701
button.destructive-action:checked {
702
background-color: #ff8686;
703
}
704
705
706
button.destructive-action.flat {
707
background-color: transparent;
708
color: #FF5252;
709
}
710
711
712
button.destructive-action.flat:disabled {
713
box-shadow: none;
714
background-color: transparent;
715
color: alpha(currentColor, 0.4);
716
}
717
718
719
button.destructive-action.flat:checked {
720
background-color: alpha(currentColor, 0.3);
721
}
722
723
.stack-switcher >
724
button {
725
outline-offset: -4px;
726
}
727
728
.stack-switcher >
729
button > label {
730
padding-left: 6px;
731
padding-right: 6px;
732
}
733
734
.stack-switcher >
735
button > image {
736
padding-left: 6px;
737
padding-right: 6px;
738
padding-top: 3px;
739
padding-bottom: 3px;
740
}
741
742
.stack-switcher >
743
button.text-button {
744
padding-left: 10px;
745
padding-right: 10px;
746
}
747
748
.stack-switcher >
749
button.image-button {
750
padding-left: 2px;
751
padding-right: 2px;
752
}
753
754
.stack-switcher >
755
button.needs-attention:checked > label,
756
.stack-switcher >
757
button.needs-attention:checked > image {
758
animation: none;
759
background-image: none;
760
}
761
762
.primary-toolbar
763
button {
764
-gtk-icon-shadow: none;
765
}
766
767
768
button.image-button:not(.text-button), toolbar .linked > button.image-button:not(.text-button), .titlebar:not(headerbar) .linked > button.image-button:not(.text-button):not(.suggested-action):not(.destructive-action),
769
headerbar .linked > button.image-button:not(.text-button):not(.suggested-action):not(.destructive-action), actionbar > revealer > box .linked > button.image-button:not(.text-button):not(.suggested-action):not(.destructive-action):not(.server-list-button), .app-notification .linked > button.image-button:not(.text-button), toolbar
770
.linked.vertical > button.image-button:not(.text-button),
771
headerbar
772
.linked.vertical > button.image-button:not(.text-button):not(.suggested-action):not(.destructive-action), .app-notification
773
.linked.vertical > button.image-button:not(.text-button), .linked > button.flat.image-button:not(.text-button),
774
.linked.vertical > button.flat.image-button:not(.text-button), .inline-toolbar button:not(.text-button), check,
775
radio, button.titlebutton, .nautilus-window headerbar > revealer > button,
776
button.close,
777
button.circular {
778
border-radius: 9999px;
779
-gtk-outline-radius: 9999px;
780
}
781
782
spinbutton:not(.vertical) button, notebook > header tab button.flat, button.sidebar-button, .nautilus-window .floating-bar button, .gedit-document-panel row button.flat, .gedit-search-slider button:dir(ltr), .gedit-search-slider button:dir(rtl), .pluma-window paned.horizontal box.vertical box.horizontal button.flat {
783
min-height: 20px;
784
min-width: 20px;
785
padding: 0;
786
border-radius: 9999px;
787
-gtk-outline-radius: 9999px;
788
}
789
790
.stack-switcher >
791
button.needs-attention > label,
792
.stack-switcher >
793
button.needs-attention > image, stacksidebar row.needs-attention > label {
794
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
795
background-repeat: no-repeat;
796
background-position: right 3px;
797
background-size: 6px 6px;
798
}
799
800
.stack-switcher >
801
button.needs-attention > label:dir(rtl),
802
.stack-switcher >
803
button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) {
804
background-position: left 3px;
805
}
806
807
.linked:not(.vertical) > combobox:not(:only-child) > box > button.combo, .linked:not(.vertical) > spinbutton:not(:only-child):not(.vertical), .linked:not(.vertical) > entry:not(:only-child), .linked > button:not(:only-child) {
808
border-radius: 0;
809
-gtk-outline-radius: 2px;
810
}
811
812
.linked:not(.vertical) > combobox:not(:only-child):first-child > box > button.combo, .linked:not(.vertical) > spinbutton:not(:only-child):first-child:not(.vertical), .linked:not(.vertical) > entry:not(:only-child):first-child, .linked > button:not(:only-child):first-child, combobox.linked button:not(:only-child):nth-child(2):dir(rtl) {
813
border-radius: 2px 0 0 2px;
814
}
815
816
.linked:not(.vertical) > combobox:not(:only-child):last-child > box > button.combo, .linked:not(.vertical) > spinbutton:not(:only-child):last-child:not(.vertical), .linked:not(.vertical) > entry:not(:only-child):last-child, .linked > button:not(:only-child):last-child, combobox.linked button:not(:only-child):nth-child(2):dir(ltr) {
817
border-radius: 0 2px 2px 0;
818
}
819
820
.linked.vertical > combobox:not(:only-child) > box > button.combo, .linked.vertical > spinbutton:not(:only-child):not(.vertical), .linked.vertical > entry:not(:only-child), .linked.vertical > button:not(:only-child) {
821
border-radius: 0;
822
-gtk-outline-radius: 2px;
823
}
824
825
.linked.vertical > combobox:not(:only-child):first-child > box > button.combo, .linked.vertical > spinbutton:not(:only-child):first-child:not(.vertical), .linked.vertical > entry:not(:only-child):first-child, .linked.vertical > button:not(:only-child):first-child {
826
border-radius: 2px 2px 0 0;
827
}
828
829
.linked.vertical > combobox:not(:only-child):last-child > box > button.combo, .linked.vertical > spinbutton:not(:only-child):last-child:not(.vertical), .linked.vertical > entry:not(:only-child):last-child, .linked.vertical > button:not(:only-child):last-child {
830
border-radius: 0 0 2px 2px;
831
}
832
833
/* menu buttons */
834
modelbutton.flat,
835
.menuitem.button.flat {
836
min-height: 28px;
837
padding: 0 8px;
838
border-radius: 2px;
839
color: inherit;
840
}
841
842
modelbutton.flat check,
843
modelbutton.flat radio,
844
.menuitem.button.flat check,
845
.menuitem.button.flat radio {
846
box-shadow: none;
847
background-image: none;
848
}
849
850
modelbutton.flat check:not(:checked):not(:indeterminate),
851
modelbutton.flat radio:not(:checked):not(:indeterminate),
852
.menuitem.button.flat check:not(:checked):not(:indeterminate),
853
.menuitem.button.flat radio:not(:checked):not(:indeterminate) {
854
color: alpha(currentColor, 0.6);
855
}
856
857
modelbutton.flat check:last-child,
858
modelbutton.flat radio:last-child,
859
.menuitem.button.flat check:last-child,
860
.menuitem.button.flat radio:last-child {
861
margin-left: -8px;
862
margin-right: -16px;
863
}
864
865
modelbutton.flat check:first-child,
866
modelbutton.flat radio:first-child,
867
.menuitem.button.flat check:first-child,
868
.menuitem.button.flat radio:first-child {
869
margin-left: -16px;
870
margin-right: -8px;
871
}
872
873
modelbutton.flat arrow {
874
background: none;
875
}
876
877
modelbutton.flat arrow:hover {
878
background: none;
879
}
880
881
modelbutton.flat arrow.left {
882
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
883
}
884
885
modelbutton.flat arrow.right {
886
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
887
}
888
889
button.color {
890
min-height: 20px;
891
min-width: 20px;
892
padding: 6px;
893
}
894
895
/*********
896
* Links *
897
*********/
898
*:link, button:link,
899
button:visited, *:link:hover, button:hover:link,
900
button:hover:visited, *:link:active, button:active:link,
901
button:active:visited {
902
color: #42A5F5;
903
}
904
905
*:link:visited,
906
button:visited, *:link:visited:hover,
907
button:visited:hover, *:link:visited:active,
908
button:visited:active {
909
color: #E040FB;
910
}
911
912
infobar.info *:link, infobar.info button:link, infobar.info
913
button:visited, infobar.question *:link, infobar.question button:link, infobar.question
914
button:visited, infobar.warning *:link, infobar.warning button:link, infobar.warning
915
button:visited, infobar.error *:link, infobar.error button:link, infobar.error
916
button:visited, *:link:selected, button:selected:link,
917
button:selected:visited, .selection-mode.titlebar:not(headerbar) .subtitle:link,
918
headerbar.selection-mode .subtitle:link,
919
*:selected *:link,
920
*:selected button:link,
921
*:selected
922
button:visited {
923
color: #FFFFFF;
924
}
925
926
button:link > label,
927
button:visited > label {
928
text-decoration-line: underline;
929
}
930
931
/*****************
932
* GtkSpinButton *
933
*****************/
934
spinbutton:not(.vertical) {
935
padding: 0;
936
}
937
938
notebook > stack:not(:only-child) spinbutton:not(.vertical) entry, notebook > stack:not(:only-child) spinbutton:not(.vertical) entry:focus, notebook > stack:not(:only-child) spinbutton:not(.vertical) entry:disabled,
939
spinbutton:not(.vertical) entry {
940
min-width: 28px;
941
margin: 0;
942
border-image: none;
943
border-radius: 0;
944
box-shadow: none;
945
background-color: transparent;
946
}
947
948
spinbutton:not(.vertical) button {
949
border: solid 6px transparent;
950
}
951
952
spinbutton:not(.vertical) button.up:dir(ltr), spinbutton:not(.vertical) button.down:dir(rtl) {
953
margin-left: -3px;
954
}
955
956
spinbutton:not(.vertical) button.up:dir(rtl), spinbutton:not(.vertical) button.down:dir(ltr) {
957
margin-right: -3px;
958
}
959
960
spinbutton.vertical:disabled {
961
color: rgba(0, 0, 0, 0.32);
962
}
963
964
spinbutton.vertical:drop(active) {
965
box-shadow: none;
966
}
967
968
spinbutton.vertical entry {
969
min-height: 32px;
970
min-width: 44px;
971
padding: 0;
972
}
973
974
spinbutton.vertical button {
975
min-height: 32px;
976
min-width: 44px;
977
padding: 0;
978
}
979
980
spinbutton.vertical button.up {
981
border-radius: 2px 2px 0 0;
982
}
983
984
spinbutton.vertical button.down {
985
border-radius: 0 0 2px 2px;
986
}
987
988
treeview spinbutton:not(.vertical) {
989
min-height: 0;
990
border-style: none;
991
border-radius: 0;
992
}
993
994
treeview spinbutton:not(.vertical) entry {
995
min-height: 0;
996
padding: 1px 2px;
997
}
998
999
/**************
1000
* ComboBoxes *
1001
**************/
1002
combobox arrow {
1003
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1004
min-height: 16px;
1005
min-width: 16px;
1006
}
1007
1008
combobox decoration,
1009
combobox button.combo:checked {
1010
transition: none;
1011
}
1012
1013
combobox button.combo cellview:dir(ltr) {
1014
margin-left: 0px;
1015
}
1016
1017
combobox button.combo cellview:dir(rtl) {
1018
margin-right: 0px;
1019
}
1020
1021
combobox #gtk-combobox-popup-menu {
1022
padding: 2px 0;
1023
}
1024
1025
combobox #gtk-combobox-popup-menu menuitem {
1026
min-height: 28px;
1027
padding: 0 8px;
1028
}
1029
1030
combobox #gtk-combobox-popup-menu > arrow.top {
1031
margin-top: -2px;
1032
}
1033
1034
combobox #gtk-combobox-popup-menu > arrow.bottom {
1035
margin-bottom: -6px;
1036
}
1037
1038
combobox:drop(active) {
1039
box-shadow: none;
1040
}
1041
1042
notebook > stack:not(:only-child) button.combo, #login_window #user_combobox button {
1043
border-radius: 0;
1044
background-image: none;
1045
font-weight: inherit;
1046
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
1047
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px;
1048
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
1049
background-color: transparent;
1050
color: rgba(0, 0, 0, 0.8);
1051
}
1052
1053
notebook > stack:not(:only-child) button.combo:hover, #login_window #user_combobox button:hover {
1054
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
1055
}
1056
1057
notebook > stack:not(:only-child) button.combo:checked, #login_window #user_combobox button:checked {
1058
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 100%, transparent 0%) 0 0 2/0 0 2px;
1059
}
1060
1061
notebook > stack:not(:only-child) button.combo:disabled, #login_window #user_combobox button:disabled {
1062
color: rgba(0, 0, 0, 0.32);
1063
}
1064
1065
/************
1066
* Toolbars *
1067
************/
1068
toolbar {
1069
-GtkWidget-window-dragging: true;
1070
padding: 3px;
1071
background-color: #F5F5F5;
1072
}
1073
1074
.osd toolbar {
1075
background-color: transparent;
1076
}
1077
1078
toolbar.osd, .app-notification, frame.documents-dropdown {
1079
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1080
padding: 6px;
1081
border-radius: 2px;
1082
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.4);
1083
background-color: #FFFFFF;
1084
}
1085
1086
toolbar.osd:backdrop, .app-notification:backdrop, frame.documents-dropdown:backdrop {
1087
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.4);
1088
}
1089
1090
toolbar.osd.left, .left.app-notification, frame.left.documents-dropdown, toolbar.osd.right, .right.app-notification, frame.right.documents-dropdown, toolbar.osd.top, .top.app-notification, frame.top.documents-dropdown, toolbar.osd.bottom, .bottom.app-notification, frame.bottom.documents-dropdown {
1091
border-radius: 0;
1092
}
1093
1094
toolbar.horizontal separator {
1095
margin: 3px;
1096
}
1097
1098
toolbar.vertical separator {
1099
margin: 3px;
1100
}
1101
1102
toolbar:not(.inline-toolbar):not(.osd) scale,
1103
toolbar:not(.inline-toolbar):not(.osd) entry,
1104
toolbar:not(.inline-toolbar):not(.osd) spinbutton,
1105
toolbar:not(.inline-toolbar):not(.osd) button {
1106
margin: 3px;
1107
}
1108
1109
toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child),
1110
toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child),
1111
toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child) {
1112
margin-left: 0;
1113
}
1114
1115
toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child),
1116
toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child),
1117
toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child) {
1118
margin-right: 0;
1119
}
1120
1121
toolbar:not(.inline-toolbar):not(.osd) switch {
1122
margin: 9px 3px;
1123
}
1124
1125
.inline-toolbar {
1126
padding: 6px;
1127
border-style: solid;
1128
border-width: 0 1px 1px;
1129
border-color: rgba(0, 0, 0, 0.1);
1130
background-color: #FAFAFA;
1131
}
1132
1133
searchbar,
1134
.location-bar {
1135
padding: 6px;
1136
border-style: solid;
1137
border-width: 0 0 1px;
1138
border-color: rgba(0, 0, 0, 0.1);
1139
background-color: #F5F5F5;
1140
background-clip: border-box;
1141
}
1142
1143
/***************
1144
* Header bars *
1145
***************/
1146
.titlebar:not(headerbar),
1147
headerbar {
1148
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
1149
min-height: 44px;
1150
padding: 0 6px;
1151
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.15);
1152
background-color: #455A64;
1153
color: #FFFFFF;
1154
}
1155
1156
.titlebar:disabled:not(headerbar) :not(button) > label,
1157
headerbar:disabled :not(button) > label {
1158
color: rgba(255, 255, 255, 0.4);
1159
}
1160
1161
.titlebar:backdrop:not(headerbar),
1162
headerbar:backdrop {
1163
color: rgba(255, 255, 255, 0.75);
1164
}
1165
1166
.titlebar:backdrop:disabled:not(headerbar) :not(button) > label,
1167
headerbar:backdrop:disabled :not(button) > label {
1168
color: rgba(255, 255, 255, 0.3);
1169
}
1170
1171
.titlebar:not(headerbar) .title,
1172
headerbar .title {
1173
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
1174
padding: 0 12px;
1175
font-weight: bold;
1176
}
1177
1178
.titlebar:not(headerbar) .subtitle,
1179
headerbar .subtitle {
1180
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
1181
padding: 0 12px;
1182
font-size: smaller;
1183
}
1184
1185
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
1186
headerbar button:not(.suggested-action):not(.destructive-action) {
1187
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px;
1188
}
1189
1190
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
1191
headerbar button:not(.suggested-action):not(.destructive-action):checked {
1192
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
1193
}
1194
1195
.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
1196
headerbar button:not(.suggested-action):not(.destructive-action):checked,
1197
headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled {
1198
background-color: transparent;
1199
}
1200
1201
.titlebar:not(headerbar) button.suggested-action:disabled, .titlebar:not(headerbar) button.destructive-action:disabled,
1202
headerbar button.suggested-action:disabled,
1203
headerbar button.destructive-action:disabled {
1204
color: alpha(currentColor, 0.4);
1205
}
1206
1207
.selection-mode.titlebar:not(headerbar),
1208
headerbar.selection-mode {
1209
transition: background-color 0.00001s 0.3s;
1210
animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
1211
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);
1212
background-color: #42A5F5;
1213
color: #FFFFFF;
1214
}
1215
1216
.selection-mode.titlebar:backdrop:not(headerbar),
1217
headerbar.selection-mode:backdrop {
1218
color: rgba(255, 255, 255, 0.75);
1219
}
1220
1221
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
1222
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
1223
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px;
1224
color: currentColor;
1225
}
1226
1227
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled,
1228
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled {
1229
color: alpha(currentColor, 0.4);
1230
}
1231
1232
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked,
1233
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked {
1234
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px;
1235
color: currentColor;
1236
}
1237
1238
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled,
1239
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled {
1240
color: alpha(currentColor, 0.4);
1241
}
1242
1243
.selection-mode.titlebar:not(headerbar) .selection-menu,
1244
headerbar.selection-mode .selection-menu {
1245
padding-left: 16px;
1246
padding-right: 16px;
1247
}
1248
1249
.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow,
1250
headerbar.selection-mode .selection-menu GtkArrow {
1251
-GtkArrow-arrow-scaling: 1;
1252
}
1253
1254
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow,
1255
headerbar.selection-mode .selection-menu .arrow {
1256
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1257
}
1258
1259
.fullscreen .titlebar:not(headerbar),
1260
.tiled .titlebar:not(headerbar),
1261
.maximized .titlebar:not(headerbar), .fullscreen
1262
headerbar,
1263
.tiled
1264
headerbar,
1265
.maximized
1266
headerbar {
1267
border-radius: 0;
1268
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1269
}
1270
1271
.default-decoration.titlebar:not(headerbar),
1272
headerbar.default-decoration {
1273
min-height: 20px;
1274
padding: 6px;
1275
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
1276
}
1277
1278
.fullscreen .default-decoration.titlebar:not(headerbar),
1279
.tiled .default-decoration.titlebar:not(headerbar),
1280
.maximized .default-decoration.titlebar:not(headerbar), .fullscreen
1281
headerbar.default-decoration,
1282
.tiled
1283
headerbar.default-decoration,
1284
.maximized
1285
headerbar.default-decoration {
1286
box-shadow: none;
1287
}
1288
1289
.default-decoration.titlebar:not(headerbar) button.titlebutton,
1290
headerbar.default-decoration button.titlebutton {
1291
min-height: 20px;
1292
min-width: 20px;
1293
margin: 0;
1294
padding: 0;
1295
}
1296
1297
.background:not(.csd) .default-decoration.titlebar:not(headerbar) button.titlebutton:active, .background:not(.csd)
1298
headerbar.default-decoration button.titlebutton:active {
1299
background-size: 1000% 1000%;
1300
}
1301
1302
headerbar entry,
1303
headerbar spinbutton,
1304
headerbar button {
1305
margin-top: 6px;
1306
margin-bottom: 6px;
1307
}
1308
1309
headerbar switch {
1310
margin-top: 12px;
1311
margin-bottom: 12px;
1312
}
1313
1314
headerbar spinbutton button {
1315
margin-top: 0;
1316
margin-bottom: 0;
1317
}
1318
1319
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1320
border-top-left-radius: 2px;
1321
border-top-right-radius: 2px;
1322
}
1323
1324
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + headerbar,
1325
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:first-child {
1326
border-top-left-radius: 2px;
1327
}
1328
1329
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:last-child {
1330
border-top-right-radius: 2px;
1331
}
1332
1333
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:first-child, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:last-child {
1334
border-top-left-radius: 2px;
1335
border-top-right-radius: 2px;
1336
}
1337
1338
window.csd > .titlebar:not(headerbar) {
1339
padding: 0;
1340
background-color: transparent;
1341
background-image: none;
1342
border-style: none;
1343
box-shadow: none;
1344
}
1345
1346
.titlebar:not(headerbar) > separator {
1347
background-color: #455A64;
1348
background-image: image(rgba(0, 0, 0, 0.1));
1349
}
1350
1351
/************
1352
* Pathbars *
1353
************/
1354
.caja-pathbar button,
1355
.path-bar button {
1356
padding-left: 4px;
1357
padding-right: 4px;
1358
}
1359
1360
.caja-pathbar button label:not(:only-child):first-child,
1361
.path-bar button label:not(:only-child):first-child {
1362
margin-left: 4px;
1363
}
1364
1365
.caja-pathbar button label:not(:only-child):last-child,
1366
.path-bar button label:not(:only-child):last-child {
1367
margin-right: 4px;
1368
}
1369
1370
.caja-pathbar button.slider-button,
1371
.path-bar button.slider-button {
1372
padding-left: 4px;
1373
padding-right: 4px;
1374
}
1375
1376
:not(headerbar) .caja-pathbar button, .caja-pathbar :not(headerbar) button, :not(headerbar)
1377
.path-bar button {
1378
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px;
1379
border-radius: 2px;
1380
}
1381
1382
:not(headerbar) .caja-pathbar button:checked, .caja-pathbar :not(headerbar) button:checked, :not(headerbar)
1383
.path-bar button:checked {
1384
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 100%, transparent 0%) 0 0 2/0 0 2px;
1385
}
1386
1387
:not(headerbar) .caja-pathbar button:checked, .caja-pathbar :not(headerbar) button:checked, :not(headerbar) .caja-pathbar button:checked:disabled, .caja-pathbar :not(headerbar) button:checked:disabled, :not(headerbar)
1388
.path-bar button:checked, :not(headerbar)
1389
.path-bar button:checked:disabled {
1390
background-color: transparent;
1391
}
1392
1393
/**************
1394
* Tree Views *
1395
**************/
1396
treeview.view {
1397
border-left-color: alpha(currentColor, 0.3);
1398
border-top-color: rgba(0, 0, 0, 0.1);
1399
}
1400
1401
* {
1402
-GtkTreeView-horizontal-separator: 4;
1403
-GtkTreeView-grid-line-width: 1;
1404
-GtkTreeView-grid-line-pattern: '';
1405
-GtkTreeView-tree-line-width: 1;
1406
-GtkTreeView-tree-line-pattern: '';
1407
-GtkTreeView-expander-size: 16;
1408
}
1409
1410
treeview.view.separator {
1411
min-height: 5px;
1412
color: rgba(0, 0, 0, 0.1);
1413
}
1414
1415
treeview.view:drop(active) {
1416
border-style: solid none;
1417
border-width: 1px;
1418
border-color: #FF4081;
1419
}
1420
1421
treeview.view:drop(active).after {
1422
border-top-style: none;
1423
}
1424
1425
treeview.view:drop(active).before {
1426
border-bottom-style: none;
1427
}
1428
1429
treeview.view.expander {
1430
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1431
-gtk-icon-transform: rotate(-90deg);
1432
color: rgba(0, 0, 0, 0.6);
1433
}
1434
1435
treeview.view.expander:dir(rtl) {
1436
-gtk-icon-transform: rotate(90deg);
1437
}
1438
1439
treeview.view.expander:checked {
1440
-gtk-icon-transform: unset;
1441
}
1442
1443
treeview.view.expander:hover, treeview.view.expander:active {
1444
color: rgba(0, 0, 0, 0.8);
1445
}
1446
1447
treeview.view.expander:disabled {
1448
color: rgba(0, 0, 0, 0.24);
1449
}
1450
1451
treeview.view.expander:selected {
1452
color: rgba(255, 255, 255, 0.75);
1453
}
1454
1455
treeview.view.expander:selected:hover, treeview.view.expander:selected:active {
1456
color: #FFFFFF;
1457
}
1458
1459
treeview.view.expander:selected:disabled {
1460
color: rgba(255, 255, 255, 0.3);
1461
}
1462
1463
treeview.view.progressbar {
1464
border-bottom: 4px solid #42A5F5;
1465
box-shadow: none;
1466
background-color: transparent;
1467
}
1468
1469
treeview.view.progressbar:selected {
1470
border-bottom-color: currentColor;
1471
}
1472
1473
treeview.view.trough {
1474
border-bottom: 4px solid rgba(66, 165, 245, 0.3);
1475
box-shadow: none;
1476
background-color: transparent;
1477
}
1478
1479
treeview.view.trough:selected {
1480
border-bottom-color: alpha(currentColor, 0.3);
1481
}
1482
1483
treeview.view header button {
1484
padding: 2px 6px;
1485
border-style: none solid solid none;
1486
border-width: 1px;
1487
border-color: rgba(0, 0, 0, 0.1);
1488
border-radius: 0;
1489
background-clip: border-box;
1490
}
1491
1492
treeview.view header button, treeview.view header button:hover, treeview.view header button:active {
1493
box-shadow: none;
1494
}
1495
1496
treeview.view header button, treeview.view header button:disabled {
1497
background-color: #FFFFFF;
1498
}
1499
1500
treeview.view header button:last-child {
1501
border-right-style: none;
1502
}
1503
1504
treeview.view button.dnd,
1505
treeview.view header.button.dnd {
1506
padding: 2px 6px;
1507
border-style: none solid solid;
1508
border-width: 1px;
1509
border-color: rgba(0, 0, 0, 0.1);
1510
border-radius: 0;
1511
box-shadow: none;
1512
background-color: #FFFFFF;
1513
background-clip: border-box;
1514
color: #42A5F5;
1515
}
1516
1517
treeview.view acceleditor > label {
1518
background-color: #42A5F5;
1519
}
1520
1521
/*********
1522
* Menus *
1523
*********/
1524
menubar,
1525
.menubar {
1526
-GtkWidget-window-dragging: true;
1527
padding: 0;
1528
background-color: #455A64;
1529
}
1530
1531
menubar > menuitem,
1532
.menubar > menuitem {
1533
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1534
min-height: 20px;
1535
padding: 4px 8px;
1536
color: rgba(255, 255, 255, 0.75);
1537
}
1538
1539
menubar > menuitem:hover,
1540
.menubar > menuitem:hover {
1541
transition: none;
1542
background-color: alpha(currentColor, 0.15);
1543
color: #FFFFFF;
1544
}
1545
1546
menubar > menuitem:disabled,
1547
.menubar > menuitem:disabled {
1548
color: rgba(255, 255, 255, 0.3);
1549
}
1550
1551
.csd.popup {
1552
border-radius: 2px;
1553
}
1554
1555
menu,
1556
.menu,
1557
.context-menu {
1558
margin: 4px 0;
1559
padding: 4px 0;
1560
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
1561
background-color: #FFFFFF;
1562
border: 1px solid rgba(0, 0, 0, 0.1);
1563
}
1564
1565
.csd menu, .csd
1566
.menu, .csd
1567
.context-menu {
1568
border: none;
1569
border-radius: 2px;
1570
}
1571
1572
menu menuitem,
1573
.menu menuitem,
1574
.context-menu menuitem {
1575
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1576
min-height: 20px;
1577
min-width: 40px;
1578
padding: 4px 8px;
1579
font: initial;
1580
text-shadow: none;
1581
}
1582
1583
menu menuitem:hover,
1584
.menu menuitem:hover,
1585
.context-menu menuitem:hover {
1586
transition: none;
1587
background-color: alpha(currentColor, 0.15);
1588
}
1589
1590
menu menuitem:disabled,
1591
.menu menuitem:disabled,
1592
.context-menu menuitem:disabled {
1593
color: rgba(0, 0, 0, 0.32);
1594
}
1595
1596
menu menuitem arrow,
1597
.menu menuitem arrow,
1598
.context-menu menuitem arrow {
1599
min-height: 16px;
1600
min-width: 16px;
1601
}
1602
1603
menu menuitem arrow:dir(ltr),
1604
.menu menuitem arrow:dir(ltr),
1605
.context-menu menuitem arrow:dir(ltr) {
1606
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1607
margin-left: 8px;
1608
}
1609
1610
menu menuitem arrow:dir(rtl),
1611
.menu menuitem arrow:dir(rtl),
1612
.context-menu menuitem arrow:dir(rtl) {
1613
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1614
margin-right: 8px;
1615
}
1616
1617
menu menuitem label:dir(rtl), menu menuitem label:dir(ltr),
1618
.menu menuitem label:dir(rtl),
1619
.menu menuitem label:dir(ltr),
1620
.context-menu menuitem label:dir(rtl),
1621
.context-menu menuitem label:dir(ltr) {
1622
color: inherit;
1623
}
1624
1625
menu > arrow,
1626
.menu > arrow,
1627
.context-menu > arrow {
1628
min-height: 16px;
1629
min-width: 16px;
1630
padding: 4px;
1631
background-color: #FFFFFF;
1632
color: rgba(0, 0, 0, 0.6);
1633
}
1634
1635
menu > arrow.top,
1636
.menu > arrow.top,
1637
.context-menu > arrow.top {
1638
margin-top: -4px;
1639
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1640
border-radius: 2px 2px 0 0;
1641
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
1642
}
1643
1644
menu > arrow.bottom,
1645
.menu > arrow.bottom,
1646
.context-menu > arrow.bottom {
1647
margin-bottom: -12px;
1648
border-top: 1px solid rgba(0, 0, 0, 0.1);
1649
border-radius: 0 0 2px 2px;
1650
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1651
}
1652
1653
menu > arrow:hover,
1654
.menu > arrow:hover,
1655
.context-menu > arrow:hover {
1656
background-image: image(alpha(currentColor, 0.15));
1657
color: rgba(0, 0, 0, 0.8);
1658
}
1659
1660
menu > arrow:disabled,
1661
.menu > arrow:disabled,
1662
.context-menu > arrow:disabled {
1663
border-color: transparent;
1664
background-color: transparent;
1665
color: transparent;
1666
}
1667
1668
menu separator,
1669
.menu separator,
1670
.context-menu separator {
1671
margin: 4px 0;
1672
}
1673
1674
menuitem accelerator {
1675
color: alpha(currentColor, 0.6);
1676
}
1677
1678
.popup:not(.csd) menu menuitem {
1679
color: #333333;
1680
}
1681
1682
.popup:not(.csd) menu menuitem:hover {
1683
background-color: #e0e0e0;
1684
}
1685
1686
.popup:not(.csd) menu menuitem:disabled {
1687
color: #adadad;
1688
}
1689
1690
.popup:not(.csd) menu accelerator {
1691
color: #858585;
1692
}
1693
1694
/************
1695
* Popovers *
1696
************/
1697
popover.background {
1698
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1699
padding: 2px;
1700
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1701
background-color: #FAFAFA;
1702
}
1703
1704
popover.background:backdrop {
1705
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1706
}
1707
1708
popover.background, .csd popover.background {
1709
border-style: solid;
1710
border-width: 1px;
1711
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1712
border-radius: 3px;
1713
}
1714
1715
popover.background > stack {
1716
margin: -4px;
1717
}
1718
1719
popover.background > toolbar {
1720
margin: -2px;
1721
}
1722
1723
popover.background > list,
1724
popover.background > .view,
1725
popover.background > toolbar {
1726
border-style: none;
1727
box-shadow: none;
1728
background-color: transparent;
1729
}
1730
1731
popover.background.menu button,
1732
popover.background button.model {
1733
min-height: 32px;
1734
padding: 0 8px;
1735
border-radius: 2px;
1736
}
1737
1738
popover.background separator {
1739
margin: 4px 0;
1740
}
1741
1742
popover.background list separator {
1743
margin: 0;
1744
}
1745
1746
/*************
1747
* Notebooks *
1748
*************/
1749
notebook > header {
1750
border-width: 1px;
1751
border-color: rgba(0, 0, 0, 0.1);
1752
background-color: #F5F5F5;
1753
background-clip: border-box;
1754
}
1755
1756
notebook > header.top {
1757
border-bottom-style: solid;
1758
}
1759
1760
notebook > header.top > tabs {
1761
margin-bottom: -1px;
1762
}
1763
1764
notebook > header.top > tabs > tab:hover {
1765
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
1766
}
1767
1768
notebook > header.top > tabs > tab:checked {
1769
box-shadow: inset 0 -2px #42A5F5;
1770
}
1771
1772
notebook > header.bottom {
1773
border-top-style: solid;
1774
}
1775
1776
notebook > header.bottom > tabs {
1777
margin-top: -1px;
1778
}
1779
1780
notebook > header.bottom > tabs > tab:hover {
1781
box-shadow: inset 0 2px alpha(currentColor, 0.3);
1782
}
1783
1784
notebook > header.bottom > tabs > tab:checked {
1785
box-shadow: inset 0 2px #42A5F5;
1786
}
1787
1788
notebook > header.left {
1789
border-right-style: solid;
1790
}
1791
1792
notebook > header.left > tabs {
1793
margin-right: -1px;
1794
}
1795
1796
notebook > header.left > tabs > tab:hover {
1797
box-shadow: inset -2px 0 alpha(currentColor, 0.3);
1798
}
1799
1800
notebook > header.left > tabs > tab:checked {
1801
box-shadow: inset -2px 0 #42A5F5;
1802
}
1803
1804
notebook > header.right {
1805
border-left-style: solid;
1806
}
1807
1808
notebook > header.right > tabs {
1809
margin-left: -1px;
1810
}
1811
1812
notebook > header.right > tabs > tab:hover {
1813
box-shadow: inset 2px 0 alpha(currentColor, 0.3);
1814
}
1815
1816
notebook > header.right > tabs > tab:checked {
1817
box-shadow: inset 2px 0 #42A5F5;
1818
}
1819
1820
notebook > header.top > tabs > arrow {
1821
border-top-style: none;
1822
}
1823
1824
notebook > header.bottom > tabs > arrow {
1825
border-bottom-style: none;
1826
}
1827
1828
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
1829
padding-left: 4px;
1830
padding-right: 4px;
1831
}
1832
1833
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
1834
margin-left: -8px;
1835
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
1836
}
1837
1838
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
1839
margin-right: -8px;
1840
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1841
}
1842
1843
notebook > header.left > tabs > arrow {
1844
border-left-style: none;
1845
}
1846
1847
notebook > header.right > tabs > arrow {
1848
border-right-style: none;
1849
}
1850
1851
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
1852
padding-top: 4px;
1853
padding-bottom: 4px;
1854
}
1855
1856
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
1857
margin-top: -8px;
1858
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
1859
}
1860
1861
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
1862
margin-bottom: -8px;
1863
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1864
}
1865
1866
notebook > header > tabs > arrow {
1867
min-height: 16px;
1868
min-width: 16px;
1869
border-radius: 0;
1870
}
1871
1872
notebook > header tab {
1873
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
1874
min-height: 20px;
1875
min-width: 20px;
1876
padding: 6px 12px;
1877
outline-offset: -6px;
1878
border-width: 1px;
1879
border-color: transparent;
1880
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 10%, transparent 0%);
1881
background-repeat: no-repeat;
1882
background-position: center;
1883
background-size: 0% 0%;
1884
color: rgba(0, 0, 0, 0.6);
1885
font-weight: 500;
1886
}
1887
1888
notebook > header tab:hover {
1889
color: rgba(0, 0, 0, 0.8);
1890
}
1891
1892
notebook > header tab:hover.reorderable-page {
1893
border-color: rgba(0, 0, 0, 0.1);
1894
background-color: #FAFAFA;
1895
}
1896
1897
notebook > header tab:disabled {
1898
color: rgba(0, 0, 0, 0.24);
1899
}
1900
1901
notebook > header tab:checked {
1902
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0.3s cubic-bezier(0, 0, 0.2, 1), background-image 0.8s cubic-bezier(0, 0, 0.2, 1);
1903
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
1904
background-size: 1000% 1000%;
1905
color: rgba(0, 0, 0, 0.8);
1906
}
1907
1908
notebook > header tab:checked:disabled {
1909
color: rgba(0, 0, 0, 0.32);
1910
}
1911
1912
notebook > header tab:checked.reorderable-page {
1913
border-color: rgba(0, 0, 0, 0.1);
1914
background-color: #FFFFFF;
1915
}
1916
1917
notebook > header tab button.flat:last-child {
1918
margin-left: 6px;
1919
margin-right: -6px;
1920
}
1921
1922
notebook > header tab button.flat:first-child {
1923
margin-left: -6px;
1924
margin-right: 6px;
1925
}
1926
1927
notebook > header.top tabs, notebook > header.bottom tabs {
1928
padding-left: 8px;
1929
padding-right: 8px;
1930
}
1931
1932
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
1933
margin-left: 0;
1934
}
1935
1936
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
1937
margin-right: 0;
1938
}
1939
1940
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
1941
margin: 0 -1px;
1942
border-style: none solid;
1943
}
1944
1945
notebook > header.left tabs, notebook > header.right tabs {
1946
padding-top: 8px;
1947
padding-bottom: 8px;
1948
}
1949
1950
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
1951
margin-top: 0;
1952
}
1953
1954
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
1955
margin-bottom: 0;
1956
}
1957
1958
notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
1959
margin: -1px 0;
1960
border-style: solid none;
1961
}
1962
1963
notebook > stack:not(:only-child) {
1964
background-color: #FFFFFF;
1965
}
1966
1967
/**************
1968
* Scrollbars *
1969
**************/
1970
scrollbar {
1971
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
1972
background-color: #FFFFFF;
1973
background-clip: padding-box;
1974
}
1975
1976
* {
1977
-GtkScrollbar-has-backward-stepper: false;
1978
-GtkScrollbar-has-forward-stepper: false;
1979
}
1980
1981
scrollbar.top {
1982
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1983
}
1984
1985
scrollbar.bottom {
1986
border-top: 1px solid rgba(0, 0, 0, 0.1);
1987
}
1988
1989
scrollbar.left {
1990
border-right: 1px solid rgba(0, 0, 0, 0.1);
1991
}
1992
1993
scrollbar.right {
1994
border-left: 1px solid rgba(0, 0, 0, 0.1);
1995
}
1996
1997
scrollbar slider {
1998
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0;
1999
min-width: 8px;
2000
min-height: 8px;
2001
border: 4px solid transparent;
2002
border-radius: 9999px;
2003
background-clip: padding-box;
2004
background-color: rgba(0, 0, 0, 0.48);
2005
}
2006
2007
scrollbar slider:hover {
2008
background-color: rgba(0, 0, 0, 0.6);
2009
}
2010
2011
scrollbar slider:active {
2012
background-color: rgba(0, 0, 0, 0.8);
2013
}
2014
2015
scrollbar slider:disabled {
2016
background-color: rgba(0, 0, 0, 0.192);
2017
}
2018
2019
scrollbar.fine-tune slider {
2020
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0, min-width 0, min-height 0;
2021
min-width: 4px;
2022
min-height: 4px;
2023
}
2024
2025
scrollbar.fine-tune.horizontal slider {
2026
margin: 2px 0;
2027
}
2028
2029
scrollbar.fine-tune.vertical slider {
2030
margin: 0 2px;
2031
}
2032
2033
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
2034
border-color: transparent;
2035
background-color: transparent;
2036
}
2037
2038
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
2039
min-width: 4px;
2040
min-height: 4px;
2041
margin: 3px;
2042
border: 1px solid rgba(255, 255, 255, 0.3);
2043
}
2044
2045
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
2046
min-width: 4px;
2047
min-height: 4px;
2048
margin: 3px;
2049
border: 1px solid rgba(255, 255, 255, 0.3);
2050
border-radius: 9999px;
2051
background-color: rgba(0, 0, 0, 0.48);
2052
background-clip: padding-box;
2053
-gtk-icon-source: none;
2054
}
2055
2056
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
2057
background-color: rgba(0, 0, 0, 0.192);
2058
}
2059
2060
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
2061
min-width: 24px;
2062
}
2063
2064
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
2065
min-width: 8px;
2066
}
2067
2068
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
2069
min-height: 24px;
2070
}
2071
2072
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
2073
min-height: 8px;
2074
}
2075
2076
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
2077
background-color: rgba(255, 255, 255, 0.9);
2078
}
2079
2080
scrollbar.horizontal slider {
2081
min-width: 24px;
2082
}
2083
2084
scrollbar.vertical slider {
2085
min-height: 24px;
2086
}
2087
2088
scrollbar button {
2089
min-width: 16px;
2090
min-height: 16px;
2091
padding: 0;
2092
border-radius: 0;
2093
}
2094
2095
scrollbar.vertical button.down {
2096
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2097
}
2098
2099
scrollbar.vertical button.up {
2100
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
2101
}
2102
2103
scrollbar.horizontal button.down {
2104
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2105
}
2106
2107
scrollbar.horizontal button.up {
2108
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
2109
}
2110
2111
/**********
2112
* Switch *
2113
**********/
2114
switch {
2115
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
2116
margin: 6px 0;
2117
border: 4px solid transparent;
2118
border-radius: 9999px;
2119
background-color: alpha(currentColor, 0.3);
2120
background-clip: padding-box;
2121
font-size: 0;
2122
}
2123
2124
switch:disabled {
2125
color: alpha(currentColor, 0.4);
2126
}
2127
2128
switch:checked {
2129
background-color: rgba(255, 64, 129, 0.5);
2130
}
2131
2132
switch:checked:disabled {
2133
background-color: rgba(255, 64, 129, 0.2);
2134
color: rgba(0, 0, 0, 0.32);
2135
}
2136
2137
switch slider {
2138
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2139
border-image: none;
2140
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2141
background-color: #FFFFFF;
2142
color: rgba(0, 0, 0, 0.8);
2143
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0;
2144
min-width: 20px;
2145
min-height: 20px;
2146
margin: -4px 0 -4px -4px;
2147
border-radius: 9999px;
2148
-gtk-outline-radius: 9999px;
2149
}
2150
2151
switch:hover slider {
2152
border-image: none;
2153
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2154
}
2155
2156
switch:checked slider {
2157
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, background-image 0, background-color 0.00001s 0.3s;
2158
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1);
2159
margin: -4px -4px -4px 0;
2160
background-color: #FF4081;
2161
color: #FFFFFF;
2162
}
2163
2164
switch:disabled slider {
2165
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2166
background-color: #FAFAFA;
2167
color: rgba(0, 0, 0, 0.32);
2168
}
2169
2170
switch:checked:disabled slider {
2171
animation: none;
2172
}
2173
2174
/*************************
2175
* Check and Radio items *
2176
*************************/
2177
.view.content-view.check:not(list),
2178
.content-view .tile check:not(list) {
2179
min-height: 40px;
2180
min-width: 40px;
2181
margin: 0;
2182
padding: 0;
2183
box-shadow: none;
2184
background-color: transparent;
2185
background-image: none;
2186
-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2187
}
2188
2189
.view.content-view.check:not(list):hover, .view.content-view.check:not(list):active,
2190
.content-view .tile check:not(list):hover,
2191
.content-view .tile check:not(list):active {
2192
-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2193
}
2194
2195
.view.content-view.check:not(list),
2196
.content-view .tile check:not(list) {
2197
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
2198
}
2199
2200
.view.content-view.check:not(list):checked,
2201
.content-view .tile check:not(list):checked {
2202
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
2203
}
2204
2205
checkbutton.text-button,
2206
radiobutton.text-button {
2207
padding: 2px;
2208
outline-offset: 0;
2209
}
2210
2211
checkbutton.text-button label:not(:only-child),
2212
radiobutton.text-button label:not(:only-child) {
2213
margin: 0 4px;
2214
}
2215
2216
check,
2217
radio {
2218
min-height: 24px;
2219
min-width: 24px;
2220
margin: -10px;
2221
padding: 10px;
2222
}
2223
2224
check:checked, check:indeterminate,
2225
radio:checked,
2226
radio:indeterminate {
2227
color: #FF4081;
2228
}
2229
2230
check:checked:disabled, check:indeterminate:disabled,
2231
radio:checked:disabled,
2232
radio:indeterminate:disabled {
2233
color: rgba(255, 64, 129, 0.4);
2234
}
2235
2236
row check:not(:checked):not(:indeterminate), row
2237
radio:not(:checked):not(:indeterminate) {
2238
color: alpha(currentColor, 0.75);
2239
}
2240
2241
row check:not(:checked):not(:indeterminate):hover, row check:not(:checked):not(:indeterminate):active, row
2242
radio:not(:checked):not(:indeterminate):hover, row
2243
radio:not(:checked):not(:indeterminate):active {
2244
color: currentColor;
2245
}
2246
2247
row check:not(:checked):not(:indeterminate):disabled, row
2248
radio:not(:checked):not(:indeterminate):disabled {
2249
color: alpha(currentColor, 0.3);
2250
}
2251
2252
menu menuitem check, menu menuitem
2253
radio {
2254
transition: none;
2255
min-height: 16px;
2256
min-width: 16px;
2257
margin: 0;
2258
padding: 0;
2259
}
2260
2261
menu menuitem check:dir(ltr), menu menuitem
2262
radio:dir(ltr) {
2263
margin-right: 8px;
2264
}
2265
2266
menu menuitem check:dir(rtl), menu menuitem
2267
radio:dir(rtl) {
2268
margin-left: 8px;
2269
}
2270
2271
menu menuitem check:not(:checked):not(:indeterminate), menu menuitem
2272
radio:not(:checked):not(:indeterminate) {
2273
color: alpha(currentColor, 0.6);
2274
}
2275
2276
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
2277
radio, menu menuitem
2278
radio:hover, menu menuitem
2279
radio:disabled {
2280
box-shadow: none;
2281
}
2282
2283
2284
check {
2285
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png")));
2286
}
2287
2288
2289
check:checked {
2290
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png")));
2291
}
2292
2293
2294
check:indeterminate {
2295
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png")));
2296
}
2297
2298
2299
radio {
2300
border-image-slice: 22;
2301
border-image-width: 22px;
2302
}
2303
2304
2305
radio {
2306
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png")));
2307
}
2308
2309
2310
radio:indeterminate {
2311
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png")));
2312
}
2313
2314
2315
radio {
2316
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent));
2317
}
2318
2319
2320
radio:checked:not(:indeterminate) {
2321
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.11364, to(#FF4081), to(transparent));
2322
}
2323
2324
2325
radio:checked:not(:indeterminate):disabled {
2326
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.11364, to(rgba(255, 64, 129, 0.4)), to(transparent));
2327
}
2328
2329
window.background:not(.csd) > widget > checkbutton > check,
2330
menu menuitem check {
2331
border-radius: 2px;
2332
-gtk-outline-radius: 2px;
2333
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2334
}
2335
2336
window.background:not(.csd) > widget > checkbutton > check:checked,
2337
menu menuitem check:checked {
2338
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2339
}
2340
2341
window.background:not(.csd) > widget > checkbutton > check:indeterminate,
2342
menu menuitem check:indeterminate {
2343
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2344
}
2345
2346
window.background:not(.csd) > widget > radiobutton > radio,
2347
menu menuitem radio {
2348
border-image: none;
2349
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2350
}
2351
2352
window.background:not(.csd) > widget > radiobutton > radio:checked,
2353
menu menuitem radio:checked {
2354
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2355
}
2356
2357
window.background:not(.csd) > widget > radiobutton > radio:indeterminate,
2358
menu menuitem radio:indeterminate {
2359
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2360
}
2361
2362
check:not(:checked):active {
2363
-gtk-icon-transform: rotate(90deg);
2364
}
2365
2366
check:not(:checked):indeterminate:active,
2367
radio:not(:checked):indeterminate:active {
2368
-gtk-icon-transform: scaleX(-1);
2369
}
2370
2371
check:not(:checked),
2372
radio:not(:checked) {
2373
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0.5s cubic-bezier(0, 0, 0.2, 1), background-image 1s cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
2374
}
2375
2376
check:not(:checked):active,
2377
radio:not(:checked):active {
2378
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
2379
}
2380
2381
menu menuitem check:not(:checked), menu menuitem
2382
radio:not(:checked) {
2383
transition: none;
2384
}
2385
2386
treeview.view check,
2387
treeview.view radio {
2388
padding: 0;
2389
}
2390
2391
treeview.view check:hover,
2392
treeview.view radio:hover {
2393
box-shadow: inset 0 0 0 9999px alpha(rgba(0, 0, 0, 0.8), 0.05);
2394
}
2395
2396
treeview.view check:hover:disabled,
2397
treeview.view radio:hover:disabled {
2398
box-shadow: none;
2399
}
2400
2401
treeview.view check:hover:selected,
2402
treeview.view radio:hover:selected {
2403
box-shadow: inset 0 0 0 9999px alpha(#FFFFFF, 0.05);
2404
}
2405
2406
treeview.view check,
2407
treeview.view radio {
2408
color: rgba(0, 0, 0, 0.6);
2409
}
2410
2411
treeview.view check:hover, treeview.view check:active,
2412
treeview.view radio:hover,
2413
treeview.view radio:active {
2414
color: rgba(0, 0, 0, 0.8);
2415
}
2416
2417
treeview.view check:disabled,
2418
treeview.view radio:disabled {
2419
color: rgba(0, 0, 0, 0.24);
2420
}
2421
2422
treeview.view check:checked, treeview.view check:indeterminate,
2423
treeview.view radio:checked,
2424
treeview.view radio:indeterminate {
2425
color: #FF4081;
2426
}
2427
2428
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
2429
treeview.view radio:checked:disabled,
2430
treeview.view radio:indeterminate:disabled {
2431
color: rgba(255, 64, 129, 0.4);
2432
}
2433
2434
treeview.view check:selected,
2435
treeview.view radio:selected {
2436
color: rgba(255, 255, 255, 0.75);
2437
}
2438
2439
treeview.view check:selected:hover, treeview.view check:selected:active,
2440
treeview.view radio:selected:hover,
2441
treeview.view radio:selected:active {
2442
color: #FFFFFF;
2443
}
2444
2445
treeview.view check:selected:disabled,
2446
treeview.view radio:selected:disabled {
2447
color: rgba(255, 255, 255, 0.3);
2448
}
2449
2450
treeview.view check:selected:checked, treeview.view check:selected:indeterminate,
2451
treeview.view radio:selected:checked,
2452
treeview.view radio:selected:indeterminate {
2453
color: #FF4081;
2454
}
2455
2456
treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled,
2457
treeview.view radio:selected:checked:disabled,
2458
treeview.view radio:selected:indeterminate:disabled {
2459
color: rgba(255, 64, 129, 0.4);
2460
}
2461
2462
treeview.view radio:checked {
2463
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2464
border-image: none;
2465
}
2466
2467
/************
2468
* GtkScale *
2469
************/
2470
scale {
2471
min-height: 8px;
2472
min-width: 8px;
2473
padding: 12px;
2474
}
2475
2476
scale * {
2477
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
2478
}
2479
2480
scale slider {
2481
min-height: 24px;
2482
min-width: 24px;
2483
margin: -10px;
2484
}
2485
2486
scale trough {
2487
outline-offset: 2px;
2488
background-color: alpha(currentColor, 0.3);
2489
}
2490
2491
scale trough:disabled {
2492
color: rgba(0, 0, 0, 0.32);
2493
}
2494
2495
scale highlight {
2496
background-color: #FF4081;
2497
}
2498
2499
scale highlight:disabled {
2500
background-color: transparent;
2501
}
2502
2503
scale fill {
2504
background-color: alpha(currentColor, 0.3);
2505
}
2506
2507
scale fill:disabled {
2508
background-color: transparent;
2509
}
2510
2511
scale slider {
2512
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2513
background-repeat: no-repeat;
2514
background-position: center;
2515
background-size: calc(100% - 8px);
2516
}
2517
2518
scale slider {
2519
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
2520
}
2521
2522
scale slider:disabled {
2523
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
2524
}
2525
2526
scale slider:hover {
2527
background-size: calc(100% - 4px);
2528
}
2529
2530
scale slider:active {
2531
background-size: calc(100% - 0px);
2532
}
2533
2534
scale.fine-tune slider {
2535
background-size: calc(100% - 12px);
2536
}
2537
2538
scale value {
2539
color: alpha(currentColor, 0.6);
2540
}
2541
2542
scale marks {
2543
color: alpha(currentColor, 0.3);
2544
}
2545
2546
scale marks.top {
2547
margin-bottom: 8px;
2548
margin-top: -16px;
2549
}
2550
2551
scale marks.bottom {
2552
margin-top: 8px;
2553
margin-bottom: -16px;
2554
}
2555
2556
scale marks.top {
2557
margin-right: 8px;
2558
margin-left: -16px;
2559
}
2560
2561
scale marks.bottom {
2562
margin-left: 8px;
2563
margin-right: -16px;
2564
}
2565
2566
scale.horizontal indicator {
2567
min-height: 8px;
2568
min-width: 1px;
2569
}
2570
2571
scale.vertical indicator {
2572
min-height: 1px;
2573
min-width: 8px;
2574
}
2575
2576
scale.horizontal.marks-before:not(.marks-after) slider {
2577
min-height: 30px;
2578
min-width: 24px;
2579
margin-top: -16px;
2580
background-position: center calc(100% - 4px);
2581
}
2582
2583
scale.horizontal.marks-before:not(.marks-after) slider {
2584
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2585
}
2586
2587
scale.horizontal.marks-before:not(.marks-after) slider:disabled {
2588
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2589
}
2590
2591
scale.horizontal.marks-before:not(.marks-after) slider:hover {
2592
background-position: center calc(100% - 2px);
2593
}
2594
2595
scale.horizontal.marks-before:not(.marks-after) slider:active {
2596
background-position: center calc(100% - 0px);
2597
}
2598
2599
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
2600
background-position: center calc(100% - 6px);
2601
}
2602
2603
scale.horizontal.marks-after:not(.marks-before) slider {
2604
min-height: 30px;
2605
min-width: 24px;
2606
margin-bottom: -16px;
2607
background-position: center calc(4px);
2608
}
2609
2610
scale.horizontal.marks-after:not(.marks-before) slider {
2611
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
2612
}
2613
2614
scale.horizontal.marks-after:not(.marks-before) slider:disabled {
2615
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
2616
}
2617
2618
scale.horizontal.marks-after:not(.marks-before) slider:hover {
2619
background-position: center calc(2px);
2620
}
2621
2622
scale.horizontal.marks-after:not(.marks-before) slider:active {
2623
background-position: center calc(0px);
2624
}
2625
2626
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
2627
background-position: center calc(6px);
2628
}
2629
2630
scale.vertical.marks-before:not(.marks-after) slider {
2631
min-height: 24px;
2632
min-width: 30px;
2633
margin-left: -16px;
2634
background-position: calc(4px) center;
2635
}
2636
2637
scale.vertical.marks-before:not(.marks-after) slider {
2638
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2639
}
2640
2641
scale.vertical.marks-before:not(.marks-after) slider:disabled {
2642
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2643
}
2644
2645
scale.vertical.marks-before:not(.marks-after) slider:hover {
2646
background-position: calc(2px) center;
2647
}
2648
2649
scale.vertical.marks-before:not(.marks-after) slider:active {
2650
background-position: calc(0px) center;
2651
}
2652
2653
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
2654
background-position: calc(6px) center;
2655
}
2656
2657
scale.vertical.marks-after:not(.marks-before) slider {
2658
min-height: 24px;
2659
min-width: 30px;
2660
margin-right: -16px;
2661
background-position: calc(100% - 4px) center;
2662
}
2663
2664
scale.vertical.marks-after:not(.marks-before) slider {
2665
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2666
}
2667
2668
scale.vertical.marks-after:not(.marks-before) slider:disabled {
2669
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2670
}
2671
2672
scale.vertical.marks-after:not(.marks-before) slider:hover {
2673
background-position: calc(100% - 2px) center;
2674
}
2675
2676
scale.vertical.marks-after:not(.marks-before) slider:active {
2677
background-position: calc(100% - 0px) center;
2678
}
2679
2680
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
2681
background-position: calc(100% - 6px) center;
2682
}
2683
2684
scale.color {
2685
min-height: 0;
2686
min-width: 0;
2687
}
2688
2689
scale.color.horizontal {
2690
padding: 0 0 12px 0;
2691
}
2692
2693
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
2694
margin-bottom: -12px;
2695
margin-top: -2px;
2696
}
2697
2698
scale.color.vertical:dir(ltr) {
2699
padding: 0 0 0 12px;
2700
}
2701
2702
scale.color.vertical:dir(ltr) slider {
2703
margin-left: -12px;
2704
margin-right: -2px;
2705
}
2706
2707
scale.color.vertical:dir(rtl) {
2708
padding: 0 12px 0 0;
2709
}
2710
2711
scale.color.vertical:dir(rtl) slider {
2712
margin-right: -12px;
2713
margin-left: -2px;
2714
}
2715
2716
/*****************
2717
* Progress bars *
2718
*****************/
2719
progressbar {
2720
color: rgba(0, 0, 0, 0.48);
2721
font-size: smaller;
2722
}
2723
2724
progressbar.horizontal trough,
2725
progressbar.horizontal progress {
2726
min-height: 4px;
2727
}
2728
2729
progressbar.vertical trough,
2730
progressbar.vertical progress {
2731
min-width: 4px;
2732
}
2733
2734
progressbar trough {
2735
background-color: rgba(66, 165, 245, 0.3);
2736
}
2737
2738
progressbar progress {
2739
background-color: #42A5F5;
2740
}
2741
2742
progressbar trough.empty progress {
2743
all: unset;
2744
}
2745
2746
/*************
2747
* Level Bar *
2748
*************/
2749
levelbar block {
2750
min-width: 32px;
2751
min-height: 4px;
2752
}
2753
2754
levelbar.vertical block {
2755
min-width: 4px;
2756
min-height: 32px;
2757
}
2758
2759
levelbar trough {
2760
padding: 2px;
2761
border-radius: 2px;
2762
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2763
border-image: none;
2764
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2765
background-color: #FFFFFF;
2766
color: rgba(0, 0, 0, 0.8);
2767
}
2768
2769
levelbar trough:disabled {
2770
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2771
background-color: #FAFAFA;
2772
color: rgba(0, 0, 0, 0.32);
2773
}
2774
2775
levelbar.horizontal.discrete block {
2776
margin: 0 1px;
2777
}
2778
2779
levelbar.horizontal.discrete trough {
2780
padding: 2px 1px;
2781
}
2782
2783
levelbar.vertical.discrete block {
2784
margin: 1px 0;
2785
}
2786
2787
levelbar.vertical.discrete trough {
2788
padding: 1px 2px;
2789
}
2790
2791
levelbar block.low {
2792
background-color: #FF6D00;
2793
}
2794
2795
levelbar block.high, levelbar block:not(.empty) {
2796
background-color: #42A5F5;
2797
}
2798
2799
levelbar block.full {
2800
background-color: #00C853;
2801
}
2802
2803
levelbar block.empty {
2804
background-color: alpha(currentColor, 0.3);
2805
color: rgba(0, 0, 0, 0.32);
2806
}
2807
2808
/****************
2809
* Print dialog *
2810
*****************/
2811
printdialog paper {
2812
padding: 0;
2813
border: 1px solid rgba(0, 0, 0, 0.1);
2814
background-color: #FFFFFF;
2815
color: rgba(0, 0, 0, 0.8);
2816
}
2817
2818
printdialog .dialog-action-box {
2819
margin: 12px;
2820
}
2821
2822
/**********
2823
* Frames *
2824
**********/
2825
frame > border,
2826
.frame {
2827
margin: 0;
2828
padding: 0;
2829
border: 1px solid rgba(0, 0, 0, 0.1);
2830
border-radius: 0;
2831
box-shadow: none;
2832
}
2833
2834
frame > border.flat,
2835
.frame.flat,
2836
frame.flat > border {
2837
border-style: none;
2838
}
2839
2840
actionbar > revealer > box {
2841
padding: 6px;
2842
border-top: 1px solid rgba(0, 0, 0, 0.1);
2843
}
2844
2845
scrolledwindow viewport.frame {
2846
border-style: none;
2847
}
2848
2849
overshoot.top {
2850
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2851
background-repeat: no-repeat;
2852
background-position: center top;
2853
background-color: transparent;
2854
border: none;
2855
box-shadow: none;
2856
}
2857
2858
overshoot.bottom {
2859
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2860
background-repeat: no-repeat;
2861
background-position: center bottom;
2862
background-color: transparent;
2863
border: none;
2864
box-shadow: none;
2865
}
2866
2867
overshoot.left {
2868
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2869
background-repeat: no-repeat;
2870
background-position: left center;
2871
background-color: transparent;
2872
border: none;
2873
box-shadow: none;
2874
}
2875
2876
overshoot.right {
2877
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2878
background-repeat: no-repeat;
2879
background-position: right center;
2880
background-color: transparent;
2881
border: none;
2882
box-shadow: none;
2883
}
2884
2885
undershoot.top {
2886
background-color: transparent;
2887
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2888
padding-top: 1px;
2889
background-size: 12px 1px;
2890
background-repeat: repeat-x;
2891
background-origin: content-box;
2892
background-position: left top;
2893
}
2894
2895
undershoot.bottom {
2896
background-color: transparent;
2897
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2898
padding-bottom: 1px;
2899
background-size: 12px 1px;
2900
background-repeat: repeat-x;
2901
background-origin: content-box;
2902
background-position: left bottom;
2903
}
2904
2905
undershoot.left {
2906
background-color: transparent;
2907
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2908
padding-left: 1px;
2909
background-size: 1px 12px;
2910
background-repeat: repeat-y;
2911
background-origin: content-box;
2912
background-position: left top;
2913
}
2914
2915
undershoot.right {
2916
background-color: transparent;
2917
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2918
padding-right: 1px;
2919
background-size: 1px 12px;
2920
background-repeat: repeat-y;
2921
background-origin: content-box;
2922
background-position: right top;
2923
}
2924
2925
junction {
2926
border-style: solid none none solid;
2927
border-width: 1px;
2928
border-color: rgba(0, 0, 0, 0.1);
2929
background-color: #FFFFFF;
2930
}
2931
2932
junction:dir(rtl) {
2933
border-style: solid solid none none;
2934
}
2935
2936
separator {
2937
min-width: 1px;
2938
min-height: 1px;
2939
background-color: rgba(0, 0, 0, 0.1);
2940
}
2941
2942
2943
button separator, .tweak-categories separator {
2944
min-width: 0;
2945
min-height: 0;
2946
background-color: transparent;
2947
}
2948
2949
/*********
2950
* Lists *
2951
*********/
2952
list {
2953
border-color: rgba(0, 0, 0, 0.1);
2954
background-color: #FFFFFF;
2955
}
2956
2957
list row {
2958
padding: 2px;
2959
}
2960
2961
row.activatable, .view, treeview.view header button {
2962
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-size 0.5s cubic-bezier(0, 0, 0.2, 1), background-image 1s cubic-bezier(0, 0, 0.2, 1);
2963
box-shadow: inset 0 0 0 9999px transparent;
2964
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
2965
background-repeat: no-repeat;
2966
background-position: center;
2967
background-size: 1000% 1000%;
2968
}
2969
2970
row.activatable:hover, .view:hover, treeview.view header button:hover {
2971
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0, background-size 0.5s cubic-bezier(0, 0, 0.2, 1), background-image 1s cubic-bezier(0, 0, 0.2, 1);
2972
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.05);
2973
}
2974
2975
row.activatable.has-open-popup, .has-open-popup.view, treeview.view header button.has-open-popup, row.activatable:active, .view:active, treeview.view header button:active {
2976
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-size 0, background-image 0;
2977
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
2978
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.15);
2979
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 10%, transparent 0%);
2980
background-size: 0% 0%;
2981
}
2982
2983
/*********************
2984
* App Notifications *
2985
*********************/
2986
.app-notification {
2987
margin: 8px;
2988
}
2989
2990
.app-notification.frame,
2991
.app-notification border {
2992
border-style: none;
2993
}
2994
2995
/*************
2996
* Expanders *
2997
*************/
2998
expander arrow {
2999
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
3000
min-width: 16px;
3001
min-height: 16px;
3002
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
3003
-gtk-icon-transform: rotate(-90deg);
3004
color: rgba(0, 0, 0, 0.6);
3005
}
3006
3007
expander arrow:dir(rtl) {
3008
-gtk-icon-transform: rotate(90deg);
3009
}
3010
3011
expander arrow:checked {
3012
-gtk-icon-transform: unset;
3013
}
3014
3015
expander arrow:hover, expander arrow:active {
3016
color: rgba(0, 0, 0, 0.8);
3017
}
3018
3019
expander arrow:disabled {
3020
color: rgba(0, 0, 0, 0.24);
3021
}
3022
3023
expander arrow:selected {
3024
color: rgba(255, 255, 255, 0.75);
3025
}
3026
3027
expander arrow:selected:hover, expander arrow:selected:active {
3028
color: #FFFFFF;
3029
}
3030
3031
expander arrow:selected:disabled {
3032
color: rgba(255, 255, 255, 0.3);
3033
}
3034
3035
/************
3036
* Calendar *
3037
************/
3038
calendar {
3039
padding: 1px;
3040
border: 1px solid rgba(0, 0, 0, 0.1);
3041
color: rgba(0, 0, 0, 0.8);
3042
}
3043
3044
calendar:disabled {
3045
color: rgba(0, 0, 0, 0.32);
3046
}
3047
3048
calendar:selected {
3049
border-radius: 3px;
3050
}
3051
3052
calendar.header {
3053
border-style: none none solid;
3054
border-radius: 0;
3055
}
3056
3057
calendar.highlight {
3058
color: alpha(currentColor, 0.6);
3059
font-weight: 500;
3060
}
3061
3062
calendar:indeterminate {
3063
color: alpha(currentColor, 0.4);
3064
}
3065
3066
/***********
3067
* Dialogs *
3068
***********/
3069
messagedialog.background {
3070
background-color: #FAFAFA;
3071
}
3072
3073
messagedialog .titlebar {
3074
min-height: 20px;
3075
border-style: none;
3076
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
3077
background-color: #FAFAFA;
3078
color: rgba(0, 0, 0, 0.8);
3079
}
3080
3081
messagedialog .titlebar:backdrop {
3082
color: rgba(0, 0, 0, 0.6);
3083
}
3084
3085
messagedialog.csd.background {
3086
border-bottom-left-radius: 2px;
3087
border-bottom-right-radius: 2px;
3088
}
3089
3090
messagedialog.csd .dialog-action-area button {
3091
padding: 8px 16px;
3092
border-top: 1px solid rgba(0, 0, 0, 0.1);
3093
border-radius: 0;
3094
}
3095
3096
messagedialog.csd .dialog-action-area button:first-child {
3097
border-bottom-left-radius: 2px;
3098
}
3099
3100
messagedialog.csd .dialog-action-area button:last-child {
3101
border-bottom-right-radius: 2px;
3102
}
3103
3104
filechooser .dialog-action-box {
3105
border-top: 1px solid rgba(0, 0, 0, 0.1);
3106
}
3107
3108
filechooser #pathbarbox {
3109
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
3110
background-color: #F5F5F5;
3111
}
3112
3113
filechooserbutton:drop(active) {
3114
box-shadow: none;
3115
}
3116
3117
/***********
3118
* Sidebar *
3119
***********/
3120
.sidebar {
3121
border-style: none;
3122
background-color: #FAFAFA;
3123
}
3124
3125
stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
3126
border-right: 1px solid rgba(0, 0, 0, 0.1);
3127
border-left-style: none;
3128
}
3129
3130
stacksidebar.sidebar:dir(rtl) list, stacksidebar.sidebar.right list, .sidebar:dir(rtl), .sidebar.right {
3131
border-left: 1px solid rgba(0, 0, 0, 0.1);
3132
border-right-style: none;
3133
}
3134
3135
.sidebar list {
3136
background-color: transparent;
3137
}
3138
3139
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
3140
border-style: none;
3141
}
3142
3143
stacksidebar row {
3144
padding: 10px 4px;
3145
}
3146
3147
stacksidebar row > label {
3148
padding-left: 6px;
3149
padding-right: 6px;
3150
}
3151
3152
/****************
3153
* File chooser *
3154
****************/
3155
placessidebar > viewport.frame {
3156
border-style: none;
3157
}
3158
3159
placessidebar list {
3160
padding: 1px 0 4px;
3161
}
3162
3163
placessidebar row {
3164
min-height: 32px;
3165
margin: -1px 0;
3166
padding: 0;
3167
}
3168
3169
placessidebar row > revealer {
3170
padding: 0 12px;
3171
}
3172
3173
placessidebar row:selected {
3174
color: #FFFFFF;
3175
}
3176
3177
placessidebar row:disabled {
3178
color: rgba(0, 0, 0, 0.32);
3179
}
3180
3181
placessidebar row image.sidebar-icon {
3182
opacity: 0.6;
3183
}
3184
3185
placessidebar row image.sidebar-icon:dir(ltr) {
3186
padding-right: 8px;
3187
}
3188
3189
placessidebar row image.sidebar-icon:dir(rtl) {
3190
padding-left: 8px;
3191
}
3192
3193
placessidebar row label.sidebar-label:dir(ltr) {
3194
padding-right: 2px;
3195
}
3196
3197
placessidebar row label.sidebar-label:dir(rtl) {
3198
padding-left: 2px;
3199
}
3200
3201
placessidebar row.sidebar-placeholder-row {
3202
min-height: 2px;
3203
padding: 0 8px;
3204
background-image: image(#FF4081);
3205
background-clip: content-box;
3206
}
3207
3208
placessidebar row.sidebar-new-bookmark-row {
3209
color: #FF4081;
3210
}
3211
3212
placessidebar row:drop(active):not(:disabled) {
3213
box-shadow: inset 0 0 0 2px #FF4081;
3214
}
3215
3216
placesview .server-list-button > image {
3217
-gtk-icon-transform: rotate(0turn);
3218
}
3219
3220
placesview .server-list-button:checked > image {
3221
-gtk-icon-transform: rotate(-0.5turn);
3222
}
3223
3224
placesview > actionbar > revealer > box > label {
3225
padding-left: 8px;
3226
padding-right: 8px;
3227
}
3228
3229
/*********
3230
* Paned *
3231
*********/
3232
paned > separator {
3233
min-width: 1px;
3234
min-height: 1px;
3235
-gtk-icon-source: none;
3236
border-style: none;
3237
background-color: transparent;
3238
background-image: image(rgba(0, 0, 0, 0.1));
3239
background-size: 1px 1px;
3240
background-clip: content-box;
3241
}
3242
3243
paned > separator.wide {
3244
min-width: 6px;
3245
min-height: 6px;
3246
background-color: #F5F5F5;
3247
background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1));
3248
background-size: 1px 1px, 1px 1px;
3249
}
3250
3251
paned.horizontal > separator {
3252
background-repeat: repeat-y;
3253
}
3254
3255
paned.horizontal > separator:dir(ltr) {
3256
margin: 0 -8px 0 0;
3257
padding: 0 8px 0 0;
3258
background-position: left;
3259
}
3260
3261
paned.horizontal > separator:dir(rtl) {
3262
margin: 0 0 0 -8px;
3263
padding: 0 0 0 8px;
3264
background-position: right;
3265
}
3266
3267
paned.horizontal > separator.wide {
3268
margin: 0;
3269
padding: 0;
3270
background-repeat: repeat-y, repeat-y;
3271
background-position: left, right;
3272
}
3273
3274
paned.vertical > separator {
3275
margin: 0 0 -8px 0;
3276
padding: 0 0 8px 0;
3277
background-repeat: repeat-x;
3278
background-position: top;
3279
}
3280
3281
paned.vertical > separator.wide {
3282
margin: 0;
3283
padding: 0;
3284
background-repeat: repeat-x, repeat-x;
3285
background-position: bottom, top;
3286
}
3287
3288
/**************
3289
* GtkInfoBar *
3290
**************/
3291
infobar {
3292
border-style: none;
3293
}
3294
3295
infobar.info {
3296
background-color: #66BB6A;
3297
}
3298
3299
infobar.question {
3300
background-color: #42A5F5;
3301
}
3302
3303
infobar.warning {
3304
background-color: #FFA726;
3305
}
3306
3307
infobar.error {
3308
background-color: #EF5350;
3309
}
3310
3311
infobar.info > label, infobar.info, infobar.question > label, infobar.question, infobar.warning > label, infobar.warning, infobar.error > label, infobar.error {
3312
color: #FFFFFF;
3313
}
3314
3315
/************
3316
* Tooltips *
3317
************/
3318
tooltip {
3319
border-radius: 2px;
3320
box-shadow: none;
3321
}
3322
3323
tooltip.background {
3324
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
3325
background-color: rgba(255, 255, 255, 0.9);
3326
}
3327
3328
tooltip:not(.csd):not(.unity-csd) {
3329
border: 1px solid rgba(0, 0, 0, 0.1);
3330
border-radius: 3px;
3331
background-clip: padding-box;
3332
}
3333
3334
tooltip decoration {
3335
background-color: transparent;
3336
}
3337
3338
tooltip label {
3339
min-height: 20px;
3340
padding: 0 2px;
3341
}
3342
3343
/*****************
3344
* Color Chooser *
3345
*****************/
3346
colorswatch.top {
3347
border-top-left-radius: 2.5px;
3348
border-top-right-radius: 2.5px;
3349
}
3350
3351
colorswatch.top overlay {
3352
border-top-left-radius: 2px;
3353
border-top-right-radius: 2px;
3354
}
3355
3356
colorswatch.bottom {
3357
border-bottom-left-radius: 2.5px;
3358
border-bottom-right-radius: 2.5px;
3359
}
3360
3361
colorswatch.bottom overlay {
3362
border-bottom-left-radius: 2px;
3363
border-bottom-right-radius: 2px;
3364
}
3365
3366
colorswatch.left, colorswatch:first-child:not(.top) {
3367
border-top-left-radius: 2.5px;
3368
border-bottom-left-radius: 2.5px;
3369
}
3370
3371
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
3372
border-top-left-radius: 2px;
3373
border-bottom-left-radius: 2px;
3374
}
3375
3376
colorswatch.right, colorswatch:last-child:not(.bottom) {
3377
border-top-right-radius: 2.5px;
3378
border-bottom-right-radius: 2.5px;
3379
}
3380
3381
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
3382
border-top-right-radius: 2px;
3383
border-bottom-right-radius: 2px;
3384
}
3385
3386
colorswatch.dark overlay {
3387
color: #FFFFFF;
3388
}
3389
3390
colorswatch.light overlay {
3391
color: rgba(0, 0, 0, 0.8);
3392
}
3393
3394
colorswatch.dark {
3395
color: #FFFFFF;
3396
}
3397
3398
colorswatch.light {
3399
color: rgba(0, 0, 0, 0.8);
3400
}
3401
3402
colorswatch:drop(active) {
3403
box-shadow: none;
3404
}
3405
3406
colorswatch:drop(active).light overlay {
3407
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;
3408
}
3409
3410
colorswatch:drop(active).dark overlay {
3411
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;
3412
}
3413
3414
colorswatch overlay {
3415
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
3416
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3417
}
3418
3419
colorswatch overlay:hover {
3420
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
3421
}
3422
3423
colorswatch#add-color-button {
3424
border-radius: 2px 2px 0 0;
3425
color: #FFFFFF;
3426
}
3427
3428
colorswatch#add-color-button:only-child {
3429
border-radius: 2px;
3430
}
3431
3432
colorswatch#add-color-button overlay {
3433
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
3434
color: #FFFFFF;
3435
}
3436
3437
colorswatch:disabled {
3438
opacity: 0.4;
3439
}
3440
3441
colorswatch:disabled overlay {
3442
box-shadow: none;
3443
}
3444
3445
colorswatch#editor-color-sample {
3446
border-radius: 2.5px;
3447
}
3448
3449
colorswatch#editor-color-sample overlay {
3450
border-radius: 2px;
3451
}
3452
3453
colorchooser .popover.osd {
3454
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
3455
border-radius: 2px;
3456
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.4);
3457
background-color: #FFFFFF;
3458
}
3459
3460
colorchooser .popover.osd:backdrop {
3461
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.4);
3462
}
3463
3464
/********
3465
* Misc *
3466
********/
3467
.content-view {
3468
background-color: #F5F5F5;
3469
}
3470
3471
/**********************
3472
* Window Decorations *
3473
**********************/
3474
decoration {
3475
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
3476
border-radius: 2px 2px 0 0;
3477
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
3478
margin: 8px;
3479
}
3480
3481
decoration:backdrop {
3482
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent;
3483
}
3484
3485
.maximized decoration,
3486
.fullscreen decoration,
3487
.tiled decoration {
3488
border-radius: 0;
3489
}
3490
3491
.popup decoration {
3492
box-shadow: none;
3493
}
3494
3495
.ssd decoration {
3496
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
3497
}
3498
3499
.csd.popup decoration {
3500
border-radius: 2px;
3501
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
3502
}
3503
3504
tooltip.csd decoration {
3505
border-radius: 2px;
3506
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
3507
}
3508
3509
messagedialog.csd decoration {
3510
border-radius: 2px;
3511
}
3512
3513
.solid-csd decoration {
3514
margin: 0;
3515
border-radius: 0;
3516
box-shadow: none;
3517
background-color: #455A64;
3518
}
3519
3520
.view selection, .view:selected, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection,
3521
entry selection, modelbutton.flat:selected,
3522
.menuitem.button.flat:selected, popover.background.menu button:checked,
3523
popover.background button.model:checked, row:selected, calendar:selected, text:selected {
3524
background-color: #42A5F5;
3525
}
3526
3527
row:selected label, label:selected, .view selection, .view:selected, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection,
3528
entry selection, modelbutton.flat:selected,
3529
.menuitem.button.flat:selected, popover.background.menu button:checked,
3530
popover.background button.model:checked, row:selected, calendar:selected, text:selected {
3531
color: #FFFFFF;
3532
}
3533
3534
row:selected label:disabled, label:disabled:selected, .view selection:disabled, .view:disabled:selected, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled,
3535
entry selection:disabled, modelbutton.flat:disabled:selected,
3536
.menuitem.button.flat:disabled:selected, popover.background.menu button:disabled:checked,
3537
popover.background button.model:disabled:checked, row:disabled:selected, calendar:disabled:selected, text:disabled:selected {
3538
color: rgba(255, 255, 255, 0.4);
3539
}
3540
3541
.monospace {
3542
font-family: monospace;
3543
}
3544
3545
/**********************
3546
* Touch Copy & Paste *
3547
**********************/
3548
cursor-handle {
3549
border-radius: 9999px;
3550
background-color: #FF4081;
3551
background-image: none;
3552
}
3553
3554
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) {
3555
padding-left: 6px;
3556
border-top-right-radius: 0;
3557
}
3558
3559
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) {
3560
padding-right: 6px;
3561
border-top-left-radius: 0;
3562
}
3563
3564
cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) {
3565
-GtkWidget-text-handle-width: 24;
3566
-GtkWidget-text-handle-height: 30;
3567
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
3568
}
3569
3570
.context-menu {
3571
font: initial;
3572
}
3573
3574
.keycap {
3575
min-width: 12px;
3576
min-height: 26px;
3577
margin-top: 2px;
3578
padding-bottom: 2px;
3579
padding-left: 8px;
3580
padding-right: 8px;
3581
border: solid 1px rgba(0, 0, 0, 0.1);
3582
border-radius: 3px;
3583
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
3584
background-color: #FFFFFF;
3585
color: rgba(0, 0, 0, 0.8);
3586
font-size: smaller;
3587
}
3588
3589
:not(decoration):not(window):drop(active) {
3590
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
3591
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;
3592
caret-color: #FF4081;
3593
}
3594
3595
stackswitcher button.text-button {
3596
min-width: 100px;
3597
}
3598
3599
stackswitcher button.circular,
3600
stackswitcher button.text-button.circular {
3601
min-width: 32px;
3602
min-height: 32px;
3603
padding: 0;
3604
}
3605
3606
/************
3607
* Nautilus *
3608
************/
3609
.nautilus-window,
3610
.nautilus-window notebook,
3611
.nautilus-window notebook > stack {
3612
background-color: #FFFFFF;
3613
}
3614
3615
.nautilus-desktop.nautilus-canvas-item:not(:selected), .caja-desktop.caja-canvas-item:not(:selected) {
3616
color: #FFFFFF;
3617
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3618
}
3619
3620
@keyframes needs_attention_keyframes {
3621
to {
3622
background-color: alpha(currentColor, 0.3);
3623
}
3624
}
3625
3626
.nautilus-operations-button-needs-attention {
3627
animation: needs_attention_keyframes 0.3s cubic-bezier(0.4, 0, 0.2, 1) 2 alternate;
3628
}
3629
3630
.nautilus-operations-button-needs-attention-multiple {
3631
animation: needs_attention_keyframes 0.3s cubic-bezier(0.4, 0, 0.2, 1) 4 alternate;
3632
}
3633
3634
.nautilus-window .floating-bar {
3635
min-height: 32px;
3636
padding: 0;
3637
border-style: solid solid none;
3638
border-width: 1px;
3639
border-color: rgba(0, 0, 0, 0.1);
3640
border-radius: 3px 3px 0 0;
3641
background-color: #FFFFFF;
3642
background-clip: padding-box;
3643
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), border-width 0;
3644
}
3645
3646
.nautilus-window .floating-bar.bottom.left {
3647
margin-right: 7px;
3648
border-left-style: none;
3649
border-top-left-radius: 0;
3650
}
3651
3652
.nautilus-window .floating-bar.bottom.right {
3653
margin-left: 7px;
3654
border-right-style: none;
3655
border-top-right-radius: 0;
3656
}
3657
3658
.nautilus-window .floating-bar button {
3659
margin: 6px;
3660
}
3661
3662
.disk-space-display.unknown {
3663
background-color: #FF6D00;
3664
}
3665
3666
.disk-space-display.used {
3667
background-color: #42A5F5;
3668
}
3669
3670
.disk-space-display.free {
3671
background-color: alpha(currentColor, 0.3);
3672
color: rgba(0, 0, 0, 0.32);
3673
}
3674
3675
.documents-entry-tag, .photos-entry-tag {
3676
margin: 3px -2px 3px 8px;
3677
padding: 0 8px;
3678
border-radius: 9999px;
3679
box-shadow: none;
3680
background-color: #42A5F5;
3681
color: #FFFFFF;
3682
}
3683
3684
.documents-entry-tag:hover, .photos-entry-tag:hover {
3685
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3686
}
3687
3688
.documents-entry-tag.button, .button.photos-entry-tag {
3689
margin: 0 -2px;
3690
padding: 4px;
3691
border-radius: 9999px;
3692
box-shadow: none;
3693
color: rgba(255, 255, 255, 0.75);
3694
}
3695
3696
.documents-entry-tag.button:hover, .button.photos-entry-tag:hover, .documents-entry-tag.button:active, .button.photos-entry-tag:active {
3697
color: #FFFFFF;
3698
}
3699
3700
.nautilus-window searchbar {
3701
border-top: 1px solid rgba(0, 0, 0, 0.1);
3702
}
3703
3704
.nautilus-window .searchbar-container {
3705
margin-top: -1px;
3706
}
3707
3708
.conflict-row:not(:selected) {
3709
background-color: #ffd3b3;
3710
}
3711
3712
.nautilus-window flowboxchild > widget > .icon-item-background {
3713
padding: 4px;
3714
border-radius: 2px;
3715
}
3716
3717
.nautilus-window flowboxchild:selected {
3718
background-color: transparent;
3719
}
3720
3721
.nautilus-window flowboxchild:selected > widget > .icon-item-background {
3722
background-color: #42A5F5;
3723
}
3724
3725
dialog.background > box.dialog-vbox.vertical > grid.horizontal > scrolledwindow.frame {
3726
border-style: none;
3727
}
3728
3729
dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child {
3730
margin: -6px 0 0 -6px;
3731
border-top: 1px solid rgba(0, 0, 0, 0.1);
3732
}
3733
3734
dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child > label {
3735
margin: 0 8px;
3736
}
3737
3738
dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child > box > button {
3739
border-radius: 0;
3740
}
3741
3742
.nautilus-window > popover.menu:not(:last-child) {
3743
padding: 3px;
3744
}
3745
3746
.nautilus-window > popover.menu:not(:last-child) > stack > box > box > box {
3747
margin-top: -6px;
3748
}
3749
3750
.nautilus-window > popover.menu:not(:last-child) > stack > box > box > box > box {
3751
margin-bottom: -6px;
3752
}
3753
3754
.nautilus-window > popover.menu:not(:last-child) > stack > box > box > box > box.linked {
3755
margin-top: 1px;
3756
}
3757
3758
.nautilus-window > popover.menu:not(:last-child) separator {
3759
margin-bottom: -2px;
3760
}
3761
3762
.nautilus-menu-sort-heading {
3763
margin: 1px 3px;
3764
font-weight: 500;
3765
}
3766
3767
.nautilus-menu-sort-heading:disabled {
3768
color: rgba(0, 0, 0, 0.48);
3769
}
3770
3771
.nautilus-window paned > separator {
3772
background-color: #F5F5F5;
3773
}
3774
3775
/*********
3776
* gedit *
3777
*********/
3778
.open-document-selector-name-label {
3779
font-weight: bold;
3780
}
3781
3782
.open-document-selector-path-label {
3783
color: alpha(currentColor, 0.6);
3784
font-size: smaller;
3785
}
3786
3787
.gedit-document-panel {
3788
background-color: #FAFAFA;
3789
}
3790
3791
.gedit-document-panel row button.flat {
3792
margin-top: 8px;
3793
margin-bottom: 8px;
3794
}
3795
3796
.gedit-document-panel-group-row:not(:first-child) {
3797
border-top: 1px solid rgba(0, 0, 0, 0.1);
3798
}
3799
3800
.gedit-side-panel-paned statusbar {
3801
border-top: 1px solid rgba(0, 0, 0, 0.1);
3802
}
3803
3804
.gedit-search-slider {
3805
margin: 4px 4px 8px;
3806
}
3807
3808
.gedit-search-slider entry:dir(ltr), .gedit-search-slider entry:dir(rtl) {
3809
border-radius: 2px;
3810
}
3811
3812
.gedit-search-slider entry:dir(ltr) .gedit-search-entry-occurrences-tag, .gedit-search-slider entry:dir(rtl) .gedit-search-entry-occurrences-tag {
3813
all: unset;
3814
color: alpha(currentColor, 0.6);
3815
}
3816
3817
.gedit-search-slider entry:dir(ltr) {
3818
margin-right: -58px;
3819
padding-right: 58px;
3820
}
3821
3822
.gedit-search-slider entry:dir(ltr) .gedit-search-entry-occurrences-tag {
3823
margin-left: 6px;
3824
}
3825
3826
.gedit-search-slider entry:dir(ltr) image.right {
3827
margin-right: 0;
3828
}
3829
3830
.gedit-search-slider entry:dir(rtl) {
3831
margin-left: -58px;
3832
padding-left: 58px;
3833
}
3834
3835
.gedit-search-slider entry:dir(rtl) .gedit-search-entry-occurrences-tag {
3836
margin-right: 6px;
3837
}
3838
3839
.gedit-search-slider entry:dir(rtl) image.left {
3840
margin-left: 0;
3841
}
3842
3843
.gedit-search-slider entry.error ~ button {
3844
color: rgba(255, 255, 255, 0.75);
3845
}
3846
3847
.gedit-search-slider entry.error ~ button:hover, .gedit-search-slider entry.error ~ button:active {
3848
color: #FFFFFF;
3849
}
3850
3851
.gedit-search-slider entry.error ~ button:disabled {
3852
color: rgba(255, 255, 255, 0.3);
3853
}
3854
3855
.gedit-search-slider button {
3856
border: solid 6px transparent;
3857
}
3858
3859
.gedit-search-slider button:last-child:dir(ltr), .gedit-search-slider button:not(:first-child):dir(rtl) {
3860
margin-left: -3px;
3861
}
3862
3863
.gedit-search-slider button:first-child:dir(rtl), .gedit-search-slider button:not(:last-child):dir(ltr) {
3864
margin-right: -3px;
3865
}
3866
3867
frame.gedit-map-frame > border:dir(ltr) {
3868
border-style: none none none solid;
3869
}
3870
3871
frame.gedit-map-frame > border:dir(rtl) {
3872
border-style: none solid none none;
3873
}
3874
3875
/**************
3876
* Tweak Tool *
3877
**************/
3878
.tweak-categories {
3879
background-image: image(#FAFAFA);
3880
}
3881
3882
.tweak {
3883
padding: 3px;
3884
}
3885
3886
.tweak.title:hover {
3887
box-shadow: none;
3888
}
3889
3890
.tweak-group-white,
3891
.tweak-white,
3892
.tweak-white:hover {
3893
background-image: image(#FFFFFF);
3894
}
3895
3896
.tweak-startup,
3897
.tweak-startup:hover {
3898
background-image: image(#FFFFFF);
3899
}
3900
3901
.tweak-group-startup {
3902
background-image: image(#FFFFFF);
3903
border: 1px solid rgba(0, 0, 0, 0.1);
3904
}
3905
3906
/***********
3907
* Builder *
3908
***********/
3909
layouttabbar {
3910
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
3911
background-color: #F5F5F5;
3912
}
3913
3914
layouttabbar > box > button {
3915
margin: 4px 0;
3916
}
3917
3918
layouttab {
3919
margin: 0 8px;
3920
border-style: none solid;
3921
border-width: 1px;
3922
border-color: rgba(0, 0, 0, 0.1);
3923
box-shadow: inset 0 -2px #42A5F5;
3924
background-color: #FFFFFF;
3925
}
3926
3927
layouttab separator.vertical {
3928
margin: 8px 4px;
3929
}
3930
3931
layouttab button.text-button, layouttab button.image-button, layouttab button {
3932
margin-top: 8px;
3933
margin-bottom: 8px;
3934
padding: 0 4px;
3935
}
3936
3937
layout {
3938
border: 1px solid rgba(0, 0, 0, 0.1);
3939
-PnlDockBin-handle-size: 1;
3940
}
3941
3942
entry.search-missing {
3943
background-color: #DD2C00;
3944
color: #FFFFFF;
3945
}
3946
3947
window.workbench treeview.image {
3948
color: alpha(currentColor, 0.6);
3949
}
3950
3951
window.workbench treeview.image:selected {
3952
color: rgba(255, 255, 255, 0.6);
3953
}
3954
3955
popover.popover-selector list {
3956
padding: 6px;
3957
}
3958
3959
popover.popover-selector list row {
3960
border-radius: 2px;
3961
}
3962
3963
popover.popover-selector list row image:dir(ltr) {
3964
margin-right: 6px;
3965
}
3966
3967
popover.popover-selector list row image:dir(rtl) {
3968
margin-left: 6px;
3969
}
3970
3971
popover.popover-selector list row .accel:dir(ltr) {
3972
margin-left: 6px;
3973
}
3974
3975
popover.popover-selector list row .accel:dir(rtl) {
3976
margin-right: 6px;
3977
}
3978
3979
omnibar.linked:not(.vertical) entry {
3980
border-radius: 2px;
3981
}
3982
3983
omnibar:not(:hover):not(:active) entry {
3984
color: rgba(0, 0, 0, 0.6);
3985
}
3986
3987
popover.omnibar list row:not(:last-child) {
3988
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
3989
}
3990
3991
entry.preferences-search {
3992
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
3993
background-color: #FFFFFF;
3994
}
3995
3996
preferences stacksidebar.sidebar list {
3997
background-color: #FAFAFA;
3998
}
3999
4000
preferences stacksidebar.sidebar:dir(ltr) list, preferences stacksidebar.sidebar:dir(rtl) list {
4001
border-style: none;
4002
}
4003
4004
preferences stacksidebar.sidebar list separator {
4005
min-width: 0;
4006
min-height: 0;
4007
background-color: transparent;
4008
}
4009
4010
preferences > box > box:dir(ltr) {
4011
border-right: 1px solid rgba(0, 0, 0, 0.1);
4012
}
4013
4014
preferences > box > box:dir(rtl) {
4015
border-left: 1px solid rgba(0, 0, 0, 0.1);
4016
}
4017
4018
popover.messagepopover.background {
4019
padding: 0;
4020
}
4021
4022
popover.messagepopover .popover-action-area button {
4023
padding: 8px 16px;
4024
border-top: 1px solid rgba(0, 0, 0, 0.1);
4025
border-radius: 0;
4026
}
4027
4028
popover.messagepopover .popover-action-area button:first-child {
4029
border-bottom-left-radius: 2px;
4030
}
4031
4032
popover.messagepopover .popover-action-area button:last-child {
4033
border-bottom-right-radius: 2px;
4034
}
4035
4036
popover.messagepopover .popover-content-area {
4037
margin: 16px;
4038
}
4039
4040
popover.transfers list {
4041
background-color: transparent;
4042
}
4043
4044
popover.transfers list row:not(:first-child) {
4045
border-top: 1px solid rgba(0, 0, 0, 0.1);
4046
}
4047
4048
popover.transfers list row > box {
4049
padding: 10px;
4050
}
4051
4052
dockbin {
4053
border: 1px solid rgba(0, 0, 0, 0.1);
4054
-PnlDockBin-handle-size: 1;
4055
}
4056
4057
dockpaned {
4058
border: 1px solid rgba(0, 0, 0, 0.1);
4059
}
4060
4061
eggsearchbar box.search-bar {
4062
padding: 0 8px;
4063
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4064
background-color: #F5F5F5;
4065
}
4066
4067
docktabstrip {
4068
padding: 0 8px;
4069
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4070
background-color: #F5F5F5;
4071
}
4072
4073
docktab {
4074
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
4075
min-height: 20px;
4076
min-width: 20px;
4077
margin-bottom: -1px;
4078
padding: 6px 6px;
4079
outline-offset: -6px;
4080
border-width: 1px;
4081
border-color: transparent;
4082
background-image: radial-gradient(circle farthest-corner at center, #42A5F5 10%, transparent 0%);
4083
background-repeat: no-repeat;
4084
background-position: center;
4085
background-size: 0% 0%;
4086
color: rgba(0, 0, 0, 0.6);
4087
font-weight: 500;
4088
}
4089
4090
docktab:hover {
4091
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
4092
color: rgba(0, 0, 0, 0.8);
4093
}
4094
4095
docktab:checked {
4096
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-size 0.3s cubic-bezier(0, 0, 0.2, 1), background-image 0.8s cubic-bezier(0, 0, 0.2, 1);
4097
box-shadow: inset 0 -2px #42A5F5;
4098
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
4099
background-size: 1000% 1000%;
4100
color: rgba(0, 0, 0, 0.8);
4101
}
4102
4103
dockoverlayedge {
4104
background-color: #F5F5F5;
4105
}
4106
4107
dockoverlayedge docktabstrip {
4108
padding: 0;
4109
border: none;
4110
}
4111
4112
dockoverlayedge.left-edge docktab:hover {
4113
box-shadow: inset -2px 0 alpha(currentColor, 0.3);
4114
}
4115
4116
dockoverlayedge.left-edge docktab:checked {
4117
box-shadow: inset -2px 0 #42A5F5;
4118
}
4119
4120
dockoverlayedge.right-edge docktab:hover {
4121
box-shadow: inset 2px 0 alpha(currentColor, 0.3);
4122
}
4123
4124
dockoverlayedge.right-edge docktab:checked {
4125
box-shadow: inset 2px 0 #42A5F5;
4126
}
4127
4128
pillbox {
4129
background-color: #F5F5F5;
4130
border-radius: 2px;
4131
}
4132
4133
layoutpane entry.search {
4134
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
4135
background-color: #FFFFFF;
4136
}
4137
4138
editortweak entry.search {
4139
margin-bottom: -1px;
4140
box-shadow: none;
4141
}
4142
4143
.gb-search-entry-occurrences-tag {
4144
box-shadow: none;
4145
background-color: transparent;
4146
}
4147
4148
docktabstrip {
4149
min-height: 39px;
4150
}
4151
4152
window.workbench preferences preferencesgroup list entry {
4153
padding-top: 8px;
4154
padding-bottom: 8px;
4155
}
4156
4157
button.run-arrow-button {
4158
padding-left: 8px;
4159
padding-right: 8px;
4160
}
4161
4162
/**********
4163
* Photos *
4164
**********/
4165
GdMainIconView.content-view {
4166
-GdMainIconView-icon-size: 48;
4167
}
4168
4169
.documents-counter {
4170
margin: 8px;
4171
border-radius: 9999px;
4172
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
4173
background-color: #FF4081;
4174
color: #FFFFFF;
4175
font-weight: bold;
4176
}
4177
4178
.documents-scrolledwin.frame {
4179
border-style: none;
4180
}
4181
4182
.documents-scrolledwin.frame frame.content-view > border {
4183
border-style: none;
4184
}
4185
4186
.photos-fade-in {
4187
opacity: 1;
4188
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
4189
}
4190
4191
.photos-fade-out {
4192
opacity: 0;
4193
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
4194
}
4195
4196
overlay grid.horizontal > revealer > scrolledwindow.frame:dir(ltr) {
4197
border-style: none none none solid;
4198
}
4199
4200
overlay grid.horizontal > revealer > scrolledwindow.frame:dir(rtl) {
4201
border-style: none solid none none;
4202
}
4203
4204
/*********
4205
* Music *
4206
*********/
4207
.side-panel:dir(ltr) {
4208
border-style: solid;
4209
border-color: rgba(0, 0, 0, 0.1);
4210
}
4211
4212
.side-panel:dir(rtl) {
4213
border-style: solid;
4214
border-color: rgba(0, 0, 0, 0.1);
4215
}
4216
4217
.side-panel .view {
4218
background-image: image(#FAFAFA);
4219
}
4220
4221
.side-panel .view:hover {
4222
background-image: image(rgba(242, 242, 242, 0.99));
4223
}
4224
4225
.side-panel .view:selected {
4226
background-image: image(#42A5F5);
4227
}
4228
4229
.side-panel .view:selected:hover {
4230
background-image: image(#4baaf6);
4231
}
4232
4233
.songs-list:hover {
4234
background-image: image(alpha(currentColor, 0.05));
4235
}
4236
4237
frame.documents-dropdown {
4238
margin: 8px;
4239
}
4240
4241
frame.documents-dropdown > border {
4242
border: none;
4243
}
4244
4245
box.vertical > revealer > toolbar.search-bar {
4246
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4247
background-clip: border-box;
4248
}
4249
4250
box.vertical > revealer > toolbar.search-bar button > widget {
4251
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
4252
}
4253
4254
/*********
4255
* To Do *
4256
*********/
4257
taskrow {
4258
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
4259
margin: 0 -8px;
4260
}
4261
4262
taskrow:hover {
4263
transition: none;
4264
}
4265
4266
taskrow label {
4267
margin: 0 8px;
4268
}
4269
4270
taskrow image {
4271
min-width: 16px;
4272
}
4273
4274
task-list-view > box > revealer > box > button {
4275
margin: -4px;
4276
}
4277
4278
/*******
4279
* eog *
4280
*******/
4281
#eog-thumb-nav scrolledwindow {
4282
border-top: none;
4283
}
4284
4285
#eog-thumb-nav button {
4286
-gtk-outline-radius: 2px;
4287
}
4288
4289
/*************
4290
* Evolution *
4291
*************/
4292
frame.taskbar > border {
4293
border-style: solid none none;
4294
}
4295
4296
box.vertical > paned.horizontal notebook widget .frame {
4297
border-style: none;
4298
}
4299
4300
/********
4301
* gitg *
4302
********/
4303
frame.commit-frame > border {
4304
border-style: solid none none;
4305
}
4306
4307
/**************
4308
* Characters *
4309
**************/
4310
box.dialog-vbox scrolledwindow.related {
4311
border: 1px solid rgba(0, 0, 0, 0.1);
4312
}
4313
4314
list.categories {
4315
background-image: image(#FAFAFA);
4316
}
4317
4318
/**************
4319
* Calculator *
4320
**************/
4321
button.title label {
4322
min-height: 32px;
4323
}
4324
4325
/*********
4326
* Tilix *
4327
*********/
4328
overlay > revealer.left > scrolledwindow.frame,
4329
overlay > revealer.right > scrolledwindow.frame {
4330
border-style: none;
4331
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
4332
}
4333
4334
overlay > revealer.left > scrolledwindow.frame {
4335
margin-right: 32px;
4336
}
4337
4338
overlay > revealer.right > scrolledwindow.frame {
4339
margin-left: 32px;
4340
}
4341
4342
.terminix-session-sidebar,
4343
.tilix-session-sidebar {
4344
background-image: image(#FAFAFA);
4345
}
4346
4347
button.image-button.session-new-button {
4348
min-width: 28px;
4349
}
4350
4351
/***********
4352
* Eclipse *
4353
***********/
4354
window.background > box.vertical > scrolledwindow > widget toolbar {
4355
padding: 2px;
4356
}
4357
4358
window.background > box.vertical > scrolledwindow > widget toolbar separator,
4359
window.background > box.vertical > scrolledwindow > widget toolbar button {
4360
margin: 2px;
4361
}
4362
4363
window.background > box.vertical > scrolledwindow > widget toolbar button {
4364
border-radius: 2px;
4365
}
4366
4367
/***********
4368
* Firefox *
4369
***********/
4370
window.background:not(.csd) > widget > separator {
4371
color: rgba(0, 0, 0, 0.2);
4372
}
4373
4374
window.background:not(.csd) > widget > scrollbar {
4375
background-clip: border-box;
4376
}
4377
4378
window.background:not(.csd) > widget > scrollbar,
4379
window.background:not(.csd) > widget > frame > border {
4380
border-color: rgba(0, 0, 0, 0.2);
4381
}
4382
4383
window.background:not(.csd) > widget > entry,
4384
window.background:not(.csd) > widget > button > button {
4385
border: 1px solid rgba(0, 0, 0, 0.2);
4386
border-radius: 3px;
4387
box-shadow: none;
4388
}
4389
4390
window.background:not(.csd) > widget > entry {
4391
min-height: 30px;
4392
}
4393
4394
window.background:not(.csd) > widget > entry:focus {
4395
border-color: #42A5F5;
4396
}
4397
4398
window.background:not(.csd) > widget > button > button {
4399
padding: 4px 8px;
4400
background-size: auto;
4401
}
4402
4403
window.background:not(.csd) > widget > button > button:hover {
4404
background-image: image(alpha(currentColor, 0.05));
4405
}
4406
4407
window.background:not(.csd) > widget > button > button:active {
4408
background-image: image(alpha(currentColor, 0.1));
4409
}
4410
4411
window.background:not(.csd) > window > menu,
4412
window.background:not(.csd) > menu > menu {
4413
border: none;
4414
}
4415
4416
window.background:not(.csd) > widget > menubar {
4417
color: rgba(255, 255, 255, 0.75);
4418
}
4419
4420
window.background:not(.csd) > widget > menubar:hover {
4421
color: #FFFFFF;
4422
}
4423
4424
window.background:not(.csd) > widget > menubar:disabled {
4425
color: rgba(255, 255, 255, 0.3);
4426
}
4427
4428
window.background:not(.csd) > widget > frame {
4429
color: rgba(0, 0, 0, 0.2);
4430
}
4431
4432
window.background:not(.csd) > widget > checkbutton > check,
4433
window.background:not(.csd) > widget > radiobutton > radio {
4434
margin: 0;
4435
padding: 0;
4436
}
4437
4438
window.background:not(.csd) > window.background > menu > separator {
4439
color: rgba(0, 0, 0, 0.1);
4440
}
4441
4442
/***********
4443
* Synapse *
4444
***********/
4445
box.vertical > widget > widget:selected {
4446
background-color: #42A5F5;
4447
}
4448
4449
/*********
4450
* Unity *
4451
*********/
4452
UnityDecoration {
4453
-UnityDecoration-extents: 28px 0 0 0;
4454
-UnityDecoration-input-extents: 8px;
4455
-UnityDecoration-shadow-offset-x: 0;
4456
-UnityDecoration-shadow-offset-y: 3px;
4457
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
4458
-UnityDecoration-active-shadow-radius: 18px;
4459
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
4460
-UnityDecoration-inactive-shadow-radius: 6px;
4461
-UnityDecoration-glow-size: 8px;
4462
-UnityDecoration-glow-color: #42A5F5;
4463
-UnityDecoration-title-indent: 4px;
4464
-UnityDecoration-title-fade: 32px;
4465
-UnityDecoration-title-alignment: 0.0;
4466
}
4467
4468
UnityDecoration .top {
4469
padding: 0 2px;
4470
border-style: none;
4471
border-radius: 2px 2px 0 0;
4472
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
4473
background-color: #37474F;
4474
color: #FFFFFF;
4475
}
4476
4477
UnityDecoration .top:backdrop {
4478
color: rgba(255, 255, 255, 0.75);
4479
}
4480
4481
UnityDecoration .menuitem {
4482
color: alpha(currentColor, 0.75);
4483
}
4484
4485
UnityDecoration .menuitem:hover {
4486
box-shadow: inset 0 -2px currentColor;
4487
background-color: transparent;
4488
color: currentColor;
4489
}
4490
4491
.background:not(.csd) headerbar:not(.titlebar) {
4492
border-radius: 0;
4493
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
4494
}
4495
4496
.background:not(.csd) headerbar:not(.titlebar).inline-toolbar {
4497
border-style: none;
4498
}
4499
4500
UnityPanelWidget,
4501
.unity-panel {
4502
background-color: #263238;
4503
color: #FFFFFF;
4504
}
4505
4506
UnityPanelWidget:backdrop,
4507
.unity-panel:backdrop {
4508
color: rgba(255, 255, 255, 0.75);
4509
}
4510
4511
.unity-panel.menuitem,
4512
.unity-panel .menuitem {
4513
color: alpha(currentColor, 0.75);
4514
}
4515
4516
.unity-panel.menubar.menuitem:hover,
4517
.unity-panel.menubar .menuitem *:hover {
4518
box-shadow: inset 0 -2px currentColor;
4519
background-color: transparent;
4520
color: currentColor;
4521
}
4522
4523
.menu IdoPlaybackMenuItem.menuitem:active {
4524
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
4525
animation: spin 1s linear infinite;
4526
color: #42A5F5;
4527
}
4528
4529
/**************
4530
* Mate-Panel *
4531
**************/
4532
.mate-panel-menu-bar menubar,
4533
#PanelApplet-window-menu-applet-button {
4534
background-color: transparent;
4535
}
4536
4537
#PanelPlug,
4538
PanelToplevel.background {
4539
background-color: #263238;
4540
color: #FFFFFF;
4541
font-weight: 500;
4542
}
4543
4544
PanelToplevel > widget > button {
4545
padding: 0 4px;
4546
border-radius: 0;
4547
}
4548
4549
PanelSeparator {
4550
color: rgba(0, 0, 0, 0.1);
4551
}
4552
4553
MatePanelAppletFrameDBus {
4554
border-style: solid;
4555
border-width: 0 1px;
4556
border-color: rgba(0, 0, 0, 0.1);
4557
}
4558
4559
.mate-panel-menu-bar menubar menuitem {
4560
padding: 4px;
4561
}
4562
4563
.mate-panel-menu-bar menubar menu menuitem {
4564
padding: 6px;
4565
}
4566
4567
.mate-panel-menu-bar #PanelApplet button {
4568
-GtkWidget-window-dragging: true;
4569
padding: 4px;
4570
border-radius: 0;
4571
}
4572
4573
PanelApplet.wnck-applet .wnck-pager {
4574
background-color: transparent;
4575
color: #40C4FF;
4576
}
4577
4578
PanelApplet.wnck-applet .wnck-pager:hover {
4579
background-color: alpha(currentColor, 0.15);
4580
}
4581
4582
PanelApplet.wnck-applet .wnck-pager:active {
4583
background-color: alpha(currentColor, 0.3);
4584
}
4585
4586
PanelApplet.wnck-applet .wnck-pager:selected {
4587
background-color: #42A5F5;
4588
}
4589
4590
#MatePanelPopupWindow {
4591
border: 1px solid rgba(0, 0, 0, 0.1);
4592
border-radius: 3px;
4593
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
4594
}
4595
4596
#MatePanelPopupWindow frame > border {
4597
border-style: none;
4598
}
4599
4600
#MatePanelPopupWindow ClockMap {
4601
border: 1px solid rgba(0, 0, 0, 0.1);
4602
}
4603
4604
na-tray-applet {
4605
-NaTrayApplet-icon-padding: 3px;
4606
-NaTrayApplet-icon-size: 16;
4607
}
4608
4609
.mate-panel-menu-bar {
4610
-PanelMenuBar-icon-visible: true;
4611
}
4612
4613
.mate-panel-applet-slider {
4614
background-color: transparent;
4615
}
4616
4617
.mate-panel-applet-slider frame {
4618
border: 1px solid rgba(0, 0, 0, 0.1);
4619
border-radius: 3px;
4620
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
4621
background-color: #F5F5F5;
4622
}
4623
4624
.mate-panel-applet-slider frame frame {
4625
all: unset;
4626
}
4627
4628
.mate-panel-applet-slider frame > border {
4629
border-style: none;
4630
}
4631
4632
/*********************
4633
* CAJA File manager *
4634
*********************/
4635
.caja-navigation-window button.toggle.image-button {
4636
border-radius: 2px;
4637
}
4638
4639
.caja-pathbar button {
4640
margin: 0 -1px 0 -2px;
4641
}
4642
4643
.caja-pathbar button > widget {
4644
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
4645
-GtkArrow-arrow-scaling: 1;
4646
}
4647
4648
.caja-side-pane notebook viewport.frame,
4649
.caja-side-pane notebook widget .vertical {
4650
background-color: #FFFFFF;
4651
}
4652
4653
.caja-side-pane notebook,
4654
.caja-notebook {
4655
border-top: 1px solid rgba(0, 0, 0, 0.1);
4656
}
4657
4658
.caja-side-pane notebook .frame,
4659
.caja-notebook .frame {
4660
border-style: none;
4661
}
4662
4663
.caja-navigation-window statusbar {
4664
margin: 0 -10px;
4665
padding: 0 4px;
4666
border-top: 1px solid rgba(0, 0, 0, 0.1);
4667
}
4668
4669
.caja-notebook frame > border {
4670
border-style: none;
4671
}
4672
4673
#caja-extra-view-widget {
4674
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4675
background-color: #F5F5F5;
4676
}
4677
4678
#caja-extra-view-widget > box > box > label {
4679
font-weight: bold;
4680
}
4681
4682
/*********
4683
* Pluma *
4684
*********/
4685
.pluma-window statusbar {
4686
margin: 0 -10px;
4687
padding: 0 4px;
4688
border-top: 1px solid rgba(0, 0, 0, 0.1);
4689
}
4690
4691
.pluma-window statusbar frame > border {
4692
border-style: none;
4693
}
4694
4695
.pluma-window statusbar frame button.flat {
4696
padding: 0 4px;
4697
border-radius: 0;
4698
}
4699
4700
.pluma-window statusbar frame button.flat widget {
4701
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
4702
-GtkArrow-arrow-scaling: 1;
4703
}
4704
4705
.pluma-print-preview toolbar {
4706
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4707
}
4708
4709
.pluma-window paned.horizontal box.vertical box.horizontal button.flat {
4710
margin: 1px;
4711
}
4712
4713
.pluma-window paned.horizontal box.vertical .frame {
4714
border-style: none;
4715
}
4716
4717
.pluma-window paned.horizontal box.vertical notebook.frame {
4718
margin-top: -1px;
4719
border-top: 1px solid rgba(0, 0, 0, 0.1);
4720
}
4721
4722
.pluma-window paned.horizontal box.vertical notebook.frame box.vertical toolbar.horizontal {
4723
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4724
}
4725
4726
/*********
4727
* Atril *
4728
*********/
4729
.atril-window paned.horizontal box.vertical .frame {
4730
border-style: none;
4731
}
4732
4733
.atril-window paned.horizontal box.vertical notebook .frame {
4734
border-top: 1px solid rgba(0, 0, 0, 0.1);
4735
}
4736
4737
/* mate-screensaver lock dialog */
4738
.lock-dialog {
4739
border-radius: 2px;
4740
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.4);
4741
}
4742
4743
.lock-dialog frame > border {
4744
border-style: none;
4745
}
4746
4747
/************************
4748
* LightDM GTK+ Greeter *
4749
************************/
4750
#panel_window {
4751
background-color: rgba(0, 0, 0, 0.3);
4752
color: #FFFFFF;
4753
}
4754
4755
#panel_window menubar,
4756
#panel_window separator {
4757
background-color: transparent;
4758
}
4759
4760
#panel_window separator {
4761
padding: 0 4px;
4762
}
4763
4764
#panel_window separator:first-child {
4765
padding: 0 8px;
4766
}
4767
4768
#panel_window menubar > menuitem {
4769
color: rgba(255, 255, 255, 0.75);
4770
}
4771
4772
#panel_window menubar > menuitem:hover {
4773
color: #FFFFFF;
4774
}
4775
4776
#panel_window menubar > menuitem:disabled label {
4777
color: rgba(255, 255, 255, 0.3);
4778
}
4779
4780
#login_window,
4781
#shutdown_dialog,
4782
#restart_dialog {
4783
margin: 8px;
4784
border-radius: 2px;
4785
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.4);
4786
background-color: #FAFAFA;
4787
}
4788
4789
#content_frame {
4790
padding-bottom: 20px;
4791
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4792
}
4793
4794
#buttonbox_frame {
4795
padding-top: 24px;
4796
}
4797
4798
#buttonbox_frame button {
4799
margin: -16px;
4800
}
4801
4802
#greeter_infobar {
4803
margin-top: -1px;
4804
}
4805
4806
/* GTK NAMED COLORS
4807
----------------
4808
use responsibly! */
4809
/*
4810
widget text/foreground color */
4811
@define-color theme_fg_color rgba(0, 0, 0, 0.8);
4812
/*
4813
text color for entries, views and content in general */
4814
@define-color theme_text_color rgba(0, 0, 0, 0.8);
4815
/*
4816
widget base background color */
4817
@define-color theme_bg_color #F5F5F5;
4818
/*
4819
text widgets and the like base background color */
4820
@define-color theme_base_color #FFFFFF;
4821
/*
4822
base background color of selections */
4823
@define-color theme_selected_bg_color #42A5F5;
4824
/*
4825
text/foreground color of selections */
4826
@define-color theme_selected_fg_color #FFFFFF;
4827
/*
4828
base background color of insensitive widgets */
4829
@define-color insensitive_bg_color #F5F5F5;
4830
/*
4831
text foreground color of insensitive widgets */
4832
@define-color insensitive_fg_color rgba(0, 0, 0, 0.32);
4833
/*
4834
insensitive text widgets and the like base background color */
4835
@define-color insensitive_base_color #FAFAFA;
4836
/*
4837
widget text/foreground color on backdrop windows */
4838
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8);
4839
/*
4840
text color for entries, views and content in general on backdrop windows */
4841
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8);
4842
/*
4843
widget base background color on backdrop windows */
4844
@define-color theme_unfocused_bg_color #F5F5F5;
4845
/*
4846
text widgets and the like base background color on backdrop windows */
4847
@define-color theme_unfocused_base_color #FFFFFF;
4848
/*
4849
base background color of selections on backdrop windows */
4850
@define-color theme_unfocused_selected_bg_color #42A5F5;
4851
/*
4852
text/foreground color of selections on backdrop windows */
4853
@define-color theme_unfocused_selected_fg_color #FFFFFF;
4854
/*
4855
insensitive color on backdrop windows */
4856
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.32);
4857
/*
4858
widgets main borders color */
4859
@define-color borders rgba(0, 0, 0, 0.1);
4860
/*
4861
widgets main borders color on backdrop windows */
4862
@define-color unfocused_borders rgba(0, 0, 0, 0.1);
4863
/*
4864
these are pretty self explicative */
4865
@define-color warning_color #FF6D00;
4866
@define-color error_color #DD2C00;
4867
@define-color success_color #00C853;
4868
/*
4869
FIXME this is really an API */
4870
@define-color content_view_bg #FFFFFF;
4871
@define-color placeholder_text_color rgba(128, 128, 128, 0.88);
4872