ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: $overlay-checked;
35
}
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px $overlay-hover;
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px rgba($primary, 0.08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
}
112
border {
114
background-color: $base-alt;
115
color: $text2; // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: on(dark);
126
text-shadow: $text-shadow;
127
}
128
.rubberband,
130
rubberband {
131
border: 1px solid on(dark, primary);
132
background-color: rgba(on(dark, primary), 0.3);
133
}
134
flowbox {
136
rubberband {
137
@extend rubberband;
138
}
139
flowboxchild {
141
padding: 4px;
142
border-radius: $corner-radius;
143
&:selected {
145
@extend %selected_items;
146
}
147
}
148
}
149
.content-view .tile {
151
// margin: 2px;
152
// padding: 0;
153
// border-radius: 0;
154
// background-color: black;
155
&:selected {
157
background-color: transparent;
158
}
159
}
160
label {
162
caret-color: currentColor; // this shouldn't be needed.
163
&.separator {
165
color: $text2;
166
}
167
selection {
169
@extend %selected_items;
170
}
171
&:disabled {
173
color: $text-disabled;
174
headerbar &,
176
menuitem &,
177
tab &,
178
button & {
179
color: inherit;
180
}
181
}
182
&.osd {
184
border-radius: $corner-radius;
185
background-color: $tooltip;
186
color: on($tooltip);
187
}
188
}
189
.dim-label {
191
color: $text2;
192
}
193
assistant {
195
.sidebar {
196
padding: 4px 0;
197
// background-color: $base;
198
}
199
.sidebar label {
201
min-height: $medium-size;
202
padding: 0 12px;
203
color: $text-disabled;
204
font-weight: 500;
205
&.highlight {
207
color: $text;
208
}
209
}
210
}
211
%osd,
213
.osd {
214
// opacity: .9;
215
}
216
/*********************
219
* Spinner Animation *
220
*********************/
221
@keyframes spin {
222
to {
223
-gtk-icon-transform: rotate(1turn);
224
}
225
}
226
spinner {
228
background: none;
229
opacity: 0; // non spinning spinner makes no sense
230
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
231
&:checked {
233
opacity: 1;
234
animation: spin 1s linear infinite;
235
&:disabled { opacity: 0.5; }
237
}
238
}
239
/****************
242
* Text Entries *
243
****************/
244
%entry,
245
entry {
246
min-height: $medium-size;
247
padding: 0 8px;
248
border-radius: $corner-radius $corner-radius 0 0;
249
caret-color: currentColor; // this shouldn't be needed.
250
@include entry(normal);
252
&:focus {
254
@include entry(checked);
255
}
256
&:drop(active) {
258
@include entry(hover);
259
}
260
&:disabled {
262
@include entry(disabled);
263
}
264
&.flat {
266
min-height: 0;
267
padding: 2px;
268
border-radius: 0;
269
background-color: transparent;
270
}
271
// icons inside the entry
273
image {
274
// min-height: $small-size;
275
// min-width: $small-size;
276
// border-radius: $circular-radius;
277
// @extend %ripple;
278
// @include ink-color($text2);
279
color: $text2;
280
&:hover,
282
&:active {
283
color: $text;
284
}
285
&:disabled {
287
color: $text-disabled;
288
}
289
&.left {
291
margin-left: ($medium-size - 16px) / 2 - 8px;
292
margin-right: 6px;
293
}
294
&.right {
296
margin-left: 6px;
297
margin-right: ($medium-size - 16px) / 2 - 8px;
298
}
299
}
300
undershoot {
302
&.left {
303
@include undershoot(left);
304
}
305
&.right {
307
@include undershoot(right);
308
}
309
}
310
selection {
312
@extend %selected_items;
313
}
314
// entry error and warning style
316
@each $class, $color in (".error": $error, ".warning": $warning) {
317
&#{$class} {
318
@include entry(normal, $color);
319
&:focus {
321
@include entry(checked, $color);
322
}
323
&:disabled {
325
@include entry(disabled, $color);
326
}
327
}
328
}
329
.osd & {
331
}
332
progress {
334
margin: 2px -8px;
335
border-bottom: 2px solid $primary;
336
background-color: transparent;
337
}
338
// linked entries
340
.linked:not(.vertical) > & {
341
@extend %linked;
342
}
343
// Vertically linked entries
345
.linked.vertical > & {
346
@extend %linked-vertical;
347
}
348
}
349
%entry_raised {
351
border-radius: $corner-radius;
352
@include entry(raised-normal);
354
&:focus {
356
@include entry(raised-focus);
357
}
358
&:drop(active) {
360
@include entry(raised-hover);
361
}
362
&:disabled {
364
@include entry(raised-disabled);
365
}
366
// entry error and warning style
368
@each $class, $color in (".error": $error, ".warning": $warning) {
369
&#{$class} {
370
@include entry(raised-normal, $color);
371
&:focus {
373
@include entry(raised-focus, $color);
374
}
375
&:disabled {
377
@include entry(raised-disabled, $color);
378
}
379
image {
381
color: on($color, text2);
382
&:hover,
384
&:active {
385
color: on($color);
386
}
387
&:disabled {
389
color: on($color, text-disabled);
390
}
391
}
392
}
393
}
394
}
395
treeview entry {
397
&,
398
&.flat {
399
background-color: $base;
400
&,
402
&:focus {
403
border-image: none;
404
box-shadow: none;
405
}
406
}
407
}
408
.entry-tag {
410
margin: 2px;
411
border-radius: $circular-radius;
412
box-shadow: none;
413
background-color: $fill;
414
color: $text;
415
&:hover {
417
background-image: image($overlay-hover);
418
}
419
// side margins: compensate the entry padding with a negative margin
421
// then the negative margin itself
422
:dir(ltr) & {
423
margin-left: 4px;
424
margin-right: 0;
425
padding-left: 12px;
426
padding-right: 8px;
427
}
428
:dir(rtl) & {
430
margin-left: 0;
431
margin-right: 4px;
432
padding-left: 8px;
433
padding-right: 12px;
434
}
435
// seems any sizing doesn't work
437
&.button {
438
box-shadow: none;
439
background-color: transparent;
440
color: $text2;
441
}
442
}
443
/***********
446
* Buttons *
447
***********/
448
// stuff for .needs-attention
449
@keyframes needs-attention {
450
from {
451
background-image:
452
-gtk-gradient(
453
radial,
454
center center, 0,
455
center center, .001,
456
to($primary),
457
to(transparent)
458
);
459
}
460
to {
462
background-image:
463
-gtk-gradient(
464
radial,
465
center center, 0,
466
center center, .5,
467
to($primary),
468
to(transparent)
469
);
470
}
471
}
472
%button,
474
button {
475
min-height: 24px;
476
min-width: 16px;
477
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
478
border-radius: $corner-radius;
479
background-color: $surface;
480
color: $text;
481
font-weight: 500;
482
@extend %ripple;
484
@include raised-ink-color($text);
485
&:disabled {
487
box-shadow: none;
488
background-color: $fill;
489
color: $text-disabled;
490
}
491
&:checked {
493
background-color: mix($primary, $surface, percentage($overlay-checked-opacity + .04));
494
color: $primary;
495
@include raised-ink-color($primary);
496
&:disabled {
498
box-shadow: inset 0 0 0 9999px $overlay-checked;
499
background-color: $fill;
500
color: $text-disabled;
501
}
502
}
503
&.text-button {
505
min-width: 64px - 16px * 2;
506
padding-left: 16px;
507
padding-right: 16px;
508
}
509
&.image-button {
511
min-width: 24px;
512
padding: ($medium-size - 24px) / 2;
513
border-radius: $circular-radius;
514
}
515
// NOTE: Some image-only buttons use this as well
517
&.text-button.image-button {
518
min-width: 24px;
519
padding: ($medium-size - 24px) / 2;
520
border-radius: $corner-radius;
521
label {
523
&:first-child {
524
margin-left: 16px - ($medium-size - 24px) / 2;
525
}
526
&:last-child {
528
margin-right: 16px - ($medium-size - 24px) / 2;
529
}
530
}
531
image:not(:only-child) {
533
margin: 0 (24px - 16px) / 2;
534
}
535
}
536
.linked:not(.vertical) > & {
538
@extend %linked;
539
&.image-button:not(.text-button) {
541
@extend %linked-image-button;
542
}
543
}
544
.linked.vertical > & {
546
@extend %linked-vertical;
547
&.image-button:not(.text-button) {
549
@extend %linked-vertical-image-button;
550
}
551
}
552
}
553
%button-flat-basic {
555
background-color: transparent;
556
@include ink-color($text2);
557
&:disabled {
559
background-color: transparent;
560
color: $text2-disabled;
561
}
562
}
563
%button-flat-activatable {
565
@extend %button-flat-basic;
566
&:checked {
568
background-color: $overlay-checked;
569
color: $text;
570
@include ink-color($text);
571
&:disabled {
573
color: $text-disabled;
574
}
575
}
576
}
577
%button-flat,
579
button.flat {
580
@extend %button-flat-activatable;
581
&.text-button {
583
min-width: 64px - 8px * 2;
584
padding-left: 8px;
585
padding-right: 8px;
586
}
587
&.text-button.image-button {
589
min-width: 24px;
590
padding: ($medium-size - 24px) / 2;
591
label {
593
&:first-child {
594
margin-left: 12px - ($medium-size - 24px) / 2;
595
}
596
&:last-child {
598
margin-right: 12px - ($medium-size - 24px) / 2;
599
}
600
}
601
}
602
.linked:not(.vertical) > &,
604
.linked.vertical > & {
605
&:not(:only-child) { // specificity bump
606
border-radius: $corner-radius;
607
&.image-button:not(.text-button) {
609
border-radius: $circular-radius;
610
}
611
}
612
}
613
}
614
button {
616
// big standalone buttons like in Documents pager
617
&.osd {
618
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
619
&.image-button {
621
padding: ($large-size - 24px) / 2;
622
}
623
&:disabled {
625
opacity: 0;
626
}
627
}
628
// overlay / OSD style
630
@at-root %osd_button,
631
.osd & {
632
}
633
// Suggested and Destructive Action buttons
635
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
636
&#{$class} {
637
background-color: $color;
638
color: on($color);
639
@include raised-ink-color(on($color));
640
&:disabled {
642
box-shadow: none;
643
background-color: $fill;
644
color: $text-disabled;
645
}
646
&:checked {
648
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
649
}
650
&.flat {
652
background-color: transparent;
653
@include ink-color($color);
654
&:disabled {
656
box-shadow: none;
657
background-color: transparent;
658
color: $text2-disabled;
659
}
660
&:checked {
662
background-color: rgba($color, $overlay-checked-opacity);
663
}
664
}
665
.osd & {
667
}
668
}
669
}
670
.stack-switcher > & {
672
// to position the needs attention dot, padding is added to the button
673
// child, a label needs just lateral padding while an icon needs vertical
674
// padding added too.
675
> label {
677
margin: 0 -6px;
678
padding: 0 6px;
679
}
680
> image {
682
margin: -3px -6px;
683
padding: 3px 6px;
684
}
685
&.needs-attention {
687
> label,
688
> image {
689
@extend %needs-attention;
690
}
691
&:checked {
693
> label,
694
> image {
695
animation: none;
696
background-image: none;
697
}
698
}
699
}
700
}
701
// hide separators
703
&.font,
704
&.file {
705
separator {
706
@extend %hide_separators;
707
}
708
}
709
&.font {
711
> box > box > label {
712
// font-weight: bold;
713
}
714
}
715
// inline-toolbar buttons
717
.inline-toolbar & {
718
// @extend %button-flat;
719
&:not(.text-button) {
721
border-radius: $circular-radius;
722
}
723
}
724
.primary-toolbar & {
726
-gtk-icon-shadow: none; // tango icons don't need shadows
727
}
728
&.close,
730
&.circular { // The Bloody Circul Button
731
border-radius: $circular-radius;
732
label {
734
// padding: 0;
735
}
736
}
737
}
738
%button-small {
740
min-height: $small-size;
741
min-width: $small-size;
742
padding: 0;
743
border-radius: $circular-radius;
744
}
745
%needs-attention {
747
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
748
background-repeat: no-repeat;
749
background-position: right 3px;
750
background-size: 6px 6px;
751
&:dir(rtl) {
753
background-position: left 3px;
754
}
755
}
756
// all the following is for the +|- buttons on inline toolbars, that way
758
// should really be deprecated...
759
.inline-toolbar toolbutton > button {
760
}
761
// More inline toolbar buttons
763
toolbar.inline-toolbar toolbutton {
764
&:not(:first-child) > button.flat {
765
// @extend %linked-not-first-child;
766
}
767
&:not(:last-child) > button.flat {
769
// @extend %linked-not-last-child;
770
}
771
}
772
%linked-not-first-child {
774
border-top-left-radius: 0;
775
border-bottom-left-radius: 0;
776
}
777
%linked-not-last-child {
779
border-top-right-radius: 0;
780
border-bottom-right-radius: 0;
781
}
782
%linked {
784
&:not(:first-child) {
785
@extend %linked-not-first-child;
786
}
787
&:not(:last-child) {
789
@extend %linked-not-last-child;
790
}
791
}
792
%linked-vertical-not-first-child {
794
border-top-left-radius: 0;
795
border-top-right-radius: 0;
796
}
797
%linked-vertical-not-last-child {
799
border-bottom-left-radius: 0;
800
border-bottom-right-radius: 0;
801
}
802
%linked-vertical {
804
&:not(:first-child) {
805
@extend %linked-vertical-not-first-child;
806
}
807
&:not(:last-child) {
809
@extend %linked-vertical-not-last-child;
810
}
811
}
812
%linked-image-button {
814
&:first-child {
815
border-top-left-radius: $corner-radius;
816
border-bottom-left-radius: $corner-radius;
817
}
818
&:last-child {
820
border-top-right-radius: $corner-radius;
821
border-bottom-right-radius: $corner-radius;
822
}
823
&:only-child {
825
border-radius: $circular-radius;
826
}
827
}
828
%linked-vertical-image-button {
830
&:first-child {
831
border-top-left-radius: $corner-radius;
832
border-top-right-radius: $corner-radius;
833
}
834
&:last-child {
836
border-bottom-left-radius: $corner-radius;
837
border-bottom-right-radius: $corner-radius;
838
}
839
&:only-child {
841
border-radius: $circular-radius;
842
}
843
}
844
/* menu buttons */
846
modelbutton.flat,
847
.menuitem.button.flat {
848
min-height: $menuitem-size;
849
padding: 0 8px;
850
border-radius: $corner-radius;
851
@extend %ripple;
853
@include ink-color($text, $fg: false);
854
&:selected {
856
@extend %selected_items;
857
}
858
}
859
modelbutton.flat arrow {
861
&.left {
862
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
863
}
864
&.right {
866
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
867
}
868
}
869
button.color {
871
min-height: $small-size;
872
min-width: $small-size;
873
padding: $container-padding;
874
colorswatch:only-child {
876
&,
877
overlay {
878
// border-radius: 0;
879
}
880
}
881
}
882
/*********
885
* Links *
886
*********/
887
*:link {
888
color: $primary;
889
}
890
*:visited {
892
color: $visited;
893
}
894
button.link {
896
&:link {
897
@include ink-color($primary);
898
}
899
&:visited {
901
@include ink-color($visited);
902
}
903
> label {
905
text-decoration-line: underline;
906
}
907
}
908
/*****************
910
* GtkSpinButton *
911
*****************/
912
spinbutton {
913
&:not(.vertical) {
914
// in this horizontal configuration, the whole spinbutton
915
// behaves as the entry, so we extend the entry styling
916
// and nuke the style on the internal entry
917
@extend %entry;
918
padding: 0;
920
entry {
922
min-width: $large-size - 8px * 2;
923
// reset all the other props since the spinbutton node is styled here
924
margin: 0;
925
border-image: none;
926
border-radius: 0;
927
box-shadow: none;
928
background-color: transparent;
929
}
930
button {
932
@extend %button-flat-basic;
933
@extend %button-small;
934
// margin: $container-padding;
936
border: solid $container-padding transparent;
937
// Remove unwanted focus indicator
939
&:focus:not(:hover):not(:active) {
940
box-shadow: inset 0 0 0 9999px transparent;
941
}
942
&.up:dir(ltr),
944
&.down:dir(rtl) {
945
margin-left: -$container-padding / 2;
946
}
947
&.up:dir(rtl),
949
&.down:dir(ltr) {
950
margin-right: -$container-padding / 2;
951
}
952
}
953
}
954
// OSD horizontal
956
.osd &:not(.vertical) {
957
}
958
// Vertical
960
&.vertical {
961
// in the vertical configuration, we treat the spinbutton
962
// as a box, and tweak the style of the entry in the middle
963
// so that it's linked
964
// FIXME: this should not be set at all, but otherwise it gets the wrong
966
// color
967
&:disabled {
968
color: $text-disabled;
969
}
970
entry {
972
@extend %entry_raised;
973
min-height: $medium-size;
975
min-width: $large-size;
976
padding: 0;
977
}
978
button {
980
min-height: $medium-size;
981
min-width: $large-size;
982
padding: 0;
983
@extend %button-flat-basic;
985
// Remove unwanted focus indicator
987
&:focus:not(:hover):not(:active) {
988
box-shadow: inset 0 0 0 9999px transparent;
989
}
990
&.up {
992
border-radius: $corner-radius $corner-radius 0 0;
993
}
994
&.down {
996
border-radius: 0 0 $corner-radius $corner-radius;
997
}
998
}
999
}
1000
// OSD vertical
1002
.osd &.vertical {
1003
}
1004
// Misc
1006
treeview &:not(.vertical) {
1007
min-height: 0;
1008
border-style: none;
1009
border-radius: 0;
1010
entry {
1012
min-height: 0;
1013
padding: 1px 2px;
1014
}
1015
}
1016
}
1017
/**************
1020
* ComboBoxes *
1021
**************/
1022
combobox {
1023
arrow {
1024
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1025
min-height: 16px;
1026
min-width: 16px;
1027
}
1028
// workaround for menuitem selection
1030
decoration {
1031
transition: none;
1032
}
1033
button.combo cellview {
1035
&:dir(ltr) {
1036
margin-left: 8px - ($medium-size - 16px) / 2;
1037
}
1038
&:dir(rtl) {
1040
margin-right: 8px - ($medium-size - 16px) / 2;
1041
}
1042
}
1043
menu {
1045
padding: 2px 0;
1046
menuitem {
1048
min-height: $medium-size - 2px * 2;
1049
padding: 0 8px;
1050
}
1051
// overflow arrows
1053
> arrow {
1054
&.top {
1055
margin-top: -2px;
1056
}
1057
&.bottom {
1059
margin-top: 2px * 2;
1060
margin-bottom: -2px * 3;
1061
}
1062
}
1063
}
1064
&.linked {
1066
button:nth-child(2) {
1067
&:dir(ltr) {
1068
@extend %linked-not-first-child;
1069
}
1070
&:dir(rtl) {
1072
@extend %linked-not-last-child;
1073
}
1074
}
1075
}
1076
> .linked:not(.vertical) > entry:not(:only-child) {
1078
border-radius: $corner-radius $corner-radius 0 0;
1079
&:first-child {
1081
margin-right: -$medium-size;
1082
padding-right: $medium-size;
1083
}
1084
&:last-child {
1086
margin-left: -$medium-size;
1087
padding-left: $medium-size;
1088
}
1089
}
1090
> .linked:not(.vertical) > button:not(:only-child) {
1092
@extend %button-flat-activatable;
1093
// @extend %button-small;
1094
min-height: 16px;
1096
min-width: 16px;
1097
margin: ($medium-size - $small-size) / 2;
1098
padding: ($small-size - 16px) / 2;
1099
border-radius: $circular-radius;
1100
}
1101
}
1102
// the combo is a composite widget so the way we do button linking doesn't
1104
// work, special case needed. See
1105
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1106
.linked:not(.vertical) > combobox {
1108
&:not(:first-child) > box > button.combo {
1109
@extend %linked-not-first-child;
1110
}
1111
&:not(:last-child) > box > button.combo {
1113
@extend %linked-not-last-child;
1114
}
1115
}
1116
.linked.vertical > combobox {
1118
&:not(:first-child) > box > button.combo {
1119
@extend %linked-vertical-not-first-child;
1120
}
1121
&:not(:last-child) > box > button.combo {
1123
@extend %linked-vertical-not-last-child;
1124
}
1125
}
1126
button.combo:only-child {
1128
border-radius: $corner-radius $corner-radius 0 0;
1129
font-weight: normal;
1130
@include entry(normal);
1132
&:focus {
1134
@include entry(focus);
1135
}
1136
&:drop(active),
1138
&:hover {
1139
@include entry(hover);
1140
}
1141
&:checked {
1143
@include entry(checked);
1144
}
1145
&:disabled {
1147
@include entry(disabled);
1148
}
1149
}
1150
/************
1153
* Toolbars *
1154
************/
1155
toolbar {
1156
-GtkWidget-window-dragging: true;
1157
padding: 2px;
1158
background-color: $background;
1159
button {
1161
@extend %button-flat;
1162
}
1163
// on OSD
1165
.osd & {
1166
background-color: transparent;
1167
}
1168
// stand-alone OSD toolbars
1170
&.osd {
1171
@extend %toolbar-osd;
1172
// positional classes for `attached` osd toolbars
1174
&.left,
1175
&.right,
1176
&.top,
1177
&.bottom {
1178
border-radius: 0;
1179
}
1180
&.bottom {
1182
box-shadow: none;
1183
background-color: transparent;
1184
background-image:
1185
linear-gradient(
1186
to bottom,
1187
transparent,
1188
rgba(black, .1) 30%,
1189
rgba(black, .2) 50%,
1190
rgba(black, .4)
1191
);
1192
}
1193
}
1194
// toolbar separators
1196
&.horizontal > separator {
1197
margin: 2px;
1198
}
1199
&.vertical > separator {
1201
margin: 2px;
1202
}
1203
&:not(.inline-toolbar):not(.osd) {
1205
scale,
1206
entry,
1207
spinbutton,
1208
button {
1209
margin: 2px;
1210
}
1211
.linked entry,
1213
.linked spinbutton,
1214
.linked button {
1215
&:not(:first-child) {
1216
margin-left: 0;
1217
}
1218
&:not(:last-child) {
1220
margin-right: 0;
1221
}
1222
}
1223
spinbutton {
1225
entry,
1226
button {
1227
margin: 0;
1228
}
1229
}
1230
switch {
1232
margin: 2px + $container-padding 2px;
1233
}
1234
}
1235
}
1236
%toolbar-osd {
1238
transition: $transition-shadow;
1239
padding: $container-padding;
1240
border-radius: $corner-radius;
1241
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1242
background-color: $surface;
1243
&:backdrop {
1245
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1246
}
1247
}
1248
// searchbar, location-bar & inline-toolbar
1250
.inline-toolbar {
1251
padding: $container-padding;
1252
border-style: solid;
1253
border-width: 0 1px 1px;
1254
border-color: $divider;
1255
background-color: $base-alt;
1256
}
1257
searchbar > revealer > box,
1259
.location-bar {
1260
padding: $container-padding;
1261
border-style: solid;
1262
border-width: 0 0 1px;
1263
border-color: $divider;
1264
background-color: $background;
1265
background-clip: border-box;
1266
}
1267
searchbar > revealer > box {
1269
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1270
margin: -6px;
1271
padding: $container-padding;
1272
}
1273
/***************
1276
* Header bars *
1277
***************/
1278
.titlebar {
1279
transition: background-color $duration $ease-out, color $duration $ease-out;
1280
border-radius: $corner-radius $corner-radius 0 0;
1281
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1282
background-color: $titlebar;
1283
color: $titlebar-text;
1284
&:disabled {
1286
color: $titlebar-text-disabled;
1287
}
1288
&:backdrop {
1290
background-color: $titlebar-backdrop;
1291
color: $titlebar-text2;
1292
&:disabled {
1294
color: $titlebar-text2-disabled;
1295
}
1296
}
1297
.title {
1299
padding-left: 12px;
1300
padding-right: 12px;
1301
font-weight: bold;
1302
}
1303
.subtitle {
1305
padding-left: 12px;
1306
padding-right: 12px;
1307
font-size: smaller;
1308
}
1309
.subtitle,
1311
.dim-label {
1312
transition: color $duration $ease-out;
1313
color: $titlebar-text2;
1314
&:backdrop {
1316
color: $titlebar-text-disabled;
1317
}
1318
}
1319
// Don't draw titlebar above titlebar
1321
.titlebar {
1322
background-color: transparent;
1323
box-shadow: none;
1324
}
1325
// The separator for split headerbars
1327
headerbar + separator {
1328
background-color: $titlebar-divider;
1329
}
1330
entry {
1332
box-shadow: inset 0 -1px $titlebar-stroke;
1333
background-color: $titlebar-entry-fill;
1334
color: $titlebar-text;
1335
&:disabled {
1337
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1338
background-color: $titlebar-entry-fill;
1339
color: $titlebar-text-disabled;
1340
}
1341
image {
1343
color: $titlebar-text2;
1344
&:hover,
1346
&:active {
1347
color: $titlebar-text;
1348
}
1349
&:disabled {
1351
color: $titlebar-text-disabled;
1352
}
1353
}
1354
}
1355
.linked:not(.vertical) > entry:not(:only-child) {
1357
border-radius: $corner-radius $corner-radius 0 0;
1358
}
1359
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1361
@extend %button-flat;
1362
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1364
$titlebar-indicator 0%,
1365
transparent 0%)
1366
0 0 0 / 0 0 0px;
1367
@include ink-color($titlebar-text2);
1369
&:disabled {
1371
color: $titlebar-text2-disabled;
1372
}
1373
@at-root %titlebar-button-checked,
1375
&:checked {
1376
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1377
$titlebar-indicator 100%,
1378
transparent 0%)
1379
0 0 2 / 0 0 2px;
1380
background-color: transparent;
1381
color: $titlebar-text;
1382
@include ink-color($titlebar-text);
1383
&:disabled {
1385
background-color: transparent;
1386
color: $titlebar-text-disabled;
1387
}
1388
}
1389
&:backdrop {
1391
color: $titlebar-text-disabled;
1392
&:disabled {
1394
color: $titlebar-text2-disabled;
1395
}
1396
&:checked {
1398
color: $titlebar-text2;
1399
&:disabled {
1401
color: $titlebar-text2-disabled;
1402
}
1403
}
1404
}
1405
}
1406
button.suggested-action, button.destructive-action {
1408
&:disabled {
1409
background-color: $titlebar-fill;
1410
color: $titlebar-text-disabled;
1411
}
1412
}
1413
// FIXME: Ugly overriding
1415
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1416
min-width: 120px - 8px * 2;
1417
}
1418
// FIXME: Ugly overriding
1420
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1421
min-width: 0;
1422
padding-left: ($medium-size - 24px) / 2;
1423
padding-right: ($medium-size - 24px) / 2;
1424
}
1425
&.selection-mode {
1427
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1428
// but let's keep it for backwards compatibility.
1429
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1430
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1431
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1432
background-color: $primary;
1433
color: on($primary);
1434
&:backdrop {
1436
color: on($primary, text2);
1437
}
1438
.subtitle:link {
1440
color: on($primary);
1441
}
1442
button:not(.suggested-action):not(.destructive-action) {
1444
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1445
currentColor 0%,
1446
transparent 0%)
1447
0 0 0 / 0 0 0px;
1448
color: on($primary);
1449
&:disabled {
1451
color: on($primary, text-disabled);
1452
}
1453
&:checked {
1455
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1456
currentColor 100%,
1457
transparent 0%)
1458
0 0 2 / 0 0 2px;
1459
color: on($primary);
1460
&:disabled {
1462
color: on($primary, text-disabled);
1463
}
1464
}
1465
&:backdrop {
1467
color: on($primary, text2);
1468
&:disabled {
1470
color: on($primary, text2-disabled);
1471
}
1472
&:checked {
1474
color: on($primary, text2);
1475
&:disabled {
1477
color: on($primary, text2-disabled);
1478
}
1479
}
1480
}
1481
}
1482
.selection-menu {
1484
padding-left: 16px;
1485
padding-right: 16px;
1486
arrow {
1488
-GtkArrow-arrow-scaling: 1;
1489
}
1490
.arrow {
1492
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1493
}
1494
}
1495
}
1496
.selection-mode {
1498
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1499
background-color: $primary;
1500
}
1501
// squared corners when the window is maximized, tiled, or fullscreen
1503
.tiled &,
1504
.tiled-top &,
1505
.tiled-right &,
1506
.tiled-bottom &,
1507
.tiled-left &,
1508
.maximized &,
1509
.fullscreen & {
1510
border-radius: 0;
1511
box-shadow: $shadow-z1;
1512
}
1513
&.default-decoration {
1515
min-height: $small-size;
1516
padding: $container-padding;
1517
box-shadow: inset 0 1px highlight($titlebar);
1518
.tiled &,
1520
.maximized &,
1521
.fullscreen & {
1522
box-shadow: none;
1523
}
1524
button.titlebutton {
1526
min-height: $small-size;
1527
min-width: $small-size;
1528
margin: 0;
1529
padding: 0;
1530
}
1531
// workaround for non-animatable buttons
1533
.background:not(.csd) & button.titlebutton:active {
1534
background-size: 1000% 1000%;
1535
}
1536
}
1537
.solid-csd & {
1539
&:dir(rtl), &:dir(ltr) { // specificity bump
1540
border-radius: 0;
1541
box-shadow: $shadow-z1; // just remove the highlight
1542
}
1543
}
1544
}
1545
headerbar {
1547
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1548
min-height: $large-size;
1549
padding: 0 $container-padding;
1550
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1552
entry,
1553
spinbutton,
1554
button {
1555
margin-top: $container-padding;
1556
margin-bottom: $container-padding;
1557
}
1558
separator.titlebutton {
1560
margin-top: $large-size / 4;
1561
margin-bottom: $large-size / 4;
1562
background-color: $titlebar-divider;
1563
}
1564
switch {
1566
margin-top: ($large-size - 24px) / 2;
1567
margin-bottom: ($large-size - 24px) / 2;
1568
}
1569
// reset button margins of the spinbutton
1571
spinbutton button {
1572
margin-top: 0;
1573
margin-bottom: 0;
1574
}
1575
// FIXME: This is a hacky workaround.
1577
.entry-tag {
1578
margin-top: 5px;
1579
margin-bottom: 5px;
1580
}
1581
}
1582
// Development versions of apps to use a differently styled headerbar
1584
window.devel .titlebar:not(.selection-mode) {
1585
}
1586
/************
1589
* Pathbars *
1590
************/
1591
%pathbar_button,
1592
.path-bar.linked:not(.vertical) > button {
1593
@extend %button-flat-basic;
1594
padding-left: ($medium-size - 24px) / 2;
1596
padding-right: ($medium-size - 24px) / 2;
1597
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1598
$primary 0%,
1599
transparent 0%)
1600
0 0 0 / 0 0 0px;
1601
border-radius: $corner-radius;
1602
&:checked {
1604
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1605
$primary 100%,
1606
transparent 0%)
1607
0 0 2 / 0 0 2px;
1608
color: $text;
1609
&,
1611
&:disabled {
1612
background-color: transparent;
1613
}
1614
}
1615
label:not(:only-child) {
1617
&:first-child {
1618
margin-left: 0;
1619
}
1620
&:last-child {
1622
margin-right: 0;
1623
}
1624
}
1625
&.text-button {
1627
min-width: 0;
1628
}
1629
&.slider-button {
1631
padding-left: (24px - 16px) / 2;
1632
padding-right: (24px - 16px) / 2;
1633
}
1634
}
1635
/**************
1638
* Tree Views *
1639
**************/
1640
treeview.view {
1641
@at-root * {
1642
-GtkTreeView-horizontal-separator: 4;
1643
-GtkTreeView-grid-line-width: 1;
1644
-GtkTreeView-grid-line-pattern: '';
1645
-GtkTreeView-tree-line-width: 1;
1646
-GtkTreeView-tree-line-pattern: '';
1647
-GtkTreeView-expander-size: 16;
1648
}
1649
border-left-color: $stroke; // this is actually the tree lines color,
1651
border-top-color: $divider; // while this is the grid lines color, better then nothing
1652
// FIXME: Avoid transparency background-color being slightly darker
1654
&:selected {
1655
background-color: $base;
1656
background-image: image($overlay-selected);
1657
}
1658
// to avoid borders being overridden by the previously set props
1660
rubberband {
1661
@extend rubberband;
1662
}
1663
&:hover,
1665
&:selected {
1666
border-radius: 0;
1667
}
1668
&.separator {
1670
min-height: 1px + 2px * 2;
1671
color: $divider;
1672
}
1673
&:drop(active) {
1675
// FIXME: box-shadow, background-color and background-image are not available here.
1676
border-style: solid none;
1677
border-width: 9999px;
1678
border-color: $overlay-hover;
1679
&.after {
1681
border-top-style: none;
1682
}
1683
&.before {
1685
border-bottom-style: none;
1686
}
1687
}
1688
&.expander {
1690
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1691
-gtk-icon-transform: rotate(-90deg);
1692
&:dir(rtl) {
1694
-gtk-icon-transform: rotate(90deg);
1695
}
1696
&:checked {
1698
-gtk-icon-transform: unset;
1699
}
1700
color: $text2;
1702
&:hover,
1704
&:active {
1705
color: $text;
1706
}
1707
&:disabled {
1709
color: $text2-disabled;
1710
}
1711
}
1712
&.progressbar { // progress bar in treeviews
1714
border-bottom: $bar-size solid $primary;
1715
box-shadow: none;
1716
background-color: transparent;
1717
background-image: none;
1718
&:selected:hover {
1720
box-shadow: none;
1721
}
1722
}
1723
&.trough { // progress bar trough in treeviews
1725
border-bottom: $bar-size solid $stroke-disabled;
1726
box-shadow: none;
1727
background-color: transparent;
1728
background-image: none;
1729
&:selected:hover {
1731
box-shadow: none;
1732
}
1733
}
1734
header {
1736
button {
1737
padding: 2px 6px;
1738
border-style: none solid solid none;
1739
border-width: 1px;
1740
border-color: $divider;
1741
border-radius: 0;
1742
background-clip: border-box;
1743
color: $text2;
1744
@include ink-color($text2);
1745
@include list-item;
1746
&:disabled {
1748
color: $text2-disabled;
1749
}
1750
&,
1752
&:disabled {
1753
background-color: $base;
1754
}
1755
&:last-child {
1757
border-right-style: none;
1758
}
1759
}
1760
}
1761
button.dnd,
1763
header.button.dnd { // for treeview-like derive widgets
1764
padding: 2px 6px;
1765
border-style: none solid solid;
1766
border-width: 1px;
1767
border-color: $divider;
1768
border-radius: 0;
1769
box-shadow: none;
1770
background-color: $base;
1771
background-clip: border-box;
1772
color: $primary;
1773
}
1774
// see tests/testaccel to test
1776
acceleditor > label {
1777
background-color: $primary;
1778
}
1779
}
1780
/*********
1783
* Menus *
1784
*********/
1785
menubar,
1786
.menubar {
1787
-GtkWidget-window-dragging: true;
1788
padding: 0;
1789
// box-shadow: inset 0 -1px $divider;
1790
background-color: $titlebar;
1791
color: $titlebar-text;
1792
&:backdrop {
1794
background-color: $titlebar-backdrop;
1795
color: $titlebar-text2;
1796
}
1797
.csd & {
1799
transition: $transition;
1800
}
1801
> menuitem {
1803
transition: $transition;
1804
min-height: 20px;
1805
padding: 4px 8px;
1806
color: $titlebar-text2;
1807
&:hover { // Seems like it :hover even with keyboard focus
1809
transition: none;
1810
background-color: $overlay-checked;
1811
color: $titlebar-text;
1812
}
1813
&:disabled {
1815
color: $titlebar-text2-disabled;
1816
}
1817
}
1818
}
1819
// Needed to make the border-radius of menus work
1821
// otherwise the background bleeds out of the menu edges
1822
.background.popup {
1823
background-color: transparent;
1824
}
1825
menu,
1827
.menu,
1828
.context-menu {
1829
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1830
padding: 4px 0;
1831
box-shadow: inset 0 1px highlight($surface);
1832
background-color: $surface;
1833
background-clip: border-box;
1834
border: 1px solid $divider; // adds borders in a non composited env
1835
.csd & {
1837
border: none; // axes borders in a composited env
1838
border-radius: $corner-radius;
1839
}
1840
menuitem {
1842
transition: background-color $duration $ease-out;
1843
min-height: 20px;
1844
min-width: 40px;
1845
padding: 4px 8px;
1846
color: $text;
1847
font: initial;
1848
text-shadow: none;
1849
&:hover {
1851
transition: none;
1852
background-color: $overlay-hover;
1853
}
1854
&:disabled {
1856
color: $text-disabled;
1857
}
1858
// submenu indicators
1860
arrow {
1861
min-height: 16px;
1862
min-width: 16px;
1863
color: $text2;
1864
&:disabled {
1866
color: $text2-disabled;
1867
}
1868
&:dir(ltr) {
1870
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1871
margin-left: 8px;
1872
}
1873
&:dir(rtl) {
1875
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1876
margin-right: 8px;
1877
}
1878
}
1879
// avoids labels color being overridden, see
1881
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1882
label {
1883
&:dir(rtl),
1884
&:dir(ltr) {
1885
// color: inherit;
1886
}
1887
}
1888
}
1889
// overflow arrows
1891
> arrow {
1892
min-height: 16px;
1893
min-width: 16px;
1894
padding: 4px;
1895
background-color: $surface;
1896
color: $text2;
1897
&.top {
1899
margin-top: -4px;
1900
border-bottom: 1px solid $divider;
1901
border-radius: $corner-radius $corner-radius 0 0;
1902
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1903
}
1904
&.bottom {
1906
margin-top: 4px * 2;
1907
margin-bottom: -4px * 3;
1908
border-top: 1px solid $divider;
1909
border-radius: 0 0 $corner-radius $corner-radius;
1910
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1911
}
1912
&:hover {
1914
background-image: image($overlay-hover);
1915
}
1916
&:disabled {
1918
border-color: transparent;
1919
background-color: transparent;
1920
color: transparent;
1921
// color: $text2-disabled;
1922
}
1923
}
1924
separator {
1926
margin: 4px 0;
1927
}
1928
}
1929
menuitem {
1931
accelerator {
1932
color: $text2;
1933
}
1934
&:disabled accelerator {
1936
color: $text2-disabled;
1937
}
1938
}
1939
/************
1942
* Popovers *
1943
************/
1944
popover.background {
1945
transition: $transition-shadow;
1946
padding: 2px;
1947
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1948
background-color: $surface;
1949
&:backdrop {
1951
box-shadow: $shadow-z2;
1952
}
1953
&, .csd & {
1955
border-style: solid;
1956
border-width: 1px;
1957
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1958
border-radius: $corner-radius + 1px;
1959
}
1960
> stack {
1962
margin: -4px; // remove extra padding from menu style popovers
1963
}
1964
> toolbar {
1966
margin: -2px;
1967
}
1968
> list,
1970
> .view,
1971
> toolbar {
1972
border-style: none;
1973
box-shadow: none;
1974
background-color: transparent;
1975
}
1976
// FIXME: Use the popover color instead of transparent as a workaround for .view
1978
list,
1979
.view:not(:selected),
1980
toolbar {
1981
background-color: $surface;
1982
}
1983
&.touch-selection,
1985
&.magnifier,
1986
&.osd {
1987
// @extend %osd;
1988
}
1989
button:not(.suggested-action):not(.destructive-action) {
1991
// @extend %button-flat;
1992
}
1993
.linked:not(.vertical) > entry:not(:only-child) {
1995
// border-radius: $corner-radius $corner-radius 0 0;
1996
}
1997
&.menu button,
1999
button.model {
2000
@extend %button-flat;
2001
min-height: 32px;
2003
padding: 0 8px;
2004
border-radius: $corner-radius;
2005
&:checked {
2007
// color: $primary;
2008
}
2009
}
2010
separator {
2012
margin: 4px 0;
2013
}
2014
list separator {
2016
margin: 0;
2017
}
2018
}
2019
/*************
2021
* Notebooks *
2022
*************/
2023
notebook {
2024
frame > paned > & > header,
2025
&.frame > header {
2026
background-color: $base-alt;
2027
}
2028
&:focus tab:checked {
2030
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2031
}
2032
> header {
2034
border-width: 1px;
2035
border-color: $divider;
2036
background-color: $background;
2037
background-clip: border-box;
2038
&.top {
2040
border-bottom-style: solid;
2041
> tabs {
2043
margin-bottom: -1px;
2044
> tab {
2046
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2047
&:checked {
2049
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2050
}
2051
&.reorderable-page {
2053
border-image-width: 0 1px 2px;
2054
}
2055
}
2056
}
2057
}
2058
&.bottom {
2060
border-top-style: solid;
2061
> tabs {
2063
margin-top: -1px;
2064
> tab {
2066
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2067
&:checked {
2069
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2070
}
2071
&.reorderable-page {
2073
border-image-width: 2px 1px 0;
2074
}
2075
}
2076
}
2077
}
2078
&.left {
2080
border-right-style: solid;
2081
> tabs {
2083
margin-right: -1px;
2084
> tab {
2086
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2087
&:checked {
2089
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2090
}
2091
&.reorderable-page {
2093
border-image-width: 1px 2px 1px 0;
2094
}
2095
}
2096
}
2097
}
2098
&.right {
2100
border-left-style: solid;
2101
> tabs {
2103
margin-left: -1px;
2104
> tab {
2106
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2107
&:checked {
2109
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2110
}
2111
&.reorderable-page {
2113
border-image-width: 1px 0 1px 2px;
2114
}
2115
}
2116
}
2117
}
2118
&.top > tabs > arrow {
2120
@extend %notebook_vert_arrows;
2121
border-top-style: none;
2123
}
2124
&.bottom > tabs > arrow {
2126
@extend %notebook_vert_arrows;
2127
border-bottom-style: none;
2129
}
2130
@at-root %notebook_vert_arrows {
2132
padding-left: 4px;
2133
padding-right: 4px;
2134
&.down {
2136
margin-left: -8px;
2137
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2138
}
2139
&.up {
2141
margin-right: -8px;
2142
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2143
}
2144
}
2145
&.left > tabs > arrow {
2147
@extend %notebook_horz_arrows;
2148
border-left-style: none;
2150
}
2151
&.right > tabs > arrow {
2153
@extend %notebook_horz_arrows;
2154
border-right-style: none;
2156
}
2157
@at-root %notebook_horz_arrows {
2159
padding-top: 4px;
2160
padding-bottom: 4px;
2161
&.down {
2163
margin-top: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2165
}
2166
&.up {
2168
margin-bottom: -8px;
2169
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2170
}
2171
}
2172
> tabs > arrow {
2174
min-height: 16px;
2175
min-width: 16px;
2176
border-radius: 0;
2177
@extend %ripple;
2179
@include ink-color($text2);
2180
&:disabled {
2182
color: $text2-disabled;
2183
}
2184
}
2185
tab {
2187
transition: $transition,
2188
background-size 0ms,
2189
background-image 0ms;
2190
min-height: $small-size;
2191
min-width: $small-size;
2192
padding: $container-padding 12px;
2193
border-width: 1px; // for reorderable tabs
2195
border-color: transparent; //
2196
outline: none;
2198
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2199
background-repeat: no-repeat;
2200
background-position: center;
2201
background-size: 0% 0%;
2202
background-clip: border-box;
2203
color: $text2;
2205
font-weight: 500;
2206
&:hover {
2208
background-color: $overlay-hover;
2209
}
2210
&:disabled {
2212
color: $text2-disabled;
2213
}
2214
&:checked {
2216
transition: $transition,
2217
background-size $ripple-fade-in-duration $ease-out,
2218
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2219
background-color: transparent;
2220
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2221
background-size: 1000% 1000%;
2222
background-clip: padding-box;
2223
color: $text;
2224
&:disabled {
2226
color: $text-disabled;
2227
}
2228
&.reorderable-page {
2230
border-color: $divider;
2231
background-color: $base;
2232
}
2233
}
2234
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2236
> box {
2237
transition: background-color $duration $ease-out;
2238
margin: -$container-padding -12px;
2239
padding: $container-padding 12px;
2240
&:drop(active) {
2242
background-color: $overlay-hover;
2243
}
2244
}
2245
// colors the button like the label, overridden otherwise
2247
button.flat {
2248
@extend %button-small;
2249
&:last-child {
2251
margin-left: $container-padding;
2252
margin-right: $container-padding - 12px;
2253
}
2254
&:first-child {
2256
margin-left: $container-padding - 12px;
2257
margin-right: $container-padding;
2258
}
2259
}
2260
}
2261
&.top,
2263
&.bottom {
2264
tabs {
2265
padding-left: 8px;
2266
padding-right: 8px;
2267
&:not(:only-child) {
2269
&:first-child {
2270
margin-left: 0;
2271
}
2272
&:last-child {
2274
margin-right: 0;
2275
}
2276
}
2277
tab.reorderable-page {
2279
border-style: none solid;
2280
}
2281
}
2282
}
2283
&.left,
2285
&.right {
2286
tabs {
2287
padding-top: 8px;
2288
padding-bottom: 8px;
2289
&:not(:only-child) {
2291
&:first-child {
2292
margin-top: 0;
2293
}
2294
&:last-child {
2296
margin-bottom: 0;
2297
}
2298
}
2299
tab.reorderable-page {
2301
border-style: solid none;
2302
}
2303
}
2304
}
2305
}
2306
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2308
background-color: $base;
2309
}
2310
}
2311
/**************
2314
* Scrollbars *
2315
**************/
2316
scrollbar {
2317
$_slider_min_length: 24px;
2318
// disable steppers
2320
@at-root * {
2321
-GtkScrollbar-has-backward-stepper: false;
2322
-GtkScrollbar-has-forward-stepper: false;
2323
}
2324
transition: $transition;
2326
background-color: $base;
2327
// scrollbar border
2329
&.top { border-bottom: 1px solid $divider; }
2330
&.bottom { border-top: 1px solid $divider; }
2331
&.left { border-right: 1px solid $divider; }
2332
&.right { border-left: 1px solid $divider; }
2333
// slider
2335
slider {
2336
transition: background-color $duration $ease-out;
2337
min-width: 8px;
2338
min-height: 8px;
2339
border: 4px solid transparent;
2340
border-radius: $circular-radius;
2341
background-clip: padding-box;
2342
background-color: $text-disabled;
2343
&:hover {
2345
background-color: $text2;
2346
}
2347
&:active {
2349
background-color: $text;
2350
}
2351
&:disabled {
2353
background-color: $text2-disabled;
2354
}
2355
}
2356
&.fine-tune {
2358
slider {
2359
min-width: 4px;
2360
min-height: 4px;
2361
}
2362
&.horizontal slider {
2364
margin: 2px 0;
2365
}
2366
&.vertical slider {
2368
margin: 0 2px;
2369
}
2370
}
2371
&.overlay-indicator {
2373
&:not(.fine-tune) slider {
2374
transition-property: background-color, min-height, min-width;
2375
}
2376
&:not(.dragging):not(.hovering) {
2378
border-color: transparent;
2379
background-color: transparent;
2380
slider {
2382
min-width: 4px;
2383
min-height: 4px;
2384
margin: 4px - 1px;
2385
border: 1px solid rgba($base, 0.3);
2386
}
2387
button {
2389
min-width: 4px;
2390
min-height: 4px;
2391
margin: 4px - 1px;
2392
border: 1px solid rgba($base, 0.3);
2393
border-radius: $circular-radius;
2394
background-color: $text-disabled;
2395
background-clip: padding-box;
2396
-gtk-icon-source: none;
2397
&:disabled {
2399
background-color: $text2-disabled;
2400
}
2401
}
2402
&.horizontal {
2404
slider {
2405
min-width: $_slider_min_length;
2406
}
2407
button {
2409
min-width: 8px;
2410
}
2411
}
2412
&.vertical {
2414
slider {
2415
min-height: $_slider_min_length;
2416
}
2417
button {
2419
min-height: 8px;
2420
}
2421
}
2422
}
2423
&.dragging,
2425
&.hovering {
2426
background-color: rgba($surface, 0.9);
2427
}
2428
}
2429
&.horizontal slider {
2431
min-width: $_slider_min_length;
2432
}
2433
&.vertical slider {
2435
min-height: $_slider_min_length;
2436
}
2437
// button styling
2439
button {
2440
@extend %button-flat-basic;
2441
min-width: 16px;
2443
min-height: 16px;
2444
padding: 0;
2445
border-radius: 0;
2446
}
2447
// button icons
2449
&.vertical {
2450
button {
2451
&.down {
2452
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2453
}
2454
&.up {
2456
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2457
}
2458
}
2459
}
2460
&.horizontal {
2462
button {
2463
&.down {
2464
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2465
}
2466
&.up {
2468
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2469
}
2470
}
2471
}
2472
}
2473
/**********
2476
* Switch *
2477
**********/
2478
switch {
2479
transition: all $duration $ease-out;
2480
margin: $container-padding 0;
2481
padding: 0 2px;
2482
border: 5px solid transparent;
2483
border-radius: $circular-radius;
2484
background-color: $stroke;
2485
background-clip: padding-box;
2486
font-size: 0;
2487
&:checked {
2489
background-color: rgba($primary, 0.5);
2490
}
2491
&:disabled {
2493
opacity: 0.5;
2494
}
2495
// hide on/off icons for >=3.24.5
2497
image {
2498
margin: -8px;
2499
-gtk-icon-transform: scale(0);
2500
}
2501
slider {
2503
transition: all $duration $ease-out;
2504
min-width: 20px;
2505
min-height: 20px;
2506
margin: -3px -2px;
2507
border-radius: $circular-radius;
2508
outline: none;
2509
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2510
background-color: $switch-surface;
2511
}
2512
&:hover slider {
2514
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2515
}
2516
&:focus slider {
2518
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2519
}
2520
&:checked slider {
2522
background-color: $primary;
2523
color: $primary;
2524
}
2525
row:selected & {
2527
}
2528
}
2529
/*************************
2532
* Check and Radio items *
2533
*************************/
2534
// draw regular check and radio items using our PNG assets
2535
// all assets are rendered from assets.svg. never add pngs directly
2536
// selection-mode
2538
.view.content-view.check:not(list),
2539
.content-view:not(list) .tile check {
2540
min-height: 40px;
2541
min-width: 40px;
2542
margin: 0;
2543
padding: 0;
2544
box-shadow: none;
2545
background-color: transparent;
2546
background-image: none;
2547
-gtk-icon-shadow: $icon-shadow-z2;
2548
&:hover,
2550
&:active {
2551
-gtk-icon-shadow: $icon-shadow-z4;
2552
}
2553
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2555
&#{$class} {
2556
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2557
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2559
}
2560
}
2561
}
2562
checkbutton,
2564
radiobutton {
2565
outline: none;
2566
}
2567
checkbutton.text-button,
2569
radiobutton.text-button {
2570
// this is for a nice focus on check and radios text
2571
padding: 2px;
2572
label:not(:only-child) {
2574
margin: 0 4px;
2575
}
2576
}
2577
$check-radio-size: 40px;
2579
check,
2581
radio {
2582
min-height: 24px;
2583
min-width: 24px;
2584
margin: -($check-radio-size - 24px) / 2;
2585
padding: ($check-radio-size - 24px) / 2;
2586
border-radius: $circular-radius;
2587
@extend %ripple;
2589
@include ink-color($text2);
2590
&:checked,
2592
&:indeterminate {
2593
@include ink-color($primary);
2594
}
2595
&:disabled {
2597
color: $text2-disabled;
2598
}
2599
&:only-child {
2601
// margin: -12px;
2602
}
2603
popover modelbutton.flat & {
2605
&,
2606
&:focus,
2607
&:hover,
2608
&:focus:hover,
2609
&:active,
2610
&:disabled {
2611
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2612
box-shadow: none;
2613
background-image: none;
2614
}
2615
&.left:dir(rtl) {
2617
margin-left: -12px;
2618
margin-right: -4px;
2619
}
2620
&.right:dir(ltr) {
2622
margin-left: -4px;
2623
margin-right: -12px;
2624
}
2625
}
2626
menu menuitem & {
2628
transition: none;
2629
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2630
padding: 0;
2631
&:dir(ltr) {
2633
margin-right: 8px;
2634
}
2635
&:dir(rtl) {
2637
margin-left: 8px;
2638
}
2639
&,
2641
&:hover,
2642
&:disabled {
2643
box-shadow: none;
2644
}
2645
}
2646
}
2647
%check,
2649
check {
2650
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2651
&:checked {
2653
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2654
}
2655
&:indeterminate {
2657
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2658
}
2659
}
2660
%radio,
2662
radio {
2663
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2664
&:checked {
2666
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2667
}
2668
&:indeterminate {
2670
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2671
}
2672
border-image-slice: $check-radio-size / 2px;
2674
border-image-width: $check-radio-size / 2;
2675
$radio-indicator-size: 10px / $check-radio-size / 2;
2677
border-image-source:
2679
-gtk-gradient(
2680
radial,
2681
center center, 0,
2682
center center, .001,
2683
to($primary),
2684
to(transparent)
2685
);
2686
&:checked:not(:indeterminate) {
2688
border-image-source:
2689
-gtk-gradient(
2690
radial,
2691
center center, 0,
2692
center center, $radio-indicator-size,
2693
to($primary),
2694
to(transparent)
2695
);
2696
&:disabled {
2698
border-image-source:
2699
-gtk-gradient(
2700
radial,
2701
center center, 0,
2702
center center, $radio-indicator-size,
2703
to($text2-disabled),
2704
to(transparent)
2705
);
2706
}
2707
}
2708
}
2709
%small_check,
2711
menu menuitem check {
2712
min-height: 16px;
2713
min-width: 16px;
2714
border-radius: $corner-radius;
2715
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2716
&:checked {
2718
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2719
}
2720
&:indeterminate {
2722
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2723
}
2724
}
2725
%small_radio,
2727
menu menuitem radio {
2728
min-height: 16px;
2729
min-width: 16px;
2730
border-image: none;
2731
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2732
&:checked {
2734
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2735
}
2736
&:indeterminate {
2738
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2739
}
2740
}
2741
// ANIMATION:
2743
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2744
// the transformation is set on the active state and it get reset on the checked state.
2745
radio:not(:checked):active {
2746
// -gtk-icon-transform: scale(0);
2747
}
2748
// Otherwise, treeview.view styling will be applied...
2750
treeview.view check,
2751
treeview.view radio {
2752
padding: 0;
2753
color: $text2;
2754
&:checked,
2756
&:indeterminate {
2757
color: $primary;
2758
}
2759
&:disabled {
2761
color: $text2-disabled;
2762
}
2763
&,
2765
&:hover,
2766
&:selected,
2767
&:selected:hover {
2768
box-shadow: none;
2769
background-color: transparent;
2770
}
2771
}
2772
treeview.view radio:checked {
2774
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2775
border-image: none;
2776
}
2777
/************
2780
* GtkScale *
2781
************/
2782
scale {
2783
// sizing
2784
$_marks_length: 8px;
2785
$_marks_distance: 7px;
2786
$trough_size: 2px;
2788
$finetune_trough_size: 4px;
2789
$slider_size: 32px;
2791
$slider_margin: -($slider_size - $trough_size) / 2;
2793
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2794
$color_slider_margin: -($slider_size) * 3 / 4;
2796
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2797
min-height: $trough_size;
2799
min-width: $trough_size;
2800
&.horizontal {
2802
padding: ($medium-size - $trough_size) / 2 12px;
2803
}
2804
&.vertical {
2806
padding: 12px ($medium-size - $trough_size) / 2;
2807
}
2808
// the slider is inside the trough, so to have make it bigger there's a negative margin
2810
slider {
2811
min-height: $slider_size;
2812
min-width: $slider_size;
2813
margin: $slider_margin;
2814
}
2815
// click-and-hold the slider to activate
2817
&.fine-tune {
2818
&.horizontal {
2819
min-height: $finetune_trough_size;
2820
padding-top: ($medium-size - $finetune_trough_size) / 2;
2821
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2822
}
2823
&.vertical {
2825
min-width: $finetune_trough_size;
2826
padding-left: ($medium-size - $finetune_trough_size) / 2;
2827
padding-right: ($medium-size - $finetune_trough_size) / 2;
2828
}
2829
// to make the trough grow in fine-tune mode
2831
slider {
2832
margin: $finetune_slider_margin;
2833
}
2834
}
2835
// the backing bit
2837
trough {
2838
transition: background-color $duration $ease-out;
2839
outline: none;
2840
background-color: $stroke;
2841
&:disabled {
2843
background-color: $stroke-disabled;
2844
}
2845
}
2846
// the colored part of the backing bit
2848
highlight {
2849
transition: background-image $duration $ease-out;
2850
background-image: image($primary);
2851
&:disabled {
2853
background-color: $background;
2854
background-image: image($text2-disabled);
2855
}
2856
}
2857
// this is another differently styled part of the backing bit, the most relevant use case is for example
2859
// in media player to indicate how much video stream as been cached
2860
fill {
2861
transition: background-color $duration $ease-out;
2862
background-color: $stroke;
2863
&:disabled {
2865
background-color: transparent;
2866
}
2867
}
2868
slider {
2870
transition: background-color $duration $ease-out,
2871
background-size $ripple-fade-out-duration $ease-out,
2872
background-image $ripple-fade-out-opacity-duration $ease-out;
2873
background-repeat: no-repeat;
2874
background-position: center;
2875
background-size: auto, 1000% 1000%;
2876
border-radius: 50%;
2877
color: $primary;
2878
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2880
&#{$class} {
2881
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2882
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2884
radial-gradient(circle, transparent 10%, transparent 0%);
2885
}
2886
}
2887
&:hover {
2889
background-color: $overlay-hover;
2890
}
2891
&:focus {
2893
background-color: $overlay-focus;
2894
}
2895
&:active {
2897
$_url: 'assets/scale-slider#{$asset-suffix}';
2898
transition: background-color $duration $ease-out,
2900
background-size 0ms,
2901
background-image 0ms;
2902
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2903
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2904
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2905
background-size: auto, 0% 0%;
2906
}
2907
}
2908
marks,
2910
value {
2911
color: $text2;
2912
}
2913
indicator {
2915
background-color: $stroke;
2916
color: transparent;
2917
}
2918
//marks margins
2920
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2921
(horizontal, bottom, bottom, top),
2922
(vertical, top, left, right),
2923
(vertical, bottom, right, left) {
2924
&.#{$scale_orient} marks {
2925
&.#{$marks_class} {
2926
margin-#{$marks_margin}: $_marks_distance;
2927
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2928
}
2929
}
2930
&.#{$scale_orient}.fine-tune marks {
2932
&.#{$marks_class} {
2933
margin-#{$marks_margin}: $_marks_distance - 1px;
2934
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2935
}
2936
}
2937
}
2938
&.horizontal {
2940
indicator {
2941
min-height: $_marks_length;
2942
min-width: 1px;
2943
}
2944
}
2945
&.vertical {
2947
indicator {
2948
min-height: 1px;
2949
min-width: $_marks_length;
2950
}
2951
}
2952
// *WARNING* scale with marks madness following
2954
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2956
@each $marks_class, $marks_infix in (
2957
".marks-before:not(.marks-after)": "-marks-before",
2958
".marks-after:not(.marks-before)": "-marks-after"
2959
) {
2960
&#{$dir_class}#{$marks_class} {
2961
slider {
2962
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2963
&#{$state_class} {
2964
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2965
background-image:
2967
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2968
radial-gradient(circle, transparent 10%, transparent 0%);
2969
}
2970
}
2971
&:active {
2973
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2974
background-image:
2976
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2977
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2978
}
2979
}
2980
}
2981
}
2982
}
2983
&.color {
2985
min-height: 0;
2986
min-width: 0;
2987
&.horizontal {
2989
padding: 0 0 12px 0;
2990
slider {
2992
&:dir(ltr), &:dir(rtl) { // specificity bump
2993
margin-bottom: $color_slider_margin;
2994
margin-top: $color_marks_slider_margin;
2995
}
2996
}
2997
}
2998
&.vertical {
3000
&:dir(ltr) {
3001
padding: 0 0 0 12px;
3002
slider {
3004
margin-left: $color_slider_margin;
3005
margin-right: $color_marks_slider_margin;
3006
}
3007
}
3008
&:dir(rtl) {
3010
padding: 0 12px 0 0;
3011
slider {
3013
margin-right: $color_slider_margin;
3014
margin-left: $color_marks_slider_margin;
3015
}
3016
}
3017
}
3018
}
3019
}
3020
/*****************
3023
* Progress bars *
3024
*****************/
3025
progressbar {
3026
// sizing
3027
&.horizontal {
3028
trough,
3029
progress {
3030
min-height: $bar-size;
3031
}
3032
}
3033
&.vertical {
3035
trough,
3036
progress {
3037
min-width: $bar-size;
3038
}
3039
}
3040
// FIXME: insensitive state missing and some other state should be set probably
3042
color: $text2;
3043
font-size: smaller;
3044
trough {
3046
background-color: $stroke-disabled;
3047
}
3048
progress {
3050
background-color: $primary;
3051
}
3052
&.osd { // progressbar.osd used for epiphany page loading progress
3054
// min-width: $bar-size;
3055
// min-height: $bar-size;
3056
// background-color: transparent;
3057
trough {
3059
// background-color: transparent;
3060
}
3061
progress {
3063
// background-color: $primary;
3064
}
3065
}
3066
// makes the progress indicator disappear, when the fraction is 0
3068
trough.empty progress {
3069
all: unset;
3070
}
3071
}
3072
/*************
3075
* Level Bar *
3076
*************/
3077
levelbar {
3078
&.horizontal {
3079
block {
3080
min-height: $bar-size;
3081
}
3082
&.discrete block {
3084
min-width: $medium-size;
3085
&:not(:last-child) {
3087
margin-right: 2px;
3088
}
3089
}
3090
}
3091
&.vertical {
3093
block {
3094
min-width: $bar-size;
3095
}
3096
&.discrete block {
3098
min-height: $medium-size;
3099
&:not(:last-child) {
3101
margin-bottom: 2px;
3102
}
3103
}
3104
}
3105
// imitate the entry style
3107
trough {
3108
// padding: 2px;
3109
// border-radius: $corner-radius;
3110
// box-shadow: $shadow-z1;
3111
// background-color: $base;
3112
&:disabled {
3114
// background-color: $base-alt;
3115
}
3116
}
3117
block {
3119
&.low {
3120
background-color: $warning;
3121
}
3122
&.high,
3124
&:not(.empty) {
3125
background-color: $primary;
3126
}
3127
&.full {
3129
background-color: $success;
3130
}
3131
&.empty {
3133
background-color: $stroke-disabled;
3134
}
3135
}
3136
}
3137
/****************
3140
* Print dialog *
3141
*****************/
3142
printdialog {
3143
paper {
3144
padding: 0;
3145
border: 1px solid $divider;
3146
background-color: $base;
3147
color: $text;
3148
}
3149
.dialog-action-box {
3151
margin: 12px;
3152
}
3153
}
3154
/**********
3157
* Frames *
3158
**********/
3159
frame > border,
3160
.frame {
3161
margin: 0;
3162
padding: 0;
3163
border: 1px solid $divider;
3164
border-radius: 0;
3165
box-shadow: none;
3166
&.flat {
3168
border-style: none;
3169
}
3170
}
3171
// for backward compatibility
3173
frame.flat > border {
3174
border-style: none;
3175
}
3176
actionbar > revealer > box {
3178
padding: $container-padding;
3179
border-top: 1px solid $divider;
3180
background-color: $base;
3181
background-clip: border-box;
3182
button:not(.suggested-action):not(.destructive-action) {
3184
@extend %button-flat;
3185
}
3186
.linked:not(.vertical) > entry:not(:only-child) {
3188
border-radius: $corner-radius $corner-radius 0 0;
3189
}
3190
}
3191
scrolledwindow {
3193
viewport.frame { // avoid double borders when viewport inside scrolled window
3194
border-style: none;
3195
}
3196
// This is used when content is touch-dragged past boundaries.
3198
// draws a box on top of the content, the size changes programmatically.
3199
@at-root overshoot {
3200
&.top { @include overshoot(top); }
3201
&.bottom { @include overshoot(bottom); }
3203
&.left { @include overshoot(left); }
3205
&.right { @include overshoot(right); }
3207
}
3208
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3210
@at-root undershoot {
3211
&.top { @include undershoot(top); }
3212
&.bottom { @include undershoot(bottom); }
3214
&.left { @include undershoot(left); }
3216
&.right { @include undershoot(right); }
3218
}
3219
@at-root junction { // the small square between two scrollbars
3221
border-style: solid none none solid;
3222
border-width: 1px;
3223
border-color: $divider;
3224
background-color: $base;
3225
&:dir(rtl) {
3227
border-style: solid solid none none;
3228
}
3229
}
3230
}
3231
// vbox and hbox separators
3233
separator {
3234
min-width: 1px;
3235
min-height: 1px;
3236
background-color: $divider;
3237
}
3238
%hide_separators {
3240
min-width: 0;
3241
min-height: 0;
3242
background-color: transparent;
3243
}
3244
/*********
3247
* Lists *
3248
*********/
3249
list {
3250
border-color: $divider;
3251
background-color: $base;
3252
row {
3254
padding: 2px;
3255
}
3256
}
3257
row {
3259
&.activatable {
3260
@extend %ripple;
3261
@include ink-color($text, $fg: false);
3262
@include list-item;
3263
// this is for indicathing which row generated a popover
3265
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3266
&.has-open-popup {
3267
background-color: $overlay-checked;
3268
}
3269
}
3270
&:selected {
3272
@extend %selected_items;
3273
@include ink-color($primary, $fg: false);
3275
}
3276
}
3277
/*********************
3280
* App Notifications *
3281
*********************/
3282
.app-notification {
3283
// @extend %osd;
3284
@extend %toolbar-osd;
3286
margin: 8px;
3288
button {
3290
@extend %button-flat;
3291
&.text-button:not(:disabled) {
3293
@include ink-color($primary);
3294
}
3295
}
3296
&.frame,
3298
border {
3299
border-style: none;
3300
}
3301
}
3302
/*************
3305
* Expanders *
3306
*************/
3307
expander {
3308
title > arrow {
3309
transition: all $duration $ease-out;
3310
min-width: 16px;
3311
min-height: 16px;
3312
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3313
-gtk-icon-transform: rotate(-90deg);
3314
&:dir(rtl) {
3316
-gtk-icon-transform: rotate(90deg);
3317
}
3318
&:checked {
3320
-gtk-icon-transform: unset;
3321
}
3322
color: $text2;
3324
&:hover,
3326
&:active {
3327
color: $text;
3328
}
3329
&:disabled {
3331
color: $text2-disabled;
3332
}
3333
}
3334
}
3335
/************
3338
* Calendar *
3339
************/
3340
calendar {
3341
padding: 1px;
3342
border: 1px solid $divider;
3343
color: $text;
3344
&:disabled {
3346
color: $text-disabled;
3347
}
3348
&:selected {
3350
@extend %selected_items;
3351
border-radius: $corner-radius + 1px;
3353
}
3354
&.header {
3356
border-style: none none solid;
3357
border-color: $divider;
3358
border-radius: 0;
3359
}
3360
&.button {
3362
border-radius: $corner-radius + 1px;
3363
color: $text2;
3364
&:hover {
3366
background-image: image($overlay-hover);
3367
}
3368
&:disabled {
3370
color: $text2-disabled;
3371
}
3372
}
3373
&.highlight {
3375
color: $text2;
3376
font-weight: 500;
3377
}
3378
&:indeterminate {
3380
color: $text2-disabled;
3381
}
3382
}
3383
/***********
3386
* Dialogs *
3387
***********/
3388
messagedialog { // Message Dialog styling
3389
&.background {
3390
background-color: $surface;
3391
}
3392
.titlebar {
3394
min-height: $small-size;
3395
border-style: none;
3396
box-shadow: inset 0 1px highlight($surface);
3397
background-color: $surface;
3398
color: $text;
3399
&:backdrop {
3401
background-color: $surface;
3402
color: $text2;
3403
}
3404
}
3405
&.csd { // rounded bottom border styling for csd version
3407
&.background {
3408
// bigger radius for better antialiasing
3409
border-bottom-left-radius: $corner-radius;
3410
border-bottom-right-radius: $corner-radius;
3411
}
3412
}
3413
// Hint text
3415
box.vertical > label + label {
3416
color: $text2;
3417
}
3418
.dialog-action-box {
3420
margin-top: -$container-padding;
3421
// padding: $container-padding;
3422
button:not(:last-child) {
3424
margin-right: $container-padding;
3425
}
3426
}
3427
}
3428
.dialog-action-box button {
3430
@extend %button-flat;
3431
&:not(:disabled) {
3433
@include ink-color($primary);
3434
}
3435
&.suggested-action:not(:disabled) {
3437
background-color: transparent;
3438
// @include ink-color($primary);
3439
}
3440
&.destructive-action:not(:disabled) {
3442
background-color: transparent;
3443
@include ink-color($error);
3444
}
3445
}
3446
filechooser {
3448
.dialog-action-box {
3449
border-top: 1px solid $divider;
3450
}
3451
#pathbarbox {
3453
border-bottom: 1px solid $divider;
3454
background-color: $background;
3455
> stack > box > button { // The new folder button
3457
@extend %button-flat;
3458
border-radius: $circular-radius;
3460
}
3461
}
3462
}
3463
filechooserbutton:drop(active) {
3465
// box-shadow: none;
3466
}
3467
/***********
3470
* Sidebar *
3471
***********/
3472
.sidebar {
3473
border-style: none;
3474
background-color: $base-alt;
3475
&:not(separator) {
3477
@at-root %sidebar_left,
3478
&:dir(ltr),
3479
&.left,
3480
&.left:dir(rtl) {
3481
border-right: 1px solid $divider;
3482
border-left-style: none;
3483
}
3484
@at-root %sidebar_right,
3486
&:dir(rtl),
3487
&.right {
3488
border-left: 1px solid $divider;
3489
border-right-style: none;
3490
}
3491
}
3492
list {
3494
background-color: transparent;
3495
}
3496
paned & {
3498
&,
3499
&.left,
3500
&.right,
3501
&.left:dir(rtl),
3502
&:dir(rtl),
3503
&:dir(ltr) {
3504
border-style: none;
3505
}
3506
}
3507
}
3508
stacksidebar.sidebar {
3510
& {
3511
&:dir(ltr),
3512
&.left,
3513
&.left:dir(rtl) {
3514
list {
3515
@extend %sidebar_left;
3516
}
3517
}
3518
&:dir(rtl),
3520
&.right {
3521
list {
3522
@extend %sidebar_right;
3523
}
3524
}
3525
}
3526
+ separator.vertical,
3528
separator.horizontal {
3529
@extend %hide_separators;
3530
}
3531
list {
3533
padding: 4px;
3534
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3535
}
3536
row {
3538
min-height: 32px;
3539
padding: 0 8px - 6px;
3540
border-radius: $corner-radius;
3541
&:selected {
3543
font-weight: 500;
3544
@include ink-color($primary, $activated: true);
3545
}
3546
+ row {
3548
margin-top: 4px;
3549
}
3550
> label {
3552
padding-left: 6px;
3553
padding-right: 6px;
3554
}
3555
&.needs-attention > label {
3557
@extend %needs-attention;
3558
}
3559
}
3560
}
3561
separator.sidebar {
3563
background-color: $divider;
3564
&.selection-mode,
3566
.selection-mode & {
3567
// background-color: $divider;
3568
}
3569
}
3570
/****************
3573
* File chooser *
3574
****************/
3575
// dim the sidebar icons, see bug #786613 for details on this oddity
3576
row image.sidebar-icon {
3577
transition: color $duration $ease-out;
3578
color: $text2;
3579
&:disabled {
3581
color: $text2-disabled;
3582
}
3583
}
3584
placessidebar.sidebar {
3586
> viewport.frame {
3587
border-style: none;
3588
}
3589
list {
3591
padding: (4px - 3px) 0 4px;
3592
}
3593
row {
3595
// Needs overriding of the GtkListBoxRow padding
3596
min-height: 32px;
3597
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3598
padding: 0;
3599
border-radius: $corner-radius;
3600
// Using margins/padding directly in the SidebarRow
3602
// will make the animation of the new bookmark row jump
3603
> revealer {
3604
padding: 0 8px;
3605
}
3606
&:selected {
3608
font-weight: 500;
3609
@include ink-color($primary, $activated: true);
3610
image.sidebar-icon {
3612
color: $primary;
3613
}
3614
}
3615
&:disabled {
3617
color: $text-disabled;
3618
}
3619
image.sidebar-icon {
3621
&:dir(ltr) {
3622
padding-right: 8px;
3623
}
3624
&:dir(rtl) {
3626
padding-left: 8px;
3627
}
3628
}
3629
label.sidebar-label {
3631
&:dir(ltr) {
3632
padding-right: 2px;
3633
}
3634
&:dir(rtl) {
3636
padding-left: 2px;
3637
}
3638
}
3639
@at-root button.sidebar-button {
3641
@extend %button-flat-basic;
3642
@extend %button-small;
3643
}
3644
&.sidebar-placeholder-row {
3646
background-color: $overlay-hover;
3647
}
3648
&.sidebar-new-bookmark-row {
3650
color: $primary;
3651
image.sidebar-icon {
3653
color: $primary;
3654
}
3655
}
3656
}
3657
}
3658
placesview {
3660
.server-list-button {
3661
> image {
3662
-gtk-icon-transform: rotate(0turn);
3663
}
3664
&:checked > image {
3666
-gtk-icon-transform: rotate(-0.5turn);
3667
}
3668
}
3669
// this selects the "connect to server" label
3671
> actionbar > revealer > box > label {
3672
padding-left: 8px;
3673
padding-right: 8px;
3674
}
3675
}
3676
/*********
3679
* Paned *
3680
*********/
3681
paned {
3682
> separator {
3683
min-width: 1px;
3684
min-height: 1px;
3685
-gtk-icon-source: none; // defeats the ugly default handle decoration
3686
border-style: none; // just to be sure
3687
background-color: transparent;
3688
// workaround, using background istead of a border since the border will get rendered twice (?)
3689
background-image: image($divider);
3690
background-size: 1px 1px;
3691
background-clip: content-box; // avoids borders image being rendered twice (?)
3692
&.wide {
3694
min-width: 6px;
3695
min-height: 6px;
3696
background-color: $background;
3697
background-image: image($divider), image($divider);
3698
background-size: 1px 1px, 1px 1px;
3699
}
3700
}
3701
&.horizontal > separator {
3703
background-repeat: repeat-y;
3704
&:dir(ltr) {
3706
margin: 0 -8px 0 0;
3707
padding: 0 8px 0 0;
3708
background-position: left;
3709
}
3710
&:dir(rtl) {
3712
margin: 0 0 0 -8px;
3713
padding: 0 0 0 8px;
3714
background-position: right;
3715
}
3716
&.wide {
3718
margin: 0;
3719
padding: 0;
3720
background-repeat: repeat-y, repeat-y;
3721
background-position: left, right;
3722
}
3723
}
3724
&.vertical > separator {
3726
margin: 0 0 -8px 0;
3727
padding: 0 0 8px 0;
3728
background-repeat: repeat-x;
3729
background-position: top;
3730
&.wide {
3732
margin: 0;
3733
padding: 0;
3734
background-repeat: repeat-x, repeat-x;
3735
background-position: bottom, top;
3736
}
3737
}
3738
}
3739
/**************
3742
* GtkInfoBar *
3743
**************/
3744
infobar {
3745
border-style: none;
3746
&.info,
3748
&.question {
3749
border-bottom: 1px solid $divider;
3750
background-color: $base;
3751
button {
3753
@extend %button-flat;
3754
&.text-button:not(:disabled) {
3756
@include ink-color($primary);
3757
}
3758
}
3759
}
3760
&.warning {
3762
background-color: $warning;
3763
color: on($warning);
3764
button.flat {
3766
@include ink-color(on($warning));
3767
}
3768
selection {}
3770
*:link {
3772
color: on($warning);
3773
}
3774
}
3775
&.error {
3777
background-color: $error;
3778
color: on($error);
3779
button.flat {
3781
@include ink-color(on($error));
3782
}
3783
selection {}
3785
*:link {
3787
color: on($error);
3788
}
3789
}
3790
// Remove ugly hard-coded padding
3792
button label {
3793
margin: 0 -4px;
3794
}
3795
}
3796
/************
3799
* Tooltips *
3800
************/
3801
tooltip {
3802
&.background {
3803
// background-color needs to be set this way otherwise it gets drawn twice
3804
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3805
background-color: $tooltip;
3806
color: on($tooltip);
3807
}
3808
// padding: 4px; /* not working */
3810
border-radius: $corner-radius;
3811
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3812
&:not(.csd):not(.unity-csd) {
3814
// border: 1px solid $divider;
3815
// border-radius: $corner-radius + 1px;
3816
// background-clip: $background-clip-extra;
3817
}
3818
// FIXME: we need a border or tooltips vanish on black background.
3820
decoration {
3821
background-color: transparent;
3822
}
3823
> box {
3825
margin: -6px; // Remove hard-coded 6px margin
3826
min-height: 32px - 4px * 2;
3827
padding: 4px 8px;
3828
}
3829
.dim-label {
3831
color: on($tooltip, text2);
3832
}
3833
* {
3835
// workaround for Eclipse.
3836
// do not include any declaration here.
3837
}
3838
}
3839
/*****************
3842
* Color Chooser *
3843
*****************/
3844
colorswatch {
3845
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3846
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3847
// applied to the overlay box.
3848
// base color corners rounding
3850
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3851
// sports a bigger radius.
3852
// nth-child is needed by the custom color strip.
3853
&.top {
3855
border-top-left-radius: $corner-radius + 0.5px;
3856
border-top-right-radius: $corner-radius + 0.5px;
3857
overlay {
3859
border-top-left-radius: $corner-radius;
3860
border-top-right-radius: $corner-radius;
3861
}
3862
}
3863
&.bottom {
3865
border-bottom-left-radius: $corner-radius + 0.5px;
3866
border-bottom-right-radius: $corner-radius + 0.5px;
3867
overlay {
3869
border-bottom-left-radius: $corner-radius;
3870
border-bottom-right-radius: $corner-radius;
3871
}
3872
}
3873
&.left,
3875
&:first-child:not(.top) {
3876
border-top-left-radius: $corner-radius + 0.5px;
3877
border-bottom-left-radius: $corner-radius + 0.5px;
3878
overlay {
3880
border-top-left-radius: $corner-radius;
3881
border-bottom-left-radius: $corner-radius;
3882
}
3883
}
3884
&.right,
3886
&:last-child:not(.bottom) {
3887
border-top-right-radius: $corner-radius + 0.5px;
3888
border-bottom-right-radius: $corner-radius + 0.5px;
3889
overlay {
3891
border-top-right-radius: $corner-radius;
3892
border-bottom-right-radius: $corner-radius;
3893
}
3894
}
3895
&.dark {
3897
color: on(dark);
3898
}
3899
&.light {
3901
color: on(light);
3902
}
3903
overlay {
3905
transition: $transition-shadow;
3906
box-shadow: $shadow-z1;
3907
&:drop(active),
3909
&:hover {
3910
box-shadow: $shadow-z3;
3911
}
3912
}
3913
&#add-color-button {
3915
border-radius: $corner-radius $corner-radius 0 0;
3916
color: $text;
3917
&:only-child {
3919
border-radius: $corner-radius;
3920
}
3921
overlay {
3923
background-color: $surface;
3924
}
3925
}
3926
&:disabled {
3928
opacity: 0.5;
3929
overlay {
3931
box-shadow: none;
3932
}
3933
}
3934
row:selected & {
3936
}
3937
&#editor-color-sample {
3939
border-radius: $corner-radius + 0.5px;
3940
overlay {
3942
border-radius: $corner-radius;
3943
&:hover {
3945
// box-shadow: $shadow-z1;
3946
}
3947
}
3948
}
3949
}
3950
// colorscale popup
3952
colorchooser .popover.osd {
3953
transition: $transition-shadow;
3954
border-radius: $corner-radius;
3955
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3956
background-color: $surface;
3957
&:backdrop {
3959
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3960
}
3961
}
3962
/********
3965
* Misc *
3966
********/
3967
// content view (grid/list)
3968
.content-view {
3969
background-color: $background;
3970
&:hover {
3972
// -gtk-icon-effect: highlight;
3973
}
3974
rubberband,
3976
.rubberband {
3977
@extend rubberband;
3978
}
3979
}
3980
.scale-popup {
3982
.osd & {
3983
// @extend %osd;
3984
button.flat { // FIXME: quick hack, redo properly
3986
}
3987
}
3988
button { // +/- buttons on GtkVolumeButton popup
3990
}
3991
}
3992
/**********************
3995
* Window Decorations *
3996
**********************/
3997
decoration {
3998
transition: $transition-shadow;
3999
border-radius: $corner-radius $corner-radius 0 0;
4000
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4001
// FIXME rationalize shadows
4003
// this is used for the resize cursor area
4005
margin: 8px;
4006
&:backdrop {
4008
// the transparent shadow here is to enforce that the shadow extents don't
4009
// change when we go to backdrop, to prevent jumping windows.
4010
// The biggest shadow should be in the same order then in the active state
4011
// or the jumping will happen during the transition.
4012
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4013
}
4014
.maximized &,
4016
.fullscreen &,
4017
.tiled &,
4018
.tiled-top &,
4019
.tiled-right &,
4020
.tiled-bottom &,
4021
.tiled-left & {
4022
border-radius: 0;
4023
}
4024
.popup & {
4026
box-shadow: none;
4027
}
4028
// server-side decorations as used by mutter
4030
.ssd & {
4031
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4032
}
4033
.csd.popup & {
4035
border-radius: $corner-radius;
4036
box-shadow: $shadow-z4;
4037
}
4038
tooltip.csd & {
4040
border-radius: $corner-radius;
4041
box-shadow: none;
4042
}
4043
messagedialog.csd & {
4045
border-radius: $corner-radius;
4046
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4047
&:backdrop {
4049
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4050
}
4051
}
4052
.solid-csd & {
4054
margin: 0;
4055
padding: 2px;
4056
border-radius: 0;
4057
box-shadow: none;
4058
box-shadow: inset 0 1px highlight($titlebar);
4059
background-color: $titlebar;
4060
&:backdrop {
4062
background-color: $titlebar-backdrop;
4063
}
4064
}
4065
}
4066
// Window Close button
4068
button.titlebutton {
4069
border-radius: $circular-radius;
4070
.selection-mode & {
4072
}
4073
}
4074
// catch all extend :)
4077
%selected_items {
4079
background-color: $overlay-selected;
4080
}
4081
.monospace {
4083
font-family: monospace;
4084
}
4085
/**********************
4088
* Touch Copy & Paste *
4089
**********************/
4090
// touch selection handlebars for the Popover.osd above
4091
cursor-handle {
4092
color: $primary;
4093
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4094
&.top:dir(ltr),
4096
&.bottom:dir(rtl) {
4097
-gtk-icon-transform: rotate(90deg);
4098
}
4099
&.bottom:dir(ltr),
4101
&.top:dir(rtl) {
4102
-gtk-icon-transform: unset;
4103
}
4104
&.insertion-cursor:dir(ltr),
4106
&.insertion-cursor:dir(rtl) {
4107
padding-top: 6px;
4108
-gtk-icon-transform: rotate(45deg);
4109
}
4110
}
4111
// Decouple the font of context menus from their entry/textview
4113
.context-menu {
4114
font: initial;
4115
}
4116
// shortcut window keys
4118
.keycap {
4119
min-width: 28px - 8px * 2;
4120
min-height: 28px - 2px;
4121
margin-top: 2px;
4122
padding-bottom: 2px;
4123
padding-left: 8px;
4124
padding-right: 8px;
4125
border: solid 1px $divider;
4127
border-radius: $corner-radius + 1px;
4128
box-shadow: inset 0 -2px $divider;
4129
background-color: $surface;
4130
color: $text;
4131
font-size: smaller;
4132
}
4133
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4135
caret-color: $primary;
4136
}
4137
stackswitcher button.text-button { // FIXME aggregate with buttons
4139
min-width: 100px;
4140
}
4141
stackswitcher button.circular,
4143
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4144
min-width: $medium-size;
4145
min-height: $medium-size;
4146
padding: 0;
4147
}
4148
/*************
4151
* App Icons *
4152
*************/
4153
// Outline for low res icons
4154
.lowres-icon {
4155
// -gtk-icon-shadow: none;
4156
}
4157
// Drapshadow for large icons
4159
.icon-dropshadow {
4160
// -gtk-icon-shadow: none;
4161
}
4162
/*********
4165
* Emoji *
4166
*********/
4167
popover.emoji-picker {
4168
padding: 0;
4169
entry {
4171
border-bottom: 1px solid $divider;
4172
border-image: none;
4173
border-radius: 0;
4174
box-shadow: none;
4175
background-color: transparent;
4176
}
4177
scrolledwindow {
4179
border-bottom: 1px solid $divider;
4180
}
4181
}
4182
button.emoji-section {
4184
margin: 4px;
4185
&:checked {
4187
// background-color: transparent;
4188
@include ink-color($primary, $activated: true);
4189
}
4190
&:not(:last-child) {
4192
margin-right: 0;
4193
}
4194
}
4195
popover.emoji-picker .emoji {
4197
min-width: 3em;
4198
min-height: 3em;
4199
padding: 0 8px;
4200
// font-size: larger;
4201
widget {
4203
transition: $transition;
4204
border-radius: $corner-radius;
4205
&:hover {
4207
background-color: $overlay-hover;
4208
}
4209
}
4210
}
4211
popover.emoji-completion {
4213
padding: 8px 0;
4214
arrow {
4216
border: none;
4217
background: none;
4218
}
4219
.emoji-completion-row {
4221
min-height: $menuitem-size;
4222
padding: 0 12px;
4223
}
4224
.emoji:hover {
4226
background-color: $overlay-hover;
4227
}
4228
}
4229