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_laptop.css

View raw Download
text/plain • 117.07 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: 32px;
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: 32px;
179
padding: 0 8px;
180
border-radius: 2px;
181
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
182
border-image: none;
183
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
184
background-color: #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: 20px;
222
min-width: 20px;
223
-gtk-outline-radius: 100px;
224
border-radius: 100px;
225
color: alpha(currentColor, 0.75); }
226
spinbutton:not(.vertical) image:hover, notebook > stack:not(:only-child) revealer entry image:hover,
227
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:hover, spinbutton:not(.vertical) image:active, notebook > stack:not(:only-child) revealer entry image:active,
228
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:active,
229
entry image:hover,
230
entry image:active {
231
color: currentColor; }
232
spinbutton:not(.vertical) image:disabled, notebook > stack:not(:only-child) revealer entry image:disabled,
233
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:disabled,
234
entry image:disabled {
235
color: alpha(currentColor, 0.6); }
236
spinbutton:not(.vertical) image.left, notebook > stack:not(:only-child) revealer entry image.left,
237
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.left,
238
entry image.left {
239
margin-left: -2px;
240
margin-right: 2px; }
241
spinbutton:not(.vertical) image.right, notebook > stack:not(:only-child) revealer entry image.right,
242
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.right,
243
entry image.right {
244
margin-left: 2px;
245
margin-right: -2px; }
246
spinbutton:not(.vertical) undershoot.left, notebook > stack:not(:only-child) revealer entry undershoot.left,
247
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.left,
248
entry undershoot.left {
249
background-color: transparent;
250
background-image: linear-gradient(to top, rgba(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: 4px 8px;
376
border-radius: 2px;
377
font-weight: 500;
378
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
379
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
380
background-color: #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: 4px;
473
-gtk-outline-radius: 100px;
474
border-radius: 100px; }
475
button.text-button {
476
padding-left: 16px;
477
padding-right: 16px; }
478
button.text-button.image-button {
479
padding-left: 8px;
480
padding-right: 8px;
481
-gtk-outline-radius: 2px;
482
border-radius: 2px; }
483
button.text-button.image-button label:last-child {
484
padding-left: 2px;
485
padding-right: 8px; }
486
button.text-button.image-button label:first-child {
487
padding-left: 8px;
488
padding-right: 2px; }
489
.inline-toolbar .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action),
490
headerbar .linked > button:not(.suggested-action):not(.destructive-action), .inline-toolbar .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action),
491
headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), .linked >
492
button.flat, .linked.vertical >
493
button.flat {
494
border-radius: 2px; }
495
.inline-toolbar .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action),
496
headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), .inline-toolbar .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action),
497
headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), .linked >
498
button.flat.image-button, .linked.vertical >
499
button.flat.image-button {
500
-gtk-outline-radius: 100px;
501
border-radius: 100px; }
502
.inline-toolbar .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
503
headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), .inline-toolbar .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
504
headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), .linked >
505
button.flat.text-button.image-button, .linked.vertical >
506
button.flat.text-button.image-button {
507
-gtk-outline-radius: 2px;
508
border-radius: 2px; }
509
infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, infobar.error button:disabled, row:selected
510
button:disabled {
511
color: rgba(255, 255, 255, 0.3); }
512
button.osd {
513
padding: 10px 14px; }
514
button.osd.image-button {
515
padding: 10px; }
516
button.osd:disabled {
517
opacity: 0; }
518
button.suggested-action {
519
background-color: #FF4081;
520
color: #FFFFFF; }
521
button.suggested-action:disabled {
522
box-shadow: none;
523
background-color: alpha(currentColor, 0.3);
524
color: rgba(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: 2px;
578
padding-right: 2px; }
579
.stack-switcher >
580
button.needs-attention:checked > label,
581
.stack-switcher >
582
button.needs-attention:checked > image {
583
animation: none;
584
background-image: none; }
585
button separator {
586
min-width: 0;
587
min-height: 0;
588
background: transparent; }
589
.primary-toolbar
590
button {
591
-gtk-icon-shadow: none; }
592
593
.stack-switcher >
594
button.needs-attention > label,
595
.stack-switcher >
596
button.needs-attention > image, stacksidebar row.needs-attention > label {
597
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
598
background-repeat: no-repeat;
599
background-position: right 3px;
600
background-size: 6px 6px; }
601
.stack-switcher >
602
button.needs-attention > label:dir(rtl),
603
.stack-switcher >
604
button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) {
605
background-position: left 3px; }
606
607
.linked:not(.vertical) > spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry,
608
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) >
609
entry, .linked >
610
button, .gedit-search-slider button:dir(ltr), .gedit-search-slider button:dir(rtl), .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) {
611
-gtk-outline-radius: 2px;
612
border-radius: 0; }
613
614
.linked:not(.vertical) > spinbutton:first-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:first-child,
615
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) >
616
entry:first-child, .linked >
617
button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .gedit-search-slider button:first-child:dir(ltr), .gedit-search-slider button:first-child:dir(rtl) {
618
border-top-left-radius: 2px;
619
border-bottom-left-radius: 2px; }
620
.linked:not(.vertical) > spinbutton:last-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:last-child,
621
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) >
622
entry:last-child, .linked >
623
button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .gedit-search-slider button:last-child:dir(ltr), .gedit-search-slider button:last-child:dir(rtl) {
624
border-top-right-radius: 2px;
625
border-bottom-right-radius: 2px; }
626
.linked:not(.vertical) > spinbutton:only-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:only-child,
627
notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) >
628
entry:only-child, .linked >
629
button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .gedit-search-slider button:only-child:dir(ltr), .gedit-search-slider button:only-child:dir(rtl) {
630
border-radius: 2px; }
631
632
.linked.vertical > spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry,
633
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.vertical), .linked.vertical >
634
entry, .linked.vertical >
635
button, .linked.vertical > combobox > box > button.combo {
636
-gtk-outline-radius: 2px;
637
border-radius: 0; }
638
639
.linked.vertical > spinbutton:first-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:first-child,
640
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical >
641
entry:first-child, .linked.vertical >
642
button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px; }
645
.linked.vertical > spinbutton:last-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:last-child,
646
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical >
647
entry:last-child, .linked.vertical >
648
button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
649
border-bottom-left-radius: 2px;
650
border-bottom-right-radius: 2px; }
651
.linked.vertical > spinbutton:only-child:not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:only-child,
652
notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical >
653
entry:only-child, .linked.vertical >
654
button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
655
border-radius: 2px; }
656
657
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: 28px;
661
padding: 0 8px;
662
border-radius: 2px;
663
color: inherit; }
664
modelbutton.flat check:not(:checked):not(:indeterminate),
665
modelbutton.flat radio:not(:checked):not(:indeterminate),
666
.menuitem.button.flat check:not(:checked):not(:indeterminate),
667
.menuitem.button.flat radio:not(:checked):not(:indeterminate) {
668
color: alpha(currentColor, 0.6); }
669
modelbutton.flat check, modelbutton.flat check:hover,
670
modelbutton.flat radio,
671
modelbutton.flat radio:hover,
672
.menuitem.button.flat check,
673
.menuitem.button.flat check:hover,
674
.menuitem.button.flat radio,
675
.menuitem.button.flat radio:hover {
676
background-image: none; }
677
modelbutton.flat check:active,
678
modelbutton.flat radio:active,
679
.menuitem.button.flat check:active,
680
.menuitem.button.flat radio:active {
681
animation: none; }
682
modelbutton.flat check:last-child,
683
modelbutton.flat radio:last-child,
684
.menuitem.button.flat check:last-child,
685
.menuitem.button.flat radio:last-child {
686
margin-left: -8px;
687
margin-right: -16px; }
688
modelbutton.flat check:first-child,
689
modelbutton.flat radio:first-child,
690
.menuitem.button.flat check:first-child,
691
.menuitem.button.flat radio:first-child {
692
margin-left: -16px;
693
margin-right: -8px; }
694
695
modelbutton.flat arrow {
696
background: none; }
697
modelbutton.flat arrow:hover {
698
background: none; }
699
modelbutton.flat arrow.left {
700
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
701
modelbutton.flat arrow.right {
702
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
703
704
button.color {
705
min-height: 20px;
706
min-width: 20px;
707
padding: 6px; }
708
709
/*********
710
* Links *
711
*********/
712
*:link, button:link,
713
button:visited, *:link:hover, button:hover:link,
714
button:hover:visited, *:link:active, button:active:link,
715
button:active:visited {
716
color: #42A5F5; }
717
*:link:visited,
718
button:visited, *:link:visited:hover,
719
button:visited:hover, *:link:visited:active,
720
button:visited:active {
721
color: #E040FB; }
722
infobar.info *:link, infobar.info button:link,
723
infobar.info button:visited, infobar.question *:link, infobar.question button:link,
724
infobar.question button:visited, infobar.warning *:link, infobar.warning button:link,
725
infobar.warning button:visited, infobar.error *:link, infobar.error button:link,
726
infobar.error button:visited, *:link:selected, button:selected:link,
727
button:selected:visited, .selection-mode.titlebar:not(headerbar) .subtitle:link,
728
headerbar.selection-mode .subtitle:link, *:selected *:link, *:selected button:link,
729
*:selected button:visited {
730
color: #FFFFFF; }
731
732
button:link > label,
733
button:visited > label {
734
text-decoration-line: underline; }
735
736
/*****************
737
* GtkSpinButton *
738
*****************/
739
spinbutton:not(.vertical) {
740
padding: 0; }
741
notebook > stack:not(:only-child) spinbutton:not(.vertical) entry,
742
spinbutton:not(.vertical) entry {
743
min-width: 28px;
744
margin: 0;
745
border-image: none;
746
border-radius: 0;
747
box-shadow: none;
748
background-color: transparent; }
749
spinbutton:not(.vertical) button {
750
border: solid 6px transparent; }
751
spinbutton:not(.vertical) button.up:dir(ltr), spinbutton:not(.vertical) button.down:dir(rtl) {
752
margin-left: -3px; }
753
spinbutton:not(.vertical) button.up:dir(rtl), spinbutton:not(.vertical) button.down:dir(ltr) {
754
margin-right: -3px; }
755
spinbutton.vertical:disabled {
756
color: rgba(0, 0, 0, 0.32); }
757
spinbutton.vertical:drop(active) {
758
box-shadow: none; }
759
spinbutton.vertical entry {
760
min-height: 32px;
761
min-width: 44px;
762
padding: 0; }
763
spinbutton.vertical button {
764
min-height: 32px;
765
min-width: 44px;
766
padding: 0; }
767
spinbutton.vertical button.up {
768
border-radius: 2px 2px 0 0; }
769
spinbutton.vertical button.down {
770
border-radius: 0 0 2px 2px; }
771
treeview spinbutton:not(.vertical) {
772
min-height: 0;
773
border-style: none;
774
border-radius: 0; }
775
treeview spinbutton:not(.vertical) entry {
776
min-height: 0;
777
padding: 1px 2px; }
778
779
/**************
780
* ComboBoxes *
781
**************/
782
combobox arrow {
783
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
784
min-height: 16px;
785
min-width: 16px; }
786
combobox menu,
787
combobox .menu,
788
combobox .context-menu {
789
padding: 2px 0; }
790
combobox menu menuitem,
791
combobox .menu menuitem,
792
combobox .context-menu menuitem {
793
min-height: 32px;
794
padding: 0 8px; }
795
combobox:drop(active) {
796
box-shadow: none; }
797
798
/************
799
* Toolbars *
800
************/
801
toolbar {
802
-GtkWidget-window-dragging: true;
803
padding: 3px;
804
background-color: #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), inset 0 1px rgba(255, 255, 255, 0.4);
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), inset 0 1px rgba(255, 255, 255, 0.4); }
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: 44px;
853
padding: 0 6px;
854
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.2);
855
background-color: #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: 20px;
936
padding: 6px;
937
border-width: 0; }
938
.default-decoration.titlebar:not(headerbar) button.titlebutton,
939
headerbar.default-decoration button.titlebutton {
940
min-height: 20px;
941
min-width: 20px;
942
margin: 0;
943
padding: 0; }
944
.default-decoration.titlebar:not(headerbar) button.titlebutton:active,
945
headerbar.default-decoration button.titlebutton:active {
946
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); }
947
.solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd
948
headerbar:dir(rtl), .solid-csd
949
headerbar:dir(ltr) {
950
margin-left: -2px;
951
margin-right: -2px;
952
margin-top: -2px;
953
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); }
954
955
headerbar entry,
956
headerbar spinbutton,
957
headerbar button {
958
margin-top: 6px;
959
margin-bottom: 6px; }
960
headerbar switch {
961
margin-top: 12px;
962
margin-bottom: 12px; }
963
964
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
965
border-top-left-radius: 2px;
966
border-top-right-radius: 2px; }
967
968
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + headerbar, window:not(.tiled):not(.maximized):not(.fullscreen) headerbar:first-child {
969
border-top-left-radius: 2px; }
970
window:not(.tiled):not(.maximized):not(.fullscreen) headerbar:last-child {
971
border-top-right-radius: 2px; }
972
973
window.csd > .titlebar:not(headerbar) {
974
padding: 0;
975
background-color: transparent;
976
background-image: none;
977
border-style: none;
978
box-shadow: none; }
979
.titlebar:not(headerbar) > separator {
980
background-color: #455A64;
981
background-image: image(rgba(0, 0, 0, 0.1)); }
982
983
/************
984
* Pathbars *
985
************/
986
.path-bar button.text-button, .path-bar button.image-button, .path-bar button {
987
padding-left: 6px;
988
padding-right: 6px; }
989
.path-bar button image {
990
padding-left: 2px;
991
padding-right: 2px; }
992
.path-bar button.slider-button {
993
padding-left: 0;
994
padding-right: 0; }
995
:not(headerbar) .path-bar button {
996
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px;
997
border-radius: 2px; }
998
:not(headerbar) .path-bar button:checked {
999
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 100%, transparent 0%) 0 0 2/0 0 2px; }
1000
:not(headerbar) .path-bar button:checked, :not(headerbar) .path-bar button:checked:disabled {
1001
background-color: transparent; }
1002
1003
/**************
1004
* Tree Views *
1005
**************/
1006
treeview.view {
1007
border-left-color: alpha(currentColor, 0.3);
1008
border-top-color: rgba(0, 0, 0, 0.1); }
1009
* {
1010
-GtkTreeView-horizontal-separator: 4;
1011
-GtkTreeView-grid-line-width: 1;
1012
-GtkTreeView-grid-line-pattern: '';
1013
-GtkTreeView-tree-line-width: 1;
1014
-GtkTreeView-tree-line-pattern: '';
1015
-GtkTreeView-expander-size: 16; }
1016
treeview.view:hover, treeview.view:active, treeview.view:selected {
1017
border-radius: 0; }
1018
treeview.view.separator {
1019
min-height: 5px;
1020
color: rgba(0, 0, 0, 0.1); }
1021
treeview.view:drop(active) {
1022
border-style: solid none;
1023
border-width: 1px;
1024
border-color: #FF4081; }
1025
treeview.view:drop(active).after {
1026
border-top-style: none; }
1027
treeview.view:drop(active).before {
1028
border-bottom-style: none; }
1029
treeview.view.expander {
1030
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1031
-gtk-icon-transform: rotate(-90deg);
1032
color: rgba(0, 0, 0, 0.6); }
1033
treeview.view.expander:dir(rtl) {
1034
-gtk-icon-transform: rotate(90deg); }
1035
treeview.view.expander:checked {
1036
-gtk-icon-transform: unset; }
1037
treeview.view.expander:hover, treeview.view.expander:active {
1038
color: rgba(0, 0, 0, 0.8); }
1039
treeview.view.expander:disabled {
1040
color: rgba(0, 0, 0, 0.24); }
1041
treeview.view.expander:selected {
1042
color: rgba(255, 255, 255, 0.75); }
1043
treeview.view.expander:selected:hover, treeview.view.expander:selected:active {
1044
color: #FFFFFF; }
1045
treeview.view.expander:selected:disabled {
1046
color: rgba(255, 255, 255, 0.3); }
1047
treeview.view.progressbar {
1048
border-style: none none solid;
1049
border-width: 4px;
1050
border-color: #42A5F5;
1051
background-color: transparent;
1052
background-image: none; }
1053
treeview.view.progressbar:selected {
1054
border-color: currentColor; }
1055
treeview.view.trough {
1056
border-style: none none solid;
1057
border-width: 4px;
1058
border-color: rgba(66, 165, 245, 0.3);
1059
background-color: transparent;
1060
background-image: none; }
1061
treeview.view.trough:selected {
1062
border-color: alpha(currentColor, 0.3); }
1063
treeview.view header button {
1064
padding: 2px 6px;
1065
border-style: none solid solid none;
1066
border-width: 1px;
1067
border-color: rgba(0, 0, 0, 0.1);
1068
border-radius: 0;
1069
background-clip: border-box; }
1070
treeview.view header button, treeview.view header button:hover, treeview.view header button:active {
1071
box-shadow: none; }
1072
treeview.view header button, treeview.view header button:disabled {
1073
background-color: #FFFFFF; }
1074
treeview.view header button:last-child {
1075
border-right-style: none; }
1076
treeview.view button.dnd,
1077
treeview.view header.button.dnd {
1078
padding: 2px 6px;
1079
border-style: none solid solid;
1080
border-width: 1px;
1081
border-color: rgba(0, 0, 0, 0.1);
1082
border-radius: 0;
1083
box-shadow: none;
1084
background-color: #FFFFFF;
1085
background-clip: border-box;
1086
color: #42A5F5; }
1087
treeview.view acceleditor > label {
1088
background-color: #42A5F5; }
1089
1090
/*********
1091
* Menus *
1092
*********/
1093
menubar,
1094
.menubar {
1095
-GtkWidget-window-dragging: true;
1096
padding: 0;
1097
background-color: #455A64; }
1098
menubar > menuitem,
1099
.menubar > menuitem {
1100
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1101
min-height: 20px;
1102
padding: 4px 8px;
1103
color: rgba(255, 255, 255, 0.75); }
1104
menubar > menuitem:hover,
1105
.menubar > menuitem:hover {
1106
transition: none;
1107
background-color: alpha(currentColor, 0.15);
1108
color: #FFFFFF; }
1109
menubar > menuitem:disabled,
1110
.menubar > menuitem:disabled {
1111
color: rgba(255, 255, 255, 0.3); }
1112
1113
menu,
1114
.menu,
1115
.context-menu {
1116
margin: 4px 0;
1117
padding: 4px 0;
1118
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
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: 20px;
1323
min-width: 20px;
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: alpha(currentColor, 0.4); }
1474
switch:checked {
1475
background-color: rgba(255, 64, 129, 0.5); }
1476
switch:checked:disabled {
1477
background-color: rgba(255, 64, 129, 0.2);
1478
color: rgba(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: 20px;
1487
min-height: 20px;
1488
margin: -4px 0 -4px -4px;
1489
-gtk-outline-radius: 100px;
1490
border-radius: 100px; }
1491
switch:hover slider {
1492
border-image: none;
1493
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
1494
switch:checked slider {
1495
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, background-image 0, background-color 0 0.3s;
1496
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1);
1497
margin: -4px -4px -4px 0;
1498
background-color: #FF4081;
1499
color: #FFFFFF; }
1500
switch:disabled slider {
1501
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1502
background-color: #fafafa;
1503
color: rgba(0, 0, 0, 0.32); }
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: -10px;
1547
padding: 10px; }
1548
check:checked, check:indeterminate,
1549
radio:checked,
1550
radio:indeterminate {
1551
color: #FF4081; }
1552
check:checked:disabled, check:indeterminate:disabled,
1553
radio:checked:disabled,
1554
radio:indeterminate:disabled {
1555
color: rgba(255, 64, 129, 0.4); }
1556
row check:not(:checked):not(:indeterminate), row
1557
radio:not(:checked):not(:indeterminate) {
1558
color: alpha(currentColor, 0.75); }
1559
row check:not(:checked):not(:indeterminate):hover, row check:not(:checked):not(:indeterminate):active, row
1560
radio:not(:checked):not(:indeterminate):hover, row
1561
radio:not(:checked):not(:indeterminate):active {
1562
color: currentColor; }
1563
row check:not(:checked):not(:indeterminate):disabled, row
1564
radio:not(:checked):not(:indeterminate):disabled {
1565
color: alpha(currentColor, 0.3); }
1566
menu menuitem check, menu menuitem
1567
radio {
1568
transition: none;
1569
margin: -16px; }
1570
menu menuitem check:not(:checked):not(:indeterminate), menu menuitem
1571
radio:not(:checked):not(:indeterminate) {
1572
color: alpha(currentColor, 0.6); }
1573
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
1574
radio, menu menuitem
1575
radio:hover, menu menuitem
1576
radio:disabled {
1577
background-image: none; }
1578
1579
check {
1580
-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1581
check:checked {
1582
-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1583
check:indeterminate {
1584
-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1585
1586
radio {
1587
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 22/22px; }
1588
radio {
1589
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1590
radio:indeterminate {
1591
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1592
radio:checked {
1593
border-image: -gtk-gradient(radial, center center, 0, center center, 0.11364, to(#FF4081), to(transparent)) 22/22px; }
1594
radio:checked:disabled {
1595
border-image: -gtk-gradient(radial, center center, 0, center center, 0.11364, to(rgba(255, 64, 129, 0.4)), to(transparent)) 22/22px; }
1596
radio:indeterminate:checked {
1597
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 22/22px; }
1598
1599
@keyframes check_check {
1600
from {
1601
-gtk-icon-transform: rotate(90deg); }
1602
to {
1603
-gtk-icon-transform: unset; } }
1604
@keyframes check_radio {
1605
from {
1606
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 22/22px; }
1607
to {
1608
border-image: -gtk-gradient(radial, center center, 0, center center, 0.11364, to(#FF4081), to(transparent)) 22/22px; } }
1609
@keyframes check_indeterminate {
1610
from {
1611
-gtk-icon-transform: unset; }
1612
50% {
1613
-gtk-icon-transform: scale(0, 1); }
1614
to {
1615
-gtk-icon-transform: unset; } }
1616
modelbutton.flat check:not(:indeterminate):checked,
1617
.menuitem.button.flat check:not(:indeterminate):checked,
1618
check:not(:indeterminate):checked {
1619
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1620
1621
check:not(:indeterminate):checked:active {
1622
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
1623
1624
modelbutton.flat check:indeterminate:checked, modelbutton.flat radio:indeterminate:checked,
1625
.menuitem.button.flat check:indeterminate:checked,
1626
.menuitem.button.flat radio:indeterminate:checked,
1627
check:indeterminate:checked, radio:indeterminate:checked {
1628
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
1629
1630
check:indeterminate:checked:active, radio:indeterminate:checked:active {
1631
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
1632
1633
menu menuitem check:not(:indeterminate):checked,
1634
menu menuitem radio:not(:indeterminate):checked,
1635
menu menuitem check:indeterminate:checked,
1636
menu menuitem radio:indeterminate:checked {
1637
animation: none; }
1638
1639
treeview.view check,
1640
treeview.view radio {
1641
padding: 0; }
1642
treeview.view check:hover,
1643
treeview.view radio:hover {
1644
box-shadow: inset 0 0 0 10000px alpha(rgba(0, 0, 0, 0.8), 0.05);
1645
background-image: none; }
1646
treeview.view check:hover:selected,
1647
treeview.view radio:hover:selected {
1648
box-shadow: inset 0 0 0 10000px alpha(#FFFFFF, 0.05); }
1649
treeview.view check,
1650
treeview.view radio {
1651
color: rgba(0, 0, 0, 0.6); }
1652
treeview.view check:hover, treeview.view check:active,
1653
treeview.view radio:hover,
1654
treeview.view radio:active {
1655
color: rgba(0, 0, 0, 0.8); }
1656
treeview.view check:disabled,
1657
treeview.view radio:disabled {
1658
color: rgba(0, 0, 0, 0.24); }
1659
treeview.view check:checked, treeview.view check:indeterminate,
1660
treeview.view radio:checked,
1661
treeview.view radio:indeterminate {
1662
color: #FF4081; }
1663
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
1664
treeview.view radio:checked:disabled,
1665
treeview.view radio:indeterminate:disabled {
1666
color: rgba(255, 64, 129, 0.4); }
1667
treeview.view check:selected,
1668
treeview.view radio:selected {
1669
color: rgba(255, 255, 255, 0.75); }
1670
treeview.view check:selected:hover, treeview.view check:selected:active,
1671
treeview.view radio:selected:hover,
1672
treeview.view radio:selected:active {
1673
color: #FFFFFF; }
1674
treeview.view check:selected:disabled,
1675
treeview.view radio:selected:disabled {
1676
color: rgba(255, 255, 255, 0.3); }
1677
treeview.view check:selected:checked, treeview.view check:selected:indeterminate,
1678
treeview.view radio:selected:checked,
1679
treeview.view radio:selected:indeterminate {
1680
color: #FF4081; }
1681
treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled,
1682
treeview.view radio:selected:checked:disabled,
1683
treeview.view radio:selected:indeterminate:disabled {
1684
color: rgba(255, 64, 129, 0.4); }
1685
1686
treeview.view radio:checked {
1687
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png")));
1688
border-image: none; }
1689
1690
/************
1691
* GtkScale *
1692
************/
1693
scale {
1694
min-height: 8px;
1695
min-width: 8px;
1696
padding: 12px; }
1697
scale * {
1698
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
1699
scale slider {
1700
min-height: 24px;
1701
min-width: 24px;
1702
margin: -10px; }
1703
scale trough {
1704
outline-offset: 2px;
1705
background-color: alpha(currentColor, 0.3); }
1706
scale trough:disabled {
1707
color: rgba(0, 0, 0, 0.32); }
1708
scale highlight {
1709
background-color: #FF4081; }
1710
scale highlight:disabled {
1711
background-color: transparent; }
1712
scale fill {
1713
background-color: alpha(currentColor, 0.3); }
1714
scale fill:disabled {
1715
background-color: transparent; }
1716
scale slider {
1717
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1718
background-repeat: no-repeat;
1719
background-position: center;
1720
background-size: calc(100% - 8px); }
1721
scale slider {
1722
background-image: -gtk-scaled(url("assets/slider.png"), url("assets/slider@2.png")); }
1723
scale slider:disabled {
1724
background-image: -gtk-scaled(url("assets/slider-insensitive.png"), url("assets/slider-insensitive@2.png")); }
1725
scale slider:hover {
1726
background-size: calc(100% - 4px); }
1727
scale slider:active {
1728
background-size: calc(100% - 0px); }
1729
scale.fine-tune slider {
1730
background-size: calc(100% - 12px); }
1731
scale value {
1732
color: alpha(currentColor, 0.6); }
1733
scale marks {
1734
color: alpha(currentColor, 0.3); }
1735
scale marks.top {
1736
margin-bottom: 8px;
1737
margin-top: -16px; }
1738
scale marks.bottom {
1739
margin-top: 8px;
1740
margin-bottom: -16px; }
1741
scale marks.top {
1742
margin-right: 8px;
1743
margin-left: -16px; }
1744
scale marks.bottom {
1745
margin-left: 8px;
1746
margin-right: -16px; }
1747
scale.horizontal indicator {
1748
min-height: 8px;
1749
min-width: 1px; }
1750
scale.vertical indicator {
1751
min-height: 1px;
1752
min-width: 8px; }
1753
scale.color.horizontal slider,
1754
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1755
min-height: 30px;
1756
min-width: 24px;
1757
margin-top: -16px;
1758
background-position: center calc(100% - 4px); }
1759
scale.color.horizontal slider,
1760
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1761
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
1762
scale.color.horizontal slider:hover,
1763
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1764
background-position: center calc(100% - 2px); }
1765
scale.color.horizontal slider:active,
1766
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1767
background-position: center calc(100% - 0px); }
1768
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1769
background-position: center calc(100% - 6px); }
1770
scale.color.horizontal slider,
1771
scale.horizontal contents:last-child:not(:only-child) > trough > slider {
1772
min-height: 30px;
1773
min-width: 24px;
1774
margin-top: -16px;
1775
background-position: center calc(100% - 4px); }
1776
scale.color.horizontal slider:disabled,
1777
scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
1778
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-insensitive@2.png")); }
1779
scale.color.horizontal slider:hover,
1780
scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
1781
background-position: center calc(100% - 2px); }
1782
scale.color.horizontal slider:active,
1783
scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
1784
background-position: center calc(100% - 0px); }
1785
scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
1786
background-position: center calc(100% - 6px); }
1787
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1788
min-height: 30px;
1789
min-width: 24px;
1790
margin-bottom: -16px;
1791
background-position: center calc(4px); }
1792
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1793
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); }
1794
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1795
background-position: center calc(2px); }
1796
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1797
background-position: center calc(0px); }
1798
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1799
background-position: center calc(6px); }
1800
scale.horizontal contents:first-child:not(:only-child) > trough > slider {
1801
min-height: 30px;
1802
min-width: 24px;
1803
margin-bottom: -16px;
1804
background-position: center calc(4px); }
1805
scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
1806
background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-insensitive@2.png")); }
1807
scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
1808
background-position: center calc(2px); }
1809
scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
1810
background-position: center calc(0px); }
1811
scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
1812
background-position: center calc(6px); }
1813
scale.color.vertical:dir(rtl) slider,
1814
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1815
min-height: 24px;
1816
min-width: 30px;
1817
margin-left: -16px;
1818
background-position: calc(4px) center; }
1819
scale.color.vertical:dir(rtl) slider,
1820
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1821
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); }
1822
scale.color.vertical:dir(rtl) slider:hover,
1823
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1824
background-position: calc(2px) center; }
1825
scale.color.vertical:dir(rtl) slider:active,
1826
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1827
background-position: calc(0px) center; }
1828
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1829
background-position: calc(6px) center; }
1830
scale.color.vertical:dir(rtl) slider,
1831
scale.vertical contents:last-child:not(:only-child) > trough > slider {
1832
min-height: 24px;
1833
min-width: 30px;
1834
margin-left: -16px;
1835
background-position: calc(4px) center; }
1836
scale.color.vertical:dir(rtl) slider:disabled,
1837
scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
1838
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-insensitive@2.png")); }
1839
scale.color.vertical:dir(rtl) slider:hover,
1840
scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
1841
background-position: calc(2px) center; }
1842
scale.color.vertical:dir(rtl) slider:active,
1843
scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
1844
background-position: calc(0px) center; }
1845
scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
1846
background-position: calc(6px) center; }
1847
scale.color.vertical:dir(ltr) slider,
1848
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1849
min-height: 24px;
1850
min-width: 30px;
1851
margin-right: -16px;
1852
background-position: calc(100% - 4px) center; }
1853
scale.color.vertical:dir(ltr) slider,
1854
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1855
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); }
1856
scale.color.vertical:dir(ltr) slider:hover,
1857
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1858
background-position: calc(100% - 2px) center; }
1859
scale.color.vertical:dir(ltr) slider:active,
1860
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1861
background-position: calc(100% - 0px) center; }
1862
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
1863
background-position: calc(100% - 6px) center; }
1864
scale.color.vertical:dir(ltr) slider,
1865
scale.vertical contents:first-child:not(:only-child) > trough > slider {
1866
min-height: 24px;
1867
min-width: 30px;
1868
margin-right: -16px;
1869
background-position: calc(100% - 4px) center; }
1870
scale.color.vertical:dir(ltr) slider:disabled,
1871
scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
1872
background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-insensitive@2.png")); }
1873
scale.color.vertical:dir(ltr) slider:hover,
1874
scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
1875
background-position: calc(100% - 2px) center; }
1876
scale.color.vertical:dir(ltr) slider:active,
1877
scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
1878
background-position: calc(100% - 0px) center; }
1879
scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
1880
background-position: calc(100% - 6px) center; }
1881
scale.color {
1882
min-height: 0;
1883
min-width: 0; }
1884
scale.color.horizontal {
1885
padding: 0 0 12px 0; }
1886
scale.color.horizontal trough {
1887
padding-bottom: 4px; }
1888
scale.color.horizontal slider {
1889
margin-bottom: -14px;
1890
margin-top: 0; }
1891
scale.color.vertical:dir(ltr) {
1892
padding: 0 0 0 12px; }
1893
scale.color.vertical:dir(ltr) trough {
1894
padding-left: 4px; }
1895
scale.color.vertical:dir(ltr) slider {
1896
margin-left: -14px;
1897
margin-right: 0; }
1898
scale.color.vertical:dir(rtl) {
1899
padding: 0 12px 0 0; }
1900
scale.color.vertical:dir(rtl) trough {
1901
padding-right: 4px; }
1902
scale.color.vertical:dir(rtl) slider {
1903
margin-right: -14px;
1904
margin-left: 0; }
1905
1906
/*****************
1907
* Progress bars *
1908
*****************/
1909
progressbar {
1910
color: rgba(0, 0, 0, 0.48);
1911
font-size: smaller; }
1912
progressbar.horizontal trough,
1913
progressbar.horizontal progress {
1914
min-height: 4px; }
1915
progressbar.vertical trough,
1916
progressbar.vertical progress {
1917
min-width: 4px; }
1918
progressbar trough {
1919
background-color: rgba(66, 165, 245, 0.3); }
1920
progressbar progress {
1921
background-color: #42A5F5; }
1922
1923
/*************
1924
* Level Bar *
1925
*************/
1926
levelbar block {
1927
min-width: 32px;
1928
min-height: 4px; }
1929
levelbar.vertical block {
1930
min-width: 4px;
1931
min-height: 32px; }
1932
levelbar trough {
1933
padding: 2px;
1934
border-radius: 2px;
1935
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1936
border-image: none;
1937
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1938
background-color: #FFFFFF;
1939
color: rgba(0, 0, 0, 0.8); }
1940
levelbar trough:disabled {
1941
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1942
background-color: #fafafa;
1943
color: rgba(0, 0, 0, 0.32); }
1944
levelbar.horizontal.discrete block {
1945
margin: 0 1px; }
1946
levelbar.vertical.discrete block {
1947
margin: 1px 0; }
1948
levelbar.horizontal.discrete trough {
1949
padding: 2px 1px; }
1950
levelbar.vertical.discrete trough {
1951
padding: 1px 2px; }
1952
levelbar block.low {
1953
background-color: #FF6D00; }
1954
levelbar block.high, levelbar block:not(.empty) {
1955
background-color: #42A5F5; }
1956
levelbar block.full {
1957
background-color: #00C853; }
1958
levelbar block.empty {
1959
background-color: alpha(currentColor, 0.3);
1960
color: rgba(0, 0, 0, 0.32); }
1961
1962
/****************
1963
* Print dialog *
1964
*****************/
1965
printdialog paper {
1966
padding: 0;
1967
border: 1px solid rgba(0, 0, 0, 0.1);
1968
background: #FFFFFF;
1969
color: rgba(0, 0, 0, 0.8); }
1970
printdialog .dialog-action-box {
1971
margin: 12px; }
1972
1973
/**********
1974
* Frames *
1975
**********/
1976
frame > border,
1977
.frame {
1978
margin: 0;
1979
padding: 0;
1980
border: 1px solid rgba(0, 0, 0, 0.1);
1981
border-radius: 0;
1982
box-shadow: none; }
1983
frame > border.flat,
1984
.frame.flat {
1985
border-style: none; }
1986
1987
actionbar > revealer > box {
1988
padding: 6px;
1989
border-top: 1px solid rgba(0, 0, 0, 0.1); }
1990
1991
scrolledwindow viewport.frame {
1992
border-style: none; }
1993
overshoot.top {
1994
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
1995
background-repeat: no-repeat;
1996
background-position: center top;
1997
background-color: transparent;
1998
border: none;
1999
box-shadow: none; }
2000
overshoot.bottom {
2001
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2002
background-repeat: no-repeat;
2003
background-position: center bottom;
2004
background-color: transparent;
2005
border: none;
2006
box-shadow: none; }
2007
overshoot.left {
2008
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2009
background-repeat: no-repeat;
2010
background-position: left center;
2011
background-color: transparent;
2012
border: none;
2013
box-shadow: none; }
2014
overshoot.right {
2015
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2016
background-repeat: no-repeat;
2017
background-position: right center;
2018
background-color: transparent;
2019
border: none;
2020
box-shadow: none; }
2021
undershoot.top {
2022
background-color: transparent;
2023
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2024
padding-top: 1px;
2025
background-size: 12px 1px;
2026
background-repeat: repeat-x;
2027
background-origin: content-box;
2028
background-position: left top; }
2029
undershoot.bottom {
2030
background-color: transparent;
2031
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2032
padding-bottom: 1px;
2033
background-size: 12px 1px;
2034
background-repeat: repeat-x;
2035
background-origin: content-box;
2036
background-position: left bottom; }
2037
undershoot.left {
2038
background-color: transparent;
2039
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2040
padding-left: 1px;
2041
background-size: 1px 12px;
2042
background-repeat: repeat-y;
2043
background-origin: content-box;
2044
background-position: left top; }
2045
undershoot.right {
2046
background-color: transparent;
2047
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%);
2048
padding-right: 1px;
2049
background-size: 1px 12px;
2050
background-repeat: repeat-y;
2051
background-origin: content-box;
2052
background-position: right top; }
2053
junction {
2054
border-style: solid none none solid;
2055
border-width: 1px;
2056
border-color: rgba(0, 0, 0, 0.1);
2057
background-color: #FFFFFF; }
2058
junction:dir(rtl) {
2059
border-style: solid solid none none; }
2060
2061
separator {
2062
min-width: 1px;
2063
min-height: 1px;
2064
background: rgba(0, 0, 0, 0.1); }
2065
2066
/*********
2067
* Lists *
2068
*********/
2069
list {
2070
border-color: rgba(0, 0, 0, 0.1);
2071
background-color: #FFFFFF; }
2072
list row {
2073
padding: 2px; }
2074
2075
row.activatable, .view, iconview, treeview.view header button {
2076
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2077
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0);
2078
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
2079
row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover {
2080
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2081
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.05); }
2082
row.activatable.has-open-popup, .has-open-popup.view, iconview.has-open-popup, treeview.view header button.has-open-popup, row.activatable:active, .view:active, iconview:active, treeview.view header button:active {
2083
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2084
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
2085
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.15); }
2086
2087
/*********************
2088
* App Notifications *
2089
*********************/
2090
.app-notification,
2091
.app-notification.frame {
2092
margin: 8px; }
2093
.app-notification border,
2094
.app-notification.frame border {
2095
border: none; }
2096
2097
/*************
2098
* Expanders *
2099
*************/
2100
expander arrow {
2101
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2102
min-width: 16px;
2103
min-height: 16px;
2104
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2105
-gtk-icon-transform: rotate(-90deg);
2106
color: rgba(0, 0, 0, 0.6); }
2107
expander arrow:dir(rtl) {
2108
-gtk-icon-transform: rotate(90deg); }
2109
expander arrow:checked {
2110
-gtk-icon-transform: unset; }
2111
expander arrow:hover, expander arrow:active {
2112
color: rgba(0, 0, 0, 0.8); }
2113
expander arrow:disabled {
2114
color: rgba(0, 0, 0, 0.24); }
2115
expander arrow:selected {
2116
color: rgba(255, 255, 255, 0.75); }
2117
expander arrow:selected:hover, expander arrow:selected:active {
2118
color: #FFFFFF; }
2119
expander arrow:selected:disabled {
2120
color: rgba(255, 255, 255, 0.3); }
2121
2122
/************
2123
* Calendar *
2124
***********/
2125
calendar {
2126
padding: 1px;
2127
border: 1px solid rgba(0, 0, 0, 0.1);
2128
color: rgba(0, 0, 0, 0.8); }
2129
calendar:disabled {
2130
color: rgba(0, 0, 0, 0.32); }
2131
calendar:selected {
2132
border-radius: 3px; }
2133
calendar.header {
2134
border-style: none none solid;
2135
border-radius: 0; }
2136
calendar.highlight {
2137
color: alpha(currentColor, 0.6);
2138
font-weight: 500; }
2139
calendar:indeterminate {
2140
color: alpha(currentColor, 0.4); }
2141
2142
/***********
2143
* Dialogs *
2144
***********/
2145
messagedialog.background {
2146
background-color: #FAFAFA; }
2147
messagedialog .titlebar {
2148
min-height: 20px;
2149
border-style: none;
2150
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2151
background-color: #FAFAFA; }
2152
messagedialog.csd.background {
2153
border-bottom-left-radius: 2px;
2154
border-bottom-right-radius: 2px; }
2155
messagedialog.csd .dialog-action-area button {
2156
padding: 8px 16px;
2157
border-top: 1px solid rgba(0, 0, 0, 0.1);
2158
border-radius: 0; }
2159
messagedialog.csd .dialog-action-area button:first-child {
2160
border-bottom-left-radius: 2px; }
2161
messagedialog.csd .dialog-action-area button:last-child {
2162
border-bottom-right-radius: 2px; }
2163
2164
filechooser .dialog-action-box {
2165
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2166
filechooser #pathbarbox {
2167
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2168
background-color: #F5F5F5; }
2169
2170
filechooserbutton:drop(active) {
2171
box-shadow: none; }
2172
2173
/***********
2174
* Sidebar *
2175
***********/
2176
.sidebar {
2177
border-style: none;
2178
background-color: #FAFAFA; }
2179
stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
2180
border-right: 1px solid rgba(0, 0, 0, 0.1);
2181
border-left-style: none; }
2182
stacksidebar.sidebar:dir(rtl) list
2183
.sidebar:dir(rtl), stacksidebar.sidebar.right list
2184
.sidebar:dir(rtl), .sidebar.right {
2185
border-left: 1px solid rgba(0, 0, 0, 0.1);
2186
border-right-style: none; }
2187
.sidebar list {
2188
background-color: transparent; }
2189
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
2190
border-style: none; }
2191
2192
stacksidebar row {
2193
padding: 10px 4px; }
2194
stacksidebar row > label {
2195
padding-left: 6px;
2196
padding-right: 6px; }
2197
2198
/****************
2199
* File chooser *
2200
****************/
2201
placessidebar > viewport.frame {
2202
border-style: none; }
2203
placessidebar list {
2204
padding: 1px 0 4px; }
2205
placessidebar row {
2206
min-height: 32px;
2207
margin: -1px 0;
2208
padding: 0; }
2209
placessidebar row > revealer {
2210
padding: 0 12px; }
2211
placessidebar row:selected {
2212
color: #FFFFFF; }
2213
placessidebar row:disabled {
2214
color: rgba(0, 0, 0, 0.32); }
2215
placessidebar row image.sidebar-icon {
2216
opacity: 0.6; }
2217
placessidebar row image.sidebar-icon:dir(ltr) {
2218
padding-right: 8px; }
2219
placessidebar row image.sidebar-icon:dir(rtl) {
2220
padding-left: 8px; }
2221
placessidebar row label.sidebar-label:dir(ltr) {
2222
padding-right: 2px; }
2223
placessidebar row label.sidebar-label:dir(rtl) {
2224
padding-left: 2px; }
2225
placessidebar row.sidebar-placeholder-row {
2226
min-height: 2px;
2227
padding: 0 8px;
2228
background-image: image(#FF4081);
2229
background-clip: content-box; }
2230
placessidebar row.sidebar-new-bookmark-row {
2231
color: #FF4081; }
2232
placessidebar row:drop(active):not(:disabled) {
2233
box-shadow: inset 0 0 0 2px #FF4081; }
2234
2235
placesview .server-list-button > image {
2236
-gtk-icon-transform: rotate(0turn); }
2237
placesview .server-list-button:checked > image {
2238
-gtk-icon-transform: rotate(-0.5turn); }
2239
placesview > actionbar > revealer > box > label {
2240
padding-left: 8px;
2241
padding-right: 8px; }
2242
2243
/*********
2244
* Paned *
2245
*********/
2246
paned > separator {
2247
min-width: 1px;
2248
min-height: 1px;
2249
-gtk-icon-source: none;
2250
border-style: none;
2251
background-color: transparent;
2252
background-image: image(rgba(0, 0, 0, 0.1));
2253
background-size: 1px 1px; }
2254
paned > separator.wide {
2255
min-width: 6px;
2256
min-height: 6px;
2257
background-color: #F5F5F5;
2258
background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1));
2259
background-size: 1px 1px, 1px 1px; }
2260
paned.horizontal > separator {
2261
background-repeat: repeat-y; }
2262
paned.horizontal > separator:dir(ltr) {
2263
margin: 0 -8px 0 0;
2264
padding: 0 8px 0 0;
2265
background-position: left; }
2266
paned.horizontal > separator:dir(rtl) {
2267
margin: 0 0 0 -8px;
2268
padding: 0 0 0 8px;
2269
background-position: right; }
2270
paned.horizontal > separator.wide {
2271
margin: 0;
2272
padding: 0;
2273
background-repeat: repeat-y, repeat-y;
2274
background-position: left, right; }
2275
paned.vertical > separator {
2276
margin: 0 0 -8px 0;
2277
padding: 0 0 8px 0;
2278
background-repeat: repeat-x;
2279
background-position: top; }
2280
paned.vertical > separator.wide {
2281
margin: 0;
2282
padding: 0;
2283
background-repeat: repeat-x, repeat-x;
2284
background-position: bottom, top; }
2285
2286
/**************
2287
* GtkInfoBar *
2288
**************/
2289
infobar {
2290
border-style: none; }
2291
infobar.info {
2292
background-color: #66BB6A; }
2293
infobar.question {
2294
background-color: #42A5F5; }
2295
infobar.warning {
2296
background-color: #FFA726; }
2297
infobar.error {
2298
background-color: #EF5350; }
2299
infobar.info > label, infobar.info, infobar.question > label, infobar.question, infobar.warning > label, infobar.warning, infobar.error > label, infobar.error {
2300
color: #FFFFFF; }
2301
2302
/************
2303
* Tooltips *
2304
************/
2305
tooltip {
2306
border-radius: 2px;
2307
box-shadow: none; }
2308
tooltip.background {
2309
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2310
background-color: rgba(255, 255, 255, 0.9); }
2311
tooltip decoration {
2312
background-color: transparent; }
2313
tooltip label {
2314
min-height: 20px;
2315
padding: 0 2px; }
2316
tooltip * {
2317
padding: 0;
2318
background-color: transparent;
2319
color: inherit; }
2320
2321
/*****************
2322
* Color Chooser *
2323
*****************/
2324
colorswatch.top {
2325
border-top-left-radius: 2.5px;
2326
border-top-right-radius: 2.5px; }
2327
colorswatch.top overlay {
2328
border-top-left-radius: 2px;
2329
border-top-right-radius: 2px; }
2330
colorswatch.bottom {
2331
border-bottom-left-radius: 2.5px;
2332
border-bottom-right-radius: 2.5px; }
2333
colorswatch.bottom overlay {
2334
border-bottom-left-radius: 2px;
2335
border-bottom-right-radius: 2px; }
2336
colorswatch.left, colorswatch:first-child:not(.top) {
2337
border-top-left-radius: 2.5px;
2338
border-bottom-left-radius: 2.5px; }
2339
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
2340
border-top-left-radius: 2px;
2341
border-bottom-left-radius: 2px; }
2342
colorswatch.right, colorswatch:last-child:not(.bottom) {
2343
border-top-right-radius: 2.5px;
2344
border-bottom-right-radius: 2.5px; }
2345
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
2346
border-top-right-radius: 2px;
2347
border-bottom-right-radius: 2px; }
2348
colorswatch.dark overlay {
2349
color: #FFFFFF; }
2350
colorswatch.light overlay {
2351
color: rgba(0, 0, 0, 0.8); }
2352
colorswatch.dark {
2353
color: #FFFFFF; }
2354
colorswatch.light {
2355
color: rgba(0, 0, 0, 0.8); }
2356
colorswatch:drop(active) {
2357
box-shadow: none; }
2358
colorswatch:drop(active).light overlay {
2359
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; }
2360
colorswatch:drop(active).dark overlay {
2361
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; }
2362
colorswatch overlay {
2363
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2364
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2365
colorswatch overlay:hover {
2366
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2367
colorswatch#add-color-button {
2368
border-radius: 2px 2px 0 0;
2369
color: #FFFFFF; }
2370
colorswatch#add-color-button:only-child {
2371
border-radius: 2px; }
2372
colorswatch#add-color-button overlay {
2373
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
2374
color: #FFFFFF; }
2375
colorswatch:disabled {
2376
opacity: 0.4; }
2377
colorswatch:disabled overlay {
2378
box-shadow: none; }
2379
colorswatch#editor-color-sample {
2380
border-radius: 2.5px; }
2381
colorswatch#editor-color-sample overlay {
2382
border-radius: 2px; }
2383
2384
colorchooser .popover.osd {
2385
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2386
border-radius: 2px;
2387
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.4);
2388
background-color: #FFFFFF; }
2389
colorchooser .popover.osd:backdrop {
2390
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.4); }
2391
2392
/********
2393
* Misc *
2394
********/
2395
.content-view {
2396
background-color: #F5F5F5; }
2397
2398
/**********************
2399
* Window Decorations *
2400
*********************/
2401
decoration {
2402
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2403
border-radius: 2px 2px 0 0;
2404
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
2405
margin: 8px; }
2406
decoration:backdrop {
2407
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; }
2408
.maximized decoration, .fullscreen decoration, .tiled decoration {
2409
border-radius: 0; }
2410
.popup decoration {
2411
box-shadow: none; }
2412
.ssd decoration {
2413
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); }
2414
.csd.popup decoration {
2415
border-radius: 2px;
2416
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2417
tooltip.csd decoration {
2418
border-radius: 2px;
2419
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
2420
messagedialog.csd decoration {
2421
border-radius: 2px; }
2422
.solid-csd decoration {
2423
margin: 0;
2424
padding: 4px;
2425
box-shadow: inset 0 0 0 4px #455A64; }
2426
2427
.view:selected, iconview:selected, .view text selection, iconview text selection,
2428
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2429
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2430
entry selection, modelbutton.flat:selected,
2431
.menuitem.button.flat:selected, row:selected, calendar:selected {
2432
background-color: #42A5F5; }
2433
row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection,
2434
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
2435
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
2436
entry selection, modelbutton.flat:selected,
2437
.menuitem.button.flat:selected, row:selected, calendar:selected {
2438
color: #FFFFFF; }
2439
row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled,
2440
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,
2441
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled,
2442
entry selection:disabled, modelbutton.flat:disabled:selected,
2443
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected {
2444
color: rgba(255, 255, 255, 0.4); }
2445
2446
.monospace {
2447
font-family: monospace; }
2448
2449
/**********************
2450
* Touch Copy & Paste *
2451
*********************/
2452
cursor-handle {
2453
border-radius: 100px;
2454
background-color: #FF4081;
2455
background-image: none; }
2456
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) {
2457
padding-left: 6px;
2458
border-top-right-radius: 0; }
2459
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) {
2460
padding-right: 6px;
2461
border-top-left-radius: 0; }
2462
cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) {
2463
-GtkWidget-text-handle-width: 24;
2464
-GtkWidget-text-handle-height: 30;
2465
-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
2466
2467
.context-menu {
2468
font: initial; }
2469
2470
.inline-toolbar
2471
button:not(.text-button), check,
2472
radio, button.titlebutton, .nautilus-circular-button,
2473
button.circular {
2474
border-radius: 100px;
2475
-gtk-outline-radius: 100px; }
2476
2477
spinbutton:not(.vertical) button, notebook > header tab button.flat, button.sidebar-button, .gedit-document-panel row button.flat {
2478
min-height: 20px;
2479
min-width: 20px;
2480
padding: 0;
2481
border-radius: 100px;
2482
-gtk-outline-radius: 100px; }
2483
2484
.keycap {
2485
min-width: 12px;
2486
min-height: 26px;
2487
margin-top: 2px;
2488
padding-bottom: 2px;
2489
padding-left: 8px;
2490
padding-right: 8px;
2491
border: solid 1px rgba(0, 0, 0, 0.1);
2492
border-radius: 3px;
2493
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
2494
background-color: #FFFFFF;
2495
color: rgba(0, 0, 0, 0.8);
2496
font-size: smaller; }
2497
2498
*:drop(active) {
2499
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
2500
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;
2501
caret-color: #FF4081; }
2502
2503
stackswitcher button.text-button {
2504
min-width: 100px; }
2505
2506
stackswitcher button.circular,
2507
stackswitcher button.text-button.circular {
2508
min-width: 32px;
2509
min-height: 32px;
2510
padding: 0; }
2511
2512
.floating-bar {
2513
min-height: 32px;
2514
padding: 0;
2515
border-style: solid solid none;
2516
border-width: 1px;
2517
border-color: rgba(0, 0, 0, 0.1);
2518
border-radius: 3px 3px 0 0;
2519
background-color: #FFFFFF;
2520
background-clip: padding-box;
2521
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), border-width 0; }
2522
.floating-bar.left {
2523
margin-right: 7px;
2524
border-left-style: none;
2525
border-top-left-radius: 0; }
2526
.floating-bar.right {
2527
margin-left: 7px;
2528
border-right-style: none;
2529
border-top-right-radius: 0; }
2530
.floating-bar button {
2531
min-height: 24px;
2532
min-width: 24px;
2533
margin: 4px;
2534
padding: 0; }
2535
2536
/************
2537
* Nautilus *
2538
************/
2539
.nautilus-window,
2540
.nautilus-window notebook,
2541
.nautilus-window notebook > stack {
2542
background: #FFFFFF; }
2543
2544
.nautilus-desktop-window,
2545
.nautilus-desktop-window notebook,
2546
.nautilus-desktop-window notebook > stack {
2547
background: transparent; }
2548
2549
.nautilus-desktop.nautilus-canvas-item {
2550
color: #FFFFFF;
2551
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2552
2553
.nautilus-desktop.nautilus-canvas-item:selected {
2554
text-shadow: none; }
2555
2556
@keyframes needs_attention_keyframes {
2557
0% {
2558
background-color: transparent; }
2559
50% {
2560
background-color: alpha(currentColor, 0.3); }
2561
100% {
2562
background-color: transparent; } }
2563
.nautilus-operations-button-needs-attention {
2564
color: #FF4081;
2565
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
2566
2567
.nautilus-operations-button-needs-attention-multiple {
2568
color: #FF4081;
2569
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2570
animation-iteration-count: 2; }
2571
2572
.disk-space-display.unknown {
2573
background-color: #FF6D00; }
2574
2575
.disk-space-display.used {
2576
background-color: #42A5F5; }
2577
2578
.disk-space-display.free {
2579
background-color: alpha(currentColor, 0.3);
2580
color: rgba(0, 0, 0, 0.32); }
2581
2582
.documents-entry-tag {
2583
margin: 3px -2px 3px 8px;
2584
padding: 0 8px;
2585
border-radius: 100px;
2586
box-shadow: none;
2587
background-color: #42A5F5;
2588
color: #FFFFFF; }
2589
.documents-entry-tag:hover {
2590
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
2591
2592
.documents-entry-tag.button {
2593
margin: 0 -2px;
2594
padding: 4px;
2595
border-radius: 100px;
2596
box-shadow: none;
2597
color: rgba(255, 255, 255, 0.75); }
2598
.documents-entry-tag.button:hover, .documents-entry-tag.button:active {
2599
color: #FFFFFF; }
2600
2601
.nautilus-window searchbar {
2602
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2603
2604
.nautilus-window .searchbar-container {
2605
margin-top: -1px; }
2606
2607
/*********
2608
* gedit *
2609
*********/
2610
/* Only normal state is handle */
2611
.open-document-selector-name-label {
2612
font-weight: bold; }
2613
2614
/* Only normal state is handle */
2615
.open-document-selector-path-label {
2616
color: alpha(currentColor, 0.6);
2617
font-size: smaller; }
2618
2619
.gedit-document-panel {
2620
background-color: #FAFAFA; }
2621
2622
.gedit-document-panel-group-row,
2623
.gedit-document-panel-group-row:hover {
2624
border-top: 1px solid alpha(currentColor, 0.3); }
2625
2626
.gedit-document-panel-group-row:first-child,
2627
.gedit-document-panel-group-row:first-child:hover {
2628
border-top: 0px; }
2629
2630
/* Try to look as the notebook tab close button */
2631
.gedit-document-panel row button.flat {
2632
margin-top: 8px;
2633
margin-bottom: 8px; }
2634
2635
.gedit-side-panel-paned statusbar {
2636
border-top: 1px solid rgba(0, 0, 0, 0.1); }
2637
2638
.gedit-search-slider {
2639
margin: 4px 4px 8px; }
2640
.gedit-search-slider .gedit-search-entry-occurrences-tag {
2641
all: unset;
2642
padding: 0 4px;
2643
color: alpha(currentColor, 0.6); }
2644
.gedit-search-slider entry:dir(ltr) {
2645
margin-right: -64px;
2646
padding-right: 72px; }
2647
.gedit-search-slider entry:dir(ltr) .gedit-search-entry-occurrences-tag {
2648
margin-right: -8px; }
2649
.gedit-search-slider entry:dir(rtl) {
2650
margin-left: -64px;
2651
padding-left: 72px; }
2652
.gedit-search-slider entry:dir(rtl) .gedit-search-entry-occurrences-tag {
2653
margin-left: -8px; }
2654
.gedit-search-slider entry.error ~ button {
2655
color: rgba(255, 255, 255, 0.75); }
2656
.gedit-search-slider entry.error ~ button:hover, .gedit-search-slider entry.error ~ button:active {
2657
color: #FFFFFF; }
2658
.gedit-search-slider entry.error ~ button:disabled {
2659
color: rgba(255, 255, 255, 0.3); }
2660
2661
.gedit-search-slider .linked:not(.vertical) > entry,
2662
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
2663
border-radius: 2px; }
2664
2665
/**************
2666
* Tweak Tool *
2667
**************/
2668
.tweak-categories {
2669
background-image: image(#FAFAFA); }
2670
.tweak-categories separator {
2671
min-width: 0;
2672
min-height: 0;
2673
background: transparent; }
2674
2675
.tweak {
2676
padding: 3px; }
2677
2678
.tweak.title:hover {
2679
box-shadow: none; }
2680
2681
.tweak-group-white,
2682
.tweak-white,
2683
.tweak-white:hover {
2684
background-image: image(#FFFFFF); }
2685
2686
.tweak-startup,
2687
.tweak-startup:hover {
2688
background-image: image(#FFFFFF); }
2689
2690
.tweak-group-startup {
2691
background-image: image(#FFFFFF);
2692
border: 1px solid rgba(0, 0, 0, 0.1); }
2693
2694
/***********
2695
* Builder *
2696
***********/
2697
workbench stack.titlebar {
2698
padding: 0; }
2699
2700
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
2701
border-radius: 2px 2px 0 0; }
2702
2703
perspectiveswitcher {
2704
background-color: #F5F5F5; }
2705
2706
perspectiveswitcher button:checked {
2707
color: #42A5F5; }
2708
2709
layouttabbar {
2710
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2711
background-color: #F5F5F5; }
2712
2713
layouttabbar > box > button {
2714
margin: 4px 0; }
2715
2716
layouttab {
2717
margin: 0 8px;
2718
border-style: none solid;
2719
border-width: 1px;
2720
border-color: rgba(0, 0, 0, 0.1);
2721
box-shadow: inset 0 -2px #42A5F5;
2722
background-color: #FFFFFF; }
2723
2724
layouttab separator.vertical {
2725
margin: 8px 4px; }
2726
2727
layouttab button.text-button, layouttab button.image-button, layouttab button {
2728
margin-top: 8px;
2729
margin-bottom: 8px;
2730
padding: 0 4px; }
2731
2732
layouttab > box > button.close {
2733
border-radius: 100px; }
2734
2735
layout {
2736
border: 1px solid rgba(0, 0, 0, 0.1);
2737
-PnlDockBin-handle-size: 1; }
2738
2739
entry.search-missing {
2740
background-color: #DD2C00;
2741
color: #FFFFFF; }
2742
2743
workbench treeview.image {
2744
color: alpha(currentColor, 0.6); }
2745
2746
workbench treeview.image:selected {
2747
color: rgba(255, 255, 255, 0.6); }
2748
2749
dockbin {
2750
border: 1px solid rgba(0, 0, 0, 0.1);
2751
-PnlDockBin-handle-size: 1; }
2752
2753
dockpaned {
2754
border: 1px solid rgba(0, 0, 0, 0.1); }
2755
2756
eggsearchbar box.search-bar {
2757
padding: 0 8px;
2758
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2759
background-color: #F5F5F5; }
2760
2761
docktabstrip {
2762
padding: 0 8px;
2763
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2764
background-color: #F5F5F5; }
2765
2766
docktab {
2767
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
2768
min-height: 20px;
2769
min-width: 20px;
2770
margin-bottom: -1px;
2771
padding: 6px 6px;
2772
outline-offset: -6px;
2773
border-width: 1px;
2774
border-color: transparent;
2775
color: rgba(0, 0, 0, 0.6);
2776
font-weight: 500; }
2777
docktab:hover {
2778
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
2779
color: rgba(0, 0, 0, 0.8); }
2780
docktab:checked {
2781
animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1);
2782
box-shadow: inset 0 -2px #42A5F5;
2783
color: rgba(0, 0, 0, 0.8); }
2784
2785
dockoverlayedge {
2786
background-color: #F5F5F5; }
2787
2788
dockoverlayedge docktabstrip {
2789
padding: 0;
2790
border: none; }
2791
2792
dockoverlayedge.left-edge docktab:checked {
2793
border-right-color: #42A5F5;
2794
border-bottom-color: transparent; }
2795
2796
dockoverlayedge.right-edge docktab:checked {
2797
border-left-color: #42A5F5;
2798
border-bottom-color: transparent; }
2799
2800
pillbox {
2801
background-color: #F5F5F5;
2802
border-radius: 2px; }
2803
2804
layoutpane entry.search {
2805
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
2806
background-color: #FFFFFF; }
2807
2808
editortweak entry.search {
2809
margin-bottom: -1px;
2810
box-shadow: none; }
2811
2812
frame.gb-search-frame {
2813
border-bottom-right-radius: 5px; }
2814
2815
.gb-search-entry-occurrences-tag {
2816
box-shadow: none;
2817
background-color: transparent; }
2818
2819
docktabstrip {
2820
min-height: 39px; }
2821
2822
workbench preferences preferencesgroup list entry {
2823
padding-top: 8px;
2824
padding-bottom: 8px; }
2825
2826
/***********
2827
* Firefox *
2828
***********/
2829
menubar {
2830
color: rgba(255, 255, 255, 0.75); }
2831
menubar:hover {
2832
color: #FFFFFF; }
2833
2834
separator {
2835
color: rgba(0, 0, 0, 0.1); }
2836
2837
/* FIXME: not working */
2838
window.background > widget > check,
2839
window.background > widget > radio {
2840
margin: 0;
2841
padding: 0; }
2842
2843
window.background > widget > radio:checked {
2844
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png")));
2845
border-image: none; }
2846
2847
/***********
2848
* Synapse *
2849
***********/
2850
box > widget > widget:selected {
2851
background-color: #42A5F5; }
2852
2853
/*********
2854
* Unity *
2855
*********/
2856
UnityDecoration {
2857
-UnityDecoration-extents: 28px 0 0 0;
2858
-UnityDecoration-input-extents: 8px;
2859
-UnityDecoration-shadow-offset-x: 0;
2860
-UnityDecoration-shadow-offset-y: 3px;
2861
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
2862
-UnityDecoration-active-shadow-radius: 18px;
2863
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
2864
-UnityDecoration-inactive-shadow-radius: 6px;
2865
-UnityDecoration-glow-size: 8px;
2866
-UnityDecoration-glow-color: #42A5F5;
2867
-UnityDecoration-title-indent: 4px;
2868
-UnityDecoration-title-fade: 32px;
2869
-UnityDecoration-title-alignment: 0.0; }
2870
2871
UnityDecoration.top {
2872
padding: 0 2px;
2873
border-style: none;
2874
border-radius: 2px 2px 0 0;
2875
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
2876
background-color: #37474F;
2877
color: #FFFFFF; }
2878
2879
UnityDecoration.top:backdrop {
2880
color: rgba(255, 255, 255, 0.75); }
2881
2882
UnityDecoration.menuitem,
2883
UnityDecoration .menuitem {
2884
color: alpha(currentColor, 0.75); }
2885
2886
UnityDecoration.menubar.menuitem:hover,
2887
UnityDecoration.menubar .menuitem *:hover {
2888
box-shadow: inset 0 -2px currentColor;
2889
background-color: transparent;
2890
color: currentColor; }
2891
2892
.background:not(.csd) headerbar {
2893
border-radius: 0;
2894
box-shadow: none; }
2895
.background:not(.csd) headerbar.inline-toolbar {
2896
border-style: none; }
2897
2898
UnityPanelWidget,
2899
.unity-panel {
2900
background-color: #263238;
2901
background-image: image(#263238);
2902
color: #FFFFFF; }
2903
2904
UnityPanelWidget:backdrop,
2905
.unity-panel:backdrop {
2906
color: rgba(255, 255, 255, 0.75); }
2907
2908
.unity-panel.menuitem,
2909
.unity-panel .menuitem {
2910
color: alpha(currentColor, 0.75); }
2911
2912
.unity-panel.menubar.menuitem:hover,
2913
.unity-panel.menubar .menuitem *:hover {
2914
box-shadow: inset 0 -2px currentColor;
2915
background-color: transparent;
2916
color: currentColor; }
2917
2918
@keyframes playbackmenuitem_spinner {
2919
to {
2920
-gtk-icon-transform: rotate(1turn); } }
2921
.menu IdoPlaybackMenuItem.menuitem:active {
2922
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
2923
animation: playbackmenuitem_spinner 1s infinite linear;
2924
color: #42A5F5; }
2925
2926
/* GTK NAMED COLORS
2927
----------------
2928
use responsibly! */
2929
/*
2930
widget text/foreground color */
2931
@define-color theme_fg_color rgba(0, 0, 0, 0.8);
2932
/*
2933
text color for entries, views and content in general */
2934
@define-color theme_text_color rgba(0, 0, 0, 0.8);
2935
/*
2936
widget base background color */
2937
@define-color theme_bg_color #F5F5F5;
2938
/*
2939
text widgets and the like base background color */
2940
@define-color theme_base_color #FFFFFF;
2941
/*
2942
base background color of selections */
2943
@define-color theme_selected_bg_color #42A5F5;
2944
/*
2945
text/foreground color of selections */
2946
@define-color theme_selected_fg_color #FFFFFF;
2947
/*
2948
base background color of insensitive widgets */
2949
@define-color insensitive_bg_color #F5F5F5;
2950
/*
2951
text foreground color of insensitive widgets */
2952
@define-color insensitive_fg_color rgba(0, 0, 0, 0.32);
2953
/*
2954
insensitive text widgets and the like base background color */
2955
@define-color insensitive_base_color #fafafa;
2956
/*
2957
widget text/foreground color on backdrop windows */
2958
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8);
2959
/*
2960
text color for entries, views and content in general on backdrop windows */
2961
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8);
2962
/*
2963
widget base background color on backdrop windows */
2964
@define-color theme_unfocused_bg_color #F5F5F5;
2965
/*
2966
text widgets and the like base background color on backdrop windows */
2967
@define-color theme_unfocused_base_color #FFFFFF;
2968
/*
2969
base background color of selections on backdrop windows */
2970
@define-color theme_unfocused_selected_bg_color #42A5F5;
2971
/*
2972
text/foreground color of selections on backdrop windows */
2973
@define-color theme_unfocused_selected_fg_color #FFFFFF;
2974
/*
2975
insensitive color on backdrop windows*/
2976
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.32);
2977
/*
2978
widgets main borders color */
2979
@define-color borders rgba(0, 0, 0, 0.1);
2980
/*
2981
widgets main borders color on backdrop windows */
2982
@define-color unfocused_borders rgba(0, 0, 0, 0.1);
2983
/*
2984
these are pretty self explicative */
2985
@define-color warning_color #FF6D00;
2986
@define-color error_color #DD2C00;
2987
@define-color success_color #00C853;
2988
@define-color content_view_bg #FFFFFF;
2989
@define-color placeholder_text_color rgba(128, 128, 128, 0.88);
2990