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)), linear-gradient(to bottom, transparent);
4
}
5
to {
6
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.12));
7
}
8
}
9
@keyframes flat_ripple_effect {
11
from {
12
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.12));
13
}
14
to {
15
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.12));
16
}
17
}
18
@keyframes list_ripple_effect {
20
from {
21
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, transparent);
22
}
23
to {
24
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, transparent);
25
}
26
}
27
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
32
-GtkTextView-error-underline-color: #EA4335;
33
-GtkCheckButton-indicator-size: 24;
34
-GtkCheckMenuItem-indicator-size: 16;
35
-GtkScrolledWindow-scrollbar-spacing: 0;
36
-GtkScrolledWindow-scrollbars-within-bevel: 1;
37
-GtkToolItemGroup-expander-size: 11;
38
-GtkExpander-expander-size: 16;
39
-GtkTreeView-expander-size: 11;
40
-GtkTreeView-horizontal-separator: 4;
41
-GtkMenu-horizontal-padding: 0;
42
-GtkMenu-vertical-padding: 0;
43
-GtkWidget-link-color: #4285F4;
44
-GtkWidget-visited-link-color: #E040FB;
45
-GtkWidget-focus-padding: 2;
46
-GtkWidget-focus-line-width: 1;
47
-GtkWidget-text-handle-width: 20;
48
-GtkWidget-text-handle-height: 20;
49
-GtkDialog-button-spacing: 4;
50
-GtkDialog-action-area-border: 0;
51
-GtkStatusbar-shadow-type: none;
52
outline-style: solid;
53
outline-width: 2px;
54
outline-color: alpha(currentColor, 0.24);
55
outline-offset: -4px;
56
outline-radius: 2px;
57
}
58
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: #F2F2F2;
64
color: rgba(0, 0, 0, 0.87);
65
}
66
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
*:insensitive {
74
-gtk-image-effect: dim;
75
}
76
.gtkstyle-fallback {
78
background-color: #F2F2F2;
79
color: rgba(0, 0, 0, 0.87);
80
}
81
.gtkstyle-fallback:prelight {
83
background-color: #e5e5e5;
84
color: rgba(0, 0, 0, 0.87);
85
}
86
.gtkstyle-fallback:active {
88
background-color: #d9d9d9;
89
color: rgba(0, 0, 0, 0.87);
90
}
91
.gtkstyle-fallback:insensitive {
93
background-color: #F2F2F2;
94
color: rgba(0, 0, 0, 0.38);
95
}
96
.gtkstyle-fallback:selected {
98
background-color: #4285F4;
99
color: white;
100
}
101
.view {
103
background-color: #FFFFFF;
104
color: rgba(0, 0, 0, 0.87);
105
}
106
.view:hover, .view:active, .view:selected, GtkCalendar:selected {
108
border-radius: 2px;
109
}
110
.view:insensitive {
112
color: rgba(0, 0, 0, 0.38);
113
}
114
.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
116
border: 1px solid #7BAAF7;
117
background-color: rgba(123, 170, 247, 0.3);
118
}
119
.label.separator {
121
color: rgba(0, 0, 0, 0.87);
122
}
123
.label:insensitive {
125
color: rgba(0, 0, 0, 0.38);
126
}
127
.dim-label, .label.separator, .titlebar .subtitle,
129
.header-bar .subtitle {
130
opacity: 0.6;
131
}
132
GtkAssistant .sidebar {
134
padding: 6px 0;
135
}
136
GtkAssistant .sidebar:dir(ltr) {
138
border-right: 1px solid rgba(0, 0, 0, 0.12);
139
}
140
GtkAssistant .sidebar:dir(rtl) {
142
border-left: 1px solid rgba(0, 0, 0, 0.12);
143
}
144
GtkAssistant .sidebar .label {
146
opacity: 0.5;
147
padding: 5px 12px 6px;
148
font-weight: 500;
149
}
150
GtkAssistant .sidebar .label.highlight {
152
opacity: 1;
153
}
154
GtkTextView {
156
background-color: #FAFAFA;
157
}
158
.grid-child {
160
padding: 4px;
161
border-radius: 2px;
162
}
163
/*********************
165
* Spinner Animation *
166
*********************/
167
@keyframes spin {
168
to {
169
-gtk-icon-transform: rotate(1turn);
170
}
171
}
172
.spinner {
174
background-color: blue;
175
background-image: none;
176
opacity: 0;
177
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
178
}
179
.spinner:active {
181
opacity: 1;
182
animation: spin 1s linear infinite;
183
}
184
.spinner:active:insensitive {
186
opacity: 0.5;
187
}
188
/****************
190
* Text Entries *
191
****************/
192
.entry {
193
padding: 7px 8px 8px;
194
border-radius: 2px;
195
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
196
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
197
background-color: #FFFFFF;
198
color: rgba(0, 0, 0, 0.87);
199
}
200
.entry:focus {
202
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
203
}
204
.entry:insensitive {
206
color: rgba(0, 0, 0, 0.38);
207
background-color: #FAFAFA;
208
}
209
.entry.flat, .notebook GtkGrid > .entry {
211
border-radius: 0;
212
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
213
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#4285F4), to(transparent)) 0 0 0/0 0 0px;
214
border-radius: 0;
215
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
216
background-color: transparent;
217
color: rgba(0, 0, 0, 0.87);
218
}
219
.entry.flat:focus, .notebook GtkGrid > .entry:focus {
221
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#4285F4), to(transparent)) 0 0 2/0 0 2px;
222
box-shadow: inset 0 -2px #4285F4;
223
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 250ms;
224
}
225
.entry.flat:insensitive, .notebook GtkGrid > .entry:insensitive {
227
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
228
background-color: transparent;
229
color: rgba(0, 0, 0, 0.38);
230
}
231
.entry.image.left {
233
padding-left: 2px;
234
}
235
.entry.image.right {
237
padding-right: 2px;
238
}
239
.entry.progressbar, GtkTreeView.view.progressbar, GtkTreeView.view.trough {
241
margin: 2px;
242
border-style: none none solid;
243
border-width: 2px;
244
border-color: #4285F4;
245
border-radius: 0;
246
box-shadow: none;
247
background-color: transparent;
248
background-image: none;
249
}
250
.linked > .entry.flat, .notebook GtkGrid.linked > .entry,
252
.linked.vertical > .entry.flat, .notebook
253
GtkGrid.linked.vertical > .entry {
254
border-radius: 0;
255
}
256
.entry.error {
258
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
259
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
260
background-color: #EA4335;
261
color: white;
262
}
263
.entry.error:focus {
265
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
266
}
267
.entry.error:insensitive {
269
color: rgba(0, 0, 0, 0.38);
270
background-color: #FAFAFA;
271
}
272
.entry.error.flat, .notebook GtkGrid > .error.entry {
274
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
275
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#EA4335), to(transparent)) 0 0 0/0 0 0px;
276
border-radius: 0;
277
box-shadow: inset 0 -1px #EA4335;
278
background-color: transparent;
279
color: rgba(0, 0, 0, 0.87);
280
}
281
.entry.error.flat:focus, .notebook GtkGrid > .error.entry:focus {
283
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#EA4335), to(transparent)) 0 0 2/0 0 2px;
284
box-shadow: inset 0 -2px #EA4335;
285
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 250ms;
286
}
287
.entry.error.flat:insensitive, .notebook GtkGrid > .error.entry:insensitive {
289
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
290
background-color: transparent;
291
color: rgba(0, 0, 0, 0.38);
292
}
293
.entry.warning {
295
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
296
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
297
background-color: #FBBC05;
298
color: white;
299
}
300
.entry.warning:focus {
302
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
303
}
304
.entry.warning:insensitive {
306
color: rgba(0, 0, 0, 0.38);
307
background-color: #FAFAFA;
308
}
309
.entry.warning.flat, .notebook GtkGrid > .warning.entry {
311
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
312
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#FBBC05), to(transparent)) 0 0 0/0 0 0px;
313
border-radius: 0;
314
box-shadow: inset 0 -1px #FBBC05;
315
background-color: transparent;
316
color: rgba(0, 0, 0, 0.87);
317
}
318
.entry.warning.flat:focus, .notebook GtkGrid > .warning.entry:focus {
320
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#FBBC05), to(transparent)) 0 0 2/0 0 2px;
321
box-shadow: inset 0 -2px #FBBC05;
322
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 250ms;
323
}
324
.entry.warning.flat:insensitive, .notebook GtkGrid > .warning.entry:insensitive {
326
box-shadow: inset 0 -1px alpha(currentColor, 0.24);
327
background-color: transparent;
328
color: rgba(0, 0, 0, 0.38);
329
}
330
.entry.image:not(:hover):not(:active) {
332
color: alpha(currentColor, 0.7);
333
}
334
.entry.image:insensitive {
336
color: alpha(currentColor, 0.5);
337
}
338
GtkTreeView .entry:not(:selected), GtkTreeView .entry:not(:selected):focus {
340
padding: 2px;
341
border-image: none;
342
border-radius: 0;
343
box-shadow: none;
344
background-color: #FFFFFF;
345
}
346
/***********
348
* Buttons *
349
***********/
350
@keyframes needs_attention {
351
from {
352
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#01A299), to(transparent));
353
}
354
to {
355
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#01A299), to(transparent));
356
}
357
}
358
.button {
361
padding: 7px 10px 8px;
362
border-radius: 2px;
363
background-repeat: no-repeat;
364
background-position: center, center;
365
background-size: 90px 90px, auto;
366
font-weight: 500;
367
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
368
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
369
background-color: #FAFAFA;
370
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
371
color: rgba(0, 0, 0, 0.62);
372
}
373
.button:hover {
376
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
377
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
378
color: rgba(0, 0, 0, 0.87);
379
}
380
.button:active {
383
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
384
animation: ripple_effect 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
385
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
386
color: rgba(0, 0, 0, 0.87);
387
}
388
.button:insensitive {
391
box-shadow: none;
392
background-color: alpha(currentColor, 0.24);
393
color: rgba(0, 0, 0, 0.26);
394
}
395
.button:insensitive > .label {
398
color: inherit;
399
}
400
.button:checked {
403
background-color: #4285F4;
404
color: white;
405
}
406
.button:checked:insensitive {
409
background-color: rgba(66, 133, 244, 0.3);
410
color: rgba(66, 133, 244, 0.5);
411
}
412
.button:checked:insensitive > .label {
415
color: inherit;
416
}
417
.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),
419
.header-bar .button:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:not(.suggested-action):not(.destructive-action), .app-notification .button,
420
.app-notification.frame .button,
421
.button.flat {
422
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
423
box-shadow: none;
424
background-color: transparent;
425
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
426
color: alpha(currentColor, 0.7);
427
}
428
.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),
430
.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,
431
.button.flat:hover {
432
box-shadow: none;
433
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.12));
434
color: currentColor;
435
}
436
.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),
438
.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,
439
.button.flat:active {
440
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
441
animation: flat_ripple_effect 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
442
box-shadow: none;
443
color: currentColor;
444
}
445
.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),
447
.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,
448
.button.flat:insensitive {
449
box-shadow: none;
450
background-color: transparent;
451
color: alpha(currentColor, 0.3);
452
}
453
.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,
455
.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,
456
.button.flat:insensitive > .label {
457
color: inherit;
458
}
459
.toolbar:not(.search-bar) .button:checked, .titlebar .button:checked:not(.suggested-action):not(.destructive-action),
461
.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,
462
.button.flat:checked {
463
background-color: alpha(currentColor, 0.24);
464
color: currentColor;
465
}
466
.toolbar:not(.search-bar) .button:checked:insensitive, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action),
468
.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,
469
.button.flat:checked:insensitive {
470
background-color: alpha(currentColor, 0.24);
471
color: alpha(currentColor, 0.5);
472
}
473
.toolbar:not(.search-bar) .button:checked:insensitive > .label, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label,
475
.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,
476
.button.flat:checked:insensitive > .label {
477
color: inherit;
478
}
479
.button.osd.image-button {
482
padding: 16px;
483
background-size: 60px 60px, auto;
484
}
485
.button.osd:insensitive {
488
opacity: 0;
489
}
490
.button.suggested-action {
493
background-color: #01A299;
494
color: white;
495
}
496
.button.suggested-action:insensitive {
499
box-shadow: none;
500
background-color: alpha(currentColor, 0.24);
501
color: rgba(0, 0, 0, 0.38);
502
}
503
.button.suggested-action:insensitive > .label {
506
color: inherit;
507
}
508
.button.suggested-action:checked {
511
background-color: #4dbeb8;
512
}
513
.toolbar:not(.search-bar) .suggested-action.button, .titlebar .suggested-action.button:not(.suggested-action):not(.destructive-action),
515
.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,
516
.button.suggested-action.flat {
517
background-color: transparent;
518
color: #01A299;
519
}
520
.toolbar:not(.search-bar) .suggested-action.button:insensitive, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action),
522
.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,
523
.button.suggested-action.flat:insensitive {
524
box-shadow: none;
525
background-color: transparent;
526
color: alpha(currentColor, 0.5);
527
}
528
.toolbar:not(.search-bar) .suggested-action.button:insensitive > .label, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
530
.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,
531
.button.suggested-action.flat:insensitive > .label {
532
color: inherit;
533
}
534
.toolbar:not(.search-bar) .suggested-action.button:checked, .titlebar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action),
536
.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,
537
.button.suggested-action.flat:checked {
538
background-color: alpha(currentColor, 0.24);
539
}
540
.button.destructive-action {
543
background-color: #EA4335;
544
color: white;
545
}
546
.button.destructive-action:insensitive {
549
box-shadow: none;
550
background-color: alpha(currentColor, 0.24);
551
color: rgba(0, 0, 0, 0.38);
552
}
553
.button.destructive-action:insensitive > .label {
556
color: inherit;
557
}
558
.button.destructive-action:checked {
561
background-color: #f07b72;
562
}
563
.toolbar:not(.search-bar) .destructive-action.button, .titlebar .destructive-action.button:not(.suggested-action):not(.destructive-action),
565
.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,
566
.button.destructive-action.flat {
567
background-color: transparent;
568
color: #EA4335;
569
}
570
.toolbar:not(.search-bar) .destructive-action.button:insensitive, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action),
572
.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,
573
.button.destructive-action.flat:insensitive {
574
box-shadow: none;
575
background-color: transparent;
576
color: alpha(currentColor, 0.5);
577
}
578
.toolbar:not(.search-bar) .destructive-action.button:insensitive > .label, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
580
.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,
581
.button.destructive-action.flat:insensitive > .label {
582
color: inherit;
583
}
584
.toolbar:not(.search-bar) .destructive-action.button:checked, .titlebar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action),
586
.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,
587
.button.destructive-action.flat:checked {
588
background-color: alpha(currentColor, 0.24);
589
}
590
.button.text-button,
593
GtkScaleButton.button.text-button,
594
GtkVolumeButton.button.text-button {
595
padding-left: 16px;
596
padding-right: 16px;
597
}
598
.button.text-button.image-button {
601
padding: 7px 10px 8px;
602
outline-radius: 2px;
603
border-radius: 2px;
604
background-size: 90px 90px, auto;
605
}
606
.button.text-button.image-button .label:first-child {
609
padding-left: 6px;
610
}
611
.button.text-button.image-button .label:last-child {
614
padding-right: 6px;
615
}
616
.stack-switcher >
618
.button {
619
outline-offset: -4px;
620
}
621
.stack-switcher >
623
.button > .label {
624
padding-left: 6px;
625
padding-right: 6px;
626
}
627
.stack-switcher >
629
.button > GtkImage {
630
padding-left: 6px;
631
padding-right: 6px;
632
padding-top: 3px;
633
padding-bottom: 3px;
634
}
635
.stack-switcher >
638
.button.text-button {
639
padding: 7px 10px 8px;
640
}
641
.stack-switcher >
643
.button.image-button {
644
padding: 7px 4px;
645
}
646
.stack-switcher >
648
.button.needs-attention:checked > .label,
649
.stack-switcher >
650
.button.needs-attention:checked > GtkImage {
651
animation: none;
652
background-image: none;
653
}
654
.primary-toolbar
656
.button {
657
icon-shadow: none;
658
}
659
.toolbar:not(.search-bar) .linked > .button, .titlebar .linked > .button:not(.suggested-action):not(.destructive-action),
661
.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)
662
.linked.vertical > .button, .titlebar
663
.linked.vertical > .button:not(.suggested-action):not(.destructive-action),
664
.header-bar
665
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .frame.action-bar
666
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .app-notification
667
.linked.vertical > .button, .linked >
668
.button.flat,
669
.linked.vertical >
670
.button.flat {
671
border-radius: 2px;
672
}
673
.toolbar:not(.search-bar) .linked > .image-button.button, .titlebar .linked > .image-button.button:not(.suggested-action):not(.destructive-action),
675
.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)
676
.linked.vertical > .image-button.button, .titlebar
677
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
678
.header-bar
679
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
680
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
681
.linked.vertical > .image-button.button, .linked >
682
.button.flat.image-button,
683
.linked.vertical >
684
.button.flat.image-button {
685
outline-radius: 9999px;
686
border-radius: 9999px;
687
}
688
.toolbar:not(.search-bar) .linked > .text-button.image-button.button, .titlebar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
690
.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)
691
.linked.vertical > .text-button.image-button.button, .titlebar
692
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
693
.header-bar
694
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
695
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
696
.linked.vertical > .text-button.image-button.button,
697
.linked >
698
.button.flat.text-button.image-button,
699
.linked.vertical >
700
.button.flat.text-button.image-button {
701
outline-radius: 2px;
702
border-radius: 2px;
703
}
704
.button.image-button, .inline-toolbar .button, .spinbutton .button, .notebook tab .button, GtkScaleButton.button,
707
GtkVolumeButton.button, .header-bar .button.titlebutton,
708
.titlebar .button.titlebutton, .nautilus-circular-button {
709
padding: 10px;
710
outline-radius: 100px;
711
border-radius: 100px;
712
background-size: 45px 45px, auto;
713
}
714
.stack-switcher >
716
.button.needs-attention > .label,
717
.stack-switcher >
718
.button.needs-attention > GtkImage, .sidebar-item.needs-attention > .label {
719
animation: needs_attention 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
720
background-repeat: no-repeat;
721
background-position: right 3px;
722
background-size: 6px 6px;
723
}
724
.stack-switcher >
726
.button.needs-attention > .label:dir(rtl),
727
.stack-switcher >
728
.button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > .label:dir(rtl) {
729
background-position: left 3px;
730
}
731
.linked > .entry, .linked > .button, .linked > GtkComboBox > .the-button-in-the-combobox:dir(ltr), .linked > GtkComboBox > .the-button-in-the-combobox:dir(rtl),
733
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(ltr),
734
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(rtl) {
735
outline-radius: 2px;
736
border-radius: 0;
737
}
738
.linked > .entry:first-child, .linked > .button:first-child, .linked > GtkComboBox:first-child > .the-button-in-the-combobox,
740
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
741
border-top-left-radius: 2px;
742
border-bottom-left-radius: 2px;
743
}
744
.linked > .entry:last-child, .linked > .button:last-child, .linked > GtkComboBox:last-child > .the-button-in-the-combobox,
746
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
747
border-top-right-radius: 2px;
748
border-bottom-right-radius: 2px;
749
}
750
.linked > .entry:only-child, .linked > .button:only-child, .linked > GtkComboBox:only-child > .the-button-in-the-combobox,
752
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
753
border-radius: 2px;
754
}
755
.linked.vertical > .entry, .linked.vertical > .button, .linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
757
.linked.vertical > GtkComboBox > .the-button-in-the-combobox {
758
outline-radius: 2px;
759
border-radius: 0;
760
}
761
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
763
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox {
764
border-top-left-radius: 2px;
765
border-top-right-radius: 2px;
766
}
767
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
769
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox {
770
border-bottom-left-radius: 2px;
771
border-bottom-right-radius: 2px;
772
}
773
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
775
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox {
776
border-radius: 2px;
777
}
778
/* menu buttons */
780
GtkColorButton.button {
781
padding: 7px 8px 8px;
782
}
783
GtkColorButton.button GtkColorSwatch:first-child:last-child {
785
border-radius: 2px;
786
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
787
}
788
/*********
790
* Links *
791
*********/
792
*:link, .button:link, .button:visited {
793
color: #4285F4;
794
}
795
*:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited {
797
color: #4285F4;
798
}
799
*:link:visited, .button:visited {
801
color: #E040FB;
802
}
803
*:link:visited:hover, .button:visited:hover, *:link:visited:active, .button:visited:active {
805
color: #E040FB;
806
}
807
*:selected *:link:visited, *:selected .button:visited {
809
color: #b3cefb;
810
}
811
*:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link,
813
.header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
814
color: #d9e7fd;
815
}
816
.button:link > .label, .button:visited > .label {
818
text-decoration-line: underline;
819
}
820
/*****************
822
* GtkSpinButton *
823
*****************/
824
.spinbutton .button {
825
padding: 4px;
826
border: solid 6px transparent;
827
color: rgba(0, 0, 0, 0.54);
828
}
829
.spinbutton .button:hover, .spinbutton .button:active {
831
color: rgba(0, 0, 0, 0.87);
832
}
833
.spinbutton .button:insensitive {
835
color: rgba(0, 0, 0, 0.26);
836
}
837
.spinbutton .button:active {
839
background-color: alpha(currentColor, 0.24);
840
}
841
.spinbutton.vertical .button {
843
padding-top: 10px;
844
padding-bottom: 10px;
845
border: none;
846
}
847
.spinbutton.vertical .button:first-child {
849
border-radius: 2px 2px 0 0;
850
}
851
.spinbutton.vertical .button:last-child {
853
border-radius: 0 0 2px 2px;
854
}
855
/**************
857
* ComboBoxes *
858
**************/
859
GtkComboBox {
860
-GtkComboBox-arrow-scaling: 0.5;
861
-GtkComboBox-shadow-type: none;
862
}
863
GtkComboBox > .the-button-in-the-combobox {
865
padding: 5px 6px 6px;
866
}
867
GtkComboBox .menu {
869
padding: 2px 0;
870
}
871
GtkComboBox .menu .menuitem {
873
padding: 5px 6px 6px;
874
}
875
GtkComboBox .separator.vertical {
877
-GtkWidget-wide-separators: true;
878
}
879
GtkComboBox.combobox-entry .entry:dir(ltr) {
881
border-top-right-radius: 0;
882
border-bottom-right-radius: 0;
883
}
884
GtkComboBox.combobox-entry .entry:dir(rtl) {
886
border-top-left-radius: 0;
887
border-bottom-left-radius: 0;
888
}
889
GtkComboBox.combobox-entry .button {
891
padding: 10px;
892
}
893
GtkComboBox.combobox-entry .button:dir(ltr) {
895
border-top-left-radius: 0;
896
border-bottom-left-radius: 0;
897
}
898
GtkComboBox.combobox-entry .button:dir(rtl) {
900
border-top-right-radius: 0;
901
border-bottom-right-radius: 0;
902
}
903
/************
905
* Toolbars *
906
************/
907
.toolbar {
908
-GtkWidget-window-dragging: true;
909
padding: 4px;
910
background-color: #F2F2F2;
911
}
912
.osd .toolbar, .toolbar.osd, .app-notification,
914
.app-notification.frame {
915
transition: border-image 150ms cubic-bezier(0, 0, 0.2, 1);
916
padding: 6px;
917
border-style: solid;
918
border-width: 8px;
919
border-image: -gtk-scaled(url("assets/box-shadow.png"), url("assets/box-shadow@2.png")) 10/10px stretch;
920
border-radius: 2px;
921
background-color: #FFFFFF;
922
}
923
.osd .toolbar:backdrop, .toolbar.osd:backdrop, .app-notification:backdrop {
925
border-image: -gtk-scaled(url("assets/box-shadow-backdrop.png"), url("assets/box-shadow-backdrop@2.png")) 10/10px stretch;
926
}
927
.inline-toolbar {
929
padding: 6px;
930
border-style: solid;
931
border-width: 0 1px 1px;
932
border-color: rgba(0, 0, 0, 0.12);
933
background-color: #FAFAFA;
934
}
935
.search-bar, .location-bar {
937
padding: 6px;
938
border-style: solid;
939
border-width: 0 0 1px;
940
border-color: rgba(0, 0, 0, 0.12);
941
background-color: #F2F2F2;
942
background-clip: border-box;
943
}
944
/***************
946
* Header bars *
947
***************/
948
.titlebar,
949
.header-bar {
950
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
951
padding: 6px;
952
border-radius: 2px 2px 0 0;
953
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);
954
background-color: #E0E0E0;
955
color: rgba(0, 0, 0, 0.87);
956
}
957
.titlebar:backdrop,
959
.header-bar:backdrop {
960
color: rgba(0, 0, 0, 0.54);
961
}
962
.titlebar .title,
964
.header-bar .title {
965
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
966
padding-left: 12px;
967
padding-right: 12px;
968
font-weight: bold;
969
}
970
.titlebar .subtitle,
972
.header-bar .subtitle {
973
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
974
padding-left: 12px;
975
padding-right: 12px;
976
font-size: smaller;
977
}
978
.titlebar .header-bar-separator,
980
.titlebar > GtkBox > .separator.vertical,
981
.header-bar .header-bar-separator,
982
.header-bar > GtkBox > .separator.vertical {
983
-GtkWidget-wide-separators: true;
984
-GtkWidget-separator-width: 1px;
985
border-style: solid;
986
border-width: 0 1px;
987
border-color: rgba(0, 0, 0, 0.12);
988
}
989
.titlebar .button:not(.suggested-action):not(.destructive-action),
991
.header-bar .button:not(.suggested-action):not(.destructive-action) {
992
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#4285F4), to(transparent)) 0 0 0/0 0 0px;
993
}
994
.titlebar .button:not(.suggested-action):not(.destructive-action):checked,
996
.header-bar .button:not(.suggested-action):not(.destructive-action):checked {
997
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#4285F4), to(transparent)) 0 0 2/0 0 2px;
998
}
999
.titlebar .button:not(.suggested-action):not(.destructive-action):checked, .titlebar .button:not(.suggested-action):not(.destructive-action):checked:insensitive,
1001
.header-bar .button:not(.suggested-action):not(.destructive-action):checked,
1002
.header-bar .button:not(.suggested-action):not(.destructive-action):checked:insensitive {
1003
background-color: transparent;
1004
}
1005
.titlebar .button.suggested-action:insensitive, .titlebar .button.destructive-action:insensitive,
1007
.header-bar .button.suggested-action:insensitive,
1008
.header-bar .button.destructive-action:insensitive {
1009
color: alpha(currentColor, 0.5);
1010
}
1011
.titlebar .button.suggested-action:insensitive > .label, .titlebar .button.destructive-action:insensitive > .label,
1013
.header-bar .button.suggested-action:insensitive > .label,
1014
.header-bar .button.destructive-action:insensitive > .label {
1015
color: inherit;
1016
}
1017
.titlebar.selection-mode,
1019
.header-bar.selection-mode {
1020
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);
1021
background-color: #4285F4;
1022
color: white;
1023
}
1024
.titlebar.selection-mode:backdrop,
1026
.header-bar.selection-mode:backdrop {
1027
color: rgba(255, 255, 255, 0.7);
1028
}
1029
.titlebar.selection-mode .button,
1031
.header-bar.selection-mode .button {
1032
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(white), to(transparent)) 0 0 0/0 0 0px;
1033
color: rgba(255, 255, 255, 0.7);
1034
}
1035
.titlebar.selection-mode .button:hover, .titlebar.selection-mode .button:active, .titlebar.selection-mode .button:checked,
1037
.header-bar.selection-mode .button:hover,
1038
.header-bar.selection-mode .button:active,
1039
.header-bar.selection-mode .button:checked {
1040
color: white;
1041
}
1042
.titlebar.selection-mode .button:checked,
1044
.header-bar.selection-mode .button:checked {
1045
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(white), to(transparent)) 0 0 2/0 0 2px;
1046
color: white;
1047
}
1048
.titlebar.selection-mode .button:checked:insensitive,
1050
.header-bar.selection-mode .button:checked:insensitive {
1051
color: rgba(255, 255, 255, 0.5);
1052
}
1053
.titlebar.selection-mode .button:checked:insensitive > .label,
1055
.header-bar.selection-mode .button:checked:insensitive > .label {
1056
color: inherit;
1057
}
1058
.titlebar.selection-mode .button.suggested-action,
1060
.header-bar.selection-mode .button.suggested-action {
1061
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
1062
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1063
background-color: #FAFAFA;
1064
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
1065
color: rgba(0, 0, 0, 0.62);
1066
}
1067
.titlebar.selection-mode .button.suggested-action:hover,
1069
.header-bar.selection-mode .button.suggested-action:hover {
1070
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1071
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
1072
color: rgba(0, 0, 0, 0.87);
1073
}
1074
.titlebar.selection-mode .button.suggested-action:active,
1076
.header-bar.selection-mode .button.suggested-action:active {
1077
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
1078
animation: ripple_effect 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
1079
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1080
color: rgba(0, 0, 0, 0.87);
1081
}
1082
.titlebar.selection-mode .button.suggested-action:insensitive,
1084
.header-bar.selection-mode .button.suggested-action:insensitive {
1085
box-shadow: none;
1086
background-color: alpha(currentColor, 0.24);
1087
color: rgba(0, 0, 0, 0.26);
1088
}
1089
.titlebar.selection-mode .button.suggested-action:insensitive > .label,
1091
.header-bar.selection-mode .button.suggested-action:insensitive > .label {
1092
color: inherit;
1093
}
1094
.titlebar.selection-mode .selection-menu,
1096
.header-bar.selection-mode .selection-menu {
1097
padding-left: 16px;
1098
padding-right: 16px;
1099
}
1100
.titlebar.selection-mode .selection-menu GtkArrow,
1102
.header-bar.selection-mode .selection-menu GtkArrow {
1103
-GtkArrow-arrow-scaling: 1;
1104
}
1105
.titlebar.selection-mode .selection-menu .arrow,
1107
.header-bar.selection-mode .selection-menu .arrow {
1108
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1109
}
1110
.tiled .titlebar, .maximized .titlebar, .tiled
1112
.header-bar, .maximized
1113
.header-bar {
1114
border-radius: 0;
1115
box-shadow: none;
1116
}
1117
.titlebar.default-decoration,
1119
.header-bar.default-decoration {
1120
padding: 6px;
1121
border-width: 0;
1122
}
1123
.titlebar.default-decoration .button,
1125
.header-bar.default-decoration .button {
1126
padding: 4px;
1127
}
1128
/************
1130
* Pathbars *
1131
************/
1132
.path-bar .button {
1133
padding: 7px 6px 8px;
1134
}
1135
.path-bar .button .label:last-child {
1137
padding-left: 2px;
1138
}
1139
.path-bar .button .label:first-child {
1141
padding-right: 2px;
1142
}
1143
.path-bar .button GtkImage {
1145
padding-top: 1px;
1146
}
1147
.path-bar .button GtkImage:only-child {
1149
padding-right: 4px;
1150
padding-left: 4px;
1151
}
1152
/**************
1154
* Tree Views *
1155
**************/
1156
GtkTreeView.view {
1157
-GtkTreeView-grid-line-width: 1;
1158
-GtkTreeView-grid-line-pattern: '';
1159
-GtkTreeView-tree-line-width: 1;
1160
-GtkTreeView-tree-line-pattern: '';
1161
-GtkTreeView-expander-size: 16;
1162
border-left-color: alpha(currentColor, 0.24);
1163
border-top-color: rgba(0, 0, 0, 0.12);
1164
border-radius: 0;
1165
}
1166
GtkTreeView.view:hover, GtkTreeView.view:active, GtkTreeView.view:selected {
1168
border-radius: 0;
1169
}
1170
GtkTreeView.view.dnd {
1172
border-style: solid none;
1173
border-width: 1px;
1174
border-color: rgba(37, 75, 138, 0.935);
1175
}
1176
GtkTreeView.view.expander {
1178
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1179
}
1180
GtkTreeView.view.expander:dir(rtl) {
1182
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1183
}
1184
GtkTreeView.view.expander:checked {
1186
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1187
}
1188
GtkTreeView.view.expander:selected {
1190
color: rgba(255, 255, 255, 0.7);
1191
}
1192
GtkTreeView.view.expander:selected:hover, GtkTreeView.view.expander:selected:active {
1194
color: white;
1195
}
1196
GtkTreeView.view.progressbar {
1198
border-width: 4px;
1199
}
1200
GtkTreeView.view.progressbar:selected {
1202
border-color: currentColor;
1203
}
1204
GtkTreeView.view.trough {
1206
border-width: 4px;
1207
border-color: rgba(66, 133, 244, 0.3);
1208
}
1209
GtkTreeView.view.trough:selected {
1211
border-color: alpha(currentColor, 0.24);
1212
}
1213
column-header .button {
1215
padding: 3px 6px 4px;
1216
border-style: none solid solid none;
1217
border-width: 1px;
1218
border-color: rgba(0, 0, 0, 0.12);
1219
border-radius: 0;
1220
box-shadow: none;
1221
background-color: #FFFFFF;
1222
}
1223
column-header .button:hover, column-header .button:active {
1225
box-shadow: none;
1226
}
1227
column-header .button:insensitive {
1229
background-color: #FFFFFF;
1230
}
1231
column-header:last-child .button, column-header:last-child.button {
1233
border-right-style: none;
1234
}
1235
column-header.button.dnd, column-header .button.dnd {
1237
border-left-style: solid;
1238
background-clip: padding-box;
1239
color: #4285F4;
1240
}
1241
/*********
1243
* Menus *
1244
*********/
1245
.menubar {
1246
-GtkWidget-window-dragging: true;
1247
padding: 0;
1248
background-color: #E0E0E0;
1249
}
1250
.menubar > .menuitem {
1252
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
1253
padding: 4px 8px;
1254
color: rgba(0, 0, 0, 0.54);
1255
}
1256
.menubar > .menuitem:hover {
1258
transition: none;
1259
background-color: rgba(0, 0, 0, 0.12);
1260
color: rgba(0, 0, 0, 0.87);
1261
}
1262
.menubar > .menuitem:insensitive {
1264
color: rgba(0, 0, 0, 0.26);
1265
box-shadow: none;
1266
}
1267
.menu {
1269
margin: 4px 0;
1270
padding: 4px 0;
1271
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
1272
background-color: #FFFFFF;
1273
border: 1px solid rgba(0, 0, 0, 0.12);
1274
}
1275
.csd .menu {
1277
border: none;
1278
border-radius: 2px;
1279
}
1280
.menu .menuitem {
1282
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
1283
padding: 3px 4px 4px;
1284
font: initial;
1285
text-shadow: none;
1286
}
1287
.menu .menuitem:hover {
1289
transition: none;
1290
background-color: rgba(0, 0, 0, 0.12);
1291
}
1292
.menu .menuitem:insensitive {
1294
color: rgba(0, 0, 0, 0.38);
1295
}
1296
.menu .menuitem.arrow {
1298
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1299
}
1300
.menu .menuitem.arrow:dir(rtl) {
1302
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1303
}
1304
.menu.button {
1306
border-style: none;
1307
border-radius: 0;
1308
box-shadow: none;
1309
}
1310
.menu.button.top {
1312
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
1313
}
1314
.menu.button.bottom {
1316
border-top: 1px solid rgba(0, 0, 0, 0.12);
1317
}
1318
.menu.button:hover {
1320
background-color: rgba(0, 0, 0, 0.12);
1321
}
1322
.menu.button:insensitive {
1324
background-color: transparent;
1325
border-color: transparent;
1326
}
1327
.menuitem .accelerator {
1329
color: rgba(0, 0, 0, 0.54);
1330
}
1331
.csd.popup {
1333
border-radius: 2px;
1334
}
1335
/***************
1337
* Popovers *
1338
***************/
1339
.popover {
1340
transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
1341
padding: 2px;
1342
border: 1px solid;
1343
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1344
border-radius: 3px;
1345
background-color: #FFFFFF;
1346
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1347
}
1348
.popover:backdrop {
1350
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1351
}
1352
.popover > .list,
1354
.popover > .view,
1355
.popover > .toolbar,
1356
.popover.osd > .toolbar {
1357
border-style: none;
1358
border-image: none;
1359
background-color: transparent;
1360
}
1361
.popover .button.flat {
1363
padding: 5px 8px 6px;
1364
background-color: transparent;
1365
background-size: 160px 160px, auto;
1366
color: rgba(0, 0, 0, 0.87);
1367
font: initial;
1368
}
1369
.popover .linked > .button {
1371
border-radius: 2px;
1372
}
1373
.popover .linked > .button:checked {
1375
background-color: #4285F4;
1376
color: white;
1377
}
1378
.popover .linked > .button.image-button {
1380
padding: 8px;
1381
background-size: 90px 90px, auto;
1382
}
1383
/*****************
1385
* Notebooks and *
1386
* Tabs *
1387
*****************/
1388
.notebook {
1389
padding: 0;
1390
background-color: #FFFFFF;
1391
-GtkNotebook-initial-gap: 8;
1392
-GtkNotebook-arrow-spacing: 5;
1393
-GtkNotebook-tab-curvature: 0;
1394
-GtkNotebook-tab-overlap: 1;
1395
-GtkNotebook-has-tab-gap: false;
1396
-GtkWidget-focus-padding: 0;
1397
-GtkWidget-focus-line-width: 0;
1398
}
1399
.notebook.frame {
1401
border: 1px solid rgba(0, 0, 0, 0.12);
1402
}
1403
.notebook.frame.top {
1405
border-top-width: 0;
1406
}
1407
.notebook.frame.bottom {
1409
border-bottom-width: 0;
1410
}
1411
.notebook.frame.right {
1413
border-right-width: 0;
1414
}
1415
.notebook.frame.left {
1417
border-left-width: 0;
1418
}
1419
.notebook.header {
1421
background-color: #F2F2F2;
1422
}
1423
.notebook.header.frame {
1425
border: 1px solid rgba(0, 0, 0, 0.12);
1426
}
1427
.notebook.header.frame.top {
1429
border-bottom-width: 0;
1430
}
1431
.notebook.header.frame.bottom {
1433
border-top-width: 0;
1434
}
1435
.notebook.header.frame.right {
1437
border-left-width: 0;
1438
}
1439
.notebook.header.frame.left {
1441
border-right-width: 0;
1442
}
1443
.notebook.header.top {
1445
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
1446
}
1447
.notebook.header.bottom {
1449
box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
1450
}
1451
.notebook.header.right {
1453
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
1454
}
1455
.notebook.header.left {
1457
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
1458
}
1459
.notebook tab {
1461
border-width: 0;
1462
border-style: solid;
1463
border-color: transparent;
1464
background-color: transparent;
1465
outline-offset: 0;
1466
/* works for testnotebookdnd, but there's a superfluous border
1467
in gedit or web, commented out for now, needs gtk fixes
1468
&.reorderable-page {
1469
&.top {
1470
padding-top: ($vt_vpadding - 1px);
1471
border-top-width: 1px;
1472
border-left-width: 1px;
1473
border-right-width: 1px;
1474
}
1475
&.bottom {
1476
padding-bottom: ($vt_vpadding - 1px);
1477
border-bottom-width: 1px;
1478
border-left-width: 1px;
1479
border-right-width: 1px;
1480
}
1481
&.left {
1482
padding-left: ($ht_hpadding - 1px);
1483
border-left-width: 1px;
1484
border-top-width: 1px;
1485
border-bottom-width: 1px;
1486
}
1487
&.right {
1488
padding-right: ($ht_hpadding - 1px);
1489
border-right-width: 1px;
1490
border-top-width: 1px;
1491
border-bottom-width: 1px;
1492
}
1493
}
1494
*/
1495
}
1496
.notebook tab.top, .notebook tab.bottom {
1498
padding: 8px 12px;
1499
}
1500
.notebook tab.left, .notebook tab.right {
1502
padding: 8px 12px;
1503
}
1504
.notebook tab.reorderable-page {
1506
-GtkNotebook-tab-overlap: 1;
1507
}
1508
.notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
1510
padding-left: 12px;
1511
padding-right: 12px;
1512
border-left-width: 1px;
1513
border-right-width: 1px;
1514
}
1515
.notebook tab.reorderable-page.left, .notebook tab.reorderable-page.right {
1517
border-bottom-width: 1px;
1518
border-top-width: 1px;
1519
}
1520
.notebook tab.top:hover, .notebook tab.top.prelight-page {
1522
box-shadow: inset 0 -2px alpha(currentColor, 0.24);
1523
}
1524
.notebook tab.top:active, .notebook tab.top.active-page {
1526
box-shadow: inset 0 -2px #4285F4;
1527
}
1528
.notebook tab.bottom:hover, .notebook tab.bottom.prelight-page {
1530
box-shadow: inset 0 2px alpha(currentColor, 0.24);
1531
}
1532
.notebook tab.bottom:active, .notebook tab.bottom.active-page {
1534
box-shadow: inset 0 2px #4285F4;
1535
}
1536
.notebook tab.left:hover, .notebook tab.left.prelight-page {
1538
box-shadow: inset -2px 0 alpha(currentColor, 0.24);
1539
}
1540
.notebook tab.left:active, .notebook tab.left.active-page {
1542
box-shadow: inset -2px 0 #4285F4;
1543
}
1544
.notebook tab.right:hover, .notebook tab.right.prelight-page {
1546
box-shadow: inset 2px 0 alpha(currentColor, 0.24);
1547
}
1548
.notebook tab.right:active, .notebook tab.right.active-page {
1550
box-shadow: inset 2px 0 #4285F4;
1551
}
1552
.notebook tab.reorderable-page.top {
1554
border-color: transparent;
1555
}
1556
.notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
1558
border-color: rgba(0, 0, 0, 0.12);
1559
border-bottom-width: 0;
1560
border-bottom-color: transparent;
1561
background-color: #FAFAFA;
1562
}
1563
.notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
1565
border-color: rgba(0, 0, 0, 0.12);
1566
border-bottom-width: 0;
1567
border-bottom-color: transparent;
1568
background-color: #FFFFFF;
1569
}
1570
.notebook tab.reorderable-page.bottom {
1572
border-color: transparent;
1573
}
1574
.notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
1576
border-color: rgba(0, 0, 0, 0.12);
1577
border-top-width: 0;
1578
border-top-color: transparent;
1579
background-color: #FAFAFA;
1580
}
1581
.notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
1583
border-color: rgba(0, 0, 0, 0.12);
1584
border-top-width: 0;
1585
border-top-color: transparent;
1586
background-color: #FFFFFF;
1587
}
1588
.notebook tab.reorderable-page.left {
1590
border-color: transparent;
1591
}
1592
.notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
1594
border-color: rgba(0, 0, 0, 0.12);
1595
border-right-width: 0;
1596
border-right-color: transparent;
1597
background-color: #FAFAFA;
1598
}
1599
.notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
1601
border-color: rgba(0, 0, 0, 0.12);
1602
border-right-width: 0;
1603
border-right-color: transparent;
1604
background-color: #FFFFFF;
1605
}
1606
.notebook tab.reorderable-page.right {
1608
border-color: transparent;
1609
}
1610
.notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
1612
border-color: rgba(0, 0, 0, 0.12);
1613
border-left-width: 0;
1614
border-left-color: transparent;
1615
background-color: #FAFAFA;
1616
}
1617
.notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
1619
border-color: rgba(0, 0, 0, 0.12);
1620
border-left-width: 0;
1621
border-left-color: transparent;
1622
background-color: #FFFFFF;
1623
}
1624
.notebook tab .label {
1626
padding: 0 2px;
1627
font-weight: 500;
1628
color: rgba(0, 0, 0, 0.54);
1629
}
1630
.notebook tab .prelight-page .label, .notebook tab .label.prelight-page {
1632
color: rgba(0, 0, 0, 0.87);
1633
}
1634
.notebook tab .active-page .label, .notebook tab .label.active-page {
1636
color: rgba(0, 0, 0, 0.87);
1637
}
1638
.notebook tab .button {
1640
padding: 0;
1641
background-size: 30px 30px, auto;
1642
}
1643
.notebook tab .button > GtkImage {
1645
padding: 4px;
1646
}
1647
.notebook.arrow:not(:hover):not(:active) {
1649
color: rgba(0, 0, 0, 0.54);
1650
}
1651
.notebook.arrow:insensitive {
1653
color: rgba(0, 0, 0, 0.26);
1654
}
1655
/**************
1657
* Scrollbars *
1658
**************/
1659
.scrollbar {
1660
-GtkRange-slider-width: 17px;
1661
-GtkRange-trough-border: 0;
1662
-GtkScrollbar-has-backward-stepper: false;
1663
-GtkScrollbar-has-forward-stepper: false;
1664
-GtkScrollbar-min-slider-length: 32px;
1665
-GtkRange-stepper-spacing: 0;
1666
-GtkRange-trough-under-steppers: 1;
1667
}
1668
.scrollbar .button {
1670
border: none;
1671
}
1672
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1674
-GtkRange-slider-width: 12px;
1675
}
1676
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
1678
margin: 3px;
1679
border: 1px solid rgba(255, 255, 255, 0.3);
1680
}
1681
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
1683
border-style: none;
1684
background-color: transparent;
1685
}
1686
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
1688
background-color: rgba(255, 255, 255, 0.9);
1689
}
1690
.scrollbar .trough {
1692
border: 1px none rgba(0, 0, 0, 0.12);
1693
background-color: #FFFFFF;
1694
background-clip: padding-box;
1695
}
1696
.scrollbar .slider {
1698
background-color: rgba(0, 0, 0, 0.38);
1699
}
1700
.scrollbar .slider:hover {
1702
background-color: rgba(0, 0, 0, 0.54);
1703
}
1704
.scrollbar .slider:active {
1706
background-color: rgba(0, 0, 0, 0.87);
1707
}
1708
.scrollbar .slider:insensitive {
1710
opacity: 0.5;
1711
}
1712
.scrollbar .slider {
1714
border-radius: 100px;
1715
margin: 4px;
1716
}
1717
.scrollbar.fine-tune .slider {
1719
margin: 6px;
1720
}
1721
.scrollbar.vertical .slider {
1723
margin-left: 5px;
1724
}
1725
.scrollbar.vertical .slider:dir(rtl) {
1727
margin-left: 4px;
1728
margin-right: 5px;
1729
}
1730
.scrollbar.vertical.fine-tune .slider {
1732
margin-left: 7px;
1733
}
1734
.scrollbar.vertical.fine-tune .slider:dir(rtl) {
1736
margin-left: 6px;
1737
margin-right: 7px;
1738
}
1739
.scrollbar.vertical .trough {
1741
border-left-style: solid;
1742
}
1743
.scrollbar.vertical .trough:dir(rtl) {
1745
border-left-style: none;
1746
border-right-style: solid;
1747
}
1748
.scrollbar.horizontal .slider {
1750
margin-top: 5px;
1751
}
1752
.scrollbar.horizontal.fine-tune .slider {
1754
margin-top: 7px;
1755
}
1756
.scrollbar.horizontal .trough {
1758
border-top-style: solid;
1759
}
1760
.scrollbars-junction,
1762
.scrollbars-junction.frame {
1763
border-style: solid none none solid;
1764
background-color: #FFFFFF;
1765
}
1766
.scrollbars-junction:dir(rtl),
1768
.scrollbars-junction.frame:dir(rtl) {
1769
border-style: solid solid none none;
1770
}
1771
/**********
1773
* Switch *
1774
**********/
1775
GtkSwitch {
1776
-GtkSwitch-slider-width: 20px;
1777
-GtkSwitch-slider-height: 20px;
1778
outline-offset: -4px;
1779
outline-radius: 100px;
1780
font-size: 0;
1781
}
1782
GtkSwitch.trough {
1784
border: 8px solid transparent;
1785
border-radius: 100px;
1786
background-color: rgba(0, 0, 0, 0.26);
1787
}
1788
GtkSwitch.trough:insensitive {
1790
color: rgba(0, 0, 0, 0.12);
1791
}
1792
GtkSwitch.trough:active {
1794
background-color: rgba(1, 162, 153, 0.5);
1795
}
1796
GtkSwitch.trough:active:insensitive {
1798
background-color: rgba(1, 162, 153, 0.3);
1799
}
1800
GtkSwitch.slider {
1802
padding: 5px 4px;
1803
border-radius: 100px;
1804
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
1805
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1806
background-color: #FFFFFF;
1807
color: rgba(0, 0, 0, 0.87);
1808
}
1809
GtkSwitch.slider:hover {
1811
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1812
}
1813
GtkSwitch.slider:active {
1815
background-color: #01A299;
1816
}
1817
GtkSwitch.slider:insensitive {
1819
color: rgba(0, 0, 0, 0.38);
1820
background-color: #FAFAFA;
1821
}
1822
/*************************
1824
* Check and Radio items *
1825
*************************/
1826
.check {
1827
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1828
}
1829
.check:hover {
1831
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1832
}
1833
.check:active {
1835
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1836
}
1837
.check:insensitive {
1839
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1840
}
1841
.check:inconsistent {
1843
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1844
}
1845
.check:inconsistent:hover {
1847
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1848
}
1849
.check:inconsistent:active {
1851
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1852
}
1853
.check:inconsistent:insensitive {
1855
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1856
}
1857
.check:checked {
1859
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1860
}
1861
.check:checked:hover {
1863
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1864
}
1865
.check:checked:active {
1867
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1868
}
1869
.check:checked:insensitive {
1871
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1872
}
1873
.menu .menuitem.check {
1875
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1876
}
1877
.menu .menuitem.check:insensitive {
1879
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1880
}
1881
.menu .menuitem.check:inconsistent {
1883
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1884
}
1885
.menu .menuitem.check:inconsistent:insensitive {
1887
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1888
}
1889
.menu .menuitem.check:checked {
1891
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1892
}
1893
.menu .menuitem.check:checked:insensitive {
1895
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1896
}
1897
.radio {
1899
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1900
}
1901
.radio:hover {
1903
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1904
}
1905
.radio:active {
1907
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1908
}
1909
.radio:insensitive {
1911
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1912
}
1913
.radio:inconsistent {
1915
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1916
}
1917
.radio:inconsistent:hover {
1919
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1920
}
1921
.radio:inconsistent:active {
1923
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1924
}
1925
.radio:inconsistent:insensitive {
1927
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1928
}
1929
.radio:checked {
1931
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1932
}
1933
.radio:checked:hover {
1935
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1936
}
1937
.radio:checked:active {
1939
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1940
}
1941
.radio:checked:insensitive {
1943
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1944
}
1945
.menu .menuitem.radio {
1947
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1948
}
1949
.menu .menuitem.radio:insensitive {
1951
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1952
}
1953
.menu .menuitem.radio:inconsistent {
1955
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1956
}
1957
.menu .menuitem.radio:inconsistent:insensitive {
1959
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1960
}
1961
.menu .menuitem.radio:checked {
1963
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1964
}
1965
.menu .menuitem.radio:checked:insensitive {
1967
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1968
}
1969
.view.content-view.check:not(.list) {
1971
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1972
background-color: transparent;
1973
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1974
}
1975
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1977
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1978
}
1979
.view.content-view.check:checked:not(.list) {
1981
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
1982
background-color: transparent;
1983
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1984
}
1985
.view.content-view.check:checked:not(.list):hover, .view.content-view.check:checked:not(.list):active {
1987
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1988
}
1989
GtkCheckButton.text-button, GtkRadioButton.text-button {
1991
padding: 2px 4px;
1992
outline-offset: 0;
1993
}
1994
/************
1996
* GtkScale *
1997
************/
1998
.scale,
1999
.scale.scale-has-marks-above.scale-has-marks-below,
2000
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
2001
-GtkScale-slider-length: 20;
2002
-GtkRange-slider-width: 20;
2003
-GtkRange-trough-border: 2;
2004
outline-offset: -8px;
2005
outline-radius: 100px;
2006
}
2007
.scale.fine-tune.slider,
2009
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
2010
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
2011
background-size: 60%;
2012
}
2013
.scale.slider.slider,
2015
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
2016
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
2017
border-style: none;
2018
border-radius: 0;
2019
background-color: transparent;
2020
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
2021
background-repeat: no-repeat;
2022
background-position: center;
2023
background-size: 70%;
2024
box-shadow: none;
2025
}
2026
.scale.slider.slider:insensitive,
2028
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
2029
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
2030
border-style: none;
2031
border-radius: 0;
2032
background-color: transparent;
2033
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
2034
background-repeat: no-repeat;
2035
background-position: center;
2036
background-size: 70%;
2037
box-shadow: none;
2038
}
2039
.scale.slider:hover,
2041
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
2042
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
2043
background-size: 80%;
2044
}
2045
.scale.slider:active,
2047
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
2048
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
2049
background-size: 90%;
2050
}
2051
.scale.trough,
2053
.scale.scale-has-marks-above.scale-has-marks-below.trough,
2054
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
2055
margin: 11px 12px;
2056
background-color: alpha(currentColor, 0.24);
2057
}
2058
.scale.trough.highlight,
2060
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
2061
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
2062
background-color: #01A299;
2063
}
2064
.scale.trough.highlight:insensitive,
2066
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
2067
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
2068
background-color: alpha(currentColor, 0.24);
2069
}
2070
.scale.trough:insensitive,
2072
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
2073
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
2074
color: rgba(0, 0, 0, 0.38);
2075
}
2076
.scale.trough.vertical,
2078
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
2079
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
2080
margin: 12px 11px;
2081
}
2082
.scale.separator,
2084
.scale.scale-has-marks-above.scale-has-marks-below.separator,
2085
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
2086
color: alpha(currentColor, 0.24);
2087
}
2088
.scale.scale-has-marks-below {
2090
-GtkScale-slider-length: 20;
2091
-GtkRange-slider-width: 25;
2092
-GtkRange-trough-border: 2;
2093
}
2094
.scale.scale-has-marks-below.slider {
2096
border-style: none;
2097
border-radius: 0;
2098
background-color: transparent;
2099
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
2100
background-repeat: no-repeat;
2101
background-position: center;
2102
box-shadow: none;
2103
}
2104
.scale.scale-has-marks-below.slider:insensitive {
2106
border-style: none;
2107
border-radius: 0;
2108
background-color: transparent;
2109
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
2110
background-repeat: no-repeat;
2111
background-position: center;
2112
box-shadow: none;
2113
}
2114
.scale.scale-has-marks-above {
2116
-GtkScale-slider-length: 20;
2117
-GtkRange-slider-width: 25;
2118
-GtkRange-trough-border: 2;
2119
}
2120
.scale.scale-has-marks-above.slider {
2122
border-style: none;
2123
border-radius: 0;
2124
background-color: transparent;
2125
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2126
background-repeat: no-repeat;
2127
background-position: center;
2128
box-shadow: none;
2129
}
2130
.scale.scale-has-marks-above.slider:insensitive {
2132
border-style: none;
2133
border-radius: 0;
2134
background-color: transparent;
2135
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2136
background-repeat: no-repeat;
2137
background-position: center;
2138
box-shadow: none;
2139
}
2140
.scale.vertical.scale-has-marks-below {
2142
-GtkScale-slider-length: 20;
2143
-GtkRange-slider-width: 25;
2144
-GtkRange-trough-border: 2;
2145
}
2146
.scale.vertical.scale-has-marks-below.slider {
2148
border-style: none;
2149
border-radius: 0;
2150
background-color: transparent;
2151
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2152
background-repeat: no-repeat;
2153
background-position: center;
2154
box-shadow: none;
2155
}
2156
.scale.vertical.scale-has-marks-below.slider:insensitive {
2158
border-style: none;
2159
border-radius: 0;
2160
background-color: transparent;
2161
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2162
background-repeat: no-repeat;
2163
background-position: center;
2164
box-shadow: none;
2165
}
2166
.scale.vertical.scale-has-marks-above {
2168
-GtkScale-slider-length: 20;
2169
-GtkRange-slider-width: 25;
2170
-GtkRange-trough-border: 2;
2171
}
2172
.scale.vertical.scale-has-marks-above.slider {
2174
border-style: none;
2175
border-radius: 0;
2176
background-color: transparent;
2177
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2178
background-repeat: no-repeat;
2179
background-position: center;
2180
box-shadow: none;
2181
}
2182
.scale.vertical.scale-has-marks-above.slider:insensitive {
2184
border-style: none;
2185
border-radius: 0;
2186
background-color: transparent;
2187
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2188
background-repeat: no-repeat;
2189
background-position: center;
2190
box-shadow: none;
2191
}
2192
.scale.scale-has-marks-above .trough {
2194
margin: 16px 12px 11px;
2195
}
2196
.scale.scale-has-marks-below .trough {
2198
margin: 11px 12px 16px;
2199
}
2200
.scale.vertical.scale-has-marks-above .trough {
2202
margin: 12px 11px 12px 16px;
2203
}
2204
.scale.vertical.scale-has-marks-below .trough {
2206
margin: 12px 16px 12px 11px;
2207
}
2208
/*****************
2210
* Progress bars *
2211
*****************/
2212
GtkProgressBar {
2213
-GtkProgressBar-min-horizontal-bar-height: 4;
2214
-GtkProgressBar-min-vertical-bar-width: 4;
2215
padding: 0;
2216
font-size: smaller;
2217
color: rgba(0, 0, 0, 0.38);
2218
}
2219
GtkProgressBar.osd {
2221
-GtkProgressBar-xspacing: 0;
2222
-GtkProgressBar-yspacing: 0;
2223
-GtkProgressBar-min-horizontal-bar-height: 4;
2224
}
2225
GtkProgressBar.trough {
2227
border-radius: 0;
2228
background-color: rgba(66, 133, 244, 0.3);
2229
}
2230
GtkProgressBar.trough.osd {
2232
border-style: none;
2233
box-shadow: none;
2234
}
2235
.progressbar {
2237
border-radius: 0;
2238
background-color: #4285F4;
2239
}
2240
.progressbar.left {
2242
border-top-left-radius: 0;
2243
border-bottom-left-radius: 0;
2244
}
2245
.progressbar.right {
2247
border-top-right-radius: 0;
2248
border-bottom-right-radius: 0;
2249
}
2250
.progressbar.left.right {
2252
box-shadow: none;
2253
}
2254
.progressbar.vertical.bottom {
2256
border-bottom-left-radius: 0;
2257
border-bottom-right-radius: 0;
2258
box-shadow: none;
2259
}
2260
.progressbar.vertical.top {
2262
border-top-left-radius: 0;
2263
border-top-right-radius: 0;
2264
}
2265
.progressbar.osd {
2267
background-image: none;
2268
background-color: #4285F4;
2269
border-style: none;
2270
border-radius: 0;
2271
}
2272
/*************
2274
* Level Bar *
2275
*************/
2276
.level-bar {
2277
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2278
color: rgba(0, 0, 0, 0.38);
2279
-GtkLevelBar-min-block-width: 36;
2280
-GtkLevelBar-min-block-height: 4;
2281
}
2282
.level-bar.vertical {
2284
-GtkLevelBar-min-block-width: 4;
2285
-GtkLevelBar-min-block-height: 36;
2286
}
2287
.level-bar.trough {
2289
padding: 2px;
2290
border-radius: 2px;
2291
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
2292
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2293
background-color: #FFFFFF;
2294
color: rgba(0, 0, 0, 0.87);
2295
}
2296
.level-bar.trough:insensitive {
2298
color: rgba(0, 0, 0, 0.38);
2299
background-color: #FAFAFA;
2300
}
2301
.level-bar.trough.indicator-discrete.horizontal {
2303
padding: 2px 1px;
2304
}
2305
.level-bar.trough.indicator-discrete.vertical {
2307
padding: 1px 2px;
2308
}
2309
.level-bar.fill-block {
2311
background-color: #4285F4;
2312
border-radius: 0;
2313
box-shadow: none;
2314
}
2315
.level-bar.fill-block.indicator-discrete.horizontal {
2317
margin: 0 1px;
2318
}
2319
.level-bar.fill-block.indicator-discrete.vertical {
2321
margin: 1px 0;
2322
}
2323
.level-bar.fill-block.level-high {
2325
background-color: #34A853;
2326
}
2327
.level-bar.fill-block.level-low {
2329
background-color: #FBBC05;
2330
}
2331
.level-bar.fill-block.empty-fill-block {
2333
background-color: alpha(currentColor, 0.24);
2334
}
2335
/**********
2337
* Frames *
2338
**********/
2339
.frame {
2340
border: 1px solid rgba(0, 0, 0, 0.12);
2341
padding: 0;
2342
}
2343
.frame.flat {
2345
border-style: none;
2346
}
2347
.frame.action-bar {
2349
padding: 6px;
2350
border-width: 1px 0 0;
2351
}
2352
GtkScrolledWindow GtkViewport.frame {
2354
border-style: none;
2355
}
2356
.separator {
2358
color: rgba(0, 0, 0, 0.12);
2359
}
2360
GtkFileChooserButton .separator.vertical,
2362
GtkFontButton .separator.vertical {
2363
-GtkWidget-wide-separators: true;
2364
}
2365
/*********
2367
* Lists *
2368
*********/
2369
.list {
2370
border-color: rgba(0, 0, 0, 0.12);
2371
background-color: #FFFFFF;
2372
}
2373
.list-row,
2375
.grid-child {
2376
padding: 2px;
2377
}
2378
.list-row.activatable, .view, column-header .button {
2380
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2381
box-shadow: inset 0 0 0 10000px transparent;
2382
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
2383
background-repeat: no-repeat;
2384
background-position: center, center;
2385
background-size: 240px 240px, auto;
2386
}
2387
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2389
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2390
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.06);
2391
}
2392
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2394
transition: all 250ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2395
animation: list_ripple_effect 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
2396
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.12);
2397
}
2398
.list-row:selected .button:insensitive {
2400
color: rgba(255, 255, 255, 0.3);
2401
}
2402
.list-row:selected .button.flat {
2404
color: rgba(255, 255, 255, 0.7);
2405
}
2406
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2408
color: white;
2409
}
2410
.list-row:selected .button.flat:insensitive {
2412
color: rgba(255, 255, 255, 0.3);
2413
}
2414
/*********************
2416
* App Notifications *
2417
*********************/
2418
/*************
2419
* Expanders *
2420
*************/
2421
.expander {
2422
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2423
}
2424
.expander:dir(rtl) {
2426
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2427
}
2428
.expander:checked {
2430
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2431
}
2432
.expander:not(:hover):not(:active) {
2434
color: alpha(currentColor, 0.7);
2435
}
2436
.expander:selected {
2438
color: white;
2439
}
2440
/************
2442
* Calendar *
2443
***********/
2444
GtkCalendar {
2445
padding: 1px;
2446
border: 1px solid rgba(0, 0, 0, 0.12);
2447
color: rgba(0, 0, 0, 0.87);
2448
}
2449
GtkCalendar:insensitive {
2451
color: rgba(0, 0, 0, 0.38);
2452
}
2453
GtkCalendar:selected {
2455
border-radius: 3px;
2456
}
2457
GtkCalendar.header {
2459
border-style: none none solid;
2460
border-radius: 0;
2461
}
2462
GtkCalendar:inconsistent {
2464
color: rgba(0, 0, 0, 0.26);
2465
}
2466
GtkCalendar.highlight {
2468
font-size: smaller;
2469
color: rgba(0, 0, 0, 0.54);
2470
}
2471
/***********
2473
* Dialogs *
2474
***********/
2475
.message-dialog .dialog-action-area .button {
2476
padding: 8px;
2477
}
2478
.message-dialog.background {
2480
background-color: #FFFFFF;
2481
}
2482
.message-dialog .titlebar {
2484
border-style: none;
2485
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2486
background-color: #FFFFFF;
2487
}
2488
.message-dialog.csd.background {
2490
border-bottom-left-radius: 2px;
2491
border-bottom-right-radius: 2px;
2492
}
2493
.message-dialog.csd .dialog-action-area .button {
2495
padding: 9px 16px 10px;
2496
border-top: 1px solid rgba(0, 0, 0, 0.12);
2497
border-radius: 0;
2498
background-size: 240px 240px, auto;
2499
}
2500
.message-dialog.csd .dialog-action-area .button:first-child {
2502
border-radius: 0 0 0 2px;
2503
}
2504
.message-dialog.csd .dialog-action-area .button:last-child {
2506
border-radius: 0 0 2px 0;
2507
}
2508
GtkFileChooserDialog .dialog-action-box {
2510
border-top: 1px solid rgba(0, 0, 0, 0.12);
2511
}
2512
/***********
2514
* Sidebar *
2515
***********/
2516
.sidebar {
2517
border: none;
2518
background-color: #FAFAFA;
2519
}
2520
GtkSidebarRow.list-row {
2522
padding: 0px;
2523
}
2524
GtkSidebarRow .sidebar-revealer {
2526
padding: 4px 14px 4px 12px;
2527
}
2528
GtkSidebarRow .sidebar-icon {
2530
opacity: 0.7;
2531
}
2532
GtkSidebarRow .sidebar-icon:dir(ltr) {
2534
padding-right: 8px;
2535
}
2536
GtkSidebarRow .sidebar-icon:dir(rtl) {
2538
padding-left: 8px;
2539
}
2540
GtkSidebarRow .sidebar-label:dir(ltr) {
2542
padding-right: 2px;
2543
}
2544
GtkSidebarRow .sidebar-label:dir(rtl) {
2546
padding-left: 2px;
2547
}
2548
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2550
border: solid 1px #4285F4;
2551
}
2552
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2554
color: #01A299;
2555
}
2556
.sidebar-button.button.image-button {
2558
padding: 4px;
2559
}
2560
.sidebar-item {
2562
padding: 10px 4px;
2563
}
2564
.sidebar-item > .label {
2566
padding-left: 6px;
2567
padding-right: 6px;
2568
}
2569
/****************
2571
* File chooser *
2572
****************/
2573
GtkPlacesView .server-list-button > GtkImage {
2574
-gtk-icon-transform: rotate(0turn);
2575
}
2576
GtkPlacesView .server-list-button:checked > GtkImage {
2578
-gtk-icon-transform: rotate(-0.5turn);
2579
}
2580
/*********
2582
* Paned *
2583
*********/
2584
GtkPaned {
2585
-GtkPaned-handle-size: 1;
2586
-gtk-icon-source: none;
2587
margin: 0 8px 8px 0;
2588
}
2589
GtkPaned:dir(rtl) {
2591
margin-right: 0;
2592
margin-left: 8px;
2593
}
2594
GtkPaned .pane-separator {
2596
background-color: rgba(0, 0, 0, 0.12);
2597
}
2598
GtkPaned.wide {
2600
-GtkPaned-handle-size: 6;
2601
margin: 0;
2602
}
2603
GtkPaned.wide .pane-separator {
2605
background-color: transparent;
2606
border-style: none solid;
2607
border-color: rgba(0, 0, 0, 0.12);
2608
border-width: 1px;
2609
}
2610
GtkPaned.wide.vertical .pane-separator {
2612
border-style: solid none;
2613
}
2614
/**************
2616
* GtkInfoBar *
2617
**************/
2618
GtkInfoBar {
2619
border-style: none;
2620
}
2621
.info {
2623
background-color: #34A853;
2624
}
2625
.question {
2627
background-color: #4285F4;
2628
}
2629
.warning {
2631
background-color: #FBBC05;
2632
}
2633
.error {
2635
background-color: #EA4335;
2636
}
2637
.info,
2639
.question,
2640
.warning,
2641
.error {
2642
color: white;
2643
}
2644
.info .button:insensitive,
2646
.question .button:insensitive,
2647
.warning .button:insensitive,
2648
.error .button:insensitive {
2649
color: rgba(255, 255, 255, 0.3);
2650
}
2651
/************
2653
* Tooltips *
2654
************/
2655
.tooltip {
2656
color: white;
2657
padding: 4px;
2658
/* not working */
2659
border-radius: 2px;
2660
box-shadow: none;
2661
}
2662
.tooltip.background {
2664
background-color: rgba(97, 97, 97, 0.9);
2665
}
2666
.tooltip.window-frame.csd {
2668
background-color: transparent;
2669
}
2670
.tooltip * {
2672
padding: 4px;
2673
background-color: transparent;
2674
color: inherit;
2675
}
2676
/*****************
2678
* Color Chooser *
2679
*****************/
2680
GtkColorSwatch {
2681
transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
2682
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2683
}
2684
GtkColorSwatch:insensitive {
2686
opacity: 0.5;
2687
box-shadow: none;
2688
}
2689
GtkColorSwatch.top {
2691
border-top-left-radius: 2px;
2692
border-top-right-radius: 2px;
2693
}
2694
GtkColorSwatch.bottom {
2696
border-bottom-left-radius: 2px;
2697
border-bottom-right-radius: 2px;
2698
}
2699
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2701
border-top-left-radius: 2px;
2702
border-bottom-left-radius: 2px;
2703
}
2704
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2706
border-top-right-radius: 2px;
2707
border-bottom-right-radius: 2px;
2708
}
2709
GtkColorSwatch:only-child:not(.overlay) {
2711
border-radius: 2px;
2712
}
2713
GtkColorSwatch.top > .overlay {
2715
border-top-left-radius: 2px;
2716
border-top-right-radius: 2px;
2717
}
2718
GtkColorSwatch.bottom > .overlay {
2720
border-bottom-left-radius: 2px;
2721
border-bottom-right-radius: 2px;
2722
}
2723
GtkColorSwatch:first-child:not(.top) > .overlay {
2725
border-top-left-radius: 2px;
2726
border-bottom-left-radius: 2px;
2727
}
2728
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2730
border-top-right-radius: 2px;
2731
border-bottom-right-radius: 2px;
2732
}
2733
GtkColorSwatch:only-child > .overlay {
2735
border-radius: 2px;
2736
}
2737
GtkColorSwatch:hover {
2739
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2740
}
2741
GtkColorEditor GtkColorSwatch {
2743
border-radius: 2px;
2744
}
2745
GtkColorEditor GtkColorSwatch:hover {
2747
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2748
}
2749
GtkColorSwatch.color-dark {
2751
color: white;
2752
}
2753
GtkColorSwatch.color-light {
2755
color: rgba(0, 0, 0, 0.87);
2756
}
2757
GtkColorSwatch#add-color-button {
2759
background-image: linear-gradient(to right, #EA4335 25%, #FBBC05 25%, #FBBC05 50%, #34A853 50%, #34A853 75%, #4285F4 75%);
2760
color: white;
2761
}
2762
/********
2764
* Misc *
2765
********/
2766
.content-view {
2767
background-color: #F2F2F2;
2768
}
2769
.scale-popup .button {
2771
padding: 10px;
2772
}
2773
/**********************
2775
* Window Decorations *
2776
*********************/
2777
.window-frame {
2778
transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
2779
border-radius: 2px 2px 0 0;
2780
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2781
/* this is used for the resize cursor area */
2782
margin: 8px;
2783
}
2784
.window-frame:backdrop {
2786
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2787
}
2788
.window-frame.tiled {
2790
border-radius: 0;
2791
}
2792
.window-frame.popup {
2794
box-shadow: none;
2795
}
2796
.window-frame.ssd {
2798
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2799
}
2800
.window-frame.csd.popup {
2802
border-radius: 2px;
2803
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2804
}
2805
.window-frame.csd.tooltip {
2807
border-radius: 2px;
2808
box-shadow: none;
2809
}
2810
.window-frame.csd.message-dialog {
2812
border-radius: 2px;
2813
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2814
}
2815
.window-frame.csd.message-dialog:backdrop {
2817
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2818
}
2819
.window-frame.solid-csd {
2821
border-radius: 0;
2822
margin: 0;
2823
background-color: #E0E0E0;
2824
box-shadow: none;
2825
}
2826
.header-bar .button.titlebutton:active,
2828
.titlebar .button.titlebutton:active {
2829
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.12)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.12));
2830
}
2831
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2833
background-color: #4285F4;
2834
color: white;
2835
}
2836
.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 {
2838
color: rgba(255, 255, 255, 0.5);
2839
}
2840
.monospace {
2842
font: Monospace;
2843
}
2844
/**********************
2846
* Touch Copy & Paste *
2847
*********************/
2848
.entry.cursor-handle,
2849
.cursor-handle {
2850
background-color: #01A299;
2851
background-image: none;
2852
box-shadow: none;
2853
border-style: none;
2854
}
2855
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2857
.cursor-handle.insertion-cursor:dir(ltr),
2858
.cursor-handle.insertion-cursor:dir(rtl) {
2859
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2860
}
2861
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2863
.cursor-handle.insertion-cursor:dir(ltr),
2864
.cursor-handle.insertion-cursor:dir(rtl) {
2865
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2866
}
2867
/* Decouple the font of context menus from their entry/textview */
2869
.context-menu {
2870
font: initial;
2871
}
2872
.touch-selection {
2874
font: initial;
2875
color: rgba(0, 0, 0, 0.87);
2876
background-color: #FFFFFF;
2877
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2878
}
2879
.touch-selection:backdrop {
2881
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2882
}
2883
.overshoot.top {
2885
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2886
background-repeat: no-repeat;
2887
background-position: center top;
2888
background-color: transparent;
2889
border: none;
2890
box-shadow: none;
2891
}
2892
.overshoot.bottom {
2894
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2895
background-repeat: no-repeat;
2896
background-position: center bottom;
2897
background-color: transparent;
2898
border: none;
2899
box-shadow: none;
2900
}
2901
.overshoot.left {
2903
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2904
background-repeat: no-repeat;
2905
background-position: left center;
2906
background-color: transparent;
2907
border: none;
2908
box-shadow: none;
2909
}
2910
.overshoot.right {
2912
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2913
background-repeat: no-repeat;
2914
background-position: right center;
2915
background-color: transparent;
2916
border: none;
2917
box-shadow: none;
2918
}
2919
.undershoot.top {
2921
background-color: transparent;
2922
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2923
padding-top: 1px;
2924
background-size: 12px 1px;
2925
background-repeat: repeat-x;
2926
background-origin: content-box;
2927
background-position: left top;
2928
}
2929
.undershoot.bottom {
2931
background-color: transparent;
2932
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2933
padding-bottom: 1px;
2934
background-size: 12px 1px;
2935
background-repeat: repeat-x;
2936
background-origin: content-box;
2937
background-position: left bottom;
2938
}
2939
.undershoot.left {
2941
background-color: transparent;
2942
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2943
padding-left: 1px;
2944
background-size: 1px 12px;
2945
background-repeat: repeat-y;
2946
background-origin: content-box;
2947
background-position: left top;
2948
}
2949
.undershoot.right {
2951
background-color: transparent;
2952
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2953
padding-right: 1px;
2954
background-size: 1px 12px;
2955
background-repeat: repeat-y;
2956
background-origin: content-box;
2957
background-position: right top;
2958
}
2959
.floating-bar {
2961
padding: 3px 0 4px;
2962
border-width: 1px;
2963
border-style: solid solid none;
2964
border-color: rgba(0, 0, 0, 0.12);
2965
border-radius: 3px 3px 0 0;
2966
background-color: rgba(255, 255, 255, 0.9);
2967
background-clip: padding-box;
2968
}
2969
.floating-bar.left {
2971
border-left-style: none;
2972
border-top-left-radius: 0;
2973
}
2974
.floating-bar.right {
2976
border-right-style: none;
2977
border-top-right-radius: 0;
2978
}
2979
.floating-bar .button {
2981
padding: 4px;
2982
}
2983
/************
2985
* Nautilus *
2986
************/
2987
EelEditableLabel.entry {
2988
transition: none;
2989
}
2990
.nautilus-canvas-item.dim-label, .nautilus-canvas-item.label.separator, .titlebar .nautilus-canvas-item.subtitle,
2992
.header-bar .nautilus-canvas-item.subtitle,
2993
.nautilus-list-dim-label {
2994
color: rgba(0, 0, 0, 0.54);
2995
}
2996
.nautilus-canvas-item.dim-label:selected, .nautilus-canvas-item.label.separator:selected, .titlebar .nautilus-canvas-item.subtitle:selected,
2998
.header-bar .nautilus-canvas-item.subtitle:selected,
2999
.nautilus-list-dim-label:selected {
3000
color: rgba(255, 255, 255, 0.7);
3001
}
3002
.nautilus-desktop.nautilus-canvas-item {
3004
color: white;
3005
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3006
}
3007
.nautilus-desktop.nautilus-canvas-item:selected {
3009
text-shadow: none;
3010
}
3011
/* Toolbar */
3013
@keyframes needs_attention_keyframes {
3014
0% {
3015
background-color: transparent;
3016
}
3017
50% {
3018
background-color: alpha(currentColor, 0.24);
3019
}
3020
100% {
3021
background-color: transparent;
3022
}
3023
}
3024
.nautilus-operations-button-needs-attention {
3026
color: #01A299;
3027
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3028
}
3029
.nautilus-operations-button-needs-attention-multiple {
3031
color: #01A299;
3032
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3033
animation-iteration-count: 2;
3034
}
3035
.disk-space-display.unknown {
3037
background-color: #FBBC05;
3038
}
3039
.disk-space-display.used {
3041
background-color: #4285F4;
3042
}
3043
.disk-space-display.free {
3045
background-color: alpha(currentColor, 0.24);
3046
color: rgba(0, 0, 0, 0.38);
3047
}
3048
/* View */
3050
/********
3051
* Nemo *
3052
*******/
3053
NemoWindow .nemo-inactive-pane .view, NemoWindow .nemo-inactive-pane iconview {
3054
background-color: #FAFAFA;
3055
color: rgba(0, 0, 0, 0.87);
3056
}
3057
NemoWindow .sidebar .cell {
3059
background-color: #F2F2F2;
3060
color: rgba(0, 0, 0, 0.87);
3061
}
3062
NemoWindow .sidebar .cell:selected {
3064
color: white;
3065
background-color: #4285F4;
3066
}
3067
.nemo-desktop.nemo-canvas-item {
3069
color: white;
3070
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3071
}
3072
.nemo-desktop.nemo-canvas-item:selected {
3074
text-shadow: none;
3075
}
3076
/**************
3078
* Tweak Tool *
3079
**************/
3080
.tweak-categories {
3081
background-color: #FAFAFA;
3082
background-image: linear-gradient(to bottom, #FAFAFA);
3083
}
3084
.tweak-categories .separator {
3086
-GtkWidget-wide-separators: true;
3087
color: transparent;
3088
}
3089
/************
3091
* Software *
3092
************/
3093
.button.install-progress:insensitive {
3094
background-color: alpha(currentColor, 0.24);
3095
}
3096
/***********
3098
* Builder *
3099
***********/
3100
GbTerminalView {
3101
background-color: #FFFFFF;
3102
}
3103
/***********
3105
* Firefox *
3106
***********/
3107
.menubar {
3108
color: rgba(0, 0, 0, 0.54);
3109
}
3110
.menubar:hover {
3112
color: rgba(0, 0, 0, 0.87);
3113
}
3114
/***********
3116
* Synapse *
3117
***********/
3118
SynapseGuiMatchListView GtkWidget:selected {
3119
background-color: #4285F4;
3120
}
3121
/*********
3123
* Unity *
3124
*********/
3125
UnityDecoration {
3126
-UnityDecoration-extents: 28px 0 0 0;
3127
-UnityDecoration-input-extents: 8px;
3128
-UnityDecoration-shadow-offset-x: 0;
3129
-UnityDecoration-shadow-offset-y: 3px;
3130
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
3131
-UnityDecoration-active-shadow-radius: 18px;
3132
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
3133
-UnityDecoration-inactive-shadow-radius: 6px;
3134
-UnityDecoration-glow-size: 8px;
3135
-UnityDecoration-glow-color: #4285F4;
3136
-UnityDecoration-title-indent: 4px;
3137
-UnityDecoration-title-fade: 32px;
3138
-UnityDecoration-title-alignment: 0.0;
3139
}
3140
UnityDecoration.top {
3142
padding: 0 2px;
3143
border-style: none;
3144
border-radius: 2px 2px 0 0;
3145
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
3146
background-color: #E0E0E0;
3147
color: rgba(0, 0, 0, 0.87);
3148
}
3149
UnityDecoration.top:backdrop {
3151
color: rgba(0, 0, 0, 0.54);
3152
}
3153
UnityDecoration.menuitem,
3155
UnityDecoration .menuitem {
3156
color: rgba(0, 0, 0, 0.54);
3157
}
3158
UnityDecoration.menubar.menuitem:hover,
3160
UnityDecoration.menubar .menuitem *:hover {
3161
box-shadow: inset 0 -2px #4285F4;
3162
background-color: transparent;
3163
color: rgba(0, 0, 0, 0.87);
3164
}
3165
.background:not(.csd) :not(.titlebar) .header-bar {
3167
border-radius: 0;
3168
box-shadow: none;
3169
}
3170
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
3172
border-style: none;
3173
}
3174
UnityPanelWidget,
3176
.unity-panel {
3177
background-color: #CBCBCB;
3178
background-image: linear-gradient(to bottom, #CBCBCB);
3179
color: rgba(0, 0, 0, 0.87);
3180
}
3181
UnityPanelWidget:backdrop,
3183
.unity-panel:backdrop {
3184
color: rgba(0, 0, 0, 0.54);
3185
}
3186
.unity-panel.menuitem,
3188
.unity-panel .menuitem {
3189
color: rgba(0, 0, 0, 0.54);
3190
}
3191
.unity-panel.menubar.menuitem:hover,
3193
.unity-panel.menubar .menuitem *:hover {
3194
box-shadow: inset 0 -2px #4285F4;
3195
background-color: transparent;
3196
color: rgba(0, 0, 0, 0.87);
3197
}
3198
@keyframes playbackmenuitem_spinner {
3200
to {
3201
-gtk-icon-transform: rotate(1turn);
3202
}
3203
}
3204
.menu IdoPlaybackMenuItem.menuitem:active {
3206
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
3207
animation: playbackmenuitem_spinner 1s infinite linear;
3208
color: #4285F4;
3209
}
3210
/* GTK NAMED COLORS
3212
----------------
3213
use responsibly! */
3214
/*
3215
widget text/foreground color */
3216
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
3217
/*
3218
text color for entries, views and content in general */
3219
@define-color theme_text_color rgba(0, 0, 0, 0.87);
3220
/*
3221
widget base background color */
3222
@define-color theme_bg_color #F2F2F2;
3223
/*
3224
text widgets and the like base background color */
3225
@define-color theme_base_color #FFFFFF;
3226
/*
3227
base background color of selections */
3228
@define-color theme_selected_bg_color #4285F4;
3229
/*
3230
text/foreground color of selections */
3231
@define-color theme_selected_fg_color white;
3232
/*
3233
base background color of insensitive widgets */
3234
@define-color insensitive_bg_color #F2F2F2;
3235
/*
3236
text foreground color of insensitive widgets */
3237
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3238
/*
3239
insensitive text widgets and the like base background color */
3240
@define-color insensitive_base_color #FAFAFA;
3241
/*
3242
widget text/foreground color on backdrop windows */
3243
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3244
/*
3245
text color for entries, views and content in general on backdrop windows */
3246
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3247
/*
3248
widget base background color on backdrop windows */
3249
@define-color theme_unfocused_bg_color #F2F2F2;
3250
/*
3251
text widgets and the like base background color on backdrop windows */
3252
@define-color theme_unfocused_base_color #FFFFFF;
3253
/*
3254
base background color of selections on backdrop windows */
3255
@define-color theme_unfocused_selected_bg_color #4285F4;
3256
/*
3257
text/foreground color of selections on backdrop windows */
3258
@define-color theme_unfocused_selected_fg_color white;
3259
/*
3260
insensitive color on backdrop windows */
3261
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3262
/*
3263
widgets main borders color */
3264
@define-color borders rgba(0, 0, 0, 0.12);
3265
/*
3266
widgets main borders color on backdrop windows */
3267
@define-color unfocused_borders rgba(0, 0, 0, 0.12);
3268
/*
3269
these are pretty self explicative */
3270
@define-color warning_color #FBBC05;
3271
@define-color error_color #EA4335;
3272
@define-color success_color #34A853;
3273
/*
3274
FIXME this is really an API */
3275
@define-color content_view_bg #FFFFFF;
3276
@define-color placeholder_text_color #757575;
3277