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.08)), 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.08)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.08));
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.08)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.08));
13
}
14
to {
15
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.08)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.08));
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.08)), 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.08)), 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: 4px;
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: 4px;
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: 4px;
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: 4px;
195
transition: all 100ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
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 100ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
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 100ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 225ms;
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: 4px;
363
background-repeat: no-repeat;
364
background-position: center, center;
365
background-size: 90px 90px, auto;
366
font-weight: 500;
367
transition: all 100ms 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 100ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
384
animation: ripple_effect 225ms 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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms 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.08));
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 100ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
441
animation: flat_ripple_effect 225ms 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: 4px;
603
border-radius: 4px;
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: 4px;
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: 4px;
702
border-radius: 4px;
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 225ms 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: 4px;
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: 4px;
742
border-bottom-left-radius: 4px;
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: 4px;
748
border-bottom-right-radius: 4px;
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: 4px;
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: 4px;
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: 4px;
765
border-top-right-radius: 4px;
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: 4px;
771
border-bottom-right-radius: 4px;
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: 4px;
777
}
778
/* menu buttons */
780
GtkColorButton.button {
781
padding: 7px 8px 8px;
782
}
783
GtkColorButton.button GtkColorSwatch:first-child:last-child {
785
border-radius: 4px;
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: 4px 4px 0 0;
850
}
851
.spinbutton.vertical .button:last-child {
853
border-radius: 0 0 4px 4px;
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 100ms 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: 4px;
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 100ms cubic-bezier(0, 0, 0.2, 1);
951
padding: 6px;
952
border-radius: 4px 4px 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.1);
954
background-color: #383838;
955
color: white;
956
}
957
.titlebar:backdrop,
959
.header-bar:backdrop {
960
color: rgba(255, 255, 255, 0.7);
961
}
962
.titlebar .title,
964
.header-bar .title {
965
transition: all 100ms 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 100ms 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(currentColor), 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(currentColor), 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 100ms 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 100ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
1078
animation: ripple_effect 225ms 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: #383838;
1249
}
1250
.menubar > .menuitem {
1252
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
1253
padding: 4px 8px;
1254
color: rgba(255, 255, 255, 0.7);
1255
}
1256
.menubar > .menuitem:hover {
1258
transition: none;
1259
background-color: rgba(255, 255, 255, 0.12);
1260
color: white;
1261
}
1262
.menubar > .menuitem:insensitive {
1264
color: rgba(255, 255, 255, 0.3);
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: 4px;
1279
}
1280
.menu .menuitem {
1282
transition: all 100ms 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: 4px;
1334
}
1335
/***************
1337
* Popovers *
1338
***************/
1339
.popover {
1340
transition: box-shadow 100ms 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: 5px;
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: 4px;
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:insensitive {
1784
opacity: 0.5;
1785
}
1786
GtkSwitch.trough {
1788
border: 8px solid transparent;
1789
border-radius: 100px;
1790
background-color: rgba(0, 0, 0, 0.26);
1791
}
1792
GtkSwitch.trough:active {
1794
background-color: rgba(1, 162, 153, 0.5);
1795
}
1796
GtkSwitch.slider {
1798
padding: 5px 4px;
1799
border-radius: 100px;
1800
box-shadow: 0 0 0 10px transparent, 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1801
background-color: #FFFFFF;
1802
}
1803
GtkSwitch.slider:hover {
1805
box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1806
}
1807
GtkSwitch.slider:active {
1809
background-color: #01A299;
1810
color: #01A299;
1811
}
1812
/*************************
1814
* Check and Radio items *
1815
*************************/
1816
.check {
1817
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1818
}
1819
.check:hover {
1821
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1822
}
1823
.check:active {
1825
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1826
}
1827
.check:insensitive {
1829
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1830
}
1831
.check:inconsistent {
1833
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1834
}
1835
.check:inconsistent:hover {
1837
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1838
}
1839
.check:inconsistent:active {
1841
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1842
}
1843
.check:inconsistent:insensitive {
1845
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1846
}
1847
.check:checked {
1849
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1850
}
1851
.check:checked:hover {
1853
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1854
}
1855
.check:checked:active {
1857
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1858
}
1859
.check:checked:insensitive {
1861
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1862
}
1863
.menu .menuitem.check {
1865
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1866
}
1867
.menu .menuitem.check:insensitive {
1869
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1870
}
1871
.menu .menuitem.check:inconsistent {
1873
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1874
}
1875
.menu .menuitem.check:inconsistent:insensitive {
1877
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1878
}
1879
.menu .menuitem.check:checked {
1881
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1882
}
1883
.menu .menuitem.check:checked:insensitive {
1885
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1886
}
1887
.radio {
1889
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1890
}
1891
.radio:hover {
1893
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1894
}
1895
.radio:active {
1897
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1898
}
1899
.radio:insensitive {
1901
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1902
}
1903
.radio:inconsistent {
1905
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1906
}
1907
.radio:inconsistent:hover {
1909
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1910
}
1911
.radio:inconsistent:active {
1913
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1914
}
1915
.radio:inconsistent:insensitive {
1917
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1918
}
1919
.radio:checked {
1921
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1922
}
1923
.radio:checked:hover {
1925
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1926
}
1927
.radio:checked:active {
1929
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1930
}
1931
.radio:checked:insensitive {
1933
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1934
}
1935
.menu .menuitem.radio {
1937
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1938
}
1939
.menu .menuitem.radio:insensitive {
1941
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1942
}
1943
.menu .menuitem.radio:inconsistent {
1945
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1946
}
1947
.menu .menuitem.radio:inconsistent:insensitive {
1949
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1950
}
1951
.menu .menuitem.radio:checked {
1953
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1954
}
1955
.menu .menuitem.radio:checked:insensitive {
1957
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1958
}
1959
.view.content-view.check:not(.list) {
1961
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1962
background-color: transparent;
1963
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1964
}
1965
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1967
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1968
}
1969
.view.content-view.check:checked:not(.list) {
1971
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@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:checked:not(.list):hover, .view.content-view.check:checked: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
GtkCheckButton.text-button, GtkRadioButton.text-button {
1981
padding: 2px 4px;
1982
outline-offset: 0;
1983
}
1984
/************
1986
* GtkScale *
1987
************/
1988
.scale,
1989
.scale.scale-has-marks-above.scale-has-marks-below,
1990
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1991
-GtkScale-slider-length: 24;
1992
-GtkRange-slider-width: 24;
1993
-GtkRange-trough-border: 2;
1994
outline-offset: -8px;
1995
outline-radius: 100px;
1996
}
1997
.scale.fine-tune.slider,
1999
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
2000
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
2001
background-size: 50%;
2002
}
2003
.scale.slider,
2005
.scale.scale-has-marks-above.scale-has-marks-below.slider,
2006
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
2007
border-radius: 50%;
2008
background-repeat: no-repeat;
2009
background-position: center;
2010
}
2011
.scale.slider.slider,
2013
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
2014
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
2015
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
2016
}
2017
.scale.slider.slider:insensitive,
2019
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
2020
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
2021
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
2022
}
2023
.scale.slider:hover,
2025
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
2026
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
2027
background-color: rgba(1, 162, 153, 0.08);
2028
}
2029
.scale.slider:active,
2031
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
2032
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
2033
background-color: rgba(1, 162, 153, 0.16);
2034
}
2035
.scale.trough,
2037
.scale.scale-has-marks-above.scale-has-marks-below.trough,
2038
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
2039
margin: 13px 14px;
2040
background-color: alpha(currentColor, 0.24);
2041
}
2042
.scale.trough.highlight,
2044
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
2045
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
2046
background-color: #01A299;
2047
}
2048
.scale.trough.highlight:insensitive,
2050
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
2051
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
2052
background-color: alpha(currentColor, 0.24);
2053
}
2054
.scale.trough:insensitive,
2056
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
2057
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
2058
color: rgba(0, 0, 0, 0.38);
2059
}
2060
.scale.trough.vertical,
2062
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
2063
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
2064
margin: 14px 13px;
2065
}
2066
.scale.separator,
2068
.scale.scale-has-marks-above.scale-has-marks-below.separator,
2069
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
2070
color: alpha(currentColor, 0.24);
2071
}
2072
.scale.scale-has-marks-below.slider {
2074
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
2075
}
2076
.scale.scale-has-marks-below.slider:insensitive {
2078
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
2079
}
2080
.scale.scale-has-marks-above.slider {
2082
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2083
}
2084
.scale.scale-has-marks-above.slider:insensitive {
2086
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2087
}
2088
.scale.vertical.scale-has-marks-below.slider {
2090
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2091
}
2092
.scale.vertical.scale-has-marks-below.slider:insensitive {
2094
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2095
}
2096
.scale.vertical.scale-has-marks-above.slider {
2098
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2099
}
2100
.scale.vertical.scale-has-marks-above.slider:insensitive {
2102
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2103
}
2104
/*****************
2106
* Progress bars *
2107
*****************/
2108
GtkProgressBar {
2109
-GtkProgressBar-min-horizontal-bar-height: 4;
2110
-GtkProgressBar-min-vertical-bar-width: 4;
2111
padding: 0;
2112
font-size: smaller;
2113
color: rgba(0, 0, 0, 0.38);
2114
}
2115
GtkProgressBar.osd {
2117
-GtkProgressBar-xspacing: 0;
2118
-GtkProgressBar-yspacing: 0;
2119
-GtkProgressBar-min-horizontal-bar-height: 4;
2120
}
2121
GtkProgressBar.trough {
2123
border-radius: 0;
2124
background-color: rgba(66, 133, 244, 0.3);
2125
}
2126
GtkProgressBar.trough.osd {
2128
border-style: none;
2129
box-shadow: none;
2130
}
2131
.progressbar {
2133
border-radius: 0;
2134
background-color: #4285F4;
2135
}
2136
.progressbar.left {
2138
border-top-left-radius: 0;
2139
border-bottom-left-radius: 0;
2140
}
2141
.progressbar.right {
2143
border-top-right-radius: 0;
2144
border-bottom-right-radius: 0;
2145
}
2146
.progressbar.left.right {
2148
box-shadow: none;
2149
}
2150
.progressbar.vertical.bottom {
2152
border-bottom-left-radius: 0;
2153
border-bottom-right-radius: 0;
2154
box-shadow: none;
2155
}
2156
.progressbar.vertical.top {
2158
border-top-left-radius: 0;
2159
border-top-right-radius: 0;
2160
}
2161
.progressbar.osd {
2163
background-image: none;
2164
background-color: #4285F4;
2165
border-style: none;
2166
border-radius: 0;
2167
}
2168
/*************
2170
* Level Bar *
2171
*************/
2172
.level-bar {
2173
-GtkLevelBar-min-block-width: 36;
2174
-GtkLevelBar-min-block-height: 4;
2175
}
2176
.level-bar.vertical {
2178
-GtkLevelBar-min-block-width: 4;
2179
-GtkLevelBar-min-block-height: 36;
2180
}
2181
.level-bar.fill-block {
2183
background-color: #4285F4;
2184
}
2185
.level-bar.fill-block.indicator-discrete.horizontal {
2187
margin: 0 1px;
2188
}
2189
.level-bar.fill-block.indicator-discrete.vertical {
2191
margin: 1px 0;
2192
}
2193
.level-bar.fill-block.level-high {
2195
background-color: #34A853;
2196
}
2197
.level-bar.fill-block.level-low {
2199
background-color: #FBBC05;
2200
}
2201
.level-bar.fill-block.empty-fill-block {
2203
background-color: rgba(0, 0, 0, 0.12);
2204
}
2205
/**********
2207
* Frames *
2208
**********/
2209
.frame {
2210
border: 1px solid rgba(0, 0, 0, 0.12);
2211
padding: 0;
2212
}
2213
.frame.flat {
2215
border-style: none;
2216
}
2217
.frame.action-bar {
2219
padding: 6px;
2220
border-width: 1px 0 0;
2221
}
2222
GtkScrolledWindow GtkViewport.frame {
2224
border-style: none;
2225
}
2226
.separator {
2228
color: rgba(0, 0, 0, 0.12);
2229
}
2230
GtkFileChooserButton .separator.vertical,
2232
GtkFontButton .separator.vertical {
2233
-GtkWidget-wide-separators: true;
2234
}
2235
/*********
2237
* Lists *
2238
*********/
2239
.list {
2240
border-color: rgba(0, 0, 0, 0.12);
2241
background-color: #FFFFFF;
2242
}
2243
.list-row,
2245
.grid-child {
2246
padding: 2px;
2247
}
2248
.list-row.activatable, .view, column-header .button {
2250
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2251
box-shadow: inset 0 0 0 10000px transparent;
2252
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
2253
background-repeat: no-repeat;
2254
background-position: center, center;
2255
background-size: 240px 240px, auto;
2256
}
2257
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2259
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2260
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2261
}
2262
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2264
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2265
animation: list_ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
2266
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2267
}
2268
.list-row:selected .button:insensitive {
2270
color: rgba(255, 255, 255, 0.3);
2271
}
2272
.list-row:selected .button.flat {
2274
color: rgba(255, 255, 255, 0.7);
2275
}
2276
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2278
color: white;
2279
}
2280
.list-row:selected .button.flat:insensitive {
2282
color: rgba(255, 255, 255, 0.3);
2283
}
2284
/*********************
2286
* App Notifications *
2287
*********************/
2288
/*************
2289
* Expanders *
2290
*************/
2291
.expander {
2292
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2293
}
2294
.expander:dir(rtl) {
2296
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2297
}
2298
.expander:checked {
2300
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2301
}
2302
.expander:not(:hover):not(:active) {
2304
color: alpha(currentColor, 0.7);
2305
}
2306
.expander:selected {
2308
color: white;
2309
}
2310
/************
2312
* Calendar *
2313
***********/
2314
GtkCalendar {
2315
padding: 1px;
2316
border: 1px solid rgba(0, 0, 0, 0.12);
2317
color: rgba(0, 0, 0, 0.87);
2318
}
2319
GtkCalendar:insensitive {
2321
color: rgba(0, 0, 0, 0.38);
2322
}
2323
GtkCalendar:selected {
2325
border-radius: 5px;
2326
}
2327
GtkCalendar.header {
2329
border-style: none none solid;
2330
border-radius: 0;
2331
}
2332
GtkCalendar:inconsistent {
2334
color: rgba(0, 0, 0, 0.26);
2335
}
2336
GtkCalendar.highlight {
2338
font-size: smaller;
2339
color: rgba(0, 0, 0, 0.54);
2340
}
2341
/***********
2343
* Dialogs *
2344
***********/
2345
.message-dialog .dialog-action-area .button {
2346
padding: 8px;
2347
}
2348
.message-dialog.background {
2350
background-color: #FFFFFF;
2351
}
2352
.message-dialog .titlebar {
2354
border-style: none;
2355
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2356
background-color: #FFFFFF;
2357
}
2358
.message-dialog.csd.background {
2360
border-bottom-left-radius: 4px;
2361
border-bottom-right-radius: 4px;
2362
}
2363
.message-dialog.csd .dialog-action-area .button {
2365
padding: 9px 16px 10px;
2366
border-top: 1px solid rgba(0, 0, 0, 0.12);
2367
border-radius: 0;
2368
background-size: 240px 240px, auto;
2369
}
2370
.message-dialog.csd .dialog-action-area .button:first-child {
2372
border-radius: 0 0 0 4px;
2373
}
2374
.message-dialog.csd .dialog-action-area .button:last-child {
2376
border-radius: 0 0 4px 0;
2377
}
2378
GtkFileChooserDialog .dialog-action-box {
2380
border-top: 1px solid rgba(0, 0, 0, 0.12);
2381
}
2382
/***********
2384
* Sidebar *
2385
***********/
2386
.sidebar {
2387
border: none;
2388
background-color: #FAFAFA;
2389
}
2390
GtkSidebarRow.list-row {
2392
padding: 0px;
2393
}
2394
GtkSidebarRow .sidebar-revealer {
2396
padding: 4px 14px 4px 12px;
2397
}
2398
GtkSidebarRow .sidebar-icon {
2400
opacity: 0.7;
2401
}
2402
GtkSidebarRow .sidebar-icon:dir(ltr) {
2404
padding-right: 8px;
2405
}
2406
GtkSidebarRow .sidebar-icon:dir(rtl) {
2408
padding-left: 8px;
2409
}
2410
GtkSidebarRow .sidebar-label:dir(ltr) {
2412
padding-right: 2px;
2413
}
2414
GtkSidebarRow .sidebar-label:dir(rtl) {
2416
padding-left: 2px;
2417
}
2418
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2420
border: solid 1px #4285F4;
2421
}
2422
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2424
color: #01A299;
2425
}
2426
.sidebar-button.button.image-button {
2428
padding: 4px;
2429
}
2430
.sidebar-item {
2432
padding: 10px 4px;
2433
}
2434
.sidebar-item > .label {
2436
padding-left: 6px;
2437
padding-right: 6px;
2438
}
2439
/****************
2441
* File chooser *
2442
****************/
2443
GtkPlacesView .server-list-button > GtkImage {
2444
-gtk-icon-transform: rotate(0turn);
2445
}
2446
GtkPlacesView .server-list-button:checked > GtkImage {
2448
-gtk-icon-transform: rotate(-0.5turn);
2449
}
2450
/*********
2452
* Paned *
2453
*********/
2454
GtkPaned {
2455
-GtkPaned-handle-size: 1;
2456
-gtk-icon-source: none;
2457
margin: 0 8px 8px 0;
2458
}
2459
GtkPaned:dir(rtl) {
2461
margin-right: 0;
2462
margin-left: 8px;
2463
}
2464
GtkPaned .pane-separator {
2466
background-color: rgba(0, 0, 0, 0.12);
2467
}
2468
GtkPaned.wide {
2470
-GtkPaned-handle-size: 6;
2471
margin: 0;
2472
}
2473
GtkPaned.wide .pane-separator {
2475
background-color: transparent;
2476
border-style: none solid;
2477
border-color: rgba(0, 0, 0, 0.12);
2478
border-width: 1px;
2479
}
2480
GtkPaned.wide.vertical .pane-separator {
2482
border-style: solid none;
2483
}
2484
/**************
2486
* GtkInfoBar *
2487
**************/
2488
GtkInfoBar {
2489
border-style: none;
2490
}
2491
.info {
2493
background-color: #34A853;
2494
}
2495
.question {
2497
background-color: #4285F4;
2498
}
2499
.warning {
2501
background-color: #FBBC05;
2502
}
2503
.error {
2505
background-color: #EA4335;
2506
}
2507
.info,
2509
.question,
2510
.warning,
2511
.error {
2512
color: white;
2513
}
2514
.info .button:insensitive,
2516
.question .button:insensitive,
2517
.warning .button:insensitive,
2518
.error .button:insensitive {
2519
color: rgba(255, 255, 255, 0.3);
2520
}
2521
/************
2523
* Tooltips *
2524
************/
2525
.tooltip {
2526
color: white;
2527
padding: 4px;
2528
/* not working */
2529
border-radius: 4px;
2530
box-shadow: none;
2531
}
2532
.tooltip.background {
2534
background-color: rgba(97, 97, 97, 0.9);
2535
}
2536
.tooltip.window-frame.csd {
2538
background-color: transparent;
2539
}
2540
.tooltip * {
2542
padding: 4px;
2543
background-color: transparent;
2544
color: inherit;
2545
}
2546
/*****************
2548
* Color Chooser *
2549
*****************/
2550
GtkColorSwatch {
2551
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2552
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2553
}
2554
GtkColorSwatch:insensitive {
2556
opacity: 0.5;
2557
box-shadow: none;
2558
}
2559
GtkColorSwatch.top {
2561
border-top-left-radius: 4px;
2562
border-top-right-radius: 4px;
2563
}
2564
GtkColorSwatch.bottom {
2566
border-bottom-left-radius: 4px;
2567
border-bottom-right-radius: 4px;
2568
}
2569
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2571
border-top-left-radius: 4px;
2572
border-bottom-left-radius: 4px;
2573
}
2574
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2576
border-top-right-radius: 4px;
2577
border-bottom-right-radius: 4px;
2578
}
2579
GtkColorSwatch:only-child:not(.overlay) {
2581
border-radius: 4px;
2582
}
2583
GtkColorSwatch.top > .overlay {
2585
border-top-left-radius: 4px;
2586
border-top-right-radius: 4px;
2587
}
2588
GtkColorSwatch.bottom > .overlay {
2590
border-bottom-left-radius: 4px;
2591
border-bottom-right-radius: 4px;
2592
}
2593
GtkColorSwatch:first-child:not(.top) > .overlay {
2595
border-top-left-radius: 4px;
2596
border-bottom-left-radius: 4px;
2597
}
2598
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2600
border-top-right-radius: 4px;
2601
border-bottom-right-radius: 4px;
2602
}
2603
GtkColorSwatch:only-child > .overlay {
2605
border-radius: 4px;
2606
}
2607
GtkColorSwatch:hover {
2609
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2610
}
2611
GtkColorEditor GtkColorSwatch {
2613
border-radius: 4px;
2614
}
2615
GtkColorEditor GtkColorSwatch:hover {
2617
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2618
}
2619
GtkColorSwatch.color-dark {
2621
color: white;
2622
}
2623
GtkColorSwatch.color-light {
2625
color: rgba(0, 0, 0, 0.87);
2626
}
2627
GtkColorSwatch#add-color-button {
2629
background-image: linear-gradient(to right, #EA4335 25%, #FBBC05 25%, #FBBC05 50%, #34A853 50%, #34A853 75%, #4285F4 75%);
2630
color: white;
2631
}
2632
/********
2634
* Misc *
2635
********/
2636
.content-view {
2637
background-color: #F2F2F2;
2638
}
2639
.scale-popup .button {
2641
padding: 10px;
2642
}
2643
/**********************
2645
* Window Decorations *
2646
*********************/
2647
.window-frame {
2648
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2649
border-radius: 4px 4px 0 0;
2650
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2651
/* this is used for the resize cursor area */
2652
margin: 8px;
2653
}
2654
.window-frame:backdrop {
2656
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2657
}
2658
.window-frame.tiled {
2660
border-radius: 0;
2661
}
2662
.window-frame.popup {
2664
box-shadow: none;
2665
}
2666
.window-frame.ssd {
2668
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2669
}
2670
.window-frame.csd.popup {
2672
border-radius: 4px;
2673
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2674
}
2675
.window-frame.csd.tooltip {
2677
border-radius: 4px;
2678
box-shadow: none;
2679
}
2680
.window-frame.csd.message-dialog {
2682
border-radius: 4px;
2683
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2684
}
2685
.window-frame.csd.message-dialog:backdrop {
2687
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2688
}
2689
.window-frame.solid-csd {
2691
border-radius: 0;
2692
margin: 0;
2693
background-color: #383838;
2694
box-shadow: none;
2695
}
2696
.header-bar .button.titlebutton:active,
2698
.titlebar .button.titlebutton:active {
2699
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.08)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.08));
2700
}
2701
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2703
background-color: #4285F4;
2704
color: white;
2705
}
2706
.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 {
2708
color: rgba(255, 255, 255, 0.5);
2709
}
2710
.monospace {
2712
font: Monospace;
2713
}
2714
/**********************
2716
* Touch Copy & Paste *
2717
*********************/
2718
.entry.cursor-handle,
2719
.cursor-handle {
2720
background-color: #01A299;
2721
background-image: none;
2722
box-shadow: none;
2723
border-style: none;
2724
}
2725
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2727
.cursor-handle.insertion-cursor:dir(ltr),
2728
.cursor-handle.insertion-cursor:dir(rtl) {
2729
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2730
}
2731
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2733
.cursor-handle.insertion-cursor:dir(ltr),
2734
.cursor-handle.insertion-cursor:dir(rtl) {
2735
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2736
}
2737
/* Decouple the font of context menus from their entry/textview */
2739
.context-menu {
2740
font: initial;
2741
}
2742
.touch-selection {
2744
font: initial;
2745
color: rgba(0, 0, 0, 0.87);
2746
background-color: #FFFFFF;
2747
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2748
}
2749
.touch-selection:backdrop {
2751
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2752
}
2753
.overshoot.top {
2755
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2756
background-repeat: no-repeat;
2757
background-position: center top;
2758
background-color: transparent;
2759
border: none;
2760
box-shadow: none;
2761
}
2762
.overshoot.bottom {
2764
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2765
background-repeat: no-repeat;
2766
background-position: center bottom;
2767
background-color: transparent;
2768
border: none;
2769
box-shadow: none;
2770
}
2771
.overshoot.left {
2773
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2774
background-repeat: no-repeat;
2775
background-position: left center;
2776
background-color: transparent;
2777
border: none;
2778
box-shadow: none;
2779
}
2780
.overshoot.right {
2782
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2783
background-repeat: no-repeat;
2784
background-position: right center;
2785
background-color: transparent;
2786
border: none;
2787
box-shadow: none;
2788
}
2789
.undershoot.top {
2791
background-color: transparent;
2792
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2793
padding-top: 1px;
2794
background-size: 12px 1px;
2795
background-repeat: repeat-x;
2796
background-origin: content-box;
2797
background-position: left top;
2798
}
2799
.undershoot.bottom {
2801
background-color: transparent;
2802
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2803
padding-bottom: 1px;
2804
background-size: 12px 1px;
2805
background-repeat: repeat-x;
2806
background-origin: content-box;
2807
background-position: left bottom;
2808
}
2809
.undershoot.left {
2811
background-color: transparent;
2812
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2813
padding-left: 1px;
2814
background-size: 1px 12px;
2815
background-repeat: repeat-y;
2816
background-origin: content-box;
2817
background-position: left top;
2818
}
2819
.undershoot.right {
2821
background-color: transparent;
2822
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2823
padding-right: 1px;
2824
background-size: 1px 12px;
2825
background-repeat: repeat-y;
2826
background-origin: content-box;
2827
background-position: right top;
2828
}
2829
.floating-bar {
2831
padding: 3px 0 4px;
2832
border-width: 1px;
2833
border-style: solid solid none;
2834
border-color: rgba(0, 0, 0, 0.12);
2835
border-radius: 5px 5px 0 0;
2836
background-color: rgba(255, 255, 255, 0.9);
2837
background-clip: padding-box;
2838
}
2839
.floating-bar.left {
2841
border-left-style: none;
2842
border-top-left-radius: 0;
2843
}
2844
.floating-bar.right {
2846
border-right-style: none;
2847
border-top-right-radius: 0;
2848
}
2849
.floating-bar .button {
2851
padding: 4px;
2852
}
2853
/************
2855
* Nautilus *
2856
************/
2857
EelEditableLabel.entry {
2858
transition: none;
2859
}
2860
.nautilus-canvas-item.dim-label, .nautilus-canvas-item.label.separator, .titlebar .nautilus-canvas-item.subtitle,
2862
.header-bar .nautilus-canvas-item.subtitle,
2863
.nautilus-list-dim-label {
2864
color: rgba(0, 0, 0, 0.54);
2865
}
2866
.nautilus-canvas-item.dim-label:selected, .nautilus-canvas-item.label.separator:selected, .titlebar .nautilus-canvas-item.subtitle:selected,
2868
.header-bar .nautilus-canvas-item.subtitle:selected,
2869
.nautilus-list-dim-label:selected {
2870
color: rgba(255, 255, 255, 0.7);
2871
}
2872
.nautilus-desktop.nautilus-canvas-item {
2874
color: white;
2875
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2876
}
2877
.nautilus-desktop.nautilus-canvas-item:selected {
2879
text-shadow: none;
2880
}
2881
/* Toolbar */
2883
@keyframes needs_attention_keyframes {
2884
0% {
2885
background-color: transparent;
2886
}
2887
50% {
2888
background-color: alpha(currentColor, 0.24);
2889
}
2890
100% {
2891
background-color: transparent;
2892
}
2893
}
2894
.nautilus-operations-button-needs-attention {
2896
color: #01A299;
2897
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2898
}
2899
.nautilus-operations-button-needs-attention-multiple {
2901
color: #01A299;
2902
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2903
animation-iteration-count: 2;
2904
}
2905
.disk-space-display.unknown {
2907
background-color: #FBBC05;
2908
}
2909
.disk-space-display.used {
2911
background-color: #4285F4;
2912
}
2913
.disk-space-display.free {
2915
background-color: alpha(currentColor, 0.24);
2916
color: rgba(0, 0, 0, 0.38);
2917
}
2918
/* View */
2920
/********
2921
* Nemo *
2922
*******/
2923
NemoWindow .nemo-inactive-pane .view, NemoWindow .nemo-inactive-pane iconview {
2924
background-color: #FAFAFA;
2925
color: rgba(0, 0, 0, 0.87);
2926
}
2927
NemoWindow .sidebar .cell {
2929
background-color: #F2F2F2;
2930
color: rgba(0, 0, 0, 0.87);
2931
}
2932
NemoWindow .sidebar .cell:selected {
2934
color: white;
2935
background-color: #4285F4;
2936
}
2937
.nemo-desktop.nemo-canvas-item {
2939
color: white;
2940
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2941
}
2942
.nemo-desktop.nemo-canvas-item:selected {
2944
text-shadow: none;
2945
}
2946
/**************
2948
* Tweak Tool *
2949
**************/
2950
.tweak-categories {
2951
background-color: #FAFAFA;
2952
background-image: linear-gradient(to bottom, #FAFAFA);
2953
}
2954
.tweak-categories .separator {
2956
-GtkWidget-wide-separators: true;
2957
color: transparent;
2958
}
2959
/************
2961
* Software *
2962
************/
2963
.button.install-progress:insensitive {
2964
background-color: alpha(currentColor, 0.24);
2965
}
2966
/***********
2968
* Builder *
2969
***********/
2970
GbTerminalView {
2971
background-color: #FFFFFF;
2972
}
2973
/***********
2975
* Firefox *
2976
***********/
2977
.menubar {
2978
color: rgba(255, 255, 255, 0.7);
2979
}
2980
.menubar:hover {
2982
color: white;
2983
}
2984
/***********
2986
* Synapse *
2987
***********/
2988
SynapseGuiMatchListView GtkWidget:selected {
2989
background-color: #4285F4;
2990
}
2991
/*********
2993
* Unity *
2994
*********/
2995
UnityDecoration {
2996
-UnityDecoration-extents: 28px 0 0 0;
2997
-UnityDecoration-input-extents: 8px;
2998
-UnityDecoration-shadow-offset-x: 0;
2999
-UnityDecoration-shadow-offset-y: 3px;
3000
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
3001
-UnityDecoration-active-shadow-radius: 18px;
3002
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
3003
-UnityDecoration-inactive-shadow-radius: 6px;
3004
-UnityDecoration-glow-size: 8px;
3005
-UnityDecoration-glow-color: #4285F4;
3006
-UnityDecoration-title-indent: 4px;
3007
-UnityDecoration-title-fade: 32px;
3008
-UnityDecoration-title-alignment: 0.0;
3009
}
3010
UnityDecoration.top {
3012
padding: 0 2px;
3013
border-style: none;
3014
border-radius: 4px 4px 0 0;
3015
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
3016
background-color: #383838;
3017
color: white;
3018
}
3019
UnityDecoration.top:backdrop {
3021
color: rgba(255, 255, 255, 0.7);
3022
}
3023
UnityDecoration.menuitem,
3025
UnityDecoration .menuitem {
3026
color: rgba(255, 255, 255, 0.7);
3027
}
3028
UnityDecoration.menubar.menuitem:hover,
3030
UnityDecoration.menubar .menuitem *:hover {
3031
box-shadow: inset 0 -2px currentColor;
3032
background-color: transparent;
3033
color: white;
3034
}
3035
.background:not(.csd) :not(.titlebar) .header-bar {
3037
border-radius: 0;
3038
box-shadow: none;
3039
}
3040
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
3042
border-style: none;
3043
}
3044
UnityPanelWidget,
3046
.unity-panel {
3047
background-color: #212121;
3048
background-image: linear-gradient(to bottom, #212121);
3049
color: white;
3050
}
3051
UnityPanelWidget:backdrop,
3053
.unity-panel:backdrop {
3054
color: rgba(255, 255, 255, 0.7);
3055
}
3056
.unity-panel.menuitem,
3058
.unity-panel .menuitem {
3059
color: rgba(255, 255, 255, 0.7);
3060
}
3061
.unity-panel.menubar.menuitem:hover,
3063
.unity-panel.menubar .menuitem *:hover {
3064
box-shadow: inset 0 -2px currentColor;
3065
background-color: transparent;
3066
color: white;
3067
}
3068
@keyframes playbackmenuitem_spinner {
3070
to {
3071
-gtk-icon-transform: rotate(1turn);
3072
}
3073
}
3074
.menu IdoPlaybackMenuItem.menuitem:active {
3076
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
3077
animation: playbackmenuitem_spinner 1s infinite linear;
3078
color: #4285F4;
3079
}
3080
/* GTK NAMED COLORS
3082
----------------
3083
use responsibly! */
3084
/*
3085
widget text/foreground color */
3086
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
3087
/*
3088
text color for entries, views and content in general */
3089
@define-color theme_text_color rgba(0, 0, 0, 0.87);
3090
/*
3091
widget base background color */
3092
@define-color theme_bg_color #F2F2F2;
3093
/*
3094
text widgets and the like base background color */
3095
@define-color theme_base_color #FFFFFF;
3096
/*
3097
base background color of selections */
3098
@define-color theme_selected_bg_color #4285F4;
3099
/*
3100
text/foreground color of selections */
3101
@define-color theme_selected_fg_color white;
3102
/*
3103
base background color of insensitive widgets */
3104
@define-color insensitive_bg_color #F2F2F2;
3105
/*
3106
text foreground color of insensitive widgets */
3107
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3108
/*
3109
insensitive text widgets and the like base background color */
3110
@define-color insensitive_base_color #FAFAFA;
3111
/*
3112
widget text/foreground color on backdrop windows */
3113
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3114
/*
3115
text color for entries, views and content in general on backdrop windows */
3116
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3117
/*
3118
widget base background color on backdrop windows */
3119
@define-color theme_unfocused_bg_color #F2F2F2;
3120
/*
3121
text widgets and the like base background color on backdrop windows */
3122
@define-color theme_unfocused_base_color #FFFFFF;
3123
/*
3124
base background color of selections on backdrop windows */
3125
@define-color theme_unfocused_selected_bg_color #4285F4;
3126
/*
3127
text/foreground color of selections on backdrop windows */
3128
@define-color theme_unfocused_selected_fg_color white;
3129
/*
3130
insensitive color on backdrop windows */
3131
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3132
/*
3133
widgets main borders color */
3134
@define-color borders rgba(0, 0, 0, 0.12);
3135
/*
3136
widgets main borders color on backdrop windows */
3137
@define-color unfocused_borders rgba(0, 0, 0, 0.12);
3138
/*
3139
these are pretty self explicative */
3140
@define-color warning_color #FBBC05;
3141
@define-color error_color #EA4335;
3142
@define-color success_color #34A853;
3143
/*
3144
these colors are exported for the window manager and shouldn't be used in applications,
3145
read if you used those and something break with a version upgrade you're on your own... */
3146
@define-color wm_title white;
3147
@define-color wm_unfocused_title rgba(255, 255, 255, 0.7);
3148
@define-color wm_highlight rgba(255, 255, 255, 0.1);
3149
@define-color wm_bg #383838;
3150
/*
3151
FIXME this is really an API */
3152
@define-color content_view_bg #FFFFFF;
3153
@define-color placeholder_text_color #757575;
3154