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