ASCII text, with very long lines (434)
1
@keyframes ripple_effect {
2
from {
3
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(alpha(currentColor, 0.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: #42A5F5;
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: #F5F5F5;
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: #F5F5F5;
79
color: rgba(0, 0, 0, 0.87);
80
}
81
.gtkstyle-fallback:prelight {
83
background-color: #e8e8e8;
84
color: rgba(0, 0, 0, 0.87);
85
}
86
.gtkstyle-fallback:active {
88
background-color: gainsboro;
89
color: rgba(0, 0, 0, 0.87);
90
}
91
.gtkstyle-fallback:insensitive {
93
background-color: #F5F5F5;
94
color: rgba(0, 0, 0, 0.38);
95
}
96
.gtkstyle-fallback:selected {
98
background-color: #42A5F5;
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.1);
139
}
140
GtkAssistant .sidebar:dir(rtl) {
142
border-left: 1px solid rgba(0, 0, 0, 0.1);
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: #FAFAFA;
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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s 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: #FAFAFA;
213
}
214
.entry.flat, .notebook GtkGrid > .entry {
216
border-radius: 0;
217
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
218
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#42A5F5), 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(#42A5F5), to(transparent)) 0 0 2/0 0 2px;
227
box-shadow: inset 0 -2px #42A5F5;
228
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0 0.3s;
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: #42A5F5;
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, .notebook
258
GtkGrid.linked.vertical > .entry {
259
border-radius: 0;
260
}
261
.entry.error {
263
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s 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: #FAFAFA;
276
}
277
.entry.error.flat, .notebook GtkGrid > .error.entry {
279
transition: all 0.3s 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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0 0.3s;
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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s 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: #FAFAFA;
313
}
314
.entry.warning.flat, .notebook GtkGrid > .warning.entry {
316
transition: all 0.3s 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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0 0.3s;
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(#FF4081), to(transparent));
358
}
359
to {
360
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#FF4081), 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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s 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 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-image 0;
389
animation: ripple_effect 0.3s 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: #42A5F5;
409
color: #FFFFFF;
410
}
411
.button:checked:insensitive {
414
background-color: alpha(currentColor, 0.3);
415
color: rgba(66, 165, 245, 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 0.3s 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 0.3s cubic-bezier(0, 0, 0.2, 1), background-image 0;
446
animation: flat_ripple_effect 0.3s 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,
460
.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,
461
.button.flat:insensitive > .label {
462
color: inherit;
463
}
464
.toolbar:not(.search-bar) .button:checked, .titlebar .button:checked:not(.suggested-action):not(.destructive-action),
466
.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,
467
.button.flat:checked {
468
background-color: alpha(currentColor, 0.3);
469
color: currentColor;
470
}
471
.toolbar:not(.search-bar) .button:checked:insensitive, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action),
473
.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,
474
.button.flat:checked:insensitive {
475
background-color: alpha(currentColor, 0.3);
476
color: alpha(currentColor, 0.5);
477
}
478
.toolbar:not(.search-bar) .button:checked:insensitive > .label, .titlebar .button:checked:insensitive:not(.suggested-action):not(.destructive-action) > .label,
480
.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,
481
.button.flat:checked:insensitive > .label {
482
color: inherit;
483
}
484
.button.osd.image-button {
487
padding: 16px;
488
background-size: 60px 60px, auto;
489
}
490
.button.osd:insensitive {
493
opacity: 0;
494
}
495
.button.suggested-action {
498
background-color: #FF4081;
499
color: #FFFFFF;
500
}
501
.button.suggested-action:insensitive {
504
box-shadow: none;
505
background-color: alpha(currentColor, 0.3);
506
color: rgba(0, 0, 0, 0.38);
507
}
508
.button.suggested-action:insensitive > .label {
511
color: inherit;
512
}
513
.button.suggested-action:checked {
516
background-color: #ff79a7;
517
}
518
.toolbar:not(.search-bar) .suggested-action.button, .titlebar .suggested-action.button:not(.suggested-action):not(.destructive-action),
520
.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,
521
.button.suggested-action.flat {
522
background-color: transparent;
523
color: #FF4081;
524
}
525
.toolbar:not(.search-bar) .suggested-action.button:insensitive, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action),
527
.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,
528
.button.suggested-action.flat:insensitive {
529
box-shadow: none;
530
background-color: transparent;
531
color: alpha(currentColor, 0.5);
532
}
533
.toolbar:not(.search-bar) .suggested-action.button:insensitive > .label, .titlebar .suggested-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
535
.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,
536
.button.suggested-action.flat:insensitive > .label {
537
color: inherit;
538
}
539
.toolbar:not(.search-bar) .suggested-action.button:checked, .titlebar .suggested-action.button:checked:not(.suggested-action):not(.destructive-action),
541
.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,
542
.button.suggested-action.flat:checked {
543
background-color: alpha(currentColor, 0.3);
544
}
545
.button.destructive-action {
548
background-color: #FF5252;
549
color: #FFFFFF;
550
}
551
.button.destructive-action:insensitive {
554
box-shadow: none;
555
background-color: alpha(currentColor, 0.3);
556
color: rgba(0, 0, 0, 0.38);
557
}
558
.button.destructive-action:insensitive > .label {
561
color: inherit;
562
}
563
.button.destructive-action:checked {
566
background-color: #ff8686;
567
}
568
.toolbar:not(.search-bar) .destructive-action.button, .titlebar .destructive-action.button:not(.suggested-action):not(.destructive-action),
570
.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,
571
.button.destructive-action.flat {
572
background-color: transparent;
573
color: #FF5252;
574
}
575
.toolbar:not(.search-bar) .destructive-action.button:insensitive, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action),
577
.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,
578
.button.destructive-action.flat:insensitive {
579
box-shadow: none;
580
background-color: transparent;
581
color: alpha(currentColor, 0.5);
582
}
583
.toolbar:not(.search-bar) .destructive-action.button:insensitive > .label, .titlebar .destructive-action.button:insensitive:not(.suggested-action):not(.destructive-action) > .label,
585
.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,
586
.button.destructive-action.flat:insensitive > .label {
587
color: inherit;
588
}
589
.toolbar:not(.search-bar) .destructive-action.button:checked, .titlebar .destructive-action.button:checked:not(.suggested-action):not(.destructive-action),
591
.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,
592
.button.destructive-action.flat:checked {
593
background-color: alpha(currentColor, 0.3);
594
}
595
.button.text-button,
598
GtkScaleButton.button.text-button,
599
GtkVolumeButton.button.text-button {
600
padding-left: 16px;
601
padding-right: 16px;
602
}
603
.button.text-button.image-button {
606
padding: 7px 10px 8px;
607
outline-radius: 2px;
608
border-radius: 2px;
609
background-size: 90px 90px, auto;
610
}
611
.button.text-button.image-button .label:first-child {
614
padding-left: 6px;
615
}
616
.button.text-button.image-button .label:last-child {
619
padding-right: 6px;
620
}
621
.stack-switcher >
623
.button {
624
outline-offset: -4px;
625
}
626
.stack-switcher >
628
.button > .label {
629
padding-left: 6px;
630
padding-right: 6px;
631
}
632
.stack-switcher >
634
.button > GtkImage {
635
padding-left: 6px;
636
padding-right: 6px;
637
padding-top: 3px;
638
padding-bottom: 3px;
639
}
640
.stack-switcher >
643
.button.text-button {
644
padding: 7px 10px 8px;
645
}
646
.stack-switcher >
648
.button.image-button {
649
padding: 7px 4px;
650
}
651
.stack-switcher >
653
.button.needs-attention:checked > .label,
654
.stack-switcher >
655
.button.needs-attention:checked > GtkImage {
656
animation: none;
657
background-image: none;
658
}
659
.primary-toolbar
661
.button {
662
icon-shadow: none;
663
}
664
.toolbar:not(.search-bar) .linked > .button, .titlebar .linked > .button:not(.suggested-action):not(.destructive-action),
666
.header-bar .linked > .button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .button, .toolbar:not(.search-bar)
667
.linked.vertical > .button, .titlebar
668
.linked.vertical > .button:not(.suggested-action):not(.destructive-action),
669
.header-bar
670
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .frame.action-bar
671
.linked.vertical > .button:not(.suggested-action):not(.destructive-action), .app-notification
672
.linked.vertical > .button, .linked >
673
.button.flat,
674
.linked.vertical >
675
.button.flat {
676
border-radius: 2px;
677
}
678
.toolbar:not(.search-bar) .linked > .image-button.button, .titlebar .linked > .image-button.button:not(.suggested-action):not(.destructive-action),
680
.header-bar .linked > .image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .image-button.button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .image-button.button, .toolbar:not(.search-bar)
681
.linked.vertical > .image-button.button, .titlebar
682
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action),
683
.header-bar
684
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
685
.linked.vertical > .image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
686
.linked.vertical > .image-button.button, .linked >
687
.button.flat.image-button,
688
.linked.vertical >
689
.button.flat.image-button {
690
outline-radius: 9999px;
691
border-radius: 9999px;
692
}
693
.toolbar:not(.search-bar) .linked > .text-button.image-button.button, .titlebar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
695
.header-bar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar .linked > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .app-notification .linked > .text-button.image-button.button, .toolbar:not(.search-bar)
696
.linked.vertical > .text-button.image-button.button, .titlebar
697
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action),
698
.header-bar
699
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .frame.action-bar
700
.linked.vertical > .text-button.image-button.button:not(.suggested-action):not(.destructive-action), .app-notification
701
.linked.vertical > .text-button.image-button.button,
702
.linked >
703
.button.flat.text-button.image-button,
704
.linked.vertical >
705
.button.flat.text-button.image-button {
706
outline-radius: 2px;
707
border-radius: 2px;
708
}
709
.button.image-button, .inline-toolbar .button, .spinbutton .button, .notebook tab .button, GtkScaleButton.button,
712
GtkVolumeButton.button, .header-bar .button.titlebutton,
713
.titlebar .button.titlebutton, .nautilus-circular-button {
714
padding: 10px;
715
outline-radius: 100px;
716
border-radius: 100px;
717
background-size: 45px 45px, auto;
718
}
719
.stack-switcher >
721
.button.needs-attention > .label,
722
.stack-switcher >
723
.button.needs-attention > GtkImage, .sidebar-item.needs-attention > .label {
724
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
725
background-repeat: no-repeat;
726
background-position: right 3px;
727
background-size: 6px 6px;
728
}
729
.stack-switcher >
731
.button.needs-attention > .label:dir(rtl),
732
.stack-switcher >
733
.button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > .label:dir(rtl) {
734
background-position: left 3px;
735
}
736
.linked > .entry, .linked > .button, .linked > GtkComboBox > .the-button-in-the-combobox:dir(ltr), .linked > GtkComboBox > .the-button-in-the-combobox:dir(rtl),
738
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(ltr),
739
.linked > GtkComboBoxText > .the-button-in-the-combobox:dir(rtl) {
740
outline-radius: 2px;
741
border-radius: 0;
742
}
743
.linked > .entry:first-child, .linked > .button:first-child, .linked > GtkComboBox:first-child > .the-button-in-the-combobox,
745
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
746
border-top-left-radius: 2px;
747
border-bottom-left-radius: 2px;
748
}
749
.linked > .entry:last-child, .linked > .button:last-child, .linked > GtkComboBox:last-child > .the-button-in-the-combobox,
751
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
752
border-top-right-radius: 2px;
753
border-bottom-right-radius: 2px;
754
}
755
.linked > .entry:only-child, .linked > .button:only-child, .linked > GtkComboBox:only-child > .the-button-in-the-combobox,
757
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
758
border-radius: 2px;
759
}
760
.linked.vertical > .entry, .linked.vertical > .button, .linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
762
.linked.vertical > GtkComboBox > .the-button-in-the-combobox {
763
outline-radius: 2px;
764
border-radius: 0;
765
}
766
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
768
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox {
769
border-top-left-radius: 2px;
770
border-top-right-radius: 2px;
771
}
772
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
774
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox {
775
border-bottom-left-radius: 2px;
776
border-bottom-right-radius: 2px;
777
}
778
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
780
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox {
781
border-radius: 2px;
782
}
783
/* menu buttons */
785
GtkColorButton.button {
786
padding: 7px 8px 8px;
787
}
788
GtkColorButton.button GtkColorSwatch:first-child:last-child {
790
border-radius: 2px;
791
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
792
}
793
/*********
795
* Links *
796
*********/
797
*:link, .button:link, .button:visited {
798
color: #42A5F5;
799
}
800
*:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited {
802
color: #42A5F5;
803
}
804
*:link:visited, .button:visited {
806
color: #E040FB;
807
}
808
*:link:visited:hover, .button:visited:hover, *:link:visited:active, .button:visited:active {
810
color: #E040FB;
811
}
812
*:selected *:link:visited, *:selected .button:visited {
814
color: #b3dbfb;
815
}
816
*:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link,
818
.header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
819
color: #d9edfd;
820
}
821
.button:link > .label, .button:visited > .label {
823
text-decoration-line: underline;
824
}
825
/*****************
827
* GtkSpinButton *
828
*****************/
829
.spinbutton .button {
830
padding: 4px;
831
border: solid 6px transparent;
832
color: rgba(0, 0, 0, 0.54);
833
}
834
.spinbutton .button:hover, .spinbutton .button:active {
836
color: rgba(0, 0, 0, 0.87);
837
}
838
.spinbutton .button:insensitive {
840
color: rgba(0, 0, 0, 0.26);
841
}
842
.spinbutton .button:active {
844
background-color: alpha(currentColor, 0.3);
845
}
846
.spinbutton.vertical .button {
848
padding-top: 10px;
849
padding-bottom: 10px;
850
border: none;
851
}
852
.spinbutton.vertical .button:first-child {
854
border-radius: 2px 2px 0 0;
855
}
856
.spinbutton.vertical .button:last-child {
858
border-radius: 0 0 2px 2px;
859
}
860
/**************
862
* ComboBoxes *
863
**************/
864
GtkComboBox {
865
-GtkComboBox-arrow-scaling: 0.5;
866
-GtkComboBox-shadow-type: none;
867
}
868
GtkComboBox > .the-button-in-the-combobox {
870
padding: 5px 6px 6px;
871
}
872
GtkComboBox .menu {
874
padding: 2px 0;
875
}
876
GtkComboBox .menu .menuitem {
878
padding: 5px 6px 6px;
879
}
880
GtkComboBox .separator.vertical {
882
-GtkWidget-wide-separators: true;
883
}
884
GtkComboBox.combobox-entry .entry:dir(ltr) {
886
border-top-right-radius: 0;
887
border-bottom-right-radius: 0;
888
}
889
GtkComboBox.combobox-entry .entry:dir(rtl) {
891
border-top-left-radius: 0;
892
border-bottom-left-radius: 0;
893
}
894
GtkComboBox.combobox-entry .button {
896
padding: 10px;
897
}
898
GtkComboBox.combobox-entry .button:dir(ltr) {
900
border-top-left-radius: 0;
901
border-bottom-left-radius: 0;
902
}
903
GtkComboBox.combobox-entry .button:dir(rtl) {
905
border-top-right-radius: 0;
906
border-bottom-right-radius: 0;
907
}
908
/************
910
* Toolbars *
911
************/
912
.toolbar {
913
-GtkWidget-window-dragging: true;
914
padding: 4px;
915
background-color: #F5F5F5;
916
}
917
.osd .toolbar, .toolbar.osd, .app-notification,
919
.app-notification.frame {
920
transition: border-image 0.2s cubic-bezier(0, 0, 0.2, 1);
921
padding: 6px;
922
border-style: solid;
923
border-width: 8px;
924
border-image: -gtk-scaled(url("assets/box-shadow.png"), url("assets/box-shadow@2.png")) 10/10px stretch;
925
border-radius: 2px;
926
background-color: #FFFFFF;
927
}
928
.osd .toolbar:backdrop, .toolbar.osd:backdrop, .app-notification:backdrop {
930
border-image: -gtk-scaled(url("assets/box-shadow-backdrop.png"), url("assets/box-shadow-backdrop@2.png")) 10/10px stretch;
931
}
932
.inline-toolbar {
934
padding: 6px;
935
border-style: solid;
936
border-width: 0 1px 1px;
937
border-color: rgba(0, 0, 0, 0.1);
938
background-color: #FAFAFA;
939
}
940
.search-bar, .location-bar {
942
padding: 6px;
943
border-style: solid;
944
border-width: 0 0 1px;
945
border-color: rgba(0, 0, 0, 0.1);
946
background-color: #F5F5F5;
947
background-clip: border-box;
948
}
949
/***************
951
* Header bars *
952
***************/
953
.titlebar,
954
.header-bar {
955
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
956
padding: 6px;
957
border-radius: 2px 2px 0 0;
958
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.15);
959
background-color: #455A64;
960
color: #FFFFFF;
961
}
962
.titlebar:backdrop,
964
.header-bar:backdrop {
965
color: rgba(255, 255, 255, 0.7);
966
}
967
.titlebar .title,
969
.header-bar .title {
970
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
971
padding-left: 12px;
972
padding-right: 12px;
973
font-weight: bold;
974
}
975
.titlebar .subtitle,
977
.header-bar .subtitle {
978
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
979
padding-left: 12px;
980
padding-right: 12px;
981
font-size: smaller;
982
}
983
.titlebar .header-bar-separator,
985
.titlebar > GtkBox > .separator.vertical,
986
.header-bar .header-bar-separator,
987
.header-bar > GtkBox > .separator.vertical {
988
-GtkWidget-wide-separators: true;
989
-GtkWidget-separator-width: 1px;
990
border-style: solid;
991
border-width: 0 1px;
992
border-color: rgba(0, 0, 0, 0.1);
993
}
994
.titlebar .button:not(.suggested-action):not(.destructive-action),
996
.header-bar .button:not(.suggested-action):not(.destructive-action) {
997
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(currentColor), to(transparent)) 0 0 0/0 0 0px;
998
}
999
.titlebar .button:not(.suggested-action):not(.destructive-action):checked,
1001
.header-bar .button:not(.suggested-action):not(.destructive-action):checked {
1002
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(currentColor), to(transparent)) 0 0 2/0 0 2px;
1003
}
1004
.titlebar .button:not(.suggested-action):not(.destructive-action):checked, .titlebar .button:not(.suggested-action):not(.destructive-action):checked:insensitive,
1006
.header-bar .button:not(.suggested-action):not(.destructive-action):checked,
1007
.header-bar .button:not(.suggested-action):not(.destructive-action):checked:insensitive {
1008
background-color: transparent;
1009
}
1010
.titlebar .button.suggested-action:insensitive, .titlebar .button.destructive-action:insensitive,
1012
.header-bar .button.suggested-action:insensitive,
1013
.header-bar .button.destructive-action:insensitive {
1014
color: alpha(currentColor, 0.5);
1015
}
1016
.titlebar .button.suggested-action:insensitive > .label, .titlebar .button.destructive-action:insensitive > .label,
1018
.header-bar .button.suggested-action:insensitive > .label,
1019
.header-bar .button.destructive-action:insensitive > .label {
1020
color: inherit;
1021
}
1022
.titlebar.selection-mode,
1024
.header-bar.selection-mode {
1025
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);
1026
background-color: #42A5F5;
1027
color: #FFFFFF;
1028
}
1029
.titlebar.selection-mode:backdrop,
1031
.header-bar.selection-mode:backdrop {
1032
color: rgba(255, 255, 255, 0.7);
1033
}
1034
.titlebar.selection-mode .button,
1036
.header-bar.selection-mode .button {
1037
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.001, to(#FFFFFF), to(transparent)) 0 0 0/0 0 0px;
1038
color: rgba(255, 255, 255, 0.7);
1039
}
1040
.titlebar.selection-mode .button:hover, .titlebar.selection-mode .button:active, .titlebar.selection-mode .button:checked,
1042
.header-bar.selection-mode .button:hover,
1043
.header-bar.selection-mode .button:active,
1044
.header-bar.selection-mode .button:checked {
1045
color: #FFFFFF;
1046
}
1047
.titlebar.selection-mode .button:checked,
1049
.header-bar.selection-mode .button:checked {
1050
border-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#FFFFFF), to(transparent)) 0 0 2/0 0 2px;
1051
color: #FFFFFF;
1052
}
1053
.titlebar.selection-mode .button:checked:insensitive,
1055
.header-bar.selection-mode .button:checked:insensitive {
1056
color: rgba(255, 255, 255, 0.5);
1057
}
1058
.titlebar.selection-mode .button:checked:insensitive > .label,
1060
.header-bar.selection-mode .button:checked:insensitive > .label {
1061
color: inherit;
1062
}
1063
.titlebar.selection-mode .button.suggested-action,
1065
.header-bar.selection-mode .button.suggested-action {
1066
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1067
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1068
background-color: #FAFAFA;
1069
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));
1070
color: rgba(0, 0, 0, 0.62);
1071
}
1072
.titlebar.selection-mode .button.suggested-action:hover,
1074
.header-bar.selection-mode .button.suggested-action:hover {
1075
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1076
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));
1077
color: rgba(0, 0, 0, 0.87);
1078
}
1079
.titlebar.selection-mode .button.suggested-action:active,
1081
.header-bar.selection-mode .button.suggested-action:active {
1082
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-image 0;
1083
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
1084
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1085
color: rgba(0, 0, 0, 0.87);
1086
}
1087
.titlebar.selection-mode .button.suggested-action:insensitive,
1089
.header-bar.selection-mode .button.suggested-action:insensitive {
1090
box-shadow: none;
1091
background-color: alpha(currentColor, 0.3);
1092
color: rgba(0, 0, 0, 0.26);
1093
}
1094
.titlebar.selection-mode .button.suggested-action:insensitive > .label,
1096
.header-bar.selection-mode .button.suggested-action:insensitive > .label {
1097
color: inherit;
1098
}
1099
.titlebar.selection-mode .selection-menu,
1101
.header-bar.selection-mode .selection-menu {
1102
padding-left: 16px;
1103
padding-right: 16px;
1104
}
1105
.titlebar.selection-mode .selection-menu GtkArrow,
1107
.header-bar.selection-mode .selection-menu GtkArrow {
1108
-GtkArrow-arrow-scaling: 1;
1109
}
1110
.titlebar.selection-mode .selection-menu .arrow,
1112
.header-bar.selection-mode .selection-menu .arrow {
1113
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1114
}
1115
.tiled .titlebar, .maximized .titlebar, .tiled
1117
.header-bar, .maximized
1118
.header-bar {
1119
border-radius: 0;
1120
box-shadow: none;
1121
}
1122
.titlebar.default-decoration,
1124
.header-bar.default-decoration {
1125
padding: 6px;
1126
border-width: 0;
1127
}
1128
.titlebar.default-decoration .button,
1130
.header-bar.default-decoration .button {
1131
padding: 4px;
1132
}
1133
/************
1135
* Pathbars *
1136
************/
1137
.path-bar .button {
1138
padding: 7px 6px 8px;
1139
}
1140
.path-bar .button .label:last-child {
1142
padding-left: 2px;
1143
}
1144
.path-bar .button .label:first-child {
1146
padding-right: 2px;
1147
}
1148
.path-bar .button GtkImage {
1150
padding-top: 1px;
1151
}
1152
.path-bar .button GtkImage:only-child {
1154
padding-right: 4px;
1155
padding-left: 4px;
1156
}
1157
/**************
1159
* Tree Views *
1160
**************/
1161
GtkTreeView.view {
1162
-GtkTreeView-grid-line-width: 1;
1163
-GtkTreeView-grid-line-pattern: '';
1164
-GtkTreeView-tree-line-width: 1;
1165
-GtkTreeView-tree-line-pattern: '';
1166
-GtkTreeView-expander-size: 16;
1167
border-left-color: alpha(currentColor, 0.3);
1168
border-top-color: rgba(0, 0, 0, 0.1);
1169
border-radius: 0;
1170
}
1171
GtkTreeView.view:hover, GtkTreeView.view:active, GtkTreeView.view:selected {
1173
border-radius: 0;
1174
}
1175
GtkTreeView.view.dnd {
1177
border-style: solid none;
1178
border-width: 1px;
1179
border-color: rgba(37, 93, 138, 0.935);
1180
}
1181
GtkTreeView.view.expander {
1183
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1184
}
1185
GtkTreeView.view.expander:dir(rtl) {
1187
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1188
}
1189
GtkTreeView.view.expander:checked {
1191
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1192
}
1193
GtkTreeView.view.expander:selected {
1195
color: rgba(255, 255, 255, 0.7);
1196
}
1197
GtkTreeView.view.expander:selected:hover, GtkTreeView.view.expander:selected:active {
1199
color: #FFFFFF;
1200
}
1201
GtkTreeView.view.progressbar {
1203
border-width: 4px;
1204
}
1205
GtkTreeView.view.progressbar:selected {
1207
border-color: currentColor;
1208
}
1209
GtkTreeView.view.trough {
1211
border-width: 4px;
1212
border-color: rgba(66, 165, 245, 0.3);
1213
}
1214
GtkTreeView.view.trough:selected {
1216
border-color: alpha(currentColor, 0.3);
1217
}
1218
column-header .button {
1220
padding: 3px 6px 4px;
1221
border-style: none solid solid none;
1222
border-width: 1px;
1223
border-color: rgba(0, 0, 0, 0.1);
1224
border-radius: 0;
1225
box-shadow: none;
1226
background-color: #FFFFFF;
1227
}
1228
column-header .button:hover, column-header .button:active {
1230
box-shadow: none;
1231
}
1232
column-header .button:insensitive {
1234
background-color: #FFFFFF;
1235
}
1236
column-header:last-child .button, column-header:last-child.button {
1238
border-right-style: none;
1239
}
1240
column-header.button.dnd, column-header .button.dnd {
1242
border-left-style: solid;
1243
background-clip: padding-box;
1244
color: #42A5F5;
1245
}
1246
/*********
1248
* Menus *
1249
*********/
1250
.menubar {
1251
-GtkWidget-window-dragging: true;
1252
padding: 0;
1253
background-color: #455A64;
1254
}
1255
.menubar > .menuitem {
1257
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1258
padding: 4px 8px;
1259
color: rgba(255, 255, 255, 0.7);
1260
}
1261
.menubar > .menuitem:hover {
1263
transition: none;
1264
background-color: alpha(currentColor, 0.15);
1265
color: #FFFFFF;
1266
}
1267
.menubar > .menuitem:insensitive {
1269
color: rgba(255, 255, 255, 0.3);
1270
box-shadow: none;
1271
}
1272
.menu {
1274
margin: 4px 0;
1275
padding: 4px 0;
1276
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
1277
background-color: #FFFFFF;
1278
border: 1px solid rgba(0, 0, 0, 0.1);
1279
}
1280
.csd .menu {
1282
border: none;
1283
border-radius: 2px;
1284
}
1285
.menu .menuitem {
1287
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1288
padding: 3px 4px 4px;
1289
font: initial;
1290
text-shadow: none;
1291
}
1292
.menu .menuitem:hover {
1294
transition: none;
1295
background-color: alpha(currentColor, 0.15);
1296
}
1297
.menu .menuitem:insensitive {
1299
color: rgba(0, 0, 0, 0.38);
1300
}
1301
.menu .menuitem.arrow {
1303
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
1304
}
1305
.menu .menuitem.arrow:dir(rtl) {
1307
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
1308
}
1309
.menu.button {
1311
border-style: none;
1312
border-radius: 0;
1313
box-shadow: none;
1314
}
1315
.menu.button.top {
1317
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1318
}
1319
.menu.button.bottom {
1321
border-top: 1px solid rgba(0, 0, 0, 0.1);
1322
}
1323
.menu.button:hover {
1325
background-color: alpha(currentColor, 0.15);
1326
}
1327
.menu.button:insensitive {
1329
background-color: transparent;
1330
border-color: transparent;
1331
}
1332
.menuitem .accelerator {
1334
color: alpha(currentColor, 0.6);
1335
}
1336
.csd.popup {
1338
border-radius: 2px;
1339
}
1340
/***************
1342
* Popovers *
1343
***************/
1344
.popover {
1345
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1346
padding: 2px;
1347
border: 1px solid;
1348
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1349
border-radius: 3px;
1350
background-color: #FAFAFA;
1351
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1352
}
1353
.popover:backdrop {
1355
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1356
}
1357
.popover > .list,
1359
.popover > .view,
1360
.popover > .toolbar,
1361
.popover.osd > .toolbar {
1362
border-style: none;
1363
border-image: none;
1364
background-color: transparent;
1365
}
1366
.popover .button.flat {
1368
padding: 5px 8px 6px;
1369
background-color: transparent;
1370
background-size: 160px 160px, auto;
1371
color: rgba(0, 0, 0, 0.87);
1372
font: initial;
1373
}
1374
.popover .linked > .button {
1376
border-radius: 2px;
1377
}
1378
.popover .linked > .button:checked {
1380
background-color: #42A5F5;
1381
color: #FFFFFF;
1382
}
1383
.popover .linked > .button.image-button {
1385
padding: 8px;
1386
background-size: 90px 90px, auto;
1387
}
1388
/*****************
1390
* Notebooks and *
1391
* Tabs *
1392
*****************/
1393
.notebook {
1394
padding: 0;
1395
background-color: #FFFFFF;
1396
-GtkNotebook-initial-gap: 8;
1397
-GtkNotebook-arrow-spacing: 5;
1398
-GtkNotebook-tab-curvature: 0;
1399
-GtkNotebook-tab-overlap: 1;
1400
-GtkNotebook-has-tab-gap: false;
1401
-GtkWidget-focus-padding: 0;
1402
-GtkWidget-focus-line-width: 0;
1403
}
1404
.notebook.frame {
1406
border: 1px solid rgba(0, 0, 0, 0.1);
1407
}
1408
.notebook.frame.top {
1410
border-top-width: 0;
1411
}
1412
.notebook.frame.bottom {
1414
border-bottom-width: 0;
1415
}
1416
.notebook.frame.right {
1418
border-right-width: 0;
1419
}
1420
.notebook.frame.left {
1422
border-left-width: 0;
1423
}
1424
.notebook.header {
1426
background-color: #F5F5F5;
1427
}
1428
.notebook.header.frame {
1430
border: 1px solid rgba(0, 0, 0, 0.1);
1431
}
1432
.notebook.header.frame.top {
1434
border-bottom-width: 0;
1435
}
1436
.notebook.header.frame.bottom {
1438
border-top-width: 0;
1439
}
1440
.notebook.header.frame.right {
1442
border-left-width: 0;
1443
}
1444
.notebook.header.frame.left {
1446
border-right-width: 0;
1447
}
1448
.notebook.header.top {
1450
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
1451
}
1452
.notebook.header.bottom {
1454
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
1455
}
1456
.notebook.header.right {
1458
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1);
1459
}
1460
.notebook.header.left {
1462
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.1);
1463
}
1464
.notebook tab {
1466
border-width: 0;
1467
border-style: solid;
1468
border-color: transparent;
1469
background-color: transparent;
1470
outline-offset: 0;
1471
/* works for testnotebookdnd, but there's a superfluous border
1472
in gedit or web, commented out for now, needs gtk fixes
1473
&.reorderable-page {
1474
&.top {
1475
padding-top: ($vt_vpadding - 1px);
1476
border-top-width: 1px;
1477
border-left-width: 1px;
1478
border-right-width: 1px;
1479
}
1480
&.bottom {
1481
padding-bottom: ($vt_vpadding - 1px);
1482
border-bottom-width: 1px;
1483
border-left-width: 1px;
1484
border-right-width: 1px;
1485
}
1486
&.left {
1487
padding-left: ($ht_hpadding - 1px);
1488
border-left-width: 1px;
1489
border-top-width: 1px;
1490
border-bottom-width: 1px;
1491
}
1492
&.right {
1493
padding-right: ($ht_hpadding - 1px);
1494
border-right-width: 1px;
1495
border-top-width: 1px;
1496
border-bottom-width: 1px;
1497
}
1498
}
1499
*/
1500
}
1501
.notebook tab.top, .notebook tab.bottom {
1503
padding: 8px 12px;
1504
}
1505
.notebook tab.left, .notebook tab.right {
1507
padding: 8px 12px;
1508
}
1509
.notebook tab.reorderable-page {
1511
-GtkNotebook-tab-overlap: 1;
1512
}
1513
.notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
1515
padding-left: 12px;
1516
padding-right: 12px;
1517
border-left-width: 1px;
1518
border-right-width: 1px;
1519
}
1520
.notebook tab.reorderable-page.left, .notebook tab.reorderable-page.right {
1522
border-bottom-width: 1px;
1523
border-top-width: 1px;
1524
}
1525
.notebook tab.top:hover, .notebook tab.top.prelight-page {
1527
box-shadow: inset 0 -2px alpha(currentColor, 0.3);
1528
}
1529
.notebook tab.top:active, .notebook tab.top.active-page {
1531
box-shadow: inset 0 -2px #42A5F5;
1532
}
1533
.notebook tab.bottom:hover, .notebook tab.bottom.prelight-page {
1535
box-shadow: inset 0 2px alpha(currentColor, 0.3);
1536
}
1537
.notebook tab.bottom:active, .notebook tab.bottom.active-page {
1539
box-shadow: inset 0 2px #42A5F5;
1540
}
1541
.notebook tab.left:hover, .notebook tab.left.prelight-page {
1543
box-shadow: inset -2px 0 alpha(currentColor, 0.3);
1544
}
1545
.notebook tab.left:active, .notebook tab.left.active-page {
1547
box-shadow: inset -2px 0 #42A5F5;
1548
}
1549
.notebook tab.right:hover, .notebook tab.right.prelight-page {
1551
box-shadow: inset 2px 0 alpha(currentColor, 0.3);
1552
}
1553
.notebook tab.right:active, .notebook tab.right.active-page {
1555
box-shadow: inset 2px 0 #42A5F5;
1556
}
1557
.notebook tab.reorderable-page.top {
1559
border-color: transparent;
1560
}
1561
.notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
1563
border-color: rgba(0, 0, 0, 0.1);
1564
border-bottom-width: 0;
1565
border-bottom-color: transparent;
1566
background-color: #FAFAFA;
1567
}
1568
.notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
1570
border-color: rgba(0, 0, 0, 0.1);
1571
border-bottom-width: 0;
1572
border-bottom-color: transparent;
1573
background-color: #FFFFFF;
1574
}
1575
.notebook tab.reorderable-page.bottom {
1577
border-color: transparent;
1578
}
1579
.notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
1581
border-color: rgba(0, 0, 0, 0.1);
1582
border-top-width: 0;
1583
border-top-color: transparent;
1584
background-color: #FAFAFA;
1585
}
1586
.notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
1588
border-color: rgba(0, 0, 0, 0.1);
1589
border-top-width: 0;
1590
border-top-color: transparent;
1591
background-color: #FFFFFF;
1592
}
1593
.notebook tab.reorderable-page.left {
1595
border-color: transparent;
1596
}
1597
.notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
1599
border-color: rgba(0, 0, 0, 0.1);
1600
border-right-width: 0;
1601
border-right-color: transparent;
1602
background-color: #FAFAFA;
1603
}
1604
.notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
1606
border-color: rgba(0, 0, 0, 0.1);
1607
border-right-width: 0;
1608
border-right-color: transparent;
1609
background-color: #FFFFFF;
1610
}
1611
.notebook tab.reorderable-page.right {
1613
border-color: transparent;
1614
}
1615
.notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
1617
border-color: rgba(0, 0, 0, 0.1);
1618
border-left-width: 0;
1619
border-left-color: transparent;
1620
background-color: #FAFAFA;
1621
}
1622
.notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
1624
border-color: rgba(0, 0, 0, 0.1);
1625
border-left-width: 0;
1626
border-left-color: transparent;
1627
background-color: #FFFFFF;
1628
}
1629
.notebook tab .label {
1631
padding: 0 2px;
1632
font-weight: 500;
1633
color: rgba(0, 0, 0, 0.54);
1634
}
1635
.notebook tab .prelight-page .label, .notebook tab .label.prelight-page {
1637
color: rgba(0, 0, 0, 0.87);
1638
}
1639
.notebook tab .active-page .label, .notebook tab .label.active-page {
1641
color: rgba(0, 0, 0, 0.87);
1642
}
1643
.notebook tab .button {
1645
padding: 0;
1646
background-size: 30px 30px, auto;
1647
}
1648
.notebook tab .button > GtkImage {
1650
padding: 4px;
1651
}
1652
.notebook.arrow:not(:hover):not(:active) {
1654
color: alpha(currentColor, 0.75);
1655
}
1656
.notebook.arrow:insensitive {
1658
color: rgba(0, 0, 0, 0.38);
1659
}
1660
/**************
1662
* Scrollbars *
1663
**************/
1664
.scrollbar {
1665
-GtkRange-slider-width: 17px;
1666
-GtkRange-trough-border: 0;
1667
-GtkScrollbar-has-backward-stepper: false;
1668
-GtkScrollbar-has-forward-stepper: false;
1669
-GtkScrollbar-min-slider-length: 32px;
1670
-GtkRange-stepper-spacing: 0;
1671
-GtkRange-trough-under-steppers: 1;
1672
}
1673
.scrollbar .button {
1675
border: none;
1676
}
1677
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
1679
-GtkRange-slider-width: 12px;
1680
}
1681
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
1683
margin: 3px;
1684
border: 1px solid rgba(255, 255, 255, 0.3);
1685
}
1686
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
1688
border-style: none;
1689
background-color: transparent;
1690
}
1691
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
1693
background-color: rgba(255, 255, 255, 0.9);
1694
}
1695
.scrollbar .trough {
1697
border: 1px none rgba(0, 0, 0, 0.1);
1698
background-color: #FFFFFF;
1699
background-clip: padding-box;
1700
}
1701
.scrollbar .slider {
1703
background-color: rgba(0, 0, 0, 0.38);
1704
}
1705
.scrollbar .slider:hover {
1707
background-color: rgba(0, 0, 0, 0.54);
1708
}
1709
.scrollbar .slider:active {
1711
background-color: rgba(0, 0, 0, 0.87);
1712
}
1713
.scrollbar .slider:insensitive {
1715
opacity: 0.5;
1716
}
1717
.scrollbar .slider {
1719
border-radius: 100px;
1720
margin: 4px;
1721
}
1722
.scrollbar.fine-tune .slider {
1724
margin: 6px;
1725
}
1726
.scrollbar.vertical .slider {
1728
margin-left: 5px;
1729
}
1730
.scrollbar.vertical .slider:dir(rtl) {
1732
margin-left: 4px;
1733
margin-right: 5px;
1734
}
1735
.scrollbar.vertical.fine-tune .slider {
1737
margin-left: 7px;
1738
}
1739
.scrollbar.vertical.fine-tune .slider:dir(rtl) {
1741
margin-left: 6px;
1742
margin-right: 7px;
1743
}
1744
.scrollbar.vertical .trough {
1746
border-left-style: solid;
1747
}
1748
.scrollbar.vertical .trough:dir(rtl) {
1750
border-left-style: none;
1751
border-right-style: solid;
1752
}
1753
.scrollbar.horizontal .slider {
1755
margin-top: 5px;
1756
}
1757
.scrollbar.horizontal.fine-tune .slider {
1759
margin-top: 7px;
1760
}
1761
.scrollbar.horizontal .trough {
1763
border-top-style: solid;
1764
}
1765
.scrollbars-junction,
1767
.scrollbars-junction.frame {
1768
border-style: solid none none solid;
1769
background-color: #FFFFFF;
1770
}
1771
.scrollbars-junction:dir(rtl),
1773
.scrollbars-junction.frame:dir(rtl) {
1774
border-style: solid solid none none;
1775
}
1776
/**********
1778
* Switch *
1779
**********/
1780
GtkSwitch {
1781
-GtkSwitch-slider-width: 20px;
1782
-GtkSwitch-slider-height: 20px;
1783
outline-offset: -4px;
1784
outline-radius: 100px;
1785
font-size: 0;
1786
}
1787
GtkSwitch.trough {
1789
border: 8px solid transparent;
1790
border-radius: 100px;
1791
background-color: alpha(currentColor, 0.3);
1792
}
1793
GtkSwitch.trough:insensitive {
1795
color: alpha(currentColor, 0.5);
1796
}
1797
GtkSwitch.trough:active {
1799
background-color: rgba(255, 64, 129, 0.5);
1800
}
1801
GtkSwitch.trough:active:insensitive {
1803
background-color: rgba(255, 64, 129, 0.3);
1804
}
1805
GtkSwitch.slider {
1807
padding: 3px;
1808
border-radius: 100px;
1809
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
1810
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1811
background-color: #FFFFFF;
1812
color: rgba(0, 0, 0, 0.87);
1813
}
1814
GtkSwitch.slider:hover {
1816
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1817
}
1818
GtkSwitch.slider:active {
1820
background-color: #FF4081;
1821
}
1822
GtkSwitch.slider:insensitive {
1824
color: rgba(0, 0, 0, 0.38);
1825
background-color: #FAFAFA;
1826
}
1827
/*************************
1829
* Check and Radio items *
1830
*************************/
1831
.check {
1832
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png"));
1833
}
1834
.check:hover {
1836
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png"));
1837
}
1838
.check:active {
1840
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png"));
1841
}
1842
.check:insensitive {
1844
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"), url("assets/checkbox-unchecked-disabled@2.png"));
1845
}
1846
.check:inconsistent {
1848
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png"));
1849
}
1850
.check:inconsistent:hover {
1852
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png"));
1853
}
1854
.check:inconsistent:active {
1856
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png"));
1857
}
1858
.check:inconsistent:insensitive {
1860
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"), url("assets/checkbox-mixed-disabled@2.png"));
1861
}
1862
.check:checked {
1864
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png"));
1865
}
1866
.check:checked:hover {
1868
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png"));
1869
}
1870
.check:checked:active {
1872
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png"));
1873
}
1874
.check:checked:insensitive {
1876
-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"), url("assets/checkbox-checked-disabled@2.png"));
1877
}
1878
.menu .menuitem.check {
1880
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked.png"), url("assets/menu-checkbox-unchecked@2.png"));
1881
}
1882
.menu .menuitem.check:insensitive {
1884
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-unchecked-disabled.png"), url("assets/menu-checkbox-unchecked-disabled@2.png"));
1885
}
1886
.menu .menuitem.check:inconsistent {
1888
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed.png"), url("assets/menu-checkbox-mixed@2.png"));
1889
}
1890
.menu .menuitem.check:inconsistent:insensitive {
1892
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-mixed-disabled.png"), url("assets/menu-checkbox-mixed-disabled@2.png"));
1893
}
1894
.menu .menuitem.check:checked {
1896
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked.png"), url("assets/menu-checkbox-checked@2.png"));
1897
}
1898
.menu .menuitem.check:checked:insensitive {
1900
-gtk-icon-source: -gtk-scaled(url("assets/menu-checkbox-checked-disabled.png"), url("assets/menu-checkbox-checked-disabled@2.png"));
1901
}
1902
.radio {
1904
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png"));
1905
}
1906
.radio:hover {
1908
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png"));
1909
}
1910
.radio:active {
1912
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png"));
1913
}
1914
.radio:insensitive {
1916
-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"), url("assets/radio-unchecked-disabled@2.png"));
1917
}
1918
.radio:inconsistent {
1920
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png"));
1921
}
1922
.radio:inconsistent:hover {
1924
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png"));
1925
}
1926
.radio:inconsistent:active {
1928
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png"));
1929
}
1930
.radio:inconsistent:insensitive {
1932
-gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), url("assets/radio-mixed-disabled@2.png"));
1933
}
1934
.radio:checked {
1936
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png"));
1937
}
1938
.radio:checked:hover {
1940
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png"));
1941
}
1942
.radio:checked:active {
1944
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png"));
1945
}
1946
.radio:checked:insensitive {
1948
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"), url("assets/radio-checked-disabled@2.png"));
1949
}
1950
.menu .menuitem.radio {
1952
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked.png"), url("assets/menu-radio-unchecked@2.png"));
1953
}
1954
.menu .menuitem.radio:insensitive {
1956
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-unchecked-disabled.png"), url("assets/menu-radio-unchecked-disabled@2.png"));
1957
}
1958
.menu .menuitem.radio:inconsistent {
1960
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed.png"), url("assets/menu-radio-mixed@2.png"));
1961
}
1962
.menu .menuitem.radio:inconsistent:insensitive {
1964
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-mixed-disabled.png"), url("assets/menu-radio-mixed-disabled@2.png"));
1965
}
1966
.menu .menuitem.radio:checked {
1968
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked.png"), url("assets/menu-radio-checked@2.png"));
1969
}
1970
.menu .menuitem.radio:checked:insensitive {
1972
-gtk-icon-source: -gtk-scaled(url("assets/menu-radio-checked-disabled.png"), url("assets/menu-radio-checked-disabled@2.png"));
1973
}
1974
.view.content-view.check:not(.list) {
1976
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked.png"), url("assets/selectionmode-checkbox-unchecked@2.png"));
1977
background-color: transparent;
1978
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1979
}
1980
.view.content-view.check:not(.list):hover, .view.content-view.check:not(.list):active {
1982
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1983
}
1984
.view.content-view.check:checked:not(.list) {
1986
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked.png"), url("assets/selectionmode-checkbox-checked@2.png"));
1987
background-color: transparent;
1988
icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1989
}
1990
.view.content-view.check:checked:not(.list):hover, .view.content-view.check:checked:not(.list):active {
1992
icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
1993
}
1994
GtkCheckButton.text-button, GtkRadioButton.text-button {
1996
padding: 2px 4px;
1997
outline-offset: 0;
1998
}
1999
/************
2001
* GtkScale *
2002
************/
2003
.scale,
2004
.scale.scale-has-marks-above.scale-has-marks-below,
2005
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
2006
-GtkScale-slider-length: 20;
2007
-GtkRange-slider-width: 20;
2008
-GtkRange-trough-border: 2;
2009
outline-offset: -8px;
2010
outline-radius: 100px;
2011
}
2012
.scale.fine-tune.slider,
2014
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.slider,
2015
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.slider {
2016
background-size: 60%;
2017
}
2018
.scale.slider.slider,
2020
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider,
2021
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider {
2022
border-style: none;
2023
border-radius: 0;
2024
background-color: transparent;
2025
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
2026
background-repeat: no-repeat;
2027
background-position: center;
2028
background-size: 70%;
2029
box-shadow: none;
2030
}
2031
.scale.slider.slider:insensitive,
2033
.scale.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive,
2034
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider.slider:insensitive {
2035
border-style: none;
2036
border-radius: 0;
2037
background-color: transparent;
2038
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png"));
2039
background-repeat: no-repeat;
2040
background-position: center;
2041
background-size: 70%;
2042
box-shadow: none;
2043
}
2044
.scale.slider:hover,
2046
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
2047
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
2048
background-size: 80%;
2049
}
2050
.scale.slider:active,
2052
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
2053
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
2054
background-size: 90%;
2055
}
2056
.scale.trough,
2058
.scale.scale-has-marks-above.scale-has-marks-below.trough,
2059
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
2060
margin: 11px 12px;
2061
background-color: alpha(currentColor, 0.3);
2062
}
2063
.scale.trough.highlight,
2065
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
2066
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
2067
background-color: #FF4081;
2068
}
2069
.scale.trough.highlight:insensitive,
2071
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive,
2072
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:insensitive {
2073
background-color: alpha(currentColor, 0.3);
2074
}
2075
.scale.trough:insensitive,
2077
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
2078
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive {
2079
color: rgba(0, 0, 0, 0.38);
2080
}
2081
.scale.trough.vertical,
2083
.scale.scale-has-marks-above.scale-has-marks-below.trough.vertical,
2084
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical {
2085
margin: 12px 11px;
2086
}
2087
.scale.separator,
2089
.scale.scale-has-marks-above.scale-has-marks-below.separator,
2090
.scale.vertical.scale-has-marks-above.scale-has-marks-below.separator {
2091
color: alpha(currentColor, 0.3);
2092
}
2093
.scale.scale-has-marks-below {
2095
-GtkScale-slider-length: 20;
2096
-GtkRange-slider-width: 25;
2097
-GtkRange-trough-border: 2;
2098
}
2099
.scale.scale-has-marks-below.slider {
2101
border-style: none;
2102
border-radius: 0;
2103
background-color: transparent;
2104
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
2105
background-repeat: no-repeat;
2106
background-position: center;
2107
box-shadow: none;
2108
}
2109
.scale.scale-has-marks-below.slider:insensitive {
2111
border-style: none;
2112
border-radius: 0;
2113
background-color: transparent;
2114
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
2115
background-repeat: no-repeat;
2116
background-position: center;
2117
box-shadow: none;
2118
}
2119
.scale.scale-has-marks-above {
2121
-GtkScale-slider-length: 20;
2122
-GtkRange-slider-width: 25;
2123
-GtkRange-trough-border: 2;
2124
}
2125
.scale.scale-has-marks-above.slider {
2127
border-style: none;
2128
border-radius: 0;
2129
background-color: transparent;
2130
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2131
background-repeat: no-repeat;
2132
background-position: center;
2133
box-shadow: none;
2134
}
2135
.scale.scale-has-marks-above.slider:insensitive {
2137
border-style: none;
2138
border-radius: 0;
2139
background-color: transparent;
2140
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
2141
background-repeat: no-repeat;
2142
background-position: center;
2143
box-shadow: none;
2144
}
2145
.scale.vertical.scale-has-marks-below {
2147
-GtkScale-slider-length: 20;
2148
-GtkRange-slider-width: 25;
2149
-GtkRange-trough-border: 2;
2150
}
2151
.scale.vertical.scale-has-marks-below.slider {
2153
border-style: none;
2154
border-radius: 0;
2155
background-color: transparent;
2156
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
2157
background-repeat: no-repeat;
2158
background-position: center;
2159
box-shadow: none;
2160
}
2161
.scale.vertical.scale-has-marks-below.slider:insensitive {
2163
border-style: none;
2164
border-radius: 0;
2165
background-color: transparent;
2166
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
2167
background-repeat: no-repeat;
2168
background-position: center;
2169
box-shadow: none;
2170
}
2171
.scale.vertical.scale-has-marks-above {
2173
-GtkScale-slider-length: 20;
2174
-GtkRange-slider-width: 25;
2175
-GtkRange-trough-border: 2;
2176
}
2177
.scale.vertical.scale-has-marks-above.slider {
2179
border-style: none;
2180
border-radius: 0;
2181
background-color: transparent;
2182
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
2183
background-repeat: no-repeat;
2184
background-position: center;
2185
box-shadow: none;
2186
}
2187
.scale.vertical.scale-has-marks-above.slider:insensitive {
2189
border-style: none;
2190
border-radius: 0;
2191
background-color: transparent;
2192
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
2193
background-repeat: no-repeat;
2194
background-position: center;
2195
box-shadow: none;
2196
}
2197
.scale.scale-has-marks-above .trough {
2199
margin: 16px 12px 11px;
2200
}
2201
.scale.scale-has-marks-below .trough {
2203
margin: 11px 12px 16px;
2204
}
2205
.scale.vertical.scale-has-marks-above .trough {
2207
margin: 12px 11px 12px 16px;
2208
}
2209
.scale.vertical.scale-has-marks-below .trough {
2211
margin: 12px 16px 12px 11px;
2212
}
2213
/*****************
2215
* Progress bars *
2216
*****************/
2217
GtkProgressBar {
2218
-GtkProgressBar-min-horizontal-bar-height: 4;
2219
-GtkProgressBar-min-vertical-bar-width: 4;
2220
padding: 0;
2221
font-size: smaller;
2222
color: rgba(0, 0, 0, 0.38);
2223
}
2224
GtkProgressBar.osd {
2226
-GtkProgressBar-xspacing: 0;
2227
-GtkProgressBar-yspacing: 0;
2228
-GtkProgressBar-min-horizontal-bar-height: 4;
2229
}
2230
GtkProgressBar.trough {
2232
border-radius: 0;
2233
background-color: rgba(66, 165, 245, 0.3);
2234
}
2235
GtkProgressBar.trough.osd {
2237
border-style: none;
2238
box-shadow: none;
2239
}
2240
.progressbar {
2242
border-radius: 0;
2243
background-color: #42A5F5;
2244
}
2245
.progressbar.left {
2247
border-top-left-radius: 0;
2248
border-bottom-left-radius: 0;
2249
}
2250
.progressbar.right {
2252
border-top-right-radius: 0;
2253
border-bottom-right-radius: 0;
2254
}
2255
.progressbar.left.right {
2257
box-shadow: none;
2258
}
2259
.progressbar.vertical.bottom {
2261
border-bottom-left-radius: 0;
2262
border-bottom-right-radius: 0;
2263
box-shadow: none;
2264
}
2265
.progressbar.vertical.top {
2267
border-top-left-radius: 0;
2268
border-top-right-radius: 0;
2269
}
2270
.progressbar.osd {
2272
background-image: none;
2273
background-color: #42A5F5;
2274
border-style: none;
2275
border-radius: 0;
2276
}
2277
/*************
2279
* Level Bar *
2280
*************/
2281
.level-bar {
2282
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2283
color: rgba(0, 0, 0, 0.38);
2284
-GtkLevelBar-min-block-width: 36;
2285
-GtkLevelBar-min-block-height: 4;
2286
}
2287
.level-bar.vertical {
2289
-GtkLevelBar-min-block-width: 4;
2290
-GtkLevelBar-min-block-height: 36;
2291
}
2292
.level-bar.trough {
2294
padding: 2px;
2295
border-radius: 2px;
2296
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2297
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2298
background-color: #FFFFFF;
2299
color: rgba(0, 0, 0, 0.87);
2300
}
2301
.level-bar.trough:insensitive {
2303
color: rgba(0, 0, 0, 0.38);
2304
background-color: #FAFAFA;
2305
}
2306
.level-bar.trough.indicator-discrete.horizontal {
2308
padding: 2px 1px;
2309
}
2310
.level-bar.trough.indicator-discrete.vertical {
2312
padding: 1px 2px;
2313
}
2314
.level-bar.fill-block {
2316
background-color: #42A5F5;
2317
border-radius: 0;
2318
box-shadow: none;
2319
}
2320
.level-bar.fill-block.indicator-discrete.horizontal {
2322
margin: 0 1px;
2323
}
2324
.level-bar.fill-block.indicator-discrete.vertical {
2326
margin: 1px 0;
2327
}
2328
.level-bar.fill-block.level-high {
2330
background-color: #00C853;
2331
}
2332
.level-bar.fill-block.level-low {
2334
background-color: #FF6D00;
2335
}
2336
.level-bar.fill-block.empty-fill-block {
2338
background-color: alpha(currentColor, 0.3);
2339
}
2340
/**********
2342
* Frames *
2343
**********/
2344
.frame {
2345
border: 1px solid rgba(0, 0, 0, 0.1);
2346
padding: 0;
2347
}
2348
.frame.flat {
2350
border-style: none;
2351
}
2352
.frame.action-bar {
2354
padding: 6px;
2355
border-width: 1px 0 0;
2356
}
2357
GtkScrolledWindow GtkViewport.frame {
2359
border-style: none;
2360
}
2361
.separator {
2363
color: rgba(0, 0, 0, 0.1);
2364
}
2365
GtkFileChooserButton .separator.vertical,
2367
GtkFontButton .separator.vertical {
2368
-GtkWidget-wide-separators: true;
2369
}
2370
/*********
2372
* Lists *
2373
*********/
2374
.list {
2375
border-color: rgba(0, 0, 0, 0.1);
2376
background-color: #FFFFFF;
2377
}
2378
.list-row,
2380
.grid-child {
2381
padding: 2px;
2382
}
2383
.list-row.activatable, .view, column-header .button {
2385
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0;
2386
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0);
2387
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));
2388
background-repeat: no-repeat;
2389
background-position: center, center;
2390
background-size: 240px 240px, auto;
2391
}
2392
.list-row.activatable:hover, .view:hover, column-header .button:hover {
2394
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, box-shadow 0;
2395
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.05);
2396
}
2397
.list-row.activatable:active, .view:active, column-header .button:active, GtkPlacesSidebar.sidebar .has-open-popup {
2399
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0, color 0, background-image 0;
2400
animation: list_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
2401
box-shadow: inset 0 0 0 10000px alpha(currentColor, 0.15);
2402
}
2403
.list-row:selected .button:insensitive {
2405
color: rgba(255, 255, 255, 0.3);
2406
}
2407
.list-row:selected .button.flat {
2409
color: rgba(255, 255, 255, 0.7);
2410
}
2411
.list-row:selected .button.flat:hover, .list-row:selected .button.flat:active {
2413
color: #FFFFFF;
2414
}
2415
.list-row:selected .button.flat:insensitive {
2417
color: rgba(255, 255, 255, 0.3);
2418
}
2419
/*********************
2421
* App Notifications *
2422
*********************/
2423
/*************
2424
* Expanders *
2425
*************/
2426
.expander {
2427
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
2428
}
2429
.expander:dir(rtl) {
2431
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
2432
}
2433
.expander:checked {
2435
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
2436
}
2437
.expander:not(:hover):not(:active) {
2439
color: alpha(currentColor, 0.75);
2440
}
2441
.expander:selected {
2443
color: #FFFFFF;
2444
}
2445
/************
2447
* Calendar *
2448
***********/
2449
GtkCalendar {
2450
padding: 1px;
2451
border: 1px solid rgba(0, 0, 0, 0.1);
2452
color: rgba(0, 0, 0, 0.87);
2453
}
2454
GtkCalendar:insensitive {
2456
color: rgba(0, 0, 0, 0.38);
2457
}
2458
GtkCalendar:selected {
2460
border-radius: 3px;
2461
}
2462
GtkCalendar.header {
2464
border-style: none none solid;
2465
border-radius: 0;
2466
}
2467
GtkCalendar:inconsistent {
2469
color: alpha(currentColor, 0.5);
2470
}
2471
GtkCalendar.highlight {
2473
font-size: smaller;
2474
color: alpha(currentColor, 0.6);
2475
}
2476
/***********
2478
* Dialogs *
2479
***********/
2480
.message-dialog .dialog-action-area .button {
2481
padding: 8px;
2482
}
2483
.message-dialog.background {
2485
background-color: #FAFAFA;
2486
}
2487
.message-dialog .titlebar {
2489
border-style: none;
2490
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2491
background-color: #FAFAFA;
2492
}
2493
.message-dialog.csd.background {
2495
border-bottom-left-radius: 2px;
2496
border-bottom-right-radius: 2px;
2497
}
2498
.message-dialog.csd .dialog-action-area .button {
2500
padding: 9px 16px 10px;
2501
border-top: 1px solid rgba(0, 0, 0, 0.1);
2502
border-radius: 0;
2503
background-size: 240px 240px, auto;
2504
}
2505
.message-dialog.csd .dialog-action-area .button:first-child {
2507
border-radius: 0 0 0 2px;
2508
}
2509
.message-dialog.csd .dialog-action-area .button:last-child {
2511
border-radius: 0 0 2px 0;
2512
}
2513
GtkFileChooserDialog .dialog-action-box {
2515
border-top: 1px solid rgba(0, 0, 0, 0.1);
2516
}
2517
/***********
2519
* Sidebar *
2520
***********/
2521
.sidebar {
2522
border: none;
2523
background-color: #FAFAFA;
2524
}
2525
GtkSidebarRow.list-row {
2527
padding: 0px;
2528
}
2529
GtkSidebarRow .sidebar-revealer {
2531
padding: 4px 14px 4px 12px;
2532
}
2533
GtkSidebarRow .sidebar-icon {
2535
opacity: 0.6;
2536
}
2537
GtkSidebarRow .sidebar-icon:dir(ltr) {
2539
padding-right: 8px;
2540
}
2541
GtkSidebarRow .sidebar-icon:dir(rtl) {
2543
padding-left: 8px;
2544
}
2545
GtkSidebarRow .sidebar-label:dir(ltr) {
2547
padding-right: 2px;
2548
}
2549
GtkSidebarRow .sidebar-label:dir(rtl) {
2551
padding-left: 2px;
2552
}
2553
GtkPlacesSidebar.sidebar .sidebar-placeholder-row {
2555
border: solid 1px #42A5F5;
2556
}
2557
GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
2559
color: #FF4081;
2560
}
2561
.sidebar-button.button.image-button {
2563
padding: 4px;
2564
}
2565
.sidebar-item {
2567
padding: 10px 4px;
2568
}
2569
.sidebar-item > .label {
2571
padding-left: 6px;
2572
padding-right: 6px;
2573
}
2574
/****************
2576
* File chooser *
2577
****************/
2578
GtkPlacesView .server-list-button > GtkImage {
2579
-gtk-icon-transform: rotate(0turn);
2580
}
2581
GtkPlacesView .server-list-button:checked > GtkImage {
2583
-gtk-icon-transform: rotate(-0.5turn);
2584
}
2585
/*********
2587
* Paned *
2588
*********/
2589
GtkPaned {
2590
-GtkPaned-handle-size: 1;
2591
-gtk-icon-source: none;
2592
margin: 0 8px 8px 0;
2593
}
2594
GtkPaned:dir(rtl) {
2596
margin-right: 0;
2597
margin-left: 8px;
2598
}
2599
GtkPaned .pane-separator {
2601
background-color: rgba(0, 0, 0, 0.1);
2602
}
2603
GtkPaned.wide {
2605
-GtkPaned-handle-size: 6;
2606
margin: 0;
2607
}
2608
GtkPaned.wide .pane-separator {
2610
background-color: transparent;
2611
border-style: none solid;
2612
border-color: rgba(0, 0, 0, 0.1);
2613
border-width: 1px;
2614
}
2615
GtkPaned.wide.vertical .pane-separator {
2617
border-style: solid none;
2618
}
2619
/**************
2621
* GtkInfoBar *
2622
**************/
2623
GtkInfoBar {
2624
border-style: none;
2625
}
2626
.info {
2628
background-color: #66BB6A;
2629
}
2630
.question {
2632
background-color: #42A5F5;
2633
}
2634
.warning {
2636
background-color: #FFA726;
2637
}
2638
.error {
2640
background-color: #EF5350;
2641
}
2642
.info,
2644
.question,
2645
.warning,
2646
.error {
2647
color: #FFFFFF;
2648
}
2649
.info .button:insensitive,
2651
.question .button:insensitive,
2652
.warning .button:insensitive,
2653
.error .button:insensitive {
2654
color: rgba(255, 255, 255, 0.3);
2655
}
2656
/************
2658
* Tooltips *
2659
************/
2660
.tooltip {
2661
color: rgba(0, 0, 0, 0.87);
2662
padding: 4px;
2663
/* not working */
2664
border-radius: 2px;
2665
box-shadow: none;
2666
}
2667
.tooltip.background {
2669
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
2670
background-color: rgba(255, 255, 255, 0.9);
2671
}
2672
.tooltip.window-frame.csd {
2674
background-color: transparent;
2675
}
2676
.tooltip * {
2678
padding: 4px;
2679
background-color: transparent;
2680
color: inherit;
2681
}
2682
/*****************
2684
* Color Chooser *
2685
*****************/
2686
GtkColorSwatch {
2687
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2688
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2689
}
2690
GtkColorSwatch:insensitive {
2692
opacity: 0.5;
2693
box-shadow: none;
2694
}
2695
GtkColorSwatch.top {
2697
border-top-left-radius: 2px;
2698
border-top-right-radius: 2px;
2699
}
2700
GtkColorSwatch.bottom {
2702
border-bottom-left-radius: 2px;
2703
border-bottom-right-radius: 2px;
2704
}
2705
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
2707
border-top-left-radius: 2px;
2708
border-bottom-left-radius: 2px;
2709
}
2710
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
2712
border-top-right-radius: 2px;
2713
border-bottom-right-radius: 2px;
2714
}
2715
GtkColorSwatch:only-child:not(.overlay) {
2717
border-radius: 2px;
2718
}
2719
GtkColorSwatch.top > .overlay {
2721
border-top-left-radius: 2px;
2722
border-top-right-radius: 2px;
2723
}
2724
GtkColorSwatch.bottom > .overlay {
2726
border-bottom-left-radius: 2px;
2727
border-bottom-right-radius: 2px;
2728
}
2729
GtkColorSwatch:first-child:not(.top) > .overlay {
2731
border-top-left-radius: 2px;
2732
border-bottom-left-radius: 2px;
2733
}
2734
GtkColorSwatch:last-child:not(.bottom) > .overlay {
2736
border-top-right-radius: 2px;
2737
border-bottom-right-radius: 2px;
2738
}
2739
GtkColorSwatch:only-child > .overlay {
2741
border-radius: 2px;
2742
}
2743
GtkColorSwatch:hover {
2745
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2746
}
2747
GtkColorEditor GtkColorSwatch {
2749
border-radius: 2px;
2750
}
2751
GtkColorEditor GtkColorSwatch:hover {
2753
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2754
}
2755
GtkColorSwatch.color-dark {
2757
color: #FFFFFF;
2758
}
2759
GtkColorSwatch.color-light {
2761
color: rgba(0, 0, 0, 0.87);
2762
}
2763
GtkColorSwatch#add-color-button {
2765
background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%);
2766
color: #FFFFFF;
2767
}
2768
/********
2770
* Misc *
2771
********/
2772
.content-view {
2773
background-color: #F5F5F5;
2774
}
2775
.scale-popup .button {
2777
padding: 10px;
2778
}
2779
/**********************
2781
* Window Decorations *
2782
*********************/
2783
.window-frame {
2784
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
2785
border-radius: 2px 2px 0 0;
2786
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2787
/* this is used for the resize cursor area */
2788
margin: 8px;
2789
}
2790
.window-frame:backdrop {
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.tiled {
2796
border-radius: 0;
2797
}
2798
.window-frame.popup {
2800
box-shadow: none;
2801
}
2802
.window-frame.ssd {
2804
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
2805
}
2806
.window-frame.csd.popup {
2808
border-radius: 2px;
2809
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2810
}
2811
.window-frame.csd.tooltip {
2813
border-radius: 2px;
2814
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2815
}
2816
.window-frame.csd.message-dialog {
2818
border-radius: 2px;
2819
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
2820
}
2821
.window-frame.csd.message-dialog:backdrop {
2823
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2824
}
2825
.window-frame.solid-csd {
2827
border-radius: 0;
2828
margin: 0;
2829
background-color: #455A64;
2830
box-shadow: none;
2831
}
2832
.header-bar .button.titlebutton:active,
2834
.titlebar .button.titlebutton:active {
2835
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));
2836
}
2837
.view:selected, GtkCalendar:selected, .label:selected, .grid-child:selected, .entry:selected, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected {
2839
background-color: #42A5F5;
2840
color: #FFFFFF;
2841
}
2842
.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 {
2844
color: rgba(255, 255, 255, 0.5);
2845
}
2846
.monospace {
2848
font: Monospace;
2849
}
2850
/**********************
2852
* Touch Copy & Paste *
2853
*********************/
2854
.entry.cursor-handle,
2855
.cursor-handle {
2856
background-color: #FF4081;
2857
background-image: none;
2858
box-shadow: none;
2859
border-style: none;
2860
}
2861
.entry.cursor-handle.top:dir(ltr), .entry.cursor-handle.bottom:dir(rtl),
2863
.cursor-handle.top:dir(ltr),
2864
.cursor-handle.bottom:dir(rtl) {
2865
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start.png"), url("assets/text-select-start@2.png"));
2866
padding-left: 10px;
2867
}
2868
.entry.cursor-handle.bottom:dir(ltr), .entry.cursor-handle.top:dir(rtl),
2870
.cursor-handle.bottom:dir(ltr),
2871
.cursor-handle.top:dir(rtl) {
2872
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end.png"), url("assets/text-select-end@2.png"));
2873
padding-right: 10px;
2874
}
2875
.entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
2877
.cursor-handle.insertion-cursor:dir(ltr),
2878
.cursor-handle.insertion-cursor:dir(rtl) {
2879
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
2880
}
2881
.entry.cursor-handle.top:hover:dir(ltr), .entry.cursor-handle.bottom:hover:dir(rtl),
2883
.cursor-handle.top:hover:dir(ltr),
2884
.cursor-handle.bottom:hover:dir(rtl) {
2885
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start-hover.png"), url("assets/text-select-start-hover@2.png"));
2886
padding-left: 10px;
2887
}
2888
.entry.cursor-handle.bottom:hover:dir(ltr), .entry.cursor-handle.top:hover:dir(rtl),
2890
.cursor-handle.bottom:hover:dir(ltr),
2891
.cursor-handle.top:hover:dir(rtl) {
2892
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end-hover.png"), url("assets/text-select-end-hover@2.png"));
2893
padding-right: 10px;
2894
}
2895
.entry.cursor-handle.insertion-cursor:hover:dir(ltr), .entry.cursor-handle.insertion-cursor:hover:dir(rtl),
2897
.cursor-handle.insertion-cursor:hover:dir(ltr),
2898
.cursor-handle.insertion-cursor:hover:dir(rtl) {
2899
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider-hover.png"), url("assets/scale-horz-marks-before-slider-hover@2.png"));
2900
}
2901
.entry.cursor-handle.top:active:dir(ltr), .entry.cursor-handle.bottom:active:dir(rtl),
2903
.cursor-handle.top:active:dir(ltr),
2904
.cursor-handle.bottom:active:dir(rtl) {
2905
-gtk-icon-source: -gtk-scaled(url("assets/text-select-start-active.png"), url("assets/text-select-start-active@2.png"));
2906
padding-left: 10px;
2907
}
2908
.entry.cursor-handle.bottom:active:dir(ltr), .entry.cursor-handle.top:active:dir(rtl),
2910
.cursor-handle.bottom:active:dir(ltr),
2911
.cursor-handle.top:active:dir(rtl) {
2912
-gtk-icon-source: -gtk-scaled(url("assets/text-select-end-active.png"), url("assets/text-select-end-active@2.png"));
2913
padding-right: 10px;
2914
}
2915
.entry.cursor-handle.insertion-cursor:active:dir(ltr), .entry.cursor-handle.insertion-cursor:active:dir(rtl),
2917
.cursor-handle.insertion-cursor:active:dir(ltr),
2918
.cursor-handle.insertion-cursor:active:dir(rtl) {
2919
-gtk-icon-source: -gtk-scaled(url("assets/scale-horz-marks-before-slider-active.png"), url("assets/scale-horz-marks-before-slider-active@2.png"));
2920
}
2921
/* Decouple the font of context menus from their entry/textview */
2923
.context-menu {
2924
font: initial;
2925
}
2926
.touch-selection {
2928
font: initial;
2929
color: rgba(0, 0, 0, 0.87);
2930
background-color: #FFFFFF;
2931
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
2932
}
2933
.touch-selection:backdrop {
2935
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2936
}
2937
.overshoot.top {
2939
background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2940
background-repeat: no-repeat;
2941
background-position: center top;
2942
background-color: transparent;
2943
border: none;
2944
box-shadow: none;
2945
}
2946
.overshoot.bottom {
2948
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2949
background-repeat: no-repeat;
2950
background-position: center bottom;
2951
background-color: transparent;
2952
border: none;
2953
box-shadow: none;
2954
}
2955
.overshoot.left {
2957
background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2958
background-repeat: no-repeat;
2959
background-position: left center;
2960
background-color: transparent;
2961
border: none;
2962
box-shadow: none;
2963
}
2964
.overshoot.right {
2966
background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent));
2967
background-repeat: no-repeat;
2968
background-position: right center;
2969
background-color: transparent;
2970
border: none;
2971
box-shadow: none;
2972
}
2973
.undershoot.top {
2975
background-color: transparent;
2976
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2977
padding-top: 1px;
2978
background-size: 12px 1px;
2979
background-repeat: repeat-x;
2980
background-origin: content-box;
2981
background-position: left top;
2982
}
2983
.undershoot.bottom {
2985
background-color: transparent;
2986
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2987
padding-bottom: 1px;
2988
background-size: 12px 1px;
2989
background-repeat: repeat-x;
2990
background-origin: content-box;
2991
background-position: left bottom;
2992
}
2993
.undershoot.left {
2995
background-color: transparent;
2996
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
2997
padding-left: 1px;
2998
background-size: 1px 12px;
2999
background-repeat: repeat-y;
3000
background-origin: content-box;
3001
background-position: left top;
3002
}
3003
.undershoot.right {
3005
background-color: transparent;
3006
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.26) 50%);
3007
padding-right: 1px;
3008
background-size: 1px 12px;
3009
background-repeat: repeat-y;
3010
background-origin: content-box;
3011
background-position: right top;
3012
}
3013
.floating-bar {
3015
padding: 3px 0 4px;
3016
border-width: 1px;
3017
border-style: solid solid none;
3018
border-color: rgba(0, 0, 0, 0.1);
3019
border-radius: 3px 3px 0 0;
3020
background-color: #FFFFFF;
3021
background-clip: padding-box;
3022
}
3023
.floating-bar.left {
3025
border-left-style: none;
3026
border-top-left-radius: 0;
3027
}
3028
.floating-bar.right {
3030
border-right-style: none;
3031
border-top-right-radius: 0;
3032
}
3033
.floating-bar .button {
3035
padding: 4px;
3036
}
3037
/************
3039
* Nautilus *
3040
************/
3041
EelEditableLabel.entry {
3042
transition: none;
3043
}
3044
.nautilus-desktop.nautilus-canvas-item {
3046
color: #FFFFFF;
3047
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3048
}
3049
.nautilus-desktop.nautilus-canvas-item:selected {
3051
text-shadow: none;
3052
}
3053
/* Toolbar */
3055
@keyframes needs_attention_keyframes {
3056
0% {
3057
background-color: transparent;
3058
}
3059
50% {
3060
background-color: alpha(currentColor, 0.3);
3061
}
3062
100% {
3063
background-color: transparent;
3064
}
3065
}
3066
.nautilus-operations-button-needs-attention {
3068
color: #FF4081;
3069
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3070
}
3071
.nautilus-operations-button-needs-attention-multiple {
3073
color: #FF4081;
3074
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
3075
animation-iteration-count: 2;
3076
}
3077
.disk-space-display.unknown {
3079
background-color: #FF6D00;
3080
}
3081
.disk-space-display.used {
3083
background-color: #42A5F5;
3084
}
3085
.disk-space-display.free {
3087
background-color: alpha(currentColor, 0.3);
3088
color: rgba(0, 0, 0, 0.38);
3089
}
3090
/* View */
3092
/**************
3093
* Tweak Tool *
3094
**************/
3095
.tweak-categories {
3096
background-color: #FAFAFA;
3097
background-image: linear-gradient(to bottom, #FAFAFA);
3098
}
3099
.tweak-categories .separator {
3101
-GtkWidget-wide-separators: true;
3102
color: transparent;
3103
}
3104
/************
3106
* Software *
3107
************/
3108
.button.install-progress:insensitive {
3109
background-color: alpha(currentColor, 0.3);
3110
}
3111
/***********
3113
* Builder *
3114
***********/
3115
GbTerminalView {
3116
background-color: #FFFFFF;
3117
}
3118
/***********
3120
* Firefox *
3121
***********/
3122
.menubar {
3123
color: rgba(255, 255, 255, 0.7);
3124
}
3125
.menubar:hover {
3127
color: #FFFFFF;
3128
}
3129
/*********
3131
* Unity *
3132
*********/
3133
UnityDecoration {
3134
-UnityDecoration-extents: 28px 0 0 0;
3135
-UnityDecoration-input-extents: 8px;
3136
-UnityDecoration-shadow-offset-x: 0;
3137
-UnityDecoration-shadow-offset-y: 3px;
3138
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
3139
-UnityDecoration-active-shadow-radius: 18px;
3140
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
3141
-UnityDecoration-inactive-shadow-radius: 6px;
3142
-UnityDecoration-glow-size: 8px;
3143
-UnityDecoration-glow-color: #42A5F5;
3144
-UnityDecoration-title-indent: 4px;
3145
-UnityDecoration-title-fade: 32px;
3146
-UnityDecoration-title-alignment: 0.0;
3147
}
3148
UnityDecoration.top {
3150
padding: 0 2px;
3151
border-style: none;
3152
border-radius: 2px 2px 0 0;
3153
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
3154
background-color: #37474F;
3155
color: #FFFFFF;
3156
}
3157
UnityDecoration.top:backdrop {
3159
color: rgba(255, 255, 255, 0.7);
3160
}
3161
UnityDecoration.menuitem,
3163
UnityDecoration .menuitem {
3164
color: alpha(currentColor, 0.75);
3165
}
3166
UnityDecoration.menubar.menuitem:hover,
3168
UnityDecoration.menubar .menuitem *:hover {
3169
box-shadow: inset 0 -2px currentColor;
3170
background-color: transparent;
3171
color: currentColor;
3172
}
3173
.background:not(.csd) :not(.titlebar) .header-bar {
3175
border-radius: 0;
3176
box-shadow: none;
3177
}
3178
.background:not(.csd) :not(.titlebar) .header-bar.inline-toolbar {
3180
border-style: none;
3181
}
3182
UnityPanelWidget,
3184
.unity-panel {
3185
background-color: #263238;
3186
background-image: linear-gradient(to bottom, #263238);
3187
color: #FFFFFF;
3188
}
3189
UnityPanelWidget:backdrop,
3191
.unity-panel:backdrop {
3192
color: rgba(255, 255, 255, 0.7);
3193
}
3194
.unity-panel.menuitem,
3196
.unity-panel .menuitem {
3197
color: alpha(currentColor, 0.75);
3198
}
3199
.unity-panel.menubar.menuitem:hover,
3201
.unity-panel.menubar .menuitem *:hover {
3202
box-shadow: inset 0 -2px currentColor;
3203
background-color: transparent;
3204
color: currentColor;
3205
}
3206
@keyframes playbackmenuitem_spinner {
3208
to {
3209
-gtk-icon-transform: rotate(1turn);
3210
}
3211
}
3212
.menu IdoPlaybackMenuItem.menuitem:active {
3214
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
3215
animation: playbackmenuitem_spinner 1s infinite linear;
3216
color: #42A5F5;
3217
}
3218
/* GTK NAMED COLORS
3220
----------------
3221
use responsibly! */
3222
/*
3223
widget text/foreground color */
3224
@define-color theme_fg_color rgba(0, 0, 0, 0.87);
3225
/*
3226
text color for entries, views and content in general */
3227
@define-color theme_text_color rgba(0, 0, 0, 0.87);
3228
/*
3229
widget base background color */
3230
@define-color theme_bg_color #F5F5F5;
3231
/*
3232
text widgets and the like base background color */
3233
@define-color theme_base_color #FFFFFF;
3234
/*
3235
base background color of selections */
3236
@define-color theme_selected_bg_color #42A5F5;
3237
/*
3238
text/foreground color of selections */
3239
@define-color theme_selected_fg_color #FFFFFF;
3240
/*
3241
base background color of insensitive widgets */
3242
@define-color insensitive_bg_color #F5F5F5;
3243
/*
3244
text foreground color of insensitive widgets */
3245
@define-color insensitive_fg_color rgba(0, 0, 0, 0.38);
3246
/*
3247
insensitive text widgets and the like base background color */
3248
@define-color insensitive_base_color #FAFAFA;
3249
/*
3250
widget text/foreground color on backdrop windows */
3251
@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.87);
3252
/*
3253
text color for entries, views and content in general on backdrop windows */
3254
@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.87);
3255
/*
3256
widget base background color on backdrop windows */
3257
@define-color theme_unfocused_bg_color #F5F5F5;
3258
/*
3259
text widgets and the like base background color on backdrop windows */
3260
@define-color theme_unfocused_base_color #FFFFFF;
3261
/*
3262
base background color of selections on backdrop windows */
3263
@define-color theme_unfocused_selected_bg_color #42A5F5;
3264
/*
3265
text/foreground color of selections on backdrop windows */
3266
@define-color theme_unfocused_selected_fg_color #FFFFFF;
3267
/*
3268
insensitive color on backdrop windows */
3269
@define-color unfocused_insensitive_color rgba(0, 0, 0, 0.38);
3270
/*
3271
widgets main borders color */
3272
@define-color borders rgba(0, 0, 0, 0.1);
3273
/*
3274
widgets main borders color on backdrop windows */
3275
@define-color unfocused_borders rgba(0, 0, 0, 0.1);
3276
/*
3277
these are pretty self explicative */
3278
@define-color warning_color #FF6D00;
3279
@define-color error_color #DD2C00;
3280
@define-color success_color #00C853;
3281
/*
3282
FIXME this is really an API */
3283
@define-color content_view_bg #FFFFFF;
3284
@define-color placeholder_text_color #757575;
3285