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