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
selection {
176
// @extend %selected_items:disabled;
177
}
178
headerbar &,
180
menuitem &,
181
tab &,
182
button & {
183
color: inherit;
184
}
185
}
186
&.osd {
188
border-radius: $corner-radius;
189
background-color: $tooltip;
190
color: on($tooltip);
191
}
192
}
193
.dim-label {
195
color: $text2;
196
}
197
assistant {
199
.sidebar {
200
padding: 4px 0;
201
// background-color: $base;
202
}
203
.sidebar label {
205
min-height: $medium-size;
206
padding: 0 12px;
207
color: $text-disabled;
208
font-weight: 500;
209
&.highlight {
211
color: $text;
212
}
213
}
214
}
215
%osd,
217
.osd {
218
// opacity: .9;
219
}
220
/*********************
223
* Spinner Animation *
224
*********************/
225
@keyframes spin {
226
to {
227
-gtk-icon-transform: rotate(1turn);
228
}
229
}
230
spinner {
232
background: none;
233
opacity: 0; // non spinning spinner makes no sense
234
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
235
&:checked {
237
opacity: 1;
238
animation: spin 1s linear infinite;
239
&:disabled { opacity: 0.5; }
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
caret-color: currentColor; // this shouldn't be needed.
254
@include entry(normal);
256
&:focus {
258
@include entry(checked);
259
}
260
&:drop(active) {
262
@include entry(hover);
263
}
264
&:disabled {
266
@include entry(disabled);
267
}
268
&.flat {
270
min-height: 0;
271
padding: 2px;
272
border-radius: 0;
273
background-color: transparent;
274
}
275
// icons inside the entry
277
image {
278
// min-height: $small-size;
279
// min-width: $small-size;
280
// border-radius: $circular-radius;
281
// @extend %ripple;
282
// @include ink-color($text2);
283
color: $text2;
284
&:hover,
286
&:active {
287
color: $text;
288
}
289
&:disabled {
291
color: $text-disabled;
292
}
293
&.left {
295
margin-left: ($medium-size - 16px) / 2 - 8px;
296
margin-right: 6px;
297
}
298
&.right {
300
margin-left: 6px;
301
margin-right: ($medium-size - 16px) / 2 - 8px;
302
}
303
}
304
undershoot {
306
&.left {
307
@include undershoot(left);
308
}
309
&.right {
311
@include undershoot(right);
312
}
313
}
314
selection {
316
@extend %selected_items;
317
}
318
// entry error and warning style
320
@each $class, $color in (".error": $error, ".warning": $warning) {
321
&#{$class} {
322
@include entry(normal, $color);
323
&:focus {
325
@include entry(checked, $color);
326
}
327
&:disabled {
329
@include entry(disabled, $color);
330
}
331
}
332
}
333
.osd & {
335
}
336
progress {
338
margin: 2px -8px;
339
border-bottom: 2px solid $primary;
340
background-color: transparent;
341
}
342
// linked entries
344
.linked:not(.vertical) > & {
345
@extend %linked;
346
}
347
// Vertically linked entries
349
.linked.vertical > & {
350
@extend %linked-vertical;
351
}
352
}
353
%entry_raised {
355
border-radius: $corner-radius;
356
@include entry(raised-normal);
358
&:focus {
360
@include entry(raised-focus);
361
}
362
&:drop(active) {
364
@include entry(raised-hover);
365
}
366
&:disabled {
368
@include entry(raised-disabled);
369
}
370
// entry error and warning style
372
@each $class, $color in (".error": $error, ".warning": $warning) {
373
&#{$class} {
374
@include entry(raised-normal, $color);
375
&:focus {
377
@include entry(raised-focus, $color);
378
}
379
&:disabled {
381
@include entry(raised-disabled, $color);
382
}
383
image {
385
color: on($color, text2);
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: on($color, text-disabled);
394
}
395
}
396
}
397
}
398
}
399
treeview entry {
401
&,
402
&.flat {
403
background-color: $base;
404
&,
406
&:focus {
407
border-image: none;
408
box-shadow: none;
409
}
410
}
411
}
412
.entry-tag {
414
margin: 2px;
415
border-radius: $circular-radius;
416
box-shadow: none;
417
background-color: $fill;
418
color: $text;
419
&:hover {
421
background-image: image($overlay-hover);
422
}
423
// side margins: compensate the entry padding with a negative margin
425
// then the negative margin itself
426
:dir(ltr) & {
427
margin-left: 4px;
428
margin-right: 0;
429
padding-left: 12px;
430
padding-right: 8px;
431
}
432
:dir(rtl) & {
434
margin-left: 0;
435
margin-right: 4px;
436
padding-left: 8px;
437
padding-right: 12px;
438
}
439
// seems any sizing doesn't work
441
&.button {
442
box-shadow: none;
443
background-color: transparent;
444
color: $text2;
445
}
446
}
447
/***********
450
* Buttons *
451
***********/
452
// stuff for .needs-attention
453
@keyframes needs-attention {
454
from {
455
background-image:
456
-gtk-gradient(
457
radial,
458
center center, 0,
459
center center, .001,
460
to($primary),
461
to(transparent)
462
);
463
}
464
to {
466
background-image:
467
-gtk-gradient(
468
radial,
469
center center, 0,
470
center center, .5,
471
to($primary),
472
to(transparent)
473
);
474
}
475
}
476
%button,
478
button {
479
min-height: 24px;
480
min-width: 16px;
481
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
482
border-radius: $corner-radius;
483
background-color: $surface;
484
color: $text;
485
font-weight: 500;
486
@extend %ripple;
488
@include raised-ink-color($text);
489
&:disabled {
491
box-shadow: none;
492
background-color: $fill;
493
color: $text-disabled;
494
}
495
&:checked {
497
background-color: mix(rgba($text, 1), $surface, percentage($overlay-checked-opacity));
498
&:disabled {
500
box-shadow: inset 0 0 0 9999px $overlay-checked;
501
background-color: $fill;
502
color: $text-disabled;
503
}
504
}
505
&.text-button {
507
min-width: 64px - 16px * 2;
508
padding-left: 16px;
509
padding-right: 16px;
510
}
511
&.image-button {
513
min-width: 24px;
514
padding: ($medium-size - 24px) / 2;
515
border-radius: $circular-radius;
516
}
517
// NOTE: Some image-only buttons use this as well
519
&.text-button.image-button {
520
min-width: 24px;
521
padding: ($medium-size - 24px) / 2;
522
border-radius: $corner-radius;
523
label {
525
&:first-child {
526
margin-left: 16px - ($medium-size - 24px) / 2;
527
}
528
&:last-child {
530
margin-right: 16px - ($medium-size - 24px) / 2;
531
}
532
}
533
image:not(:only-child) {
535
margin: 0 (24px - 16px) / 2;
536
}
537
}
538
.linked:not(.vertical) > & {
540
@extend %linked;
541
&.image-button:not(.text-button) {
543
@extend %linked-image-button;
544
}
545
}
546
.linked.vertical > & {
548
@extend %linked-vertical;
549
&.image-button:not(.text-button) {
551
@extend %linked-vertical-image-button;
552
}
553
}
554
}
555
%button-flat-basic {
557
background-color: transparent;
558
@include ink-color($text2);
559
&:disabled {
561
background-color: transparent;
562
color: $text2-disabled;
563
}
564
}
565
%button-flat-activatable {
567
@extend %button-flat-basic;
568
&:checked {
570
background-color: $overlay-checked;
571
color: $text;
572
&:disabled {
574
color: $text-disabled;
575
}
576
}
577
}
578
%button-flat,
580
button.flat {
581
@extend %button-flat-activatable;
582
&.text-button {
584
min-width: 64px - 8px * 2;
585
padding-left: 8px;
586
padding-right: 8px;
587
}
588
&.text-button.image-button {
590
min-width: 24px;
591
padding: ($medium-size - 24px) / 2;
592
label {
594
&:first-child {
595
margin-left: 12px - ($medium-size - 24px) / 2;
596
}
597
&:last-child {
599
margin-right: 12px - ($medium-size - 24px) / 2;
600
}
601
}
602
}
603
.linked:not(.vertical) > &,
605
.linked.vertical > & {
606
&:not(:only-child) { // specificity bump
607
border-radius: $corner-radius;
608
&.image-button:not(.text-button) {
610
border-radius: $circular-radius;
611
}
612
}
613
}
614
}
615
button {
617
// big standalone buttons like in Documents pager
618
&.osd {
619
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
620
&.image-button {
622
padding: ($large-size - 24px) / 2;
623
}
624
&:disabled {
626
opacity: 0;
627
}
628
}
629
// overlay / OSD style
631
@at-root %osd_button,
632
.osd & {
633
}
634
// Suggested and Destructive Action buttons
636
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
637
&#{$class} {
638
background-color: $color;
639
color: on($color);
640
@include raised-ink-color(on($color));
641
&:disabled {
643
box-shadow: none;
644
background-color: $fill;
645
color: $text-disabled;
646
}
647
&:checked {
649
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
650
}
651
&.flat {
653
background-color: transparent;
654
@include ink-color($color);
655
&:disabled {
657
box-shadow: none;
658
background-color: transparent;
659
color: $text2-disabled;
660
}
661
&:checked {
663
background-color: rgba($color, $overlay-checked-opacity);
664
}
665
}
666
.osd & {
668
}
669
}
670
}
671
.stack-switcher > & {
673
// to position the needs attention dot, padding is added to the button
674
// child, a label needs just lateral padding while an icon needs vertical
675
// padding added too.
676
> label {
678
margin: 0 -6px;
679
padding: 0 6px;
680
}
681
> image {
683
margin: -3px -6px;
684
padding: 3px 6px;
685
}
686
&.needs-attention {
688
> label,
689
> image {
690
@extend %needs-attention;
691
}
692
&:checked {
694
> label,
695
> image {
696
animation: none;
697
background-image: none;
698
}
699
}
700
}
701
}
702
// hide separators
704
&.font,
705
&.file {
706
separator {
707
@extend %hide_separators;
708
}
709
}
710
&.font {
712
> box > box > label {
713
// font-weight: bold;
714
}
715
}
716
// inline-toolbar buttons
718
.inline-toolbar & {
719
// @extend %button-flat;
720
&:not(.text-button) {
722
border-radius: $circular-radius;
723
}
724
}
725
.primary-toolbar & {
727
-gtk-icon-shadow: none; // tango icons don't need shadows
728
}
729
&.close,
731
&.circular { // The Bloody Circul Button
732
border-radius: $circular-radius;
733
label {
735
// padding: 0;
736
}
737
}
738
}
739
%button-small {
741
min-height: $small-size;
742
min-width: $small-size;
743
padding: 0;
744
border-radius: $circular-radius;
745
}
746
%needs-attention {
748
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
749
background-repeat: no-repeat;
750
background-position: right 3px;
751
background-size: 6px 6px;
752
&:dir(rtl) {
754
background-position: left 3px;
755
}
756
}
757
// all the following is for the +|- buttons on inline toolbars, that way
759
// should really be deprecated...
760
.inline-toolbar toolbutton > button {
761
}
762
// More inline toolbar buttons
764
toolbar.inline-toolbar toolbutton {
765
&:not(:first-child) > button.flat {
766
// @extend %linked-not-first-child;
767
}
768
&:not(:last-child) > button.flat {
770
// @extend %linked-not-last-child;
771
}
772
}
773
%linked-not-first-child {
775
border-top-left-radius: 0;
776
border-bottom-left-radius: 0;
777
}
778
%linked-not-last-child {
780
border-top-right-radius: 0;
781
border-bottom-right-radius: 0;
782
}
783
%linked {
785
&:not(:first-child) {
786
@extend %linked-not-first-child;
787
}
788
&:not(:last-child) {
790
@extend %linked-not-last-child;
791
}
792
}
793
%linked-vertical-not-first-child {
795
border-top-left-radius: 0;
796
border-top-right-radius: 0;
797
}
798
%linked-vertical-not-last-child {
800
border-bottom-left-radius: 0;
801
border-bottom-right-radius: 0;
802
}
803
%linked-vertical {
805
&:not(:first-child) {
806
@extend %linked-vertical-not-first-child;
807
}
808
&:not(:last-child) {
810
@extend %linked-vertical-not-last-child;
811
}
812
}
813
%linked-image-button {
815
&:first-child {
816
border-top-left-radius: $corner-radius;
817
border-bottom-left-radius: $corner-radius;
818
}
819
&:last-child {
821
border-top-right-radius: $corner-radius;
822
border-bottom-right-radius: $corner-radius;
823
}
824
&:only-child {
826
border-radius: $circular-radius;
827
}
828
}
829
%linked-vertical-image-button {
831
&:first-child {
832
border-top-left-radius: $corner-radius;
833
border-top-right-radius: $corner-radius;
834
}
835
&:last-child {
837
border-bottom-left-radius: $corner-radius;
838
border-bottom-right-radius: $corner-radius;
839
}
840
&:only-child {
842
border-radius: $circular-radius;
843
}
844
}
845
/* menu buttons */
847
modelbutton.flat,
848
.menuitem.button.flat {
849
min-height: $menuitem-size;
850
padding: 0 8px;
851
border-radius: $corner-radius;
852
@extend %ripple;
854
@include ink-color($text, $fg: false);
855
&:selected {
857
@extend %selected_items;
858
}
859
}
860
modelbutton.flat arrow {
862
&.left {
863
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
864
}
865
&.right {
867
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
868
}
869
}
870
button.color {
872
min-height: $small-size;
873
min-width: $small-size;
874
padding: $container-padding;
875
colorswatch:only-child {
877
&,
878
overlay {
879
// border-radius: 0;
880
}
881
}
882
}
883
/*********
886
* Links *
887
*********/
888
*:link {
889
color: $primary;
890
}
891
*:visited {
893
color: $visited;
894
}
895
button.link {
897
&:link {
898
@include ink-color($primary);
899
}
900
&:visited {
902
@include ink-color($visited);
903
}
904
> label {
906
text-decoration-line: underline;
907
}
908
}
909
/*****************
911
* GtkSpinButton *
912
*****************/
913
spinbutton {
914
&:not(.vertical) {
915
// in this horizontal configuration, the whole spinbutton
916
// behaves as the entry, so we extend the entry styling
917
// and nuke the style on the internal entry
918
@extend %entry;
919
padding: 0;
921
entry {
923
min-width: $large-size - 8px * 2;
924
// reset all the other props since the spinbutton node is styled here
925
margin: 0;
926
border-image: none;
927
border-radius: 0;
928
box-shadow: none;
929
background-color: transparent;
930
}
931
button {
933
@extend %button-flat-basic;
934
@extend %button-small;
935
// margin: $container-padding;
937
border: solid $container-padding transparent;
938
// Remove unwanted focus indicator
940
&:focus:not(:hover):not(:active) {
941
box-shadow: inset 0 0 0 9999px transparent;
942
}
943
&.up:dir(ltr),
945
&.down:dir(rtl) {
946
margin-left: -$container-padding / 2;
947
}
948
&.up:dir(rtl),
950
&.down:dir(ltr) {
951
margin-right: -$container-padding / 2;
952
}
953
}
954
}
955
// OSD horizontal
957
.osd &:not(.vertical) {
958
}
959
// Vertical
961
&.vertical {
962
// in the vertical configuration, we treat the spinbutton
963
// as a box, and tweak the style of the entry in the middle
964
// so that it's linked
965
// FIXME: this should not be set at all, but otherwise it gets the wrong
967
// color
968
&:disabled {
969
color: $text-disabled;
970
}
971
entry {
973
@extend %entry_raised;
974
min-height: $medium-size;
976
min-width: $large-size;
977
padding: 0;
978
}
979
button {
981
min-height: $medium-size;
982
min-width: $large-size;
983
padding: 0;
984
@extend %button-flat-basic;
986
// Remove unwanted focus indicator
988
&:focus:not(:hover):not(:active) {
989
box-shadow: inset 0 0 0 9999px transparent;
990
}
991
&.up {
993
border-radius: $corner-radius $corner-radius 0 0;
994
}
995
&.down {
997
border-radius: 0 0 $corner-radius $corner-radius;
998
}
999
}
1000
}
1001
// OSD vertical
1003
.osd &.vertical {
1004
}
1005
// Misc
1007
treeview &:not(.vertical) {
1008
min-height: 0;
1009
border-style: none;
1010
border-radius: 0;
1011
entry {
1013
min-height: 0;
1014
padding: 1px 2px;
1015
}
1016
}
1017
}
1018
/**************
1021
* ComboBoxes *
1022
**************/
1023
combobox {
1024
arrow {
1025
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1026
min-height: 16px;
1027
min-width: 16px;
1028
}
1029
// workaround for menuitem selection
1031
decoration {
1032
transition: none;
1033
}
1034
button.combo cellview {
1036
&:dir(ltr) {
1037
margin-left: 8px - ($medium-size - 16px) / 2;
1038
}
1039
&:dir(rtl) {
1041
margin-right: 8px - ($medium-size - 16px) / 2;
1042
}
1043
}
1044
menu {
1046
padding: 2px 0;
1047
menuitem {
1049
min-height: $medium-size - 2px * 2;
1050
padding: 0 8px;
1051
}
1052
// overflow arrows
1054
> arrow {
1055
&.top {
1056
margin-top: -2px;
1057
}
1058
&.bottom {
1060
margin-top: 2px * 2;
1061
margin-bottom: -2px * 3;
1062
}
1063
}
1064
}
1065
&.linked {
1067
button:nth-child(2) {
1068
&:dir(ltr) {
1069
@extend %linked-not-first-child;
1070
}
1071
&:dir(rtl) {
1073
@extend %linked-not-last-child;
1074
}
1075
}
1076
}
1077
> .linked:not(.vertical) > entry:not(:only-child) {
1079
border-radius: $corner-radius $corner-radius 0 0;
1080
&:first-child {
1082
margin-right: -$medium-size;
1083
padding-right: $medium-size;
1084
}
1085
&:last-child {
1087
margin-left: -$medium-size;
1088
padding-left: $medium-size;
1089
}
1090
}
1091
> .linked:not(.vertical) > button:not(:only-child) {
1093
@extend %button-flat-activatable;
1094
// @extend %button-small;
1095
min-height: 16px;
1097
min-width: 16px;
1098
margin: ($medium-size - $small-size) / 2;
1099
padding: ($small-size - 16px) / 2;
1100
border-radius: $circular-radius;
1101
}
1102
}
1103
// the combo is a composite widget so the way we do button linking doesn't
1105
// work, special case needed. See
1106
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1107
.linked:not(.vertical) > combobox {
1109
&:not(:first-child) > box > button.combo {
1110
@extend %linked-not-first-child;
1111
}
1112
&:not(:last-child) > box > button.combo {
1114
@extend %linked-not-last-child;
1115
}
1116
}
1117
.linked.vertical > combobox {
1119
&:not(:first-child) > box > button.combo {
1120
@extend %linked-vertical-not-first-child;
1121
}
1122
&:not(:last-child) > box > button.combo {
1124
@extend %linked-vertical-not-last-child;
1125
}
1126
}
1127
button.combo:only-child {
1129
border-radius: $corner-radius $corner-radius 0 0;
1130
font-weight: normal;
1131
@include entry(normal);
1133
&:focus {
1135
@include entry(focus);
1136
}
1137
&:drop(active),
1139
&:hover {
1140
@include entry(hover);
1141
}
1142
&:checked {
1144
@include entry(checked);
1145
}
1146
&:disabled {
1148
@include entry(disabled);
1149
}
1150
}
1151
/************
1154
* Toolbars *
1155
************/
1156
toolbar {
1157
-GtkWidget-window-dragging: true;
1158
padding: 2px;
1159
background-color: $background;
1160
button {
1162
@extend %button-flat;
1163
}
1164
// on OSD
1166
.osd & {
1167
background-color: transparent;
1168
}
1169
// stand-alone OSD toolbars
1171
&.osd {
1172
@extend %toolbar-osd;
1173
// positional classes for `attached` osd toolbars
1175
&.left,
1176
&.right,
1177
&.top,
1178
&.bottom {
1179
border-radius: 0;
1180
}
1181
&.bottom {
1183
box-shadow: none;
1184
background-color: transparent;
1185
background-image:
1186
linear-gradient(
1187
to bottom,
1188
transparent,
1189
rgba(black, .1) 30%,
1190
rgba(black, .2) 50%,
1191
rgba(black, .4)
1192
);
1193
}
1194
}
1195
// toolbar separators
1197
&.horizontal > separator {
1198
margin: 2px;
1199
}
1200
&.vertical > separator {
1202
margin: 2px;
1203
}
1204
&:not(.inline-toolbar):not(.osd) {
1206
scale,
1207
entry,
1208
spinbutton,
1209
button {
1210
margin: 2px;
1211
}
1212
.linked entry,
1214
.linked spinbutton,
1215
.linked button {
1216
&:not(:first-child) {
1217
margin-left: 0;
1218
}
1219
&:not(:last-child) {
1221
margin-right: 0;
1222
}
1223
}
1224
spinbutton {
1226
entry,
1227
button {
1228
margin: 0;
1229
}
1230
}
1231
switch {
1233
margin: 2px + $container-padding 2px;
1234
}
1235
}
1236
}
1237
%toolbar-osd {
1239
transition: $transition-shadow;
1240
padding: $container-padding;
1241
border-radius: $corner-radius;
1242
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1243
background-color: $surface;
1244
&:backdrop {
1246
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1247
}
1248
}
1249
// searchbar, location-bar & inline-toolbar
1251
.inline-toolbar {
1252
padding: $container-padding;
1253
border-style: solid;
1254
border-width: 0 1px 1px;
1255
border-color: $divider;
1256
background-color: $base-alt;
1257
}
1258
searchbar > revealer > box,
1260
.location-bar {
1261
padding: $container-padding;
1262
border-style: solid;
1263
border-width: 0 0 1px;
1264
border-color: $divider;
1265
background-color: $background;
1266
background-clip: border-box;
1267
}
1268
searchbar > revealer > box {
1270
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1271
margin: -6px;
1272
padding: $container-padding;
1273
}
1274
/***************
1277
* Header bars *
1278
***************/
1279
.titlebar {
1280
transition: background-color $duration $ease-out, color $duration $ease-out;
1281
border-radius: $corner-radius $corner-radius 0 0;
1282
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1283
background-color: $titlebar;
1284
color: $titlebar-text;
1285
&:disabled {
1287
color: $titlebar-text-disabled;
1288
}
1289
&:backdrop {
1291
background-color: $titlebar-backdrop;
1292
color: $titlebar-text2;
1293
&:disabled {
1295
color: $titlebar-text2-disabled;
1296
}
1297
}
1298
.title {
1300
padding-left: 12px;
1301
padding-right: 12px;
1302
font-weight: bold;
1303
}
1304
.subtitle {
1306
padding-left: 12px;
1307
padding-right: 12px;
1308
font-size: smaller;
1309
}
1310
.subtitle,
1312
.dim-label {
1313
transition: color $duration $ease-out;
1314
color: $titlebar-text2;
1315
&:backdrop {
1317
color: $titlebar-text-disabled;
1318
}
1319
}
1320
// Don't draw titlebar above titlebar
1322
.titlebar {
1323
background-color: transparent;
1324
box-shadow: none;
1325
}
1326
// The separator for split headerbars
1328
headerbar + separator {
1329
background-color: $titlebar-divider;
1330
}
1331
entry {
1333
box-shadow: inset 0 -1px $titlebar-stroke;
1334
background-color: $titlebar-entry-fill;
1335
color: $titlebar-text;
1336
&:disabled {
1338
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1339
background-color: $titlebar-entry-fill;
1340
color: $titlebar-text-disabled;
1341
}
1342
image {
1344
color: $titlebar-text2;
1345
&:hover,
1347
&:active {
1348
color: $titlebar-text;
1349
}
1350
&:disabled {
1352
color: $titlebar-text-disabled;
1353
}
1354
}
1355
}
1356
.linked:not(.vertical) > entry:not(:only-child) {
1358
border-radius: $corner-radius $corner-radius 0 0;
1359
}
1360
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1362
@extend %button-flat;
1363
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1365
$titlebar-indicator 0%,
1366
transparent 0%)
1367
0 0 0 / 0 0 0px;
1368
@include ink-color($titlebar-text2);
1370
&:disabled {
1372
color: $titlebar-text2-disabled;
1373
}
1374
@at-root %titlebar-button-checked,
1376
&:checked {
1377
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1378
$titlebar-indicator 100%,
1379
transparent 0%)
1380
0 0 2 / 0 0 2px;
1381
background-color: transparent;
1382
color: $titlebar-text;
1383
&:disabled {
1385
background-color: transparent;
1386
color: $titlebar-text-disabled;
1387
}
1388
}
1389
&:backdrop {
1391
color: $titlebar-text-disabled;
1392
&:disabled {
1394
color: $titlebar-text2-disabled;
1395
}
1396
&:checked {
1398
color: $titlebar-text2;
1399
&:disabled {
1401
color: $titlebar-text2-disabled;
1402
}
1403
}
1404
}
1405
}
1406
button.suggested-action, button.destructive-action {
1408
&:disabled {
1409
background-color: $titlebar-fill;
1410
color: $titlebar-text-disabled;
1411
}
1412
}
1413
// FIXME: Ugly overriding
1415
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1416
min-width: 120px - 8px * 2;
1417
}
1418
// FIXME: Ugly overriding
1420
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1421
min-width: 0;
1422
padding-left: ($medium-size - 24px) / 2;
1423
padding-right: ($medium-size - 24px) / 2;
1424
}
1425
&.selection-mode {
1427
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1428
// but let's keep it for backwards compatibility.
1429
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1430
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1431
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1432
background-color: $primary;
1433
color: on($primary);
1434
&:backdrop {
1436
color: on($primary, text2);
1437
}
1438
.subtitle:link {
1440
color: on($primary);
1441
}
1442
button:not(.suggested-action):not(.destructive-action) {
1444
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1445
currentColor 0%,
1446
transparent 0%)
1447
0 0 0 / 0 0 0px;
1448
color: on($primary);
1449
&:disabled {
1451
color: on($primary, text-disabled);
1452
}
1453
&:checked {
1455
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1456
currentColor 100%,
1457
transparent 0%)
1458
0 0 2 / 0 0 2px;
1459
color: on($primary);
1460
&:disabled {
1462
color: on($primary, text-disabled);
1463
}
1464
}
1465
&:backdrop {
1467
color: on($primary, text2);
1468
&:disabled {
1470
color: on($primary, text2-disabled);
1471
}
1472
&:checked {
1474
color: on($primary, text2);
1475
&:disabled {
1477
color: on($primary, text2-disabled);
1478
}
1479
}
1480
}
1481
}
1482
.selection-menu {
1484
padding-left: 16px;
1485
padding-right: 16px;
1486
arrow {
1488
-GtkArrow-arrow-scaling: 1;
1489
}
1490
.arrow {
1492
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1493
}
1494
}
1495
}
1496
.selection-mode {
1498
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1499
background-color: $primary;
1500
}
1501
// squared corners when the window is maximized, tiled, or fullscreen
1503
.tiled &,
1504
.tiled-top &,
1505
.tiled-right &,
1506
.tiled-bottom &,
1507
.tiled-left &,
1508
.maximized &,
1509
.fullscreen & {
1510
border-radius: 0;
1511
box-shadow: $shadow-z1;
1512
}
1513
&.default-decoration {
1515
min-height: $small-size;
1516
padding: $container-padding;
1517
box-shadow: inset 0 1px highlight($titlebar);
1518
.tiled &,
1520
.maximized &,
1521
.fullscreen & {
1522
box-shadow: none;
1523
}
1524
button.titlebutton {
1526
min-height: $small-size;
1527
min-width: $small-size;
1528
margin: 0;
1529
padding: 0;
1530
}
1531
// workaround for non-animatable buttons
1533
.background:not(.csd) & button.titlebutton:active {
1534
background-size: 1000% 1000%;
1535
}
1536
}
1537
.solid-csd & {
1539
&:dir(rtl), &:dir(ltr) { // specificity bump
1540
border-radius: 0;
1541
box-shadow: $shadow-z1; // just remove the highlight
1542
}
1543
}
1544
}
1545
headerbar {
1547
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1548
min-height: $large-size;
1549
padding: 0 $container-padding;
1550
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1552
entry,
1553
spinbutton,
1554
button {
1555
margin-top: $container-padding;
1556
margin-bottom: $container-padding;
1557
}
1558
separator.titlebutton {
1560
margin-top: $large-size / 4;
1561
margin-bottom: $large-size / 4;
1562
background-color: $titlebar-divider;
1563
}
1564
switch {
1566
margin-top: ($large-size - 24px) / 2;
1567
margin-bottom: ($large-size - 24px) / 2;
1568
}
1569
// reset button margins of the spinbutton
1571
spinbutton button {
1572
margin-top: 0;
1573
margin-bottom: 0;
1574
}
1575
// FIXME: This is a hacky workaround.
1577
.entry-tag {
1578
margin-top: 5px;
1579
margin-bottom: 5px;
1580
}
1581
}
1582
// Development versions of apps to use a differently styled headerbar
1584
window.devel .titlebar:not(.selection-mode) {
1585
}
1586
/************
1589
* Pathbars *
1590
************/
1591
%pathbar_button,
1592
.path-bar.linked:not(.vertical) > button {
1593
@extend %button-flat-basic;
1594
padding-left: ($medium-size - 24px) / 2;
1596
padding-right: ($medium-size - 24px) / 2;
1597
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1598
$primary 0%,
1599
transparent 0%)
1600
0 0 0 / 0 0 0px;
1601
border-radius: $corner-radius;
1602
&:checked {
1604
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1605
$primary 100%,
1606
transparent 0%)
1607
0 0 2 / 0 0 2px;
1608
color: $text;
1609
&,
1611
&:disabled {
1612
background-color: transparent;
1613
}
1614
}
1615
label:not(:only-child) {
1617
&:first-child {
1618
margin-left: 0;
1619
}
1620
&:last-child {
1622
margin-right: 0;
1623
}
1624
}
1625
&.text-button {
1627
min-width: 0;
1628
}
1629
&.slider-button {
1631
padding-left: (24px - 16px) / 2;
1632
padding-right: (24px - 16px) / 2;
1633
}
1634
}
1635
/**************
1638
* Tree Views *
1639
**************/
1640
treeview.view {
1641
@at-root * {
1642
-GtkTreeView-horizontal-separator: 4;
1643
-GtkTreeView-grid-line-width: 1;
1644
-GtkTreeView-grid-line-pattern: '';
1645
-GtkTreeView-tree-line-width: 1;
1646
-GtkTreeView-tree-line-pattern: '';
1647
-GtkTreeView-expander-size: 16;
1648
}
1649
border-left-color: $stroke; // this is actually the tree lines color,
1651
border-top-color: $divider; // while this is the grid lines color, better then nothing
1652
// FIXME: Avoid transparency background-color being slightly darker
1654
&:selected {
1655
background-color: $base;
1656
background-image: image($overlay-selected);
1657
}
1658
// to avoid borders being overridden by the previously set props
1660
rubberband {
1661
@extend rubberband;
1662
}
1663
&:hover,
1665
&:selected {
1666
border-radius: 0;
1667
}
1668
&.separator {
1670
min-height: 1px + 2px * 2;
1671
color: $divider;
1672
}
1673
&:drop(active) {
1675
// FIXME: box-shadow, background-color and background-image are not available here.
1676
border-style: solid none;
1677
border-width: 9999px;
1678
border-color: $overlay-hover;
1679
&.after {
1681
border-top-style: none;
1682
}
1683
&.before {
1685
border-bottom-style: none;
1686
}
1687
}
1688
&.expander {
1690
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1691
-gtk-icon-transform: rotate(-90deg);
1692
&:dir(rtl) {
1694
-gtk-icon-transform: rotate(90deg);
1695
}
1696
&:checked {
1698
-gtk-icon-transform: unset;
1699
}
1700
color: $text2;
1702
&:hover,
1704
&:active {
1705
color: $text;
1706
}
1707
&:disabled {
1709
color: $text2-disabled;
1710
}
1711
}
1712
&.progressbar { // progress bar in treeviews
1714
border-bottom: $bar-size solid $primary;
1715
box-shadow: none;
1716
background-color: transparent;
1717
background-image: none;
1718
&:selected:hover {
1720
box-shadow: none;
1721
}
1722
}
1723
&.trough { // progress bar trough in treeviews
1725
border-bottom: $bar-size solid $stroke-disabled;
1726
box-shadow: none;
1727
background-color: transparent;
1728
background-image: none;
1729
&:selected:hover {
1731
box-shadow: none;
1732
}
1733
}
1734
header {
1736
button {
1737
padding: 2px 6px;
1738
border-style: none solid solid none;
1739
border-width: 1px;
1740
border-color: $divider;
1741
border-radius: 0;
1742
background-clip: border-box;
1743
color: $text2;
1744
@include ink-color($text2);
1745
@include list-item;
1746
&:disabled {
1748
color: $text2-disabled;
1749
}
1750
&,
1752
&:disabled {
1753
background-color: $base;
1754
}
1755
&:last-child {
1757
border-right-style: none;
1758
}
1759
}
1760
}
1761
button.dnd,
1763
header.button.dnd { // for treeview-like derive widgets
1764
padding: 2px 6px;
1765
border-style: none solid solid;
1766
border-width: 1px;
1767
border-color: $divider;
1768
border-radius: 0;
1769
box-shadow: none;
1770
background-color: $base;
1771
background-clip: border-box;
1772
color: $primary;
1773
}
1774
// see tests/testaccel to test
1776
acceleditor > label {
1777
background-color: $primary;
1778
}
1779
}
1780
/*********
1783
* Menus *
1784
*********/
1785
menubar,
1786
.menubar {
1787
-GtkWidget-window-dragging: true;
1788
padding: 0;
1789
// box-shadow: inset 0 -1px $divider;
1790
background-color: $titlebar;
1791
color: $titlebar-text;
1792
&:backdrop {
1794
background-color: $titlebar-backdrop;
1795
color: $titlebar-text2;
1796
}
1797
.csd & {
1799
transition: $transition;
1800
}
1801
> menuitem {
1803
transition: $transition;
1804
min-height: 20px;
1805
padding: 4px 8px;
1806
color: $titlebar-text2;
1807
&:hover { // Seems like it :hover even with keyboard focus
1809
transition: none;
1810
background-color: $overlay-checked;
1811
color: $titlebar-text;
1812
}
1813
&:disabled {
1815
color: $titlebar-text2-disabled;
1816
}
1817
}
1818
}
1819
// Needed to make the border-radius of menus work
1821
// otherwise the background bleeds out of the menu edges
1822
.background.popup {
1823
background-color: transparent;
1824
}
1825
menu,
1827
.menu,
1828
.context-menu {
1829
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1830
padding: 4px 0;
1831
box-shadow: inset 0 1px highlight($surface);
1832
background-color: $surface;
1833
background-clip: border-box;
1834
border: 1px solid $divider; // adds borders in a non composited env
1835
.csd & {
1837
border: none; // axes borders in a composited env
1838
border-radius: $corner-radius;
1839
}
1840
menuitem {
1842
transition: background-color $duration $ease-out;
1843
min-height: 20px;
1844
min-width: 40px;
1845
padding: 4px 8px;
1846
color: $text;
1847
font: initial;
1848
text-shadow: none;
1849
&:hover {
1851
transition: none;
1852
background-color: $overlay-hover;
1853
}
1854
&:disabled {
1856
color: $text-disabled;
1857
}
1858
// submenu indicators
1860
arrow {
1861
min-height: 16px;
1862
min-width: 16px;
1863
&:dir(ltr) {
1865
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1866
margin-left: 8px;
1867
}
1868
&:dir(rtl) {
1870
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1871
margin-right: 8px;
1872
}
1873
}
1874
// avoids labels color being overridden, see
1876
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1877
label {
1878
&:dir(rtl),
1879
&:dir(ltr) {
1880
// color: inherit;
1881
}
1882
}
1883
}
1884
// overflow arrows
1886
> arrow {
1887
min-height: 16px;
1888
min-width: 16px;
1889
padding: 4px;
1890
background-color: $surface;
1891
color: $text2;
1892
&.top {
1894
margin-top: -4px;
1895
border-bottom: 1px solid $divider;
1896
border-radius: $corner-radius $corner-radius 0 0;
1897
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1898
}
1899
&.bottom {
1901
margin-top: 4px * 2;
1902
margin-bottom: -4px * 3;
1903
border-top: 1px solid $divider;
1904
border-radius: 0 0 $corner-radius $corner-radius;
1905
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1906
}
1907
&:hover {
1909
background-image: image($overlay-hover);
1910
}
1911
&:disabled {
1913
border-color: transparent;
1914
background-color: transparent;
1915
color: transparent;
1916
// color: $text2-disabled;
1917
}
1918
}
1919
separator {
1921
margin: 4px 0;
1922
}
1923
}
1924
menuitem {
1926
accelerator {
1927
color: $text2;
1928
}
1929
&:disabled accelerator {
1931
color: $text2-disabled;
1932
}
1933
}
1934
/************
1937
* Popovers *
1938
************/
1939
popover.background {
1940
transition: $transition-shadow;
1941
padding: 2px;
1942
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1943
background-color: $surface;
1944
&:backdrop {
1946
box-shadow: $shadow-z2;
1947
}
1948
&, .csd & {
1950
border-style: solid;
1951
border-width: 1px;
1952
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1953
border-radius: $corner-radius + 1px;
1954
}
1955
> stack {
1957
margin: -4px; // remove extra padding from menu style popovers
1958
}
1959
> toolbar {
1961
margin: -2px;
1962
}
1963
> list,
1965
> .view,
1966
> toolbar {
1967
border-style: none;
1968
box-shadow: none;
1969
background-color: transparent;
1970
}
1971
// FIXME: Use the popover color instead of transparent as a workaround for .view
1973
list,
1974
.view:not(:selected),
1975
toolbar {
1976
background-color: $surface;
1977
}
1978
&.touch-selection,
1980
&.magnifier,
1981
&.osd {
1982
// @extend %osd;
1983
}
1984
button:not(.suggested-action):not(.destructive-action) {
1986
// @extend %button-flat;
1987
}
1988
.linked:not(.vertical) > entry:not(:only-child) {
1990
// border-radius: $corner-radius $corner-radius 0 0;
1991
}
1992
&.menu button,
1994
button.model {
1995
@extend %button-flat;
1996
min-height: 32px;
1998
padding: 0 8px;
1999
border-radius: $corner-radius;
2000
&:checked {
2002
// color: $primary;
2003
}
2004
}
2005
separator {
2007
margin: 4px 0;
2008
}
2009
list separator {
2011
margin: 0;
2012
}
2013
}
2014
/*************
2016
* Notebooks *
2017
*************/
2018
notebook {
2019
frame > paned > & > header,
2020
&.frame > header {
2021
background-color: $base-alt;
2022
}
2023
&:focus tab:checked {
2025
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2026
}
2027
> header {
2029
border-width: 1px;
2030
border-color: $divider;
2031
background-color: $background;
2032
background-clip: border-box;
2033
&.top {
2035
border-bottom-style: solid;
2036
> tabs {
2038
margin-bottom: -1px;
2039
> tab {
2041
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2042
&:checked {
2044
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2045
}
2046
&.reorderable-page {
2048
border-image-width: 0 1px 2px;
2049
}
2050
}
2051
}
2052
}
2053
&.bottom {
2055
border-top-style: solid;
2056
> tabs {
2058
margin-top: -1px;
2059
> tab {
2061
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2062
&:checked {
2064
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2065
}
2066
&.reorderable-page {
2068
border-image-width: 2px 1px 0;
2069
}
2070
}
2071
}
2072
}
2073
&.left {
2075
border-right-style: solid;
2076
> tabs {
2078
margin-right: -1px;
2079
> tab {
2081
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2082
&:checked {
2084
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2085
}
2086
&.reorderable-page {
2088
border-image-width: 1px 2px 1px 0;
2089
}
2090
}
2091
}
2092
}
2093
&.right {
2095
border-left-style: solid;
2096
> tabs {
2098
margin-left: -1px;
2099
> tab {
2101
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2102
&:checked {
2104
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2105
}
2106
&.reorderable-page {
2108
border-image-width: 1px 0 1px 2px;
2109
}
2110
}
2111
}
2112
}
2113
&.top > tabs > arrow {
2115
@extend %notebook_vert_arrows;
2116
border-top-style: none;
2118
}
2119
&.bottom > tabs > arrow {
2121
@extend %notebook_vert_arrows;
2122
border-bottom-style: none;
2124
}
2125
@at-root %notebook_vert_arrows {
2127
padding-left: 4px;
2128
padding-right: 4px;
2129
&.down {
2131
margin-left: -8px;
2132
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2133
}
2134
&.up {
2136
margin-right: -8px;
2137
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2138
}
2139
}
2140
&.left > tabs > arrow {
2142
@extend %notebook_horz_arrows;
2143
border-left-style: none;
2145
}
2146
&.right > tabs > arrow {
2148
@extend %notebook_horz_arrows;
2149
border-right-style: none;
2151
}
2152
@at-root %notebook_horz_arrows {
2154
padding-top: 4px;
2155
padding-bottom: 4px;
2156
&.down {
2158
margin-top: -8px;
2159
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2160
}
2161
&.up {
2163
margin-bottom: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2165
}
2166
}
2167
> tabs > arrow {
2169
min-height: 16px;
2170
min-width: 16px;
2171
border-radius: 0;
2172
@extend %ripple;
2174
@include ink-color($text2);
2175
&:disabled {
2177
color: $text2-disabled;
2178
}
2179
}
2180
tab {
2182
transition: $transition,
2183
background-size 0ms,
2184
background-image 0ms;
2185
min-height: $small-size;
2186
min-width: $small-size;
2187
padding: $container-padding 12px;
2188
border-width: 1px; // for reorderable tabs
2190
border-color: transparent; //
2191
outline: none;
2193
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2194
background-repeat: no-repeat;
2195
background-position: center;
2196
background-size: 0% 0%;
2197
background-clip: border-box;
2198
color: $text2;
2200
font-weight: 500;
2201
&:hover {
2203
background-color: $overlay-hover;
2204
}
2205
&:disabled {
2207
color: $text2-disabled;
2208
}
2209
&:checked {
2211
transition: $transition,
2212
background-size $ripple-fade-in-duration $ease-out,
2213
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2214
background-color: transparent;
2215
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2216
background-size: 1000% 1000%;
2217
background-clip: padding-box;
2218
color: $text;
2219
&:disabled {
2221
color: $text-disabled;
2222
}
2223
&.reorderable-page {
2225
border-color: $divider;
2226
background-color: $base;
2227
}
2228
}
2229
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2231
> box {
2232
transition: background-color $duration $ease-out;
2233
margin: -$container-padding -12px;
2234
padding: $container-padding 12px;
2235
&:drop(active) {
2237
background-color: $overlay-hover;
2238
}
2239
}
2240
// colors the button like the label, overridden otherwise
2242
button.flat {
2243
@extend %button-small;
2244
&:last-child {
2246
margin-left: $container-padding;
2247
margin-right: $container-padding - 12px;
2248
}
2249
&:first-child {
2251
margin-left: $container-padding - 12px;
2252
margin-right: $container-padding;
2253
}
2254
}
2255
}
2256
&.top,
2258
&.bottom {
2259
tabs {
2260
padding-left: 8px;
2261
padding-right: 8px;
2262
&:not(:only-child) {
2264
&:first-child {
2265
margin-left: 0;
2266
}
2267
&:last-child {
2269
margin-right: 0;
2270
}
2271
}
2272
tab.reorderable-page {
2274
border-style: none solid;
2275
}
2276
}
2277
}
2278
&.left,
2280
&.right {
2281
tabs {
2282
padding-top: 8px;
2283
padding-bottom: 8px;
2284
&:not(:only-child) {
2286
&:first-child {
2287
margin-top: 0;
2288
}
2289
&:last-child {
2291
margin-bottom: 0;
2292
}
2293
}
2294
tab.reorderable-page {
2296
border-style: solid none;
2297
}
2298
}
2299
}
2300
}
2301
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2303
background-color: $base;
2304
}
2305
}
2306
/**************
2309
* Scrollbars *
2310
**************/
2311
scrollbar {
2312
$_slider_min_length: 24px;
2313
// disable steppers
2315
@at-root * {
2316
-GtkScrollbar-has-backward-stepper: false;
2317
-GtkScrollbar-has-forward-stepper: false;
2318
}
2319
transition: $transition;
2321
background-color: $base;
2322
// scrollbar border
2324
&.top { border-bottom: 1px solid $divider; }
2325
&.bottom { border-top: 1px solid $divider; }
2326
&.left { border-right: 1px solid $divider; }
2327
&.right { border-left: 1px solid $divider; }
2328
// slider
2330
slider {
2331
transition: background-color $duration $ease-out;
2332
min-width: 8px;
2333
min-height: 8px;
2334
border: 4px solid transparent;
2335
border-radius: $circular-radius;
2336
background-clip: padding-box;
2337
background-color: $text-disabled;
2338
&:hover {
2340
background-color: $text2;
2341
}
2342
&:active {
2344
background-color: $text;
2345
}
2346
&:disabled {
2348
background-color: $text2-disabled;
2349
}
2350
}
2351
&.fine-tune {
2353
slider {
2354
min-width: 4px;
2355
min-height: 4px;
2356
}
2357
&.horizontal slider {
2359
margin: 2px 0;
2360
}
2361
&.vertical slider {
2363
margin: 0 2px;
2364
}
2365
}
2366
&.overlay-indicator {
2368
&:not(.fine-tune) slider {
2369
transition-property: background-color, min-height, min-width;
2370
}
2371
&:not(.dragging):not(.hovering) {
2373
border-color: transparent;
2374
background-color: transparent;
2375
slider {
2377
min-width: 4px;
2378
min-height: 4px;
2379
margin: 4px - 1px;
2380
border: 1px solid rgba($base, 0.3);
2381
}
2382
button {
2384
min-width: 4px;
2385
min-height: 4px;
2386
margin: 4px - 1px;
2387
border: 1px solid rgba($base, 0.3);
2388
border-radius: $circular-radius;
2389
background-color: $text-disabled;
2390
background-clip: padding-box;
2391
-gtk-icon-source: none;
2392
&:disabled {
2394
background-color: $text2-disabled;
2395
}
2396
}
2397
&.horizontal {
2399
slider {
2400
min-width: $_slider_min_length;
2401
}
2402
button {
2404
min-width: 8px;
2405
}
2406
}
2407
&.vertical {
2409
slider {
2410
min-height: $_slider_min_length;
2411
}
2412
button {
2414
min-height: 8px;
2415
}
2416
}
2417
}
2418
&.dragging,
2420
&.hovering {
2421
background-color: rgba($surface, 0.9);
2422
}
2423
}
2424
&.horizontal slider {
2426
min-width: $_slider_min_length;
2427
}
2428
&.vertical slider {
2430
min-height: $_slider_min_length;
2431
}
2432
// button styling
2434
button {
2435
@extend %button-flat-basic;
2436
min-width: 16px;
2438
min-height: 16px;
2439
padding: 0;
2440
border-radius: 0;
2441
}
2442
// button icons
2444
&.vertical {
2445
button {
2446
&.down {
2447
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2448
}
2449
&.up {
2451
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2452
}
2453
}
2454
}
2455
&.horizontal {
2457
button {
2458
&.down {
2459
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2460
}
2461
&.up {
2463
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2464
}
2465
}
2466
}
2467
}
2468
/**********
2471
* Switch *
2472
**********/
2473
switch {
2474
transition: all $duration $ease-out;
2475
margin: $container-padding 0;
2476
padding: 0 2px;
2477
border: 5px solid transparent;
2478
border-radius: $circular-radius;
2479
background-color: $stroke;
2480
background-clip: padding-box;
2481
font-size: 0;
2482
&:checked {
2484
background-color: rgba($primary, 0.5);
2485
}
2486
&:disabled {
2488
opacity: 0.5;
2489
}
2490
// hide on/off icons for >=3.24.5
2492
image {
2493
margin: -8px;
2494
-gtk-icon-transform: scale(0);
2495
}
2496
slider {
2498
transition: all $duration $ease-out;
2499
min-width: 20px;
2500
min-height: 20px;
2501
margin: -3px -2px;
2502
border-radius: $circular-radius;
2503
outline: none;
2504
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2505
background-color: $switch-surface;
2506
}
2507
&:focus slider {
2509
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2510
}
2511
&:hover slider {
2513
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2514
}
2515
&:focus:hover slider {
2517
box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-z1;
2518
}
2519
&:checked slider {
2521
background-color: $primary;
2522
color: $primary;
2523
}
2524
row:selected & {
2526
}
2527
}
2528
/*************************
2531
* Check and Radio items *
2532
*************************/
2533
// draw regular check and radio items using our PNG assets
2534
// all assets are rendered from assets.svg. never add pngs directly
2535
// selection-mode
2537
.view.content-view.check:not(list),
2538
.content-view:not(list) .tile check {
2539
min-height: 40px;
2540
min-width: 40px;
2541
margin: 0;
2542
padding: 0;
2543
box-shadow: none;
2544
background-color: transparent;
2545
background-image: none;
2546
-gtk-icon-shadow: $icon-shadow-z2;
2547
&:hover,
2549
&:active {
2550
-gtk-icon-shadow: $icon-shadow-z4;
2551
}
2552
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2554
&#{$class} {
2555
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2556
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2558
}
2559
}
2560
}
2561
checkbutton,
2563
radiobutton {
2564
outline: none;
2565
}
2566
checkbutton.text-button,
2568
radiobutton.text-button {
2569
// this is for a nice focus on check and radios text
2570
padding: 2px;
2571
label:not(:only-child) {
2573
margin: 0 4px;
2574
}
2575
}
2576
$check-radio-size: 40px;
2578
check,
2580
radio {
2581
min-height: 24px;
2582
min-width: 24px;
2583
margin: -($check-radio-size - 24px) / 2;
2584
padding: ($check-radio-size - 24px) / 2;
2585
border-radius: $circular-radius;
2586
@extend %ripple;
2588
@include ink-color($text2);
2589
&:checked,
2591
&:indeterminate {
2592
@include ink-color($primary);
2593
}
2594
&:disabled {
2596
color: $text2-disabled;
2597
}
2598
&:only-child {
2600
// margin: -12px;
2601
}
2602
popover modelbutton.flat & {
2604
&,
2605
&:focus,
2606
&:hover,
2607
&:focus:hover,
2608
&:active,
2609
&:disabled {
2610
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2611
box-shadow: none;
2612
background-image: none;
2613
}
2614
&.left:dir(rtl) {
2616
margin-left: -12px;
2617
margin-right: -4px;
2618
}
2619
&.right:dir(ltr) {
2621
margin-left: -4px;
2622
margin-right: -12px;
2623
}
2624
}
2625
menu menuitem & {
2627
transition: none;
2628
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2629
padding: 0;
2630
&:dir(ltr) {
2632
margin-right: 8px;
2633
}
2634
&:dir(rtl) {
2636
margin-left: 8px;
2637
}
2638
&,
2640
&:hover,
2641
&:disabled {
2642
box-shadow: none;
2643
}
2644
}
2645
}
2646
%check,
2648
check {
2649
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2650
&:checked {
2652
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2653
}
2654
&:indeterminate {
2656
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2657
}
2658
}
2659
%radio,
2661
radio {
2662
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2663
&:checked {
2665
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2666
}
2667
&:indeterminate {
2669
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2670
}
2671
border-image-slice: $check-radio-size / 2px;
2673
border-image-width: $check-radio-size / 2;
2674
$radio-indicator-size: 10px / $check-radio-size / 2;
2676
border-image-source:
2678
-gtk-gradient(
2679
radial,
2680
center center, 0,
2681
center center, .001,
2682
to($primary),
2683
to(transparent)
2684
);
2685
&:checked:not(:indeterminate) {
2687
border-image-source:
2688
-gtk-gradient(
2689
radial,
2690
center center, 0,
2691
center center, $radio-indicator-size,
2692
to($primary),
2693
to(transparent)
2694
);
2695
&:disabled {
2697
border-image-source:
2698
-gtk-gradient(
2699
radial,
2700
center center, 0,
2701
center center, $radio-indicator-size,
2702
to($text2-disabled),
2703
to(transparent)
2704
);
2705
}
2706
}
2707
}
2708
%small_check,
2710
menu menuitem check {
2711
min-height: 16px;
2712
min-width: 16px;
2713
border-radius: $corner-radius;
2714
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2715
&:checked {
2717
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2718
}
2719
&:indeterminate {
2721
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2722
}
2723
}
2724
%small_radio,
2726
menu menuitem radio {
2727
min-height: 16px;
2728
min-width: 16px;
2729
border-image: none;
2730
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2731
&:checked {
2733
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2734
}
2735
&:indeterminate {
2737
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2738
}
2739
}
2740
// ANIMATION:
2742
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2743
// the transformation is set on the active state and it get reset on the checked state.
2744
radio:not(:checked):active {
2745
// -gtk-icon-transform: scale(0);
2746
}
2747
// Otherwise, treeview.view styling will be applied...
2749
treeview.view check,
2750
treeview.view radio {
2751
padding: 0;
2752
color: $text2;
2753
&:checked,
2755
&:indeterminate {
2756
color: $primary;
2757
}
2758
&:disabled {
2760
color: $text2-disabled;
2761
}
2762
&,
2764
&:hover,
2765
&:selected,
2766
&:selected:hover {
2767
box-shadow: none;
2768
background-color: transparent;
2769
}
2770
}
2771
treeview.view radio:checked {
2773
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2774
border-image: none;
2775
}
2776
/************
2779
* GtkScale *
2780
************/
2781
scale {
2782
// sizing
2783
$_marks_length: 8px;
2784
$_marks_distance: 7px;
2785
$trough_size: 2px;
2787
$finetune_trough_size: 4px;
2788
$slider_size: 32px;
2790
$slider_margin: -($slider_size - $trough_size) / 2;
2792
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2793
$color_slider_margin: -($slider_size) * 3 / 4;
2795
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2796
min-height: $trough_size;
2798
min-width: $trough_size;
2799
&.horizontal {
2801
padding: ($medium-size - $trough_size) / 2 12px;
2802
}
2803
&.vertical {
2805
padding: 12px ($medium-size - $trough_size) / 2;
2806
}
2807
// the slider is inside the trough, so to have make it bigger there's a negative margin
2809
slider {
2810
min-height: $slider_size;
2811
min-width: $slider_size;
2812
margin: $slider_margin;
2813
}
2814
// click-and-hold the slider to activate
2816
&.fine-tune {
2817
&.horizontal {
2818
min-height: $finetune_trough_size;
2819
padding-top: ($medium-size - $finetune_trough_size) / 2;
2820
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2821
}
2822
&.vertical {
2824
min-width: $finetune_trough_size;
2825
padding-left: ($medium-size - $finetune_trough_size) / 2;
2826
padding-right: ($medium-size - $finetune_trough_size) / 2;
2827
}
2828
// to make the trough grow in fine-tune mode
2830
slider {
2831
margin: $finetune_slider_margin;
2832
}
2833
}
2834
// the backing bit
2836
trough {
2837
transition: background-color $duration $ease-out;
2838
outline: none;
2839
background-color: $stroke;
2840
&:disabled {
2842
background-color: $stroke-disabled;
2843
}
2844
}
2845
// the colored part of the backing bit
2847
highlight {
2848
transition: background-image $duration $ease-out;
2849
background-image: image($primary);
2850
&:disabled {
2852
background-color: $background;
2853
background-image: image($text2-disabled);
2854
}
2855
}
2856
// this is another differently styled part of the backing bit, the most relevant use case is for example
2858
// in media player to indicate how much video stream as been cached
2859
fill {
2860
transition: background-color $duration $ease-out;
2861
background-color: $stroke;
2862
&:disabled {
2864
background-color: transparent;
2865
}
2866
}
2867
slider {
2869
transition: background-color $duration $ease-out,
2870
background-size $ripple-fade-out-duration $ease-out,
2871
background-image $ripple-fade-out-opacity-duration $ease-out;
2872
background-repeat: no-repeat;
2873
background-position: center;
2874
background-size: auto, 1000% 1000%;
2875
border-radius: 50%;
2876
color: $primary;
2877
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2879
&#{$class} {
2880
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2881
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2883
radial-gradient(circle, transparent 10%, transparent 0%);
2884
}
2885
}
2886
&:focus {
2888
background-color: $overlay-focus;
2889
}
2890
&:hover {
2892
background-color: $overlay-hover;
2893
}
2894
&:focus:hover {
2896
background-color: $overlay-focus-hover;
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-color: $overlay-hover;
2907
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2908
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2909
background-size: auto, 0% 0%;
2910
}
2911
}
2912
marks,
2914
value {
2915
color: $text2;
2916
}
2917
indicator {
2919
background-color: $stroke;
2920
color: transparent;
2921
}
2922
//marks margins
2924
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2925
(horizontal, bottom, bottom, top),
2926
(vertical, top, left, right),
2927
(vertical, bottom, right, left) {
2928
&.#{$scale_orient} marks {
2929
&.#{$marks_class} {
2930
margin-#{$marks_margin}: $_marks_distance;
2931
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2932
}
2933
}
2934
&.#{$scale_orient}.fine-tune marks {
2936
&.#{$marks_class} {
2937
margin-#{$marks_margin}: $_marks_distance - 1px;
2938
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2939
}
2940
}
2941
}
2942
&.horizontal {
2944
indicator {
2945
min-height: $_marks_length;
2946
min-width: 1px;
2947
}
2948
}
2949
&.vertical {
2951
indicator {
2952
min-height: 1px;
2953
min-width: $_marks_length;
2954
}
2955
}
2956
// *WARNING* scale with marks madness following
2958
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2960
@each $marks_class, $marks_infix in (
2961
".marks-before:not(.marks-after)": "-marks-before",
2962
".marks-after:not(.marks-before)": "-marks-after"
2963
) {
2964
&#{$dir_class}#{$marks_class} {
2965
slider {
2966
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2967
&#{$state_class} {
2968
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2969
background-image:
2971
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2972
radial-gradient(circle, transparent 10%, transparent 0%);
2973
}
2974
}
2975
&:active {
2977
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2978
background-image:
2980
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2981
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2982
}
2983
}
2984
}
2985
}
2986
}
2987
&.color {
2989
min-height: 0;
2990
min-width: 0;
2991
&.horizontal {
2993
padding: 0 0 12px 0;
2994
slider {
2996
&:dir(ltr), &:dir(rtl) { // specificity bump
2997
margin-bottom: $color_slider_margin;
2998
margin-top: $color_marks_slider_margin;
2999
}
3000
}
3001
}
3002
&.vertical {
3004
&:dir(ltr) {
3005
padding: 0 0 0 12px;
3006
slider {
3008
margin-left: $color_slider_margin;
3009
margin-right: $color_marks_slider_margin;
3010
}
3011
}
3012
&:dir(rtl) {
3014
padding: 0 12px 0 0;
3015
slider {
3017
margin-right: $color_slider_margin;
3018
margin-left: $color_marks_slider_margin;
3019
}
3020
}
3021
}
3022
}
3023
}
3024
/*****************
3027
* Progress bars *
3028
*****************/
3029
progressbar {
3030
// sizing
3031
&.horizontal {
3032
trough,
3033
progress {
3034
min-height: $bar-size;
3035
}
3036
}
3037
&.vertical {
3039
trough,
3040
progress {
3041
min-width: $bar-size;
3042
}
3043
}
3044
// FIXME: insensitive state missing and some other state should be set probably
3046
color: $text2;
3047
font-size: smaller;
3048
trough {
3050
background-color: $stroke-disabled;
3051
}
3052
progress {
3054
background-color: $primary;
3055
}
3056
&.osd { // progressbar.osd used for epiphany page loading progress
3058
// min-width: $bar-size;
3059
// min-height: $bar-size;
3060
// background-color: transparent;
3061
trough {
3063
// background-color: transparent;
3064
}
3065
progress {
3067
// background-color: $primary;
3068
}
3069
}
3070
// makes the progress indicator disappear, when the fraction is 0
3072
trough.empty progress {
3073
all: unset;
3074
}
3075
}
3076
/*************
3079
* Level Bar *
3080
*************/
3081
levelbar {
3082
&.horizontal {
3083
block {
3084
min-height: $bar-size;
3085
}
3086
&.discrete block {
3088
min-width: $medium-size;
3089
&:not(:last-child) {
3091
margin-right: 2px;
3092
}
3093
}
3094
}
3095
&.vertical {
3097
block {
3098
min-width: $bar-size;
3099
}
3100
&.discrete block {
3102
min-height: $medium-size;
3103
&:not(:last-child) {
3105
margin-bottom: 2px;
3106
}
3107
}
3108
}
3109
// imitate the entry style
3111
trough {
3112
// padding: 2px;
3113
// border-radius: $corner-radius;
3114
// box-shadow: $shadow-z1;
3115
// background-color: $base;
3116
&:disabled {
3118
// background-color: $base-alt;
3119
}
3120
}
3121
block {
3123
&.low {
3124
background-color: $warning;
3125
}
3126
&.high,
3128
&:not(.empty) {
3129
background-color: $primary;
3130
}
3131
&.full {
3133
background-color: $success;
3134
}
3135
&.empty {
3137
background-color: $stroke-disabled;
3138
}
3139
}
3140
}
3141
/****************
3144
* Print dialog *
3145
*****************/
3146
printdialog {
3147
paper {
3148
padding: 0;
3149
border: 1px solid $divider;
3150
background-color: $base;
3151
color: $text;
3152
}
3153
.dialog-action-box {
3155
margin: 12px;
3156
}
3157
}
3158
/**********
3161
* Frames *
3162
**********/
3163
frame > border,
3164
.frame {
3165
margin: 0;
3166
padding: 0;
3167
border: 1px solid $divider;
3168
border-radius: 0;
3169
box-shadow: none;
3170
&.flat {
3172
border-style: none;
3173
}
3174
}
3175
// for backward compatibility
3177
frame.flat > border {
3178
border-style: none;
3179
}
3180
actionbar > revealer > box {
3182
padding: $container-padding;
3183
border-top: 1px solid $divider;
3184
background-color: $base;
3185
background-clip: border-box;
3186
button:not(.suggested-action):not(.destructive-action) {
3188
@extend %button-flat;
3189
}
3190
.linked:not(.vertical) > entry:not(:only-child) {
3192
border-radius: $corner-radius $corner-radius 0 0;
3193
}
3194
}
3195
scrolledwindow {
3197
viewport.frame { // avoid double borders when viewport inside scrolled window
3198
border-style: none;
3199
}
3200
// This is used when content is touch-dragged past boundaries.
3202
// draws a box on top of the content, the size changes programmatically.
3203
@at-root overshoot {
3204
&.top { @include overshoot(top); }
3205
&.bottom { @include overshoot(bottom); }
3207
&.left { @include overshoot(left); }
3209
&.right { @include overshoot(right); }
3211
}
3212
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3214
@at-root undershoot {
3215
&.top { @include undershoot(top); }
3216
&.bottom { @include undershoot(bottom); }
3218
&.left { @include undershoot(left); }
3220
&.right { @include undershoot(right); }
3222
}
3223
@at-root junction { // the small square between two scrollbars
3225
border-style: solid none none solid;
3226
border-width: 1px;
3227
border-color: $divider;
3228
background-color: $base;
3229
&:dir(rtl) {
3231
border-style: solid solid none none;
3232
}
3233
}
3234
}
3235
// vbox and hbox separators
3237
separator {
3238
min-width: 1px;
3239
min-height: 1px;
3240
background-color: $divider;
3241
}
3242
%hide_separators {
3244
min-width: 0;
3245
min-height: 0;
3246
background-color: transparent;
3247
}
3248
/*********
3251
* Lists *
3252
*********/
3253
list {
3254
border-color: $divider;
3255
background-color: $base;
3256
row {
3258
padding: 2px;
3259
}
3260
}
3261
row {
3263
&.activatable {
3264
@extend %ripple;
3265
@include ink-color($text, $fg: false);
3266
@include list-item;
3267
// this is for indicathing which row generated a popover
3269
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3270
&.has-open-popup {
3271
background-color: $overlay-checked;
3272
}
3273
}
3274
&:selected {
3276
@extend %selected_items;
3277
@include ink-color($primary, $fg: false);
3279
}
3280
}
3281
/*********************
3284
* App Notifications *
3285
*********************/
3286
.app-notification {
3287
// @extend %osd;
3288
@extend %toolbar-osd;
3290
margin: 8px;
3292
button {
3294
@extend %button-flat;
3295
&.text-button:not(:disabled) {
3297
@include ink-color($primary);
3298
}
3299
}
3300
&.frame,
3302
border {
3303
border-style: none;
3304
}
3305
}
3306
/*************
3309
* Expanders *
3310
*************/
3311
expander {
3312
title > arrow {
3313
transition: all $duration $ease-out;
3314
min-width: 16px;
3315
min-height: 16px;
3316
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3317
-gtk-icon-transform: rotate(-90deg);
3318
&:dir(rtl) {
3320
-gtk-icon-transform: rotate(90deg);
3321
}
3322
&:checked {
3324
-gtk-icon-transform: unset;
3325
}
3326
color: $text2;
3328
&:hover,
3330
&:active {
3331
color: $text;
3332
}
3333
&:disabled {
3335
color: $text2-disabled;
3336
}
3337
}
3338
}
3339
/************
3342
* Calendar *
3343
************/
3344
calendar {
3345
padding: 1px;
3346
border: 1px solid $divider;
3347
color: $text;
3348
&:disabled {
3350
color: $text-disabled;
3351
}
3352
&:selected {
3354
@extend %selected_items;
3355
border-radius: $corner-radius + 1px;
3357
}
3358
&.header {
3360
border-style: none none solid;
3361
border-color: $divider;
3362
border-radius: 0;
3363
}
3364
&.button {
3366
border-radius: $corner-radius + 1px;
3367
color: $text2;
3368
&:hover {
3370
background-image: image($overlay-hover);
3371
}
3372
&:disabled {
3374
color: $text2-disabled;
3375
}
3376
}
3377
&.highlight {
3379
color: $text2;
3380
font-weight: 500;
3381
}
3382
&:indeterminate {
3384
color: $text2-disabled;
3385
}
3386
}
3387
/***********
3390
* Dialogs *
3391
***********/
3392
messagedialog { // Message Dialog styling
3393
&.background {
3394
background-color: $surface;
3395
}
3396
.titlebar {
3398
min-height: $small-size;
3399
border-style: none;
3400
box-shadow: inset 0 1px highlight($surface);
3401
background-color: $surface;
3402
color: $text;
3403
&:backdrop {
3405
background-color: $surface;
3406
color: $text2;
3407
}
3408
}
3409
&.csd { // rounded bottom border styling for csd version
3411
&.background {
3412
// bigger radius for better antialiasing
3413
border-bottom-left-radius: $corner-radius;
3414
border-bottom-right-radius: $corner-radius;
3415
}
3416
}
3417
// Hint text
3419
box.vertical > label + label {
3420
color: $text2;
3421
}
3422
.dialog-action-box {
3424
margin-top: -$container-padding;
3425
// padding: $container-padding;
3426
button:not(:last-child) {
3428
margin-right: $container-padding;
3429
}
3430
}
3431
}
3432
.dialog-action-box button {
3434
@extend %button-flat;
3435
&:not(:disabled) {
3437
@include ink-color($primary);
3438
}
3439
&.suggested-action:not(:disabled) {
3441
// @include ink-color($primary);
3442
}
3443
&.destructive-action:not(:disabled) {
3445
@include ink-color($error);
3446
}
3447
}
3448
filechooser {
3450
.dialog-action-box {
3451
border-top: 1px solid $divider;
3452
}
3453
#pathbarbox {
3455
border-bottom: 1px solid $divider;
3456
background-color: $background;
3457
> stack > box > button { // The new folder button
3459
@extend %button-flat;
3460
border-radius: $circular-radius;
3462
}
3463
}
3464
}
3465
filechooserbutton:drop(active) {
3467
// box-shadow: none;
3468
}
3469
/***********
3472
* Sidebar *
3473
***********/
3474
.sidebar {
3475
border-style: none;
3476
background-color: $base-alt;
3477
&:not(separator) {
3479
@at-root %sidebar_left,
3480
&:dir(ltr),
3481
&.left,
3482
&.left:dir(rtl) {
3483
border-right: 1px solid $divider;
3484
border-left-style: none;
3485
}
3486
@at-root %sidebar_right,
3488
&:dir(rtl),
3489
&.right {
3490
border-left: 1px solid $divider;
3491
border-right-style: none;
3492
}
3493
}
3494
list {
3496
background-color: transparent;
3497
}
3498
paned & {
3500
&,
3501
&.left,
3502
&.right,
3503
&.left:dir(rtl),
3504
&:dir(rtl),
3505
&:dir(ltr) {
3506
border-style: none;
3507
}
3508
}
3509
}
3510
stacksidebar.sidebar {
3512
& {
3513
&:dir(ltr),
3514
&.left,
3515
&.left:dir(rtl) {
3516
list {
3517
@extend %sidebar_left;
3518
}
3519
}
3520
&:dir(rtl),
3522
&.right {
3523
list {
3524
@extend %sidebar_right;
3525
}
3526
}
3527
}
3528
+ separator.vertical,
3530
separator.horizontal {
3531
@extend %hide_separators;
3532
}
3533
list {
3535
padding: 4px;
3536
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3537
}
3538
row {
3540
min-height: 32px;
3541
padding: 0 8px - 6px;
3542
border-radius: $corner-radius;
3543
&:selected {
3545
font-weight: 500;
3546
@include ink-color($primary, $activated: true);
3547
}
3548
+ row {
3550
margin-top: 4px;
3551
}
3552
> label {
3554
padding-left: 6px;
3555
padding-right: 6px;
3556
}
3557
&.needs-attention > label {
3559
@extend %needs-attention;
3560
}
3561
}
3562
}
3563
separator.sidebar {
3565
background-color: $divider;
3566
&.selection-mode,
3568
.selection-mode & {
3569
// background-color: $divider;
3570
}
3571
}
3572
/****************
3575
* File chooser *
3576
****************/
3577
// dim the sidebar icons, see bug #786613 for details on this oddity
3578
row image.sidebar-icon {
3579
transition: color $duration $ease-out;
3580
color: $text2;
3581
&:disabled {
3583
color: $text2-disabled;
3584
}
3585
}
3586
placessidebar.sidebar {
3588
> viewport.frame {
3589
border-style: none;
3590
}
3591
list {
3593
padding: (4px - 3px) 0 4px;
3594
}
3595
row {
3597
// Needs overriding of the GtkListBoxRow padding
3598
min-height: 32px;
3599
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3600
padding: 0;
3601
border-radius: $corner-radius;
3602
// Using margins/padding directly in the SidebarRow
3604
// will make the animation of the new bookmark row jump
3605
> revealer {
3606
padding: 0 8px;
3607
}
3608
&:selected {
3610
font-weight: 500;
3611
@include ink-color($primary, $activated: true);
3612
image.sidebar-icon {
3614
color: $primary;
3615
}
3616
}
3617
&:disabled {
3619
color: $text-disabled;
3620
}
3621
image.sidebar-icon {
3623
&:dir(ltr) {
3624
padding-right: 8px;
3625
}
3626
&:dir(rtl) {
3628
padding-left: 8px;
3629
}
3630
}
3631
label.sidebar-label {
3633
&:dir(ltr) {
3634
padding-right: 2px;
3635
}
3636
&:dir(rtl) {
3638
padding-left: 2px;
3639
}
3640
}
3641
@at-root button.sidebar-button {
3643
@extend %button-flat-basic;
3644
@extend %button-small;
3645
}
3646
&.sidebar-placeholder-row {
3648
background-color: $overlay-hover;
3649
}
3650
&.sidebar-new-bookmark-row {
3652
color: $primary;
3653
image.sidebar-icon {
3655
color: $primary;
3656
}
3657
}
3658
}
3659
}
3660
placesview {
3662
.server-list-button {
3663
> image {
3664
-gtk-icon-transform: rotate(0turn);
3665
}
3666
&:checked > image {
3668
-gtk-icon-transform: rotate(-0.5turn);
3669
}
3670
}
3671
// this selects the "connect to server" label
3673
> actionbar > revealer > box > label {
3674
padding-left: 8px;
3675
padding-right: 8px;
3676
}
3677
}
3678
/*********
3681
* Paned *
3682
*********/
3683
paned {
3684
> separator {
3685
min-width: 1px;
3686
min-height: 1px;
3687
-gtk-icon-source: none; // defeats the ugly default handle decoration
3688
border-style: none; // just to be sure
3689
background-color: transparent;
3690
// workaround, using background istead of a border since the border will get rendered twice (?)
3691
background-image: image($divider);
3692
background-size: 1px 1px;
3693
background-clip: content-box; // avoids borders image being rendered twice (?)
3694
&.wide {
3696
min-width: 6px;
3697
min-height: 6px;
3698
background-color: $background;
3699
background-image: image($divider), image($divider);
3700
background-size: 1px 1px, 1px 1px;
3701
}
3702
}
3703
&.horizontal > separator {
3705
background-repeat: repeat-y;
3706
&:dir(ltr) {
3708
margin: 0 -8px 0 0;
3709
padding: 0 8px 0 0;
3710
background-position: left;
3711
}
3712
&:dir(rtl) {
3714
margin: 0 0 0 -8px;
3715
padding: 0 0 0 8px;
3716
background-position: right;
3717
}
3718
&.wide {
3720
margin: 0;
3721
padding: 0;
3722
background-repeat: repeat-y, repeat-y;
3723
background-position: left, right;
3724
}
3725
}
3726
&.vertical > separator {
3728
margin: 0 0 -8px 0;
3729
padding: 0 0 8px 0;
3730
background-repeat: repeat-x;
3731
background-position: top;
3732
&.wide {
3734
margin: 0;
3735
padding: 0;
3736
background-repeat: repeat-x, repeat-x;
3737
background-position: bottom, top;
3738
}
3739
}
3740
}
3741
/**************
3744
* GtkInfoBar *
3745
**************/
3746
infobar {
3747
border-style: none;
3748
&.info,
3750
&.question {
3751
border-bottom: 1px solid $divider;
3752
background-color: $base;
3753
button {
3755
@extend %button-flat;
3756
&.text-button:not(:disabled) {
3758
@include ink-color($primary);
3759
}
3760
}
3761
}
3762
&.warning {
3764
background-color: $warning;
3765
color: on($warning);
3766
button.flat {
3768
@include ink-color(on($warning));
3769
}
3770
selection {}
3772
*:link {
3774
color: on($warning);
3775
}
3776
}
3777
&.error {
3779
background-color: $error;
3780
color: on($error);
3781
button.flat {
3783
@include ink-color(on($error));
3784
}
3785
selection {}
3787
*:link {
3789
color: on($error);
3790
}
3791
}
3792
// Remove ugly hard-coded padding
3794
button label {
3795
margin: 0 -4px;
3796
}
3797
}
3798
/************
3801
* Tooltips *
3802
************/
3803
tooltip {
3804
&.background {
3805
// background-color needs to be set this way otherwise it gets drawn twice
3806
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3807
background-color: $tooltip;
3808
color: on($tooltip);
3809
}
3810
// padding: 4px; /* not working */
3812
border-radius: $corner-radius;
3813
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3814
&:not(.csd):not(.unity-csd) {
3816
// border: 1px solid $divider;
3817
// border-radius: $corner-radius + 1px;
3818
// background-clip: $background-clip-extra;
3819
}
3820
// FIXME: we need a border or tooltips vanish on black background.
3822
decoration {
3823
background-color: transparent;
3824
}
3825
> box {
3827
margin: -6px; // Remove hard-coded 6px margin
3828
min-height: 32px - 4px * 2;
3829
padding: 4px 8px;
3830
}
3831
.dim-label {
3833
color: on($tooltip, text2);
3834
}
3835
* {
3837
// workaround for Eclipse.
3838
// do not include any declaration here.
3839
}
3840
}
3841
/*****************
3844
* Color Chooser *
3845
*****************/
3846
colorswatch {
3847
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3848
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3849
// applied to the overlay box.
3850
// base color corners rounding
3852
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3853
// sports a bigger radius.
3854
// nth-child is needed by the custom color strip.
3855
&.top {
3857
border-top-left-radius: $corner-radius + 0.5px;
3858
border-top-right-radius: $corner-radius + 0.5px;
3859
overlay {
3861
border-top-left-radius: $corner-radius;
3862
border-top-right-radius: $corner-radius;
3863
}
3864
}
3865
&.bottom {
3867
border-bottom-left-radius: $corner-radius + 0.5px;
3868
border-bottom-right-radius: $corner-radius + 0.5px;
3869
overlay {
3871
border-bottom-left-radius: $corner-radius;
3872
border-bottom-right-radius: $corner-radius;
3873
}
3874
}
3875
&.left,
3877
&:first-child:not(.top) {
3878
border-top-left-radius: $corner-radius + 0.5px;
3879
border-bottom-left-radius: $corner-radius + 0.5px;
3880
overlay {
3882
border-top-left-radius: $corner-radius;
3883
border-bottom-left-radius: $corner-radius;
3884
}
3885
}
3886
&.right,
3888
&:last-child:not(.bottom) {
3889
border-top-right-radius: $corner-radius + 0.5px;
3890
border-bottom-right-radius: $corner-radius + 0.5px;
3891
overlay {
3893
border-top-right-radius: $corner-radius;
3894
border-bottom-right-radius: $corner-radius;
3895
}
3896
}
3897
&.dark {
3899
color: on(dark);
3900
}
3901
&.light {
3903
color: on(light);
3904
}
3905
overlay {
3907
transition: $transition-shadow;
3908
box-shadow: $shadow-z1;
3909
&:drop(active),
3911
&:hover {
3912
box-shadow: $shadow-z3;
3913
}
3914
}
3915
&#add-color-button {
3917
border-radius: $corner-radius $corner-radius 0 0;
3918
color: $text;
3919
&:only-child {
3921
border-radius: $corner-radius;
3922
}
3923
overlay {
3925
background-color: $surface;
3926
}
3927
}
3928
&:disabled {
3930
opacity: 0.5;
3931
overlay {
3933
box-shadow: none;
3934
}
3935
}
3936
row:selected & {
3938
}
3939
&#editor-color-sample {
3941
border-radius: $corner-radius + 0.5px;
3942
overlay {
3944
border-radius: $corner-radius;
3945
&:hover {
3947
// box-shadow: $shadow-z1;
3948
}
3949
}
3950
}
3951
}
3952
// colorscale popup
3954
colorchooser .popover.osd {
3955
transition: $transition-shadow;
3956
border-radius: $corner-radius;
3957
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3958
background-color: $surface;
3959
&:backdrop {
3961
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3962
}
3963
}
3964
/********
3967
* Misc *
3968
********/
3969
// content view (grid/list)
3970
.content-view {
3971
background-color: $background;
3972
&:hover {
3974
// -gtk-icon-effect: highlight;
3975
}
3976
rubberband,
3978
.rubberband {
3979
@extend rubberband;
3980
}
3981
}
3982
.scale-popup {
3984
.osd & {
3985
// @extend %osd;
3986
button.flat { // FIXME: quick hack, redo properly
3988
}
3989
}
3990
button { // +/- buttons on GtkVolumeButton popup
3992
}
3993
}
3994
/**********************
3997
* Window Decorations *
3998
**********************/
3999
decoration {
4000
transition: $transition-shadow;
4001
border-radius: $corner-radius $corner-radius 0 0;
4002
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4003
// FIXME rationalize shadows
4005
// this is used for the resize cursor area
4007
margin: 8px;
4008
&:backdrop {
4010
// the transparent shadow here is to enforce that the shadow extents don't
4011
// change when we go to backdrop, to prevent jumping windows.
4012
// The biggest shadow should be in the same order then in the active state
4013
// or the jumping will happen during the transition.
4014
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4015
}
4016
.maximized &,
4018
.fullscreen &,
4019
.tiled &,
4020
.tiled-top &,
4021
.tiled-right &,
4022
.tiled-bottom &,
4023
.tiled-left & {
4024
border-radius: 0;
4025
}
4026
.popup & {
4028
box-shadow: none;
4029
}
4030
// server-side decorations as used by mutter
4032
.ssd & {
4033
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4034
}
4035
.csd.popup & {
4037
border-radius: $corner-radius;
4038
box-shadow: $shadow-z4;
4039
}
4040
tooltip.csd & {
4042
border-radius: $corner-radius;
4043
box-shadow: none;
4044
}
4045
messagedialog.csd & {
4047
border-radius: $corner-radius;
4048
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4049
&:backdrop {
4051
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4052
}
4053
}
4054
.solid-csd & {
4056
margin: 0;
4057
padding: 2px;
4058
border-radius: 0;
4059
box-shadow: none;
4060
box-shadow: inset 0 1px highlight($titlebar);
4061
background-color: $titlebar;
4062
&:backdrop {
4064
background-color: $titlebar-backdrop;
4065
}
4066
}
4067
}
4068
// Window Close button
4070
button.titlebutton {
4071
border-radius: $circular-radius;
4072
.selection-mode & {
4074
}
4075
}
4076
// catch all extend :)
4079
%selected_items {
4081
background-color: $overlay-selected;
4082
}
4083
.monospace {
4085
font-family: monospace;
4086
}
4087
/**********************
4090
* Touch Copy & Paste *
4091
**********************/
4092
// touch selection handlebars for the Popover.osd above
4093
cursor-handle {
4094
color: $primary;
4095
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4096
&.top:dir(ltr),
4098
&.bottom:dir(rtl) {
4099
-gtk-icon-transform: rotate(90deg);
4100
}
4101
&.bottom:dir(ltr),
4103
&.top:dir(rtl) {
4104
-gtk-icon-transform: unset;
4105
}
4106
&.insertion-cursor:dir(ltr),
4108
&.insertion-cursor:dir(rtl) {
4109
padding-top: 6px;
4110
-gtk-icon-transform: rotate(45deg);
4111
}
4112
}
4113
// Decouple the font of context menus from their entry/textview
4115
.context-menu {
4116
font: initial;
4117
}
4118
// shortcut window keys
4120
.keycap {
4121
min-width: 28px - 8px * 2;
4122
min-height: 28px - 2px;
4123
margin-top: 2px;
4124
padding-bottom: 2px;
4125
padding-left: 8px;
4126
padding-right: 8px;
4127
border: solid 1px $divider;
4129
border-radius: $corner-radius + 1px;
4130
box-shadow: inset 0 -2px $divider;
4131
background-color: $surface;
4132
color: $text;
4133
font-size: smaller;
4134
}
4135
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4137
caret-color: $primary;
4138
}
4139
stackswitcher button.text-button { // FIXME aggregate with buttons
4141
min-width: 100px;
4142
}
4143
stackswitcher button.circular,
4145
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4146
min-width: $medium-size;
4147
min-height: $medium-size;
4148
padding: 0;
4149
}
4150
/*************
4153
* App Icons *
4154
*************/
4155
// Outline for low res icons
4156
.lowres-icon {
4157
// -gtk-icon-shadow: none;
4158
}
4159
// Drapshadow for large icons
4161
.icon-dropshadow {
4162
// -gtk-icon-shadow: none;
4163
}
4164
/*********
4167
* Emoji *
4168
*********/
4169
popover.emoji-picker {
4170
padding: 0;
4171
entry {
4173
border-bottom: 1px solid $divider;
4174
border-image: none;
4175
border-radius: 0;
4176
box-shadow: none;
4177
background-color: transparent;
4178
}
4179
scrolledwindow {
4181
border-bottom: 1px solid $divider;
4182
}
4183
}
4184
button.emoji-section {
4186
margin: 4px;
4187
&:checked {
4189
// background-color: transparent;
4190
@include ink-color($primary, $activated: true);
4191
}
4192
&:not(:last-child) {
4194
margin-right: 0;
4195
}
4196
}
4197
popover.emoji-picker .emoji {
4199
min-width: 3em;
4200
min-height: 3em;
4201
padding: 0 8px;
4202
// font-size: larger;
4203
widget {
4205
transition: $transition;
4206
border-radius: $corner-radius;
4207
&:hover {
4209
background-color: $overlay-hover;
4210
}
4211
}
4212
}
4213
popover.emoji-completion {
4215
padding: 8px 0;
4216
arrow {
4218
border: none;
4219
background: none;
4220
}
4221
.emoji-completion-row {
4223
min-height: $menuitem-size;
4224
padding: 0 12px;
4225
}
4226
.emoji:hover {
4228
background-color: $overlay-hover;
4229
}
4230
}
4231