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