ASCII text, with very long lines (434)
1
@keyframes ripple_effect {
2
from {
3
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(alpha(currentColor, 0.12)), to(transparent));
4
}
5
to {
6
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent));
7
}
8
}
9
* {
11
padding: 0;
12
background-clip: padding-box;
13
-GtkToolButton-icon-spacing: 4;
14
-GtkTextView-error-underline-color: #EA4335;
15
-GtkCheckButton-indicator-size: 24;
16
-GtkCheckMenuItem-indicator-size: 16;
17
-GtkScrolledWindow-scrollbar-spacing: 0;
18
-GtkScrolledWindow-scrollbars-within-bevel: 1;
19
-GtkToolItemGroup-expander-size: 11;
20
-GtkExpander-expander-size: 16;
21
-GtkTreeView-expander-size: 11;
22
-GtkTreeView-horizontal-separator: 4;
23
-GtkMenu-horizontal-padding: 0;
24
-GtkMenu-vertical-padding: 0;
25
-GtkWidget-link-color: #4285F4;
26
-GtkWidget-visited-link-color: #E040FB;
27
-GtkWidget-focus-padding: 2;
28
-GtkWidget-focus-line-width: 1;
29
-GtkWidget-text-handle-width: 20;
30
-GtkWidget-text-handle-height: 20;
31
-GtkDialog-button-spacing: 4;
32
-GtkDialog-action-area-border: 0;
33
-GtkStatusbar-shadow-type: none;
34
outline-style: solid;
35
outline-width: 2px;
36
outline-color: alpha(currentColor, 0.24);
37
outline-offset: -4px;
38
outline-radius: 4px;
39
}
40
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: #F2F2F2;
46
color: rgba(0, 0, 0, 0.87);
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:insensitive {
56
-gtk-image-effect: dim;
57
}
58
.gtkstyle-fallback {
60
background-color: #F2F2F2;
61
color: rgba(0, 0, 0, 0.87);
62
}
63
.gtkstyle-fallback:prelight {
65
background-color: #e5e5e5;
66
color: rgba(0, 0, 0, 0.87);
67
}
68
.gtkstyle-fallback:active {
70
background-color: #d9d9d9;
71
color: rgba(0, 0, 0, 0.87);
72
}
73
.gtkstyle-fallback:insensitive {
75
background-color: #F2F2F2;
76
color: rgba(0, 0, 0, 0.38);
77
}
78
.gtkstyle-fallback:selected {
80
background-color: #4285F4;
81
color: white;
82
}
83
.view {
85
background-color: #FFFFFF;
86
color: rgba(0, 0, 0, 0.87);
87
}
88
.view:hover, .view:active, .view:selected, GtkCalendar:selected {
90
border-radius: 4px;
91
}
92
.view:insensitive {
94
color: rgba(0, 0, 0, 0.38);
95
}
96
.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
98
border: 1px solid #7BAAF7;
99
background-color: rgba(123, 170, 247, 0.3);
100
}
101
.label.separator {
103
color: rgba(0, 0, 0, 0.87);
104
}
105
.label:insensitive {
107
color: rgba(0, 0, 0, 0.38);
108
}
109
.dim-label, .label.separator, .titlebar .subtitle,
111
.header-bar .subtitle {
112
opacity: 0.6;
113
}
114
GtkAssistant .sidebar {
116
padding: 6px 0;
117
}
118
GtkAssistant .sidebar:dir(ltr) {
120
border-right: 1px solid rgba(0, 0, 0, 0.12);
121
}
122
GtkAssistant .sidebar:dir(rtl) {
124
border-left: 1px solid rgba(0, 0, 0, 0.12);
125
}
126
GtkAssistant .sidebar .label {
128
opacity: 0.5;
129
padding: 5px 12px 6px;
130
font-weight: 500;
131
}
132
GtkAssistant .sidebar .label.highlight {
134
opacity: 1;
135
}
136
GtkTextView {
138
background-color: #FAFAFA;
139
}
140
.grid-child {
142
padding: 4px;
143
border-radius: 4px;
144
}
145
/*********************
147
* Spinner Animation *
148
*********************/
149
@keyframes spin {
150
to {
151
-gtk-icon-transform: rotate(1turn);
152
}
153
}
154
.spinner {
156
background-color: blue;
157
background-image: none;
158
opacity: 0;
159
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
160
}
161
.spinner:active {
163
opacity: 1;
164
animation: spin 1s linear infinite;
165
}
166
.spinner:active:insensitive {
168
opacity: 0.5;
169
}
170
/****************
172
* Text Entries *
173
****************/
174
.entry {
175
padding: 7px 8px 8px;
176
border-radius: 4px;
177
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
178
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
179
background-color: #FFFFFF;
180
color: rgba(0, 0, 0, 0.87);
181
}
182
.entry:focus {
184
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
185
}
186
.entry:insensitive {
188
color: rgba(0, 0, 0, 0.38);
189
background-color: #FAFAFA;
190
}
191
.entry.flat, .notebook GtkGrid > .entry {
193
border-radius: 0;
194
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1);
195
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#4285F4), to(transparent)) 0 0 0/0 0 0px;
196
border-radius: 0;
197
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
198
background-color: transparent;
199
color: rgba(0, 0, 0, 0.87);
200
}
201
.entry.flat:focus, .notebook GtkGrid > .entry:focus {
203
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#4285F4), to(transparent)) 0 0 2/0 0 2px;
204
box-shadow: inset 0 -2px #4285F4;
205
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
206
}
207
.entry.flat:insensitive, .notebook GtkGrid > .entry:insensitive {
209
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
210
background-color: transparent;
211
color: rgba(0, 0, 0, 0.38);
212
}
213
.entry.image.left {
215
padding-left: 2px;
216
}
217
.entry.image.right {
219
padding-right: 2px;
220
}
221
.entry.progressbar, GtkTreeView.view.progressbar, GtkTreeView.view.trough {
223
margin: 2px;
224
border-style: none none solid;
225
border-width: 2px;
226
border-color: #4285F4;
227
border-radius: 0;
228
box-shadow: none;
229
background-color: transparent;
230
background-image: none;
231
}
232
.linked > .entry.flat, .notebook GtkGrid.linked > .entry,
234
.linked.vertical > .entry.flat, .notebook
235
GtkGrid.linked.vertical > .entry {
236
border-radius: 0;
237
}
238
.entry.error {
240
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
241
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
242
background-color: #EA4335;
243
color: white;
244
}
245
.entry.error:focus {
247
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
248
}
249
.entry.error:insensitive {
251
color: rgba(0, 0, 0, 0.38);
252
background-color: #FAFAFA;
253
}
254
.entry.error.flat, .notebook GtkGrid > .error.entry {
256
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1);
257
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#EA4335), to(transparent)) 0 0 0/0 0 0px;
258
border-radius: 0;
259
box-shadow: inset 0 -1px #EA4335;
260
background-color: transparent;
261
color: rgba(0, 0, 0, 0.87);
262
}
263
.entry.error.flat:focus, .notebook GtkGrid > .error.entry:focus {
265
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#EA4335), to(transparent)) 0 0 2/0 0 2px;
266
box-shadow: inset 0 -2px #EA4335;
267
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
268
}
269
.entry.error.flat:insensitive, .notebook GtkGrid > .error.entry:insensitive {
271
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
272
background-color: transparent;
273
color: rgba(0, 0, 0, 0.38);
274
}
275
.entry.warning {
277
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
278
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
279
background-color: #FBBC05;
280
color: white;
281
}
282
.entry.warning:focus {
284
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
285
}
286
.entry.warning:insensitive {
288
color: rgba(0, 0, 0, 0.38);
289
background-color: #FAFAFA;
290
}
291
.entry.warning.flat, .notebook GtkGrid > .warning.entry {
293
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1);
294
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#FBBC05), to(transparent)) 0 0 0/0 0 0px;
295
border-radius: 0;
296
box-shadow: inset 0 -1px #FBBC05;
297
background-color: transparent;
298
color: rgba(0, 0, 0, 0.87);
299
}
300
.entry.warning.flat:focus, .notebook GtkGrid > .warning.entry:focus {
302
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#FBBC05), to(transparent)) 0 0 2/0 0 2px;
303
box-shadow: inset 0 -2px #FBBC05;
304
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
305
}
306
.entry.warning.flat:insensitive, .notebook GtkGrid > .warning.entry:insensitive {
308
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
309
background-color: transparent;
310
color: rgba(0, 0, 0, 0.38);
311
}
312
.entry.image:not(:hover):not(:active) {
314
color: alpha(currentColor, 0.7);
315
}
316
.entry.image:insensitive {
318
color: alpha(currentColor, 0.5);
319
}
320
GtkTreeView .entry:not(:selected), GtkTreeView .entry:not(:selected):focus {
322
padding: 2px;
323
border-image: none;
324
border-radius: 0;
325
box-shadow: none;
326
background-color: #FFFFFF;
327
}
328
/***********
330
* Buttons *
331
***********/
332
@keyframes needs_attention {
333
from {
334
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#01A299), to(transparent));
335
}
336
to {
337
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#01A299), to(transparent));
338
}
339
}
340
.button {
343
padding: 7px 10px 8px;
344
border-radius: 4px;
345
background-repeat: no-repeat;
346
background-position: center;
347
background-size: 90px 90px;
348
font-weight: 500;
349
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-image 900ms cubic-bezier(0, 0, 0.2, 1);
350
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;
351
background-color: #FAFAFA;
352
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
353
color: rgba(0, 0, 0, 0.62);
354
}
355
.button:hover {
358
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;
359
color: rgba(0, 0, 0, 0.87);
360
}
361
.button:active {
364
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
365
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
366
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.08);
367
color: rgba(0, 0, 0, 0.87);
368
}
369
.button:insensitive {
372
box-shadow: none;
373
background-color: alpha(currentColor, 0.24);
374
color: rgba(0, 0, 0, 0.26);
375
}
376
.button:insensitive > .label {
379
color: inherit;
380
}
381
.button:checked {
384
background-color: #4285F4;
385
color: white;
386
}
387
.button:checked:insensitive {
390
background-color: rgba(66, 133, 244, 0.3);
391
color: rgba(66, 133, 244, 0.5);
392
}
393
.button:checked:insensitive > .label {
396
color: inherit;
397
}
398
.spinbutton .button, .popover .linked > .button, .notebook tab .button, GtkCalendar.button, .message-dialog.csd .dialog-action-area .button, .sidebar-button.button, .toolbar:not(.search-bar) .button, .titlebar .button:not(.suggested-action):not(.destructive-action),
400
.header-bar .button:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:not(.suggested-action):not(.destructive-action), .app-notification .button,
401
.app-notification.frame .button,
402
.button.flat {
403
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-image 900ms cubic-bezier(0, 0, 0.2, 1);
404
box-shadow: inset 0 0 0 9999px transparent;
405
background-color: transparent;
406
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
407
color: alpha(currentColor, 0.7);
408
}
409
.spinbutton .button:hover, .popover .linked > .button:hover, .notebook tab .button:hover, GtkCalendar.button:hover, .message-dialog.csd .dialog-action-area .button:hover, .sidebar-button.button:hover, .toolbar:not(.search-bar) .button:hover, .titlebar .button:hover:not(.suggested-action):not(.destructive-action),
411
.header-bar .button:hover:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:hover:not(.suggested-action):not(.destructive-action), .app-notification .button:hover,
412
.button.flat:hover {
413
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
414
color: currentColor;
415
}
416
.spinbutton .button:active, .popover .linked > .button:active, .notebook tab .button:active, GtkCalendar.button:active, .message-dialog.csd .dialog-action-area .button:active, .sidebar-button.button:active, .toolbar:not(.search-bar) .button:active, .titlebar .button:active:not(.suggested-action):not(.destructive-action),
418
.header-bar .button:active:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:active:not(.suggested-action):not(.destructive-action), .app-notification .button:active,
419
.button.flat:active {
420
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
421
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
422
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
423
color: currentColor;
424
}
425
.spinbutton .button:insensitive, .popover .linked > .button:insensitive, .notebook tab .button:insensitive, GtkCalendar.button:insensitive, .message-dialog.csd .dialog-action-area .button:insensitive, .sidebar-button.button:insensitive, .toolbar:not(.search-bar) .button:insensitive, .titlebar .button:insensitive:not(.suggested-action):not(.destructive-action),
427
.header-bar .button:insensitive:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:insensitive:not(.suggested-action):not(.destructive-action), .app-notification .button:insensitive,
428
.button.flat:insensitive {
429
box-shadow: none;
430
background-color: transparent;
431
color: alpha(currentColor, 0.3);
432
}
433
.spinbutton .button:insensitive > .label, .popover .linked > .button:insensitive > .label, .notebook tab .button:insensitive > .label, GtkCalendar.button:insensitive > .label, .message-dialog.csd .dialog-action-area .button:insensitive > .label, .sidebar-button.button:insensitive > .label, .toolbar:not(.search-bar) .button:insensitive > .label, .titlebar .button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
435
.header-bar .button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .frame.action-bar .button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .app-notification .button:insensitive > .label,
436
.button.flat:insensitive > .label {
437
color: inherit;
438
}
439
.toolbar:not(.search-bar) .button:checked, .titlebar .button:checked:not(.suggested-action):not(.destructive-action),
441
.header-bar .button:checked:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:checked:not(.suggested-action):not(.destructive-action), .app-notification .button:checked,
442
.button.flat:checked {
443
background-color: alpha(currentColor, 0.24);
444
color: currentColor;
445
}
446
.toolbar:not(.search-bar) .button:checked:insensitive, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action),
448
.header-bar .button:checked:insensitive:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:checked:insensitive:not(.suggested-action):not(.destructive-action), .app-notification .button:checked:insensitive,
449
.button.flat:checked:insensitive {
450
background-color: alpha(currentColor, 0.24);
451
color: alpha(currentColor, 0.5);
452
}
453
.toolbar:not(.search-bar) .button:checked:insensitive > .label, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label,
455
.header-bar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label, .frame.action-bar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label, .app-notification .button:checked:insensitive > .label,
456
.button.flat:checked:insensitive > .label {
457
color: inherit;
458
}
459
.button.osd.image-button {
462
padding: 16px;
463
background-size: 60px 60px;
464
}
465
.button.osd:insensitive {
468
opacity: 0;
469
}
470
.button.suggested-action {
473
background-color: #01A299;
474
color: white;
475
}
476
.button.suggested-action:insensitive {
479
box-shadow: none;
480
background-color: alpha(currentColor, 0.24);
481
color: rgba(0, 0, 0, 0.38);
482
}
483
.button.suggested-action:insensitive > .label {
486
color: inherit;
487
}
488
.button.suggested-action:checked {
491
background-color: #4dbeb8;
492
}
493
.toolbar:not(.search-bar) .suggested-action.button, .titlebar .suggested-action.button:not(.suggested-action):not(.destructive-action),
495
.header-bar .suggested-action.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .suggested-action.button:not(.suggested-action):not(.destructive-action), .app-notification .suggested-action.button,
496
.button.suggested-action.flat {
497
background-color: transparent;
498
color: #01A299;
499
}
500
.toolbar:not(.search-bar) .suggested-action.button:insensitive, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action),
502
.header-bar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action), .frame.action-bar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action), .app-notification .suggested-action.button:insensitive,
503
.button.suggested-action.flat:insensitive {
504
box-shadow: none;
505
background-color: transparent;
506
color: alpha(currentColor, 0.5);
507
}
508
.toolbar:not(.search-bar) .suggested-action.button:insensitive > .label, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
510
.header-bar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .frame.action-bar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .app-notification .suggested-action.button:insensitive > .label,
511
.button.suggested-action.flat:insensitive > .label {
512
color: inherit;
513
}
514
.toolbar:not(.search-bar) .suggested-action.button:checked, .titlebar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action),
516
.header-bar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action), .frame.action-bar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action), .app-notification .suggested-action.button:checked,
517
.button.suggested-action.flat:checked {
518
background-color: alpha(currentColor, 0.24);
519
}
520
.button.destructive-action {
523
background-color: #EA4335;
524
color: white;
525
}
526
.button.destructive-action:insensitive {
529
box-shadow: none;
530
background-color: alpha(currentColor, 0.24);
531
color: rgba(0, 0, 0, 0.38);
532
}
533
.button.destructive-action:insensitive > .label {
536
color: inherit;
537
}
538
.button.destructive-action:checked {
541
background-color: #f07b72;
542
}
543
.toolbar:not(.search-bar) .destructive-action.button, .titlebar .destructive-action.button:not(.suggested-action):not(.destructive-action),
545
.header-bar .destructive-action.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .destructive-action.button:not(.suggested-action):not(.destructive-action), .app-notification .destructive-action.button,
546
.button.destructive-action.flat {
547
background-color: transparent;
548
color: #EA4335;
549
}
550
.toolbar:not(.search-bar) .destructive-action.button:insensitive, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action),
552
.header-bar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action), .frame.action-bar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action), .app-notification .destructive-action.button:insensitive,
553
.button.destructive-action.flat:insensitive {
554
box-shadow: none;
555
background-color: transparent;
556
color: alpha(currentColor, 0.5);
557
}
558
.toolbar:not(.search-bar) .destructive-action.button:insensitive > .label, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
560
.header-bar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .frame.action-bar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .app-notification .destructive-action.button:insensitive > .label,
561
.button.destructive-action.flat:insensitive > .label {
562
color: inherit;
563
}
564
.toolbar:not(.search-bar) .destructive-action.button:checked, .titlebar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action),
566
.header-bar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action), .frame.action-bar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action), .app-notification .destructive-action.button:checked,
567
.button.destructive-action.flat:checked {
568
background-color: alpha(currentColor, 0.24);
569
}
570
.button.text-button,
573
GtkScaleButton.button.text-button,
574
GtkVolumeButton.button.text-button {
575
padding-left: 16px;
576
padding-right: 16px;
577
}
578
.button.text-button.image-button {
581
padding: 7px 10px 8px;
582
outline-radius: 4px;
583
border-radius: 4px;
584
background-size: 90px 90px;
585
}
586
.button.text-button.image-button .label:first-child {
589
padding-left: 6px;
590
}
591
.button.text-button.image-button .label:last-child {
594
padding-right: 6px;
595
}
596
.stack-switcher >
598
.button {
599
outline-offset: -4px;
600
}
601
.stack-switcher >
603
.button > .label {
604
padding-left: 6px;
605
padding-right: 6px;
606
}
607
.stack-switcher >
609
.button > GtkImage {
610
padding-left: 6px;
611
padding-right: 6px;
612
padding-top: 3px;
613
padding-bottom: 3px;
614
}
615
.stack-switcher >
618
.button.text-button {
619
padding: 7px 10px 8px;
620
}
621
.stack-switcher >
623
.button.image-button {
624
padding: 7px 4px;
625
}
626
.stack-switcher >
628
.button.needs-attention:checked > .label,
629
.stack-switcher >
630
.button.needs-attention:checked > GtkImage {
631
animation: none;
632
background-image: none;
633
}
634
.primary-toolbar
636
.button {
637
icon-shadow: none;
638
}
639
.toolbar:not(.search-bar) .linked > .button, .titlebar .linked > .button:not(.suggested-action):not(.destructive-action),
641
.header-bar .linked > .button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .button, .toolbar:not(.search-bar)
642
.linked.vertical > .button, .titlebar
643
.linked.vertical > .button:not(.suggested-action):not(.destructive-action),
644
.header-bar
645
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .frame.action-bar
646
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .app-notification
647
.linked.vertical > .button, .linked >
648
.button.flat,
649
.linked.vertical >
650
.button.flat {
651
border-radius: 4px;
652
}
653
.toolbar:not(.search-bar) .linked > .image-button.button, .titlebar .linked > .image-button.button:not(.suggested-action):not(.destructive-action),
655
.header-bar .linked > .image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .image-button.button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .image-button.button, .toolbar:not(.search-bar)
656
.linked.vertical > .image-button.button, .titlebar
657
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
658
.header-bar
659
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
660
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
661
.linked.vertical > .image-button.button, .linked >
662
.button.flat.image-button,
663
.linked.vertical >
664
.button.flat.image-button {
665
outline-radius: 9999px;
666
border-radius: 9999px;
667
}
668
.toolbar:not(.search-bar) .linked > .text-button.image-button.button, .titlebar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
670
.header-bar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .text-button.image-button.button, .toolbar:not(.search-bar)
671
.linked.vertical > .text-button.image-button.button, .titlebar
672
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
673
.header-bar
674
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
675
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
676
.linked.vertical > .text-button.image-button.button,
677
.linked >
678
.button.flat.text-button.image-button,
679
.linked.vertical >
680
.button.flat.text-button.image-button {
681
outline-radius: 4px;
682
border-radius: 4px;
683
}
684
.button.image-button, .inline-toolbar .button, .spinbutton .button, .notebook tab .button, GtkScaleButton.button,
687
GtkVolumeButton.button, .header-bar .button.titlebutton,
688
.titlebar .button.titlebutton, .nautilus-circular-button {
689
padding: 10px;
690
outline-radius: 100px;
691
border-radius: 100px;
692
background-size: 45px 45px;
693
}
694
.stack-switcher >
696
.button.needs-attention > .label,
697
.stack-switcher >
698
.button.needs-attention > GtkImage, .sidebar-item.needs-attention > .label {
699
animation: needs_attention 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
700
background-repeat: no-repeat;
701
background-position: right 3px;
702
background-size: 6px 6px;
703
}
704
.stack-switcher >
706
.button.needs-attention > .label:dir(rtl),
707
.stack-switcher >
708
.button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > .label:dir(rtl) {
709
background-position: left 3px;
710
}
711
.linked > .entry, .linked > .button, .linked > GtkComboBox > .the-button-in-the-combobox:dir(ltr), .linked > GtkComboBox > .the-button-in-the-combobox:dir(rtl),
713
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(ltr),
714
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(rtl) {
715
outline-radius: 4px;
716
border-radius: 0;
717
}
718
.linked > .entry:first-child, .linked > .button:first-child, .linked > GtkComboBox:first-child > .the-button-in-the-combobox,
720
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
721
border-top-left-radius: 4px;
722
border-bottom-left-radius: 4px;
723
}
724
.linked > .entry:last-child, .linked > .button:last-child, .linked > GtkComboBox:last-child > .the-button-in-the-combobox,
726
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
727
border-top-right-radius: 4px;
728
border-bottom-right-radius: 4px;
729
}
730
.linked > .entry:only-child, .linked > .button:only-child, .linked > GtkComboBox:only-child > .the-button-in-the-combobox,
732
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
733
border-radius: 4px;
734
}
735
.linked.vertical > .entry, .linked.vertical > .button, .linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
737
.linked.vertical > GtkComboBox > .the-button-in-the-combobox {
738
outline-radius: 4px;
739
border-radius: 0;
740
}
741
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
743
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox {
744
border-top-left-radius: 4px;
745
border-top-right-radius: 4px;
746
}
747
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
749
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox {
750
border-bottom-left-radius: 4px;
751
border-bottom-right-radius: 4px;
752
}
753
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
755
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox {
756
border-radius: 4px;
757
}
758
/* menu buttons */
760
GtkColorButton.button {
761
padding: 7px 8px 8px;
762
}
763
GtkColorButton.button GtkColorSwatch:first-child:last-child {
765
border-radius: 4px;
766
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
767
}
768
/*********
770
* Links *
771
*********/
772
*:link, .button:link, .button:visited {
773
color: #4285F4;
774
}
775
*:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited {
777
color: #4285F4;
778
}
779
*:link:visited, .button:visited {
781
color: #E040FB;
782
}
783
*:link:visited:hover, .button:visited:hover, *:link:visited:active, .button:visited:active {
785
color: #E040FB;
786
}
787
*:selected *:link:visited, *:selected .button:visited {
789
color: #b3cefb;
790
}
791
*:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link,
793
.header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
794
color: #d9e7fd;
795
}
796
.button:link > .label, .button:visited > .label {
798
text-decoration-line: underline;
799
}
800
/*****************
802
* GtkSpinButton *
803
*****************/
804
.spinbutton .button {
805
padding: 4px;
806
border: solid 6px transparent;
807
color: rgba(0, 0, 0, 0.54);
808
}
809
.spinbutton .button:hover, .spinbutton .button:active {
811
color: rgba(0, 0, 0, 0.87);
812
}
813
.spinbutton .button:insensitive {
815
color: rgba(0, 0, 0, 0.26);
816
}
817
.spinbutton .button:active {
819
background-color: alpha(currentColor, 0.12);
820
}
821
.spinbutton.vertical .button {
823
padding-top: 10px;
824
padding-bottom: 10px;
825
border: none;
826
}
827
.spinbutton.vertical .button:first-child {
829
border-radius: 4px 4px 0 0;
830
}
831
.spinbutton.vertical .button:last-child {
833
border-radius: 0 0 4px 4px;
834
}
835
/**************
837
* ComboBoxes *
838
**************/
839
GtkComboBox {
840
-GtkComboBox-arrow-scaling: 0.5;
841
-GtkComboBox-shadow-type: none;
842
}
843
GtkComboBox > .the-button-in-the-combobox {
845
padding: 5px 6px 6px;
846
}
847
GtkComboBox .menu {
849
padding: 2px 0;
850
}
851
GtkComboBox .menu .menuitem {
853
padding: 5px 6px 6px;
854
}
855
GtkComboBox .separator.vertical {
857
-GtkWidget-wide-separators: true;
858
}
859
GtkComboBox.combobox-entry .entry:dir(ltr) {
861
border-top-right-radius: 0;
862
border-bottom-right-radius: 0;
863
}
864
GtkComboBox.combobox-entry .entry:dir(rtl) {
866
border-top-left-radius: 0;
867
border-bottom-left-radius: 0;
868
}
869
GtkComboBox.combobox-entry .button {
871
padding: 10px;
872
}
873
GtkComboBox.combobox-entry .button:dir(ltr) {
875
border-top-left-radius: 0;
876
border-bottom-left-radius: 0;
877
}
878
GtkComboBox.combobox-entry .button:dir(rtl) {
880
border-top-right-radius: 0;
881
border-bottom-right-radius: 0;
882
}
883
/************
885
* Toolbars *
886
************/
887
.toolbar {
888
-GtkWidget-window-dragging: true;
889
padding: 4px;
890
background-color: #F2F2F2;
891
}
892
.osd .toolbar, .toolbar.osd, .app-notification,
894
.app-notification.frame {
895
transition: border-image 100ms cubic-bezier(0, 0, 0.2, 1);
896
padding: 6px;
897
border-style: solid;
898
border-width: 8px;
899
border-image: -gtk-scaled(url("assets/box-shadow.png"), url("assets/box-shadow@2.png")) 10/10px stretch;
900
border-radius: 4px;
901
background-color: #FFFFFF;
902
}
903
.osd .toolbar:backdrop, .toolbar.osd:backdrop, .app-notification:backdrop {
905
border-image: -gtk-scaled(url("assets/box-shadow-backdrop.png"), url("assets/box-shadow-backdrop@2.png")) 10/10px stretch;
906
}
907
.inline-toolbar {
909
padding: 6px;
910
border-style: solid;
911
border-width: 0 1px 1px;
912
border-color: rgba(0, 0, 0, 0.12);
913
background-color: #FAFAFA;
914
}
915
.search-bar, .location-bar {
917
padding: 6px;
918
border-style: solid;
919
border-width: 0 0 1px;
920
border-color: rgba(0, 0, 0, 0.12);
921
background-color: #F2F2F2;
922
background-clip: border-box;
923
}
924
/***************
926
* Header bars *
927
***************/
928
.titlebar,
929
.header-bar {
930
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
931
padding: 6px;
932
border-radius: 4px 4px 0 0;
933
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.4);
934
background-color: #E0E0E0;
935
color: rgba(0, 0, 0, 0.87);
936
}
937
.titlebar:backdrop,
939
.header-bar:backdrop {
940
color: rgba(0, 0, 0, 0.54);
941
}
942
.titlebar .title,
944
.header-bar .title {
945
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
946
padding-left: 12px;
947
padding-right: 12px;
948
font-weight: bold;
949
}
950
.titlebar .subtitle,
952
.header-bar .subtitle {
953
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
954
padding-left: 12px;
955
padding-right: 12px;
956
font-size: smaller;
957
}
958
.titlebar .header-bar-separator,
960
.titlebar > GtkBox > .separator.vertical,
961
.header-bar .header-bar-separator,
962
.header-bar > GtkBox > .separator.vertical {
963
-GtkWidget-wide-separators: true;
964
-GtkWidget-separator-width: 1px;
965
border-style: solid;
966
border-width: 0 1px;
967
border-color: rgba(0, 0, 0, 0.12);
968
}
969
.titlebar .button:not(.suggested-action):not(.destructive-action),
971
.header-bar .button:not(.suggested-action):not(.destructive-action) {
972
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#4285F4), to(transparent)) 0 0 0/0 0 0px;
973
}
974
.titlebar .button:not(.suggested-action):not(.destructive-action):checked,
976
.header-bar .button:not(.suggested-action):not(.destructive-action):checked {
977
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#4285F4), to(transparent)) 0 0 2/0 0 2px;
978
}
979
.titlebar .button:not(.suggested-action):not(.destructive-action):checked, .titlebar .button:not(.suggested-action):not(.destructive-action):checked:insensitive,
981
.header-bar .button:not(.suggested-action):not(.destructive-action):checked,
982
.header-bar .button:not(.suggested-action):not(.destructive-action):checked:insensitive {
983
background-color: transparent;
984
}
985
.titlebar .button.suggested-action:insensitive, .titlebar .button.destructive-action:insensitive,
987
.header-bar .button.suggested-action:insensitive,
988
.header-bar .button.destructive-action:insensitive {
989
color: alpha(currentColor, 0.5);
990
}
991
.titlebar .button.suggested-action:insensitive > .label, .titlebar .button.destructive-action:insensitive > .label,
993
.header-bar .button.suggested-action:insensitive > .label,
994
.header-bar .button.destructive-action:insensitive > .label {
995
color: inherit;
996
}
997
.titlebar.selection-mode,
999
.header-bar.selection-mode {
1000
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);
1001
background-color: #4285F4;
1002
color: white;
1003
}
1004
.titlebar.selection-mode:backdrop,
1006
.header-bar.selection-mode:backdrop {
1007
color: rgba(255, 255, 255, 0.7);
1008
}
1009
.titlebar.selection-mode .button,
1011
.header-bar.selection-mode .button {
1012
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(white), to(transparent)) 0 0 0/0 0 0px;
1013
color: rgba(255, 255, 255, 0.7);
1014
}
1015
.titlebar.selection-mode .button:hover, .titlebar.selection-mode .button:active, .titlebar.selection-mode .button:checked,
1017
.header-bar.selection-mode .button:hover,
1018
.header-bar.selection-mode .button:active,
1019
.header-bar.selection-mode .button:checked {
1020
color: white;
1021
}
1022
.titlebar.selection-mode .button:checked,
1024
.header-bar.selection-mode .button:checked {
1025
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(white), to(transparent)) 0 0 2/0 0 2px;
1026
color: white;
1027
}
1028
.titlebar.selection-mode .button:checked:insensitive,
1030
.header-bar.selection-mode .button:checked:insensitive {
1031
color: rgba(255, 255, 255, 0.5);
1032
}
1033
.titlebar.selection-mode .button:checked:insensitive > .label,
1035
.header-bar.selection-mode .button:checked:insensitive > .label {
1036
color: inherit;
1037
}
1038
.titlebar.selection-mode .button.suggested-action,
1040
.header-bar.selection-mode .button.suggested-action {
1041
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-image 900ms cubic-bezier(0, 0, 0.2, 1);
1042
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;
1043
background-color: #FAFAFA;
1044
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
1045
color: rgba(0, 0, 0, 0.62);
1046
}
1047
.titlebar.selection-mode .button.suggested-action:hover,
1049
.header-bar.selection-mode .button.suggested-action:hover {
1050
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;
1051
color: rgba(0, 0, 0, 0.87);
1052
}
1053
.titlebar.selection-mode .button.suggested-action:active,
1055
.header-bar.selection-mode .button.suggested-action:active {
1056
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
1057
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
1058
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.08);
1059
color: rgba(0, 0, 0, 0.87);
1060
}
1061
.titlebar.selection-mode .button.suggested-action:insensitive,
1063
.header-bar.selection-mode .button.suggested-action:insensitive {
1064
box-shadow: none;
1065
background-color: alpha(currentColor, 0.24);
1066
color: rgba(0, 0, 0, 0.26);
1067
}
1068
.titlebar.selection-mode .button.suggested-action:insensitive > .label,
1070
.header-bar.selection-mode .button.suggested-action:insensitive > .label {
1071
color: inherit;
1072
}
1073
.titlebar.selection-mode .selection-menu,
1075
.header-bar.selection-mode .selection-menu {
1076
padding-left: 16px;
1077
padding-right: 16px;
1078
}
1079
.titlebar.selection-mode .selection-menu GtkArrow,
1081
.header-bar.selection-mode .selection-menu GtkArrow {
1082
-GtkArrow-arrow-scaling: 1;
1083
}
1084
.titlebar.selection-mode .selection-menu .arrow,
1086
.header-bar.selection-mode .selection-menu .arrow {
1087
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1088
}
1089
.tiled .titlebar, .maximized .titlebar, .tiled
1091
.header-bar, .maximized
1092
.header-bar {
1093
border-radius: 0;
1094
box-shadow: none;
1095
}
1096
.titlebar.default-decoration,
1098
.header-bar.default-decoration {
1099
padding: 6px;
1100
border-width: 0;
1101
}
1102
.titlebar.default-decoration .button,
1104
.header-bar.default-decoration .button {
1105
padding: 4px;
1106
}
1107
.background:not(.csd) .titlebar .button.titlebutton:active, .background:not(.csd)
1109
.header-bar .button.titlebutton:active {
1110
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent));
1111
}
1112
/************
1114
* Pathbars *
1115
************/
1116
.path-bar .button {
1117
padding: 7px 6px 8px;
1118
}
1119
.path-bar .button .label:last-child {
1121
padding-left: 2px;
1122
}
1123
.path-bar .button .label:first-child {
1125
padding-right: 2px;
1126
}
1127
.path-bar .button GtkImage {
1129
padding-top: 1px;
1130
}
1131
.path-bar .button GtkImage:only-child {
1133
padding-right: 4px;
1134
padding-left: 4px;
1135
}
1136
/**************
1138
* Tree Views *
1139
**************/
1140
GtkTreeView.view {
1141
-GtkTreeView-grid-line-width: 1;
1142
-GtkTreeView-grid-line-pattern: '';
1143
-GtkTreeView-tree-line-width: 1;
1144
-GtkTreeView-tree-line-pattern: '';
1145
-GtkTreeView-expander-size: 16;
1146
border-left-color: alpha(currentColor, 0.24);
1147
border-top-color: rgba(0, 0, 0, 0.12);
1148
border-radius: 0;
1149
}
1150
GtkTreeView.view:hover, GtkTreeView.view:active, GtkTreeView.view:selected {
1152
border-radius: 0;
1153
}
1154
GtkTreeView.view.dnd {
1156
border-style: solid none;
1157
border-width: 1px;
1158
border-color: rgba(37, 75, 138, 0.935);
1159
}
1160
GtkTreeView.view.expander {
1162
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1163
}
1164
GtkTreeView.view.expander:dir(rtl) {
1166
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1167
}
1168
GtkTreeView.view.expander:checked {
1170
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1171
}
1172
GtkTreeView.view.expander:selected {
1174
color: rgba(255, 255, 255, 0.7);
1175
}
1176
GtkTreeView.view.expander:selected:hover, GtkTreeView.view.expander:selected:active {
1178
color: white;
1179
}
1180
GtkTreeView.view.progressbar {
1182
border-width: 4px;
1183
}
1184
GtkTreeView.view.progressbar:selected {
1186
border-color: currentColor;
1187
}
1188
GtkTreeView.view.trough {
1190
border-width: 4px;
1191
border-color: rgba(66, 133, 244, 0.3);
1192
}
1193
GtkTreeView.view.trough:selected {
1195
border-color: alpha(currentColor, 0.24);
1196
}
1197
column-header .button {
1199
padding: 3px 6px 4px;
1200
border-style: none solid solid none;
1201
border-width: 1px;
1202
border-color: rgba(0, 0, 0, 0.12);
1203
border-radius: 0;
1204
box-shadow: none;
1205
background-color: #FFFFFF;
1206
}
1207
column-header .button:hover, column-header .button:active {
1209
box-shadow: none;
1210
}
1211
column-header .button:insensitive {
1213
background-color: #FFFFFF;
1214
}
1215
column-header:last-child .button, column-header:last-child.button {
1217
border-right-style: none;
1218
}
1219
column-header.button.dnd, column-header .button.dnd {
1221
border-left-style: solid;
1222
background-clip: padding-box;
1223
color: #4285F4;
1224
}
1225
/*********
1227
* Menus *
1228
*********/
1229
.menubar {
1230
-GtkWidget-window-dragging: true;
1231
padding: 0;
1232
background-color: #E0E0E0;
1233
}
1234
.menubar > .menuitem {
1236
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
1237
padding: 4px 8px;
1238
color: rgba(0, 0, 0, 0.54);
1239
}
1240
.menubar > .menuitem:hover {
1242
transition: none;
1243
background-color: rgba(0, 0, 0, 0.12);
1244
color: rgba(0, 0, 0, 0.87);
1245
}
1246
.menubar > .menuitem:insensitive {
1248
color: rgba(0, 0, 0, 0.26);
1249
box-shadow: none;
1250
}
1251
.menu {
1253
margin: 4px 0;
1254
padding: 4px 0;
1255
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
1256
background-color: #FFFFFF;
1257
border: 1px solid rgba(0, 0, 0, 0.12);
1258
}
1259
.csd .menu {
1261
border: none;
1262
border-radius: 4px;
1263
}
1264
.menu .menuitem {
1266
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
1267
padding: 3px 4px 4px;
1268
font: initial;
1269
text-shadow: none;
1270
}
1271
.menu .menuitem:hover {
1273
transition: none;
1274
background-color: rgba(0, 0, 0, 0.12);
1275
}
1276
.menu .menuitem:insensitive {
1278
color: rgba(0, 0, 0, 0.38);
1279
}
1280
.menu .menuitem.arrow {
1282
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1283
}
1284
.menu .menuitem.arrow:dir(rtl) {
1286
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1287
}
1288
.menu.button {
1290
border-style: none;
1291
border-radius: 0;
1292
box-shadow: none;
1293
}
1294
.menu.button.top {
1296
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
1297
}
1298
.menu.button.bottom {
1300
border-top: 1px solid rgba(0, 0, 0, 0.12);
1301
}
1302
.menu.button:hover {
1304
background-color: rgba(0, 0, 0, 0.12);
1305
}
1306
.menu.button:insensitive {
1308
background-color: transparent;
1309
border-color: transparent;
1310
}
1311
.menuitem .accelerator {
1313
color: rgba(0, 0, 0, 0.54);
1314
}
1315
.csd.popup {
1317
border-radius: 4px;
1318
}
1319
/***************
1321
* Popovers *
1322
***************/
1323
.popover {
1324
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
1325
padding: 2px;
1326
border: 1px solid;
1327
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1328
border-radius: 5px;
1329
background-color: #FFFFFF;
1330
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1331
}
1332
.popover:backdrop {
1334
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1335
}
1336
.popover > .list,
1338
.popover > .view,
1339
.popover > .toolbar,
1340
.popover.osd > .toolbar {
1341
border-style: none;
1342
border-image: none;
1343
background-color: transparent;
1344
}
1345
.popover .button.flat {
1347
padding: 5px 8px 6px;
1348
background-color: transparent;
1349
background-size: 160px 160px;
1350
color: rgba(0, 0, 0, 0.87);
1351
font: initial;
1352
}
1353
.popover .linked > .button {
1355
border-radius: 4px;
1356
}
1357
.popover .linked > .button:checked {
1359
background-color: #4285F4;
1360
color: white;
1361
}
1362
.popover .linked > .button.image-button {
1364
padding: 8px;
1365
background-size: 90px 90px;
1366
}
1367
/*****************
1369
* Notebooks and *
1370
* Tabs *
1371
*****************/
1372
.notebook {
1373
padding: 0;
1374
background-color: #FFFFFF;
1375
-GtkNotebook-initial-gap: 8;
1376
-GtkNotebook-arrow-spacing: 5;
1377
-GtkNotebook-tab-curvature: 0;
1378
-GtkNotebook-tab-overlap: 0;
1379
-GtkNotebook-has-tab-gap: false;
1380
-GtkWidget-focus-padding: 0;
1381
-GtkWidget-focus-line-width: 0;
1382
}
1383
.notebook.frame {
1385
border: 1px solid rgba(0, 0, 0, 0.12);
1386
}
1387
.notebook.frame.top {
1389
border-top-width: 0;
1390
}
1391
.notebook.frame.bottom {
1393
border-bottom-width: 0;
1394
}
1395
.notebook.frame.right {
1397
border-right-width: 0;
1398
}
1399
.notebook.frame.left {
1401
border-left-width: 0;
1402
}
1403
.notebook.header {
1405
background-color: #F2F2F2;
1406
}
1407
.notebook.header.frame {
1409
border: 1px solid rgba(0, 0, 0, 0.12);
1410
}
1411
.notebook.header.frame.top {
1413
border-bottom-width: 0;
1414
}
1415
.notebook.header.frame.bottom {
1417
border-top-width: 0;
1418
}
1419
.notebook.header.frame.right {
1421
border-left-width: 0;
1422
}
1423
.notebook.header.frame.left {
1425
border-right-width: 0;
1426
}
1427
.notebook.header.top {
1429
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
1430
}
1431
.notebook.header.bottom {
1433
box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
1434
}
1435
.notebook.header.right {
1437
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
1438
}
1439
.notebook.header.left {
1441
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
1442
}
1443
.notebook tab {
1445
border-width: 0;
1446
border-style: solid;
1447
border-color: transparent;
1448
background-color: transparent;
1449
background-clip: border-box;
1450
outline-offset: 0;
1451
/* works for testnotebookdnd, but there's a superfluous border
1452
in gedit or web, commented out for now, needs gtk fixes
1453
&.reorderable-page {
1454
&.top {
1455
padding-top: ($vt_vpadding - 1px);
1456
border-top-width: 1px;
1457
border-left-width: 1px;
1458
border-right-width: 1px;
1459
}
1460
&.bottom {
1461
padding-bottom: ($vt_vpadding - 1px);
1462
border-bottom-width: 1px;
1463
border-left-width: 1px;
1464
border-right-width: 1px;
1465
}
1466
&.left {
1467
padding-left: ($ht_hpadding - 1px);
1468
border-left-width: 1px;
1469
border-top-width: 1px;
1470
border-bottom-width: 1px;
1471
}
1472
&.right {
1473
padding-right: ($ht_hpadding - 1px);
1474
border-right-width: 1px;
1475
border-top-width: 1px;
1476
border-bottom-width: 1px;
1477
}
1478
}
1479
*/
1480
}
1481
.notebook tab.top, .notebook tab.bottom {
1483
padding: 8px 12px;
1484
}
1485
.notebook tab.left, .notebook tab.right {
1487
padding: 8px 12px;
1488
}
1489
.notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
1491
padding-left: 12px;
1492
padding-right: 12px;
1493
border-left-width: 1px;
1494
border-right-width: 1px;
1495
}
1496
.notebook tab.reorderable-page.left, .notebook tab.reorderable-page.right {
1498
border-bottom-width: 1px;
1499
border-top-width: 1px;
1500
}
1501
.notebook tab:hover, .notebook tab.prelight-page {
1503
background-color: alpha(currentColor, 0.08);
1504
}
1505
.notebook tab:active, .notebook tab.active-page {
1507
background-color: transparent;
1508
}
1509
.notebook tab.top:active, .notebook tab.top.active-page {
1511
box-shadow: inset 0 -2px #4285F4;
1512
}
1513
.notebook tab.bottom:active, .notebook tab.bottom.active-page {
1515
box-shadow: inset 0 2px #4285F4;
1516
}
1517
.notebook tab.left:active, .notebook tab.left.active-page {
1519
box-shadow: inset -2px 0 #4285F4;
1520
}
1521
.notebook tab.right:active, .notebook tab.right.active-page {
1523
box-shadow: inset 2px 0 #4285F4;
1524
}
1525
.notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
1527
border-color: rgba(0, 0, 0, 0.12);
1528
background-color: #FFFFFF;
1529
background-clip: padding-box;
1530
}
1531
.notebook tab .label {
1533
padding: 0 2px;
1534
font-weight: 500;
1535
color: rgba(0, 0, 0, 0.54);
1536
}
1537
.notebook tab .prelight-page .label, .notebook tab .label.prelight-page {
1539
color: rgba(0, 0, 0, 0.87);
1540
}
1541
.notebook tab .active-page .label, .notebook tab .label.active-page {
1543
color: rgba(0, 0, 0, 0.87);
1544
}
1545
.notebook tab .button {
1547
padding: 0;
1548
background-size: 30px 30px;
1549
}
1550
.notebook tab .button > GtkImage {
1552
padding: 4px;
1553
}
1554
.notebook.arrow:not(:hover):not(:active) {
1556
color: rgba(0, 0, 0, 0.54);
1557
}
1558
.notebook.arrow:insensitive {
1560
color: rgba(0, 0, 0, 0.26);
1561
}
1562
/**************
1564
* Scrollbars *
1565
**************/
1566
.scrollbar {
1567
-GtkRange-slider-width: 17px;
1568
-GtkRange-trough-border: 0;
1569
-GtkScrollbar-has-backward-stepper: false;
1570
-GtkScrollbar-has-forward-stepper: false;
1571
-GtkScrollbar-min-slider-length: 32px;
1572
-GtkRange-stepper-spacing: 0;
1573
-GtkRange-trough-under-steppers: 1;
1574
}
1575
.scrollbar .button {
1577
border: none;
1578
}
1579
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1581
-GtkRange-slider-width: 12px;
1582
}
1583
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
1585
margin: 3px;
1586
border: 1px solid rgba(255, 255, 255, 0.3);
1587
}
1588
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
1590
border-style: none;
1591
background-color: transparent;
1592
}
1593
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
1595
background-color: rgba(255, 255, 255, 0.9);
1596
}
1597
.scrollbar .trough {
1599
border: 1px none rgba(0, 0, 0, 0.12);
1600
background-color: #FFFFFF;
1601
background-clip: padding-box;
1602
}
1603
.scrollbar .slider {
1605
background-color: rgba(0, 0, 0, 0.38);
1606
}
1607
.scrollbar .slider:hover {
1609
background-color: rgba(0, 0, 0, 0.54);
1610
}
1611
.scrollbar .slider:active {
1613
background-color: rgba(0, 0, 0, 0.87);
1614
}
1615
.scrollbar .slider:insensitive {
1617
opacity: 0.5;
1618
}
1619
.scrollbar .slider {
1621
border-radius: 100px;
1622
margin: 4px;
1623
}
1624
.scrollbar.fine-tune .slider {
1626
margin: 6px;
1627
}
1628
.scrollbar.vertical .slider {
1630
margin-left: 5px;
1631
}
1632
.scrollbar.vertical .slider:dir(rtl) {
1634
margin-left: 4px;
1635
margin-right: 5px;
1636
}
1637
.scrollbar.vertical.fine-tune .slider {
1639
margin-left: 7px;
1640
}
1641
.scrollbar.vertical.fine-tune .slider:dir(rtl) {
1643
margin-left: 6px;
1644
margin-right: 7px;
1645
}
1646
.scrollbar.vertical .trough {
1648
border-left-style: solid;
1649
}
1650
.scrollbar.vertical .trough:dir(rtl) {
1652
border-left-style: none;
1653
border-right-style: solid;
1654
}
1655
.scrollbar.horizontal .slider {
1657
margin-top: 5px;
1658
}
1659
.scrollbar.horizontal.fine-tune .slider {
1661
margin-top: 7px;
1662
}
1663
.scrollbar.horizontal .trough {
1665
border-top-style: solid;
1666
}
1667
.scrollbars-junction,
1669
.scrollbars-junction.frame {
1670
border-style: solid none none solid;
1671
background-color: #FFFFFF;
1672
}
1673
.scrollbars-junction:dir(rtl),
1675
.scrollbars-junction.frame:dir(rtl) {
1676
border-style: solid solid none none;
1677
}
1678
/**********
1680
* Switch *
1681
**********/
1682
GtkSwitch {
1683
-GtkSwitch-slider-width: 20px;
1684
-GtkSwitch-slider-height: 20px;
1685
outline-offset: -4px;
1686
outline-radius: 100px;
1687
font-size: 0;
1688
}
1689
GtkSwitch:insensitive {
1691
opacity: 0.5;
1692
}
1693
GtkSwitch.trough {
1695
border: 8px solid transparent;
1696
border-radius: 100px;
1697
background-color: rgba(0, 0, 0, 0.26);
1698
}
1699
GtkSwitch.trough:active {
1701
background-color: rgba(1, 162, 153, 0.5);
1702
}
1703
GtkSwitch.slider {
1705
padding: 5px 4px;
1706
border-radius: 100px;
1707
box-shadow: 0 0 0 10px transparent, 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1708
background-color: #FFFFFF;
1709
}
1710
GtkSwitch.slider:hover {
1712
box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1713
}
1714
GtkSwitch.slider:active {
1716
background-color: #01A299;
1717
color: #01A299;
1718
}
1719
/*************************
1721
* Check and Radio items *
1722
*************************/
1723
.check {
1724
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1725
}
1726
.check:hover {
1728
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1729
}
1730
.check:active {
1732
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1733
}
1734
.check:insensitive {
1736
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1737
}
1738
.check:inconsistent {
1740
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1741
}
1742
.check:inconsistent:hover {
1744
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1745
}
1746
.check:inconsistent:active {
1748
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1749
}
1750
.check:inconsistent:insensitive {
1752
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1753
}
1754
.check:checked {
1756
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1757
}
1758
.check:checked:hover {
1760
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1761
}
1762
.check:checked:active {
1764
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1765
}
1766
.check:checked:insensitive {
1768
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1769
}
1770
.menu .menuitem.check {
1772
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1773
}
1774
.menu .menuitem.check:insensitive {
1776
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1777
}
1778
.menu .menuitem.check:inconsistent {
1780
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1781
}
1782
.menu .menuitem.check:inconsistent:insensitive {
1784
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1785
}
1786
.menu .menuitem.check:checked {
1788
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1789
}
1790
.menu .menuitem.check:checked:insensitive {
1792
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1793
}
1794
.radio {
1796
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1797
}
1798
.radio:hover {
1800
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1801
}
1802
.radio:active {
1804
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1805
}
1806
.radio:insensitive {
1808
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1809
}
1810
.radio:inconsistent {
1812
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1813
}
1814
.radio:inconsistent:hover {
1816
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1817
}
1818
.radio:inconsistent:active {
1820
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1821
}
1822
.radio:inconsistent:insensitive {
1824
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1825
}
1826
.radio:checked {
1828
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1829
}
1830
.radio:checked:hover {
1832
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1833
}
1834
.radio:checked:active {
1836
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1837
}
1838
.radio:checked:insensitive {
1840
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1841
}
1842
.menu .menuitem.radio {
1844
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1845
}
1846
.menu .menuitem.radio:insensitive {
1848
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1849
}
1850
.menu .menuitem.radio:inconsistent {
1852
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1853
}
1854
.menu .menuitem.radio:inconsistent:insensitive {
1856
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1857
}
1858
.menu .menuitem.radio:checked {
1860
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1861
}
1862
.menu .menuitem.radio:checked:insensitive {
1864
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1865
}
1866
.view.content-view.check:not(.list) {
1868
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1869
background-color: transparent;
1870
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1871
}
1872
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1874
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1875
}
1876
.view.content-view.check:checked:not(.list) {
1878
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
1879
background-color: transparent;
1880
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1881
}
1882
.view.content-view.check:checked:not(.list):hover, .view.content-view.check:checked:not(.list):active {
1884
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1885
}
1886
GtkCheckButton.text-button, GtkRadioButton.text-button {
1888
padding: 2px 4px;
1889
outline-offset: 0;
1890
}
1891
/************
1893
* GtkScale *
1894
************/
1895
.scale,
1896
.scale.scale-has-marks-above.scale-has-marks-below,
1897
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1898
-GtkScale-slider-length: 24;
1899
-GtkRange-slider-width: 24;
1900
-GtkRange-trough-border: 2;
1901
outline-offset: -8px;
1902
outline-radius: 100px;
1903
}
1904
.scale.fine-tune.slider,
1906
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
1907
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
1908
background-size: 50%;
1909
}
1910
.scale.slider,
1912
.scale.scale-has-marks-above.scale-has-marks-below.slider,
1913
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
1914
border-radius: 50%;
1915
background-repeat: no-repeat;
1916
background-position: center;
1917
}
1918
.scale.slider.slider,
1920
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
1921
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
1922
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
1923
}
1924
.scale.slider.slider:insensitive,
1926
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
1927
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
1928
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
1929
}
1930
.scale.slider:hover,
1932
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
1933
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
1934
background-color: rgba(1, 162, 153, 0.08);
1935
}
1936
.scale.slider:active,
1938
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
1939
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
1940
background-color: rgba(1, 162, 153, 0.16);
1941
}
1942
.scale.trough,
1944
.scale.scale-has-marks-above.scale-has-marks-below.trough,
1945
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
1946
margin: 13px 14px;
1947
background-color: alpha(currentColor, 0.24);
1948
}
1949
.scale.trough.highlight,
1951
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
1952
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
1953
background-color: #01A299;
1954
}
1955
.scale.trough.highlight:insensitive,
1957
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
1958
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
1959
background-color: alpha(currentColor, 0.24);
1960
}
1961
.scale.trough:insensitive,
1963
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
1964
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
1965
color: rgba(0, 0, 0, 0.38);
1966
}
1967
.scale.trough.vertical,
1969
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
1970
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
1971
margin: 14px 13px;
1972
}
1973
.scale.separator,
1975
.scale.scale-has-marks-above.scale-has-marks-below.separator,
1976
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
1977
color: alpha(currentColor, 0.24);
1978
}
1979
.scale.scale-has-marks-below.slider {
1981
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
1982
}
1983
.scale.scale-has-marks-below.slider:insensitive {
1985
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
1986
}
1987
.scale.scale-has-marks-above.slider {
1989
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
1990
}
1991
.scale.scale-has-marks-above.slider:insensitive {
1993
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
1994
}
1995
.scale.vertical.scale-has-marks-below.slider {
1997
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
1998
}
1999
.scale.vertical.scale-has-marks-below.slider:insensitive {
2001
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2002
}
2003
.scale.vertical.scale-has-marks-above.slider {
2005
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2006
}
2007
.scale.vertical.scale-has-marks-above.slider:insensitive {
2009
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2010
}
2011
/*****************
2013
* Progress bars *
2014
*****************/
2015
GtkProgressBar {
2016
-GtkProgressBar-min-horizontal-bar-height: 4;
2017
-GtkProgressBar-min-vertical-bar-width: 4;
2018
padding: 0;
2019
font-size: smaller;
2020
color: rgba(0, 0, 0, 0.38);
2021
}
2022
GtkProgressBar.osd {
2024
-GtkProgressBar-xspacing: 0;
2025
-GtkProgressBar-yspacing: 0;
2026
-GtkProgressBar-min-horizontal-bar-height: 4;
2027
}
2028
GtkProgressBar.trough {
2030
border-radius: 0;
2031
background-color: rgba(66, 133, 244, 0.3);
2032
}
2033
GtkProgressBar.trough.osd {
2035
border-style: none;
2036
box-shadow: none;
2037
}
2038
.progressbar {
2040
border-radius: 0;
2041
background-color: #4285F4;
2042
}
2043
.progressbar.left {
2045
border-top-left-radius: 0;
2046
border-bottom-left-radius: 0;
2047
}
2048
.progressbar.right {
2050
border-top-right-radius: 0;
2051
border-bottom-right-radius: 0;
2052
}
2053
.progressbar.left.right {
2055
box-shadow: none;
2056
}
2057
.progressbar.vertical.bottom {
2059
border-bottom-left-radius: 0;
2060
border-bottom-right-radius: 0;
2061
box-shadow: none;
2062
}
2063
.progressbar.vertical.top {
2065
border-top-left-radius: 0;
2066
border-top-right-radius: 0;
2067
}
2068
.progressbar.osd {
2070
background-image: none;
2071
background-color: #4285F4;
2072
border-style: none;
2073
border-radius: 0;
2074
}
2075
/*************
2077
* Level Bar *
2078
*************/
2079
.level-bar {
2080
-GtkLevelBar-min-block-width: 36;
2081
-GtkLevelBar-min-block-height: 4;
2082
}
2083
.level-bar.vertical {
2085
-GtkLevelBar-min-block-width: 4;
2086
-GtkLevelBar-min-block-height: 36;
2087
}
2088
.level-bar.fill-block {
2090
background-color: #4285F4;
2091
}
2092
.level-bar.fill-block.indicator-discrete.horizontal {
2094
margin: 0 1px;
2095
}
2096
.level-bar.fill-block.indicator-discrete.vertical {
2098
margin: 1px 0;
2099
}
2100
.level-bar.fill-block.level-high {
2102
background-color: #34A853;
2103
}
2104
.level-bar.fill-block.level-low {
2106
background-color: #FBBC05;
2107
}
2108
.level-bar.fill-block.empty-fill-block {
2110
background-color: rgba(0, 0, 0, 0.12);
2111
}
2112
/**********
2114
* Frames *
2115
**********/
2116
.frame {
2117
border: 1px solid rgba(0, 0, 0, 0.12);
2118
padding: 0;
2119
}
2120
.frame.flat {
2122
border-style: none;
2123
}
2124
.frame.action-bar {
2126
padding: 6px;
2127
border-width: 1px 0 0;
2128
}
2129
GtkScrolledWindow GtkViewport.frame {
2131
border-style: none;
2132
}
2133
.separator {
2135
color: rgba(0, 0, 0, 0.12);
2136
}
2137
GtkFileChooserButton .separator.vertical,
2139
GtkFontButton .separator.vertical {
2140
-GtkWidget-wide-separators: true;
2141
}
2142
/*********
2144
* Lists *
2145
*********/
2146
.list {
2147
border-color: rgba(0, 0, 0, 0.12);
2148
background-color: #FFFFFF;
2149
}
2150
.list-row,
2152
.grid-child {
2153
padding: 2px;
2154
}
2155
.list-row.activatable, .view, column-header .button {
2157
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 900ms cubic-bezier(0, 0, 0.2, 1);
2158
box-shadow: inset 0 0 0 10000px transparent;
2159
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
2160
background-repeat: no-repeat;
2161
background-position: center;
2162
background-size: 240px 240px;
2163
}
2164
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2166
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 900ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0;
2167
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2168
}
2169
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2171
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2172
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
2173
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2174
}
2175
.list-row:selected .button:insensitive {
2177
color: rgba(255, 255, 255, 0.3);
2178
}
2179
.list-row:selected .button.flat {
2181
color: rgba(255, 255, 255, 0.7);
2182
}
2183
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2185
color: white;
2186
}
2187
.list-row:selected .button.flat:insensitive {
2189
color: rgba(255, 255, 255, 0.3);
2190
}
2191
/*********************
2193
* App Notifications *
2194
*********************/
2195
/*************
2196
* Expanders *
2197
*************/
2198
.expander {
2199
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2200
}
2201
.expander:dir(rtl) {
2203
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2204
}
2205
.expander:checked {
2207
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2208
}
2209
.expander:not(:hover):not(:active) {
2211
color: alpha(currentColor, 0.7);
2212
}
2213
.expander:selected {
2215
color: white;
2216
}
2217
/************
2219
* Calendar *
2220
***********/
2221
GtkCalendar {
2222
padding: 1px;
2223
border: 1px solid rgba(0, 0, 0, 0.12);
2224
color: rgba(0, 0, 0, 0.87);
2225
}
2226
GtkCalendar:insensitive {
2228
color: rgba(0, 0, 0, 0.38);
2229
}
2230
GtkCalendar:selected {
2232
border-radius: 5px;
2233
}
2234
GtkCalendar.header {
2236
border-style: none none solid;
2237
border-radius: 0;
2238
}
2239
GtkCalendar:inconsistent {
2241
color: rgba(0, 0, 0, 0.26);
2242
}
2243
GtkCalendar.highlight {
2245
font-size: smaller;
2246
color: rgba(0, 0, 0, 0.54);
2247
}
2248
/***********
2250
* Dialogs *
2251
***********/
2252
.message-dialog .dialog-action-area .button {
2253
padding: 8px;
2254
}
2255
.message-dialog.background {
2257
background-color: #FFFFFF;
2258
}
2259
.message-dialog .titlebar {
2261
border-style: none;
2262
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2263
background-color: #FFFFFF;
2264
}
2265
.message-dialog.csd.background {
2267
border-bottom-left-radius: 4px;
2268
border-bottom-right-radius: 4px;
2269
}
2270
.message-dialog.csd .dialog-action-area .button {
2272
padding: 9px 16px 10px;
2273
border-top: 1px solid rgba(0, 0, 0, 0.12);
2274
border-radius: 0;
2275
background-size: 240px 240px;
2276
}
2277
.message-dialog.csd .dialog-action-area .button:first-child {
2279
border-radius: 0 0 0 4px;
2280
}
2281
.message-dialog.csd .dialog-action-area .button:last-child {
2283
border-radius: 0 0 4px 0;
2284
}
2285
GtkFileChooserDialog .dialog-action-box {
2287
border-top: 1px solid rgba(0, 0, 0, 0.12);
2288
}
2289
/***********
2291
* Sidebar *
2292
***********/
2293
.sidebar {
2294
border: none;
2295
background-color: #FAFAFA;
2296
}
2297
GtkSidebarRow.list-row {
2299
padding: 0px;
2300
}
2301
GtkSidebarRow .sidebar-revealer {
2303
padding: 4px 14px 4px 12px;
2304
}
2305
GtkSidebarRow .sidebar-icon {
2307
opacity: 0.7;
2308
}
2309
GtkSidebarRow .sidebar-icon:dir(ltr) {
2311
padding-right: 8px;
2312
}
2313
GtkSidebarRow .sidebar-icon:dir(rtl) {
2315
padding-left: 8px;
2316
}
2317
GtkSidebarRow .sidebar-label:dir(ltr) {
2319
padding-right: 2px;
2320
}
2321
GtkSidebarRow .sidebar-label:dir(rtl) {
2323
padding-left: 2px;
2324
}
2325
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2327
border: solid 1px #4285F4;
2328
}
2329
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2331
color: #01A299;
2332
}
2333
.sidebar-button.button.image-button {
2335
padding: 4px;
2336
}
2337
.sidebar-item {
2339
padding: 10px 4px;
2340
}
2341
.sidebar-item > .label {
2343
padding-left: 6px;
2344
padding-right: 6px;
2345
}
2346
/****************
2348
* File chooser *
2349
****************/
2350
GtkPlacesView .server-list-button > GtkImage {
2351
-gtk-icon-transform: rotate(0turn);
2352
}
2353
GtkPlacesView .server-list-button:checked > GtkImage {
2355
-gtk-icon-transform: rotate(-0.5turn);
2356
}
2357
/*********
2359
* Paned *
2360
*********/
2361
GtkPaned {
2362
-GtkPaned-handle-size: 1;
2363
-gtk-icon-source: none;
2364
margin: 0 8px 8px 0;
2365
}
2366
GtkPaned:dir(rtl) {
2368
margin-right: 0;
2369
margin-left: 8px;
2370
}
2371
GtkPaned .pane-separator {
2373
background-color: rgba(0, 0, 0, 0.12);
2374
}
2375
GtkPaned.wide {
2377
-GtkPaned-handle-size: 6;
2378
margin: 0;
2379
}
2380
GtkPaned.wide .pane-separator {
2382
background-color: transparent;
2383
border-style: none solid;
2384
border-color: rgba(0, 0, 0, 0.12);
2385
border-width: 1px;
2386
}
2387
GtkPaned.wide.vertical .pane-separator {
2389
border-style: solid none;
2390
}
2391
/**************
2393
* GtkInfoBar *
2394
**************/
2395
GtkInfoBar {
2396
border-style: none;
2397
}
2398
.info {
2400
background-color: #34A853;
2401
}
2402
.question {
2404
background-color: #4285F4;
2405
}
2406
.warning {
2408
background-color: #FBBC05;
2409
}
2410
.error {
2412
background-color: #EA4335;
2413
}
2414
.info,
2416
.question,
2417
.warning,
2418
.error {
2419
color: white;
2420
}
2421
.info .button:insensitive,
2423
.question .button:insensitive,
2424
.warning .button:insensitive,
2425
.error .button:insensitive {
2426
color: rgba(255, 255, 255, 0.3);
2427
}
2428
/************
2430
* Tooltips *
2431
************/
2432
.tooltip {
2433
color: white;
2434
padding: 4px;
2435
/* not working */
2436
border-radius: 4px;
2437
box-shadow: none;
2438
}
2439
.tooltip.background {
2441
background-color: rgba(97, 97, 97, 0.9);
2442
}
2443
.tooltip.window-frame.csd {
2445
background-color: transparent;
2446
}
2447
.tooltip * {
2449
padding: 0 2px;
2450
background-color: transparent;
2451
color: inherit;
2452
}
2453
/*****************
2455
* Color Chooser *
2456
*****************/
2457
GtkColorSwatch {
2458
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2459
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2460
}
2461
GtkColorSwatch:insensitive {
2463
opacity: 0.5;
2464
box-shadow: none;
2465
}
2466
GtkColorSwatch.top {
2468
border-top-left-radius: 4px;
2469
border-top-right-radius: 4px;
2470
}
2471
GtkColorSwatch.bottom {
2473
border-bottom-left-radius: 4px;
2474
border-bottom-right-radius: 4px;
2475
}
2476
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2478
border-top-left-radius: 4px;
2479
border-bottom-left-radius: 4px;
2480
}
2481
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2483
border-top-right-radius: 4px;
2484
border-bottom-right-radius: 4px;
2485
}
2486
GtkColorSwatch:only-child:not(.overlay) {
2488
border-radius: 4px;
2489
}
2490
GtkColorSwatch.top > .overlay {
2492
border-top-left-radius: 4px;
2493
border-top-right-radius: 4px;
2494
}
2495
GtkColorSwatch.bottom > .overlay {
2497
border-bottom-left-radius: 4px;
2498
border-bottom-right-radius: 4px;
2499
}
2500
GtkColorSwatch:first-child:not(.top) > .overlay {
2502
border-top-left-radius: 4px;
2503
border-bottom-left-radius: 4px;
2504
}
2505
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2507
border-top-right-radius: 4px;
2508
border-bottom-right-radius: 4px;
2509
}
2510
GtkColorSwatch:only-child > .overlay {
2512
border-radius: 4px;
2513
}
2514
GtkColorSwatch:hover {
2516
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2517
}
2518
GtkColorEditor GtkColorSwatch {
2520
border-radius: 4px;
2521
}
2522
GtkColorEditor GtkColorSwatch:hover {
2524
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2525
}
2526
GtkColorSwatch.color-dark {
2528
color: white;
2529
}
2530
GtkColorSwatch.color-light {
2532
color: rgba(0, 0, 0, 0.87);
2533
}
2534
GtkColorSwatch#add-color-button {
2536
background-image: linear-gradient(to right, #EA4335 25%, #FBBC05 25%, #FBBC05 50%, #34A853 50%, #34A853 75%, #4285F4 75%);
2537
color: white;
2538
}
2539
/********
2541
* Misc *
2542
********/
2543
.content-view {
2544
background-color: #F2F2F2;
2545
}
2546
.scale-popup .button {
2548
padding: 10px;
2549
}
2550
/**********************
2552
* Window Decorations *
2553
*********************/
2554
.window-frame {
2555
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2556
border-radius: 4px 4px 0 0;
2557
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2558
/* this is used for the resize cursor area */
2559
margin: 8px;
2560
}
2561
.window-frame:backdrop {
2563
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2564
}
2565
.window-frame.tiled {
2567
border-radius: 0;
2568
}
2569
.window-frame.popup {
2571
box-shadow: none;
2572
}
2573
.window-frame.ssd {
2575
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2576
}
2577
.window-frame.csd.popup {
2579
border-radius: 4px;
2580
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2581
}
2582
.window-frame.csd.tooltip {
2584
border-radius: 4px;
2585
box-shadow: none;
2586
}
2587
.window-frame.csd.message-dialog {
2589
border-radius: 4px;
2590
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2591
}
2592
.window-frame.csd.message-dialog:backdrop {
2594
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2595
}
2596
.window-frame.solid-csd {
2598
border-radius: 0;
2599
margin: 0;
2600
background-color: #E0E0E0;
2601
box-shadow: none;
2602
}
2603
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2605
background-color: #4285F4;
2606
color: white;
2607
}
2608
.view:insensitive:selected, GtkCalendar:insensitive:selected, .label:insensitive:selected, .grid-child:insensitive:selected, .entry:insensitive:selected, .menuitem.button.flat:insensitive:selected, .list-row:insensitive:selected, .sidebar:insensitive:selected, GtkPlacesSidebar.sidebar .list-row:selected:insensitive .label {
2610
color: rgba(255, 255, 255, 0.5);
2611
}
2612
.monospace {
2614
font: Monospace;
2615
}
2616
/**********************
2618
* Touch Copy & Paste *
2619
*********************/
2620
.entry.cursor-handle,
2621
.cursor-handle {
2622
background-color: #01A299;
2623
background-image: none;
2624
box-shadow: none;
2625
border-style: none;
2626
}
2627
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2629
.cursor-handle.insertion-cursor:dir(ltr),
2630
.cursor-handle.insertion-cursor:dir(rtl) {
2631
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2632
}
2633
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2635
.cursor-handle.insertion-cursor:dir(ltr),
2636
.cursor-handle.insertion-cursor:dir(rtl) {
2637
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2638
}
2639
/* Decouple the font of context menus from their entry/textview */
2641
.context-menu {
2642
font: initial;
2643
}
2644
.touch-selection {
2646
font: initial;
2647
color: rgba(0, 0, 0, 0.87);
2648
background-color: #FFFFFF;
2649
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2650
}
2651
.touch-selection:backdrop {
2653
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2654
}
2655
.overshoot.top {
2657
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2658
background-repeat: no-repeat;
2659
background-position: center top;
2660
background-color: transparent;
2661
border: none;
2662
box-shadow: none;
2663
}
2664
.overshoot.bottom {
2666
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2667
background-repeat: no-repeat;
2668
background-position: center bottom;
2669
background-color: transparent;
2670
border: none;
2671
box-shadow: none;
2672
}
2673
.overshoot.left {
2675
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2676
background-repeat: no-repeat;
2677
background-position: left center;
2678
background-color: transparent;
2679
border: none;
2680
box-shadow: none;
2681
}
2682
.overshoot.right {
2684
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2685
background-repeat: no-repeat;
2686
background-position: right center;
2687
background-color: transparent;
2688
border: none;
2689
box-shadow: none;
2690
}
2691
.undershoot.top {
2693
background-color: transparent;
2694
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2695
padding-top: 1px;
2696
background-size: 12px 1px;
2697
background-repeat: repeat-x;
2698
background-origin: content-box;
2699
background-position: left top;
2700
}
2701
.undershoot.bottom {
2703
background-color: transparent;
2704
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2705
padding-bottom: 1px;
2706
background-size: 12px 1px;
2707
background-repeat: repeat-x;
2708
background-origin: content-box;
2709
background-position: left bottom;
2710
}
2711
.undershoot.left {
2713
background-color: transparent;
2714
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2715
padding-left: 1px;
2716
background-size: 1px 12px;
2717
background-repeat: repeat-y;
2718
background-origin: content-box;
2719
background-position: left top;
2720
}
2721
.undershoot.right {
2723
background-color: transparent;
2724
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2725
padding-right: 1px;
2726
background-size: 1px 12px;
2727
background-repeat: repeat-y;
2728
background-origin: content-box;
2729
background-position: right top;
2730
}
2731
.floating-bar {
2733
padding: 3px 0 4px;
2734
border-width: 1px;
2735
border-style: solid solid none;
2736
border-color: rgba(0, 0, 0, 0.12);
2737
border-radius: 5px 5px 0 0;
2738
background-color: rgba(255, 255, 255, 0.9);
2739
background-clip: padding-box;
2740
}
2741
.floating-bar.left {
2743
border-left-style: none;
2744
border-top-left-radius: 0;
2745
}
2746
.floating-bar.right {
2748
border-right-style: none;
2749
border-top-right-radius: 0;
2750
}
2751
.floating-bar .button {
2753
padding: 4px;
2754
}
2755
/************
2757
* Nautilus *
2758
************/
2759
EelEditableLabel.entry {
2760
transition: none;
2761
}
2762
.nautilus-canvas-item.dim-label, .nautilus-canvas-item.label.separator, .titlebar .nautilus-canvas-item.subtitle,
2764
.header-bar .nautilus-canvas-item.subtitle,
2765
.nautilus-list-dim-label {
2766
color: rgba(0, 0, 0, 0.54);
2767
}
2768
.nautilus-canvas-item.dim-label:selected, .nautilus-canvas-item.label.separator:selected, .titlebar .nautilus-canvas-item.subtitle:selected,
2770
.header-bar .nautilus-canvas-item.subtitle:selected,
2771
.nautilus-list-dim-label:selected {
2772
color: rgba(255, 255, 255, 0.7);
2773
}
2774
.nautilus-desktop.nautilus-canvas-item {
2776
color: white;
2777
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2778
}
2779
.nautilus-desktop.nautilus-canvas-item:selected {
2781
text-shadow: none;
2782
}
2783
/* Toolbar */
2785
@keyframes needs_attention_keyframes {
2786
0% {
2787
background-color: transparent;
2788
}
2789
50% {
2790
background-color: alpha(currentColor, 0.24);
2791
}
2792
100% {
2793
background-color: transparent;
2794
}
2795
}
2796
.nautilus-operations-button-needs-attention {
2798
color: #01A299;
2799
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2800
}
2801
.nautilus-operations-button-needs-attention-multiple {
2803
color: #01A299;
2804
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2805
animation-iteration-count: 2;
2806
}
2807
.disk-space-display.unknown {
2809
background-color: #FBBC05;
2810
}
2811
.disk-space-display.used {
2813
background-color: #4285F4;
2814
}
2815
.disk-space-display.free {
2817
background-color: alpha(currentColor, 0.24);
2818
color: rgba(0, 0, 0, 0.38);
2819
}
2820
/* View */
2822
/********
2823
* Nemo *
2824
*******/
2825
NemoWindow .nemo-inactive-pane .view, NemoWindow .nemo-inactive-pane iconview {
2826
background-color: #FAFAFA;
2827
color: rgba(0, 0, 0, 0.87);
2828
}
2829
NemoWindow .sidebar .cell {
2831
background-color: #F2F2F2;
2832
color: rgba(0, 0, 0, 0.87);
2833
}
2834
NemoWindow .sidebar .cell:selected {
2836
color: white;
2837
background-color: #4285F4;
2838
}
2839
.nemo-desktop.nemo-canvas-item {
2841
color: white;
2842
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2843
}
2844
.nemo-desktop.nemo-canvas-item:selected {
2846
text-shadow: none;
2847
}
2848
/**************
2850
* Tweak Tool *
2851
**************/
2852
.tweak-categories {
2853
background-color: #FAFAFA;
2854
background-image: linear-gradient(to bottom, #FAFAFA);
2855
}
2856
.tweak-categories .separator {
2858
-GtkWidget-wide-separators: true;
2859
color: transparent;
2860
}
2861
/************
2863
* Software *
2864
************/
2865
.button.install-progress:insensitive {
2866
background-color: alpha(currentColor, 0.24);
2867
}
2868
/***********
2870
* Builder *
2871
***********/
2872
GbTerminalView {
2873
background-color: #FFFFFF;
2874
}
2875
/***********
2877
* Firefox *
2878
***********/
2879
.menubar {
2880
color: rgba(0, 0, 0, 0.54);
2881
}
2882
.menubar:hover {
2884
color: rgba(0, 0, 0, 0.87);
2885
}
2886
/***********
2888
* Synapse *
2889
***********/
2890
SynapseGuiMatchListView GtkWidget:selected {
2891
background-color: #4285F4;
2892
}
2893
/*********
2895
* Unity *
2896
*********/
2897
UnityDecoration {
2898
-UnityDecoration-extents: 28px 0 0 0;
2899
-UnityDecoration-input-extents: 8px;
2900
-UnityDecoration-shadow-offset-x: 0;
2901
-UnityDecoration-shadow-offset-y: 3px;
2902
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
2903
-UnityDecoration-active-shadow-radius: 18px;
2904
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
2905
-UnityDecoration-inactive-shadow-radius: 6px;
2906
-UnityDecoration-glow-size: 8px;
2907
-UnityDecoration-glow-color: #4285F4;
2908
-UnityDecoration-title-indent: 4px;
2909
-UnityDecoration-title-fade: 32px;
2910
-UnityDecoration-title-alignment: 0.0;
2911
}
2912
UnityDecoration.top {
2914
padding: 0 2px;
2915
border-style: none;
2916
border-radius: 4px 4px 0 0;
2917
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2918
background-color: #E0E0E0;
2919
color: rgba(0, 0, 0, 0.87);
2920
}
2921
UnityDecoration.top:backdrop {
2923
color: rgba(0, 0, 0, 0.54);
2924
}
2925
UnityDecoration.menuitem,
2927
UnityDecoration .menuitem {
2928
color: rgba(0, 0, 0, 0.54);
2929
}
2930
UnityDecoration.menubar.menuitem:hover,
2932
UnityDecoration.menubar .menuitem *:hover {
2933
box-shadow: inset 0 -2px #4285F4;
2934
background-color: transparent;
2935
color: rgba(0, 0, 0, 0.87);
2936
}
2937
.background:not(.csd) :not(.titlebar) .header-bar {
2939
border-radius: 0;
2940
box-shadow: none;
2941
}
2942
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
2944
border-style: none;
2945
}
2946
UnityPanelWidget,
2948
.unity-panel {
2949
background-color: #CBCBCB;
2950
background-image: linear-gradient(to bottom, #CBCBCB);
2951
color: rgba(0, 0, 0, 0.87);
2952
}
2953
UnityPanelWidget:backdrop,
2955
.unity-panel:backdrop {
2956
color: rgba(0, 0, 0, 0.54);
2957
}
2958
.unity-panel.menuitem,
2960
.unity-panel .menuitem {
2961
color: rgba(0, 0, 0, 0.54);
2962
}
2963
.unity-panel.menubar.menuitem:hover,
2965
.unity-panel.menubar .menuitem *:hover {
2966
box-shadow: inset 0 -2px #4285F4;
2967
background-color: transparent;
2968
color: rgba(0, 0, 0, 0.87);
2969
}
2970
@keyframes playbackmenuitem_spinner {
2972
to {
2973
-gtk-icon-transform: rotate(1turn);
2974
}
2975
}
2976
.menu IdoPlaybackMenuItem.menuitem:active {
2978
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
2979
animation: playbackmenuitem_spinner 1s infinite linear;
2980
color: #4285F4;
2981
}
2982
/* GTK NAMED COLORS
2984
----------------
2985
use responsibly! */
2986
/*
2987
widget text/foreground color */
2988
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
2989
/*
2990
text color for entries, views and content in general */
2991
@define-color theme_text_color rgba(0, 0, 0, 0.87);
2992
/*
2993
widget base background color */
2994
@define-color theme_bg_color #F2F2F2;
2995
/*
2996
text widgets and the like base background color */
2997
@define-color theme_base_color #FFFFFF;
2998
/*
2999
base background color of selections */
3000
@define-color theme_selected_bg_color #4285F4;
3001
/*
3002
text/foreground color of selections */
3003
@define-color theme_selected_fg_color white;
3004
/*
3005
base background color of insensitive widgets */
3006
@define-color insensitive_bg_color #F2F2F2;
3007
/*
3008
text foreground color of insensitive widgets */
3009
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3010
/*
3011
insensitive text widgets and the like base background color */
3012
@define-color insensitive_base_color #FAFAFA;
3013
/*
3014
widget text/foreground color on backdrop windows */
3015
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3016
/*
3017
text color for entries, views and content in general on backdrop windows */
3018
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3019
/*
3020
widget base background color on backdrop windows */
3021
@define-color theme_unfocused_bg_color #F2F2F2;
3022
/*
3023
text widgets and the like base background color on backdrop windows */
3024
@define-color theme_unfocused_base_color #FFFFFF;
3025
/*
3026
base background color of selections on backdrop windows */
3027
@define-color theme_unfocused_selected_bg_color #4285F4;
3028
/*
3029
text/foreground color of selections on backdrop windows */
3030
@define-color theme_unfocused_selected_fg_color white;
3031
/*
3032
insensitive color on backdrop windows */
3033
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3034
/*
3035
widgets main borders color */
3036
@define-color borders rgba(0, 0, 0, 0.12);
3037
/*
3038
widgets main borders color on backdrop windows */
3039
@define-color unfocused_borders rgba(0, 0, 0, 0.12);
3040
/*
3041
these are pretty self explicative */
3042
@define-color warning_color #FBBC05;
3043
@define-color error_color #EA4335;
3044
@define-color success_color #34A853;
3045
/*
3046
these colors are exported for the window manager and shouldn't be used in applications,
3047
read if you used those and something break with a version upgrade you're on your own... */
3048
@define-color wm_title rgba(0, 0, 0, 0.87);
3049
@define-color wm_unfocused_title rgba(0, 0, 0, 0.54);
3050
@define-color wm_highlight rgba(255, 255, 255, 0.4);
3051
@define-color wm_bg #E0E0E0;
3052
/*
3053
FIXME this is really an API */
3054
@define-color content_view_bg #FFFFFF;
3055
@define-color placeholder_text_color #757575;
3056