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-dark-compact.css

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