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
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: $text2; // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: on(dark);
127
text-shadow: $text-shadow;
128
}
129
.rubberband,
131
rubberband {
132
border: 1px solid on(dark, primary);
133
background-color: rgba(on(dark, primary), 0.3);
134
}
135
flowbox {
137
rubberband {
138
@extend rubberband;
139
}
140
flowboxchild {
142
padding: 4px;
143
border-radius: $corner-radius;
144
&:selected {
146
@extend %selected_items;
147
}
148
}
149
}
150
.content-view .tile {
152
// margin: 2px;
153
// padding: 0;
154
// border-radius: 0;
155
// background-color: black;
156
&:selected {
158
background-color: transparent;
159
}
160
}
161
label {
163
caret-color: $primary; // this shouldn't be needed.
164
&.separator {
166
color: $text2;
167
}
168
selection {
170
@extend %selected_items;
171
}
172
&:disabled {
174
color: $text-disabled;
175
headerbar &,
177
menuitem &,
178
tab &,
179
button & {
180
color: inherit;
181
}
182
}
183
&.osd {
185
border-radius: $corner-radius;
186
background-color: $tooltip;
187
color: on($tooltip);
188
}
189
}
190
.dim-label {
192
color: $text2;
193
}
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base;
199
}
200
.sidebar label {
202
min-height: $medium-size;
203
padding: 0 12px;
204
color: $text-disabled;
205
font-weight: 500;
206
&.highlight {
208
color: $text;
209
}
210
}
211
}
212
%osd,
214
.osd {
215
// opacity: .9;
216
}
217
/*********************
220
* Spinner Animation *
221
*********************/
222
@keyframes spin {
223
to {
224
-gtk-icon-transform: rotate(1turn);
225
}
226
}
227
spinner {
229
background: none;
230
opacity: 0; // non spinning spinner makes no sense
231
color: $primary;
232
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
233
&:checked {
235
opacity: 1;
236
animation: spin 1s linear infinite;
237
}
238
&:disabled {
240
color: $text2-disabled;
241
}
242
}
243
/****************
246
* Text Entries *
247
****************/
248
%entry,
249
entry {
250
min-height: $medium-size;
251
padding: 0 8px;
252
border-radius: $corner-radius $corner-radius 0 0;
253
@include entry(normal);
255
&:focus {
257
@include entry(checked);
258
}
259
&:drop(active) {
261
@include entry(hover);
262
}
263
&:disabled {
265
@include entry(disabled);
266
}
267
&.flat {
269
min-height: 0;
270
padding: 2px;
271
border-radius: 0;
272
background-color: transparent;
273
}
274
// icons inside the entry
276
image {
277
// min-height: $small-size;
278
// min-width: $small-size;
279
// border-radius: $circular-radius;
280
// @extend %ripple;
281
// @include ink-color($text2);
282
color: $text2;
283
&:hover,
285
&:active {
286
color: $text;
287
}
288
&:disabled {
290
color: $text-disabled;
291
}
292
&.left {
294
margin-left: ($medium-size - 16px) / 2 - 8px;
295
margin-right: 6px;
296
}
297
&.right {
299
margin-left: 6px;
300
margin-right: ($medium-size - 16px) / 2 - 8px;
301
}
302
}
303
undershoot {
305
&.left {
306
@include undershoot(left);
307
}
308
&.right {
310
@include undershoot(right);
311
}
312
}
313
selection {
315
@extend %selected_items;
316
}
317
// entry error and warning style
319
@each $class, $color in (".error": $error, ".warning": $warning) {
320
&#{$class} {
321
@include entry(normal, $color);
322
&:focus {
324
@include entry(checked, $color);
325
}
326
&:disabled {
328
@include entry(disabled, $color);
329
}
330
}
331
}
332
.osd & {
334
}
335
progress {
337
margin: 2px -8px;
338
border-bottom: 2px solid $primary;
339
background-color: transparent;
340
}
341
// linked entries
343
.linked:not(.vertical) > & {
344
@extend %linked;
345
}
346
// Vertically linked entries
348
.linked.vertical > & {
349
@extend %linked-vertical;
350
}
351
}
352
%entry_raised {
354
border-radius: $corner-radius;
355
@include entry(raised-normal);
357
&:focus {
359
@include entry(raised-focus);
360
}
361
&:drop(active) {
363
@include entry(raised-hover);
364
}
365
&:disabled {
367
@include entry(raised-disabled);
368
}
369
// entry error and warning style
371
@each $class, $color in (".error": $error, ".warning": $warning) {
372
&#{$class} {
373
@include entry(raised-normal, $color);
374
&:focus {
376
@include entry(raised-focus, $color);
377
}
378
&:disabled {
380
@include entry(raised-disabled, $color);
381
}
382
image {
384
color: on($color, text2);
385
&:hover,
387
&:active {
388
color: on($color);
389
}
390
&:disabled {
392
color: on($color, text-disabled);
393
}
394
}
395
}
396
}
397
}
398
treeview entry {
400
&,
401
&.flat {
402
background-color: $base;
403
&,
405
&:focus {
406
border-image: none;
407
box-shadow: none;
408
}
409
}
410
}
411
.entry-tag {
413
margin: 2px;
414
border-radius: $circular-radius;
415
box-shadow: none;
416
background-color: $fill;
417
color: $text;
418
&:hover {
420
background-image: image($overlay-hover);
421
}
422
// side margins: compensate the entry padding with a negative margin
424
// then the negative margin itself
425
:dir(ltr) & {
426
margin-left: 4px;
427
margin-right: 0;
428
padding-left: 12px;
429
padding-right: 8px;
430
}
431
:dir(rtl) & {
433
margin-left: 0;
434
margin-right: 4px;
435
padding-left: 8px;
436
padding-right: 12px;
437
}
438
// seems any sizing doesn't work
440
&.button {
441
box-shadow: none;
442
background-color: transparent;
443
color: $text2;
444
}
445
}
446
/***********
449
* Buttons *
450
***********/
451
// stuff for .needs-attention
452
@keyframes needs-attention {
453
from {
454
background-image:
455
-gtk-gradient(
456
radial,
457
center center, 0,
458
center center, .001,
459
to($primary),
460
to(transparent)
461
);
462
}
463
to {
465
background-image:
466
-gtk-gradient(
467
radial,
468
center center, 0,
469
center center, .5,
470
to($primary),
471
to(transparent)
472
);
473
}
474
}
475
%button,
477
button {
478
min-height: 24px;
479
min-width: 16px;
480
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
481
border-radius: $corner-radius;
482
background-color: $surface;
483
color: $text;
484
font-weight: 500;
485
@extend %ripple;
487
@include raised-ink-color($text);
488
&:disabled {
490
box-shadow: none;
491
background-color: $fill;
492
color: $text-disabled;
493
}
494
&:checked {
496
background-color: mix($primary, $surface, percentage($overlay-checked-opacity + .04));
497
color: $primary;
498
@include raised-ink-color($primary);
499
&:disabled {
501
box-shadow: inset 0 0 0 9999px $overlay-checked;
502
background-color: $fill;
503
color: $text-disabled;
504
}
505
}
506
&.text-button {
508
min-width: 64px - 16px * 2;
509
padding-left: 16px;
510
padding-right: 16px;
511
}
512
&.image-button {
514
min-width: 24px;
515
padding: ($medium-size - 24px) / 2;
516
border-radius: $circular-radius;
517
}
518
// NOTE: Some image-only buttons use this as well
520
&.text-button.image-button {
521
min-width: 24px;
522
padding: ($medium-size - 24px) / 2;
523
border-radius: $corner-radius;
524
label {
526
&:first-child {
527
margin-left: 16px - ($medium-size - 24px) / 2;
528
}
529
&:last-child {
531
margin-right: 16px - ($medium-size - 24px) / 2;
532
}
533
}
534
image:not(:only-child) {
536
margin: 0 (24px - 16px) / 2;
537
}
538
}
539
.linked:not(.vertical) > & {
541
@extend %linked;
542
&.image-button:not(.text-button) {
544
@extend %linked-image-button;
545
}
546
}
547
.linked.vertical > & {
549
@extend %linked-vertical;
550
&.image-button:not(.text-button) {
552
@extend %linked-vertical-image-button;
553
}
554
}
555
}
556
%button-flat-basic {
558
background-color: transparent;
559
@include ink-color($text2);
560
&:disabled {
562
background-color: transparent;
563
color: $text2-disabled;
564
}
565
}
566
%button-flat-activatable {
568
@extend %button-flat-basic;
569
&:checked {
571
background-color: $overlay-checked;
572
color: $text;
573
@include ink-color($text);
574
&:disabled {
576
color: $text-disabled;
577
}
578
}
579
}
580
%button-flat,
582
button.flat {
583
@extend %button-flat-activatable;
584
&.text-button {
586
min-width: 64px - 8px * 2;
587
padding-left: 8px;
588
padding-right: 8px;
589
}
590
&.text-button.image-button {
592
min-width: 24px;
593
padding: ($medium-size - 24px) / 2;
594
label {
596
&:first-child {
597
margin-left: 12px - ($medium-size - 24px) / 2;
598
}
599
&:last-child {
601
margin-right: 12px - ($medium-size - 24px) / 2;
602
}
603
}
604
}
605
.linked:not(.vertical) > &,
607
.linked.vertical > & {
608
&:not(:only-child) { // specificity bump
609
border-radius: $corner-radius;
610
&.image-button:not(.text-button) {
612
border-radius: $circular-radius;
613
}
614
}
615
}
616
}
617
button {
619
// big standalone buttons like in Documents pager
620
&.osd {
621
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
622
&.image-button {
624
padding: ($large-size - 24px) / 2;
625
}
626
&:disabled {
628
opacity: 0;
629
}
630
}
631
// overlay / OSD style
633
@at-root %osd_button,
634
.osd & {
635
}
636
// Suggested and Destructive Action buttons
638
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
639
&#{$class} {
640
background-color: $color;
641
color: on($color);
642
@include raised-ink-color(on($color));
643
&:disabled {
645
box-shadow: none;
646
background-color: $fill;
647
color: $text-disabled;
648
}
649
&:checked {
651
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
652
}
653
&.flat {
655
background-color: transparent;
656
@include ink-color($color);
657
&:disabled {
659
box-shadow: none;
660
background-color: transparent;
661
color: $text2-disabled;
662
}
663
&:checked {
665
background-color: rgba($color, $overlay-checked-opacity);
666
}
667
}
668
.osd & {
670
}
671
}
672
}
673
.stack-switcher > & {
675
// to position the needs attention dot, padding is added to the button
676
// child, a label needs just lateral padding while an icon needs vertical
677
// padding added too.
678
> label {
680
margin: 0 -6px;
681
padding: 0 6px;
682
}
683
> image {
685
margin: -3px -6px;
686
padding: 3px 6px;
687
}
688
&.needs-attention {
690
> label,
691
> image {
692
@extend %needs-attention;
693
}
694
&:checked {
696
> label,
697
> image {
698
animation: none;
699
background-image: none;
700
}
701
}
702
}
703
}
704
// hide separators
706
&.font,
707
&.file {
708
separator {
709
@extend %hide_separators;
710
}
711
}
712
&.font {
714
> box > box > label {
715
// font-weight: bold;
716
}
717
}
718
// inline-toolbar buttons
720
.inline-toolbar & {
721
// @extend %button-flat;
722
&:not(.text-button) {
724
border-radius: $circular-radius;
725
}
726
}
727
.primary-toolbar & {
729
-gtk-icon-shadow: none; // tango icons don't need shadows
730
}
731
&.close,
733
&.circular { // The Bloody Circul Button
734
border-radius: $circular-radius;
735
label {
737
// padding: 0;
738
}
739
}
740
}
741
%button-small {
743
min-height: $small-size;
744
min-width: $small-size;
745
padding: 0;
746
border-radius: $circular-radius;
747
}
748
%needs-attention {
750
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
751
background-repeat: no-repeat;
752
background-position: right 3px;
753
background-size: 6px 6px;
754
&:dir(rtl) {
756
background-position: left 3px;
757
}
758
}
759
// all the following is for the +|- buttons on inline toolbars, that way
761
// should really be deprecated...
762
.inline-toolbar toolbutton > button {
763
}
764
// More inline toolbar buttons
766
toolbar.inline-toolbar toolbutton {
767
&:not(:first-child) > button.flat {
768
// @extend %linked-not-first-child;
769
}
770
&:not(:last-child) > button.flat {
772
// @extend %linked-not-last-child;
773
}
774
}
775
%linked-not-first-child {
777
border-top-left-radius: 0;
778
border-bottom-left-radius: 0;
779
}
780
%linked-not-last-child {
782
border-top-right-radius: 0;
783
border-bottom-right-radius: 0;
784
}
785
%linked {
787
&:not(:first-child) {
788
@extend %linked-not-first-child;
789
}
790
&:not(:last-child) {
792
@extend %linked-not-last-child;
793
}
794
}
795
%linked-vertical-not-first-child {
797
border-top-left-radius: 0;
798
border-top-right-radius: 0;
799
}
800
%linked-vertical-not-last-child {
802
border-bottom-left-radius: 0;
803
border-bottom-right-radius: 0;
804
}
805
%linked-vertical {
807
&:not(:first-child) {
808
@extend %linked-vertical-not-first-child;
809
}
810
&:not(:last-child) {
812
@extend %linked-vertical-not-last-child;
813
}
814
}
815
%linked-image-button {
817
&:first-child {
818
border-top-left-radius: $corner-radius;
819
border-bottom-left-radius: $corner-radius;
820
}
821
&:last-child {
823
border-top-right-radius: $corner-radius;
824
border-bottom-right-radius: $corner-radius;
825
}
826
&:only-child {
828
border-radius: $circular-radius;
829
}
830
}
831
%linked-vertical-image-button {
833
&:first-child {
834
border-top-left-radius: $corner-radius;
835
border-top-right-radius: $corner-radius;
836
}
837
&:last-child {
839
border-bottom-left-radius: $corner-radius;
840
border-bottom-right-radius: $corner-radius;
841
}
842
&:only-child {
844
border-radius: $circular-radius;
845
}
846
}
847
/* menu buttons */
849
modelbutton.flat,
850
.menuitem.button.flat {
851
min-height: $menuitem-size;
852
padding: 0 8px;
853
border-radius: $corner-radius;
854
@extend %ripple;
856
@include ink-color($text, $fg: false);
857
&:selected {
859
@extend %selected_items;
860
}
861
}
862
modelbutton.flat arrow {
864
&.left {
865
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
866
}
867
&.right {
869
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
870
}
871
}
872
button.color {
874
min-height: $small-size;
875
min-width: $small-size;
876
padding: $container-padding;
877
colorswatch:only-child {
879
&,
880
overlay {
881
// border-radius: 0;
882
}
883
}
884
}
885
/*********
888
* Links *
889
*********/
890
*:link {
891
color: $primary;
892
}
893
*:visited {
895
color: $visited;
896
}
897
button.link {
899
&:link {
900
@include ink-color($primary);
901
}
902
&:visited {
904
@include ink-color($visited);
905
}
906
> label {
908
text-decoration-line: underline;
909
}
910
}
911
/*****************
913
* GtkSpinButton *
914
*****************/
915
spinbutton {
916
&:not(.vertical) {
917
// in this horizontal configuration, the whole spinbutton
918
// behaves as the entry, so we extend the entry styling
919
// and nuke the style on the internal entry
920
@extend %entry;
921
padding: 0;
923
entry {
925
min-width: $large-size - 8px * 2;
926
// reset all the other props since the spinbutton node is styled here
927
margin: 0;
928
border-image: none;
929
border-radius: 0;
930
box-shadow: none;
931
background-color: transparent;
932
}
933
button {
935
@extend %button-flat-basic;
936
@extend %button-small;
937
// margin: $container-padding;
939
border: solid $container-padding transparent;
940
// Remove unwanted focus indicator
942
&:focus:not(:hover):not(:active) {
943
box-shadow: inset 0 0 0 9999px transparent;
944
}
945
&.up:dir(ltr),
947
&.down:dir(rtl) {
948
margin-left: -$container-padding / 2;
949
}
950
&.up:dir(rtl),
952
&.down:dir(ltr) {
953
margin-right: -$container-padding / 2;
954
}
955
}
956
}
957
// OSD horizontal
959
.osd &:not(.vertical) {
960
}
961
// Vertical
963
&.vertical {
964
// in the vertical configuration, we treat the spinbutton
965
// as a box, and tweak the style of the entry in the middle
966
// so that it's linked
967
// FIXME: this should not be set at all, but otherwise it gets the wrong
969
// color
970
caret-color: $primary;
971
// FIXME: this should not be set at all, but otherwise it gets the wrong
973
// color
974
&:disabled {
975
color: $text-disabled;
976
}
977
entry {
979
@extend %entry_raised;
980
min-height: $medium-size;
982
min-width: $large-size;
983
padding: 0;
984
}
985
button {
987
min-height: $medium-size;
988
min-width: $large-size;
989
padding: 0;
990
@extend %button-flat-basic;
992
// Remove unwanted focus indicator
994
&:focus:not(:hover):not(:active) {
995
box-shadow: inset 0 0 0 9999px transparent;
996
}
997
&.up {
999
border-radius: $corner-radius $corner-radius 0 0;
1000
}
1001
&.down {
1003
border-radius: 0 0 $corner-radius $corner-radius;
1004
}
1005
}
1006
}
1007
// OSD vertical
1009
.osd &.vertical {
1010
}
1011
// Misc
1013
treeview &:not(.vertical) {
1014
min-height: 0;
1015
border-style: none;
1016
border-radius: 0;
1017
entry {
1019
min-height: 0;
1020
padding: 1px 2px;
1021
}
1022
}
1023
}
1024
/**************
1027
* ComboBoxes *
1028
**************/
1029
combobox {
1030
arrow {
1031
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1032
min-height: 16px;
1033
min-width: 16px;
1034
}
1035
// workaround for menuitem selection
1037
decoration {
1038
transition: none;
1039
}
1040
button.combo cellview {
1042
&:dir(ltr) {
1043
margin-left: 8px - ($medium-size - 16px) / 2;
1044
}
1045
&:dir(rtl) {
1047
margin-right: 8px - ($medium-size - 16px) / 2;
1048
}
1049
}
1050
menu {
1052
padding: 2px 0;
1053
menuitem {
1055
min-height: $medium-size - 2px * 2;
1056
padding: 0 8px;
1057
}
1058
// overflow arrows
1060
> arrow {
1061
&.top {
1062
margin-top: -2px;
1063
}
1064
&.bottom {
1066
margin-top: 2px * 2;
1067
margin-bottom: -2px * 3;
1068
}
1069
}
1070
}
1071
&.linked {
1073
button:nth-child(2) {
1074
&:dir(ltr) {
1075
@extend %linked-not-first-child;
1076
}
1077
&:dir(rtl) {
1079
@extend %linked-not-last-child;
1080
}
1081
}
1082
}
1083
> .linked:not(.vertical) > entry:not(:only-child) {
1085
border-radius: $corner-radius $corner-radius 0 0;
1086
&:first-child {
1088
margin-right: -$medium-size;
1089
padding-right: $medium-size;
1090
}
1091
&:last-child {
1093
margin-left: -$medium-size;
1094
padding-left: $medium-size;
1095
}
1096
}
1097
> .linked:not(.vertical) > button:not(:only-child) {
1099
@extend %button-flat-activatable;
1100
// @extend %button-small;
1101
min-height: 16px;
1103
min-width: 16px;
1104
margin: ($medium-size - $small-size) / 2;
1105
padding: ($small-size - 16px) / 2;
1106
border-radius: $circular-radius;
1107
}
1108
}
1109
// the combo is a composite widget so the way we do button linking doesn't
1111
// work, special case needed. See
1112
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1113
.linked:not(.vertical) > combobox {
1115
&:not(:first-child) > box > button.combo {
1116
@extend %linked-not-first-child;
1117
}
1118
&:not(:last-child) > box > button.combo {
1120
@extend %linked-not-last-child;
1121
}
1122
}
1123
.linked.vertical > combobox {
1125
&:not(:first-child) > box > button.combo {
1126
@extend %linked-vertical-not-first-child;
1127
}
1128
&:not(:last-child) > box > button.combo {
1130
@extend %linked-vertical-not-last-child;
1131
}
1132
}
1133
button.combo:only-child {
1135
border-radius: $corner-radius $corner-radius 0 0;
1136
font-weight: normal;
1137
@include entry(normal);
1139
&:focus {
1141
@include entry(focus);
1142
}
1143
&:drop(active),
1145
&:hover {
1146
@include entry(hover);
1147
}
1148
&:checked {
1150
@include entry(checked);
1151
}
1152
&:disabled {
1154
@include entry(disabled);
1155
}
1156
}
1157
/************
1160
* Toolbars *
1161
************/
1162
toolbar {
1163
-GtkWidget-window-dragging: true;
1164
padding: 2px;
1165
background-color: $background;
1166
button {
1168
@extend %button-flat;
1169
}
1170
// on OSD
1172
.osd & {
1173
background-color: transparent;
1174
}
1175
// stand-alone OSD toolbars
1177
&.osd {
1178
@extend %toolbar-osd;
1179
// positional classes for `attached` osd toolbars
1181
&.left,
1182
&.right,
1183
&.top,
1184
&.bottom {
1185
border-radius: 0;
1186
}
1187
&.bottom {
1189
box-shadow: none;
1190
background-color: transparent;
1191
background-image:
1192
linear-gradient(
1193
to bottom,
1194
transparent,
1195
rgba(black, .1) 30%,
1196
rgba(black, .2) 50%,
1197
rgba(black, .4)
1198
);
1199
}
1200
}
1201
// toolbar separators
1203
&.horizontal > separator {
1204
margin: 2px;
1205
}
1206
&.vertical > separator {
1208
margin: 2px;
1209
}
1210
&:not(.inline-toolbar):not(.osd) {
1212
scale,
1213
entry,
1214
spinbutton,
1215
button {
1216
margin: 2px;
1217
}
1218
.linked entry,
1220
.linked spinbutton,
1221
.linked button {
1222
&:not(:first-child) {
1223
margin-left: 0;
1224
}
1225
&:not(:last-child) {
1227
margin-right: 0;
1228
}
1229
}
1230
spinbutton {
1232
entry,
1233
button {
1234
margin: 0;
1235
}
1236
}
1237
switch {
1239
margin: 2px + $container-padding 2px;
1240
}
1241
}
1242
}
1243
%toolbar-osd {
1245
transition: $transition-shadow;
1246
padding: $container-padding;
1247
border-radius: $corner-radius;
1248
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1249
background-color: $surface;
1250
&:backdrop {
1252
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1253
}
1254
}
1255
// searchbar, location-bar & inline-toolbar
1257
.inline-toolbar {
1258
padding: $container-padding;
1259
border-style: solid;
1260
border-width: 0 1px 1px;
1261
border-color: $divider;
1262
background-color: $base-alt;
1263
}
1264
searchbar > revealer > box,
1266
.location-bar {
1267
padding: $container-padding;
1268
border-style: solid;
1269
border-width: 0 0 1px;
1270
border-color: $divider;
1271
background-color: $background;
1272
background-clip: border-box;
1273
}
1274
searchbar > revealer > box {
1276
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1277
margin: -6px;
1278
padding: $container-padding;
1279
}
1280
/***************
1283
* Header bars *
1284
***************/
1285
.titlebar {
1286
transition: background-color $duration $ease-out, color $duration $ease-out;
1287
border-radius: $corner-radius $corner-radius 0 0;
1288
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1289
background-color: $titlebar;
1290
color: $titlebar-text;
1291
&:disabled {
1293
color: $titlebar-text-disabled;
1294
}
1295
&:backdrop {
1297
background-color: $titlebar-backdrop;
1298
color: $titlebar-text2;
1299
&:disabled {
1301
color: $titlebar-text2-disabled;
1302
}
1303
}
1304
.title {
1306
padding-left: 12px;
1307
padding-right: 12px;
1308
font-weight: bold;
1309
}
1310
.subtitle {
1312
padding-left: 12px;
1313
padding-right: 12px;
1314
font-size: smaller;
1315
}
1316
.subtitle,
1318
.dim-label {
1319
transition: color $duration $ease-out;
1320
color: $titlebar-text2;
1321
&:backdrop {
1323
color: $titlebar-text-disabled;
1324
}
1325
}
1326
// Don't draw titlebar above titlebar
1328
.titlebar {
1329
background-color: transparent;
1330
box-shadow: none;
1331
}
1332
// The separator for split headerbars
1334
headerbar + separator {
1335
background-color: $titlebar-divider;
1336
}
1337
entry {
1339
box-shadow: inset 0 -1px $titlebar-stroke;
1340
background-color: $titlebar-entry-fill;
1341
color: $titlebar-text;
1342
&:disabled {
1344
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1345
background-color: $titlebar-entry-fill;
1346
color: $titlebar-text-disabled;
1347
}
1348
image {
1350
color: $titlebar-text2;
1351
&:hover,
1353
&:active {
1354
color: $titlebar-text;
1355
}
1356
&:disabled {
1358
color: $titlebar-text-disabled;
1359
}
1360
}
1361
}
1362
.linked:not(.vertical) > entry:not(:only-child) {
1364
border-radius: $corner-radius $corner-radius 0 0;
1365
}
1366
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1368
@extend %button-flat;
1369
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1371
$titlebar-indicator 0%,
1372
transparent 0%)
1373
0 0 0 / 0 0 0px;
1374
@include ink-color($titlebar-text2);
1376
&:disabled {
1378
color: $titlebar-text2-disabled;
1379
}
1380
@at-root %titlebar-button-checked,
1382
&:checked {
1383
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1384
$titlebar-indicator 100%,
1385
transparent 0%)
1386
0 0 2 / 0 0 2px;
1387
background-color: transparent;
1388
color: $titlebar-text;
1389
@include ink-color($titlebar-text);
1390
&:disabled {
1392
background-color: transparent;
1393
color: $titlebar-text-disabled;
1394
}
1395
}
1396
&:backdrop {
1398
color: $titlebar-text-disabled;
1399
&:disabled {
1401
color: $titlebar-text2-disabled;
1402
}
1403
&:checked {
1405
color: $titlebar-text2;
1406
&:disabled {
1408
color: $titlebar-text2-disabled;
1409
}
1410
}
1411
}
1412
}
1413
button.suggested-action, button.destructive-action {
1415
&:disabled {
1416
background-color: $titlebar-fill;
1417
color: $titlebar-text-disabled;
1418
}
1419
}
1420
// FIXME: Ugly overriding
1422
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1423
min-width: 120px - 8px * 2;
1424
}
1425
// FIXME: Ugly overriding
1427
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1428
min-width: 0;
1429
padding-left: ($medium-size - 24px) / 2;
1430
padding-right: ($medium-size - 24px) / 2;
1431
}
1432
&.selection-mode {
1434
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1435
// but let's keep it for backwards compatibility.
1436
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1437
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1438
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1439
background-color: $primary;
1440
color: on($primary);
1441
&:backdrop {
1443
color: on($primary, text2);
1444
}
1445
.subtitle:link {
1447
color: on($primary);
1448
}
1449
button:not(.suggested-action):not(.destructive-action) {
1451
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1452
currentColor 0%,
1453
transparent 0%)
1454
0 0 0 / 0 0 0px;
1455
color: on($primary);
1456
&:disabled {
1458
color: on($primary, text-disabled);
1459
}
1460
&:checked {
1462
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1463
currentColor 100%,
1464
transparent 0%)
1465
0 0 2 / 0 0 2px;
1466
color: on($primary);
1467
&:disabled {
1469
color: on($primary, text-disabled);
1470
}
1471
}
1472
&:backdrop {
1474
color: on($primary, text2);
1475
&:disabled {
1477
color: on($primary, text2-disabled);
1478
}
1479
&:checked {
1481
color: on($primary, text2);
1482
&:disabled {
1484
color: on($primary, text2-disabled);
1485
}
1486
}
1487
}
1488
}
1489
.selection-menu {
1491
padding-left: 16px;
1492
padding-right: 16px;
1493
arrow {
1495
-GtkArrow-arrow-scaling: 1;
1496
}
1497
.arrow {
1499
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1500
}
1501
}
1502
}
1503
.selection-mode {
1505
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1506
background-color: $primary;
1507
}
1508
// squared corners when the window is maximized, tiled, or fullscreen
1510
.tiled &,
1511
.tiled-top &,
1512
.tiled-right &,
1513
.tiled-bottom &,
1514
.tiled-left &,
1515
.maximized &,
1516
.fullscreen & {
1517
border-radius: 0;
1518
box-shadow: $shadow-z1;
1519
}
1520
&.default-decoration {
1522
min-height: $small-size;
1523
padding: $container-padding;
1524
box-shadow: inset 0 1px highlight($titlebar);
1525
.tiled &,
1527
.maximized &,
1528
.fullscreen & {
1529
box-shadow: none;
1530
}
1531
button.titlebutton {
1533
min-height: $small-size;
1534
min-width: $small-size;
1535
margin: 0;
1536
padding: 0;
1537
}
1538
// workaround for non-animatable buttons
1540
.background:not(.csd) & button.titlebutton:active {
1541
background-size: 1000% 1000%;
1542
}
1543
}
1544
.solid-csd & {
1546
&:dir(rtl), &:dir(ltr) { // specificity bump
1547
border-radius: 0;
1548
box-shadow: $shadow-z1; // just remove the highlight
1549
}
1550
}
1551
}
1552
headerbar {
1554
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1555
min-height: $large-size;
1556
padding: 0 $container-padding;
1557
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1559
entry,
1560
spinbutton,
1561
button {
1562
margin-top: $container-padding;
1563
margin-bottom: $container-padding;
1564
}
1565
separator.titlebutton {
1567
margin-top: $large-size / 4;
1568
margin-bottom: $large-size / 4;
1569
background-color: $titlebar-divider;
1570
}
1571
switch {
1573
margin-top: ($large-size - 24px) / 2;
1574
margin-bottom: ($large-size - 24px) / 2;
1575
}
1576
// reset button margins of the spinbutton
1578
spinbutton button {
1579
margin-top: 0;
1580
margin-bottom: 0;
1581
}
1582
// FIXME: This is a hacky workaround.
1584
.entry-tag {
1585
margin-top: 5px;
1586
margin-bottom: 5px;
1587
}
1588
}
1589
// Development versions of apps to use a differently styled headerbar
1591
window.devel .titlebar:not(.selection-mode) {
1592
}
1593
/************
1596
* Pathbars *
1597
************/
1598
%pathbar_button,
1599
.path-bar.linked:not(.vertical) > button {
1600
@extend %button-flat-basic;
1601
padding-left: ($medium-size - 24px) / 2;
1603
padding-right: ($medium-size - 24px) / 2;
1604
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1605
$primary 0%,
1606
transparent 0%)
1607
0 0 0 / 0 0 0px;
1608
border-radius: $corner-radius;
1609
&:checked {
1611
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1612
$primary 100%,
1613
transparent 0%)
1614
0 0 2 / 0 0 2px;
1615
color: $text;
1616
&,
1618
&:disabled {
1619
background-color: transparent;
1620
}
1621
}
1622
label:not(:only-child) {
1624
&:first-child {
1625
margin-left: 0;
1626
}
1627
&:last-child {
1629
margin-right: 0;
1630
}
1631
}
1632
&.text-button {
1634
min-width: 0;
1635
}
1636
&.slider-button {
1638
padding-left: (24px - 16px) / 2;
1639
padding-right: (24px - 16px) / 2;
1640
}
1641
}
1642
/**************
1645
* Tree Views *
1646
**************/
1647
treeview.view {
1648
@at-root * {
1649
-GtkTreeView-horizontal-separator: 4;
1650
-GtkTreeView-grid-line-width: 1;
1651
-GtkTreeView-grid-line-pattern: '';
1652
-GtkTreeView-tree-line-width: 1;
1653
-GtkTreeView-tree-line-pattern: '';
1654
-GtkTreeView-expander-size: 16;
1655
}
1656
border-left-color: $stroke; // this is actually the tree lines color,
1658
border-top-color: $divider; // while this is the grid lines color, better then nothing
1659
// FIXME: Avoid transparency background-color being slightly darker
1661
&:selected {
1662
background-color: $base;
1663
background-image: image($overlay-selected);
1664
}
1665
// to avoid borders being overridden by the previously set props
1667
rubberband {
1668
@extend rubberband;
1669
}
1670
&:hover,
1672
&:selected {
1673
border-radius: 0;
1674
}
1675
&.separator {
1677
min-height: 1px + 2px * 2;
1678
color: $divider;
1679
}
1680
&:drop(active) {
1682
// FIXME: box-shadow, background-color and background-image are not available here.
1683
border-style: solid none;
1684
border-width: 9999px;
1685
border-color: $overlay-hover;
1686
&.after {
1688
border-top-style: none;
1689
}
1690
&.before {
1692
border-bottom-style: none;
1693
}
1694
}
1695
&.expander {
1697
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1698
-gtk-icon-transform: rotate(-90deg);
1699
&:dir(rtl) {
1701
-gtk-icon-transform: rotate(90deg);
1702
}
1703
&:checked {
1705
-gtk-icon-transform: unset;
1706
}
1707
color: $text2;
1709
&:hover,
1711
&:active {
1712
color: $text;
1713
}
1714
&:disabled {
1716
color: $text2-disabled;
1717
}
1718
}
1719
&.progressbar { // progress bar in treeviews
1721
border-bottom: $bar-size solid $primary;
1722
box-shadow: none;
1723
background-color: transparent;
1724
background-image: none;
1725
&:selected:hover {
1727
box-shadow: none;
1728
}
1729
}
1730
&.trough { // progress bar trough in treeviews
1732
border-bottom: $bar-size solid $stroke-disabled;
1733
box-shadow: none;
1734
background-color: transparent;
1735
background-image: none;
1736
&:selected:hover {
1738
box-shadow: none;
1739
}
1740
}
1741
header {
1743
button {
1744
padding: 2px 6px;
1745
border-style: none solid solid none;
1746
border-width: 1px;
1747
border-color: $divider;
1748
border-radius: 0;
1749
background-clip: border-box;
1750
color: $text2;
1751
@include ink-color($text2);
1752
@include list-item;
1753
&:disabled {
1755
color: $text2-disabled;
1756
}
1757
&,
1759
&:disabled {
1760
background-color: $base;
1761
}
1762
&:last-child {
1764
border-right-style: none;
1765
}
1766
}
1767
}
1768
button.dnd,
1770
header.button.dnd { // for treeview-like derive widgets
1771
padding: 2px 6px;
1772
border-style: none solid solid;
1773
border-width: 1px;
1774
border-color: $divider;
1775
border-radius: 0;
1776
box-shadow: none;
1777
background-color: $base;
1778
background-clip: border-box;
1779
color: $primary;
1780
}
1781
// see tests/testaccel to test
1783
acceleditor > label {
1784
background-color: $primary;
1785
}
1786
}
1787
/*********
1790
* Menus *
1791
*********/
1792
menubar,
1793
.menubar {
1794
-GtkWidget-window-dragging: true;
1795
padding: 0;
1796
// box-shadow: inset 0 -1px $divider;
1797
background-color: $titlebar;
1798
color: $titlebar-text;
1799
&:backdrop {
1801
background-color: $titlebar-backdrop;
1802
color: $titlebar-text2;
1803
}
1804
.csd & {
1806
transition: $transition;
1807
}
1808
> menuitem {
1810
transition: $transition;
1811
min-height: 20px;
1812
padding: 4px 8px;
1813
color: $titlebar-text2;
1814
&:hover { // Seems like it :hover even with keyboard focus
1816
transition: none;
1817
background-color: $overlay-checked;
1818
color: $titlebar-text;
1819
}
1820
&:disabled {
1822
color: $titlebar-text2-disabled;
1823
}
1824
}
1825
}
1826
// Needed to make the border-radius of menus work
1828
// otherwise the background bleeds out of the menu edges
1829
.background.popup {
1830
background-color: transparent;
1831
}
1832
menu,
1834
.menu,
1835
.context-menu {
1836
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1837
padding: 4px 0;
1838
box-shadow: inset 0 1px highlight($surface);
1839
background-color: $surface;
1840
background-clip: border-box;
1841
border: 1px solid $divider; // adds borders in a non composited env
1842
.csd & {
1844
border: none; // axes borders in a composited env
1845
border-radius: $corner-radius;
1846
}
1847
menuitem {
1849
transition: background-color $duration $ease-out;
1850
min-height: 20px;
1851
min-width: 40px;
1852
padding: 4px 8px;
1853
color: $text;
1854
font: initial;
1855
text-shadow: none;
1856
&:hover {
1858
transition: none;
1859
background-color: $overlay-hover;
1860
}
1861
&:disabled {
1863
color: $text-disabled;
1864
}
1865
// submenu indicators
1867
arrow {
1868
min-height: 16px;
1869
min-width: 16px;
1870
color: $text2;
1871
&:disabled {
1873
color: $text2-disabled;
1874
}
1875
&:dir(ltr) {
1877
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1878
margin-left: 8px;
1879
}
1880
&:dir(rtl) {
1882
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1883
margin-right: 8px;
1884
}
1885
}
1886
// avoids labels color being overridden, see
1888
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1889
label {
1890
&:dir(rtl),
1891
&:dir(ltr) {
1892
// color: inherit;
1893
}
1894
}
1895
}
1896
// overflow arrows
1898
> arrow {
1899
min-height: 16px;
1900
min-width: 16px;
1901
padding: 4px;
1902
background-color: $surface;
1903
color: $text2;
1904
&.top {
1906
margin-top: -4px;
1907
border-bottom: 1px solid $divider;
1908
border-radius: $corner-radius $corner-radius 0 0;
1909
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1910
}
1911
&.bottom {
1913
margin-top: 4px * 2;
1914
margin-bottom: -4px * 3;
1915
border-top: 1px solid $divider;
1916
border-radius: 0 0 $corner-radius $corner-radius;
1917
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1918
}
1919
&:hover {
1921
background-image: image($overlay-hover);
1922
}
1923
&:disabled {
1925
border-color: transparent;
1926
background-color: transparent;
1927
color: transparent;
1928
// color: $text2-disabled;
1929
}
1930
}
1931
separator {
1933
margin: 4px 0;
1934
}
1935
}
1936
menuitem {
1938
accelerator {
1939
color: $text2;
1940
}
1941
&:disabled accelerator {
1943
color: $text2-disabled;
1944
}
1945
}
1946
/************
1949
* Popovers *
1950
************/
1951
popover.background {
1952
transition: $transition-shadow;
1953
padding: 2px;
1954
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1955
background-color: $surface;
1956
&:backdrop {
1958
box-shadow: $shadow-z2;
1959
}
1960
&, .csd & {
1962
border-style: solid;
1963
border-width: 1px;
1964
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1965
border-radius: $corner-radius + 1px;
1966
}
1967
> stack {
1969
margin: -4px; // remove extra padding from menu style popovers
1970
}
1971
> toolbar {
1973
margin: -2px;
1974
}
1975
> list,
1977
> .view,
1978
> toolbar {
1979
border-style: none;
1980
box-shadow: none;
1981
background-color: transparent;
1982
}
1983
// FIXME: Use the popover color instead of transparent as a workaround for .view
1985
list,
1986
.view:not(:selected),
1987
toolbar {
1988
background-color: $surface;
1989
}
1990
&.touch-selection,
1992
&.magnifier,
1993
&.osd {
1994
// @extend %osd;
1995
}
1996
button:not(.suggested-action):not(.destructive-action) {
1998
// @extend %button-flat;
1999
}
2000
.linked:not(.vertical) > entry:not(:only-child) {
2002
// border-radius: $corner-radius $corner-radius 0 0;
2003
}
2004
&.menu button,
2006
button.model {
2007
@extend %button-flat;
2008
min-height: 32px;
2010
padding: 0 8px;
2011
border-radius: $corner-radius;
2012
&:checked {
2014
// color: $primary;
2015
}
2016
}
2017
separator {
2019
margin: 4px 0;
2020
}
2021
list separator {
2023
margin: 0;
2024
}
2025
}
2026
/*************
2028
* Notebooks *
2029
*************/
2030
notebook {
2031
frame > paned > & > header,
2032
&.frame > header {
2033
background-color: $base-alt;
2034
}
2035
&:focus tab:checked {
2037
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2038
}
2039
> header {
2041
border-width: 1px;
2042
border-color: $divider;
2043
background-color: $background;
2044
background-clip: border-box;
2045
&.top {
2047
border-bottom-style: solid;
2048
> tabs {
2050
margin-bottom: -1px;
2051
> tab {
2053
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2054
&:checked {
2056
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2057
}
2058
&.reorderable-page {
2060
border-image-width: 0 1px 2px;
2061
}
2062
}
2063
}
2064
}
2065
&.bottom {
2067
border-top-style: solid;
2068
> tabs {
2070
margin-top: -1px;
2071
> tab {
2073
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2074
&:checked {
2076
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2077
}
2078
&.reorderable-page {
2080
border-image-width: 2px 1px 0;
2081
}
2082
}
2083
}
2084
}
2085
&.left {
2087
border-right-style: solid;
2088
> tabs {
2090
margin-right: -1px;
2091
> tab {
2093
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2094
&:checked {
2096
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2097
}
2098
&.reorderable-page {
2100
border-image-width: 1px 2px 1px 0;
2101
}
2102
}
2103
}
2104
}
2105
&.right {
2107
border-left-style: solid;
2108
> tabs {
2110
margin-left: -1px;
2111
> tab {
2113
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2114
&:checked {
2116
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2117
}
2118
&.reorderable-page {
2120
border-image-width: 1px 0 1px 2px;
2121
}
2122
}
2123
}
2124
}
2125
&.top > tabs > arrow {
2127
@extend %notebook_vert_arrows;
2128
border-top-style: none;
2130
}
2131
&.bottom > tabs > arrow {
2133
@extend %notebook_vert_arrows;
2134
border-bottom-style: none;
2136
}
2137
@at-root %notebook_vert_arrows {
2139
padding-left: 4px;
2140
padding-right: 4px;
2141
&.down {
2143
margin-left: -8px;
2144
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2145
}
2146
&.up {
2148
margin-right: -8px;
2149
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2150
}
2151
}
2152
&.left > tabs > arrow {
2154
@extend %notebook_horz_arrows;
2155
border-left-style: none;
2157
}
2158
&.right > tabs > arrow {
2160
@extend %notebook_horz_arrows;
2161
border-right-style: none;
2163
}
2164
@at-root %notebook_horz_arrows {
2166
padding-top: 4px;
2167
padding-bottom: 4px;
2168
&.down {
2170
margin-top: -8px;
2171
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2172
}
2173
&.up {
2175
margin-bottom: -8px;
2176
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2177
}
2178
}
2179
> tabs > arrow {
2181
min-height: 16px;
2182
min-width: 16px;
2183
border-radius: 0;
2184
@extend %ripple;
2186
@include ink-color($text2);
2187
&:disabled {
2189
color: $text2-disabled;
2190
}
2191
}
2192
tab {
2194
transition: $transition,
2195
background-size 0ms,
2196
background-image 0ms;
2197
min-height: $small-size;
2198
min-width: $small-size;
2199
padding: $container-padding 12px;
2200
border-width: 1px; // for reorderable tabs
2202
border-color: transparent; //
2203
outline: none;
2205
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2206
background-repeat: no-repeat;
2207
background-position: center;
2208
background-size: 0% 0%;
2209
background-clip: border-box;
2210
color: $text2;
2212
font-weight: 500;
2213
&:hover {
2215
background-color: $overlay-hover;
2216
}
2217
&:disabled {
2219
color: $text2-disabled;
2220
}
2221
&:checked {
2223
transition: $transition,
2224
background-size $ripple-fade-in-duration $ease-out,
2225
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2226
background-color: transparent;
2227
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2228
background-size: 1000% 1000%;
2229
background-clip: padding-box;
2230
color: $text;
2231
&:disabled {
2233
color: $text-disabled;
2234
}
2235
&.reorderable-page {
2237
border-color: $divider;
2238
background-color: $base;
2239
}
2240
}
2241
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2243
> box {
2244
transition: background-color $duration $ease-out;
2245
margin: -$container-padding -12px;
2246
padding: $container-padding 12px;
2247
&:drop(active) {
2249
background-color: $overlay-hover;
2250
}
2251
}
2252
// colors the button like the label, overridden otherwise
2254
button.flat {
2255
@extend %button-small;
2256
&:last-child {
2258
margin-left: $container-padding;
2259
margin-right: $container-padding - 12px;
2260
}
2261
&:first-child {
2263
margin-left: $container-padding - 12px;
2264
margin-right: $container-padding;
2265
}
2266
}
2267
}
2268
&.top,
2270
&.bottom {
2271
tabs {
2272
padding-left: 8px;
2273
padding-right: 8px;
2274
&:not(:only-child) {
2276
&:first-child {
2277
margin-left: 0;
2278
}
2279
&:last-child {
2281
margin-right: 0;
2282
}
2283
}
2284
tab.reorderable-page {
2286
border-style: none solid;
2287
}
2288
}
2289
}
2290
&.left,
2292
&.right {
2293
tabs {
2294
padding-top: 8px;
2295
padding-bottom: 8px;
2296
&:not(:only-child) {
2298
&:first-child {
2299
margin-top: 0;
2300
}
2301
&:last-child {
2303
margin-bottom: 0;
2304
}
2305
}
2306
tab.reorderable-page {
2308
border-style: solid none;
2309
}
2310
}
2311
}
2312
}
2313
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2315
background-color: $base;
2316
}
2317
}
2318
/**************
2321
* Scrollbars *
2322
**************/
2323
scrollbar {
2324
$_slider_min_length: 24px;
2325
// disable steppers
2327
@at-root * {
2328
-GtkScrollbar-has-backward-stepper: false;
2329
-GtkScrollbar-has-forward-stepper: false;
2330
}
2331
transition: $transition;
2333
background-color: $base;
2334
// scrollbar border
2336
&.top { border-bottom: 1px solid $divider; }
2337
&.bottom { border-top: 1px solid $divider; }
2338
&.left { border-right: 1px solid $divider; }
2339
&.right { border-left: 1px solid $divider; }
2340
// slider
2342
slider {
2343
transition: background-color $duration $ease-out;
2344
min-width: 8px;
2345
min-height: 8px;
2346
border: 4px solid transparent;
2347
border-radius: $circular-radius;
2348
background-clip: padding-box;
2349
background-color: $text-disabled;
2350
&:hover {
2352
background-color: $text2;
2353
}
2354
&:active {
2356
background-color: $text;
2357
}
2358
&:disabled {
2360
background-color: $text2-disabled;
2361
}
2362
}
2363
&.fine-tune {
2365
slider {
2366
min-width: 4px;
2367
min-height: 4px;
2368
}
2369
&.horizontal slider {
2371
margin: 2px 0;
2372
}
2373
&.vertical slider {
2375
margin: 0 2px;
2376
}
2377
}
2378
&.overlay-indicator {
2380
&:not(.fine-tune) slider {
2381
transition-property: background-color, min-height, min-width;
2382
}
2383
&:not(.dragging):not(.hovering) {
2385
border-color: transparent;
2386
background-color: transparent;
2387
slider {
2389
min-width: 4px;
2390
min-height: 4px;
2391
margin: 4px - 1px;
2392
border: 1px solid rgba($base, 0.3);
2393
}
2394
button {
2396
min-width: 4px;
2397
min-height: 4px;
2398
margin: 4px - 1px;
2399
border: 1px solid rgba($base, 0.3);
2400
border-radius: $circular-radius;
2401
background-color: $text-disabled;
2402
background-clip: padding-box;
2403
-gtk-icon-source: none;
2404
&:disabled {
2406
background-color: $text2-disabled;
2407
}
2408
}
2409
&.horizontal {
2411
slider {
2412
min-width: $_slider_min_length;
2413
}
2414
button {
2416
min-width: 8px;
2417
}
2418
}
2419
&.vertical {
2421
slider {
2422
min-height: $_slider_min_length;
2423
}
2424
button {
2426
min-height: 8px;
2427
}
2428
}
2429
}
2430
&.dragging,
2432
&.hovering {
2433
background-color: rgba($surface, 0.9);
2434
}
2435
}
2436
&.horizontal slider {
2438
min-width: $_slider_min_length;
2439
}
2440
&.vertical slider {
2442
min-height: $_slider_min_length;
2443
}
2444
// button styling
2446
button {
2447
@extend %button-flat-basic;
2448
min-width: 16px;
2450
min-height: 16px;
2451
padding: 0;
2452
border-radius: 0;
2453
}
2454
// button icons
2456
&.vertical {
2457
button {
2458
&.down {
2459
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2460
}
2461
&.up {
2463
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2464
}
2465
}
2466
}
2467
&.horizontal {
2469
button {
2470
&.down {
2471
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2472
}
2473
&.up {
2475
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2476
}
2477
}
2478
}
2479
}
2480
/**********
2483
* Switch *
2484
**********/
2485
switch {
2486
transition: all $duration $ease-out;
2487
margin: $container-padding 0;
2488
padding: 0 2px;
2489
border: 5px solid transparent;
2490
border-radius: $circular-radius;
2491
background-color: $stroke;
2492
background-clip: padding-box;
2493
font-size: 0;
2494
&:checked {
2496
background-color: rgba($primary, 0.5);
2497
}
2498
&:disabled {
2500
opacity: 0.5;
2501
}
2502
// hide on/off icons for >=3.24.5
2504
image {
2505
margin: -8px;
2506
-gtk-icon-transform: scale(0);
2507
}
2508
slider {
2510
transition: all $duration $ease-out;
2511
min-width: 20px;
2512
min-height: 20px;
2513
margin: -3px -2px;
2514
border-radius: $circular-radius;
2515
outline: none;
2516
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2517
background-color: $switch-surface;
2518
}
2519
&:hover slider {
2521
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2522
}
2523
&:focus slider {
2525
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2526
}
2527
&:checked slider {
2529
background-color: $primary;
2530
color: $primary;
2531
}
2532
row:selected & {
2534
}
2535
}
2536
/*************************
2539
* Check and Radio items *
2540
*************************/
2541
// draw regular check and radio items using our PNG assets
2542
// all assets are rendered from assets.svg. never add pngs directly
2543
// selection-mode
2545
.view.content-view.check:not(list),
2546
.content-view:not(list) .tile check {
2547
min-height: 40px;
2548
min-width: 40px;
2549
margin: 0;
2550
padding: 0;
2551
box-shadow: none;
2552
background-color: transparent;
2553
background-image: none;
2554
-gtk-icon-shadow: $icon-shadow-z2;
2555
&:hover,
2557
&:active {
2558
-gtk-icon-shadow: $icon-shadow-z4;
2559
}
2560
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2562
&#{$class} {
2563
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2564
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2566
}
2567
}
2568
}
2569
checkbutton,
2571
radiobutton {
2572
outline: none;
2573
}
2574
checkbutton.text-button,
2576
radiobutton.text-button {
2577
// this is for a nice focus on check and radios text
2578
padding: 2px;
2579
label:not(:only-child) {
2581
margin: 0 4px;
2582
}
2583
}
2584
$check-radio-size: 40px;
2586
check,
2588
radio {
2589
min-height: 24px;
2590
min-width: 24px;
2591
margin: -($check-radio-size - 24px) / 2;
2592
padding: ($check-radio-size - 24px) / 2;
2593
border-radius: $circular-radius;
2594
@extend %ripple;
2596
@include ink-color($text2);
2597
&:checked,
2599
&:indeterminate {
2600
@include ink-color($primary);
2601
}
2602
&:disabled {
2604
color: $text2-disabled;
2605
}
2606
&:only-child {
2608
// margin: -12px;
2609
}
2610
popover modelbutton.flat & {
2612
&,
2613
&:focus,
2614
&:hover,
2615
&:focus:hover,
2616
&:active,
2617
&:disabled {
2618
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2619
box-shadow: none;
2620
background-image: none;
2621
}
2622
&.left:dir(rtl) {
2624
margin-left: -12px;
2625
margin-right: -4px;
2626
}
2627
&.right:dir(ltr) {
2629
margin-left: -4px;
2630
margin-right: -12px;
2631
}
2632
}
2633
menu menuitem & {
2635
transition: none;
2636
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2637
padding: 0;
2638
&:dir(ltr) {
2640
margin-right: 8px;
2641
}
2642
&:dir(rtl) {
2644
margin-left: 8px;
2645
}
2646
&,
2648
&:hover,
2649
&:disabled {
2650
box-shadow: none;
2651
}
2652
}
2653
}
2654
%check,
2656
check {
2657
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2658
&:checked {
2660
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2661
}
2662
&:indeterminate {
2664
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2665
}
2666
}
2667
%radio,
2669
radio {
2670
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2671
&:checked {
2673
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2674
}
2675
&:indeterminate {
2677
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2678
}
2679
border-image-slice: $check-radio-size / 2px;
2681
border-image-width: $check-radio-size / 2;
2682
$radio-indicator-size: 10px / $check-radio-size / 2;
2684
border-image-source:
2686
-gtk-gradient(
2687
radial,
2688
center center, 0,
2689
center center, .001,
2690
to($primary),
2691
to(transparent)
2692
);
2693
&:checked:not(:indeterminate) {
2695
border-image-source:
2696
-gtk-gradient(
2697
radial,
2698
center center, 0,
2699
center center, $radio-indicator-size,
2700
to($primary),
2701
to(transparent)
2702
);
2703
&:disabled {
2705
border-image-source:
2706
-gtk-gradient(
2707
radial,
2708
center center, 0,
2709
center center, $radio-indicator-size,
2710
to($text2-disabled),
2711
to(transparent)
2712
);
2713
}
2714
}
2715
}
2716
%small_check,
2718
menu menuitem check {
2719
min-height: 16px;
2720
min-width: 16px;
2721
border-radius: $corner-radius;
2722
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2723
&:checked {
2725
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2726
}
2727
&:indeterminate {
2729
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2730
}
2731
}
2732
%small_radio,
2734
menu menuitem radio {
2735
min-height: 16px;
2736
min-width: 16px;
2737
border-image: none;
2738
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2739
&:checked {
2741
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2742
}
2743
&:indeterminate {
2745
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2746
}
2747
}
2748
// ANIMATION:
2750
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2751
// the transformation is set on the active state and it get reset on the checked state.
2752
radio:not(:checked):active {
2753
// -gtk-icon-transform: scale(0);
2754
}
2755
// Otherwise, treeview.view styling will be applied...
2757
treeview.view check,
2758
treeview.view radio {
2759
padding: 0;
2760
color: $text2;
2761
&:checked,
2763
&:indeterminate {
2764
color: $primary;
2765
}
2766
&:disabled {
2768
color: $text2-disabled;
2769
}
2770
&,
2772
&:hover,
2773
&:selected,
2774
&:selected:hover {
2775
box-shadow: none;
2776
background-color: transparent;
2777
}
2778
}
2779
treeview.view radio:checked {
2781
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2782
border-image: none;
2783
}
2784
/************
2787
* GtkScale *
2788
************/
2789
scale {
2790
// sizing
2791
$_marks_length: 8px;
2792
$_marks_distance: 7px;
2793
$trough_size: 2px;
2795
$finetune_trough_size: 4px;
2796
$slider_size: 32px;
2798
$slider_margin: -($slider_size - $trough_size) / 2;
2800
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2801
$color_slider_margin: -($slider_size) * 3 / 4;
2803
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2804
min-height: $trough_size;
2806
min-width: $trough_size;
2807
&.horizontal {
2809
padding: ($medium-size - $trough_size) / 2 12px;
2810
}
2811
&.vertical {
2813
padding: 12px ($medium-size - $trough_size) / 2;
2814
}
2815
// the slider is inside the trough, so to have make it bigger there's a negative margin
2817
slider {
2818
min-height: $slider_size;
2819
min-width: $slider_size;
2820
margin: $slider_margin;
2821
}
2822
// click-and-hold the slider to activate
2824
&.fine-tune {
2825
&.horizontal {
2826
min-height: $finetune_trough_size;
2827
padding-top: ($medium-size - $finetune_trough_size) / 2;
2828
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2829
}
2830
&.vertical {
2832
min-width: $finetune_trough_size;
2833
padding-left: ($medium-size - $finetune_trough_size) / 2;
2834
padding-right: ($medium-size - $finetune_trough_size) / 2;
2835
}
2836
// to make the trough grow in fine-tune mode
2838
slider {
2839
margin: $finetune_slider_margin;
2840
}
2841
}
2842
// the backing bit
2844
trough {
2845
transition: background-color $duration $ease-out;
2846
outline: none;
2847
background-color: $stroke;
2848
&:disabled {
2850
background-color: $stroke-disabled;
2851
}
2852
}
2853
// the colored part of the backing bit
2855
highlight {
2856
transition: background-image $duration $ease-out;
2857
background-image: image($primary);
2858
&:disabled {
2860
background-color: $background;
2861
background-image: image($text2-disabled);
2862
}
2863
}
2864
// this is another differently styled part of the backing bit, the most relevant use case is for example
2866
// in media player to indicate how much video stream as been cached
2867
fill {
2868
transition: background-color $duration $ease-out;
2869
background-color: $stroke;
2870
&:disabled {
2872
background-color: transparent;
2873
}
2874
}
2875
slider {
2877
transition: background-color $duration $ease-out,
2878
background-size $ripple-fade-out-duration $ease-out,
2879
background-image $ripple-fade-out-opacity-duration $ease-out;
2880
background-repeat: no-repeat;
2881
background-position: center;
2882
background-size: auto, 1000% 1000%;
2883
border-radius: 50%;
2884
color: $primary;
2885
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2887
&#{$class} {
2888
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2889
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2891
radial-gradient(circle, transparent 10%, transparent 0%);
2892
}
2893
}
2894
&:hover {
2896
background-color: $overlay-hover;
2897
}
2898
&:focus {
2900
background-color: $overlay-focus;
2901
}
2902
&:active {
2904
$_url: 'assets/scale-slider#{$asset-suffix}';
2905
transition: background-color $duration $ease-out,
2907
background-size 0ms,
2908
background-image 0ms;
2909
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2910
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2911
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2912
background-size: auto, 0% 0%;
2913
}
2914
}
2915
marks,
2917
value {
2918
color: $text2;
2919
}
2920
indicator {
2922
background-color: $stroke;
2923
color: transparent;
2924
}
2925
//marks margins
2927
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2928
(horizontal, bottom, bottom, top),
2929
(vertical, top, left, right),
2930
(vertical, bottom, right, left) {
2931
&.#{$scale_orient} marks {
2932
&.#{$marks_class} {
2933
margin-#{$marks_margin}: $_marks_distance;
2934
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2935
}
2936
}
2937
&.#{$scale_orient}.fine-tune marks {
2939
&.#{$marks_class} {
2940
margin-#{$marks_margin}: $_marks_distance - 1px;
2941
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2942
}
2943
}
2944
}
2945
&.horizontal {
2947
indicator {
2948
min-height: $_marks_length;
2949
min-width: 1px;
2950
}
2951
}
2952
&.vertical {
2954
indicator {
2955
min-height: 1px;
2956
min-width: $_marks_length;
2957
}
2958
}
2959
// *WARNING* scale with marks madness following
2961
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2963
@each $marks_class, $marks_infix in (
2964
".marks-before:not(.marks-after)": "-marks-before",
2965
".marks-after:not(.marks-before)": "-marks-after"
2966
) {
2967
&#{$dir_class}#{$marks_class} {
2968
slider {
2969
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2970
&#{$state_class} {
2971
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2972
background-image:
2974
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2975
radial-gradient(circle, transparent 10%, transparent 0%);
2976
}
2977
}
2978
&:active {
2980
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2981
background-image:
2983
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2984
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2985
}
2986
}
2987
}
2988
}
2989
}
2990
&.color {
2992
min-height: 0;
2993
min-width: 0;
2994
&.horizontal {
2996
padding: 0 0 12px 0;
2997
slider {
2999
&:dir(ltr), &:dir(rtl) { // specificity bump
3000
margin-bottom: $color_slider_margin;
3001
margin-top: $color_marks_slider_margin;
3002
}
3003
}
3004
}
3005
&.vertical {
3007
&:dir(ltr) {
3008
padding: 0 0 0 12px;
3009
slider {
3011
margin-left: $color_slider_margin;
3012
margin-right: $color_marks_slider_margin;
3013
}
3014
}
3015
&:dir(rtl) {
3017
padding: 0 12px 0 0;
3018
slider {
3020
margin-right: $color_slider_margin;
3021
margin-left: $color_marks_slider_margin;
3022
}
3023
}
3024
}
3025
}
3026
}
3027
/*****************
3030
* Progress bars *
3031
*****************/
3032
progressbar {
3033
// sizing
3034
&.horizontal {
3035
trough,
3036
progress {
3037
min-height: $bar-size;
3038
}
3039
}
3040
&.vertical {
3042
trough,
3043
progress {
3044
min-width: $bar-size;
3045
}
3046
}
3047
// FIXME: insensitive state missing and some other state should be set probably
3049
color: $text2;
3050
font-size: smaller;
3051
trough {
3053
background-color: $stroke-disabled;
3054
}
3055
progress {
3057
background-color: $primary;
3058
}
3059
&.osd { // progressbar.osd used for epiphany page loading progress
3061
// min-width: $bar-size;
3062
// min-height: $bar-size;
3063
// background-color: transparent;
3064
trough {
3066
// background-color: transparent;
3067
}
3068
progress {
3070
// background-color: $primary;
3071
}
3072
}
3073
// makes the progress indicator disappear, when the fraction is 0
3075
trough.empty progress {
3076
all: unset;
3077
}
3078
}
3079
/*************
3082
* Level Bar *
3083
*************/
3084
levelbar {
3085
&.horizontal {
3086
block {
3087
min-height: $bar-size;
3088
}
3089
&.discrete block {
3091
min-width: $medium-size;
3092
&:not(:last-child) {
3094
margin-right: 2px;
3095
}
3096
}
3097
}
3098
&.vertical {
3100
block {
3101
min-width: $bar-size;
3102
}
3103
&.discrete block {
3105
min-height: $medium-size;
3106
&:not(:last-child) {
3108
margin-bottom: 2px;
3109
}
3110
}
3111
}
3112
// imitate the entry style
3114
trough {
3115
// padding: 2px;
3116
// border-radius: $corner-radius;
3117
// box-shadow: $shadow-z1;
3118
// background-color: $base;
3119
&:disabled {
3121
// background-color: $base-alt;
3122
}
3123
}
3124
block {
3126
&.low {
3127
background-color: $warning;
3128
}
3129
&.high,
3131
&:not(.empty) {
3132
background-color: $primary;
3133
}
3134
&.full {
3136
background-color: $success;
3137
}
3138
&.empty {
3140
background-color: $stroke-disabled;
3141
}
3142
}
3143
}
3144
/****************
3147
* Print dialog *
3148
*****************/
3149
printdialog {
3150
paper {
3151
padding: 0;
3152
border: 1px solid $divider;
3153
background-color: $base;
3154
color: $text;
3155
}
3156
.dialog-action-box {
3158
margin: 12px;
3159
}
3160
}
3161
/**********
3164
* Frames *
3165
**********/
3166
frame > border,
3167
.frame {
3168
margin: 0;
3169
padding: 0;
3170
border: 1px solid $divider;
3171
border-radius: 0;
3172
box-shadow: none;
3173
&.flat {
3175
border-style: none;
3176
}
3177
}
3178
// for backward compatibility
3180
frame.flat > border {
3181
border-style: none;
3182
}
3183
actionbar > revealer > box {
3185
padding: $container-padding;
3186
border-top: 1px solid $divider;
3187
background-color: $base;
3188
background-clip: border-box;
3189
button:not(.suggested-action):not(.destructive-action) {
3191
@extend %button-flat;
3192
}
3193
.linked:not(.vertical) > entry:not(:only-child) {
3195
border-radius: $corner-radius $corner-radius 0 0;
3196
}
3197
}
3198
scrolledwindow {
3200
viewport.frame { // avoid double borders when viewport inside scrolled window
3201
border-style: none;
3202
}
3203
// This is used when content is touch-dragged past boundaries.
3205
// draws a box on top of the content, the size changes programmatically.
3206
@at-root overshoot {
3207
&.top { @include overshoot(top); }
3208
&.bottom { @include overshoot(bottom); }
3210
&.left { @include overshoot(left); }
3212
&.right { @include overshoot(right); }
3214
}
3215
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3217
@at-root undershoot {
3218
&.top { @include undershoot(top); }
3219
&.bottom { @include undershoot(bottom); }
3221
&.left { @include undershoot(left); }
3223
&.right { @include undershoot(right); }
3225
}
3226
@at-root junction { // the small square between two scrollbars
3228
border-style: solid none none solid;
3229
border-width: 1px;
3230
border-color: $divider;
3231
background-color: $base;
3232
&:dir(rtl) {
3234
border-style: solid solid none none;
3235
}
3236
}
3237
}
3238
// vbox and hbox separators
3240
separator {
3241
min-width: 1px;
3242
min-height: 1px;
3243
background-color: $divider;
3244
}
3245
%hide_separators {
3247
min-width: 0;
3248
min-height: 0;
3249
background-color: transparent;
3250
}
3251
/*********
3254
* Lists *
3255
*********/
3256
list {
3257
border-color: $divider;
3258
background-color: $base;
3259
row {
3261
padding: 2px;
3262
}
3263
}
3264
row {
3266
&.activatable {
3267
@extend %ripple;
3268
@include ink-color($text, $fg: false);
3269
@include list-item;
3270
// this is for indicathing which row generated a popover
3272
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3273
&.has-open-popup {
3274
background-color: $overlay-checked;
3275
}
3276
}
3277
&:selected {
3279
@extend %selected_items;
3280
@include ink-color($primary, $fg: false);
3282
}
3283
}
3284
/*********************
3287
* App Notifications *
3288
*********************/
3289
.app-notification {
3290
// @extend %osd;
3291
@extend %toolbar-osd;
3293
margin: 8px;
3295
button {
3297
@extend %button-flat;
3298
&.text-button:not(:disabled) {
3300
@include ink-color($primary);
3301
}
3302
}
3303
&.frame,
3305
border {
3306
border-style: none;
3307
}
3308
}
3309
/*************
3312
* Expanders *
3313
*************/
3314
expander {
3315
title > arrow {
3316
transition: all $duration $ease-out;
3317
min-width: 16px;
3318
min-height: 16px;
3319
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3320
-gtk-icon-transform: rotate(-90deg);
3321
&:dir(rtl) {
3323
-gtk-icon-transform: rotate(90deg);
3324
}
3325
&:checked {
3327
-gtk-icon-transform: unset;
3328
}
3329
color: $text2;
3331
&:hover,
3333
&:active {
3334
color: $text;
3335
}
3336
&:disabled {
3338
color: $text2-disabled;
3339
}
3340
}
3341
}
3342
/************
3345
* Calendar *
3346
************/
3347
calendar {
3348
padding: 1px;
3349
border: 1px solid $divider;
3350
color: $text;
3351
&:disabled {
3353
color: $text-disabled;
3354
}
3355
&:selected {
3357
@extend %selected_items;
3358
border-radius: $corner-radius + 1px;
3360
}
3361
&.header {
3363
border-style: none none solid;
3364
border-color: $divider;
3365
border-radius: 0;
3366
}
3367
&.button {
3369
border-radius: $corner-radius + 1px;
3370
color: $text2;
3371
&:hover {
3373
background-image: image($overlay-hover);
3374
}
3375
&:disabled {
3377
color: $text2-disabled;
3378
}
3379
}
3380
&.highlight {
3382
color: $text2;
3383
font-weight: 500;
3384
}
3385
&:indeterminate {
3387
color: $text2-disabled;
3388
}
3389
}
3390
/***********
3393
* Dialogs *
3394
***********/
3395
messagedialog { // Message Dialog styling
3396
&.background {
3397
background-color: $surface;
3398
}
3399
.titlebar {
3401
min-height: $small-size;
3402
border-style: none;
3403
box-shadow: inset 0 1px highlight($surface);
3404
background-color: $surface;
3405
color: $text;
3406
&:backdrop {
3408
background-color: $surface;
3409
color: $text2;
3410
}
3411
}
3412
&.csd { // rounded bottom border styling for csd version
3414
&.background {
3415
// bigger radius for better antialiasing
3416
border-bottom-left-radius: $corner-radius;
3417
border-bottom-right-radius: $corner-radius;
3418
}
3419
}
3420
// Hint text
3422
box.vertical > label + label {
3423
color: $text2;
3424
}
3425
.dialog-action-box {
3427
margin-top: -$container-padding;
3428
// padding: $container-padding;
3429
button:not(:last-child) {
3431
margin-right: $container-padding;
3432
}
3433
}
3434
}
3435
.dialog-action-box button {
3437
@extend %button-flat;
3438
&:not(:disabled) {
3440
@include ink-color($primary);
3441
}
3442
&.suggested-action:not(:disabled) {
3444
background-color: transparent;
3445
// @include ink-color($primary);
3446
}
3447
&.destructive-action:not(:disabled) {
3449
background-color: transparent;
3450
@include ink-color($error);
3451
}
3452
}
3453
filechooser {
3455
.dialog-action-box {
3456
border-top: 1px solid $divider;
3457
}
3458
#pathbarbox {
3460
border-bottom: 1px solid $divider;
3461
background-color: $background;
3462
> stack > box > button { // The new folder button
3464
@extend %button-flat;
3465
border-radius: $circular-radius;
3467
}
3468
}
3469
}
3470
filechooserbutton:drop(active) {
3472
// box-shadow: none;
3473
}
3474
/***********
3477
* Sidebar *
3478
***********/
3479
.sidebar {
3480
border-style: none;
3481
background-color: $base-alt;
3482
&:not(separator) {
3484
@at-root %sidebar_left,
3485
&:dir(ltr),
3486
&.left,
3487
&.left:dir(rtl) {
3488
border-right: 1px solid $divider;
3489
border-left-style: none;
3490
}
3491
@at-root %sidebar_right,
3493
&:dir(rtl),
3494
&.right {
3495
border-left: 1px solid $divider;
3496
border-right-style: none;
3497
}
3498
}
3499
list {
3501
background-color: transparent;
3502
}
3503
paned & {
3505
&,
3506
&.left,
3507
&.right,
3508
&.left:dir(rtl),
3509
&:dir(rtl),
3510
&:dir(ltr) {
3511
border-style: none;
3512
}
3513
}
3514
}
3515
stacksidebar.sidebar {
3517
& {
3518
&:dir(ltr),
3519
&.left,
3520
&.left:dir(rtl) {
3521
list {
3522
@extend %sidebar_left;
3523
}
3524
}
3525
&:dir(rtl),
3527
&.right {
3528
list {
3529
@extend %sidebar_right;
3530
}
3531
}
3532
}
3533
+ separator.vertical,
3535
separator.horizontal {
3536
@extend %hide_separators;
3537
}
3538
list {
3540
padding: 4px;
3541
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3542
}
3543
row {
3545
min-height: 32px;
3546
padding: 0 8px - 6px;
3547
border-radius: $corner-radius;
3548
&:selected {
3550
font-weight: 500;
3551
@include ink-color($primary, $activated: true);
3552
}
3553
+ row {
3555
margin-top: 4px;
3556
}
3557
> label {
3559
padding-left: 6px;
3560
padding-right: 6px;
3561
}
3562
&.needs-attention > label {
3564
@extend %needs-attention;
3565
}
3566
}
3567
}
3568
separator.sidebar {
3570
background-color: $divider;
3571
&.selection-mode,
3573
.selection-mode & {
3574
// background-color: $divider;
3575
}
3576
}
3577
/****************
3580
* File chooser *
3581
****************/
3582
// dim the sidebar icons, see bug #786613 for details on this oddity
3583
row image.sidebar-icon {
3584
transition: color $duration $ease-out;
3585
color: $text2;
3586
&:disabled {
3588
color: $text2-disabled;
3589
}
3590
}
3591
placessidebar.sidebar {
3593
> viewport.frame {
3594
border-style: none;
3595
}
3596
list {
3598
padding: (4px - 3px) 0 4px;
3599
}
3600
row {
3602
// Needs overriding of the GtkListBoxRow padding
3603
min-height: 32px;
3604
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3605
padding: 0;
3606
border-radius: $corner-radius;
3607
// Using margins/padding directly in the SidebarRow
3609
// will make the animation of the new bookmark row jump
3610
> revealer {
3611
padding: 0 8px;
3612
}
3613
&:selected {
3615
font-weight: 500;
3616
@include ink-color($primary, $activated: true);
3617
image.sidebar-icon {
3619
color: $primary;
3620
}
3621
}
3622
&:disabled {
3624
color: $text-disabled;
3625
}
3626
image.sidebar-icon {
3628
&:dir(ltr) {
3629
padding-right: 8px;
3630
}
3631
&:dir(rtl) {
3633
padding-left: 8px;
3634
}
3635
}
3636
label.sidebar-label {
3638
&:dir(ltr) {
3639
padding-right: 2px;
3640
}
3641
&:dir(rtl) {
3643
padding-left: 2px;
3644
}
3645
}
3646
@at-root button.sidebar-button {
3648
@extend %button-flat-basic;
3649
@extend %button-small;
3650
}
3651
&.sidebar-placeholder-row {
3653
background-color: $overlay-hover;
3654
}
3655
&.sidebar-new-bookmark-row {
3657
color: $primary;
3658
image.sidebar-icon {
3660
color: $primary;
3661
}
3662
}
3663
}
3664
}
3665
placesview {
3667
.server-list-button {
3668
> image {
3669
-gtk-icon-transform: rotate(0turn);
3670
}
3671
&:checked > image {
3673
-gtk-icon-transform: rotate(-0.5turn);
3674
}
3675
}
3676
// this selects the "connect to server" label
3678
> actionbar > revealer > box > label {
3679
padding-left: 8px;
3680
padding-right: 8px;
3681
}
3682
}
3683
/*********
3686
* Paned *
3687
*********/
3688
paned {
3689
> separator {
3690
min-width: 1px;
3691
min-height: 1px;
3692
-gtk-icon-source: none; // defeats the ugly default handle decoration
3693
border-style: none; // just to be sure
3694
background-color: transparent;
3695
// workaround, using background istead of a border since the border will get rendered twice (?)
3696
background-image: image($divider);
3697
background-size: 1px 1px;
3698
background-clip: content-box; // avoids borders image being rendered twice (?)
3699
&.wide {
3701
min-width: 6px;
3702
min-height: 6px;
3703
background-color: $background;
3704
background-image: image($divider), image($divider);
3705
background-size: 1px 1px, 1px 1px;
3706
}
3707
}
3708
&.horizontal > separator {
3710
background-repeat: repeat-y;
3711
&:dir(ltr) {
3713
margin: 0 -8px 0 0;
3714
padding: 0 8px 0 0;
3715
background-position: left;
3716
}
3717
&:dir(rtl) {
3719
margin: 0 0 0 -8px;
3720
padding: 0 0 0 8px;
3721
background-position: right;
3722
}
3723
&.wide {
3725
margin: 0;
3726
padding: 0;
3727
background-repeat: repeat-y, repeat-y;
3728
background-position: left, right;
3729
}
3730
}
3731
&.vertical > separator {
3733
margin: 0 0 -8px 0;
3734
padding: 0 0 8px 0;
3735
background-repeat: repeat-x;
3736
background-position: top;
3737
&.wide {
3739
margin: 0;
3740
padding: 0;
3741
background-repeat: repeat-x, repeat-x;
3742
background-position: bottom, top;
3743
}
3744
}
3745
}
3746
/**************
3749
* GtkInfoBar *
3750
**************/
3751
infobar {
3752
border-style: none;
3753
&.info,
3755
&.question {
3756
border-bottom: 1px solid $divider;
3757
background-color: $base;
3758
button {
3760
@extend %button-flat;
3761
&.text-button:not(:disabled) {
3763
@include ink-color($primary);
3764
}
3765
}
3766
}
3767
&.warning {
3769
background-color: $warning;
3770
color: on($warning);
3771
button.flat {
3773
@include ink-color(on($warning));
3774
}
3775
selection {}
3777
*:link {
3779
color: on($warning);
3780
}
3781
}
3782
&.error {
3784
background-color: $error;
3785
color: on($error);
3786
button.flat {
3788
@include ink-color(on($error));
3789
}
3790
selection {}
3792
*:link {
3794
color: on($error);
3795
}
3796
}
3797
// Remove ugly hard-coded padding
3799
button label {
3800
margin: 0 -4px;
3801
}
3802
}
3803
/************
3806
* Tooltips *
3807
************/
3808
tooltip {
3809
&.background {
3810
// background-color needs to be set this way otherwise it gets drawn twice
3811
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3812
background-color: $tooltip;
3813
color: on($tooltip);
3814
}
3815
// padding: 4px; /* not working */
3817
border-radius: $corner-radius;
3818
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3819
&:not(.csd):not(.unity-csd) {
3821
// border: 1px solid $divider;
3822
// border-radius: $corner-radius + 1px;
3823
// background-clip: $background-clip-extra;
3824
}
3825
// FIXME: we need a border or tooltips vanish on black background.
3827
decoration {
3828
background-color: transparent;
3829
}
3830
> box {
3832
margin: -6px; // Remove hard-coded 6px margin
3833
min-height: 32px - 4px * 2;
3834
padding: 4px 8px;
3835
}
3836
.dim-label {
3838
color: on($tooltip, text2);
3839
}
3840
* {
3842
// workaround for Eclipse.
3843
// do not include any declaration here.
3844
}
3845
}
3846
/*****************
3849
* Color Chooser *
3850
*****************/
3851
colorswatch {
3852
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3853
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3854
// applied to the overlay box.
3855
// base color corners rounding
3857
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3858
// sports a bigger radius.
3859
// nth-child is needed by the custom color strip.
3860
&.top {
3862
border-top-left-radius: $corner-radius + 0.5px;
3863
border-top-right-radius: $corner-radius + 0.5px;
3864
overlay {
3866
border-top-left-radius: $corner-radius;
3867
border-top-right-radius: $corner-radius;
3868
}
3869
}
3870
&.bottom {
3872
border-bottom-left-radius: $corner-radius + 0.5px;
3873
border-bottom-right-radius: $corner-radius + 0.5px;
3874
overlay {
3876
border-bottom-left-radius: $corner-radius;
3877
border-bottom-right-radius: $corner-radius;
3878
}
3879
}
3880
&.left,
3882
&:first-child:not(.top) {
3883
border-top-left-radius: $corner-radius + 0.5px;
3884
border-bottom-left-radius: $corner-radius + 0.5px;
3885
overlay {
3887
border-top-left-radius: $corner-radius;
3888
border-bottom-left-radius: $corner-radius;
3889
}
3890
}
3891
&.right,
3893
&:last-child:not(.bottom) {
3894
border-top-right-radius: $corner-radius + 0.5px;
3895
border-bottom-right-radius: $corner-radius + 0.5px;
3896
overlay {
3898
border-top-right-radius: $corner-radius;
3899
border-bottom-right-radius: $corner-radius;
3900
}
3901
}
3902
&.dark {
3904
color: on(dark);
3905
}
3906
&.light {
3908
color: on(light);
3909
}
3910
overlay {
3912
transition: $transition-shadow;
3913
box-shadow: $shadow-z1;
3914
&:drop(active),
3916
&:hover {
3917
box-shadow: $shadow-z3;
3918
}
3919
}
3920
&#add-color-button {
3922
border-radius: $corner-radius $corner-radius 0 0;
3923
color: $text;
3924
&:only-child {
3926
border-radius: $corner-radius;
3927
}
3928
overlay {
3930
background-color: $surface;
3931
}
3932
}
3933
&:disabled {
3935
opacity: 0.5;
3936
overlay {
3938
box-shadow: none;
3939
}
3940
}
3941
row:selected & {
3943
}
3944
&#editor-color-sample {
3946
border-radius: $corner-radius + 0.5px;
3947
overlay {
3949
border-radius: $corner-radius;
3950
&:hover {
3952
// box-shadow: $shadow-z1;
3953
}
3954
}
3955
}
3956
}
3957
// colorscale popup
3959
colorchooser .popover.osd {
3960
transition: $transition-shadow;
3961
border-radius: $corner-radius;
3962
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3963
background-color: $surface;
3964
&:backdrop {
3966
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3967
}
3968
}
3969
/********
3972
* Misc *
3973
********/
3974
// content view (grid/list)
3975
.content-view {
3976
background-color: $background;
3977
&:hover {
3979
// -gtk-icon-effect: highlight;
3980
}
3981
rubberband,
3983
.rubberband {
3984
@extend rubberband;
3985
}
3986
}
3987
.scale-popup {
3989
.osd & {
3990
// @extend %osd;
3991
button.flat { // FIXME: quick hack, redo properly
3993
}
3994
}
3995
button { // +/- buttons on GtkVolumeButton popup
3997
}
3998
}
3999
/**********************
4002
* Window Decorations *
4003
**********************/
4004
decoration {
4005
transition: $transition-shadow;
4006
border-radius: $corner-radius $corner-radius 0 0;
4007
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4008
// FIXME rationalize shadows
4010
// this is used for the resize cursor area
4012
margin: 8px;
4013
&:backdrop {
4015
// the transparent shadow here is to enforce that the shadow extents don't
4016
// change when we go to backdrop, to prevent jumping windows.
4017
// The biggest shadow should be in the same order then in the active state
4018
// or the jumping will happen during the transition.
4019
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4020
}
4021
.maximized &,
4023
.fullscreen &,
4024
.tiled &,
4025
.tiled-top &,
4026
.tiled-right &,
4027
.tiled-bottom &,
4028
.tiled-left & {
4029
border-radius: 0;
4030
}
4031
.popup & {
4033
box-shadow: none;
4034
}
4035
// server-side decorations as used by mutter
4037
.ssd & {
4038
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4039
}
4040
.csd.popup & {
4042
border-radius: $corner-radius;
4043
box-shadow: $shadow-z4;
4044
}
4045
tooltip.csd & {
4047
border-radius: $corner-radius;
4048
box-shadow: none;
4049
}
4050
messagedialog.csd & {
4052
border-radius: $corner-radius;
4053
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4054
&:backdrop {
4056
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4057
}
4058
}
4059
.solid-csd & {
4061
margin: 0;
4062
padding: 2px;
4063
border-radius: 0;
4064
box-shadow: none;
4065
box-shadow: inset 0 1px highlight($titlebar);
4066
background-color: $titlebar;
4067
&:backdrop {
4069
background-color: $titlebar-backdrop;
4070
}
4071
}
4072
}
4073
// Window Close button
4075
button.titlebutton {
4076
border-radius: $circular-radius;
4077
.selection-mode & {
4079
}
4080
}
4081
// catch all extend :)
4084
%selected_items {
4086
background-color: $overlay-selected;
4087
}
4088
.monospace {
4090
font-family: monospace;
4091
}
4092
/**********************
4095
* Touch Copy & Paste *
4096
**********************/
4097
// touch selection handlebars for the Popover.osd above
4098
cursor-handle {
4099
color: $primary;
4100
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4101
&.top:dir(ltr),
4103
&.bottom:dir(rtl) {
4104
-gtk-icon-transform: rotate(90deg);
4105
}
4106
&.bottom:dir(ltr),
4108
&.top:dir(rtl) {
4109
-gtk-icon-transform: unset;
4110
}
4111
&.insertion-cursor:dir(ltr),
4113
&.insertion-cursor:dir(rtl) {
4114
padding-top: 6px;
4115
-gtk-icon-transform: rotate(45deg);
4116
}
4117
}
4118
// Decouple the font of context menus from their entry/textview
4120
.context-menu {
4121
font: initial;
4122
}
4123
// shortcut window keys
4125
.keycap {
4126
min-width: 28px - 8px * 2;
4127
min-height: 28px - 2px;
4128
margin-top: 2px;
4129
padding-bottom: 2px;
4130
padding-left: 8px;
4131
padding-right: 8px;
4132
border: solid 1px $divider;
4134
border-radius: $corner-radius + 1px;
4135
box-shadow: inset 0 -2px $divider;
4136
background-color: $surface;
4137
color: $text;
4138
font-size: smaller;
4139
}
4140
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4142
// caret-color: $primary;
4143
}
4144
stackswitcher button.text-button { // FIXME aggregate with buttons
4146
min-width: 100px;
4147
}
4148
stackswitcher button.circular,
4150
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4151
min-width: $medium-size;
4152
min-height: $medium-size;
4153
padding: 0;
4154
}
4155
/*************
4158
* App Icons *
4159
*************/
4160
// Outline for low res icons
4161
.lowres-icon {
4162
// -gtk-icon-shadow: none;
4163
}
4164
// Drapshadow for large icons
4166
.icon-dropshadow {
4167
// -gtk-icon-shadow: none;
4168
}
4169
/*********
4172
* Emoji *
4173
*********/
4174
popover.emoji-picker {
4175
padding: 0;
4176
entry {
4178
border-bottom: 1px solid $divider;
4179
border-image: none;
4180
border-radius: 0;
4181
box-shadow: none;
4182
background-color: transparent;
4183
}
4184
scrolledwindow {
4186
border-bottom: 1px solid $divider;
4187
}
4188
}
4189
button.emoji-section {
4191
margin: 4px;
4192
&:checked {
4194
// background-color: transparent;
4195
@include ink-color($primary, $activated: true);
4196
}
4197
&:not(:last-child) {
4199
margin-right: 0;
4200
}
4201
}
4202
popover.emoji-picker .emoji {
4204
min-width: 3em;
4205
min-height: 3em;
4206
padding: 0 8px;
4207
// font-size: larger;
4208
widget {
4210
transition: $transition;
4211
border-radius: $corner-radius;
4212
&:hover {
4214
background-color: $overlay-hover;
4215
}
4216
}
4217
}
4218
popover.emoji-completion {
4220
padding: 8px 0;
4221
arrow {
4223
border: none;
4224
background: none;
4225
}
4226
.emoji-completion-row {
4228
min-height: $menuitem-size;
4229
padding: 0 12px;
4230
}
4231
.emoji:hover {
4233
background-color: $overlay-hover;
4234
}
4235
}
4236