ASCII text, with very long lines (668)
1
@keyframes ripple_effect {
2
from {
3
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(alpha(currentColor, 0.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
4
}
5
to {
6
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.15));
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.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.15));
13
}
14
to {
15
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.15));
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.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
22
}
23
to {
24
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
25
}
26
}
27
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
32
-GtkTextView-error-underline-color: #DD2C00;
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: #338DD6;
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.3);
55
outline-offset: -4px;
56
outline-radius: 2px;
57
}
58
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: #EEEEEE;
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: #EEEEEE;
79
color: rgba(0, 0, 0, 0.87);
80
}
81
.gtkstyle-fallback:prelight {
83
background-color: #e1e1e1;
84
color: rgba(0, 0, 0, 0.87);
85
}
86
.gtkstyle-fallback:active {
88
background-color: #d5d5d5;
89
color: rgba(0, 0, 0, 0.87);
90
}
91
.gtkstyle-fallback:insensitive {
93
background-color: #EEEEEE;
94
color: rgba(0, 0, 0, 0.38);
95
}
96
.gtkstyle-fallback:selected {
98
background-color: #338DD6;
99
color: #FFFFFF;
100
}
101
.view {
103
background-color: #FFFFFF;
104
color: rgba(0, 0, 0, 0.87);
105
}
106
.view:hover, .view:active, .view:selected, GtkCalendar:selected {
108
border-radius: 2px;
109
}
110
.view:insensitive {
112
color: rgba(0, 0, 0, 0.38);
113
}
114
.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
116
border: 1px solid #40C4FF;
117
background-color: rgba(64, 196, 255, 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.6;
147
padding: 5px 12px 6px;
148
font-weight: 500;
149
}
150
GtkAssistant .sidebar .label.highlight {
152
opacity: 1;
153
}
154
GtkTextView {
156
background-color: #F5F5F5;
157
}
158
.grid-child {
160
padding: 4px;
161
border-radius: 2px;
162
}
163
.popover.osd, .app-notification,
165
.app-notification.frame, .osd .scale-popup, .floating-bar, .osd {
166
opacity: 0.9;
167
}
168
/*********************
170
* Spinner Animation *
171
*********************/
172
@keyframes spin {
173
to {
174
-gtk-icon-transform: rotate(1turn);
175
}
176
}
177
.spinner {
179
background-color: blue;
180
background-image: none;
181
opacity: 0;
182
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
183
}
184
.spinner:active {
186
opacity: 1;
187
animation: spin 1s linear infinite;
188
}
189
.spinner:active:insensitive {
191
opacity: 0.5;
192
}
193
/****************
195
* Text Entries *
196
****************/
197
.entry {
198
padding: 7px 8px 8px;
199
border-radius: 2px;
200
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
201
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
202
background-color: #FFFFFF;
203
color: rgba(0, 0, 0, 0.87);
204
}
205
.entry:focus {
207
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
208
}
209
.entry:insensitive {
211
color: rgba(0, 0, 0, 0.38);
212
background-color: #F5F5F5;
213
}
214
.entry.flat, .notebook GtkGrid > .entry {
216
border-radius: 0;
217
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
218
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#338DD6), to(transparent)) 0 0 0/0 0 0px;
219
border-radius: 0;
220
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
221
background-color: transparent;
222
color: rgba(0, 0, 0, 0.87);
223
}
224
.entry.flat:focus, .notebook GtkGrid > .entry:focus {
226
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#338DD6), to(transparent)) 0 0 2/0 0 2px;
227
box-shadow: inset 0 -2px #338DD6;
228
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 270ms;
229
}
230
.entry.flat:insensitive, .notebook GtkGrid > .entry:insensitive {
232
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
233
background-color: transparent;
234
color: rgba(0, 0, 0, 0.38);
235
}
236
.entry.image.left {
238
padding-left: 2px;
239
}
240
.entry.image.right {
242
padding-right: 2px;
243
}
244
.entry.progressbar, GtkTreeView.view.progressbar, GtkTreeView.view.trough {
246
margin: 2px;
247
border-style: none none solid;
248
border-width: 2px;
249
border-color: #338DD6;
250
border-radius: 0;
251
box-shadow: none;
252
background-color: transparent;
253
background-image: none;
254
}
255
.linked > .entry.flat, .notebook GtkGrid.linked > .entry,
257
.linked.vertical > .entry.flat,
258
.notebook GtkGrid.linked.vertical > .entry {
259
border-radius: 0;
260
}
261
.entry.error {
263
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
264
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
265
background-color: #DD2C00;
266
color: #FFFFFF;
267
}
268
.entry.error:focus {
270
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
271
}
272
.entry.error:insensitive {
274
color: rgba(0, 0, 0, 0.38);
275
background-color: #F5F5F5;
276
}
277
.entry.error.flat, .notebook GtkGrid > .error.entry {
279
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
280
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#DD2C00), to(transparent)) 0 0 0/0 0 0px;
281
border-radius: 0;
282
box-shadow: inset 0 -1px #DD2C00;
283
background-color: transparent;
284
color: rgba(0, 0, 0, 0.87);
285
}
286
.entry.error.flat:focus, .notebook GtkGrid > .error.entry:focus {
288
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#DD2C00), to(transparent)) 0 0 2/0 0 2px;
289
box-shadow: inset 0 -2px #DD2C00;
290
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 270ms;
291
}
292
.entry.error.flat:insensitive, .notebook GtkGrid > .error.entry:insensitive {
294
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
295
background-color: transparent;
296
color: rgba(0, 0, 0, 0.38);
297
}
298
.entry.warning {
300
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
301
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
302
background-color: #FF6D00;
303
color: #FFFFFF;
304
}
305
.entry.warning:focus {
307
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
308
}
309
.entry.warning:insensitive {
311
color: rgba(0, 0, 0, 0.38);
312
background-color: #F5F5F5;
313
}
314
.entry.warning.flat, .notebook GtkGrid > .warning.entry {
316
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
317
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#FF6D00), to(transparent)) 0 0 0/0 0 0px;
318
border-radius: 0;
319
box-shadow: inset 0 -1px #FF6D00;
320
background-color: transparent;
321
color: rgba(0, 0, 0, 0.87);
322
}
323
.entry.warning.flat:focus, .notebook GtkGrid > .warning.entry:focus {
325
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#FF6D00), to(transparent)) 0 0 2/0 0 2px;
326
box-shadow: inset 0 -2px #FF6D00;
327
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0 270ms;
328
}
329
.entry.warning.flat:insensitive, .notebook GtkGrid > .warning.entry:insensitive {
331
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
332
background-color: transparent;
333
color: rgba(0, 0, 0, 0.38);
334
}
335
.entry.image:not(:hover):not(:active) {
337
color: alpha(currentColor, 0.75);
338
}
339
.entry.image:insensitive {
341
color: alpha(currentColor, 0.6);
342
}
343
GtkTreeView .entry:not(:selected), GtkTreeView .entry:not(:selected):focus {
345
padding: 2px;
346
border-image: none;
347
border-radius: 0;
348
box-shadow: none;
349
background-color: #FFFFFF;
350
}
351
/***********
353
* Buttons *
354
***********/
355
@keyframes needs_attention {
356
from {
357
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#009688), to(transparent));
358
}
359
to {
360
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#009688), to(transparent));
361
}
362
}
363
.button {
366
padding: 7px 10px 8px;
367
border-radius: 2px;
368
background-repeat: no-repeat;
369
background-position: center, center;
370
background-size: 90px 90px, auto;
371
font-weight: 500;
372
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
373
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
374
background-color: #FAFAFA;
375
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
376
color: rgba(0, 0, 0, 0.62);
377
}
378
.button:hover {
381
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
382
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
383
color: rgba(0, 0, 0, 0.87);
384
}
385
.button:active {
388
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
389
animation: ripple_effect 270ms cubic-bezier(0, 0, 0.2, 1) forwards;
390
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
391
color: rgba(0, 0, 0, 0.87);
392
}
393
.button:insensitive {
396
box-shadow: none;
397
background-color: alpha(currentColor, 0.3);
398
color: rgba(0, 0, 0, 0.26);
399
}
400
.button:insensitive > .label {
403
color: inherit;
404
}
405
.button:checked {
408
background-color: #338DD6;
409
color: #FFFFFF;
410
}
411
.button:checked:insensitive {
414
background-color: alpha(currentColor, 0.3);
415
color: rgba(51, 141, 214, 0.5);
416
}
417
.button:checked:insensitive > .label {
420
color: inherit;
421
}
422
.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),
424
.header-bar .button:not(.suggested-action):not(.destructive-action), .frame.action-bar .button:not(.suggested-action):not(.destructive-action), .app-notification .button,
425
.app-notification.frame .button,
426
.button.flat {
427
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
428
box-shadow: none;
429
background-color: transparent;
430
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
431
color: alpha(currentColor, 0.75);
432
}
433
.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),
435
.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,
436
.button.flat:hover {
437
box-shadow: none;
438
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.15));
439
color: currentColor;
440
}
441
.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),
443
.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,
444
.button.flat:active {
445
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
446
animation: flat_ripple_effect 270ms cubic-bezier(0, 0, 0.2, 1) forwards;
447
box-shadow: none;
448
color: currentColor;
449
}
450
.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),
452
.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,
453
.button.flat:insensitive {
454
box-shadow: none;
455
background-color: transparent;
456
color: alpha(currentColor, 0.375);
457
}
458
.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, .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,
460
.button.flat:insensitive > .label {
461
color: inherit;
462
}
463
.toolbar:not(.search-bar) .button:checked, .titlebar .button:checked:not(.suggested-action):not(.destructive-action),
465
.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,
466
.button.flat:checked {
467
background-color: alpha(currentColor, 0.3);
468
color: currentColor;
469
}
470
.toolbar:not(.search-bar) .button:checked:insensitive, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action),
472
.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,
473
.button.flat:checked:insensitive {
474
background-color: alpha(currentColor, 0.3);
475
color: alpha(currentColor, 0.5);
476
}
477
.toolbar:not(.search-bar) .button:checked:insensitive > .label, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label, .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,
479
.button.flat:checked:insensitive > .label {
480
color: inherit;
481
}
482
.button.osd.image-button {
485
padding: 16px;
486
background-size: 60px 60px, auto;
487
}
488
.button.osd:insensitive {
491
opacity: 0;
492
}
493
.button.suggested-action {
496
background-color: #009688;
497
color: #FFFFFF;
498
}
499
.button.suggested-action:insensitive {
502
box-shadow: none;
503
background-color: alpha(currentColor, 0.3);
504
color: rgba(0, 0, 0, 0.38);
505
}
506
.button.suggested-action:insensitive > .label {
509
color: inherit;
510
}
511
.button.suggested-action:checked {
514
background-color: #4db6ac;
515
}
516
.toolbar:not(.search-bar) .suggested-action.button, .titlebar .suggested-action.button:not(.suggested-action):not(.destructive-action),
518
.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,
519
.button.suggested-action.flat {
520
background-color: transparent;
521
color: #009688;
522
}
523
.toolbar:not(.search-bar) .suggested-action.button:insensitive, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action),
525
.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,
526
.button.suggested-action.flat:insensitive {
527
box-shadow: none;
528
background-color: transparent;
529
color: alpha(currentColor, 0.5);
530
}
531
.toolbar:not(.search-bar) .suggested-action.button:insensitive > .label, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .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,
533
.button.suggested-action.flat:insensitive > .label {
534
color: inherit;
535
}
536
.toolbar:not(.search-bar) .suggested-action.button:checked, .titlebar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action),
538
.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,
539
.button.suggested-action.flat:checked {
540
background-color: alpha(currentColor, 0.3);
541
}
542
.button.destructive-action {
545
background-color: #FF5252;
546
color: #FFFFFF;
547
}
548
.button.destructive-action:insensitive {
551
box-shadow: none;
552
background-color: alpha(currentColor, 0.3);
553
color: rgba(0, 0, 0, 0.38);
554
}
555
.button.destructive-action:insensitive > .label {
558
color: inherit;
559
}
560
.button.destructive-action:checked {
563
background-color: #ff8686;
564
}
565
.toolbar:not(.search-bar) .destructive-action.button, .titlebar .destructive-action.button:not(.suggested-action):not(.destructive-action),
567
.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,
568
.button.destructive-action.flat {
569
background-color: transparent;
570
color: #FF5252;
571
}
572
.toolbar:not(.search-bar) .destructive-action.button:insensitive, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action),
574
.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,
575
.button.destructive-action.flat:insensitive {
576
box-shadow: none;
577
background-color: transparent;
578
color: alpha(currentColor, 0.5);
579
}
580
.toolbar:not(.search-bar) .destructive-action.button:insensitive > .label, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label, .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,
582
.button.destructive-action.flat:insensitive > .label {
583
color: inherit;
584
}
585
.toolbar:not(.search-bar) .destructive-action.button:checked, .titlebar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action),
587
.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,
588
.button.destructive-action.flat:checked {
589
background-color: alpha(currentColor, 0.3);
590
}
591
.button.text-button,
594
GtkScaleButton.button.text-button,
595
GtkVolumeButton.button.text-button {
596
padding-left: 16px;
597
padding-right: 16px;
598
}
599
.button.text-button.image-button {
602
padding: 7px 10px 8px;
603
outline-radius: 2px;
604
border-radius: 2px;
605
background-size: 90px 90px, auto;
606
}
607
.button.text-button.image-button .label:first-child {
610
padding-left: 6px;
611
}
612
.button.text-button.image-button .label:last-child {
615
padding-right: 6px;
616
}
617
.stack-switcher >
619
.button {
620
outline-offset: -4px;
621
}
622
.stack-switcher >
624
.button > .label {
625
padding-left: 6px;
626
padding-right: 6px;
627
}
628
.stack-switcher >
630
.button > GtkImage {
631
padding-left: 6px;
632
padding-right: 6px;
633
padding-top: 3px;
634
padding-bottom: 3px;
635
}
636
.stack-switcher > .button.text-button {
638
padding: 7px 10px 8px;
639
}
640
.stack-switcher >
642
.button.image-button {
643
padding: 7px 4px;
644
}
645
.stack-switcher >
647
.button.needs-attention:checked > .label,
648
.stack-switcher >
649
.button.needs-attention:checked > GtkImage {
650
animation: none;
651
background-image: none;
652
}
653
.primary-toolbar
655
.button {
656
icon-shadow: none;
657
}
658
.toolbar:not(.search-bar) .linked > .button, .titlebar .linked > .button:not(.suggested-action):not(.destructive-action),
660
.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,
661
.toolbar:not(.search-bar) .linked.vertical > .button,
662
.titlebar .linked.vertical > .button:not(.suggested-action):not(.destructive-action),
663
.header-bar .linked.vertical > .button:not(.suggested-action):not(.destructive-action),
664
.frame.action-bar .linked.vertical > .button:not(.suggested-action):not(.destructive-action),
665
.app-notification .linked.vertical > .button, .linked >
666
.button.flat,
667
.linked.vertical >
668
.button.flat {
669
border-radius: 2px;
670
}
671
.toolbar:not(.search-bar) .linked > .image-button.button, .titlebar .linked > .image-button.button:not(.suggested-action):not(.destructive-action),
673
.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,
674
.toolbar:not(.search-bar) .linked.vertical > .image-button.button,
675
.titlebar .linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
676
.header-bar .linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
677
.frame.action-bar .linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
678
.app-notification .linked.vertical > .image-button.button, .linked >
679
.button.flat.image-button,
680
.linked.vertical >
681
.button.flat.image-button {
682
outline-radius: 9999px;
683
border-radius: 9999px;
684
}
685
.toolbar:not(.search-bar) .linked > .text-button.image-button.button, .titlebar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
687
.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,
688
.toolbar:not(.search-bar) .linked.vertical > .text-button.image-button.button,
689
.titlebar .linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
690
.header-bar .linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
691
.frame.action-bar .linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
692
.app-notification .linked.vertical > .text-button.image-button.button, .linked > .button.flat.text-button.image-button,
693
.linked.vertical > .button.flat.text-button.image-button {
694
outline-radius: 2px;
695
border-radius: 2px;
696
}
697
.button.image-button, .inline-toolbar .button, .spinbutton .button, .notebook tab .button, GtkScaleButton.button,
700
GtkVolumeButton.button, .header-bar .button.titlebutton,
701
.titlebar .button.titlebutton, .nautilus-circular-button {
702
padding: 10px;
703
outline-radius: 100px;
704
border-radius: 100px;
705
background-size: 45px 45px, auto;
706
}
707
.stack-switcher > .button.needs-attention > .label,
709
.stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > .label {
710
animation: needs_attention 270ms cubic-bezier(0, 0, 0.2, 1) forwards;
711
background-repeat: no-repeat;
712
background-position: right 3px;
713
background-size: 6px 6px;
714
}
715
.stack-switcher > .button.needs-attention > .label:dir(rtl),
717
.stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > .label:dir(rtl) {
718
background-position: left 3px;
719
}
720
.linked > .entry, .linked > .button, .linked > GtkComboBox > .the-button-in-the-combobox:dir(ltr), .linked > GtkComboBox > .the-button-in-the-combobox:dir(rtl),
722
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(ltr),
723
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(rtl) {
724
outline-radius: 2px;
725
border-radius: 0;
726
}
727
.linked > .entry:first-child, .linked > .button:first-child, .linked > GtkComboBox:first-child > .the-button-in-the-combobox,
729
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
730
border-top-left-radius: 2px;
731
border-bottom-left-radius: 2px;
732
}
733
.linked > .entry:last-child, .linked > .button:last-child, .linked > GtkComboBox:last-child > .the-button-in-the-combobox,
735
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
736
border-top-right-radius: 2px;
737
border-bottom-right-radius: 2px;
738
}
739
.linked > .entry:only-child, .linked > .button:only-child, .linked > GtkComboBox:only-child > .the-button-in-the-combobox,
741
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
742
border-radius: 2px;
743
}
744
.linked.vertical > .entry, .linked.vertical > .button, .linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
746
.linked.vertical > GtkComboBox > .the-button-in-the-combobox {
747
outline-radius: 2px;
748
border-radius: 0;
749
}
750
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
752
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox {
753
border-top-left-radius: 2px;
754
border-top-right-radius: 2px;
755
}
756
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
758
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox {
759
border-bottom-left-radius: 2px;
760
border-bottom-right-radius: 2px;
761
}
762
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
764
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox {
765
border-radius: 2px;
766
}
767
/* menu buttons */
769
GtkColorButton.button {
770
padding: 7px 8px 8px;
771
}
772
GtkColorButton.button GtkColorSwatch:first-child:last-child {
774
border-radius: 2px;
775
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
776
}
777
/*********
779
* Links *
780
*********/
781
*:link, .button:link, .button:visited {
782
color: #338DD6;
783
}
784
*:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited {
786
color: #338DD6;
787
}
788
*:link:visited, .button:visited {
790
color: #E040FB;
791
}
792
*:link:visited:hover, .button:visited:hover, *:link:visited:active, .button:visited:active {
794
color: #E040FB;
795
}
796
*:selected *:link:visited, *:selected .button:visited {
798
color: #add1ef;
799
}
800
*:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link,
802
.header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
803
color: #d6e8f7;
804
}
805
.button:link > .label, .button:visited > .label {
807
text-decoration-line: underline;
808
}
809
/*****************
811
* GtkSpinButton *
812
*****************/
813
.spinbutton .button {
814
padding: 4px;
815
border: solid 6px transparent;
816
color: rgba(0, 0, 0, 0.54);
817
}
818
.spinbutton .button:hover, .spinbutton .button:active {
820
color: rgba(0, 0, 0, 0.87);
821
}
822
.spinbutton .button:insensitive {
824
color: rgba(0, 0, 0, 0.26);
825
}
826
.spinbutton .button:active {
828
background-color: alpha(currentColor, 0.3);
829
}
830
.spinbutton.vertical .button {
832
padding-top: 10px;
833
padding-bottom: 10px;
834
border: none;
835
}
836
.spinbutton.vertical .button:first-child {
838
border-radius: 2px 2px 0 0;
839
}
840
.spinbutton.vertical .button:last-child {
842
border-radius: 0 0 2px 2px;
843
}
844
/**************
846
* ComboBoxes *
847
**************/
848
GtkComboBox {
849
-GtkComboBox-arrow-scaling: 0.5;
850
-GtkComboBox-shadow-type: none;
851
}
852
GtkComboBox > .the-button-in-the-combobox {
854
padding: 5px 6px 6px;
855
}
856
GtkComboBox .menu {
858
padding: 2px 0;
859
}
860
GtkComboBox .menu .menuitem {
862
padding: 5px 6px 6px;
863
}
864
GtkComboBox .separator.vertical {
866
-GtkWidget-wide-separators: true;
867
}
868
GtkComboBox.combobox-entry .entry:dir(ltr) {
870
border-top-right-radius: 0;
871
border-bottom-right-radius: 0;
872
}
873
GtkComboBox.combobox-entry .entry:dir(rtl) {
875
border-top-left-radius: 0;
876
border-bottom-left-radius: 0;
877
}
878
GtkComboBox.combobox-entry .button {
880
padding: 10px;
881
}
882
GtkComboBox.combobox-entry .button:dir(ltr) {
884
border-top-left-radius: 0;
885
border-bottom-left-radius: 0;
886
}
887
GtkComboBox.combobox-entry .button:dir(rtl) {
889
border-top-right-radius: 0;
890
border-bottom-right-radius: 0;
891
}
892
/************
894
* Toolbars *
895
************/
896
.toolbar {
897
-GtkWidget-window-dragging: true;
898
padding: 4px;
899
background-color: #EEEEEE;
900
}
901
.osd .toolbar, .toolbar.osd, .app-notification,
903
.app-notification.frame {
904
transition: border-image 180ms cubic-bezier(0, 0, 0.2, 1);
905
padding: 6px;
906
border-style: solid;
907
border-width: 8px;
908
border-image: -gtk-scaled(url("assets/box-shadow.png"), url("assets/box-shadow@2.png")) 10/10px stretch;
909
border-radius: 2px;
910
background-color: #FFFFFF;
911
}
912
.osd .toolbar:backdrop, .toolbar.osd:backdrop, .app-notification:backdrop {
914
border-image: -gtk-scaled(url("assets/box-shadow-backdrop.png"), url("assets/box-shadow-backdrop@2.png")) 10/10px stretch;
915
}
916
.inline-toolbar {
918
padding: 6px;
919
border-style: solid;
920
border-width: 0 1px 1px;
921
border-color: rgba(0, 0, 0, 0.12);
922
background-color: #F5F5F5;
923
}
924
.search-bar, .location-bar {
926
padding: 6px;
927
border-style: solid;
928
border-width: 0 0 1px;
929
border-color: rgba(0, 0, 0, 0.12);
930
background-color: #EEEEEE;
931
background-clip: border-box;
932
}
933
/***************
935
* Header bars *
936
***************/
937
.titlebar,
938
.header-bar {
939
transition: background-color 180ms cubic-bezier(0, 0, 0.2, 1);
940
padding: 6px;
941
border-radius: 2px 2px 0 0;
942
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.4);
943
background-color: #E0E0E0;
944
color: rgba(0, 0, 0, 0.87);
945
}
946
.titlebar:backdrop,
948
.header-bar:backdrop {
949
color: rgba(0, 0, 0, 0.54);
950
}
951
.titlebar .title,
953
.header-bar .title {
954
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
955
padding-left: 12px;
956
padding-right: 12px;
957
font-weight: bold;
958
}
959
.titlebar .subtitle,
961
.header-bar .subtitle {
962
transition: all 270ms cubic-bezier(0, 0, 0.2, 1);
963
padding-left: 12px;
964
padding-right: 12px;
965
font-size: smaller;
966
}
967
.titlebar .header-bar-separator,
969
.titlebar > GtkBox > .separator.vertical,
970
.header-bar .header-bar-separator,
971
.header-bar > GtkBox > .separator.vertical {
972
-GtkWidget-wide-separators: true;
973
-GtkWidget-separator-width: 1px;
974
border-style: solid;
975
border-width: 0 1px;
976
border-color: rgba(0, 0, 0, 0.12);
977
}
978
.titlebar .button:not(.suggested-action):not(.destructive-action),
980
.header-bar .button:not(.suggested-action):not(.destructive-action) {
981
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#338DD6), to(transparent)) 0 0 0/0 0 0px;
982
}
983
.titlebar .button:not(.suggested-action):not(.destructive-action):checked,
985
.header-bar .button:not(.suggested-action):not(.destructive-action):checked {
986
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#338DD6), to(transparent)) 0 0 2/0 0 2px;
987
}
988
.titlebar .button:not(.suggested-action):not(.destructive-action):checked, .titlebar .button:not(.suggested-action):not(.destructive-action):checked:insensitive,
990
.header-bar .button:not(.suggested-action):not(.destructive-action):checked,
991
.header-bar .button:not(.suggested-action):not(.destructive-action):checked:insensitive {
992
background-color: transparent;
993
}
994
.titlebar .button.suggested-action:insensitive, .titlebar .button.destructive-action:insensitive,
996
.header-bar .button.suggested-action:insensitive,
997
.header-bar .button.destructive-action:insensitive {
998
color: alpha(currentColor, 0.5);
999
}
1000
.titlebar .button.suggested-action:insensitive > .label, .titlebar .button.destructive-action:insensitive > .label,
1002
.header-bar .button.suggested-action:insensitive > .label,
1003
.header-bar .button.destructive-action:insensitive > .label {
1004
color: inherit;
1005
}
1006
.titlebar.selection-mode,
1008
.header-bar.selection-mode {
1009
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);
1010
background-color: #338DD6;
1011
color: #FFFFFF;
1012
}
1013
.titlebar.selection-mode:backdrop,
1015
.header-bar.selection-mode:backdrop {
1016
color: rgba(255, 255, 255, 0.7);
1017
}
1018
.titlebar.selection-mode .button,
1020
.header-bar.selection-mode .button {
1021
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#FFFFFF), to(transparent)) 0 0 0/0 0 0px;
1022
color: rgba(255, 255, 255, 0.7);
1023
}
1024
.titlebar.selection-mode .button:hover, .titlebar.selection-mode .button:active, .titlebar.selection-mode .button:checked,
1026
.header-bar.selection-mode .button:hover,
1027
.header-bar.selection-mode .button:active,
1028
.header-bar.selection-mode .button:checked {
1029
color: #FFFFFF;
1030
}
1031
.titlebar.selection-mode .button:checked,
1033
.header-bar.selection-mode .button:checked {
1034
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#FFFFFF), to(transparent)) 0 0 2/0 0 2px;
1035
color: #FFFFFF;
1036
}
1037
.titlebar.selection-mode .button:checked:insensitive,
1039
.header-bar.selection-mode .button:checked:insensitive {
1040
color: rgba(255, 255, 255, 0.5);
1041
}
1042
.titlebar.selection-mode .button:checked:insensitive > .label,
1044
.header-bar.selection-mode .button:checked:insensitive > .label {
1045
color: inherit;
1046
}
1047
.titlebar.selection-mode .button.suggested-action,
1049
.header-bar.selection-mode .button.suggested-action {
1050
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
1051
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1052
background-color: #FAFAFA;
1053
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
1054
color: rgba(0, 0, 0, 0.62);
1055
}
1056
.titlebar.selection-mode .button.suggested-action:hover,
1058
.header-bar.selection-mode .button.suggested-action:hover {
1059
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1060
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
1061
color: rgba(0, 0, 0, 0.87);
1062
}
1063
.titlebar.selection-mode .button.suggested-action:active,
1065
.header-bar.selection-mode .button.suggested-action:active {
1066
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1), background-image 0;
1067
animation: ripple_effect 270ms cubic-bezier(0, 0, 0.2, 1) forwards;
1068
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1069
color: rgba(0, 0, 0, 0.87);
1070
}
1071
.titlebar.selection-mode .button.suggested-action:insensitive,
1073
.header-bar.selection-mode .button.suggested-action:insensitive {
1074
box-shadow: none;
1075
background-color: alpha(currentColor, 0.3);
1076
color: rgba(0, 0, 0, 0.26);
1077
}
1078
.titlebar.selection-mode .button.suggested-action:insensitive > .label,
1080
.header-bar.selection-mode .button.suggested-action:insensitive > .label {
1081
color: inherit;
1082
}
1083
.titlebar.selection-mode .selection-menu,
1085
.header-bar.selection-mode .selection-menu {
1086
padding-left: 16px;
1087
padding-right: 16px;
1088
}
1089
.titlebar.selection-mode .selection-menu GtkArrow,
1091
.header-bar.selection-mode .selection-menu GtkArrow {
1092
-GtkArrow-arrow-scaling: 1;
1093
}
1094
.titlebar.selection-mode .selection-menu .arrow,
1096
.header-bar.selection-mode .selection-menu .arrow {
1097
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1098
}
1099
.tiled .titlebar, .maximized .titlebar, .tiled
1101
.header-bar, .maximized
1102
.header-bar {
1103
border-radius: 0;
1104
box-shadow: none;
1105
}
1106
.titlebar.default-decoration,
1108
.header-bar.default-decoration {
1109
padding: 6px;
1110
border-width: 0;
1111
}
1112
.titlebar.default-decoration .button,
1114
.header-bar.default-decoration .button {
1115
padding: 4px;
1116
}
1117
/************
1119
* Pathbars *
1120
************/
1121
.path-bar .button {
1122
padding: 7px 6px 8px;
1123
}
1124
.path-bar .button .label:last-child {
1126
padding-left: 2px;
1127
}
1128
.path-bar .button .label:first-child {
1130
padding-right: 2px;
1131
}
1132
.path-bar .button GtkImage {
1134
padding-top: 1px;
1135
}
1136
.path-bar .button GtkImage:only-child {
1138
padding-right: 4px;
1139
padding-left: 4px;
1140
}
1141
/**************
1143
* Tree Views *
1144
**************/
1145
GtkTreeView.view {
1146
-GtkTreeView-grid-line-width: 1;
1147
-GtkTreeView-grid-line-pattern: '';
1148
-GtkTreeView-tree-line-width: 1;
1149
-GtkTreeView-tree-line-pattern: '';
1150
-GtkTreeView-expander-size: 16;
1151
border-left-color: alpha(currentColor, 0.3);
1152
border-top-color: rgba(0, 0, 0, 0.12);
1153
border-radius: 0;
1154
}
1155
GtkTreeView.view:hover, GtkTreeView.view:active, GtkTreeView.view:selected {
1157
border-radius: 0;
1158
}
1159
GtkTreeView.view.dnd {
1161
border-style: solid none;
1162
border-width: 1px;
1163
border-color: rgba(29, 80, 121, 0.935);
1164
}
1165
GtkTreeView.view.expander {
1167
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1168
}
1169
GtkTreeView.view.expander:dir(rtl) {
1171
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1172
}
1173
GtkTreeView.view.expander:checked {
1175
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1176
}
1177
GtkTreeView.view.expander:selected {
1179
color: rgba(255, 255, 255, 0.7);
1180
}
1181
GtkTreeView.view.expander:selected:hover, GtkTreeView.view.expander:selected:active {
1183
color: #FFFFFF;
1184
}
1185
GtkTreeView.view.progressbar {
1187
border-width: 4px;
1188
}
1189
GtkTreeView.view.progressbar:selected {
1191
border-color: currentColor;
1192
}
1193
GtkTreeView.view.trough {
1195
border-width: 4px;
1196
border-color: rgba(51, 141, 214, 0.3);
1197
}
1198
GtkTreeView.view.trough:selected {
1200
border-color: alpha(currentColor, 0.3);
1201
}
1202
column-header .button {
1204
padding: 3px 6px 4px;
1205
border-style: none solid solid none;
1206
border-width: 1px;
1207
border-color: rgba(0, 0, 0, 0.12);
1208
border-radius: 0;
1209
box-shadow: none;
1210
background-color: #FFFFFF;
1211
}
1212
column-header .button:hover, column-header .button:active {
1214
box-shadow: none;
1215
}
1216
column-header .button:insensitive {
1218
background-color: #FFFFFF;
1219
}
1220
column-header:last-child .button, column-header:last-child.button {
1222
border-right-style: none;
1223
}
1224
column-header.button.dnd, column-header .button.dnd {
1226
border-left-style: solid;
1227
background-clip: padding-box;
1228
color: #338DD6;
1229
}
1230
/*********
1232
* Menus *
1233
*********/
1234
.menubar {
1235
-GtkWidget-window-dragging: true;
1236
padding: 0;
1237
background-color: #E0E0E0;
1238
}
1239
.menubar > .menuitem {
1241
transition: all 180ms cubic-bezier(0, 0, 0.2, 1);
1242
padding: 4px 8px;
1243
color: rgba(0, 0, 0, 0.54);
1244
}
1245
.menubar > .menuitem:hover {
1247
transition: none;
1248
background-color: alpha(currentColor, 0.15);
1249
color: rgba(0, 0, 0, 0.87);
1250
}
1251
.menubar > .menuitem:insensitive {
1253
color: rgba(0, 0, 0, 0.26);
1254
box-shadow: none;
1255
}
1256
.menu {
1258
margin: 4px 0;
1259
padding: 4px 0;
1260
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
1261
background-color: #FFFFFF;
1262
border: 1px solid rgba(0, 0, 0, 0.12);
1263
}
1264
.csd .menu {
1266
border: none;
1267
border-radius: 2px;
1268
}
1269
.menu .menuitem {
1271
transition: all 180ms cubic-bezier(0, 0, 0.2, 1);
1272
padding: 3px 4px 4px;
1273
font: initial;
1274
text-shadow: none;
1275
}
1276
.menu .menuitem:hover {
1278
transition: none;
1279
background-color: alpha(currentColor, 0.15);
1280
}
1281
.menu .menuitem:insensitive {
1283
color: rgba(0, 0, 0, 0.38);
1284
}
1285
.menu .menuitem.arrow {
1287
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1288
}
1289
.menu .menuitem.arrow:dir(rtl) {
1291
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1292
}
1293
.menu.button {
1295
border-style: none;
1296
border-radius: 0;
1297
box-shadow: none;
1298
}
1299
.menu.button.top {
1301
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
1302
}
1303
.menu.button.bottom {
1305
border-top: 1px solid rgba(0, 0, 0, 0.12);
1306
}
1307
.menu.button:hover {
1309
background-color: alpha(currentColor, 0.15);
1310
}
1311
.menu.button:insensitive {
1313
background-color: transparent;
1314
border-color: transparent;
1315
}
1316
.menuitem .accelerator {
1318
color: alpha(currentColor, 0.6);
1319
}
1320
.csd.popup {
1322
border-radius: 2px;
1323
}
1324
/***************
1326
* Popovers *
1327
***************/
1328
.popover {
1329
transition: box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
1330
padding: 2px;
1331
border: 1px solid;
1332
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1333
border-radius: 3px;
1334
background-color: #FAFAFA;
1335
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1336
}
1337
.popover:backdrop {
1339
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1340
}
1341
.popover > .list,
1343
.popover > .view,
1344
.popover > .toolbar,
1345
.popover.osd > .toolbar {
1346
border-style: none;
1347
border-image: none;
1348
background-color: transparent;
1349
}
1350
.popover .button.flat {
1352
padding: 5px 8px 6px;
1353
background-color: transparent;
1354
background-size: 160px 160px, auto;
1355
color: rgba(0, 0, 0, 0.87);
1356
font: initial;
1357
}
1358
.popover .linked > .button {
1360
border-radius: 2px;
1361
}
1362
.popover .linked > .button:checked {
1364
background-color: #338DD6;
1365
color: #FFFFFF;
1366
}
1367
.popover .linked > .button.image-button {
1369
padding: 8px;
1370
background-size: 90px 90px, auto;
1371
}
1372
/*****************
1374
* Notebooks and *
1375
* Tabs *
1376
*****************/
1377
.notebook {
1378
padding: 0;
1379
background-color: #FFFFFF;
1380
-GtkNotebook-initial-gap: 8;
1381
-GtkNotebook-arrow-spacing: 5;
1382
-GtkNotebook-tab-curvature: 0;
1383
-GtkNotebook-tab-overlap: 1;
1384
-GtkNotebook-has-tab-gap: false;
1385
-GtkWidget-focus-padding: 0;
1386
-GtkWidget-focus-line-width: 0;
1387
}
1388
.notebook.frame {
1390
border: 1px solid rgba(0, 0, 0, 0.12);
1391
}
1392
.notebook.frame.top {
1394
border-top-width: 0;
1395
}
1396
.notebook.frame.bottom {
1398
border-bottom-width: 0;
1399
}
1400
.notebook.frame.right {
1402
border-right-width: 0;
1403
}
1404
.notebook.frame.left {
1406
border-left-width: 0;
1407
}
1408
.notebook.header {
1410
background-color: #EEEEEE;
1411
}
1412
.notebook.header.frame {
1414
border: 1px solid rgba(0, 0, 0, 0.12);
1415
}
1416
.notebook.header.frame.top {
1418
border-bottom-width: 0;
1419
}
1420
.notebook.header.frame.bottom {
1422
border-top-width: 0;
1423
}
1424
.notebook.header.frame.right {
1426
border-left-width: 0;
1427
}
1428
.notebook.header.frame.left {
1430
border-right-width: 0;
1431
}
1432
.notebook.header.top {
1434
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
1435
}
1436
.notebook.header.bottom {
1438
box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
1439
}
1440
.notebook.header.right {
1442
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
1443
}
1444
.notebook.header.left {
1446
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
1447
}
1448
.notebook tab {
1450
border-width: 0;
1451
border-style: solid;
1452
border-color: transparent;
1453
background-color: transparent;
1454
outline-offset: 0;
1455
/* works for testnotebookdnd, but there's a superfluous border
1456
in gedit or web, commented out for now, needs gtk fixes
1457
&.reorderable-page {
1458
&.top {
1459
padding-top: ($vt_vpadding - 1px);
1460
border-top-width: 1px;
1461
border-left-width: 1px;
1462
border-right-width: 1px;
1463
}
1464
&.bottom {
1465
padding-bottom: ($vt_vpadding - 1px);
1466
border-bottom-width: 1px;
1467
border-left-width: 1px;
1468
border-right-width: 1px;
1469
}
1470
&.left {
1471
padding-left: ($ht_hpadding - 1px);
1472
border-left-width: 1px;
1473
border-top-width: 1px;
1474
border-bottom-width: 1px;
1475
}
1476
&.right {
1477
padding-right: ($ht_hpadding - 1px);
1478
border-right-width: 1px;
1479
border-top-width: 1px;
1480
border-bottom-width: 1px;
1481
}
1482
}
1483
*/
1484
}
1485
.notebook tab.top, .notebook tab.bottom {
1487
padding: 8px 12px;
1488
}
1489
.notebook tab.left, .notebook tab.right {
1491
padding: 8px 12px;
1492
}
1493
.notebook tab.reorderable-page {
1495
-GtkNotebook-tab-overlap: 1;
1496
}
1497
.notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
1499
padding-left: 12px;
1500
padding-right: 12px;
1501
border-left-width: 1px;
1502
border-right-width: 1px;
1503
}
1504
.notebook tab.reorderable-page.left, .notebook tab.reorderable-page.right {
1506
border-bottom-width: 1px;
1507
border-top-width: 1px;
1508
}
1509
.notebook tab.top:hover, .notebook tab.top.prelight-page {
1511
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
1512
}
1513
.notebook tab.top:active, .notebook tab.top.active-page {
1515
box-shadow: inset 0 -2px #338DD6;
1516
}
1517
.notebook tab.bottom:hover, .notebook tab.bottom.prelight-page {
1519
box-shadow: inset 0 2px alpha(currentColor, 0.3);
1520
}
1521
.notebook tab.bottom:active, .notebook tab.bottom.active-page {
1523
box-shadow: inset 0 2px #338DD6;
1524
}
1525
.notebook tab.left:hover, .notebook tab.left.prelight-page {
1527
box-shadow: inset -2px 0 alpha(currentColor, 0.3);
1528
}
1529
.notebook tab.left:active, .notebook tab.left.active-page {
1531
box-shadow: inset -2px 0 #338DD6;
1532
}
1533
.notebook tab.right:hover, .notebook tab.right.prelight-page {
1535
box-shadow: inset 2px 0 alpha(currentColor, 0.3);
1536
}
1537
.notebook tab.right:active, .notebook tab.right.active-page {
1539
box-shadow: inset 2px 0 #338DD6;
1540
}
1541
.notebook tab.reorderable-page.top {
1543
border-color: transparent;
1544
}
1545
.notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
1547
border-color: rgba(0, 0, 0, 0.12);
1548
border-bottom-width: 0;
1549
border-bottom-color: transparent;
1550
background-color: #F5F5F5;
1551
}
1552
.notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
1554
border-color: rgba(0, 0, 0, 0.12);
1555
border-bottom-width: 0;
1556
border-bottom-color: transparent;
1557
background-color: #FFFFFF;
1558
}
1559
.notebook tab.reorderable-page.bottom {
1561
border-color: transparent;
1562
}
1563
.notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
1565
border-color: rgba(0, 0, 0, 0.12);
1566
border-top-width: 0;
1567
border-top-color: transparent;
1568
background-color: #F5F5F5;
1569
}
1570
.notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
1572
border-color: rgba(0, 0, 0, 0.12);
1573
border-top-width: 0;
1574
border-top-color: transparent;
1575
background-color: #FFFFFF;
1576
}
1577
.notebook tab.reorderable-page.left {
1579
border-color: transparent;
1580
}
1581
.notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
1583
border-color: rgba(0, 0, 0, 0.12);
1584
border-right-width: 0;
1585
border-right-color: transparent;
1586
background-color: #F5F5F5;
1587
}
1588
.notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
1590
border-color: rgba(0, 0, 0, 0.12);
1591
border-right-width: 0;
1592
border-right-color: transparent;
1593
background-color: #FFFFFF;
1594
}
1595
.notebook tab.reorderable-page.right {
1597
border-color: transparent;
1598
}
1599
.notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
1601
border-color: rgba(0, 0, 0, 0.12);
1602
border-left-width: 0;
1603
border-left-color: transparent;
1604
background-color: #F5F5F5;
1605
}
1606
.notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
1608
border-color: rgba(0, 0, 0, 0.12);
1609
border-left-width: 0;
1610
border-left-color: transparent;
1611
background-color: #FFFFFF;
1612
}
1613
.notebook tab .label {
1615
padding: 0 2px;
1616
font-weight: 500;
1617
color: rgba(0, 0, 0, 0.54);
1618
}
1619
.notebook tab .prelight-page .label, .notebook tab .label.prelight-page {
1621
color: rgba(0, 0, 0, 0.87);
1622
}
1623
.notebook tab .active-page .label, .notebook tab .label.active-page {
1625
color: rgba(0, 0, 0, 0.87);
1626
}
1627
.notebook tab .button {
1629
padding: 0;
1630
background-size: 30px 30px, auto;
1631
}
1632
.notebook tab .button > GtkImage {
1634
padding: 4px;
1635
}
1636
.notebook.arrow:not(:hover):not(:active) {
1638
color: alpha(currentColor, 0.75);
1639
}
1640
.notebook.arrow:insensitive {
1642
color: rgba(0, 0, 0, 0.38);
1643
}
1644
/**************
1646
* Scrollbars *
1647
**************/
1648
.scrollbar {
1649
-GtkRange-slider-width: 17px;
1650
-GtkRange-trough-border: 0;
1651
-GtkScrollbar-has-backward-stepper: false;
1652
-GtkScrollbar-has-forward-stepper: false;
1653
-GtkScrollbar-min-slider-length: 32px;
1654
-GtkRange-stepper-spacing: 0;
1655
-GtkRange-trough-under-steppers: 1;
1656
}
1657
.scrollbar .button {
1659
border: none;
1660
}
1661
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1663
-GtkRange-slider-width: 12px;
1664
}
1665
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
1667
margin: 3px;
1668
border: 1px solid rgba(255, 255, 255, 0.3);
1669
}
1670
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
1672
border-style: none;
1673
background-color: transparent;
1674
}
1675
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
1677
background-color: rgba(255, 255, 255, 0.9);
1678
}
1679
.scrollbar .trough {
1681
border: 1px none rgba(0, 0, 0, 0.12);
1682
background-color: #FFFFFF;
1683
background-clip: padding-box;
1684
}
1685
.scrollbar .slider {
1687
background-color: rgba(0, 0, 0, 0.38);
1688
}
1689
.scrollbar .slider:hover {
1691
background-color: rgba(0, 0, 0, 0.54);
1692
}
1693
.scrollbar .slider:active {
1695
background-color: rgba(0, 0, 0, 0.87);
1696
}
1697
.scrollbar .slider:insensitive {
1699
opacity: 0.5;
1700
}
1701
.scrollbar .slider {
1703
border-radius: 100px;
1704
margin: 4px;
1705
}
1706
.scrollbar.fine-tune .slider {
1708
margin: 6px;
1709
}
1710
.scrollbar.vertical .slider {
1712
margin-left: 5px;
1713
}
1714
.scrollbar.vertical .slider:dir(rtl) {
1716
margin-left: 4px;
1717
margin-right: 5px;
1718
}
1719
.scrollbar.vertical.fine-tune .slider {
1721
margin-left: 7px;
1722
}
1723
.scrollbar.vertical.fine-tune .slider:dir(rtl) {
1725
margin-left: 6px;
1726
margin-right: 7px;
1727
}
1728
.scrollbar.vertical .trough {
1730
border-left-style: solid;
1731
}
1732
.scrollbar.vertical .trough:dir(rtl) {
1734
border-left-style: none;
1735
border-right-style: solid;
1736
}
1737
.scrollbar.horizontal .slider {
1739
margin-top: 5px;
1740
}
1741
.scrollbar.horizontal.fine-tune .slider {
1743
margin-top: 7px;
1744
}
1745
.scrollbar.horizontal .trough {
1747
border-top-style: solid;
1748
}
1749
.scrollbars-junction,
1751
.scrollbars-junction.frame {
1752
border-style: solid none none solid;
1753
background-color: #FFFFFF;
1754
}
1755
.scrollbars-junction:dir(rtl),
1757
.scrollbars-junction.frame:dir(rtl) {
1758
border-style: solid solid none none;
1759
}
1760
/**********
1762
* Switch *
1763
**********/
1764
GtkSwitch {
1765
-GtkSwitch-slider-width: 20px;
1766
-GtkSwitch-slider-height: 20px;
1767
outline-offset: -4px;
1768
outline-radius: 100px;
1769
font-size: 0;
1770
}
1771
GtkSwitch.trough {
1773
border: 8px solid transparent;
1774
border-radius: 100px;
1775
background-color: alpha(currentColor, 0.3);
1776
}
1777
GtkSwitch.trough:insensitive {
1779
color: alpha(currentColor, 0.5);
1780
}
1781
GtkSwitch.trough:active {
1783
background-color: rgba(0, 150, 136, 0.5);
1784
}
1785
GtkSwitch.trough:active:insensitive {
1787
background-color: rgba(0, 150, 136, 0.3);
1788
}
1789
GtkSwitch.slider {
1791
padding: 5px 4px;
1792
border-radius: 100px;
1793
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
1794
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1795
background-color: #FFFFFF;
1796
color: rgba(0, 0, 0, 0.87);
1797
}
1798
GtkSwitch.slider:hover {
1800
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1801
}
1802
GtkSwitch.slider:active {
1804
background-color: #009688;
1805
}
1806
GtkSwitch.slider:insensitive {
1808
color: rgba(0, 0, 0, 0.38);
1809
background-color: #F5F5F5;
1810
}
1811
/*************************
1813
* Check and Radio items *
1814
*************************/
1815
.check {
1816
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1817
}
1818
.check:hover {
1820
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1821
}
1822
.check:active {
1824
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1825
}
1826
.check:insensitive {
1828
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1829
}
1830
.check:inconsistent {
1832
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1833
}
1834
.check:inconsistent:hover {
1836
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1837
}
1838
.check:inconsistent:active {
1840
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1841
}
1842
.check:inconsistent:insensitive {
1844
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1845
}
1846
.check:checked {
1848
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1849
}
1850
.check:checked:hover {
1852
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1853
}
1854
.check:checked:active {
1856
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1857
}
1858
.check:checked:insensitive {
1860
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1861
}
1862
.menu .menuitem.check {
1864
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1865
}
1866
.menu .menuitem.check:insensitive {
1868
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1869
}
1870
.menu .menuitem.check:inconsistent {
1872
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1873
}
1874
.menu .menuitem.check:inconsistent:insensitive {
1876
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1877
}
1878
.menu .menuitem.check:checked {
1880
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1881
}
1882
.menu .menuitem.check:checked:insensitive {
1884
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1885
}
1886
.radio {
1888
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1889
}
1890
.radio:hover {
1892
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1893
}
1894
.radio:active {
1896
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1897
}
1898
.radio:insensitive {
1900
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1901
}
1902
.radio:inconsistent {
1904
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1905
}
1906
.radio:inconsistent:hover {
1908
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1909
}
1910
.radio:inconsistent:active {
1912
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1913
}
1914
.radio:inconsistent:insensitive {
1916
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1917
}
1918
.radio:checked {
1920
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1921
}
1922
.radio:checked:hover {
1924
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1925
}
1926
.radio:checked:active {
1928
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1929
}
1930
.radio:checked:insensitive {
1932
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1933
}
1934
.menu .menuitem.radio {
1936
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1937
}
1938
.menu .menuitem.radio:insensitive {
1940
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1941
}
1942
.menu .menuitem.radio:inconsistent {
1944
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1945
}
1946
.menu .menuitem.radio:inconsistent:insensitive {
1948
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1949
}
1950
.menu .menuitem.radio:checked {
1952
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1953
}
1954
.menu .menuitem.radio:checked:insensitive {
1956
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1957
}
1958
.view.content-view.check:not(.list) {
1960
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1961
background-color: transparent;
1962
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1963
}
1964
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1966
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1967
}
1968
.view.content-view.check:checked:not(.list) {
1970
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
1971
background-color: transparent;
1972
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1973
}
1974
.view.content-view.check:checked:not(.list):hover, .view.content-view.check:checked:not(.list):active {
1976
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1977
}
1978
GtkCheckButton.text-button, GtkRadioButton.text-button {
1980
padding: 2px 4px;
1981
outline-offset: 0;
1982
}
1983
/************
1985
* GtkScale *
1986
************/
1987
.scale,
1988
.scale.scale-has-marks-above.scale-has-marks-below,
1989
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1990
-GtkScale-slider-length: 20;
1991
-GtkRange-slider-width: 20;
1992
-GtkRange-trough-border: 2;
1993
outline-offset: -8px;
1994
outline-radius: 100px;
1995
}
1996
.scale.fine-tune.slider,
1998
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
1999
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
2000
background-size: 60%;
2001
}
2002
.scale.slider.slider,
2004
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
2005
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
2006
border-style: none;
2007
border-radius: 0;
2008
background-color: transparent;
2009
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
2010
background-repeat: no-repeat;
2011
background-position: center;
2012
background-size: 70%;
2013
box-shadow: none;
2014
}
2015
.scale.slider.slider:insensitive,
2017
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
2018
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
2019
border-style: none;
2020
border-radius: 0;
2021
background-color: transparent;
2022
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
2023
background-repeat: no-repeat;
2024
background-position: center;
2025
background-size: 70%;
2026
box-shadow: none;
2027
}
2028
.scale.slider:hover,
2030
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
2031
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
2032
background-size: 80%;
2033
}
2034
.scale.slider:active,
2036
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
2037
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
2038
background-size: 90%;
2039
}
2040
.scale.trough,
2042
.scale.scale-has-marks-above.scale-has-marks-below.trough,
2043
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
2044
margin: 11px 12px;
2045
background-color: alpha(currentColor, 0.3);
2046
}
2047
.scale.trough.highlight,
2049
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
2050
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
2051
background-color: #009688;
2052
}
2053
.scale.trough.highlight:insensitive,
2055
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
2056
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
2057
background-color: alpha(currentColor, 0.3);
2058
}
2059
.scale.trough:insensitive,
2061
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
2062
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
2063
color: rgba(0, 0, 0, 0.38);
2064
}
2065
.scale.trough.vertical,
2067
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
2068
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
2069
margin: 12px 11px;
2070
}
2071
.scale.separator,
2073
.scale.scale-has-marks-above.scale-has-marks-below.separator,
2074
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
2075
color: alpha(currentColor, 0.3);
2076
}
2077
.scale.scale-has-marks-below {
2079
-GtkScale-slider-length: 20;
2080
-GtkRange-slider-width: 25;
2081
-GtkRange-trough-border: 2;
2082
}
2083
.scale.scale-has-marks-below.slider {
2085
border-style: none;
2086
border-radius: 0;
2087
background-color: transparent;
2088
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
2089
background-repeat: no-repeat;
2090
background-position: center;
2091
box-shadow: none;
2092
}
2093
.scale.scale-has-marks-below.slider:insensitive {
2095
border-style: none;
2096
border-radius: 0;
2097
background-color: transparent;
2098
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
2099
background-repeat: no-repeat;
2100
background-position: center;
2101
box-shadow: none;
2102
}
2103
.scale.scale-has-marks-above {
2105
-GtkScale-slider-length: 20;
2106
-GtkRange-slider-width: 25;
2107
-GtkRange-trough-border: 2;
2108
}
2109
.scale.scale-has-marks-above.slider {
2111
border-style: none;
2112
border-radius: 0;
2113
background-color: transparent;
2114
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2115
background-repeat: no-repeat;
2116
background-position: center;
2117
box-shadow: none;
2118
}
2119
.scale.scale-has-marks-above.slider:insensitive {
2121
border-style: none;
2122
border-radius: 0;
2123
background-color: transparent;
2124
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2125
background-repeat: no-repeat;
2126
background-position: center;
2127
box-shadow: none;
2128
}
2129
.scale.vertical.scale-has-marks-below {
2131
-GtkScale-slider-length: 20;
2132
-GtkRange-slider-width: 25;
2133
-GtkRange-trough-border: 2;
2134
}
2135
.scale.vertical.scale-has-marks-below.slider {
2137
border-style: none;
2138
border-radius: 0;
2139
background-color: transparent;
2140
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2141
background-repeat: no-repeat;
2142
background-position: center;
2143
box-shadow: none;
2144
}
2145
.scale.vertical.scale-has-marks-below.slider:insensitive {
2147
border-style: none;
2148
border-radius: 0;
2149
background-color: transparent;
2150
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2151
background-repeat: no-repeat;
2152
background-position: center;
2153
box-shadow: none;
2154
}
2155
.scale.vertical.scale-has-marks-above {
2157
-GtkScale-slider-length: 20;
2158
-GtkRange-slider-width: 25;
2159
-GtkRange-trough-border: 2;
2160
}
2161
.scale.vertical.scale-has-marks-above.slider {
2163
border-style: none;
2164
border-radius: 0;
2165
background-color: transparent;
2166
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2167
background-repeat: no-repeat;
2168
background-position: center;
2169
box-shadow: none;
2170
}
2171
.scale.vertical.scale-has-marks-above.slider:insensitive {
2173
border-style: none;
2174
border-radius: 0;
2175
background-color: transparent;
2176
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2177
background-repeat: no-repeat;
2178
background-position: center;
2179
box-shadow: none;
2180
}
2181
.scale.scale-has-marks-above .trough {
2183
margin: 16px 12px 11px;
2184
}
2185
.scale.scale-has-marks-below .trough {
2187
margin: 11px 12px 16px;
2188
}
2189
.scale.vertical.scale-has-marks-above .trough {
2191
margin: 12px 11px 12px 16px;
2192
}
2193
.scale.vertical.scale-has-marks-below .trough {
2195
margin: 12px 16px 12px 11px;
2196
}
2197
/*****************
2199
* Progress bars *
2200
*****************/
2201
GtkProgressBar {
2202
-GtkProgressBar-min-horizontal-bar-height: 4;
2203
-GtkProgressBar-min-vertical-bar-width: 4;
2204
padding: 0;
2205
font-size: smaller;
2206
color: rgba(0, 0, 0, 0.38);
2207
}
2208
GtkProgressBar.osd {
2210
-GtkProgressBar-xspacing: 0;
2211
-GtkProgressBar-yspacing: 0;
2212
-GtkProgressBar-min-horizontal-bar-height: 4;
2213
}
2214
GtkProgressBar.trough {
2216
border-radius: 0;
2217
background-color: rgba(51, 141, 214, 0.3);
2218
}
2219
GtkProgressBar.trough.osd {
2221
border-style: none;
2222
box-shadow: none;
2223
}
2224
.progressbar {
2226
border-radius: 0;
2227
background-color: #338DD6;
2228
}
2229
.progressbar.left {
2231
border-top-left-radius: 0;
2232
border-bottom-left-radius: 0;
2233
}
2234
.progressbar.right {
2236
border-top-right-radius: 0;
2237
border-bottom-right-radius: 0;
2238
}
2239
.progressbar.left.right {
2241
box-shadow: none;
2242
}
2243
.progressbar.vertical.bottom {
2245
border-bottom-left-radius: 0;
2246
border-bottom-right-radius: 0;
2247
box-shadow: none;
2248
}
2249
.progressbar.vertical.top {
2251
border-top-left-radius: 0;
2252
border-top-right-radius: 0;
2253
}
2254
.progressbar.osd {
2256
background-image: none;
2257
background-color: #338DD6;
2258
border-style: none;
2259
border-radius: 0;
2260
}
2261
/*************
2263
* Level Bar *
2264
*************/
2265
.level-bar {
2266
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2267
color: rgba(0, 0, 0, 0.38);
2268
-GtkLevelBar-min-block-width: 36;
2269
-GtkLevelBar-min-block-height: 4;
2270
}
2271
.level-bar.vertical {
2273
-GtkLevelBar-min-block-width: 4;
2274
-GtkLevelBar-min-block-height: 36;
2275
}
2276
.level-bar.trough {
2278
padding: 2px;
2279
border-radius: 2px;
2280
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
2281
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2282
background-color: #FFFFFF;
2283
color: rgba(0, 0, 0, 0.87);
2284
}
2285
.level-bar.trough:insensitive {
2287
color: rgba(0, 0, 0, 0.38);
2288
background-color: #F5F5F5;
2289
}
2290
.level-bar.trough.indicator-discrete.horizontal {
2292
padding: 2px 1px;
2293
}
2294
.level-bar.trough.indicator-discrete.vertical {
2296
padding: 1px 2px;
2297
}
2298
.level-bar.fill-block {
2300
background-color: #338DD6;
2301
border-radius: 0;
2302
box-shadow: none;
2303
}
2304
.level-bar.fill-block.indicator-discrete.horizontal {
2306
margin: 0 1px;
2307
}
2308
.level-bar.fill-block.indicator-discrete.vertical {
2310
margin: 1px 0;
2311
}
2312
.level-bar.fill-block.level-high {
2314
background-color: #00C853;
2315
}
2316
.level-bar.fill-block.level-low {
2318
background-color: #FF6D00;
2319
}
2320
.level-bar.fill-block.empty-fill-block {
2322
background-color: alpha(currentColor, 0.3);
2323
}
2324
/**********
2326
* Frames *
2327
**********/
2328
.frame {
2329
border: 1px solid rgba(0, 0, 0, 0.12);
2330
padding: 0;
2331
}
2332
.frame.flat {
2334
border-style: none;
2335
}
2336
.frame.action-bar {
2338
padding: 6px;
2339
border-width: 1px 0 0;
2340
}
2341
GtkScrolledWindow GtkViewport.frame {
2343
border-style: none;
2344
}
2345
.separator {
2347
color: rgba(0, 0, 0, 0.12);
2348
}
2349
GtkFileChooserButton .separator.vertical,
2351
GtkFontButton .separator.vertical {
2352
-GtkWidget-wide-separators: true;
2353
}
2354
/*********
2356
* Lists *
2357
*********/
2358
.list {
2359
border-color: rgba(0, 0, 0, 0.12);
2360
background-color: #FFFFFF;
2361
}
2362
.list-row,
2364
.grid-child {
2365
padding: 2px;
2366
}
2367
.list-row.activatable, .view, column-header .button {
2369
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2370
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0);
2371
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0));
2372
background-repeat: no-repeat;
2373
background-position: center, center;
2374
background-size: 240px 240px, auto;
2375
}
2376
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2378
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2379
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.05);
2380
}
2381
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2383
transition: all 270ms cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2384
animation: list_ripple_effect 270ms cubic-bezier(0, 0, 0.2, 1) forwards;
2385
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.15);
2386
}
2387
.list-row:selected .button:insensitive {
2389
color: rgba(255, 255, 255, 0.3);
2390
}
2391
.list-row:selected .button.flat {
2393
color: rgba(255, 255, 255, 0.7);
2394
}
2395
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2397
color: #FFFFFF;
2398
}
2399
.list-row:selected .button.flat:insensitive {
2401
color: rgba(255, 255, 255, 0.3);
2402
}
2403
/*********************
2405
* App Notifications *
2406
*********************/
2407
/*************
2408
* Expanders *
2409
*************/
2410
.expander {
2411
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2412
}
2413
.expander:dir(rtl) {
2415
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2416
}
2417
.expander:checked {
2419
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2420
}
2421
.expander:not(:hover):not(:active) {
2423
color: alpha(currentColor, 0.75);
2424
}
2425
.expander:selected {
2427
color: #FFFFFF;
2428
}
2429
/************
2431
* Calendar *
2432
***********/
2433
GtkCalendar {
2434
padding: 1px;
2435
border: 1px solid rgba(0, 0, 0, 0.12);
2436
color: rgba(0, 0, 0, 0.87);
2437
}
2438
GtkCalendar:insensitive {
2440
color: rgba(0, 0, 0, 0.38);
2441
}
2442
GtkCalendar:selected {
2444
border-radius: 3px;
2445
}
2446
GtkCalendar.header {
2448
border-style: none none solid;
2449
border-radius: 0;
2450
}
2451
GtkCalendar:inconsistent {
2453
color: alpha(currentColor, 0.5);
2454
}
2455
GtkCalendar.highlight {
2457
font-size: smaller;
2458
color: alpha(currentColor, 0.6);
2459
}
2460
/***********
2462
* Dialogs *
2463
***********/
2464
.message-dialog .dialog-action-area .button {
2465
padding: 8px;
2466
}
2467
.message-dialog.background {
2469
background-color: #FAFAFA;
2470
}
2471
.message-dialog .titlebar {
2473
border-style: none;
2474
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2475
background-color: #FAFAFA;
2476
}
2477
.message-dialog.csd.background {
2479
border-bottom-left-radius: 2px;
2480
border-bottom-right-radius: 2px;
2481
}
2482
.message-dialog.csd .dialog-action-area .button {
2484
padding: 9px 16px 10px;
2485
border-top: 1px solid rgba(0, 0, 0, 0.12);
2486
border-radius: 0;
2487
background-size: 240px 240px, auto;
2488
}
2489
.message-dialog.csd .dialog-action-area .button:first-child {
2491
border-radius: 0 0 0 2px;
2492
}
2493
.message-dialog.csd .dialog-action-area .button:last-child {
2495
border-radius: 0 0 2px 0;
2496
}
2497
GtkFileChooserDialog .dialog-action-box {
2499
border-top: 1px solid rgba(0, 0, 0, 0.12);
2500
}
2501
/***********
2503
* Sidebar *
2504
***********/
2505
.sidebar {
2506
border: none;
2507
background-color: #FAFAFA;
2508
}
2509
GtkSidebarRow.list-row {
2511
padding: 0px;
2512
}
2513
GtkSidebarRow .sidebar-revealer {
2515
padding: 4px 14px 4px 12px;
2516
}
2517
GtkSidebarRow .sidebar-icon {
2519
opacity: 0.6;
2520
}
2521
GtkSidebarRow .sidebar-icon:dir(ltr) {
2523
padding-right: 8px;
2524
}
2525
GtkSidebarRow .sidebar-icon:dir(rtl) {
2527
padding-left: 8px;
2528
}
2529
GtkSidebarRow .sidebar-label:dir(ltr) {
2531
padding-right: 2px;
2532
}
2533
GtkSidebarRow .sidebar-label:dir(rtl) {
2535
padding-left: 2px;
2536
}
2537
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2539
border: solid 1px #338DD6;
2540
}
2541
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2543
color: #009688;
2544
}
2545
.sidebar-button.button.image-button {
2547
padding: 4px;
2548
}
2549
.sidebar-item {
2551
padding: 10px 4px;
2552
}
2553
.sidebar-item > .label {
2555
padding-left: 6px;
2556
padding-right: 6px;
2557
}
2558
/****************
2560
* File chooser *
2561
****************/
2562
GtkPlacesView .server-list-button > GtkImage {
2563
-gtk-icon-transform: rotate(0turn);
2564
}
2565
GtkPlacesView .server-list-button:checked > GtkImage {
2567
-gtk-icon-transform: rotate(-0.5turn);
2568
}
2569
/*********
2571
* Paned *
2572
*********/
2573
GtkPaned {
2574
-GtkPaned-handle-size: 1;
2575
-gtk-icon-source: none;
2576
margin: 0 8px 8px 0;
2577
}
2578
GtkPaned:dir(rtl) {
2580
margin-right: 0;
2581
margin-left: 8px;
2582
}
2583
GtkPaned .pane-separator {
2585
background-color: rgba(0, 0, 0, 0.12);
2586
}
2587
GtkPaned.wide {
2589
-GtkPaned-handle-size: 6;
2590
margin: 0;
2591
}
2592
GtkPaned.wide .pane-separator {
2594
background-color: transparent;
2595
border-style: none solid;
2596
border-color: rgba(0, 0, 0, 0.12);
2597
border-width: 1px;
2598
}
2599
GtkPaned.wide.vertical .pane-separator {
2601
border-style: solid none;
2602
}
2603
/**************
2605
* GtkInfoBar *
2606
**************/
2607
GtkInfoBar {
2608
border-style: none;
2609
}
2610
.info {
2612
background-color: #66BB6A;
2613
}
2614
.question {
2616
background-color: #42A5F5;
2617
}
2618
.warning {
2620
background-color: #FFA726;
2621
}
2622
.error {
2624
background-color: #EF5350;
2625
}
2626
.info,
2628
.question,
2629
.warning,
2630
.error {
2631
color: #FFFFFF;
2632
}
2633
.info .button:insensitive,
2635
.question .button:insensitive,
2636
.warning .button:insensitive,
2637
.error .button:insensitive {
2638
color: rgba(255, 255, 255, 0.3);
2639
}
2640
/************
2642
* Tooltips *
2643
************/
2644
.tooltip {
2645
color: #FFFFFF;
2646
padding: 4px;
2647
/* not working */
2648
border-radius: 2px;
2649
box-shadow: none;
2650
}
2651
.tooltip.background {
2653
background-color: rgba(66, 66, 66, 0.9);
2654
}
2655
.tooltip.window-frame.csd {
2657
background-color: transparent;
2658
}
2659
.tooltip * {
2661
padding: 4px;
2662
background-color: transparent;
2663
color: inherit;
2664
}
2665
/*****************
2667
* Color Chooser *
2668
*****************/
2669
GtkColorSwatch {
2670
transition: box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
2671
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2672
}
2673
GtkColorSwatch:insensitive {
2675
opacity: 0.5;
2676
box-shadow: none;
2677
}
2678
GtkColorSwatch.top {
2680
border-top-left-radius: 2px;
2681
border-top-right-radius: 2px;
2682
}
2683
GtkColorSwatch.bottom {
2685
border-bottom-left-radius: 2px;
2686
border-bottom-right-radius: 2px;
2687
}
2688
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2690
border-top-left-radius: 2px;
2691
border-bottom-left-radius: 2px;
2692
}
2693
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2695
border-top-right-radius: 2px;
2696
border-bottom-right-radius: 2px;
2697
}
2698
GtkColorSwatch:only-child:not(.overlay) {
2700
border-radius: 2px;
2701
}
2702
GtkColorSwatch.top > .overlay {
2704
border-top-left-radius: 2px;
2705
border-top-right-radius: 2px;
2706
}
2707
GtkColorSwatch.bottom > .overlay {
2709
border-bottom-left-radius: 2px;
2710
border-bottom-right-radius: 2px;
2711
}
2712
GtkColorSwatch:first-child:not(.top) > .overlay {
2714
border-top-left-radius: 2px;
2715
border-bottom-left-radius: 2px;
2716
}
2717
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2719
border-top-right-radius: 2px;
2720
border-bottom-right-radius: 2px;
2721
}
2722
GtkColorSwatch:only-child > .overlay {
2724
border-radius: 2px;
2725
}
2726
GtkColorSwatch:hover {
2728
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2729
}
2730
GtkColorEditor GtkColorSwatch {
2732
border-radius: 2px;
2733
}
2734
GtkColorEditor GtkColorSwatch:hover {
2736
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2737
}
2738
GtkColorSwatch.color-dark {
2740
color: #FFFFFF;
2741
}
2742
GtkColorSwatch.color-light {
2744
color: rgba(0, 0, 0, 0.87);
2745
}
2746
GtkColorSwatch#add-color-button {
2748
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
2749
color: #FFFFFF;
2750
}
2751
/********
2753
* Misc *
2754
********/
2755
.content-view {
2756
background-color: #EEEEEE;
2757
}
2758
.scale-popup .button {
2760
padding: 10px;
2761
}
2762
/**********************
2764
* Window Decorations *
2765
*********************/
2766
.window-frame {
2767
transition: box-shadow 180ms cubic-bezier(0, 0, 0.2, 1);
2768
border-radius: 2px 2px 0 0;
2769
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2770
/* this is used for the resize cursor area */
2771
margin: 8px;
2772
}
2773
.window-frame:backdrop {
2775
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2776
}
2777
.window-frame.tiled {
2779
border-radius: 0;
2780
}
2781
.window-frame.popup {
2783
box-shadow: none;
2784
}
2785
.window-frame.ssd {
2787
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2788
}
2789
.window-frame.csd.popup {
2791
border-radius: 2px;
2792
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2793
}
2794
.window-frame.csd.tooltip {
2796
border-radius: 2px;
2797
box-shadow: none;
2798
}
2799
.window-frame.csd.message-dialog {
2801
border-radius: 2px;
2802
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2803
}
2804
.window-frame.csd.message-dialog:backdrop {
2806
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2807
}
2808
.window-frame.solid-csd {
2810
border-radius: 0;
2811
margin: 0;
2812
background-color: #E0E0E0;
2813
box-shadow: none;
2814
}
2815
.header-bar .button.titlebutton:active,
2817
.titlebar .button.titlebutton:active {
2818
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4, to(alpha(currentColor, 0.15)), to(transparent)), linear-gradient(to bottom, alpha(currentColor, 0.15));
2819
}
2820
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2822
background-color: #338DD6;
2823
color: #FFFFFF;
2824
}
2825
.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 {
2827
color: rgba(255, 255, 255, 0.5);
2828
}
2829
.monospace {
2831
font: Monospace;
2832
}
2833
/**********************
2835
* Touch Copy & Paste *
2836
*********************/
2837
.entry.cursor-handle,
2838
.cursor-handle {
2839
background-color: #009688;
2840
background-image: none;
2841
box-shadow: none;
2842
border-style: none;
2843
}
2844
.entry.cursor-handle.top:dir(ltr), .entry.cursor-handle.bottom:dir(rtl),
2846
.cursor-handle.top:dir(ltr),
2847
.cursor-handle.bottom:dir(rtl) {
2848
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start.png"), url("assets/text-select-start@2.png"));
2849
padding-left: 10px;
2850
}
2851
.entry.cursor-handle.bottom:dir(ltr), .entry.cursor-handle.top:dir(rtl),
2853
.cursor-handle.bottom:dir(ltr),
2854
.cursor-handle.top:dir(rtl) {
2855
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end.png"), url("assets/text-select-end@2.png"));
2856
padding-right: 10px;
2857
}
2858
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2860
.cursor-handle.insertion-cursor:dir(ltr),
2861
.cursor-handle.insertion-cursor:dir(rtl) {
2862
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2863
}
2864
.entry.cursor-handle.top:hover:dir(ltr), .entry.cursor-handle.bottom:hover:dir(rtl),
2866
.cursor-handle.top:hover:dir(ltr),
2867
.cursor-handle.bottom:hover:dir(rtl) {
2868
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start-hover.png"), url("assets/text-select-start-hover@2.png"));
2869
padding-left: 10px;
2870
}
2871
.entry.cursor-handle.bottom:hover:dir(ltr), .entry.cursor-handle.top:hover:dir(rtl),
2873
.cursor-handle.bottom:hover:dir(ltr),
2874
.cursor-handle.top:hover:dir(rtl) {
2875
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end-hover.png"), url("assets/text-select-end-hover@2.png"));
2876
padding-right: 10px;
2877
}
2878
.entry.cursor-handle.insertion-cursor:hover:dir(ltr), .entry.cursor-handle.insertion-cursor:hover:dir(rtl),
2880
.cursor-handle.insertion-cursor:hover:dir(ltr),
2881
.cursor-handle.insertion-cursor:hover:dir(rtl) {
2882
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider-hover.png"), url("assets/scale-horz-marks-before-slider-hover@2.png"));
2883
}
2884
.entry.cursor-handle.top:active:dir(ltr), .entry.cursor-handle.bottom:active:dir(rtl),
2886
.cursor-handle.top:active:dir(ltr),
2887
.cursor-handle.bottom:active:dir(rtl) {
2888
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start-active.png"), url("assets/text-select-start-active@2.png"));
2889
padding-left: 10px;
2890
}
2891
.entry.cursor-handle.bottom:active:dir(ltr), .entry.cursor-handle.top:active:dir(rtl),
2893
.cursor-handle.bottom:active:dir(ltr),
2894
.cursor-handle.top:active:dir(rtl) {
2895
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end-active.png"), url("assets/text-select-end-active@2.png"));
2896
padding-right: 10px;
2897
}
2898
.entry.cursor-handle.insertion-cursor:active:dir(ltr), .entry.cursor-handle.insertion-cursor:active:dir(rtl),
2900
.cursor-handle.insertion-cursor:active:dir(ltr),
2901
.cursor-handle.insertion-cursor:active:dir(rtl) {
2902
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider-active.png"), url("assets/scale-horz-marks-before-slider-active@2.png"));
2903
}
2904
/* Decouple the font of context menus from their entry/textview */
2906
.context-menu {
2907
font: initial;
2908
}
2909
.touch-selection {
2911
font: initial;
2912
color: rgba(0, 0, 0, 0.87);
2913
background-color: #FFFFFF;
2914
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2915
}
2916
.touch-selection:backdrop {
2918
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2919
}
2920
.overshoot.top {
2922
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2923
background-repeat: no-repeat;
2924
background-position: center top;
2925
background-color: transparent;
2926
border: none;
2927
box-shadow: none;
2928
}
2929
.overshoot.bottom {
2931
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2932
background-repeat: no-repeat;
2933
background-position: center bottom;
2934
background-color: transparent;
2935
border: none;
2936
box-shadow: none;
2937
}
2938
.overshoot.left {
2940
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2941
background-repeat: no-repeat;
2942
background-position: left center;
2943
background-color: transparent;
2944
border: none;
2945
box-shadow: none;
2946
}
2947
.overshoot.right {
2949
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2950
background-repeat: no-repeat;
2951
background-position: right center;
2952
background-color: transparent;
2953
border: none;
2954
box-shadow: none;
2955
}
2956
.undershoot.top {
2958
background-color: transparent;
2959
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2960
padding-top: 1px;
2961
background-size: 12px 1px;
2962
background-repeat: repeat-x;
2963
background-origin: content-box;
2964
background-position: left top;
2965
}
2966
.undershoot.bottom {
2968
background-color: transparent;
2969
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2970
padding-bottom: 1px;
2971
background-size: 12px 1px;
2972
background-repeat: repeat-x;
2973
background-origin: content-box;
2974
background-position: left bottom;
2975
}
2976
.undershoot.left {
2978
background-color: transparent;
2979
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2980
padding-left: 1px;
2981
background-size: 1px 12px;
2982
background-repeat: repeat-y;
2983
background-origin: content-box;
2984
background-position: left top;
2985
}
2986
.undershoot.right {
2988
background-color: transparent;
2989
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2990
padding-right: 1px;
2991
background-size: 1px 12px;
2992
background-repeat: repeat-y;
2993
background-origin: content-box;
2994
background-position: right top;
2995
}
2996
.floating-bar {
2998
padding: 3px 0 4px;
2999
border-width: 1px;
3000
border-style: solid solid none;
3001
border-color: rgba(0, 0, 0, 0.12);
3002
border-radius: 3px 3px 0 0;
3003
background-color: #FFFFFF;
3004
background-clip: padding-box;
3005
}
3006
.floating-bar.left {
3008
border-left-style: none;
3009
border-top-left-radius: 0;
3010
}
3011
.floating-bar.right {
3013
border-right-style: none;
3014
border-top-right-radius: 0;
3015
}
3016
.floating-bar .button {
3018
padding: 4px;
3019
}
3020
/************
3022
* Nautilus *
3023
************/
3024
EelEditableLabel.entry {
3025
transition: none;
3026
}
3027
.nautilus-desktop.nautilus-canvas-item {
3029
color: #FFFFFF;
3030
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3031
}
3032
.nautilus-desktop.nautilus-canvas-item:selected {
3034
text-shadow: none;
3035
}
3036
/* Toolbar */
3038
@keyframes needs_attention_keyframes {
3039
0% {
3040
background-color: transparent;
3041
}
3042
50% {
3043
background-color: alpha(currentColor, 0.3);
3044
}
3045
100% {
3046
background-color: transparent;
3047
}
3048
}
3049
.nautilus-operations-button-needs-attention {
3051
color: #009688;
3052
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3053
}
3054
.nautilus-operations-button-needs-attention-multiple {
3056
color: #009688;
3057
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3058
animation-iteration-count: 2;
3059
}
3060
.disk-space-display.unknown {
3062
background-color: #FF6D00;
3063
}
3064
.disk-space-display.used {
3066
background-color: #338DD6;
3067
}
3068
.disk-space-display.free {
3070
background-color: alpha(currentColor, 0.3);
3071
color: rgba(0, 0, 0, 0.38);
3072
}
3073
/* View */
3075
/********
3076
* Nemo *
3077
*******/
3078
NemoWindow .nemo-inactive-pane .view, NemoWindow .nemo-inactive-pane iconview {
3079
background-color: #F5F5F5;
3080
color: rgba(0, 0, 0, 0.87);
3081
}
3082
NemoWindow .sidebar .cell {
3084
background-color: #EEEEEE;
3085
color: rgba(0, 0, 0, 0.87);
3086
}
3087
NemoWindow .sidebar .cell:selected {
3089
color: #FFFFFF;
3090
background-color: #338DD6;
3091
}
3092
.nemo-desktop.nemo-canvas-item {
3094
color: #FFFFFF;
3095
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3096
}
3097
.nemo-desktop.nemo-canvas-item:selected {
3099
text-shadow: none;
3100
}
3101
/**************
3103
* Tweak Tool *
3104
**************/
3105
.tweak-categories {
3106
background-color: #F5F5F5;
3107
background-image: linear-gradient(to bottom, #F5F5F5);
3108
}
3109
.tweak-categories .separator {
3111
-GtkWidget-wide-separators: true;
3112
color: transparent;
3113
}
3114
/************
3116
* Software *
3117
************/
3118
.button.install-progress:insensitive {
3119
background-color: alpha(currentColor, 0.3);
3120
}
3121
/***********
3123
* Builder *
3124
***********/
3125
GbTerminalView {
3126
background-color: #FFFFFF;
3127
}
3128
/***********
3130
* Firefox *
3131
***********/
3132
.menubar {
3133
color: rgba(0, 0, 0, 0.54);
3134
}
3135
.menubar:hover {
3137
color: rgba(0, 0, 0, 0.87);
3138
}
3139
/***********
3141
* Synapse *
3142
***********/
3143
SynapseGuiMatchListView GtkWidget:selected {
3144
background-color: #338DD6;
3145
}
3146
/*********
3148
* Unity *
3149
*********/
3150
UnityDecoration {
3151
-UnityDecoration-extents: 28px 0 0 0;
3152
-UnityDecoration-input-extents: 8px;
3153
-UnityDecoration-shadow-offset-x: 0;
3154
-UnityDecoration-shadow-offset-y: 3px;
3155
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
3156
-UnityDecoration-active-shadow-radius: 18px;
3157
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
3158
-UnityDecoration-inactive-shadow-radius: 6px;
3159
-UnityDecoration-glow-size: 8px;
3160
-UnityDecoration-glow-color: #338DD6;
3161
-UnityDecoration-title-indent: 4px;
3162
-UnityDecoration-title-fade: 32px;
3163
-UnityDecoration-title-alignment: 0.0;
3164
}
3165
UnityDecoration.top {
3167
padding: 0 2px;
3168
border-style: none;
3169
border-radius: 2px 2px 0 0;
3170
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
3171
background-color: #E0E0E0;
3172
color: rgba(0, 0, 0, 0.87);
3173
}
3174
UnityDecoration.top:backdrop {
3176
color: rgba(0, 0, 0, 0.54);
3177
}
3178
UnityDecoration.menuitem,
3180
UnityDecoration .menuitem {
3181
color: alpha(currentColor, 0.75);
3182
}
3183
UnityDecoration.menubar.menuitem:hover,
3185
UnityDecoration.menubar .menuitem *:hover {
3186
box-shadow: inset 0 -2px currentColor;
3187
background-color: transparent;
3188
color: currentColor;
3189
}
3190
.background:not(.csd) :not(.titlebar) .header-bar {
3192
border-radius: 0;
3193
box-shadow: none;
3194
}
3195
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
3197
border-style: none;
3198
}
3199
UnityPanelWidget,
3201
.unity-panel {
3202
background-color: #cfcfcf;
3203
background-image: linear-gradient(to bottom, #cfcfcf);
3204
color: rgba(0, 0, 0, 0.87);
3205
}
3206
UnityPanelWidget:backdrop,
3208
.unity-panel:backdrop {
3209
color: rgba(0, 0, 0, 0.54);
3210
}
3211
.unity-panel.menuitem,
3213
.unity-panel .menuitem {
3214
color: alpha(currentColor, 0.75);
3215
}
3216
.unity-panel.menubar.menuitem:hover,
3218
.unity-panel.menubar .menuitem *:hover {
3219
box-shadow: inset 0 -2px currentColor;
3220
background-color: transparent;
3221
color: currentColor;
3222
}
3223
@keyframes playbackmenuitem_spinner {
3225
to {
3226
-gtk-icon-transform: rotate(1turn);
3227
}
3228
}
3229
.menu IdoPlaybackMenuItem.menuitem:active {
3231
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
3232
animation: playbackmenuitem_spinner 1s infinite linear;
3233
color: #338DD6;
3234
}
3235
/* GTK NAMED COLORS
3237
----------------
3238
use responsibly! */
3239
/*
3240
widget text/foreground color */
3241
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
3242
/*
3243
text color for entries, views and content in general */
3244
@define-color theme_text_color rgba(0, 0, 0, 0.87);
3245
/*
3246
widget base background color */
3247
@define-color theme_bg_color #EEEEEE;
3248
/*
3249
text widgets and the like base background color */
3250
@define-color theme_base_color #FFFFFF;
3251
/*
3252
base background color of selections */
3253
@define-color theme_selected_bg_color #338DD6;
3254
/*
3255
text/foreground color of selections */
3256
@define-color theme_selected_fg_color #FFFFFF;
3257
/*
3258
base background color of insensitive widgets */
3259
@define-color insensitive_bg_color #EEEEEE;
3260
/*
3261
text foreground color of insensitive widgets */
3262
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3263
/*
3264
insensitive text widgets and the like base background color */
3265
@define-color insensitive_base_color #F5F5F5;
3266
/*
3267
widget text/foreground color on backdrop windows */
3268
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3269
/*
3270
text color for entries, views and content in general on backdrop windows */
3271
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3272
/*
3273
widget base background color on backdrop windows */
3274
@define-color theme_unfocused_bg_color #EEEEEE;
3275
/*
3276
text widgets and the like base background color on backdrop windows */
3277
@define-color theme_unfocused_base_color #FFFFFF;
3278
/*
3279
base background color of selections on backdrop windows */
3280
@define-color theme_unfocused_selected_bg_color #338DD6;
3281
/*
3282
text/foreground color of selections on backdrop windows */
3283
@define-color theme_unfocused_selected_fg_color #FFFFFF;
3284
/*
3285
insensitive color on backdrop windows */
3286
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3287
/*
3288
widgets main borders color */
3289
@define-color borders rgba(0, 0, 0, 0.12);
3290
/*
3291
widgets main borders color on backdrop windows */
3292
@define-color unfocused_borders rgba(0, 0, 0, 0.12);
3293
/*
3294
these are pretty self explicative */
3295
@define-color warning_color #FF6D00;
3296
@define-color error_color #DD2C00;
3297
@define-color success_color #00C853;
3298
/*
3299
FIXME this is really an API */
3300
@define-color content_view_bg #FFFFFF;
3301
@define-color placeholder_text_color #757575;
3302