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