A fork of the Materia GTK theme.

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

Dismiss

 gtk.css

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