A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 gtk-dark_laptop.css

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