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: 0;
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
background-clip: border-box;
1466
outline-offset: 0;
1467
/* works for testnotebookdnd, but there's a superfluous border
1468
in gedit or web, commented out for now, needs gtk fixes
1469
&.reorderable-page {
1470
&.top {
1471
padding-top: ($vt_vpadding - 1px);
1472
border-top-width: 1px;
1473
border-left-width: 1px;
1474
border-right-width: 1px;
1475
}
1476
&.bottom {
1477
padding-bottom: ($vt_vpadding - 1px);
1478
border-bottom-width: 1px;
1479
border-left-width: 1px;
1480
border-right-width: 1px;
1481
}
1482
&.left {
1483
padding-left: ($ht_hpadding - 1px);
1484
border-left-width: 1px;
1485
border-top-width: 1px;
1486
border-bottom-width: 1px;
1487
}
1488
&.right {
1489
padding-right: ($ht_hpadding - 1px);
1490
border-right-width: 1px;
1491
border-top-width: 1px;
1492
border-bottom-width: 1px;
1493
}
1494
}
1495
*/
1496
}
1497
.notebook tab.top, .notebook tab.bottom {
1499
padding: 8px 12px;
1500
}
1501
.notebook tab.left, .notebook tab.right {
1503
padding: 8px 12px;
1504
}
1505
.notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
1507
padding-left: 12px;
1508
padding-right: 12px;
1509
border-left-width: 1px;
1510
border-right-width: 1px;
1511
}
1512
.notebook tab.reorderable-page.left, .notebook tab.reorderable-page.right {
1514
border-bottom-width: 1px;
1515
border-top-width: 1px;
1516
}
1517
.notebook tab:hover, .notebook tab.prelight-page {
1519
background-color: alpha(currentColor, 0.08);
1520
}
1521
.notebook tab.top:active, .notebook tab.top.active-page {
1523
box-shadow: inset 0 -2px #4285F4;
1524
}
1525
.notebook tab.bottom:active, .notebook tab.bottom.active-page {
1527
box-shadow: inset 0 2px #4285F4;
1528
}
1529
.notebook tab.left:active, .notebook tab.left.active-page {
1531
box-shadow: inset -2px 0 #4285F4;
1532
}
1533
.notebook tab.right:active, .notebook tab.right.active-page {
1535
box-shadow: inset 2px 0 #4285F4;
1536
}
1537
.notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
1539
border-color: rgba(0, 0, 0, 0.12);
1540
background-color: #FFFFFF;
1541
background-clip: padding-box;
1542
}
1543
.notebook tab .label {
1545
padding: 0 2px;
1546
font-weight: 500;
1547
color: rgba(0, 0, 0, 0.54);
1548
}
1549
.notebook tab .prelight-page .label, .notebook tab .label.prelight-page {
1551
color: rgba(0, 0, 0, 0.87);
1552
}
1553
.notebook tab .active-page .label, .notebook tab .label.active-page {
1555
color: rgba(0, 0, 0, 0.87);
1556
}
1557
.notebook tab .button {
1559
padding: 0;
1560
background-size: 30px 30px, auto;
1561
}
1562
.notebook tab .button > GtkImage {
1564
padding: 4px;
1565
}
1566
.notebook.arrow:not(:hover):not(:active) {
1568
color: rgba(0, 0, 0, 0.54);
1569
}
1570
.notebook.arrow:insensitive {
1572
color: rgba(0, 0, 0, 0.26);
1573
}
1574
/**************
1576
* Scrollbars *
1577
**************/
1578
.scrollbar {
1579
-GtkRange-slider-width: 17px;
1580
-GtkRange-trough-border: 0;
1581
-GtkScrollbar-has-backward-stepper: false;
1582
-GtkScrollbar-has-forward-stepper: false;
1583
-GtkScrollbar-min-slider-length: 32px;
1584
-GtkRange-stepper-spacing: 0;
1585
-GtkRange-trough-under-steppers: 1;
1586
}
1587
.scrollbar .button {
1589
border: none;
1590
}
1591
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1593
-GtkRange-slider-width: 12px;
1594
}
1595
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
1597
margin: 3px;
1598
border: 1px solid rgba(255, 255, 255, 0.3);
1599
}
1600
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
1602
border-style: none;
1603
background-color: transparent;
1604
}
1605
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
1607
background-color: rgba(255, 255, 255, 0.9);
1608
}
1609
.scrollbar .trough {
1611
border: 1px none rgba(0, 0, 0, 0.12);
1612
background-color: #FFFFFF;
1613
background-clip: padding-box;
1614
}
1615
.scrollbar .slider {
1617
background-color: rgba(0, 0, 0, 0.38);
1618
}
1619
.scrollbar .slider:hover {
1621
background-color: rgba(0, 0, 0, 0.54);
1622
}
1623
.scrollbar .slider:active {
1625
background-color: rgba(0, 0, 0, 0.87);
1626
}
1627
.scrollbar .slider:insensitive {
1629
opacity: 0.5;
1630
}
1631
.scrollbar .slider {
1633
border-radius: 100px;
1634
margin: 4px;
1635
}
1636
.scrollbar.fine-tune .slider {
1638
margin: 6px;
1639
}
1640
.scrollbar.vertical .slider {
1642
margin-left: 5px;
1643
}
1644
.scrollbar.vertical .slider:dir(rtl) {
1646
margin-left: 4px;
1647
margin-right: 5px;
1648
}
1649
.scrollbar.vertical.fine-tune .slider {
1651
margin-left: 7px;
1652
}
1653
.scrollbar.vertical.fine-tune .slider:dir(rtl) {
1655
margin-left: 6px;
1656
margin-right: 7px;
1657
}
1658
.scrollbar.vertical .trough {
1660
border-left-style: solid;
1661
}
1662
.scrollbar.vertical .trough:dir(rtl) {
1664
border-left-style: none;
1665
border-right-style: solid;
1666
}
1667
.scrollbar.horizontal .slider {
1669
margin-top: 5px;
1670
}
1671
.scrollbar.horizontal.fine-tune .slider {
1673
margin-top: 7px;
1674
}
1675
.scrollbar.horizontal .trough {
1677
border-top-style: solid;
1678
}
1679
.scrollbars-junction,
1681
.scrollbars-junction.frame {
1682
border-style: solid none none solid;
1683
background-color: #FFFFFF;
1684
}
1685
.scrollbars-junction:dir(rtl),
1687
.scrollbars-junction.frame:dir(rtl) {
1688
border-style: solid solid none none;
1689
}
1690
/**********
1692
* Switch *
1693
**********/
1694
GtkSwitch {
1695
-GtkSwitch-slider-width: 20px;
1696
-GtkSwitch-slider-height: 20px;
1697
outline-offset: -4px;
1698
outline-radius: 100px;
1699
font-size: 0;
1700
}
1701
GtkSwitch:insensitive {
1703
opacity: 0.5;
1704
}
1705
GtkSwitch.trough {
1707
border: 8px solid transparent;
1708
border-radius: 100px;
1709
background-color: rgba(0, 0, 0, 0.26);
1710
}
1711
GtkSwitch.trough:active {
1713
background-color: rgba(1, 162, 153, 0.5);
1714
}
1715
GtkSwitch.slider {
1717
padding: 5px 4px;
1718
border-radius: 100px;
1719
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);
1720
background-color: #FFFFFF;
1721
}
1722
GtkSwitch.slider:hover {
1724
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);
1725
}
1726
GtkSwitch.slider:active {
1728
background-color: #01A299;
1729
color: #01A299;
1730
}
1731
/*************************
1733
* Check and Radio items *
1734
*************************/
1735
.check {
1736
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1737
}
1738
.check:hover {
1740
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1741
}
1742
.check:active {
1744
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1745
}
1746
.check:insensitive {
1748
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1749
}
1750
.check:inconsistent {
1752
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1753
}
1754
.check:inconsistent:hover {
1756
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1757
}
1758
.check:inconsistent:active {
1760
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1761
}
1762
.check:inconsistent:insensitive {
1764
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1765
}
1766
.check:checked {
1768
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1769
}
1770
.check:checked:hover {
1772
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1773
}
1774
.check:checked:active {
1776
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1777
}
1778
.check:checked:insensitive {
1780
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1781
}
1782
.menu .menuitem.check {
1784
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1785
}
1786
.menu .menuitem.check:insensitive {
1788
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1789
}
1790
.menu .menuitem.check:inconsistent {
1792
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1793
}
1794
.menu .menuitem.check:inconsistent:insensitive {
1796
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1797
}
1798
.menu .menuitem.check:checked {
1800
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1801
}
1802
.menu .menuitem.check:checked:insensitive {
1804
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1805
}
1806
.radio {
1808
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1809
}
1810
.radio:hover {
1812
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1813
}
1814
.radio:active {
1816
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1817
}
1818
.radio:insensitive {
1820
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1821
}
1822
.radio:inconsistent {
1824
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1825
}
1826
.radio:inconsistent:hover {
1828
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1829
}
1830
.radio:inconsistent:active {
1832
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1833
}
1834
.radio:inconsistent:insensitive {
1836
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1837
}
1838
.radio:checked {
1840
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1841
}
1842
.radio:checked:hover {
1844
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1845
}
1846
.radio:checked:active {
1848
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1849
}
1850
.radio:checked:insensitive {
1852
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1853
}
1854
.menu .menuitem.radio {
1856
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1857
}
1858
.menu .menuitem.radio:insensitive {
1860
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1861
}
1862
.menu .menuitem.radio:inconsistent {
1864
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1865
}
1866
.menu .menuitem.radio:inconsistent:insensitive {
1868
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1869
}
1870
.menu .menuitem.radio:checked {
1872
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1873
}
1874
.menu .menuitem.radio:checked:insensitive {
1876
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1877
}
1878
.view.content-view.check:not(.list) {
1880
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1881
background-color: transparent;
1882
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1883
}
1884
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1886
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1887
}
1888
.view.content-view.check:checked:not(.list) {
1890
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
1891
background-color: transparent;
1892
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1893
}
1894
.view.content-view.check:checked:not(.list):hover, .view.content-view.check:checked:not(.list):active {
1896
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1897
}
1898
GtkCheckButton.text-button, GtkRadioButton.text-button {
1900
padding: 2px 4px;
1901
outline-offset: 0;
1902
}
1903
/************
1905
* GtkScale *
1906
************/
1907
.scale,
1908
.scale.scale-has-marks-above.scale-has-marks-below,
1909
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1910
-GtkScale-slider-length: 24;
1911
-GtkRange-slider-width: 24;
1912
-GtkRange-trough-border: 2;
1913
outline-offset: -8px;
1914
outline-radius: 100px;
1915
}
1916
.scale.fine-tune.slider,
1918
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
1919
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
1920
background-size: 50%;
1921
}
1922
.scale.slider,
1924
.scale.scale-has-marks-above.scale-has-marks-below.slider,
1925
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
1926
border-radius: 50%;
1927
background-repeat: no-repeat;
1928
background-position: center;
1929
}
1930
.scale.slider.slider,
1932
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
1933
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
1934
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
1935
}
1936
.scale.slider.slider:insensitive,
1938
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
1939
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
1940
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
1941
}
1942
.scale.slider:hover,
1944
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
1945
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
1946
background-color: rgba(1, 162, 153, 0.08);
1947
}
1948
.scale.slider:active,
1950
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
1951
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
1952
background-color: rgba(1, 162, 153, 0.16);
1953
}
1954
.scale.trough,
1956
.scale.scale-has-marks-above.scale-has-marks-below.trough,
1957
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
1958
margin: 13px 14px;
1959
background-color: alpha(currentColor, 0.24);
1960
}
1961
.scale.trough.highlight,
1963
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
1964
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
1965
background-color: #01A299;
1966
}
1967
.scale.trough.highlight:insensitive,
1969
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
1970
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
1971
background-color: alpha(currentColor, 0.24);
1972
}
1973
.scale.trough:insensitive,
1975
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
1976
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
1977
color: rgba(0, 0, 0, 0.38);
1978
}
1979
.scale.trough.vertical,
1981
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
1982
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
1983
margin: 14px 13px;
1984
}
1985
.scale.separator,
1987
.scale.scale-has-marks-above.scale-has-marks-below.separator,
1988
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
1989
color: alpha(currentColor, 0.24);
1990
}
1991
.scale.scale-has-marks-below.slider {
1993
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
1994
}
1995
.scale.scale-has-marks-below.slider:insensitive {
1997
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
1998
}
1999
.scale.scale-has-marks-above.slider {
2001
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2002
}
2003
.scale.scale-has-marks-above.slider:insensitive {
2005
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2006
}
2007
.scale.vertical.scale-has-marks-below.slider {
2009
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2010
}
2011
.scale.vertical.scale-has-marks-below.slider:insensitive {
2013
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2014
}
2015
.scale.vertical.scale-has-marks-above.slider {
2017
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2018
}
2019
.scale.vertical.scale-has-marks-above.slider:insensitive {
2021
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2022
}
2023
/*****************
2025
* Progress bars *
2026
*****************/
2027
GtkProgressBar {
2028
-GtkProgressBar-min-horizontal-bar-height: 4;
2029
-GtkProgressBar-min-vertical-bar-width: 4;
2030
padding: 0;
2031
font-size: smaller;
2032
color: rgba(0, 0, 0, 0.38);
2033
}
2034
GtkProgressBar.osd {
2036
-GtkProgressBar-xspacing: 0;
2037
-GtkProgressBar-yspacing: 0;
2038
-GtkProgressBar-min-horizontal-bar-height: 4;
2039
}
2040
GtkProgressBar.trough {
2042
border-radius: 0;
2043
background-color: rgba(66, 133, 244, 0.3);
2044
}
2045
GtkProgressBar.trough.osd {
2047
border-style: none;
2048
box-shadow: none;
2049
}
2050
.progressbar {
2052
border-radius: 0;
2053
background-color: #4285F4;
2054
}
2055
.progressbar.left {
2057
border-top-left-radius: 0;
2058
border-bottom-left-radius: 0;
2059
}
2060
.progressbar.right {
2062
border-top-right-radius: 0;
2063
border-bottom-right-radius: 0;
2064
}
2065
.progressbar.left.right {
2067
box-shadow: none;
2068
}
2069
.progressbar.vertical.bottom {
2071
border-bottom-left-radius: 0;
2072
border-bottom-right-radius: 0;
2073
box-shadow: none;
2074
}
2075
.progressbar.vertical.top {
2077
border-top-left-radius: 0;
2078
border-top-right-radius: 0;
2079
}
2080
.progressbar.osd {
2082
background-image: none;
2083
background-color: #4285F4;
2084
border-style: none;
2085
border-radius: 0;
2086
}
2087
/*************
2089
* Level Bar *
2090
*************/
2091
.level-bar {
2092
-GtkLevelBar-min-block-width: 36;
2093
-GtkLevelBar-min-block-height: 4;
2094
}
2095
.level-bar.vertical {
2097
-GtkLevelBar-min-block-width: 4;
2098
-GtkLevelBar-min-block-height: 36;
2099
}
2100
.level-bar.fill-block {
2102
background-color: #4285F4;
2103
}
2104
.level-bar.fill-block.indicator-discrete.horizontal {
2106
margin: 0 1px;
2107
}
2108
.level-bar.fill-block.indicator-discrete.vertical {
2110
margin: 1px 0;
2111
}
2112
.level-bar.fill-block.level-high {
2114
background-color: #34A853;
2115
}
2116
.level-bar.fill-block.level-low {
2118
background-color: #FBBC05;
2119
}
2120
.level-bar.fill-block.empty-fill-block {
2122
background-color: rgba(0, 0, 0, 0.12);
2123
}
2124
/**********
2126
* Frames *
2127
**********/
2128
.frame {
2129
border: 1px solid rgba(0, 0, 0, 0.12);
2130
padding: 0;
2131
}
2132
.frame.flat {
2134
border-style: none;
2135
}
2136
.frame.action-bar {
2138
padding: 6px;
2139
border-width: 1px 0 0;
2140
}
2141
GtkScrolledWindow GtkViewport.frame {
2143
border-style: none;
2144
}
2145
.separator {
2147
color: rgba(0, 0, 0, 0.12);
2148
}
2149
GtkFileChooserButton .separator.vertical,
2151
GtkFontButton .separator.vertical {
2152
-GtkWidget-wide-separators: true;
2153
}
2154
/*********
2156
* Lists *
2157
*********/
2158
.list {
2159
border-color: rgba(0, 0, 0, 0.12);
2160
background-color: #FFFFFF;
2161
}
2162
.list-row,
2164
.grid-child {
2165
padding: 2px;
2166
}
2167
.list-row.activatable, .view, column-header .button {
2169
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2170
box-shadow: inset 0 0 0 10000px transparent;
2171
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)), linear-gradient(to bottom, transparent);
2172
background-repeat: no-repeat;
2173
background-position: center, center;
2174
background-size: 240px 240px, auto;
2175
}
2176
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2178
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2179
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2180
}
2181
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2183
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2184
animation: list_ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
2185
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.08);
2186
}
2187
.list-row:selected .button:insensitive {
2189
color: rgba(255, 255, 255, 0.3);
2190
}
2191
.list-row:selected .button.flat {
2193
color: rgba(255, 255, 255, 0.7);
2194
}
2195
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2197
color: white;
2198
}
2199
.list-row:selected .button.flat:insensitive {
2201
color: rgba(255, 255, 255, 0.3);
2202
}
2203
/*********************
2205
* App Notifications *
2206
*********************/
2207
/*************
2208
* Expanders *
2209
*************/
2210
.expander {
2211
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2212
}
2213
.expander:dir(rtl) {
2215
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2216
}
2217
.expander:checked {
2219
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2220
}
2221
.expander:not(:hover):not(:active) {
2223
color: alpha(currentColor, 0.7);
2224
}
2225
.expander:selected {
2227
color: white;
2228
}
2229
/************
2231
* Calendar *
2232
***********/
2233
GtkCalendar {
2234
padding: 1px;
2235
border: 1px solid rgba(0, 0, 0, 0.12);
2236
color: rgba(0, 0, 0, 0.87);
2237
}
2238
GtkCalendar:insensitive {
2240
color: rgba(0, 0, 0, 0.38);
2241
}
2242
GtkCalendar:selected {
2244
border-radius: 5px;
2245
}
2246
GtkCalendar.header {
2248
border-style: none none solid;
2249
border-radius: 0;
2250
}
2251
GtkCalendar:inconsistent {
2253
color: rgba(0, 0, 0, 0.26);
2254
}
2255
GtkCalendar.highlight {
2257
font-size: smaller;
2258
color: rgba(0, 0, 0, 0.54);
2259
}
2260
/***********
2262
* Dialogs *
2263
***********/
2264
.message-dialog .dialog-action-area .button {
2265
padding: 8px;
2266
}
2267
.message-dialog.background {
2269
background-color: #FFFFFF;
2270
}
2271
.message-dialog .titlebar {
2273
border-style: none;
2274
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2275
background-color: #FFFFFF;
2276
}
2277
.message-dialog.csd.background {
2279
border-bottom-left-radius: 4px;
2280
border-bottom-right-radius: 4px;
2281
}
2282
.message-dialog.csd .dialog-action-area .button {
2284
padding: 9px 16px 10px;
2285
border-top: 1px solid rgba(0, 0, 0, 0.12);
2286
border-radius: 0;
2287
background-size: 240px 240px, auto;
2288
}
2289
.message-dialog.csd .dialog-action-area .button:first-child {
2291
border-radius: 0 0 0 4px;
2292
}
2293
.message-dialog.csd .dialog-action-area .button:last-child {
2295
border-radius: 0 0 4px 0;
2296
}
2297
GtkFileChooserDialog .dialog-action-box {
2299
border-top: 1px solid rgba(0, 0, 0, 0.12);
2300
}
2301
/***********
2303
* Sidebar *
2304
***********/
2305
.sidebar {
2306
border: none;
2307
background-color: #FAFAFA;
2308
}
2309
GtkSidebarRow.list-row {
2311
padding: 0px;
2312
}
2313
GtkSidebarRow .sidebar-revealer {
2315
padding: 4px 14px 4px 12px;
2316
}
2317
GtkSidebarRow .sidebar-icon {
2319
opacity: 0.7;
2320
}
2321
GtkSidebarRow .sidebar-icon:dir(ltr) {
2323
padding-right: 8px;
2324
}
2325
GtkSidebarRow .sidebar-icon:dir(rtl) {
2327
padding-left: 8px;
2328
}
2329
GtkSidebarRow .sidebar-label:dir(ltr) {
2331
padding-right: 2px;
2332
}
2333
GtkSidebarRow .sidebar-label:dir(rtl) {
2335
padding-left: 2px;
2336
}
2337
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2339
border: solid 1px #4285F4;
2340
}
2341
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2343
color: #01A299;
2344
}
2345
.sidebar-button.button.image-button {
2347
padding: 4px;
2348
}
2349
.sidebar-item {
2351
padding: 10px 4px;
2352
}
2353
.sidebar-item > .label {
2355
padding-left: 6px;
2356
padding-right: 6px;
2357
}
2358
/****************
2360
* File chooser *
2361
****************/
2362
GtkPlacesView .server-list-button > GtkImage {
2363
-gtk-icon-transform: rotate(0turn);
2364
}
2365
GtkPlacesView .server-list-button:checked > GtkImage {
2367
-gtk-icon-transform: rotate(-0.5turn);
2368
}
2369
/*********
2371
* Paned *
2372
*********/
2373
GtkPaned {
2374
-GtkPaned-handle-size: 1;
2375
-gtk-icon-source: none;
2376
margin: 0 8px 8px 0;
2377
}
2378
GtkPaned:dir(rtl) {
2380
margin-right: 0;
2381
margin-left: 8px;
2382
}
2383
GtkPaned .pane-separator {
2385
background-color: rgba(0, 0, 0, 0.12);
2386
}
2387
GtkPaned.wide {
2389
-GtkPaned-handle-size: 6;
2390
margin: 0;
2391
}
2392
GtkPaned.wide .pane-separator {
2394
background-color: transparent;
2395
border-style: none solid;
2396
border-color: rgba(0, 0, 0, 0.12);
2397
border-width: 1px;
2398
}
2399
GtkPaned.wide.vertical .pane-separator {
2401
border-style: solid none;
2402
}
2403
/**************
2405
* GtkInfoBar *
2406
**************/
2407
GtkInfoBar {
2408
border-style: none;
2409
}
2410
.info {
2412
background-color: #34A853;
2413
}
2414
.question {
2416
background-color: #4285F4;
2417
}
2418
.warning {
2420
background-color: #FBBC05;
2421
}
2422
.error {
2424
background-color: #EA4335;
2425
}
2426
.info,
2428
.question,
2429
.warning,
2430
.error {
2431
color: white;
2432
}
2433
.info .button:insensitive,
2435
.question .button:insensitive,
2436
.warning .button:insensitive,
2437
.error .button:insensitive {
2438
color: rgba(255, 255, 255, 0.3);
2439
}
2440
/************
2442
* Tooltips *
2443
************/
2444
.tooltip {
2445
color: white;
2446
padding: 4px;
2447
/* not working */
2448
border-radius: 4px;
2449
box-shadow: none;
2450
}
2451
.tooltip.background {
2453
background-color: rgba(97, 97, 97, 0.9);
2454
}
2455
.tooltip.window-frame.csd {
2457
background-color: transparent;
2458
}
2459
.tooltip * {
2461
padding: 0 2px;
2462
background-color: transparent;
2463
color: inherit;
2464
}
2465
/*****************
2467
* Color Chooser *
2468
*****************/
2469
GtkColorSwatch {
2470
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2471
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2472
}
2473
GtkColorSwatch:insensitive {
2475
opacity: 0.5;
2476
box-shadow: none;
2477
}
2478
GtkColorSwatch.top {
2480
border-top-left-radius: 4px;
2481
border-top-right-radius: 4px;
2482
}
2483
GtkColorSwatch.bottom {
2485
border-bottom-left-radius: 4px;
2486
border-bottom-right-radius: 4px;
2487
}
2488
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2490
border-top-left-radius: 4px;
2491
border-bottom-left-radius: 4px;
2492
}
2493
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2495
border-top-right-radius: 4px;
2496
border-bottom-right-radius: 4px;
2497
}
2498
GtkColorSwatch:only-child:not(.overlay) {
2500
border-radius: 4px;
2501
}
2502
GtkColorSwatch.top > .overlay {
2504
border-top-left-radius: 4px;
2505
border-top-right-radius: 4px;
2506
}
2507
GtkColorSwatch.bottom > .overlay {
2509
border-bottom-left-radius: 4px;
2510
border-bottom-right-radius: 4px;
2511
}
2512
GtkColorSwatch:first-child:not(.top) > .overlay {
2514
border-top-left-radius: 4px;
2515
border-bottom-left-radius: 4px;
2516
}
2517
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2519
border-top-right-radius: 4px;
2520
border-bottom-right-radius: 4px;
2521
}
2522
GtkColorSwatch:only-child > .overlay {
2524
border-radius: 4px;
2525
}
2526
GtkColorSwatch:hover {
2528
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2529
}
2530
GtkColorEditor GtkColorSwatch {
2532
border-radius: 4px;
2533
}
2534
GtkColorEditor GtkColorSwatch:hover {
2536
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2537
}
2538
GtkColorSwatch.color-dark {
2540
color: white;
2541
}
2542
GtkColorSwatch.color-light {
2544
color: rgba(0, 0, 0, 0.87);
2545
}
2546
GtkColorSwatch#add-color-button {
2548
background-image: linear-gradient(to right, #EA4335 25%, #FBBC05 25%, #FBBC05 50%, #34A853 50%, #34A853 75%, #4285F4 75%);
2549
color: white;
2550
}
2551
/********
2553
* Misc *
2554
********/
2555
.content-view {
2556
background-color: #F2F2F2;
2557
}
2558
.scale-popup .button {
2560
padding: 10px;
2561
}
2562
/**********************
2564
* Window Decorations *
2565
*********************/
2566
.window-frame {
2567
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
2568
border-radius: 4px 4px 0 0;
2569
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2570
/* this is used for the resize cursor area */
2571
margin: 8px;
2572
}
2573
.window-frame:backdrop {
2575
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2576
}
2577
.window-frame.tiled {
2579
border-radius: 0;
2580
}
2581
.window-frame.popup {
2583
box-shadow: none;
2584
}
2585
.window-frame.ssd {
2587
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2588
}
2589
.window-frame.csd.popup {
2591
border-radius: 4px;
2592
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2593
}
2594
.window-frame.csd.tooltip {
2596
border-radius: 4px;
2597
box-shadow: none;
2598
}
2599
.window-frame.csd.message-dialog {
2601
border-radius: 4px;
2602
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2603
}
2604
.window-frame.csd.message-dialog:backdrop {
2606
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2607
}
2608
.window-frame.solid-csd {
2610
border-radius: 0;
2611
margin: 0;
2612
background-color: #383838;
2613
box-shadow: none;
2614
}
2615
.header-bar .button.titlebutton:active,
2617
.titlebar .button.titlebutton:active {
2618
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));
2619
}
2620
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2622
background-color: #4285F4;
2623
color: white;
2624
}
2625
.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 {
2627
color: rgba(255, 255, 255, 0.5);
2628
}
2629
.monospace {
2631
font: Monospace;
2632
}
2633
/**********************
2635
* Touch Copy & Paste *
2636
*********************/
2637
.entry.cursor-handle,
2638
.cursor-handle {
2639
background-color: #01A299;
2640
background-image: none;
2641
box-shadow: none;
2642
border-style: none;
2643
}
2644
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2646
.cursor-handle.insertion-cursor:dir(ltr),
2647
.cursor-handle.insertion-cursor:dir(rtl) {
2648
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2649
}
2650
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2652
.cursor-handle.insertion-cursor:dir(ltr),
2653
.cursor-handle.insertion-cursor:dir(rtl) {
2654
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2655
}
2656
/* Decouple the font of context menus from their entry/textview */
2658
.context-menu {
2659
font: initial;
2660
}
2661
.touch-selection {
2663
font: initial;
2664
color: rgba(0, 0, 0, 0.87);
2665
background-color: #FFFFFF;
2666
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2667
}
2668
.touch-selection:backdrop {
2670
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2671
}
2672
.overshoot.top {
2674
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2675
background-repeat: no-repeat;
2676
background-position: center top;
2677
background-color: transparent;
2678
border: none;
2679
box-shadow: none;
2680
}
2681
.overshoot.bottom {
2683
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2684
background-repeat: no-repeat;
2685
background-position: center bottom;
2686
background-color: transparent;
2687
border: none;
2688
box-shadow: none;
2689
}
2690
.overshoot.left {
2692
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2693
background-repeat: no-repeat;
2694
background-position: left center;
2695
background-color: transparent;
2696
border: none;
2697
box-shadow: none;
2698
}
2699
.overshoot.right {
2701
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(123, 170, 247, 0.3)), to(transparent));
2702
background-repeat: no-repeat;
2703
background-position: right center;
2704
background-color: transparent;
2705
border: none;
2706
box-shadow: none;
2707
}
2708
.undershoot.top {
2710
background-color: transparent;
2711
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2712
padding-top: 1px;
2713
background-size: 12px 1px;
2714
background-repeat: repeat-x;
2715
background-origin: content-box;
2716
background-position: left top;
2717
}
2718
.undershoot.bottom {
2720
background-color: transparent;
2721
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2722
padding-bottom: 1px;
2723
background-size: 12px 1px;
2724
background-repeat: repeat-x;
2725
background-origin: content-box;
2726
background-position: left bottom;
2727
}
2728
.undershoot.left {
2730
background-color: transparent;
2731
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2732
padding-left: 1px;
2733
background-size: 1px 12px;
2734
background-repeat: repeat-y;
2735
background-origin: content-box;
2736
background-position: left top;
2737
}
2738
.undershoot.right {
2740
background-color: transparent;
2741
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2742
padding-right: 1px;
2743
background-size: 1px 12px;
2744
background-repeat: repeat-y;
2745
background-origin: content-box;
2746
background-position: right top;
2747
}
2748
.floating-bar {
2750
padding: 3px 0 4px;
2751
border-width: 1px;
2752
border-style: solid solid none;
2753
border-color: rgba(0, 0, 0, 0.12);
2754
border-radius: 5px 5px 0 0;
2755
background-color: rgba(255, 255, 255, 0.9);
2756
background-clip: padding-box;
2757
}
2758
.floating-bar.left {
2760
border-left-style: none;
2761
border-top-left-radius: 0;
2762
}
2763
.floating-bar.right {
2765
border-right-style: none;
2766
border-top-right-radius: 0;
2767
}
2768
.floating-bar .button {
2770
padding: 4px;
2771
}
2772
/************
2774
* Nautilus *
2775
************/
2776
EelEditableLabel.entry {
2777
transition: none;
2778
}
2779
.nautilus-canvas-item.dim-label, .nautilus-canvas-item.label.separator, .titlebar .nautilus-canvas-item.subtitle,
2781
.header-bar .nautilus-canvas-item.subtitle,
2782
.nautilus-list-dim-label {
2783
color: rgba(0, 0, 0, 0.54);
2784
}
2785
.nautilus-canvas-item.dim-label:selected, .nautilus-canvas-item.label.separator:selected, .titlebar .nautilus-canvas-item.subtitle:selected,
2787
.header-bar .nautilus-canvas-item.subtitle:selected,
2788
.nautilus-list-dim-label:selected {
2789
color: rgba(255, 255, 255, 0.7);
2790
}
2791
.nautilus-desktop.nautilus-canvas-item {
2793
color: white;
2794
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2795
}
2796
.nautilus-desktop.nautilus-canvas-item:selected {
2798
text-shadow: none;
2799
}
2800
/* Toolbar */
2802
@keyframes needs_attention_keyframes {
2803
0% {
2804
background-color: transparent;
2805
}
2806
50% {
2807
background-color: alpha(currentColor, 0.24);
2808
}
2809
100% {
2810
background-color: transparent;
2811
}
2812
}
2813
.nautilus-operations-button-needs-attention {
2815
color: #01A299;
2816
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2817
}
2818
.nautilus-operations-button-needs-attention-multiple {
2820
color: #01A299;
2821
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
2822
animation-iteration-count: 2;
2823
}
2824
.disk-space-display.unknown {
2826
background-color: #FBBC05;
2827
}
2828
.disk-space-display.used {
2830
background-color: #4285F4;
2831
}
2832
.disk-space-display.free {
2834
background-color: alpha(currentColor, 0.24);
2835
color: rgba(0, 0, 0, 0.38);
2836
}
2837
/* View */
2839
/********
2840
* Nemo *
2841
*******/
2842
NemoWindow .nemo-inactive-pane .view, NemoWindow .nemo-inactive-pane iconview {
2843
background-color: #FAFAFA;
2844
color: rgba(0, 0, 0, 0.87);
2845
}
2846
NemoWindow .sidebar .cell {
2848
background-color: #F2F2F2;
2849
color: rgba(0, 0, 0, 0.87);
2850
}
2851
NemoWindow .sidebar .cell:selected {
2853
color: white;
2854
background-color: #4285F4;
2855
}
2856
.nemo-desktop.nemo-canvas-item {
2858
color: white;
2859
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2860
}
2861
.nemo-desktop.nemo-canvas-item:selected {
2863
text-shadow: none;
2864
}
2865
/**************
2867
* Tweak Tool *
2868
**************/
2869
.tweak-categories {
2870
background-color: #FAFAFA;
2871
background-image: linear-gradient(to bottom, #FAFAFA);
2872
}
2873
.tweak-categories .separator {
2875
-GtkWidget-wide-separators: true;
2876
color: transparent;
2877
}
2878
/************
2880
* Software *
2881
************/
2882
.button.install-progress:insensitive {
2883
background-color: alpha(currentColor, 0.24);
2884
}
2885
/***********
2887
* Builder *
2888
***********/
2889
GbTerminalView {
2890
background-color: #FFFFFF;
2891
}
2892
/***********
2894
* Firefox *
2895
***********/
2896
.menubar {
2897
color: rgba(255, 255, 255, 0.7);
2898
}
2899
.menubar:hover {
2901
color: white;
2902
}
2903
/***********
2905
* Synapse *
2906
***********/
2907
SynapseGuiMatchListView GtkWidget:selected {
2908
background-color: #4285F4;
2909
}
2910
/*********
2912
* Unity *
2913
*********/
2914
UnityDecoration {
2915
-UnityDecoration-extents: 28px 0 0 0;
2916
-UnityDecoration-input-extents: 8px;
2917
-UnityDecoration-shadow-offset-x: 0;
2918
-UnityDecoration-shadow-offset-y: 3px;
2919
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
2920
-UnityDecoration-active-shadow-radius: 18px;
2921
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
2922
-UnityDecoration-inactive-shadow-radius: 6px;
2923
-UnityDecoration-glow-size: 8px;
2924
-UnityDecoration-glow-color: #4285F4;
2925
-UnityDecoration-title-indent: 4px;
2926
-UnityDecoration-title-fade: 32px;
2927
-UnityDecoration-title-alignment: 0.0;
2928
}
2929
UnityDecoration.top {
2931
padding: 0 2px;
2932
border-style: none;
2933
border-radius: 4px 4px 0 0;
2934
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
2935
background-color: #383838;
2936
color: white;
2937
}
2938
UnityDecoration.top:backdrop {
2940
color: rgba(255, 255, 255, 0.7);
2941
}
2942
UnityDecoration.menuitem,
2944
UnityDecoration .menuitem {
2945
color: rgba(255, 255, 255, 0.7);
2946
}
2947
UnityDecoration.menubar.menuitem:hover,
2949
UnityDecoration.menubar .menuitem *:hover {
2950
box-shadow: inset 0 -2px currentColor;
2951
background-color: transparent;
2952
color: white;
2953
}
2954
.background:not(.csd) :not(.titlebar) .header-bar {
2956
border-radius: 0;
2957
box-shadow: none;
2958
}
2959
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
2961
border-style: none;
2962
}
2963
UnityPanelWidget,
2965
.unity-panel {
2966
background-color: #212121;
2967
background-image: linear-gradient(to bottom, #212121);
2968
color: white;
2969
}
2970
UnityPanelWidget:backdrop,
2972
.unity-panel:backdrop {
2973
color: rgba(255, 255, 255, 0.7);
2974
}
2975
.unity-panel.menuitem,
2977
.unity-panel .menuitem {
2978
color: rgba(255, 255, 255, 0.7);
2979
}
2980
.unity-panel.menubar.menuitem:hover,
2982
.unity-panel.menubar .menuitem *:hover {
2983
box-shadow: inset 0 -2px currentColor;
2984
background-color: transparent;
2985
color: white;
2986
}
2987
@keyframes playbackmenuitem_spinner {
2989
to {
2990
-gtk-icon-transform: rotate(1turn);
2991
}
2992
}
2993
.menu IdoPlaybackMenuItem.menuitem:active {
2995
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
2996
animation: playbackmenuitem_spinner 1s infinite linear;
2997
color: #4285F4;
2998
}
2999
/* GTK NAMED COLORS
3001
----------------
3002
use responsibly! */
3003
/*
3004
widget text/foreground color */
3005
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
3006
/*
3007
text color for entries, views and content in general */
3008
@define-color theme_text_color rgba(0, 0, 0, 0.87);
3009
/*
3010
widget base background color */
3011
@define-color theme_bg_color #F2F2F2;
3012
/*
3013
text widgets and the like base background color */
3014
@define-color theme_base_color #FFFFFF;
3015
/*
3016
base background color of selections */
3017
@define-color theme_selected_bg_color #4285F4;
3018
/*
3019
text/foreground color of selections */
3020
@define-color theme_selected_fg_color white;
3021
/*
3022
base background color of insensitive widgets */
3023
@define-color insensitive_bg_color #F2F2F2;
3024
/*
3025
text foreground color of insensitive widgets */
3026
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3027
/*
3028
insensitive text widgets and the like base background color */
3029
@define-color insensitive_base_color #FAFAFA;
3030
/*
3031
widget text/foreground color on backdrop windows */
3032
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3033
/*
3034
text color for entries, views and content in general on backdrop windows */
3035
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3036
/*
3037
widget base background color on backdrop windows */
3038
@define-color theme_unfocused_bg_color #F2F2F2;
3039
/*
3040
text widgets and the like base background color on backdrop windows */
3041
@define-color theme_unfocused_base_color #FFFFFF;
3042
/*
3043
base background color of selections on backdrop windows */
3044
@define-color theme_unfocused_selected_bg_color #4285F4;
3045
/*
3046
text/foreground color of selections on backdrop windows */
3047
@define-color theme_unfocused_selected_fg_color white;
3048
/*
3049
insensitive color on backdrop windows */
3050
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3051
/*
3052
widgets main borders color */
3053
@define-color borders rgba(0, 0, 0, 0.12);
3054
/*
3055
widgets main borders color on backdrop windows */
3056
@define-color unfocused_borders rgba(0, 0, 0, 0.12);
3057
/*
3058
these are pretty self explicative */
3059
@define-color warning_color #FBBC05;
3060
@define-color error_color #EA4335;
3061
@define-color success_color #34A853;
3062
/*
3063
these colors are exported for the window manager and shouldn't be used in applications,
3064
read if you used those and something break with a version upgrade you're on your own... */
3065
@define-color wm_title white;
3066
@define-color wm_unfocused_title rgba(255, 255, 255, 0.7);
3067
@define-color wm_highlight rgba(255, 255, 255, 0.1);
3068
@define-color wm_bg #383838;
3069
/*
3070
FIXME this is really an API */
3071
@define-color content_view_bg #FFFFFF;
3072
@define-color placeholder_text_color #757575;
3073