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

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