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
color: $primary;
231
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
232
&:checked {
234
opacity: 1;
235
animation: spin 1s linear infinite;
236
}
237
&:disabled {
239
color: $text2-disabled;
240
}
241
}
242
/****************
245
* Text Entries *
246
****************/
247
%entry,
248
entry {
249
min-height: $medium-size;
250
padding: 0 8px;
251
border-radius: $corner-radius $corner-radius 0 0;
252
caret-color: currentColor; // this shouldn't be needed.
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
&:disabled {
971
color: $text-disabled;
972
}
973
entry {
975
@extend %entry_raised;
976
min-height: $medium-size;
978
min-width: $large-size;
979
padding: 0;
980
}
981
button {
983
min-height: $medium-size;
984
min-width: $large-size;
985
padding: 0;
986
@extend %button-flat-basic;
988
// Remove unwanted focus indicator
990
&:focus:not(:hover):not(:active) {
991
box-shadow: inset 0 0 0 9999px transparent;
992
}
993
&.up {
995
border-radius: $corner-radius $corner-radius 0 0;
996
}
997
&.down {
999
border-radius: 0 0 $corner-radius $corner-radius;
1000
}
1001
}
1002
}
1003
// OSD vertical
1005
.osd &.vertical {
1006
}
1007
// Misc
1009
treeview &:not(.vertical) {
1010
min-height: 0;
1011
border-style: none;
1012
border-radius: 0;
1013
entry {
1015
min-height: 0;
1016
padding: 1px 2px;
1017
}
1018
}
1019
}
1020
/**************
1023
* ComboBoxes *
1024
**************/
1025
combobox {
1026
arrow {
1027
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1028
min-height: 16px;
1029
min-width: 16px;
1030
}
1031
// workaround for menuitem selection
1033
decoration {
1034
transition: none;
1035
}
1036
button.combo cellview {
1038
&:dir(ltr) {
1039
margin-left: 8px - ($medium-size - 16px) / 2;
1040
}
1041
&:dir(rtl) {
1043
margin-right: 8px - ($medium-size - 16px) / 2;
1044
}
1045
}
1046
menu {
1048
padding: 2px 0;
1049
menuitem {
1051
min-height: $medium-size - 2px * 2;
1052
padding: 0 8px;
1053
}
1054
// overflow arrows
1056
> arrow {
1057
&.top {
1058
margin-top: -2px;
1059
}
1060
&.bottom {
1062
margin-top: 2px * 2;
1063
margin-bottom: -2px * 3;
1064
}
1065
}
1066
}
1067
&.linked {
1069
button:nth-child(2) {
1070
&:dir(ltr) {
1071
@extend %linked-not-first-child;
1072
}
1073
&:dir(rtl) {
1075
@extend %linked-not-last-child;
1076
}
1077
}
1078
}
1079
> .linked:not(.vertical) > entry:not(:only-child) {
1081
border-radius: $corner-radius $corner-radius 0 0;
1082
&:first-child {
1084
margin-right: -$medium-size;
1085
padding-right: $medium-size;
1086
}
1087
&:last-child {
1089
margin-left: -$medium-size;
1090
padding-left: $medium-size;
1091
}
1092
}
1093
> .linked:not(.vertical) > button:not(:only-child) {
1095
@extend %button-flat-activatable;
1096
// @extend %button-small;
1097
min-height: 16px;
1099
min-width: 16px;
1100
margin: ($medium-size - $small-size) / 2;
1101
padding: ($small-size - 16px) / 2;
1102
border-radius: $circular-radius;
1103
}
1104
}
1105
// the combo is a composite widget so the way we do button linking doesn't
1107
// work, special case needed. See
1108
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1109
.linked:not(.vertical) > combobox {
1111
&:not(:first-child) > box > button.combo {
1112
@extend %linked-not-first-child;
1113
}
1114
&:not(:last-child) > box > button.combo {
1116
@extend %linked-not-last-child;
1117
}
1118
}
1119
.linked.vertical > combobox {
1121
&:not(:first-child) > box > button.combo {
1122
@extend %linked-vertical-not-first-child;
1123
}
1124
&:not(:last-child) > box > button.combo {
1126
@extend %linked-vertical-not-last-child;
1127
}
1128
}
1129
button.combo:only-child {
1131
border-radius: $corner-radius $corner-radius 0 0;
1132
font-weight: normal;
1133
@include entry(normal);
1135
&:focus {
1137
@include entry(focus);
1138
}
1139
&:drop(active),
1141
&:hover {
1142
@include entry(hover);
1143
}
1144
&:checked {
1146
@include entry(checked);
1147
}
1148
&:disabled {
1150
@include entry(disabled);
1151
}
1152
}
1153
/************
1156
* Toolbars *
1157
************/
1158
toolbar {
1159
-GtkWidget-window-dragging: true;
1160
padding: 2px;
1161
background-color: $background;
1162
button {
1164
@extend %button-flat;
1165
}
1166
// on OSD
1168
.osd & {
1169
background-color: transparent;
1170
}
1171
// stand-alone OSD toolbars
1173
&.osd {
1174
@extend %toolbar-osd;
1175
// positional classes for `attached` osd toolbars
1177
&.left,
1178
&.right,
1179
&.top,
1180
&.bottom {
1181
border-radius: 0;
1182
}
1183
&.bottom {
1185
box-shadow: none;
1186
background-color: transparent;
1187
background-image:
1188
linear-gradient(
1189
to bottom,
1190
transparent,
1191
rgba(black, .1) 30%,
1192
rgba(black, .2) 50%,
1193
rgba(black, .4)
1194
);
1195
}
1196
}
1197
// toolbar separators
1199
&.horizontal > separator {
1200
margin: 2px;
1201
}
1202
&.vertical > separator {
1204
margin: 2px;
1205
}
1206
&:not(.inline-toolbar):not(.osd) {
1208
scale,
1209
entry,
1210
spinbutton,
1211
button {
1212
margin: 2px;
1213
}
1214
.linked entry,
1216
.linked spinbutton,
1217
.linked button {
1218
&:not(:first-child) {
1219
margin-left: 0;
1220
}
1221
&:not(:last-child) {
1223
margin-right: 0;
1224
}
1225
}
1226
spinbutton {
1228
entry,
1229
button {
1230
margin: 0;
1231
}
1232
}
1233
switch {
1235
margin: 2px + $container-padding 2px;
1236
}
1237
}
1238
}
1239
%toolbar-osd {
1241
transition: $transition-shadow;
1242
padding: $container-padding;
1243
border-radius: $corner-radius;
1244
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1245
background-color: $surface;
1246
&:backdrop {
1248
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1249
}
1250
}
1251
// searchbar, location-bar & inline-toolbar
1253
.inline-toolbar {
1254
padding: $container-padding;
1255
border-style: solid;
1256
border-width: 0 1px 1px;
1257
border-color: $divider;
1258
background-color: $base-alt;
1259
}
1260
searchbar > revealer > box,
1262
.location-bar {
1263
padding: $container-padding;
1264
border-style: solid;
1265
border-width: 0 0 1px;
1266
border-color: $divider;
1267
background-color: $background;
1268
background-clip: border-box;
1269
}
1270
searchbar > revealer > box {
1272
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1273
margin: -6px;
1274
padding: $container-padding;
1275
}
1276
/***************
1279
* Header bars *
1280
***************/
1281
.titlebar {
1282
transition: background-color $duration $ease-out, color $duration $ease-out;
1283
border-radius: $corner-radius $corner-radius 0 0;
1284
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1285
background-color: $titlebar;
1286
color: $titlebar-text;
1287
&:disabled {
1289
color: $titlebar-text-disabled;
1290
}
1291
&:backdrop {
1293
background-color: $titlebar-backdrop;
1294
color: $titlebar-text2;
1295
&:disabled {
1297
color: $titlebar-text2-disabled;
1298
}
1299
}
1300
.title {
1302
padding-left: 12px;
1303
padding-right: 12px;
1304
font-weight: bold;
1305
}
1306
.subtitle {
1308
padding-left: 12px;
1309
padding-right: 12px;
1310
font-size: smaller;
1311
}
1312
.subtitle,
1314
.dim-label {
1315
transition: color $duration $ease-out;
1316
color: $titlebar-text2;
1317
&:backdrop {
1319
color: $titlebar-text-disabled;
1320
}
1321
}
1322
// Don't draw titlebar above titlebar
1324
.titlebar {
1325
background-color: transparent;
1326
box-shadow: none;
1327
}
1328
// The separator for split headerbars
1330
headerbar + separator {
1331
background-color: $titlebar-divider;
1332
}
1333
entry {
1335
box-shadow: inset 0 -1px $titlebar-stroke;
1336
background-color: $titlebar-entry-fill;
1337
color: $titlebar-text;
1338
&:disabled {
1340
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1341
background-color: $titlebar-entry-fill;
1342
color: $titlebar-text-disabled;
1343
}
1344
image {
1346
color: $titlebar-text2;
1347
&:hover,
1349
&:active {
1350
color: $titlebar-text;
1351
}
1352
&:disabled {
1354
color: $titlebar-text-disabled;
1355
}
1356
}
1357
}
1358
.linked:not(.vertical) > entry:not(:only-child) {
1360
border-radius: $corner-radius $corner-radius 0 0;
1361
}
1362
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1364
@extend %button-flat;
1365
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1367
$titlebar-indicator 0%,
1368
transparent 0%)
1369
0 0 0 / 0 0 0px;
1370
@include ink-color($titlebar-text2);
1372
&:disabled {
1374
color: $titlebar-text2-disabled;
1375
}
1376
@at-root %titlebar-button-checked,
1378
&:checked {
1379
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1380
$titlebar-indicator 100%,
1381
transparent 0%)
1382
0 0 2 / 0 0 2px;
1383
background-color: transparent;
1384
color: $titlebar-text;
1385
@include ink-color($titlebar-text);
1386
&:disabled {
1388
background-color: transparent;
1389
color: $titlebar-text-disabled;
1390
}
1391
}
1392
&:backdrop {
1394
color: $titlebar-text-disabled;
1395
&:disabled {
1397
color: $titlebar-text2-disabled;
1398
}
1399
&:checked {
1401
color: $titlebar-text2;
1402
&:disabled {
1404
color: $titlebar-text2-disabled;
1405
}
1406
}
1407
}
1408
}
1409
button.suggested-action, button.destructive-action {
1411
&:disabled {
1412
background-color: $titlebar-fill;
1413
color: $titlebar-text-disabled;
1414
}
1415
}
1416
// FIXME: Ugly overriding
1418
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1419
min-width: 120px - 8px * 2;
1420
}
1421
// FIXME: Ugly overriding
1423
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1424
min-width: 0;
1425
padding-left: ($medium-size - 24px) / 2;
1426
padding-right: ($medium-size - 24px) / 2;
1427
}
1428
&.selection-mode {
1430
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1431
// but let's keep it for backwards compatibility.
1432
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1433
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1434
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1435
background-color: $primary;
1436
color: on($primary);
1437
&:backdrop {
1439
color: on($primary, text2);
1440
}
1441
.subtitle:link {
1443
color: on($primary);
1444
}
1445
button:not(.suggested-action):not(.destructive-action) {
1447
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1448
currentColor 0%,
1449
transparent 0%)
1450
0 0 0 / 0 0 0px;
1451
color: on($primary);
1452
&:disabled {
1454
color: on($primary, text-disabled);
1455
}
1456
&:checked {
1458
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1459
currentColor 100%,
1460
transparent 0%)
1461
0 0 2 / 0 0 2px;
1462
color: on($primary);
1463
&:disabled {
1465
color: on($primary, text-disabled);
1466
}
1467
}
1468
&:backdrop {
1470
color: on($primary, text2);
1471
&:disabled {
1473
color: on($primary, text2-disabled);
1474
}
1475
&:checked {
1477
color: on($primary, text2);
1478
&:disabled {
1480
color: on($primary, text2-disabled);
1481
}
1482
}
1483
}
1484
}
1485
.selection-menu {
1487
padding-left: 16px;
1488
padding-right: 16px;
1489
arrow {
1491
-GtkArrow-arrow-scaling: 1;
1492
}
1493
.arrow {
1495
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1496
}
1497
}
1498
}
1499
.selection-mode {
1501
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1502
background-color: $primary;
1503
}
1504
// squared corners when the window is maximized, tiled, or fullscreen
1506
.tiled &,
1507
.tiled-top &,
1508
.tiled-right &,
1509
.tiled-bottom &,
1510
.tiled-left &,
1511
.maximized &,
1512
.fullscreen & {
1513
border-radius: 0;
1514
box-shadow: $shadow-z1;
1515
}
1516
&.default-decoration {
1518
min-height: $small-size;
1519
padding: $container-padding;
1520
box-shadow: inset 0 1px highlight($titlebar);
1521
.tiled &,
1523
.maximized &,
1524
.fullscreen & {
1525
box-shadow: none;
1526
}
1527
button.titlebutton {
1529
min-height: $small-size;
1530
min-width: $small-size;
1531
margin: 0;
1532
padding: 0;
1533
}
1534
// workaround for non-animatable buttons
1536
.background:not(.csd) & button.titlebutton:active {
1537
background-size: 1000% 1000%;
1538
}
1539
}
1540
.solid-csd & {
1542
&:dir(rtl), &:dir(ltr) { // specificity bump
1543
border-radius: 0;
1544
box-shadow: $shadow-z1; // just remove the highlight
1545
}
1546
}
1547
}
1548
headerbar {
1550
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1551
min-height: $large-size;
1552
padding: 0 $container-padding;
1553
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1555
entry,
1556
spinbutton,
1557
button {
1558
margin-top: $container-padding;
1559
margin-bottom: $container-padding;
1560
}
1561
separator.titlebutton {
1563
margin-top: $large-size / 4;
1564
margin-bottom: $large-size / 4;
1565
background-color: $titlebar-divider;
1566
}
1567
switch {
1569
margin-top: ($large-size - 24px) / 2;
1570
margin-bottom: ($large-size - 24px) / 2;
1571
}
1572
// reset button margins of the spinbutton
1574
spinbutton button {
1575
margin-top: 0;
1576
margin-bottom: 0;
1577
}
1578
// FIXME: This is a hacky workaround.
1580
.entry-tag {
1581
margin-top: 5px;
1582
margin-bottom: 5px;
1583
}
1584
}
1585
// Development versions of apps to use a differently styled headerbar
1587
window.devel .titlebar:not(.selection-mode) {
1588
}
1589
/************
1592
* Pathbars *
1593
************/
1594
%pathbar_button,
1595
.path-bar.linked:not(.vertical) > button {
1596
@extend %button-flat-basic;
1597
padding-left: ($medium-size - 24px) / 2;
1599
padding-right: ($medium-size - 24px) / 2;
1600
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1601
$primary 0%,
1602
transparent 0%)
1603
0 0 0 / 0 0 0px;
1604
border-radius: $corner-radius;
1605
&:checked {
1607
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1608
$primary 100%,
1609
transparent 0%)
1610
0 0 2 / 0 0 2px;
1611
color: $text;
1612
&,
1614
&:disabled {
1615
background-color: transparent;
1616
}
1617
}
1618
label:not(:only-child) {
1620
&:first-child {
1621
margin-left: 0;
1622
}
1623
&:last-child {
1625
margin-right: 0;
1626
}
1627
}
1628
&.text-button {
1630
min-width: 0;
1631
}
1632
&.slider-button {
1634
padding-left: (24px - 16px) / 2;
1635
padding-right: (24px - 16px) / 2;
1636
}
1637
}
1638
/**************
1641
* Tree Views *
1642
**************/
1643
treeview.view {
1644
@at-root * {
1645
-GtkTreeView-horizontal-separator: 4;
1646
-GtkTreeView-grid-line-width: 1;
1647
-GtkTreeView-grid-line-pattern: '';
1648
-GtkTreeView-tree-line-width: 1;
1649
-GtkTreeView-tree-line-pattern: '';
1650
-GtkTreeView-expander-size: 16;
1651
}
1652
border-left-color: $stroke; // this is actually the tree lines color,
1654
border-top-color: $divider; // while this is the grid lines color, better then nothing
1655
// FIXME: Avoid transparency background-color being slightly darker
1657
&:selected {
1658
background-color: $base;
1659
background-image: image($overlay-selected);
1660
}
1661
// to avoid borders being overridden by the previously set props
1663
rubberband {
1664
@extend rubberband;
1665
}
1666
&:hover,
1668
&:selected {
1669
border-radius: 0;
1670
}
1671
&.separator {
1673
min-height: 1px + 2px * 2;
1674
color: $divider;
1675
}
1676
&:drop(active) {
1678
// FIXME: box-shadow, background-color and background-image are not available here.
1679
border-style: solid none;
1680
border-width: 9999px;
1681
border-color: $overlay-hover;
1682
&.after {
1684
border-top-style: none;
1685
}
1686
&.before {
1688
border-bottom-style: none;
1689
}
1690
}
1691
&.expander {
1693
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1694
-gtk-icon-transform: rotate(-90deg);
1695
&:dir(rtl) {
1697
-gtk-icon-transform: rotate(90deg);
1698
}
1699
&:checked {
1701
-gtk-icon-transform: unset;
1702
}
1703
color: $text2;
1705
&:hover,
1707
&:active {
1708
color: $text;
1709
}
1710
&:disabled {
1712
color: $text2-disabled;
1713
}
1714
}
1715
&.progressbar { // progress bar in treeviews
1717
border-bottom: $bar-size solid $primary;
1718
box-shadow: none;
1719
background-color: transparent;
1720
background-image: none;
1721
&:selected:hover {
1723
box-shadow: none;
1724
}
1725
}
1726
&.trough { // progress bar trough in treeviews
1728
border-bottom: $bar-size solid $stroke-disabled;
1729
box-shadow: none;
1730
background-color: transparent;
1731
background-image: none;
1732
&:selected:hover {
1734
box-shadow: none;
1735
}
1736
}
1737
header {
1739
button {
1740
padding: 2px 6px;
1741
border-style: none solid solid none;
1742
border-width: 1px;
1743
border-color: $divider;
1744
border-radius: 0;
1745
background-clip: border-box;
1746
color: $text2;
1747
@include ink-color($text2);
1748
@include list-item;
1749
&:disabled {
1751
color: $text2-disabled;
1752
}
1753
&,
1755
&:disabled {
1756
background-color: $base;
1757
}
1758
&:last-child {
1760
border-right-style: none;
1761
}
1762
}
1763
}
1764
button.dnd,
1766
header.button.dnd { // for treeview-like derive widgets
1767
padding: 2px 6px;
1768
border-style: none solid solid;
1769
border-width: 1px;
1770
border-color: $divider;
1771
border-radius: 0;
1772
box-shadow: none;
1773
background-color: $base;
1774
background-clip: border-box;
1775
color: $primary;
1776
}
1777
// see tests/testaccel to test
1779
acceleditor > label {
1780
background-color: $primary;
1781
}
1782
}
1783
/*********
1786
* Menus *
1787
*********/
1788
menubar,
1789
.menubar {
1790
-GtkWidget-window-dragging: true;
1791
padding: 0;
1792
// box-shadow: inset 0 -1px $divider;
1793
background-color: $titlebar;
1794
color: $titlebar-text;
1795
&:backdrop {
1797
background-color: $titlebar-backdrop;
1798
color: $titlebar-text2;
1799
}
1800
.csd & {
1802
transition: $transition;
1803
}
1804
> menuitem {
1806
transition: $transition;
1807
min-height: 20px;
1808
padding: 4px 8px;
1809
color: $titlebar-text2;
1810
&:hover { // Seems like it :hover even with keyboard focus
1812
transition: none;
1813
background-color: $overlay-checked;
1814
color: $titlebar-text;
1815
}
1816
&:disabled {
1818
color: $titlebar-text2-disabled;
1819
}
1820
}
1821
}
1822
// Needed to make the border-radius of menus work
1824
// otherwise the background bleeds out of the menu edges
1825
.background.popup {
1826
background-color: transparent;
1827
}
1828
menu,
1830
.menu,
1831
.context-menu {
1832
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1833
padding: 4px 0;
1834
box-shadow: inset 0 1px highlight($surface);
1835
background-color: $surface;
1836
background-clip: border-box;
1837
border: 1px solid $divider; // adds borders in a non composited env
1838
.csd & {
1840
border: none; // axes borders in a composited env
1841
border-radius: $corner-radius;
1842
}
1843
menuitem {
1845
transition: background-color $duration $ease-out;
1846
min-height: 20px;
1847
min-width: 40px;
1848
padding: 4px 8px;
1849
color: $text;
1850
font: initial;
1851
text-shadow: none;
1852
&:hover {
1854
transition: none;
1855
background-color: $overlay-hover;
1856
}
1857
&:disabled {
1859
color: $text-disabled;
1860
}
1861
// submenu indicators
1863
arrow {
1864
min-height: 16px;
1865
min-width: 16px;
1866
color: $text2;
1867
&:disabled {
1869
color: $text2-disabled;
1870
}
1871
&:dir(ltr) {
1873
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1874
margin-left: 8px;
1875
}
1876
&:dir(rtl) {
1878
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1879
margin-right: 8px;
1880
}
1881
}
1882
// avoids labels color being overridden, see
1884
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1885
label {
1886
&:dir(rtl),
1887
&:dir(ltr) {
1888
// color: inherit;
1889
}
1890
}
1891
}
1892
// overflow arrows
1894
> arrow {
1895
min-height: 16px;
1896
min-width: 16px;
1897
padding: 4px;
1898
background-color: $surface;
1899
color: $text2;
1900
&.top {
1902
margin-top: -4px;
1903
border-bottom: 1px solid $divider;
1904
border-radius: $corner-radius $corner-radius 0 0;
1905
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1906
}
1907
&.bottom {
1909
margin-top: 4px * 2;
1910
margin-bottom: -4px * 3;
1911
border-top: 1px solid $divider;
1912
border-radius: 0 0 $corner-radius $corner-radius;
1913
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1914
}
1915
&:hover {
1917
background-image: image($overlay-hover);
1918
}
1919
&:disabled {
1921
border-color: transparent;
1922
background-color: transparent;
1923
color: transparent;
1924
// color: $text2-disabled;
1925
}
1926
}
1927
separator {
1929
margin: 4px 0;
1930
}
1931
}
1932
menuitem {
1934
accelerator {
1935
color: $text2;
1936
}
1937
&:disabled accelerator {
1939
color: $text2-disabled;
1940
}
1941
}
1942
/************
1945
* Popovers *
1946
************/
1947
popover.background {
1948
transition: $transition-shadow;
1949
padding: 2px;
1950
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1951
background-color: $surface;
1952
&:backdrop {
1954
box-shadow: $shadow-z2;
1955
}
1956
&, .csd & {
1958
border-style: solid;
1959
border-width: 1px;
1960
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1961
border-radius: $corner-radius + 1px;
1962
}
1963
> stack {
1965
margin: -4px; // remove extra padding from menu style popovers
1966
}
1967
> toolbar {
1969
margin: -2px;
1970
}
1971
> list,
1973
> .view,
1974
> toolbar {
1975
border-style: none;
1976
box-shadow: none;
1977
background-color: transparent;
1978
}
1979
// FIXME: Use the popover color instead of transparent as a workaround for .view
1981
list,
1982
.view:not(:selected),
1983
toolbar {
1984
background-color: $surface;
1985
}
1986
&.touch-selection,
1988
&.magnifier,
1989
&.osd {
1990
// @extend %osd;
1991
}
1992
button:not(.suggested-action):not(.destructive-action) {
1994
// @extend %button-flat;
1995
}
1996
.linked:not(.vertical) > entry:not(:only-child) {
1998
// border-radius: $corner-radius $corner-radius 0 0;
1999
}
2000
&.menu button,
2002
button.model {
2003
@extend %button-flat;
2004
min-height: 32px;
2006
padding: 0 8px;
2007
border-radius: $corner-radius;
2008
&:checked {
2010
// color: $primary;
2011
}
2012
}
2013
separator {
2015
margin: 4px 0;
2016
}
2017
list separator {
2019
margin: 0;
2020
}
2021
}
2022
/*************
2024
* Notebooks *
2025
*************/
2026
notebook {
2027
frame > paned > & > header,
2028
&.frame > header {
2029
background-color: $base-alt;
2030
}
2031
&:focus tab:checked {
2033
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2034
}
2035
> header {
2037
border-width: 1px;
2038
border-color: $divider;
2039
background-color: $background;
2040
background-clip: border-box;
2041
&.top {
2043
border-bottom-style: solid;
2044
> tabs {
2046
margin-bottom: -1px;
2047
> tab {
2049
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2050
&:checked {
2052
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2053
}
2054
&.reorderable-page {
2056
border-image-width: 0 1px 2px;
2057
}
2058
}
2059
}
2060
}
2061
&.bottom {
2063
border-top-style: solid;
2064
> tabs {
2066
margin-top: -1px;
2067
> tab {
2069
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2070
&:checked {
2072
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2073
}
2074
&.reorderable-page {
2076
border-image-width: 2px 1px 0;
2077
}
2078
}
2079
}
2080
}
2081
&.left {
2083
border-right-style: solid;
2084
> tabs {
2086
margin-right: -1px;
2087
> tab {
2089
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2090
&:checked {
2092
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2093
}
2094
&.reorderable-page {
2096
border-image-width: 1px 2px 1px 0;
2097
}
2098
}
2099
}
2100
}
2101
&.right {
2103
border-left-style: solid;
2104
> tabs {
2106
margin-left: -1px;
2107
> tab {
2109
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2110
&:checked {
2112
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2113
}
2114
&.reorderable-page {
2116
border-image-width: 1px 0 1px 2px;
2117
}
2118
}
2119
}
2120
}
2121
&.top > tabs > arrow {
2123
@extend %notebook_vert_arrows;
2124
border-top-style: none;
2126
}
2127
&.bottom > tabs > arrow {
2129
@extend %notebook_vert_arrows;
2130
border-bottom-style: none;
2132
}
2133
@at-root %notebook_vert_arrows {
2135
padding-left: 4px;
2136
padding-right: 4px;
2137
&.down {
2139
margin-left: -8px;
2140
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2141
}
2142
&.up {
2144
margin-right: -8px;
2145
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2146
}
2147
}
2148
&.left > tabs > arrow {
2150
@extend %notebook_horz_arrows;
2151
border-left-style: none;
2153
}
2154
&.right > tabs > arrow {
2156
@extend %notebook_horz_arrows;
2157
border-right-style: none;
2159
}
2160
@at-root %notebook_horz_arrows {
2162
padding-top: 4px;
2163
padding-bottom: 4px;
2164
&.down {
2166
margin-top: -8px;
2167
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2168
}
2169
&.up {
2171
margin-bottom: -8px;
2172
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2173
}
2174
}
2175
> tabs > arrow {
2177
min-height: 16px;
2178
min-width: 16px;
2179
border-radius: 0;
2180
@extend %ripple;
2182
@include ink-color($text2);
2183
&:disabled {
2185
color: $text2-disabled;
2186
}
2187
}
2188
tab {
2190
transition: $transition,
2191
background-size 0ms,
2192
background-image 0ms;
2193
min-height: $small-size;
2194
min-width: $small-size;
2195
padding: $container-padding 12px;
2196
border-width: 1px; // for reorderable tabs
2198
border-color: transparent; //
2199
outline: none;
2201
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2202
background-repeat: no-repeat;
2203
background-position: center;
2204
background-size: 0% 0%;
2205
background-clip: border-box;
2206
color: $text2;
2208
font-weight: 500;
2209
&:hover {
2211
background-color: $overlay-hover;
2212
}
2213
&:disabled {
2215
color: $text2-disabled;
2216
}
2217
&:checked {
2219
transition: $transition,
2220
background-size $ripple-fade-in-duration $ease-out,
2221
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2222
background-color: transparent;
2223
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2224
background-size: 1000% 1000%;
2225
background-clip: padding-box;
2226
color: $text;
2227
&:disabled {
2229
color: $text-disabled;
2230
}
2231
&.reorderable-page {
2233
border-color: $divider;
2234
background-color: $base;
2235
}
2236
}
2237
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2239
> box {
2240
transition: background-color $duration $ease-out;
2241
margin: -$container-padding -12px;
2242
padding: $container-padding 12px;
2243
&:drop(active) {
2245
background-color: $overlay-hover;
2246
}
2247
}
2248
// colors the button like the label, overridden otherwise
2250
button.flat {
2251
@extend %button-small;
2252
&:last-child {
2254
margin-left: $container-padding;
2255
margin-right: $container-padding - 12px;
2256
}
2257
&:first-child {
2259
margin-left: $container-padding - 12px;
2260
margin-right: $container-padding;
2261
}
2262
}
2263
}
2264
&.top,
2266
&.bottom {
2267
tabs {
2268
padding-left: 8px;
2269
padding-right: 8px;
2270
&:not(:only-child) {
2272
&:first-child {
2273
margin-left: 0;
2274
}
2275
&:last-child {
2277
margin-right: 0;
2278
}
2279
}
2280
tab.reorderable-page {
2282
border-style: none solid;
2283
}
2284
}
2285
}
2286
&.left,
2288
&.right {
2289
tabs {
2290
padding-top: 8px;
2291
padding-bottom: 8px;
2292
&:not(:only-child) {
2294
&:first-child {
2295
margin-top: 0;
2296
}
2297
&:last-child {
2299
margin-bottom: 0;
2300
}
2301
}
2302
tab.reorderable-page {
2304
border-style: solid none;
2305
}
2306
}
2307
}
2308
}
2309
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2311
background-color: $base;
2312
}
2313
}
2314
/**************
2317
* Scrollbars *
2318
**************/
2319
scrollbar {
2320
$_slider_min_length: 24px;
2321
// disable steppers
2323
@at-root * {
2324
-GtkScrollbar-has-backward-stepper: false;
2325
-GtkScrollbar-has-forward-stepper: false;
2326
}
2327
transition: $transition;
2329
background-color: $base;
2330
// scrollbar border
2332
&.top { border-bottom: 1px solid $divider; }
2333
&.bottom { border-top: 1px solid $divider; }
2334
&.left { border-right: 1px solid $divider; }
2335
&.right { border-left: 1px solid $divider; }
2336
// slider
2338
slider {
2339
transition: background-color $duration $ease-out;
2340
min-width: 8px;
2341
min-height: 8px;
2342
border: 4px solid transparent;
2343
border-radius: $circular-radius;
2344
background-clip: padding-box;
2345
background-color: $text-disabled;
2346
&:hover {
2348
background-color: $text2;
2349
}
2350
&:active {
2352
background-color: $text;
2353
}
2354
&:disabled {
2356
background-color: $text2-disabled;
2357
}
2358
}
2359
&.fine-tune {
2361
slider {
2362
min-width: 4px;
2363
min-height: 4px;
2364
}
2365
&.horizontal slider {
2367
margin: 2px 0;
2368
}
2369
&.vertical slider {
2371
margin: 0 2px;
2372
}
2373
}
2374
&.overlay-indicator {
2376
&:not(.fine-tune) slider {
2377
transition-property: background-color, min-height, min-width;
2378
}
2379
&:not(.dragging):not(.hovering) {
2381
border-color: transparent;
2382
background-color: transparent;
2383
slider {
2385
min-width: 4px;
2386
min-height: 4px;
2387
margin: 4px - 1px;
2388
border: 1px solid rgba($base, 0.3);
2389
}
2390
button {
2392
min-width: 4px;
2393
min-height: 4px;
2394
margin: 4px - 1px;
2395
border: 1px solid rgba($base, 0.3);
2396
border-radius: $circular-radius;
2397
background-color: $text-disabled;
2398
background-clip: padding-box;
2399
-gtk-icon-source: none;
2400
&:disabled {
2402
background-color: $text2-disabled;
2403
}
2404
}
2405
&.horizontal {
2407
slider {
2408
min-width: $_slider_min_length;
2409
}
2410
button {
2412
min-width: 8px;
2413
}
2414
}
2415
&.vertical {
2417
slider {
2418
min-height: $_slider_min_length;
2419
}
2420
button {
2422
min-height: 8px;
2423
}
2424
}
2425
}
2426
&.dragging,
2428
&.hovering {
2429
background-color: rgba($surface, 0.9);
2430
}
2431
}
2432
&.horizontal slider {
2434
min-width: $_slider_min_length;
2435
}
2436
&.vertical slider {
2438
min-height: $_slider_min_length;
2439
}
2440
// button styling
2442
button {
2443
@extend %button-flat-basic;
2444
min-width: 16px;
2446
min-height: 16px;
2447
padding: 0;
2448
border-radius: 0;
2449
}
2450
// button icons
2452
&.vertical {
2453
button {
2454
&.down {
2455
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2456
}
2457
&.up {
2459
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2460
}
2461
}
2462
}
2463
&.horizontal {
2465
button {
2466
&.down {
2467
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2468
}
2469
&.up {
2471
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2472
}
2473
}
2474
}
2475
}
2476
/**********
2479
* Switch *
2480
**********/
2481
switch {
2482
transition: all $duration $ease-out;
2483
margin: $container-padding 0;
2484
padding: 0 2px;
2485
border: 5px solid transparent;
2486
border-radius: $circular-radius;
2487
background-color: $stroke;
2488
background-clip: padding-box;
2489
font-size: 0;
2490
&:checked {
2492
background-color: rgba($primary, 0.5);
2493
}
2494
&:disabled {
2496
opacity: 0.5;
2497
}
2498
// hide on/off icons for >=3.24.5
2500
image {
2501
margin: -8px;
2502
-gtk-icon-transform: scale(0);
2503
}
2504
slider {
2506
transition: all $duration $ease-out;
2507
min-width: 20px;
2508
min-height: 20px;
2509
margin: -3px -2px;
2510
border-radius: $circular-radius;
2511
outline: none;
2512
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2513
background-color: $switch-surface;
2514
}
2515
&:hover slider {
2517
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2518
}
2519
&:focus slider {
2521
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2522
}
2523
&:checked slider {
2525
background-color: $primary;
2526
color: $primary;
2527
}
2528
row:selected & {
2530
}
2531
}
2532
/*************************
2535
* Check and Radio items *
2536
*************************/
2537
// draw regular check and radio items using our PNG assets
2538
// all assets are rendered from assets.svg. never add pngs directly
2539
// selection-mode
2541
.view.content-view.check:not(list),
2542
.content-view:not(list) .tile check {
2543
min-height: 40px;
2544
min-width: 40px;
2545
margin: 0;
2546
padding: 0;
2547
box-shadow: none;
2548
background-color: transparent;
2549
background-image: none;
2550
-gtk-icon-shadow: $icon-shadow-z2;
2551
&:hover,
2553
&:active {
2554
-gtk-icon-shadow: $icon-shadow-z4;
2555
}
2556
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2558
&#{$class} {
2559
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2560
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2562
}
2563
}
2564
}
2565
checkbutton,
2567
radiobutton {
2568
outline: none;
2569
}
2570
checkbutton.text-button,
2572
radiobutton.text-button {
2573
// this is for a nice focus on check and radios text
2574
padding: 2px;
2575
label:not(:only-child) {
2577
margin: 0 4px;
2578
}
2579
}
2580
$check-radio-size: 40px;
2582
check,
2584
radio {
2585
min-height: 24px;
2586
min-width: 24px;
2587
margin: -($check-radio-size - 24px) / 2;
2588
padding: ($check-radio-size - 24px) / 2;
2589
border-radius: $circular-radius;
2590
@extend %ripple;
2592
@include ink-color($text2);
2593
&:checked,
2595
&:indeterminate {
2596
@include ink-color($primary);
2597
}
2598
&:disabled {
2600
color: $text2-disabled;
2601
}
2602
&:only-child {
2604
// margin: -12px;
2605
}
2606
popover modelbutton.flat & {
2608
&,
2609
&:focus,
2610
&:hover,
2611
&:focus:hover,
2612
&:active,
2613
&:disabled {
2614
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2615
box-shadow: none;
2616
background-image: none;
2617
}
2618
&.left:dir(rtl) {
2620
margin-left: -12px;
2621
margin-right: -4px;
2622
}
2623
&.right:dir(ltr) {
2625
margin-left: -4px;
2626
margin-right: -12px;
2627
}
2628
}
2629
menu menuitem & {
2631
transition: none;
2632
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2633
padding: 0;
2634
&:dir(ltr) {
2636
margin-right: 8px;
2637
}
2638
&:dir(rtl) {
2640
margin-left: 8px;
2641
}
2642
&,
2644
&:hover,
2645
&:disabled {
2646
box-shadow: none;
2647
}
2648
}
2649
}
2650
%check,
2652
check {
2653
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2654
&:checked {
2656
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2657
}
2658
&:indeterminate {
2660
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2661
}
2662
}
2663
%radio,
2665
radio {
2666
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2667
&:checked {
2669
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2670
}
2671
&:indeterminate {
2673
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2674
}
2675
border-image-slice: $check-radio-size / 2px;
2677
border-image-width: $check-radio-size / 2;
2678
$radio-indicator-size: 10px / $check-radio-size / 2;
2680
border-image-source:
2682
-gtk-gradient(
2683
radial,
2684
center center, 0,
2685
center center, .001,
2686
to($primary),
2687
to(transparent)
2688
);
2689
&:checked:not(:indeterminate) {
2691
border-image-source:
2692
-gtk-gradient(
2693
radial,
2694
center center, 0,
2695
center center, $radio-indicator-size,
2696
to($primary),
2697
to(transparent)
2698
);
2699
&:disabled {
2701
border-image-source:
2702
-gtk-gradient(
2703
radial,
2704
center center, 0,
2705
center center, $radio-indicator-size,
2706
to($text2-disabled),
2707
to(transparent)
2708
);
2709
}
2710
}
2711
}
2712
%small_check,
2714
menu menuitem check {
2715
min-height: 16px;
2716
min-width: 16px;
2717
border-radius: $corner-radius;
2718
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2719
&:checked {
2721
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2722
}
2723
&:indeterminate {
2725
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2726
}
2727
}
2728
%small_radio,
2730
menu menuitem radio {
2731
min-height: 16px;
2732
min-width: 16px;
2733
border-image: none;
2734
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2735
&:checked {
2737
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2738
}
2739
&:indeterminate {
2741
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2742
}
2743
}
2744
// ANIMATION:
2746
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2747
// the transformation is set on the active state and it get reset on the checked state.
2748
radio:not(:checked):active {
2749
// -gtk-icon-transform: scale(0);
2750
}
2751
// Otherwise, treeview.view styling will be applied...
2753
treeview.view check,
2754
treeview.view radio {
2755
padding: 0;
2756
color: $text2;
2757
&:checked,
2759
&:indeterminate {
2760
color: $primary;
2761
}
2762
&:disabled {
2764
color: $text2-disabled;
2765
}
2766
&,
2768
&:hover,
2769
&:selected,
2770
&:selected:hover {
2771
box-shadow: none;
2772
background-color: transparent;
2773
}
2774
}
2775
treeview.view radio:checked {
2777
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2778
border-image: none;
2779
}
2780
/************
2783
* GtkScale *
2784
************/
2785
scale {
2786
// sizing
2787
$_marks_length: 8px;
2788
$_marks_distance: 7px;
2789
$trough_size: 2px;
2791
$finetune_trough_size: 4px;
2792
$slider_size: 32px;
2794
$slider_margin: -($slider_size - $trough_size) / 2;
2796
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2797
$color_slider_margin: -($slider_size) * 3 / 4;
2799
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2800
min-height: $trough_size;
2802
min-width: $trough_size;
2803
&.horizontal {
2805
padding: ($medium-size - $trough_size) / 2 12px;
2806
}
2807
&.vertical {
2809
padding: 12px ($medium-size - $trough_size) / 2;
2810
}
2811
// the slider is inside the trough, so to have make it bigger there's a negative margin
2813
slider {
2814
min-height: $slider_size;
2815
min-width: $slider_size;
2816
margin: $slider_margin;
2817
}
2818
// click-and-hold the slider to activate
2820
&.fine-tune {
2821
&.horizontal {
2822
min-height: $finetune_trough_size;
2823
padding-top: ($medium-size - $finetune_trough_size) / 2;
2824
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2825
}
2826
&.vertical {
2828
min-width: $finetune_trough_size;
2829
padding-left: ($medium-size - $finetune_trough_size) / 2;
2830
padding-right: ($medium-size - $finetune_trough_size) / 2;
2831
}
2832
// to make the trough grow in fine-tune mode
2834
slider {
2835
margin: $finetune_slider_margin;
2836
}
2837
}
2838
// the backing bit
2840
trough {
2841
transition: background-color $duration $ease-out;
2842
outline: none;
2843
background-color: $stroke;
2844
&:disabled {
2846
background-color: $stroke-disabled;
2847
}
2848
}
2849
// the colored part of the backing bit
2851
highlight {
2852
transition: background-image $duration $ease-out;
2853
background-image: image($primary);
2854
&:disabled {
2856
background-color: $background;
2857
background-image: image($text2-disabled);
2858
}
2859
}
2860
// this is another differently styled part of the backing bit, the most relevant use case is for example
2862
// in media player to indicate how much video stream as been cached
2863
fill {
2864
transition: background-color $duration $ease-out;
2865
background-color: $stroke;
2866
&:disabled {
2868
background-color: transparent;
2869
}
2870
}
2871
slider {
2873
transition: background-color $duration $ease-out,
2874
background-size $ripple-fade-out-duration $ease-out,
2875
background-image $ripple-fade-out-opacity-duration $ease-out;
2876
background-repeat: no-repeat;
2877
background-position: center;
2878
background-size: auto, 1000% 1000%;
2879
border-radius: 50%;
2880
color: $primary;
2881
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2883
&#{$class} {
2884
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2885
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2887
radial-gradient(circle, transparent 10%, transparent 0%);
2888
}
2889
}
2890
&:hover {
2892
background-color: $overlay-hover;
2893
}
2894
&:focus {
2896
background-color: $overlay-focus;
2897
}
2898
&:active {
2900
$_url: 'assets/scale-slider#{$asset-suffix}';
2901
transition: background-color $duration $ease-out,
2903
background-size 0ms,
2904
background-image 0ms;
2905
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2906
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2907
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2908
background-size: auto, 0% 0%;
2909
}
2910
}
2911
marks,
2913
value {
2914
color: $text2;
2915
}
2916
indicator {
2918
background-color: $stroke;
2919
color: transparent;
2920
}
2921
//marks margins
2923
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2924
(horizontal, bottom, bottom, top),
2925
(vertical, top, left, right),
2926
(vertical, bottom, right, left) {
2927
&.#{$scale_orient} marks {
2928
&.#{$marks_class} {
2929
margin-#{$marks_margin}: $_marks_distance;
2930
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2931
}
2932
}
2933
&.#{$scale_orient}.fine-tune marks {
2935
&.#{$marks_class} {
2936
margin-#{$marks_margin}: $_marks_distance - 1px;
2937
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2938
}
2939
}
2940
}
2941
&.horizontal {
2943
indicator {
2944
min-height: $_marks_length;
2945
min-width: 1px;
2946
}
2947
}
2948
&.vertical {
2950
indicator {
2951
min-height: 1px;
2952
min-width: $_marks_length;
2953
}
2954
}
2955
// *WARNING* scale with marks madness following
2957
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2959
@each $marks_class, $marks_infix in (
2960
".marks-before:not(.marks-after)": "-marks-before",
2961
".marks-after:not(.marks-before)": "-marks-after"
2962
) {
2963
&#{$dir_class}#{$marks_class} {
2964
slider {
2965
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2966
&#{$state_class} {
2967
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2968
background-image:
2970
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2971
radial-gradient(circle, transparent 10%, transparent 0%);
2972
}
2973
}
2974
&:active {
2976
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2977
background-image:
2979
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2980
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2981
}
2982
}
2983
}
2984
}
2985
}
2986
&.color {
2988
min-height: 0;
2989
min-width: 0;
2990
&.horizontal {
2992
padding: 0 0 12px 0;
2993
slider {
2995
&:dir(ltr), &:dir(rtl) { // specificity bump
2996
margin-bottom: $color_slider_margin;
2997
margin-top: $color_marks_slider_margin;
2998
}
2999
}
3000
}
3001
&.vertical {
3003
&:dir(ltr) {
3004
padding: 0 0 0 12px;
3005
slider {
3007
margin-left: $color_slider_margin;
3008
margin-right: $color_marks_slider_margin;
3009
}
3010
}
3011
&:dir(rtl) {
3013
padding: 0 12px 0 0;
3014
slider {
3016
margin-right: $color_slider_margin;
3017
margin-left: $color_marks_slider_margin;
3018
}
3019
}
3020
}
3021
}
3022
}
3023
/*****************
3026
* Progress bars *
3027
*****************/
3028
progressbar {
3029
// sizing
3030
&.horizontal {
3031
trough,
3032
progress {
3033
min-height: $bar-size;
3034
}
3035
}
3036
&.vertical {
3038
trough,
3039
progress {
3040
min-width: $bar-size;
3041
}
3042
}
3043
// FIXME: insensitive state missing and some other state should be set probably
3045
color: $text2;
3046
font-size: smaller;
3047
trough {
3049
background-color: $stroke-disabled;
3050
}
3051
progress {
3053
background-color: $primary;
3054
}
3055
&.osd { // progressbar.osd used for epiphany page loading progress
3057
// min-width: $bar-size;
3058
// min-height: $bar-size;
3059
// background-color: transparent;
3060
trough {
3062
// background-color: transparent;
3063
}
3064
progress {
3066
// background-color: $primary;
3067
}
3068
}
3069
// makes the progress indicator disappear, when the fraction is 0
3071
trough.empty progress {
3072
all: unset;
3073
}
3074
}
3075
/*************
3078
* Level Bar *
3079
*************/
3080
levelbar {
3081
&.horizontal {
3082
block {
3083
min-height: $bar-size;
3084
}
3085
&.discrete block {
3087
min-width: $medium-size;
3088
&:not(:last-child) {
3090
margin-right: 2px;
3091
}
3092
}
3093
}
3094
&.vertical {
3096
block {
3097
min-width: $bar-size;
3098
}
3099
&.discrete block {
3101
min-height: $medium-size;
3102
&:not(:last-child) {
3104
margin-bottom: 2px;
3105
}
3106
}
3107
}
3108
// imitate the entry style
3110
trough {
3111
// padding: 2px;
3112
// border-radius: $corner-radius;
3113
// box-shadow: $shadow-z1;
3114
// background-color: $base;
3115
&:disabled {
3117
// background-color: $base-alt;
3118
}
3119
}
3120
block {
3122
&.low {
3123
background-color: $warning;
3124
}
3125
&.high,
3127
&:not(.empty) {
3128
background-color: $primary;
3129
}
3130
&.full {
3132
background-color: $success;
3133
}
3134
&.empty {
3136
background-color: $stroke-disabled;
3137
}
3138
}
3139
}
3140
/****************
3143
* Print dialog *
3144
*****************/
3145
printdialog {
3146
paper {
3147
padding: 0;
3148
border: 1px solid $divider;
3149
background-color: $base;
3150
color: $text;
3151
}
3152
.dialog-action-box {
3154
margin: 12px;
3155
}
3156
}
3157
/**********
3160
* Frames *
3161
**********/
3162
frame > border,
3163
.frame {
3164
margin: 0;
3165
padding: 0;
3166
border: 1px solid $divider;
3167
border-radius: 0;
3168
box-shadow: none;
3169
&.flat {
3171
border-style: none;
3172
}
3173
}
3174
// for backward compatibility
3176
frame.flat > border {
3177
border-style: none;
3178
}
3179
actionbar > revealer > box {
3181
padding: $container-padding;
3182
border-top: 1px solid $divider;
3183
background-color: $base;
3184
background-clip: border-box;
3185
button:not(.suggested-action):not(.destructive-action) {
3187
@extend %button-flat;
3188
}
3189
.linked:not(.vertical) > entry:not(:only-child) {
3191
border-radius: $corner-radius $corner-radius 0 0;
3192
}
3193
}
3194
scrolledwindow {
3196
viewport.frame { // avoid double borders when viewport inside scrolled window
3197
border-style: none;
3198
}
3199
// This is used when content is touch-dragged past boundaries.
3201
// draws a box on top of the content, the size changes programmatically.
3202
@at-root overshoot {
3203
&.top { @include overshoot(top); }
3204
&.bottom { @include overshoot(bottom); }
3206
&.left { @include overshoot(left); }
3208
&.right { @include overshoot(right); }
3210
}
3211
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3213
@at-root undershoot {
3214
&.top { @include undershoot(top); }
3215
&.bottom { @include undershoot(bottom); }
3217
&.left { @include undershoot(left); }
3219
&.right { @include undershoot(right); }
3221
}
3222
@at-root junction { // the small square between two scrollbars
3224
border-style: solid none none solid;
3225
border-width: 1px;
3226
border-color: $divider;
3227
background-color: $base;
3228
&:dir(rtl) {
3230
border-style: solid solid none none;
3231
}
3232
}
3233
}
3234
// vbox and hbox separators
3236
separator {
3237
min-width: 1px;
3238
min-height: 1px;
3239
background-color: $divider;
3240
}
3241
%hide_separators {
3243
min-width: 0;
3244
min-height: 0;
3245
background-color: transparent;
3246
}
3247
/*********
3250
* Lists *
3251
*********/
3252
list {
3253
border-color: $divider;
3254
background-color: $base;
3255
row {
3257
padding: 2px;
3258
}
3259
}
3260
row {
3262
&.activatable {
3263
@extend %ripple;
3264
@include ink-color($text, $fg: false);
3265
@include list-item;
3266
// this is for indicathing which row generated a popover
3268
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3269
&.has-open-popup {
3270
background-color: $overlay-checked;
3271
}
3272
}
3273
&:selected {
3275
@extend %selected_items;
3276
@include ink-color($primary, $fg: false);
3278
}
3279
}
3280
/*********************
3283
* App Notifications *
3284
*********************/
3285
.app-notification {
3286
// @extend %osd;
3287
@extend %toolbar-osd;
3289
margin: 8px;
3291
button {
3293
@extend %button-flat;
3294
&.text-button:not(:disabled) {
3296
@include ink-color($primary);
3297
}
3298
}
3299
&.frame,
3301
border {
3302
border-style: none;
3303
}
3304
}
3305
/*************
3308
* Expanders *
3309
*************/
3310
expander {
3311
title > arrow {
3312
transition: all $duration $ease-out;
3313
min-width: 16px;
3314
min-height: 16px;
3315
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3316
-gtk-icon-transform: rotate(-90deg);
3317
&:dir(rtl) {
3319
-gtk-icon-transform: rotate(90deg);
3320
}
3321
&:checked {
3323
-gtk-icon-transform: unset;
3324
}
3325
color: $text2;
3327
&:hover,
3329
&:active {
3330
color: $text;
3331
}
3332
&:disabled {
3334
color: $text2-disabled;
3335
}
3336
}
3337
}
3338
/************
3341
* Calendar *
3342
************/
3343
calendar {
3344
padding: 1px;
3345
border: 1px solid $divider;
3346
color: $text;
3347
&:disabled {
3349
color: $text-disabled;
3350
}
3351
&:selected {
3353
@extend %selected_items;
3354
border-radius: $corner-radius + 1px;
3356
}
3357
&.header {
3359
border-style: none none solid;
3360
border-color: $divider;
3361
border-radius: 0;
3362
}
3363
&.button {
3365
border-radius: $corner-radius + 1px;
3366
color: $text2;
3367
&:hover {
3369
background-image: image($overlay-hover);
3370
}
3371
&:disabled {
3373
color: $text2-disabled;
3374
}
3375
}
3376
&.highlight {
3378
color: $text2;
3379
font-weight: 500;
3380
}
3381
&:indeterminate {
3383
color: $text2-disabled;
3384
}
3385
}
3386
/***********
3389
* Dialogs *
3390
***********/
3391
messagedialog { // Message Dialog styling
3392
&.background {
3393
background-color: $surface;
3394
}
3395
.titlebar {
3397
min-height: $small-size;
3398
border-style: none;
3399
box-shadow: inset 0 1px highlight($surface);
3400
background-color: $surface;
3401
color: $text;
3402
&:backdrop {
3404
background-color: $surface;
3405
color: $text2;
3406
}
3407
}
3408
&.csd { // rounded bottom border styling for csd version
3410
&.background {
3411
// bigger radius for better antialiasing
3412
border-bottom-left-radius: $corner-radius;
3413
border-bottom-right-radius: $corner-radius;
3414
}
3415
}
3416
// Hint text
3418
box.vertical > label + label {
3419
color: $text2;
3420
}
3421
.dialog-action-box {
3423
margin-top: -$container-padding;
3424
// padding: $container-padding;
3425
button:not(:last-child) {
3427
margin-right: $container-padding;
3428
}
3429
}
3430
}
3431
.dialog-action-box button {
3433
@extend %button-flat;
3434
&:not(:disabled) {
3436
@include ink-color($primary);
3437
}
3438
&.suggested-action:not(:disabled) {
3440
background-color: transparent;
3441
// @include ink-color($primary);
3442
}
3443
&.destructive-action:not(:disabled) {
3445
background-color: transparent;
3446
@include ink-color($error);
3447
}
3448
}
3449
filechooser {
3451
.dialog-action-box {
3452
border-top: 1px solid $divider;
3453
}
3454
#pathbarbox {
3456
border-bottom: 1px solid $divider;
3457
background-color: $background;
3458
> stack > box > button { // The new folder button
3460
@extend %button-flat;
3461
border-radius: $circular-radius;
3463
}
3464
}
3465
}
3466
filechooserbutton:drop(active) {
3468
// box-shadow: none;
3469
}
3470
/***********
3473
* Sidebar *
3474
***********/
3475
.sidebar {
3476
border-style: none;
3477
background-color: $base-alt;
3478
&:not(separator) {
3480
@at-root %sidebar_left,
3481
&:dir(ltr),
3482
&.left,
3483
&.left:dir(rtl) {
3484
border-right: 1px solid $divider;
3485
border-left-style: none;
3486
}
3487
@at-root %sidebar_right,
3489
&:dir(rtl),
3490
&.right {
3491
border-left: 1px solid $divider;
3492
border-right-style: none;
3493
}
3494
}
3495
list {
3497
background-color: transparent;
3498
}
3499
paned & {
3501
&,
3502
&.left,
3503
&.right,
3504
&.left:dir(rtl),
3505
&:dir(rtl),
3506
&:dir(ltr) {
3507
border-style: none;
3508
}
3509
}
3510
}
3511
stacksidebar.sidebar {
3513
& {
3514
&:dir(ltr),
3515
&.left,
3516
&.left:dir(rtl) {
3517
list {
3518
@extend %sidebar_left;
3519
}
3520
}
3521
&:dir(rtl),
3523
&.right {
3524
list {
3525
@extend %sidebar_right;
3526
}
3527
}
3528
}
3529
+ separator.vertical,
3531
separator.horizontal {
3532
@extend %hide_separators;
3533
}
3534
list {
3536
padding: 4px;
3537
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3538
}
3539
row {
3541
min-height: 32px;
3542
padding: 0 8px - 6px;
3543
border-radius: $corner-radius;
3544
&:selected {
3546
font-weight: 500;
3547
@include ink-color($primary, $activated: true);
3548
}
3549
+ row {
3551
margin-top: 4px;
3552
}
3553
> label {
3555
padding-left: 6px;
3556
padding-right: 6px;
3557
}
3558
&.needs-attention > label {
3560
@extend %needs-attention;
3561
}
3562
}
3563
}
3564
separator.sidebar {
3566
background-color: $divider;
3567
&.selection-mode,
3569
.selection-mode & {
3570
// background-color: $divider;
3571
}
3572
}
3573
/****************
3576
* File chooser *
3577
****************/
3578
// dim the sidebar icons, see bug #786613 for details on this oddity
3579
row image.sidebar-icon {
3580
transition: color $duration $ease-out;
3581
color: $text2;
3582
&:disabled {
3584
color: $text2-disabled;
3585
}
3586
}
3587
placessidebar.sidebar {
3589
> viewport.frame {
3590
border-style: none;
3591
}
3592
list {
3594
padding: (4px - 3px) 0 4px;
3595
}
3596
row {
3598
// Needs overriding of the GtkListBoxRow padding
3599
min-height: 32px;
3600
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3601
padding: 0;
3602
border-radius: $corner-radius;
3603
// Using margins/padding directly in the SidebarRow
3605
// will make the animation of the new bookmark row jump
3606
> revealer {
3607
padding: 0 8px;
3608
}
3609
&:selected {
3611
font-weight: 500;
3612
@include ink-color($primary, $activated: true);
3613
image.sidebar-icon {
3615
color: $primary;
3616
}
3617
}
3618
&:disabled {
3620
color: $text-disabled;
3621
}
3622
image.sidebar-icon {
3624
&:dir(ltr) {
3625
padding-right: 8px;
3626
}
3627
&:dir(rtl) {
3629
padding-left: 8px;
3630
}
3631
}
3632
label.sidebar-label {
3634
&:dir(ltr) {
3635
padding-right: 2px;
3636
}
3637
&:dir(rtl) {
3639
padding-left: 2px;
3640
}
3641
}
3642
@at-root button.sidebar-button {
3644
@extend %button-flat-basic;
3645
@extend %button-small;
3646
}
3647
&.sidebar-placeholder-row {
3649
background-color: $overlay-hover;
3650
}
3651
&.sidebar-new-bookmark-row {
3653
color: $primary;
3654
image.sidebar-icon {
3656
color: $primary;
3657
}
3658
}
3659
}
3660
}
3661
placesview {
3663
.server-list-button {
3664
> image {
3665
-gtk-icon-transform: rotate(0turn);
3666
}
3667
&:checked > image {
3669
-gtk-icon-transform: rotate(-0.5turn);
3670
}
3671
}
3672
// this selects the "connect to server" label
3674
> actionbar > revealer > box > label {
3675
padding-left: 8px;
3676
padding-right: 8px;
3677
}
3678
}
3679
/*********
3682
* Paned *
3683
*********/
3684
paned {
3685
> separator {
3686
min-width: 1px;
3687
min-height: 1px;
3688
-gtk-icon-source: none; // defeats the ugly default handle decoration
3689
border-style: none; // just to be sure
3690
background-color: transparent;
3691
// workaround, using background istead of a border since the border will get rendered twice (?)
3692
background-image: image($divider);
3693
background-size: 1px 1px;
3694
background-clip: content-box; // avoids borders image being rendered twice (?)
3695
&.wide {
3697
min-width: 6px;
3698
min-height: 6px;
3699
background-color: $background;
3700
background-image: image($divider), image($divider);
3701
background-size: 1px 1px, 1px 1px;
3702
}
3703
}
3704
&.horizontal > separator {
3706
background-repeat: repeat-y;
3707
&:dir(ltr) {
3709
margin: 0 -8px 0 0;
3710
padding: 0 8px 0 0;
3711
background-position: left;
3712
}
3713
&:dir(rtl) {
3715
margin: 0 0 0 -8px;
3716
padding: 0 0 0 8px;
3717
background-position: right;
3718
}
3719
&.wide {
3721
margin: 0;
3722
padding: 0;
3723
background-repeat: repeat-y, repeat-y;
3724
background-position: left, right;
3725
}
3726
}
3727
&.vertical > separator {
3729
margin: 0 0 -8px 0;
3730
padding: 0 0 8px 0;
3731
background-repeat: repeat-x;
3732
background-position: top;
3733
&.wide {
3735
margin: 0;
3736
padding: 0;
3737
background-repeat: repeat-x, repeat-x;
3738
background-position: bottom, top;
3739
}
3740
}
3741
}
3742
/**************
3745
* GtkInfoBar *
3746
**************/
3747
infobar {
3748
border-style: none;
3749
&.info,
3751
&.question {
3752
border-bottom: 1px solid $divider;
3753
background-color: $base;
3754
button {
3756
@extend %button-flat;
3757
&.text-button:not(:disabled) {
3759
@include ink-color($primary);
3760
}
3761
}
3762
}
3763
&.warning {
3765
background-color: $warning;
3766
color: on($warning);
3767
button.flat {
3769
@include ink-color(on($warning));
3770
}
3771
selection {}
3773
*:link {
3775
color: on($warning);
3776
}
3777
}
3778
&.error {
3780
background-color: $error;
3781
color: on($error);
3782
button.flat {
3784
@include ink-color(on($error));
3785
}
3786
selection {}
3788
*:link {
3790
color: on($error);
3791
}
3792
}
3793
// Remove ugly hard-coded padding
3795
button label {
3796
margin: 0 -4px;
3797
}
3798
}
3799
/************
3802
* Tooltips *
3803
************/
3804
tooltip {
3805
&.background {
3806
// background-color needs to be set this way otherwise it gets drawn twice
3807
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3808
background-color: $tooltip;
3809
color: on($tooltip);
3810
}
3811
// padding: 4px; /* not working */
3813
border-radius: $corner-radius;
3814
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3815
&:not(.csd):not(.unity-csd) {
3817
// border: 1px solid $divider;
3818
// border-radius: $corner-radius + 1px;
3819
// background-clip: $background-clip-extra;
3820
}
3821
// FIXME: we need a border or tooltips vanish on black background.
3823
decoration {
3824
background-color: transparent;
3825
}
3826
> box {
3828
margin: -6px; // Remove hard-coded 6px margin
3829
min-height: 32px - 4px * 2;
3830
padding: 4px 8px;
3831
}
3832
.dim-label {
3834
color: on($tooltip, text2);
3835
}
3836
* {
3838
// workaround for Eclipse.
3839
// do not include any declaration here.
3840
}
3841
}
3842
/*****************
3845
* Color Chooser *
3846
*****************/
3847
colorswatch {
3848
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3849
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3850
// applied to the overlay box.
3851
// base color corners rounding
3853
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3854
// sports a bigger radius.
3855
// nth-child is needed by the custom color strip.
3856
&.top {
3858
border-top-left-radius: $corner-radius + 0.5px;
3859
border-top-right-radius: $corner-radius + 0.5px;
3860
overlay {
3862
border-top-left-radius: $corner-radius;
3863
border-top-right-radius: $corner-radius;
3864
}
3865
}
3866
&.bottom {
3868
border-bottom-left-radius: $corner-radius + 0.5px;
3869
border-bottom-right-radius: $corner-radius + 0.5px;
3870
overlay {
3872
border-bottom-left-radius: $corner-radius;
3873
border-bottom-right-radius: $corner-radius;
3874
}
3875
}
3876
&.left,
3878
&:first-child:not(.top) {
3879
border-top-left-radius: $corner-radius + 0.5px;
3880
border-bottom-left-radius: $corner-radius + 0.5px;
3881
overlay {
3883
border-top-left-radius: $corner-radius;
3884
border-bottom-left-radius: $corner-radius;
3885
}
3886
}
3887
&.right,
3889
&:last-child:not(.bottom) {
3890
border-top-right-radius: $corner-radius + 0.5px;
3891
border-bottom-right-radius: $corner-radius + 0.5px;
3892
overlay {
3894
border-top-right-radius: $corner-radius;
3895
border-bottom-right-radius: $corner-radius;
3896
}
3897
}
3898
&.dark {
3900
color: on(dark);
3901
}
3902
&.light {
3904
color: on(light);
3905
}
3906
overlay {
3908
transition: $transition-shadow;
3909
box-shadow: $shadow-z1;
3910
&:drop(active),
3912
&:hover {
3913
box-shadow: $shadow-z3;
3914
}
3915
}
3916
&#add-color-button {
3918
border-radius: $corner-radius $corner-radius 0 0;
3919
color: $text;
3920
&:only-child {
3922
border-radius: $corner-radius;
3923
}
3924
overlay {
3926
background-color: $surface;
3927
}
3928
}
3929
&:disabled {
3931
opacity: 0.5;
3932
overlay {
3934
box-shadow: none;
3935
}
3936
}
3937
row:selected & {
3939
}
3940
&#editor-color-sample {
3942
border-radius: $corner-radius + 0.5px;
3943
overlay {
3945
border-radius: $corner-radius;
3946
&:hover {
3948
// box-shadow: $shadow-z1;
3949
}
3950
}
3951
}
3952
}
3953
// colorscale popup
3955
colorchooser .popover.osd {
3956
transition: $transition-shadow;
3957
border-radius: $corner-radius;
3958
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3959
background-color: $surface;
3960
&:backdrop {
3962
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3963
}
3964
}
3965
/********
3968
* Misc *
3969
********/
3970
// content view (grid/list)
3971
.content-view {
3972
background-color: $background;
3973
&:hover {
3975
// -gtk-icon-effect: highlight;
3976
}
3977
rubberband,
3979
.rubberband {
3980
@extend rubberband;
3981
}
3982
}
3983
.scale-popup {
3985
.osd & {
3986
// @extend %osd;
3987
button.flat { // FIXME: quick hack, redo properly
3989
}
3990
}
3991
button { // +/- buttons on GtkVolumeButton popup
3993
}
3994
}
3995
/**********************
3998
* Window Decorations *
3999
**********************/
4000
decoration {
4001
transition: $transition-shadow;
4002
border-radius: $corner-radius $corner-radius 0 0;
4003
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4004
// FIXME rationalize shadows
4006
// this is used for the resize cursor area
4008
margin: 8px;
4009
&:backdrop {
4011
// the transparent shadow here is to enforce that the shadow extents don't
4012
// change when we go to backdrop, to prevent jumping windows.
4013
// The biggest shadow should be in the same order then in the active state
4014
// or the jumping will happen during the transition.
4015
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4016
}
4017
.maximized &,
4019
.fullscreen &,
4020
.tiled &,
4021
.tiled-top &,
4022
.tiled-right &,
4023
.tiled-bottom &,
4024
.tiled-left & {
4025
border-radius: 0;
4026
}
4027
.popup & {
4029
box-shadow: none;
4030
}
4031
// server-side decorations as used by mutter
4033
.ssd & {
4034
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4035
}
4036
.csd.popup & {
4038
border-radius: $corner-radius;
4039
box-shadow: $shadow-z4;
4040
}
4041
tooltip.csd & {
4043
border-radius: $corner-radius;
4044
box-shadow: none;
4045
}
4046
messagedialog.csd & {
4048
border-radius: $corner-radius;
4049
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4050
&:backdrop {
4052
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4053
}
4054
}
4055
.solid-csd & {
4057
margin: 0;
4058
padding: 2px;
4059
border-radius: 0;
4060
box-shadow: none;
4061
box-shadow: inset 0 1px highlight($titlebar);
4062
background-color: $titlebar;
4063
&:backdrop {
4065
background-color: $titlebar-backdrop;
4066
}
4067
}
4068
}
4069
// Window Close button
4071
button.titlebutton {
4072
border-radius: $circular-radius;
4073
.selection-mode & {
4075
}
4076
}
4077
// catch all extend :)
4080
%selected_items {
4082
background-color: $overlay-selected;
4083
}
4084
.monospace {
4086
font-family: monospace;
4087
}
4088
/**********************
4091
* Touch Copy & Paste *
4092
**********************/
4093
// touch selection handlebars for the Popover.osd above
4094
cursor-handle {
4095
color: $primary;
4096
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4097
&.top:dir(ltr),
4099
&.bottom:dir(rtl) {
4100
-gtk-icon-transform: rotate(90deg);
4101
}
4102
&.bottom:dir(ltr),
4104
&.top:dir(rtl) {
4105
-gtk-icon-transform: unset;
4106
}
4107
&.insertion-cursor:dir(ltr),
4109
&.insertion-cursor:dir(rtl) {
4110
padding-top: 6px;
4111
-gtk-icon-transform: rotate(45deg);
4112
}
4113
}
4114
// Decouple the font of context menus from their entry/textview
4116
.context-menu {
4117
font: initial;
4118
}
4119
// shortcut window keys
4121
.keycap {
4122
min-width: 28px - 8px * 2;
4123
min-height: 28px - 2px;
4124
margin-top: 2px;
4125
padding-bottom: 2px;
4126
padding-left: 8px;
4127
padding-right: 8px;
4128
border: solid 1px $divider;
4130
border-radius: $corner-radius + 1px;
4131
box-shadow: inset 0 -2px $divider;
4132
background-color: $surface;
4133
color: $text;
4134
font-size: smaller;
4135
}
4136
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4138
caret-color: $primary;
4139
}
4140
stackswitcher button.text-button { // FIXME aggregate with buttons
4142
min-width: 100px;
4143
}
4144
stackswitcher button.circular,
4146
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4147
min-width: $medium-size;
4148
min-height: $medium-size;
4149
padding: 0;
4150
}
4151
/*************
4154
* App Icons *
4155
*************/
4156
// Outline for low res icons
4157
.lowres-icon {
4158
// -gtk-icon-shadow: none;
4159
}
4160
// Drapshadow for large icons
4162
.icon-dropshadow {
4163
// -gtk-icon-shadow: none;
4164
}
4165
/*********
4168
* Emoji *
4169
*********/
4170
popover.emoji-picker {
4171
padding: 0;
4172
entry {
4174
border-bottom: 1px solid $divider;
4175
border-image: none;
4176
border-radius: 0;
4177
box-shadow: none;
4178
background-color: transparent;
4179
}
4180
scrolledwindow {
4182
border-bottom: 1px solid $divider;
4183
}
4184
}
4185
button.emoji-section {
4187
margin: 4px;
4188
&:checked {
4190
// background-color: transparent;
4191
@include ink-color($primary, $activated: true);
4192
}
4193
&:not(:last-child) {
4195
margin-right: 0;
4196
}
4197
}
4198
popover.emoji-picker .emoji {
4200
min-width: 3em;
4201
min-height: 3em;
4202
padding: 0 8px;
4203
// font-size: larger;
4204
widget {
4206
transition: $transition;
4207
border-radius: $corner-radius;
4208
&:hover {
4210
background-color: $overlay-hover;
4211
}
4212
}
4213
}
4214
popover.emoji-completion {
4216
padding: 8px 0;
4217
arrow {
4219
border: none;
4220
background: none;
4221
}
4222
.emoji-completion-row {
4224
min-height: $menuitem-size;
4225
padding: 0 12px;
4226
}
4227
.emoji:hover {
4229
background-color: $overlay-hover;
4230
}
4231
}
4232