A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 gtk.css

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