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
/***************
39
* Base States *
40
***************/
41
.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, .08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: $text2; // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: on(dark);
127
text-shadow: $text-shadow;
128
}
129
.rubberband,
131
rubberband {
132
border: 1px solid on(dark, primary);
133
background-color: rgba(on(dark, primary), .3);
134
}
135
flowbox {
137
rubberband {
138
@extend rubberband;
139
}
140
flowboxchild {
142
padding: 4px;
143
border-radius: $corner-radius;
144
&:selected {
146
@extend %selected_items;
147
}
148
}
149
}
150
.content-view .tile {
152
// margin: 2px;
153
// padding: 0;
154
// border-radius: 0;
155
// background-color: black;
156
&:selected {
158
background-color: transparent;
159
}
160
}
161
label {
163
caret-color: $primary; // this shouldn't be needed.
164
&.separator {
166
color: $text2;
167
}
168
selection {
170
@extend %selected_items;
171
}
172
&:disabled {
174
color: $text-disabled;
175
headerbar &,
177
menuitem &,
178
tab &,
179
button & {
180
color: inherit;
181
}
182
}
183
&.osd {
185
border-radius: $corner-radius;
186
background-color: $tooltip;
187
color: on($tooltip);
188
}
189
}
190
.dim-label {
192
color: $text2;
193
}
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base;
199
}
200
.sidebar label {
202
min-height: $medium-size;
203
padding: 0 12px;
204
color: $text-disabled;
205
font-weight: 500;
206
&.highlight {
208
color: $text;
209
}
210
}
211
}
212
%osd,
214
.osd {
215
// opacity: .9;
216
}
217
/*********************
219
* Spinner Animation *
220
*********************/
221
@keyframes spin {
223
to {
224
-gtk-icon-transform: rotate(1turn);
225
}
226
}
227
spinner {
229
background: none;
230
opacity: 0; // non spinning spinner makes no sense
231
color: $primary;
232
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
233
transition: opacity $duration * 4 $ease-out;
234
animation: spin 1s linear infinite;
235
&:checked {
237
opacity: 1;
238
}
239
&:disabled {
241
color: $text2-disabled;
242
}
243
}
244
/****************
246
* Text Entries *
247
****************/
248
%entry,
250
entry {
251
min-height: $medium-size;
252
padding: 0 8px;
253
border-radius: $corner-radius $corner-radius 0 0;
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: 0 -8px -4px;
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
/***********
449
* Buttons *
450
***********/
451
// 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($primary, $surface, percentage($overlay-checked-opacity + .04));
498
color: $primary;
499
@include raised-ink-color($primary);
500
&:disabled {
502
box-shadow: inset 0 0 0 9999px $overlay-checked;
503
background-color: $fill;
504
color: $text-disabled;
505
}
506
}
507
&.text-button {
509
min-width: 64px - 16px * 2;
510
padding-left: 16px;
511
padding-right: 16px;
512
}
513
&.image-button {
515
min-width: 24px;
516
padding: ($medium-size - 24px) / 2;
517
border-radius: $circular-radius;
518
}
519
// NOTE: Some image-only buttons use this as well
521
&.text-button.image-button {
522
min-width: 24px;
523
padding: ($medium-size - 24px) / 2;
524
border-radius: $corner-radius;
525
label {
527
&:first-child {
528
margin-left: 16px - ($medium-size - 24px) / 2;
529
}
530
&:last-child {
532
margin-right: 16px - ($medium-size - 24px) / 2;
533
}
534
}
535
image:not(:only-child) {
537
margin: 0 (24px - 16px) / 2;
538
}
539
}
540
.linked:not(.vertical) > & {
542
@extend %linked;
543
&.image-button:not(.text-button) {
545
@extend %linked-image-button;
546
}
547
}
548
.linked.vertical > & {
550
@extend %linked-vertical;
551
&.image-button:not(.text-button) {
553
@extend %linked-vertical-image-button;
554
}
555
}
556
}
557
%button-flat-basic {
559
background-color: transparent;
560
@include ink-color($text2);
561
&:disabled {
563
background-color: transparent;
564
color: $text2-disabled;
565
}
566
}
567
%button-flat-activatable {
569
@extend %button-flat-basic;
570
&:checked {
572
background-color: $overlay-checked;
573
color: $text;
574
@include ink-color($text);
575
&:disabled {
577
color: $text-disabled;
578
}
579
}
580
}
581
%button-flat,
583
button.flat {
584
@extend %button-flat-activatable;
585
&.text-button {
587
min-width: 64px - 8px * 2;
588
padding-left: 8px;
589
padding-right: 8px;
590
}
591
&.text-button.image-button {
593
min-width: 24px;
594
padding: ($medium-size - 24px) / 2;
595
label {
597
&:first-child {
598
margin-left: 12px - ($medium-size - 24px) / 2;
599
}
600
&:last-child {
602
margin-right: 12px - ($medium-size - 24px) / 2;
603
}
604
}
605
}
606
.linked:not(.vertical) > &,
608
.linked.vertical > & {
609
&:not(:only-child) { // specificity bump
610
border-radius: $corner-radius;
611
&.image-button:not(.text-button) {
613
border-radius: $circular-radius;
614
}
615
}
616
}
617
}
618
button {
620
// big standalone buttons like in Documents pager
621
&.osd {
622
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
623
&.image-button {
625
padding: ($large-size - 24px) / 2;
626
}
627
&:disabled {
629
opacity: 0;
630
}
631
}
632
// overlay / OSD style
634
@at-root %osd_button,
635
.osd & {
636
}
637
// Suggested and Destructive Action buttons
639
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
640
&#{$class} {
641
background-color: $color;
642
color: on($color);
643
@include raised-ink-color(on($color));
644
&:disabled {
646
box-shadow: none;
647
background-color: $fill;
648
color: $text-disabled;
649
}
650
&:checked {
652
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
653
}
654
&.flat {
656
background-color: transparent;
657
@include ink-color($color);
658
&:disabled {
660
box-shadow: none;
661
background-color: transparent;
662
color: $text2-disabled;
663
}
664
&:checked {
666
background-color: rgba($color, $overlay-checked-opacity);
667
}
668
}
669
.osd & {
671
}
672
}
673
}
674
.stack-switcher > & {
676
// to position the needs attention dot, padding is added to the button
677
// child, a label needs just lateral padding while an icon needs vertical
678
// padding added too.
679
> label {
681
margin: 0 -6px;
682
padding: 0 6px;
683
}
684
> image {
686
margin: -3px -6px;
687
padding: 3px 6px;
688
}
689
&.needs-attention {
691
> label,
692
> image {
693
@extend %needs-attention;
694
}
695
&:checked {
697
> label,
698
> image {
699
animation: none;
700
background-image: none;
701
}
702
}
703
}
704
}
705
// hide separators
707
&.font,
708
&.file {
709
separator {
710
@extend %hide_separators;
711
}
712
}
713
&.font {
715
> box > box > label {
716
// font-weight: bold;
717
}
718
}
719
// inline-toolbar buttons
721
.inline-toolbar & {
722
// @extend %button-flat;
723
&:not(.text-button) {
725
border-radius: $circular-radius;
726
}
727
}
728
.primary-toolbar & {
730
-gtk-icon-shadow: none; // tango icons don't need shadows
731
}
732
&.close,
734
&.circular { // The Bloody Circul Button
735
border-radius: $circular-radius;
736
label {
738
// padding: 0;
739
}
740
}
741
}
742
%button-small {
744
min-height: $small-size;
745
min-width: $small-size;
746
padding: 0;
747
border-radius: $circular-radius;
748
}
749
%needs-attention {
751
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
752
background-repeat: no-repeat;
753
background-position: right 3px;
754
background-size: 6px 6px;
755
&:dir(rtl) {
757
background-position: left 3px;
758
}
759
}
760
// all the following is for the +|- buttons on inline toolbars, that way
762
// should really be deprecated...
763
.inline-toolbar toolbutton > button {
764
}
765
// More inline toolbar buttons
767
toolbar.inline-toolbar toolbutton {
768
&:not(:first-child) > button.flat {
769
// @extend %linked-not-first-child;
770
}
771
&:not(:last-child) > button.flat {
773
// @extend %linked-not-last-child;
774
}
775
}
776
%linked-not-first-child {
778
border-top-left-radius: 0;
779
border-bottom-left-radius: 0;
780
}
781
%linked-not-last-child {
783
border-top-right-radius: 0;
784
border-bottom-right-radius: 0;
785
}
786
%linked {
788
&:not(:first-child) {
789
@extend %linked-not-first-child;
790
}
791
&:not(:last-child) {
793
@extend %linked-not-last-child;
794
}
795
}
796
%linked-vertical-not-first-child {
798
border-top-left-radius: 0;
799
border-top-right-radius: 0;
800
}
801
%linked-vertical-not-last-child {
803
border-bottom-left-radius: 0;
804
border-bottom-right-radius: 0;
805
}
806
%linked-vertical {
808
&:not(:first-child) {
809
@extend %linked-vertical-not-first-child;
810
}
811
&:not(:last-child) {
813
@extend %linked-vertical-not-last-child;
814
}
815
}
816
%linked-image-button {
818
&:first-child {
819
border-top-left-radius: $corner-radius;
820
border-bottom-left-radius: $corner-radius;
821
}
822
&:last-child {
824
border-top-right-radius: $corner-radius;
825
border-bottom-right-radius: $corner-radius;
826
}
827
&:only-child {
829
border-radius: $circular-radius;
830
}
831
}
832
%linked-vertical-image-button {
834
&:first-child {
835
border-top-left-radius: $corner-radius;
836
border-top-right-radius: $corner-radius;
837
}
838
&:last-child {
840
border-bottom-left-radius: $corner-radius;
841
border-bottom-right-radius: $corner-radius;
842
}
843
&:only-child {
845
border-radius: $circular-radius;
846
}
847
}
848
/* menu buttons */
850
modelbutton.flat,
851
.menuitem.button.flat {
852
min-height: $menuitem-size;
853
padding: 0 8px;
854
border-radius: $corner-radius;
855
@extend %ripple;
857
@include ink-color($text, $fg: false);
858
&:selected {
860
@extend %selected_items;
861
}
862
}
863
modelbutton.flat arrow {
865
&.left {
866
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
867
}
868
&.right {
870
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
871
}
872
}
873
button.color {
875
min-height: $small-size;
876
min-width: $small-size;
877
padding: $container-padding;
878
colorswatch:only-child {
880
&,
881
overlay {
882
// border-radius: 0;
883
}
884
}
885
}
886
/*********
888
* Links *
889
*********/
890
*:link {
892
color: $primary;
893
}
894
*:visited {
896
color: $visited;
897
}
898
button.link {
900
&:link {
901
@include ink-color($primary);
902
}
903
&:visited {
905
@include ink-color($visited);
906
}
907
> label {
909
text-decoration-line: underline;
910
}
911
}
912
/*****************
914
* GtkSpinButton *
915
*****************/
916
spinbutton {
918
&:not(.vertical) {
919
// in this horizontal configuration, the whole spinbutton
920
// behaves as the entry, so we extend the entry styling
921
// and nuke the style on the internal entry
922
@extend %entry;
923
padding: 0;
925
entry {
927
min-width: $large-size - 8px * 2;
928
// reset all the other props since the spinbutton node is styled here
929
margin: 0;
930
border-image: none;
931
border-radius: 0;
932
box-shadow: none;
933
background-color: transparent;
934
}
935
button {
937
@extend %button-flat-basic;
938
@extend %button-small;
939
// margin: $container-padding;
941
border: solid $container-padding transparent;
942
// Remove unwanted focus indicator
944
&:focus:not(:hover):not(:active) {
945
box-shadow: inset 0 0 0 9999px transparent;
946
}
947
&.up:dir(ltr),
949
&.down:dir(rtl) {
950
margin-left: -$container-padding / 2;
951
}
952
&.up:dir(rtl),
954
&.down:dir(ltr) {
955
margin-right: -$container-padding / 2;
956
}
957
}
958
}
959
// OSD horizontal
961
.osd &:not(.vertical) {
962
}
963
// Vertical
965
&.vertical {
966
// in the vertical configuration, we treat the spinbutton
967
// as a box, and tweak the style of the entry in the middle
968
// so that it's linked
969
// FIXME: this should not be set at all, but otherwise it gets the wrong
971
// color
972
caret-color: $primary;
973
// FIXME: this should not be set at all, but otherwise it gets the wrong
975
// color
976
&:disabled {
977
color: $text-disabled;
978
}
979
entry {
981
@extend %entry_raised;
982
min-height: $medium-size;
984
min-width: $large-size;
985
padding: 0;
986
}
987
button {
989
min-height: $medium-size;
990
min-width: $large-size;
991
padding: 0;
992
@extend %button-flat-basic;
994
// Remove unwanted focus indicator
996
&:focus:not(:hover):not(:active) {
997
box-shadow: inset 0 0 0 9999px transparent;
998
}
999
&.up {
1001
border-radius: $corner-radius $corner-radius 0 0;
1002
}
1003
&.down {
1005
border-radius: 0 0 $corner-radius $corner-radius;
1006
}
1007
}
1008
}
1009
// OSD vertical
1011
.osd &.vertical {
1012
}
1013
// Misc
1015
treeview &:not(.vertical) {
1016
min-height: 0;
1017
border-style: none;
1018
border-radius: 0;
1019
entry {
1021
min-height: 0;
1022
padding: 1px 2px;
1023
}
1024
}
1025
}
1026
/**************
1028
* ComboBoxes *
1029
**************/
1030
combobox {
1032
arrow {
1033
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1034
min-height: 16px;
1035
min-width: 16px;
1036
}
1037
// workaround for menuitem selection
1039
decoration {
1040
transition: none;
1041
}
1042
button.combo cellview {
1044
&:dir(ltr) {
1045
margin-left: 8px - ($medium-size - 16px) / 2;
1046
}
1047
&:dir(rtl) {
1049
margin-right: 8px - ($medium-size - 16px) / 2;
1050
}
1051
}
1052
menu {
1054
padding: 2px 0;
1055
menuitem {
1057
min-height: $medium-size - 2px * 2;
1058
padding: 0 8px;
1059
}
1060
// overflow arrows
1062
> arrow {
1063
&.top {
1064
margin-top: -2px;
1065
}
1066
&.bottom {
1068
margin-top: 2px * 2;
1069
margin-bottom: -2px * 3;
1070
}
1071
}
1072
}
1073
&.linked {
1075
button:nth-child(2) {
1076
&:dir(ltr) {
1077
@extend %linked-not-first-child;
1078
}
1079
&:dir(rtl) {
1081
@extend %linked-not-last-child;
1082
}
1083
}
1084
}
1085
> .linked:not(.vertical) > entry:not(:only-child) {
1087
border-radius: $corner-radius $corner-radius 0 0;
1088
&:first-child {
1090
margin-right: -$medium-size;
1091
padding-right: $medium-size;
1092
}
1093
&:last-child {
1095
margin-left: -$medium-size;
1096
padding-left: $medium-size;
1097
}
1098
}
1099
> .linked:not(.vertical) > button:not(:only-child) {
1101
@extend %button-flat-activatable;
1102
// @extend %button-small;
1103
min-height: 16px;
1105
min-width: 16px;
1106
margin: ($medium-size - $small-size) / 2;
1107
padding: ($small-size - 16px) / 2;
1108
border-radius: $circular-radius;
1109
}
1110
}
1111
// the combo is a composite widget so the way we do button linking doesn't
1113
// work, special case needed. See
1114
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1115
.linked:not(.vertical) > combobox {
1117
&:not(:first-child) > box > button.combo {
1118
@extend %linked-not-first-child;
1119
}
1120
&:not(:last-child) > box > button.combo {
1122
@extend %linked-not-last-child;
1123
}
1124
}
1125
.linked.vertical > combobox {
1127
&:not(:first-child) > box > button.combo {
1128
@extend %linked-vertical-not-first-child;
1129
}
1130
&:not(:last-child) > box > button.combo {
1132
@extend %linked-vertical-not-last-child;
1133
}
1134
}
1135
button.combo:only-child {
1137
border-radius: $corner-radius $corner-radius 0 0;
1138
font-weight: normal;
1139
@include entry(normal);
1141
&:focus {
1143
@include entry(focus);
1144
}
1145
&:drop(active),
1147
&:hover {
1148
@include entry(hover);
1149
}
1150
&:checked {
1152
@include entry(checked);
1153
}
1154
&:disabled {
1156
@include entry(disabled);
1157
}
1158
}
1159
/************
1161
* Toolbars *
1162
************/
1163
toolbar {
1165
-GtkWidget-window-dragging: true;
1166
padding: 2px;
1167
background-color: $background;
1168
button {
1170
@extend %button-flat;
1171
}
1172
// on OSD
1174
.osd & {
1175
background-color: transparent;
1176
}
1177
// stand-alone OSD toolbars
1179
&.osd {
1180
@extend %toolbar-osd;
1181
// positional classes for `attached` osd toolbars
1183
&.left,
1184
&.right,
1185
&.top,
1186
&.bottom {
1187
border-radius: 0;
1188
}
1189
&.bottom {
1191
box-shadow: none;
1192
background-color: transparent;
1193
background-image:
1194
linear-gradient(
1195
to bottom,
1196
transparent,
1197
rgba(black, .1) 30%,
1198
rgba(black, .2) 50%,
1199
rgba(black, .4)
1200
);
1201
}
1202
}
1203
// toolbar separators
1205
&.horizontal > separator {
1206
margin: 2px;
1207
}
1208
&.vertical > separator {
1210
margin: 2px;
1211
}
1212
&:not(.inline-toolbar):not(.osd) {
1214
scale,
1215
entry,
1216
spinbutton,
1217
button {
1218
margin: 2px;
1219
}
1220
.linked entry,
1222
.linked spinbutton,
1223
.linked button {
1224
&:not(:first-child) {
1225
margin-left: 0;
1226
}
1227
&:not(:last-child) {
1229
margin-right: 0;
1230
}
1231
}
1232
spinbutton {
1234
entry,
1235
button {
1236
margin: 0;
1237
}
1238
}
1239
switch {
1241
margin: 2px + $container-padding 2px;
1242
}
1243
}
1244
}
1245
%toolbar-osd {
1247
transition: $transition-shadow;
1248
padding: $container-padding;
1249
border-radius: $corner-radius;
1250
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1251
background-color: $surface;
1252
&:backdrop {
1254
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1255
}
1256
}
1257
// searchbar, location-bar & inline-toolbar
1259
.inline-toolbar {
1260
padding: $container-padding;
1261
border-style: solid;
1262
border-width: 0 1px 1px;
1263
border-color: $divider;
1264
background-color: $base-alt;
1265
}
1266
searchbar > revealer > box,
1268
.location-bar {
1269
padding: $container-padding;
1270
border-style: solid;
1271
border-width: 0 0 1px;
1272
border-color: $divider;
1273
background-color: $background;
1274
background-clip: border-box;
1275
}
1276
searchbar > revealer > box {
1278
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1279
margin: -6px;
1280
padding: $container-padding;
1281
}
1282
/***************
1284
* Header bars *
1285
***************/
1286
.titlebar {
1288
transition: background-color $duration $ease-out, color $duration $ease-out;
1289
border-radius: $corner-radius $corner-radius 0 0;
1290
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1291
background-color: $titlebar;
1292
color: $titlebar-text;
1293
&:disabled {
1295
color: $titlebar-text-disabled;
1296
}
1297
&:backdrop {
1299
background-color: $titlebar-backdrop;
1300
color: $titlebar-text2;
1301
&:disabled {
1303
color: $titlebar-text2-disabled;
1304
}
1305
}
1306
.title {
1308
padding-left: 12px;
1309
padding-right: 12px;
1310
font-weight: bold;
1311
}
1312
.subtitle {
1314
padding-left: 12px;
1315
padding-right: 12px;
1316
font-size: smaller;
1317
}
1318
.subtitle,
1320
.dim-label {
1321
transition: color $duration $ease-out;
1322
color: $titlebar-text2;
1323
&:backdrop {
1325
color: $titlebar-text-disabled;
1326
}
1327
}
1328
// Don't draw titlebar above titlebar
1330
.titlebar {
1331
background-color: transparent;
1332
box-shadow: none;
1333
}
1334
// The separator for split headerbars
1336
headerbar + separator {
1337
background-color: $titlebar-divider;
1338
}
1339
entry {
1341
box-shadow: inset 0 -1px $titlebar-stroke;
1342
background-color: $titlebar-entry-fill;
1343
color: $titlebar-text;
1344
&:disabled {
1346
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1347
background-color: $titlebar-entry-fill;
1348
color: $titlebar-text-disabled;
1349
}
1350
image {
1352
color: $titlebar-text2;
1353
&:hover,
1355
&:active {
1356
color: $titlebar-text;
1357
}
1358
&:disabled {
1360
color: $titlebar-text-disabled;
1361
}
1362
}
1363
}
1364
.linked:not(.vertical) > entry:not(:only-child) {
1366
border-radius: $corner-radius $corner-radius 0 0;
1367
}
1368
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1370
@extend %button-flat;
1371
border-image:
1373
radial-gradient(
1374
circle closest-corner at center calc(100% - 1px),
1375
$titlebar-indicator 0%,
1376
transparent 0%
1377
) 0 0 0 / 0 0 0;
1378
@include ink-color($titlebar-text2);
1380
&:disabled {
1382
color: $titlebar-text2-disabled;
1383
}
1384
@at-root %titlebar-button-checked,
1386
&:checked {
1387
border-image:
1388
radial-gradient(
1389
circle closest-corner at center calc(100% - 1px),
1390
$titlebar-indicator 100%,
1391
transparent 0%
1392
) 0 0 2 / 0 0 2px;
1393
background-color: transparent;
1394
color: $titlebar-text;
1395
@include ink-color($titlebar-text);
1396
&:disabled {
1398
background-color: transparent;
1399
color: $titlebar-text-disabled;
1400
}
1401
}
1402
&:backdrop {
1404
color: $titlebar-text-disabled;
1405
&:disabled {
1407
color: $titlebar-text2-disabled;
1408
}
1409
&:checked {
1411
color: $titlebar-text2;
1412
&:disabled {
1414
color: $titlebar-text2-disabled;
1415
}
1416
}
1417
}
1418
}
1419
button.suggested-action, button.destructive-action {
1421
&:disabled {
1422
background-color: $titlebar-fill;
1423
color: $titlebar-text-disabled;
1424
}
1425
}
1426
// FIXME: Ugly overriding
1428
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1429
min-width: 120px - 8px * 2;
1430
}
1431
// FIXME: Ugly overriding
1433
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1434
min-width: 0;
1435
padding-left: ($medium-size - 24px) / 2;
1436
padding-right: ($medium-size - 24px) / 2;
1437
}
1438
&.selection-mode {
1440
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1441
// but let's keep it for backwards compatibility.
1442
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1443
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1444
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1445
background-color: $primary;
1446
color: on($primary);
1447
&:backdrop {
1449
color: on($primary, text2);
1450
}
1451
.subtitle:link {
1453
color: on($primary);
1454
}
1455
button:not(.suggested-action):not(.destructive-action) {
1457
border-image:
1458
radial-gradient(
1459
circle closest-corner at center calc(100% - 1px),
1460
currentcolor 0%,
1461
transparent 0%
1462
) 0 0 0 / 0 0 0;
1463
color: on($primary);
1464
&:disabled {
1466
color: on($primary, text-disabled);
1467
}
1468
&:checked {
1470
border-image:
1471
radial-gradient(
1472
circle closest-corner at center calc(100% - 1px),
1473
currentcolor 100%,
1474
transparent 0%
1475
) 0 0 2 / 0 0 2px;
1476
color: on($primary);
1477
&:disabled {
1479
color: on($primary, text-disabled);
1480
}
1481
}
1482
&:backdrop {
1484
color: on($primary, text2);
1485
&:disabled {
1487
color: on($primary, text2-disabled);
1488
}
1489
&:checked {
1491
color: on($primary, text2);
1492
&:disabled {
1494
color: on($primary, text2-disabled);
1495
}
1496
}
1497
}
1498
}
1499
.selection-menu {
1501
padding-left: 16px;
1502
padding-right: 16px;
1503
arrow {
1505
-GtkArrow-arrow-scaling: 1;
1506
}
1507
.arrow {
1509
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1510
}
1511
}
1512
}
1513
.selection-mode {
1515
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1516
background-color: $primary;
1517
}
1518
// squared corners when the window is maximized, tiled, or fullscreen
1520
.tiled &,
1521
.tiled-top &,
1522
.tiled-right &,
1523
.tiled-bottom &,
1524
.tiled-left &,
1525
.maximized &,
1526
.fullscreen & {
1527
border-radius: 0;
1528
box-shadow: $shadow-z1;
1529
}
1530
&.default-decoration {
1532
min-height: $small-size;
1533
padding: $container-padding;
1534
box-shadow: inset 0 1px highlight($titlebar);
1535
.tiled &,
1537
.maximized &,
1538
.fullscreen & {
1539
box-shadow: none;
1540
}
1541
button.titlebutton {
1543
min-height: $small-size;
1544
min-width: $small-size;
1545
margin: 0;
1546
padding: 0;
1547
}
1548
// workaround for non-animatable buttons
1550
.background:not(.csd) & button.titlebutton:active {
1551
background-size: 1000% 1000%;
1552
}
1553
}
1554
.solid-csd & {
1556
&:dir(rtl), &:dir(ltr) { // specificity bump
1557
border-radius: 0;
1558
box-shadow: $shadow-z1; // just remove the highlight
1559
}
1560
}
1561
}
1562
headerbar {
1564
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1565
min-height: $large-size;
1566
padding: 0 $container-padding;
1567
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1569
entry,
1570
spinbutton,
1571
button {
1572
margin-top: $container-padding;
1573
margin-bottom: $container-padding;
1574
}
1575
separator.titlebutton {
1577
margin-top: $large-size / 4;
1578
margin-bottom: $large-size / 4;
1579
background-color: $titlebar-divider;
1580
}
1581
switch {
1583
margin-top: ($large-size - 24px) / 2;
1584
margin-bottom: ($large-size - 24px) / 2;
1585
}
1586
// reset button margins of the spinbutton
1588
spinbutton button {
1589
margin-top: 0;
1590
margin-bottom: 0;
1591
}
1592
// FIXME: This is a hacky workaround.
1594
.entry-tag {
1595
margin-top: 5px;
1596
margin-bottom: 5px;
1597
}
1598
}
1599
// Development versions of apps to use a differently styled headerbar
1601
window.devel .titlebar:not(.selection-mode) {
1602
}
1603
/************
1605
* Pathbars *
1606
************/
1607
%pathbar_button,
1609
.path-bar.linked:not(.vertical) > button {
1610
@extend %button-flat-basic;
1611
padding-left: ($medium-size - 24px) / 2;
1613
padding-right: ($medium-size - 24px) / 2;
1614
border-image:
1615
radial-gradient(
1616
circle closest-corner at center calc(100% - 1px),
1617
$primary 0%,
1618
transparent 0%
1619
) 0 0 0 / 0 0 0;
1620
border-radius: $corner-radius;
1621
&:checked {
1623
border-image:
1624
radial-gradient(
1625
circle closest-corner at center calc(100% - 1px),
1626
$primary 100%,
1627
transparent 0%
1628
) 0 0 2 / 0 0 2px;
1629
color: $text;
1630
&,
1632
&:disabled {
1633
background-color: transparent;
1634
}
1635
}
1636
label:not(:only-child) {
1638
&:first-child {
1639
margin-left: 0;
1640
}
1641
&:last-child {
1643
margin-right: 0;
1644
}
1645
}
1646
&.text-button {
1648
min-width: 0;
1649
}
1650
&.slider-button {
1652
padding-left: (24px - 16px) / 2;
1653
padding-right: (24px - 16px) / 2;
1654
}
1655
}
1656
/**************
1658
* Tree Views *
1659
**************/
1660
treeview.view {
1662
@at-root * {
1663
-GtkTreeView-horizontal-separator: 4;
1664
-GtkTreeView-grid-line-width: 1;
1665
-GtkTreeView-grid-line-pattern: '';
1666
-GtkTreeView-tree-line-width: 1;
1667
-GtkTreeView-tree-line-pattern: '';
1668
-GtkTreeView-expander-size: 16;
1669
}
1670
border-left-color: $stroke; // this is actually the tree lines color,
1672
border-top-color: $divider; // while this is the grid lines color, better then nothing
1673
// FIXME: Avoid transparency background-color being slightly darker
1675
&:selected {
1676
background-color: $base;
1677
background-image: image($overlay-selected);
1678
}
1679
// to avoid borders being overridden by the previously set props
1681
rubberband {
1682
@extend rubberband;
1683
}
1684
&:hover,
1686
&:selected {
1687
border-radius: 0;
1688
}
1689
&.separator {
1691
min-height: 1px + 2px * 2;
1692
color: $divider;
1693
}
1694
&:drop(active) {
1696
// FIXME: box-shadow, background-color and background-image are not available here.
1697
border-style: solid none;
1698
border-width: 9999px;
1699
border-color: $overlay-hover;
1700
&.after {
1702
border-top-style: none;
1703
}
1704
&.before {
1706
border-bottom-style: none;
1707
}
1708
}
1709
&.expander {
1711
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1712
-gtk-icon-transform: rotate(-90deg);
1713
&:dir(rtl) {
1715
-gtk-icon-transform: rotate(90deg);
1716
}
1717
&:checked {
1719
-gtk-icon-transform: unset;
1720
}
1721
color: $text2;
1723
&:hover,
1725
&:active {
1726
color: $text;
1727
}
1728
&:disabled {
1730
color: $text2-disabled;
1731
}
1732
}
1733
&.progressbar { // progress bar in treeviews
1735
border-bottom: $bar-size solid $primary;
1736
box-shadow: none;
1737
background-color: transparent;
1738
background-image: none;
1739
&:selected:hover {
1741
box-shadow: none;
1742
}
1743
}
1744
&.trough { // progress bar trough in treeviews
1746
border-bottom: $bar-size solid $stroke-disabled;
1747
box-shadow: none;
1748
background-color: transparent;
1749
background-image: none;
1750
&:selected:hover {
1752
box-shadow: none;
1753
}
1754
}
1755
header {
1757
button {
1758
padding: 2px 6px;
1759
border-style: none solid solid none;
1760
border-width: 1px;
1761
border-color: $divider;
1762
border-radius: 0;
1763
background-clip: border-box;
1764
color: $text2;
1765
@include ink-color($text2);
1766
@include list-item;
1767
&:disabled {
1769
color: $text2-disabled;
1770
}
1771
&,
1773
&:disabled {
1774
background-color: $base;
1775
}
1776
&:last-child {
1778
border-right-style: none;
1779
}
1780
}
1781
}
1782
button.dnd,
1784
header.button.dnd { // for treeview-like derive widgets
1785
padding: 2px 6px;
1786
border-style: none solid solid;
1787
border-width: 1px;
1788
border-color: $divider;
1789
border-radius: 0;
1790
box-shadow: none;
1791
background-color: $base;
1792
background-clip: border-box;
1793
color: $primary;
1794
}
1795
// see tests/testaccel to test
1797
acceleditor > label {
1798
background-color: $primary;
1799
}
1800
}
1801
/*********
1803
* Menus *
1804
*********/
1805
menubar,
1807
.menubar {
1808
-GtkWidget-window-dragging: true;
1809
padding: 0;
1810
// box-shadow: inset 0 -1px $divider;
1811
background-color: $titlebar;
1812
color: $titlebar-text;
1813
&:backdrop {
1815
background-color: $titlebar-backdrop;
1816
color: $titlebar-text2;
1817
}
1818
.csd & {
1820
transition: $transition;
1821
}
1822
> menuitem {
1824
transition: $transition;
1825
min-height: 20px;
1826
padding: 4px 8px;
1827
color: $titlebar-text2;
1828
&:hover { // Seems like it :hover even with keyboard focus
1830
transition: none;
1831
background-color: $overlay-checked;
1832
color: $titlebar-text;
1833
}
1834
&:disabled {
1836
color: $titlebar-text2-disabled;
1837
}
1838
}
1839
}
1840
// Needed to make the border-radius of menus work
1842
// otherwise the background bleeds out of the menu edges
1843
.background.popup {
1844
background-color: transparent;
1845
}
1846
menu,
1848
.menu,
1849
.context-menu {
1850
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1851
padding: 4px 0;
1852
box-shadow: inset 0 1px highlight($surface);
1853
background-color: $surface;
1854
background-clip: border-box;
1855
border: 1px solid $divider; // adds borders in a non composited env
1856
.csd & {
1858
border: none; // axes borders in a composited env
1859
border-radius: $corner-radius;
1860
}
1861
menuitem {
1863
transition: background-color $duration $ease-out;
1864
min-height: 20px;
1865
min-width: 40px;
1866
padding: 4px 8px;
1867
color: $text;
1868
font: initial;
1869
text-shadow: none;
1870
&:hover {
1872
transition: none;
1873
background-color: $overlay-hover;
1874
}
1875
&:disabled {
1877
color: $text-disabled;
1878
}
1879
// submenu indicators
1881
arrow {
1882
min-height: 16px;
1883
min-width: 16px;
1884
color: $text2;
1885
&:disabled {
1887
color: $text2-disabled;
1888
}
1889
&:dir(ltr) {
1891
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1892
margin-left: 8px;
1893
}
1894
&:dir(rtl) {
1896
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1897
margin-right: 8px;
1898
}
1899
}
1900
// avoids labels color being overridden, see
1902
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1903
label {
1904
&:dir(rtl),
1905
&:dir(ltr) {
1906
// color: inherit;
1907
}
1908
}
1909
}
1910
// overflow arrows
1912
> arrow {
1913
min-height: 16px;
1914
min-width: 16px;
1915
padding: 4px;
1916
background-color: $surface;
1917
color: $text2;
1918
&.top {
1920
margin-top: -4px;
1921
border-bottom: 1px solid $divider;
1922
border-radius: $corner-radius $corner-radius 0 0;
1923
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1924
}
1925
&.bottom {
1927
margin-top: 4px * 2;
1928
margin-bottom: -4px * 3;
1929
border-top: 1px solid $divider;
1930
border-radius: 0 0 $corner-radius $corner-radius;
1931
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1932
}
1933
&:hover {
1935
background-image: image($overlay-hover);
1936
}
1937
&:disabled {
1939
border-color: transparent;
1940
background-color: transparent;
1941
color: transparent;
1942
// color: $text2-disabled;
1943
}
1944
}
1945
separator {
1947
margin: 4px 0;
1948
}
1949
}
1950
menuitem {
1952
accelerator {
1953
color: $text2;
1954
}
1955
&:disabled accelerator {
1957
color: $text2-disabled;
1958
}
1959
}
1960
/************
1962
* Popovers *
1963
************/
1964
popover.background {
1966
transition: $transition-shadow;
1967
padding: 2px;
1968
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1969
background-color: $surface;
1970
&:backdrop {
1972
box-shadow: $shadow-z2;
1973
}
1974
&, .csd & {
1976
border-style: solid;
1977
border-width: 1px;
1978
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
1979
border-radius: $corner-radius + 1px;
1980
}
1981
> stack {
1983
margin: -4px; // remove extra padding from menu style popovers
1984
}
1985
> toolbar {
1987
margin: -2px;
1988
}
1989
> list,
1991
> .view,
1992
> toolbar {
1993
border-style: none;
1994
box-shadow: none;
1995
background-color: transparent;
1996
}
1997
// FIXME: Use the popover color instead of transparent as a workaround for .view
1999
list,
2000
.view:not(:selected),
2001
toolbar {
2002
background-color: $surface;
2003
}
2004
&.touch-selection,
2006
&.magnifier,
2007
&.osd {
2008
// @extend %osd;
2009
}
2010
button:not(.suggested-action):not(.destructive-action) {
2012
// @extend %button-flat;
2013
}
2014
.linked:not(.vertical) > entry:not(:only-child) {
2016
// border-radius: $corner-radius $corner-radius 0 0;
2017
}
2018
&.menu button,
2020
button.model {
2021
@extend %button-flat;
2022
min-height: 32px;
2024
padding: 0 8px;
2025
border-radius: $corner-radius;
2026
&:checked {
2028
// color: $primary;
2029
}
2030
}
2031
separator {
2033
margin: 4px 0;
2034
}
2035
list separator {
2037
margin: 0;
2038
}
2039
}
2040
/*************
2042
* Notebooks *
2043
*************/
2044
notebook {
2046
frame > paned > & > header,
2047
&.frame > header {
2048
background-color: $base-alt;
2049
}
2050
&:focus tab:checked {
2052
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2053
}
2054
> header {
2056
border-width: 1px;
2057
border-color: $divider;
2058
background-color: $background;
2059
background-clip: border-box;
2060
&.top {
2062
border-bottom-style: solid;
2063
> tabs {
2065
margin-bottom: -1px;
2066
> tab {
2068
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2069
&:checked {
2071
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2072
}
2073
&.reorderable-page {
2075
border-image-width: 0 1px 2px;
2076
}
2077
}
2078
}
2079
}
2080
&.bottom {
2082
border-top-style: solid;
2083
> tabs {
2085
margin-top: -1px;
2086
> tab {
2088
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2089
&:checked {
2091
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2092
}
2093
&.reorderable-page {
2095
border-image-width: 2px 1px 0;
2096
}
2097
}
2098
}
2099
}
2100
&.left {
2102
border-right-style: solid;
2103
> tabs {
2105
margin-right: -1px;
2106
> tab {
2108
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2109
&:checked {
2111
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2112
}
2113
&.reorderable-page {
2115
border-image-width: 1px 2px 1px 0;
2116
}
2117
}
2118
}
2119
}
2120
&.right {
2122
border-left-style: solid;
2123
> tabs {
2125
margin-left: -1px;
2126
> tab {
2128
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2129
&:checked {
2131
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2132
}
2133
&.reorderable-page {
2135
border-image-width: 1px 0 1px 2px;
2136
}
2137
}
2138
}
2139
}
2140
&.top > tabs > arrow {
2142
@extend %notebook_vert_arrows;
2143
border-top-style: none;
2145
}
2146
&.bottom > tabs > arrow {
2148
@extend %notebook_vert_arrows;
2149
border-bottom-style: none;
2151
}
2152
@at-root %notebook_vert_arrows {
2154
padding-left: 4px;
2155
padding-right: 4px;
2156
&.down {
2158
margin-left: -8px;
2159
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2160
}
2161
&.up {
2163
margin-right: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2165
}
2166
}
2167
&.left > tabs > arrow {
2169
@extend %notebook_horz_arrows;
2170
border-left-style: none;
2172
}
2173
&.right > tabs > arrow {
2175
@extend %notebook_horz_arrows;
2176
border-right-style: none;
2178
}
2179
@at-root %notebook_horz_arrows {
2181
padding-top: 4px;
2182
padding-bottom: 4px;
2183
&.down {
2185
margin-top: -8px;
2186
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2187
}
2188
&.up {
2190
margin-bottom: -8px;
2191
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2192
}
2193
}
2194
> tabs > arrow {
2196
min-height: 16px;
2197
min-width: 16px;
2198
border-radius: 0;
2199
@extend %ripple;
2201
@include ink-color($text2);
2202
&:disabled {
2204
color: $text2-disabled;
2205
}
2206
}
2207
tab {
2209
transition: $transition,
2210
background-size 0ms,
2211
background-image 0ms;
2212
min-height: $small-size;
2213
min-width: $small-size;
2214
padding: $container-padding 12px;
2215
border-width: 1px; // for reorderable tabs
2217
border-color: transparent; //
2218
outline: none;
2220
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2221
background-repeat: no-repeat;
2222
background-position: center;
2223
background-size: 0% 0%;
2224
background-clip: border-box;
2225
color: $text2;
2227
font-weight: 500;
2228
&:hover {
2230
background-color: $overlay-hover;
2231
}
2232
&:disabled {
2234
color: $text2-disabled;
2235
}
2236
&:checked {
2238
transition: $transition,
2239
background-size $ripple-fade-in-duration $ease-out,
2240
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2241
background-color: transparent;
2242
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2243
background-size: 1000% 1000%;
2244
background-clip: padding-box;
2245
color: $text;
2246
&:disabled {
2248
color: $text-disabled;
2249
}
2250
&.reorderable-page {
2252
border-color: $divider;
2253
background-color: $base;
2254
}
2255
}
2256
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2258
> box {
2259
transition: background-color $duration $ease-out;
2260
margin: -$container-padding -12px;
2261
padding: $container-padding 12px;
2262
&:drop(active) {
2264
background-color: $overlay-hover;
2265
}
2266
}
2267
// colors the button like the label, overridden otherwise
2269
button.flat {
2270
@extend %button-small;
2271
&:last-child {
2273
margin-left: $container-padding;
2274
margin-right: $container-padding - 12px;
2275
}
2276
&:first-child {
2278
margin-left: $container-padding - 12px;
2279
margin-right: $container-padding;
2280
}
2281
}
2282
}
2283
&.top,
2285
&.bottom {
2286
tabs {
2287
padding-left: 8px;
2288
padding-right: 8px;
2289
&:not(:only-child) {
2291
&:first-child {
2292
margin-left: 0;
2293
}
2294
&:last-child {
2296
margin-right: 0;
2297
}
2298
}
2299
tab.reorderable-page {
2301
border-style: none solid;
2302
}
2303
}
2304
}
2305
&.left,
2307
&.right {
2308
tabs {
2309
padding-top: 8px;
2310
padding-bottom: 8px;
2311
&:not(:only-child) {
2313
&:first-child {
2314
margin-top: 0;
2315
}
2316
&:last-child {
2318
margin-bottom: 0;
2319
}
2320
}
2321
tab.reorderable-page {
2323
border-style: solid none;
2324
}
2325
}
2326
}
2327
}
2328
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2330
background-color: $base;
2331
}
2332
}
2333
/**************
2335
* Scrollbars *
2336
**************/
2337
scrollbar {
2339
$_slider_min_length: 24px;
2340
// disable steppers
2342
@at-root * {
2343
-GtkScrollbar-has-backward-stepper: false;
2344
-GtkScrollbar-has-forward-stepper: false;
2345
}
2346
transition: $transition;
2348
background-color: $base;
2349
// scrollbar border
2351
&.top { border-bottom: 1px solid $divider; }
2352
&.bottom { border-top: 1px solid $divider; }
2353
&.left { border-right: 1px solid $divider; }
2354
&.right { border-left: 1px solid $divider; }
2355
// slider
2357
slider {
2358
transition: background-color $duration $ease-out;
2359
min-width: 8px;
2360
min-height: 8px;
2361
border: 4px solid transparent;
2362
border-radius: $circular-radius;
2363
background-clip: padding-box;
2364
background-color: $text-disabled;
2365
&:hover {
2367
background-color: $text2;
2368
}
2369
&:active {
2371
background-color: $text;
2372
}
2373
&:disabled {
2375
background-color: $text2-disabled;
2376
}
2377
}
2378
&.fine-tune {
2380
slider {
2381
min-width: 4px;
2382
min-height: 4px;
2383
}
2384
&.horizontal slider {
2386
margin: 2px 0;
2387
}
2388
&.vertical slider {
2390
margin: 0 2px;
2391
}
2392
}
2393
&.overlay-indicator {
2395
&:not(.fine-tune) slider {
2396
transition-property: background-color, min-height, min-width;
2397
}
2398
&:not(.dragging):not(.hovering) {
2400
border-color: transparent;
2401
background-color: transparent;
2402
slider {
2404
min-width: 4px;
2405
min-height: 4px;
2406
margin: 4px - 1px;
2407
border: 1px solid rgba($base, .3);
2408
}
2409
button {
2411
min-width: 4px;
2412
min-height: 4px;
2413
margin: 4px - 1px;
2414
border: 1px solid rgba($base, .3);
2415
border-radius: $circular-radius;
2416
background-color: $text-disabled;
2417
background-clip: padding-box;
2418
-gtk-icon-source: none;
2419
&:disabled {
2421
background-color: $text2-disabled;
2422
}
2423
}
2424
&.horizontal {
2426
slider {
2427
min-width: $_slider_min_length;
2428
}
2429
button {
2431
min-width: 8px;
2432
}
2433
}
2434
&.vertical {
2436
slider {
2437
min-height: $_slider_min_length;
2438
}
2439
button {
2441
min-height: 8px;
2442
}
2443
}
2444
}
2445
&.dragging,
2447
&.hovering {
2448
background-color: rgba($surface, .9);
2449
}
2450
}
2451
&.horizontal slider {
2453
min-width: $_slider_min_length;
2454
}
2455
&.vertical slider {
2457
min-height: $_slider_min_length;
2458
}
2459
// button styling
2461
button {
2462
@extend %button-flat-basic;
2463
min-width: 16px;
2465
min-height: 16px;
2466
padding: 0;
2467
border-radius: 0;
2468
}
2469
// button icons
2471
&.vertical {
2472
button {
2473
&.down {
2474
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2475
}
2476
&.up {
2478
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2479
}
2480
}
2481
}
2482
&.horizontal {
2484
button {
2485
&.down {
2486
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2487
}
2488
&.up {
2490
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2491
}
2492
}
2493
}
2494
}
2495
/**********
2498
* Switch *
2499
**********/
2500
switch {
2502
transition: all $duration $ease-out;
2503
margin: $container-padding 0;
2504
padding: 0 2px;
2505
border: 5px solid transparent;
2506
border-radius: $circular-radius;
2507
background-color: $stroke;
2508
background-clip: padding-box;
2509
font-size: 0;
2510
&:checked {
2512
background-color: rgba($primary, .5);
2513
}
2514
&:disabled {
2516
opacity: .5;
2517
}
2518
// hide on/off icons for >=3.24.5
2520
image {
2521
margin: -8px;
2522
-gtk-icon-transform: scale(0);
2523
}
2524
slider {
2526
transition: all $duration $ease-out;
2527
min-width: 20px;
2528
min-height: 20px;
2529
margin: -3px -2px;
2530
border-radius: $circular-radius;
2531
outline: none;
2532
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2533
background-color: $switch-surface;
2534
}
2535
&:hover slider {
2537
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2538
}
2539
&:focus slider {
2541
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2542
}
2543
&:checked slider {
2545
background-color: $primary;
2546
color: $primary;
2547
}
2548
row:selected & {
2550
}
2551
}
2552
/*************************
2554
* Check and Radio items *
2555
*************************/
2556
// draw regular check and radio items using our PNG assets
2558
// all assets are rendered from assets.svg. never add pngs directly
2559
// selection-mode
2561
.view.content-view.check:not(list),
2562
.content-view:not(list) .tile check {
2563
min-height: 40px;
2564
min-width: 40px;
2565
margin: 0;
2566
padding: 0;
2567
box-shadow: none;
2568
background-color: transparent;
2569
background-image: none;
2570
-gtk-icon-shadow: $icon-shadow-z2;
2571
&:hover,
2573
&:active {
2574
-gtk-icon-shadow: $icon-shadow-z4;
2575
}
2576
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2578
&#{$class} {
2579
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2580
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2582
}
2583
}
2584
}
2585
checkbutton,
2587
radiobutton {
2588
outline: none;
2589
}
2590
checkbutton.text-button,
2592
radiobutton.text-button {
2593
// this is for a nice focus on check and radios text
2594
padding: 2px;
2595
label:not(:only-child) {
2597
margin: 0 4px;
2598
}
2599
}
2600
$check-radio-size: 40px;
2602
check,
2604
radio {
2605
min-height: 24px;
2606
min-width: 24px;
2607
margin: -($check-radio-size - 24px) / 2;
2608
padding: ($check-radio-size - 24px) / 2;
2609
border-radius: $circular-radius;
2610
@extend %ripple;
2612
@include ink-color($text2);
2613
&:checked,
2615
&:indeterminate {
2616
@include ink-color($primary);
2617
}
2618
&:disabled {
2620
color: $text2-disabled;
2621
}
2622
&:only-child {
2624
// margin: -12px;
2625
}
2626
popover modelbutton.flat & {
2628
&,
2629
&:focus,
2630
&:hover,
2631
&:focus:hover,
2632
&:active,
2633
&:disabled {
2634
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2635
box-shadow: none;
2636
background-image: none;
2637
}
2638
&.left:dir(rtl) {
2640
margin-left: -12px;
2641
margin-right: -4px;
2642
}
2643
&.right:dir(ltr) {
2645
margin-left: -4px;
2646
margin-right: -12px;
2647
}
2648
}
2649
menu menuitem & {
2651
transition: none;
2652
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2653
padding: 0;
2654
&:dir(ltr) {
2656
margin-right: 8px;
2657
}
2658
&:dir(rtl) {
2660
margin-left: 8px;
2661
}
2662
&,
2664
&:hover,
2665
&:disabled {
2666
box-shadow: none;
2667
}
2668
}
2669
}
2670
%check,
2672
check {
2673
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2674
&:checked {
2676
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2677
}
2678
&:indeterminate {
2680
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2681
}
2682
}
2683
%radio,
2685
radio {
2686
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2687
&:checked {
2689
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2690
}
2691
&:indeterminate {
2693
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2694
}
2695
border-image-slice: $check-radio-size / 2px;
2697
border-image-width: $check-radio-size / 2;
2698
$radio-indicator-size: 10px / $check-radio-size / 2;
2700
border-image-source:
2702
-gtk-gradient(
2703
radial,
2704
center center, 0,
2705
center center, .001,
2706
to($primary),
2707
to(transparent)
2708
);
2709
&:checked:not(:indeterminate) {
2711
border-image-source:
2712
-gtk-gradient(
2713
radial,
2714
center center, 0,
2715
center center, $radio-indicator-size,
2716
to($primary),
2717
to(transparent)
2718
);
2719
&:disabled {
2721
border-image-source:
2722
-gtk-gradient(
2723
radial,
2724
center center, 0,
2725
center center, $radio-indicator-size,
2726
to($text2-disabled),
2727
to(transparent)
2728
);
2729
}
2730
}
2731
}
2732
%small_check,
2734
menu menuitem check {
2735
min-height: 16px;
2736
min-width: 16px;
2737
border-radius: $corner-radius;
2738
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2739
&:checked {
2741
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2742
}
2743
&:indeterminate {
2745
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2746
}
2747
}
2748
%small_radio,
2750
menu menuitem radio {
2751
min-height: 16px;
2752
min-width: 16px;
2753
border-image: none;
2754
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2755
&:checked {
2757
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2758
}
2759
&:indeterminate {
2761
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2762
}
2763
}
2764
// ANIMATION:
2766
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2767
// the transformation is set on the active state and it get reset on the checked state.
2768
radio:not(:checked):active {
2769
// -gtk-icon-transform: scale(0);
2770
}
2771
// Otherwise, treeview.view styling will be applied...
2773
treeview.view check,
2774
treeview.view radio {
2775
padding: 0;
2776
color: $text2;
2777
&:checked,
2779
&:indeterminate {
2780
color: $primary;
2781
}
2782
&:disabled {
2784
color: $text2-disabled;
2785
}
2786
&,
2788
&:hover,
2789
&:selected,
2790
&:selected:hover {
2791
box-shadow: none;
2792
background-color: transparent;
2793
}
2794
}
2795
treeview.view radio:checked {
2797
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2798
border-image: none;
2799
}
2800
/************
2802
* GtkScale *
2803
************/
2804
scale {
2806
// sizing
2807
$_marks_length: 8px;
2808
$_marks_distance: 7px;
2809
$trough_size: 2px;
2811
$finetune_trough_size: 4px;
2812
$slider_size: 32px;
2814
$slider_margin: -($slider_size - $trough_size) / 2;
2816
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2817
$color_slider_margin: -($slider_size) * 3 / 4;
2819
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2820
min-height: $trough_size;
2822
min-width: $trough_size;
2823
&.horizontal {
2825
padding: ($medium-size - $trough_size) / 2 12px;
2826
}
2827
&.vertical {
2829
padding: 12px ($medium-size - $trough_size) / 2;
2830
}
2831
// the slider is inside the trough, so to have make it bigger there's a negative margin
2833
slider {
2834
min-height: $slider_size;
2835
min-width: $slider_size;
2836
margin: $slider_margin;
2837
}
2838
// click-and-hold the slider to activate
2840
&.fine-tune {
2841
&.horizontal {
2842
min-height: $finetune_trough_size;
2843
padding-top: ($medium-size - $finetune_trough_size) / 2;
2844
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2845
}
2846
&.vertical {
2848
min-width: $finetune_trough_size;
2849
padding-left: ($medium-size - $finetune_trough_size) / 2;
2850
padding-right: ($medium-size - $finetune_trough_size) / 2;
2851
}
2852
// to make the trough grow in fine-tune mode
2854
slider {
2855
margin: $finetune_slider_margin;
2856
}
2857
}
2858
// the backing bit
2860
trough {
2861
transition: background-color $duration $ease-out;
2862
outline: none;
2863
background-color: $stroke;
2864
&:disabled {
2866
background-color: $stroke-disabled;
2867
}
2868
}
2869
// the colored part of the backing bit
2871
highlight {
2872
transition: background-image $duration $ease-out;
2873
background-image: image($primary);
2874
&:disabled {
2876
background-color: $background;
2877
background-image: image($text2-disabled);
2878
}
2879
}
2880
// this is another differently styled part of the backing bit, the most relevant use case is for example
2882
// in media player to indicate how much video stream as been cached
2883
fill {
2884
transition: background-color $duration $ease-out;
2885
background-color: $stroke;
2886
&:disabled {
2888
background-color: transparent;
2889
}
2890
}
2891
slider {
2893
transition: background-color $duration $ease-out,
2894
background-size $ripple-fade-out-duration $ease-out,
2895
background-image $ripple-fade-out-opacity-duration $ease-out;
2896
background-repeat: no-repeat;
2897
background-position: center;
2898
background-size: auto, 1000% 1000%;
2899
border-radius: 50%;
2900
color: $primary;
2901
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2903
&#{$class} {
2904
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2905
background-image:
2907
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2908
radial-gradient(circle, transparent 10%, transparent 0%);
2909
}
2910
}
2911
&:hover {
2913
background-color: $overlay-hover;
2914
}
2915
&:focus {
2917
background-color: $overlay-focus;
2918
}
2919
&:active {
2921
$_url: 'assets/scale-slider#{$asset-suffix}';
2922
transition: background-color $duration $ease-out,
2924
background-size 0ms,
2925
background-image 0ms;
2926
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2927
background-image:
2928
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2929
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2930
background-size: auto, 0% 0%;
2931
}
2932
}
2933
marks,
2935
value {
2936
color: $text2;
2937
}
2938
indicator {
2940
background-color: $stroke;
2941
color: transparent;
2942
}
2943
//marks margins
2945
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2946
(horizontal, bottom, bottom, top),
2947
(vertical, top, left, right),
2948
(vertical, bottom, right, left) {
2949
&.#{$scale_orient} marks {
2950
&.#{$marks_class} {
2951
margin-#{$marks_margin}: $_marks_distance;
2952
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2953
}
2954
}
2955
&.#{$scale_orient}.fine-tune marks {
2957
&.#{$marks_class} {
2958
margin-#{$marks_margin}: $_marks_distance - 1px;
2959
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2960
}
2961
}
2962
}
2963
&.horizontal {
2965
indicator {
2966
min-height: $_marks_length;
2967
min-width: 1px;
2968
}
2969
}
2970
&.vertical {
2972
indicator {
2973
min-height: 1px;
2974
min-width: $_marks_length;
2975
}
2976
}
2977
// *WARNING* scale with marks madness following
2979
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2981
@each $marks_class, $marks_infix in (
2982
".marks-before:not(.marks-after)": "-marks-before",
2983
".marks-after:not(.marks-before)": "-marks-after"
2984
) {
2985
&#{$dir_class}#{$marks_class} {
2986
slider {
2987
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2988
&#{$state_class} {
2989
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2990
background-image:
2992
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2993
radial-gradient(circle, transparent 10%, transparent 0%);
2994
}
2995
}
2996
&:active {
2998
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2999
background-image:
3001
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3002
radial-gradient(circle, $overlay-active 10%, transparent 0%);
3003
}
3004
}
3005
}
3006
}
3007
}
3008
&.color {
3010
min-height: 0;
3011
min-width: 0;
3012
&.horizontal {
3014
padding: 0 0 12px 0;
3015
slider {
3017
&:dir(ltr), &:dir(rtl) { // specificity bump
3018
margin-bottom: $color_slider_margin;
3019
margin-top: $color_marks_slider_margin;
3020
}
3021
}
3022
}
3023
&.vertical {
3025
&:dir(ltr) {
3026
padding: 0 0 0 12px;
3027
slider {
3029
margin-left: $color_slider_margin;
3030
margin-right: $color_marks_slider_margin;
3031
}
3032
}
3033
&:dir(rtl) {
3035
padding: 0 12px 0 0;
3036
slider {
3038
margin-right: $color_slider_margin;
3039
margin-left: $color_marks_slider_margin;
3040
}
3041
}
3042
}
3043
}
3044
}
3045
/*****************
3047
* Progress bars *
3048
*****************/
3049
progressbar {
3051
// sizing
3052
&.horizontal {
3053
trough,
3054
progress {
3055
min-height: $bar-size;
3056
}
3057
}
3058
&.vertical {
3060
trough,
3061
progress {
3062
min-width: $bar-size;
3063
}
3064
}
3065
// FIXME: insensitive state missing and some other state should be set probably
3067
color: $text2;
3068
font-size: smaller;
3069
trough {
3071
background-color: $stroke-disabled;
3072
}
3073
progress {
3075
background-color: $primary;
3076
}
3077
&.osd { // progressbar.osd used for epiphany page loading progress
3079
// min-width: $bar-size;
3080
// min-height: $bar-size;
3081
// background-color: transparent;
3082
trough {
3084
// background-color: transparent;
3085
}
3086
progress {
3088
// background-color: $primary;
3089
}
3090
}
3091
// makes the progress indicator disappear, when the fraction is 0
3093
trough.empty progress {
3094
all: unset;
3095
}
3096
}
3097
/*************
3099
* Level Bar *
3100
*************/
3101
levelbar {
3103
&.horizontal {
3104
block {
3105
min-height: $bar-size;
3106
}
3107
&.discrete block {
3109
min-width: $medium-size;
3110
&:not(:last-child) {
3112
margin-right: 2px;
3113
}
3114
}
3115
}
3116
&.vertical {
3118
block {
3119
min-width: $bar-size;
3120
}
3121
&.discrete block {
3123
min-height: $medium-size;
3124
&:not(:last-child) {
3126
margin-bottom: 2px;
3127
}
3128
}
3129
}
3130
// imitate the entry style
3132
trough {
3133
// padding: 2px;
3134
// border-radius: $corner-radius;
3135
// box-shadow: $shadow-z1;
3136
// background-color: $base;
3137
&:disabled {
3139
// background-color: $base-alt;
3140
}
3141
}
3142
block {
3144
&.low {
3145
background-color: $warning;
3146
}
3147
&.high,
3149
&:not(.empty) {
3150
background-color: $primary;
3151
}
3152
&.full {
3154
background-color: $success;
3155
}
3156
&.empty {
3158
background-color: $stroke-disabled;
3159
}
3160
}
3161
}
3162
/****************
3164
* Print dialog *
3165
*****************/
3166
printdialog {
3168
paper {
3169
padding: 0;
3170
border: 1px solid $divider;
3171
background-color: $base;
3172
color: $text;
3173
}
3174
.dialog-action-box {
3176
margin: 12px;
3177
}
3178
}
3179
/**********
3181
* Frames *
3182
**********/
3183
frame > border,
3185
.frame {
3186
margin: 0;
3187
padding: 0;
3188
border: 1px solid $divider;
3189
border-radius: 0;
3190
box-shadow: none;
3191
&.flat {
3193
border-style: none;
3194
}
3195
}
3196
// for backward compatibility
3198
frame.flat > border {
3199
border-style: none;
3200
}
3201
actionbar > revealer > box {
3203
padding: $container-padding;
3204
border-top: 1px solid $divider;
3205
background-color: $base;
3206
background-clip: border-box;
3207
button:not(.suggested-action):not(.destructive-action) {
3209
@extend %button-flat;
3210
}
3211
.linked:not(.vertical) > entry:not(:only-child) {
3213
border-radius: $corner-radius $corner-radius 0 0;
3214
}
3215
}
3216
scrolledwindow {
3218
viewport.frame { // avoid double borders when viewport inside scrolled window
3219
border-style: none;
3220
}
3221
// This is used when content is touch-dragged past boundaries.
3223
// draws a box on top of the content, the size changes programmatically.
3224
@at-root overshoot {
3225
&.top { @include overshoot(top); }
3226
&.bottom { @include overshoot(bottom); }
3228
&.left { @include overshoot(left); }
3230
&.right { @include overshoot(right); }
3232
}
3233
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3235
@at-root undershoot {
3236
&.top { @include undershoot(top); }
3237
&.bottom { @include undershoot(bottom); }
3239
&.left { @include undershoot(left); }
3241
&.right { @include undershoot(right); }
3243
}
3244
@at-root junction { // the small square between two scrollbars
3246
border-style: solid none none solid;
3247
border-width: 1px;
3248
border-color: $divider;
3249
background-color: $base;
3250
&:dir(rtl) {
3252
border-style: solid solid none none;
3253
}
3254
}
3255
}
3256
// vbox and hbox separators
3258
separator {
3259
min-width: 1px;
3260
min-height: 1px;
3261
background-color: $divider;
3262
}
3263
%hide_separators {
3265
min-width: 0;
3266
min-height: 0;
3267
background-color: transparent;
3268
}
3269
/*********
3271
* Lists *
3272
*********/
3273
list {
3275
border-color: $divider;
3276
background-color: $base;
3277
row {
3279
padding: 2px;
3280
}
3281
}
3282
row {
3284
&.activatable {
3285
@extend %ripple;
3286
@include ink-color($text, $fg: false);
3287
@include list-item;
3288
// this is for indicathing which row generated a popover
3290
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3291
&.has-open-popup {
3292
background-color: $overlay-checked;
3293
}
3294
}
3295
&:selected {
3297
@extend %selected_items;
3298
@include ink-color($primary, $fg: false);
3300
}
3301
}
3302
/*********************
3304
* App Notifications *
3305
*********************/
3306
.app-notification {
3308
// @extend %osd;
3309
@extend %toolbar-osd;
3311
margin: 8px;
3313
button {
3315
@extend %button-flat;
3316
&.text-button:not(:disabled) {
3318
@include ink-color($primary);
3319
}
3320
}
3321
&.frame,
3323
border {
3324
border-style: none;
3325
}
3326
}
3327
/*************
3329
* Expanders *
3330
*************/
3331
expander {
3333
title > arrow {
3334
transition: all $duration $ease-out;
3335
min-width: 16px;
3336
min-height: 16px;
3337
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3338
-gtk-icon-transform: rotate(-90deg);
3339
&:dir(rtl) {
3341
-gtk-icon-transform: rotate(90deg);
3342
}
3343
&:checked {
3345
-gtk-icon-transform: unset;
3346
}
3347
color: $text2;
3349
&:hover,
3351
&:active {
3352
color: $text;
3353
}
3354
&:disabled {
3356
color: $text2-disabled;
3357
}
3358
}
3359
}
3360
/************
3362
* Calendar *
3363
************/
3364
calendar {
3366
padding: 1px;
3367
border: 1px solid $divider;
3368
color: $text;
3369
&:disabled {
3371
color: $text-disabled;
3372
}
3373
&:selected {
3375
@extend %selected_items;
3376
border-radius: $corner-radius + 1px;
3378
}
3379
&.header {
3381
border-style: none none solid;
3382
border-color: $divider;
3383
border-radius: 0;
3384
}
3385
&.button {
3387
border-radius: $corner-radius + 1px;
3388
color: $text2;
3389
&:hover {
3391
background-image: image($overlay-hover);
3392
}
3393
&:disabled {
3395
color: $text2-disabled;
3396
}
3397
}
3398
&.highlight {
3400
color: $text2;
3401
font-weight: 500;
3402
}
3403
&:indeterminate {
3405
color: $text2-disabled;
3406
}
3407
}
3408
/***********
3410
* Dialogs *
3411
***********/
3412
messagedialog { // Message Dialog styling
3414
&.background {
3415
background-color: $surface;
3416
}
3417
.titlebar {
3419
min-height: $small-size;
3420
border-style: none;
3421
box-shadow: inset 0 1px highlight($surface);
3422
background-color: $surface;
3423
color: $text;
3424
&:backdrop {
3426
background-color: $surface;
3427
color: $text2;
3428
}
3429
}
3430
&.csd { // rounded bottom border styling for csd version
3432
&.background {
3433
// bigger radius for better antialiasing
3434
border-bottom-left-radius: $corner-radius;
3435
border-bottom-right-radius: $corner-radius;
3436
}
3437
}
3438
// Hint text
3440
box.vertical > label + label {
3441
color: $text2;
3442
}
3443
.dialog-action-box {
3445
margin-top: -$container-padding;
3446
// padding: $container-padding;
3447
button:not(:last-child) {
3449
margin-right: $container-padding;
3450
}
3451
}
3452
}
3453
.dialog-action-box button {
3455
@extend %button-flat;
3456
&:not(:disabled) {
3458
@include ink-color($primary);
3459
}
3460
&.suggested-action:not(:disabled) {
3462
background-color: transparent;
3463
// @include ink-color($primary);
3464
}
3465
&.destructive-action:not(:disabled) {
3467
background-color: transparent;
3468
@include ink-color($error);
3469
}
3470
}
3471
filechooser {
3473
.dialog-action-box {
3474
border-top: 1px solid $divider;
3475
}
3476
#pathbarbox {
3478
border-bottom: 1px solid $divider;
3479
background-color: $background;
3480
> stack > box > button { // The new folder button
3482
@extend %button-flat;
3483
border-radius: $circular-radius;
3485
}
3486
}
3487
}
3488
filechooserbutton:drop(active) {
3490
// box-shadow: none;
3491
}
3492
/***********
3494
* Sidebar *
3495
***********/
3496
.sidebar {
3498
border-style: none;
3499
background-color: $base-alt;
3500
&:not(separator) {
3502
@at-root %sidebar_left,
3503
&:dir(ltr),
3504
&.left,
3505
&.left:dir(rtl) {
3506
border-right: 1px solid $divider;
3507
border-left-style: none;
3508
}
3509
@at-root %sidebar_right,
3511
&:dir(rtl),
3512
&.right {
3513
border-left: 1px solid $divider;
3514
border-right-style: none;
3515
}
3516
}
3517
list {
3519
background-color: transparent;
3520
}
3521
paned & {
3523
&,
3524
&.left,
3525
&.right,
3526
&.left:dir(rtl),
3527
&:dir(rtl),
3528
&:dir(ltr) {
3529
border-style: none;
3530
}
3531
}
3532
}
3533
stacksidebar.sidebar {
3535
& {
3536
&:dir(ltr),
3537
&.left,
3538
&.left:dir(rtl) {
3539
list {
3540
@extend %sidebar_left;
3541
}
3542
}
3543
&:dir(rtl),
3545
&.right {
3546
list {
3547
@extend %sidebar_right;
3548
}
3549
}
3550
}
3551
+ separator.vertical,
3553
separator.horizontal {
3554
@extend %hide_separators;
3555
}
3556
list {
3558
padding: 4px;
3559
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3560
}
3561
row {
3563
min-height: 32px;
3564
padding: 0 8px - 6px;
3565
border-radius: $corner-radius;
3566
&:selected {
3568
font-weight: 500;
3569
@include ink-color($primary, $activated: true);
3570
}
3571
+ row {
3573
margin-top: 4px;
3574
}
3575
> label {
3577
padding-left: 6px;
3578
padding-right: 6px;
3579
}
3580
&.needs-attention > label {
3582
@extend %needs-attention;
3583
}
3584
}
3585
}
3586
separator.sidebar {
3588
background-color: $divider;
3589
&.selection-mode,
3591
.selection-mode & {
3592
// background-color: $divider;
3593
}
3594
}
3595
/****************
3597
* File chooser *
3598
****************/
3599
// dim the sidebar icons, see bug #786613 for details on this oddity
3601
row image.sidebar-icon {
3602
transition: color $duration $ease-out;
3603
color: $text2;
3604
&:disabled {
3606
color: $text2-disabled;
3607
}
3608
}
3609
placessidebar.sidebar {
3611
> viewport.frame {
3612
border-style: none;
3613
}
3614
list {
3616
padding: (4px - 3px) 0 4px;
3617
}
3618
row {
3620
// Needs overriding of the GtkListBoxRow padding
3621
min-height: 32px;
3622
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3623
padding: 0;
3624
border-radius: $corner-radius;
3625
// Using margins/padding directly in the SidebarRow
3627
// will make the animation of the new bookmark row jump
3628
> revealer {
3629
padding: 0 8px;
3630
}
3631
&:selected {
3633
font-weight: 500;
3634
@include ink-color($primary, $activated: true);
3635
image.sidebar-icon {
3637
color: $primary;
3638
}
3639
}
3640
&:disabled {
3642
color: $text-disabled;
3643
}
3644
image.sidebar-icon {
3646
&:dir(ltr) {
3647
padding-right: 8px;
3648
}
3649
&:dir(rtl) {
3651
padding-left: 8px;
3652
}
3653
}
3654
label.sidebar-label {
3656
&:dir(ltr) {
3657
padding-right: 2px;
3658
}
3659
&:dir(rtl) {
3661
padding-left: 2px;
3662
}
3663
}
3664
@at-root button.sidebar-button {
3666
@extend %button-flat-basic;
3667
@extend %button-small;
3668
}
3669
&.sidebar-placeholder-row {
3671
background-color: $overlay-hover;
3672
}
3673
&.sidebar-new-bookmark-row {
3675
color: $primary;
3676
image.sidebar-icon {
3678
color: $primary;
3679
}
3680
}
3681
}
3682
}
3683
placesview {
3685
.server-list-button {
3686
> image {
3687
-gtk-icon-transform: rotate(0turn);
3688
}
3689
&:checked > image {
3691
-gtk-icon-transform: rotate(-.5turn);
3692
}
3693
}
3694
// this selects the "connect to server" label
3696
> actionbar > revealer > box > label {
3697
padding-left: 8px;
3698
padding-right: 8px;
3699
}
3700
}
3701
/*********
3703
* Paned *
3704
*********/
3705
paned {
3707
> separator {
3708
min-width: 1px;
3709
min-height: 1px;
3710
-gtk-icon-source: none; // defeats the ugly default handle decoration
3711
border-style: none; // just to be sure
3712
background-color: transparent;
3713
// workaround, using background istead of a border since the border will get rendered twice (?)
3714
background-image: image($divider);
3715
background-size: 1px 1px;
3716
background-clip: content-box; // avoids borders image being rendered twice (?)
3717
&.wide {
3719
min-width: 6px;
3720
min-height: 6px;
3721
background-color: $background;
3722
background-image: image($divider), image($divider);
3723
background-size: 1px 1px, 1px 1px;
3724
}
3725
}
3726
&.horizontal > separator {
3728
background-repeat: repeat-y;
3729
&:dir(ltr) {
3731
margin: 0 -8px 0 0;
3732
padding: 0 8px 0 0;
3733
background-position: left;
3734
}
3735
&:dir(rtl) {
3737
margin: 0 0 0 -8px;
3738
padding: 0 0 0 8px;
3739
background-position: right;
3740
}
3741
&.wide {
3743
margin: 0;
3744
padding: 0;
3745
background-repeat: repeat-y, repeat-y;
3746
background-position: left, right;
3747
}
3748
}
3749
&.vertical > separator {
3751
margin: 0 0 -8px 0;
3752
padding: 0 0 8px 0;
3753
background-repeat: repeat-x;
3754
background-position: top;
3755
&.wide {
3757
margin: 0;
3758
padding: 0;
3759
background-repeat: repeat-x, repeat-x;
3760
background-position: bottom, top;
3761
}
3762
}
3763
}
3764
/**************
3766
* GtkInfoBar *
3767
**************/
3768
infobar {
3770
border-style: none;
3771
&.info,
3773
&.question {
3774
border-bottom: 1px solid $divider;
3775
background-color: $base;
3776
button {
3778
@extend %button-flat;
3779
&.text-button:not(:disabled) {
3781
@include ink-color($primary);
3782
}
3783
}
3784
}
3785
&.warning {
3787
background-color: $warning;
3788
color: on($warning);
3789
button.flat {
3791
@include ink-color(on($warning));
3792
}
3793
selection {
3795
}
3796
*:link {
3798
color: on($warning);
3799
}
3800
}
3801
&.error {
3803
background-color: $error;
3804
color: on($error);
3805
button.flat {
3807
@include ink-color(on($error));
3808
}
3809
selection {
3811
}
3812
*:link {
3814
color: on($error);
3815
}
3816
}
3817
// Remove ugly hard-coded padding
3819
button label {
3820
margin: 0 -4px;
3821
}
3822
}
3823
/************
3825
* Tooltips *
3826
************/
3827
tooltip {
3829
&.background {
3830
// background-color needs to be set this way otherwise it gets drawn twice
3831
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3832
background-color: $tooltip;
3833
color: on($tooltip);
3834
}
3835
// padding: 4px; /* not working */
3837
border-radius: $corner-radius;
3838
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3839
&:not(.csd):not(.unity-csd) {
3841
// border: 1px solid $divider;
3842
// border-radius: $corner-radius + 1px;
3843
// background-clip: $background-clip-extra;
3844
}
3845
// FIXME: we need a border or tooltips vanish on black background.
3847
decoration {
3848
background-color: transparent;
3849
}
3850
> box {
3852
margin: -6px; // Remove hard-coded 6px margin
3853
min-height: 32px - 4px * 2;
3854
padding: 4px 8px;
3855
}
3856
.dim-label {
3858
color: on($tooltip, text2);
3859
}
3860
* {
3862
// workaround for Eclipse.
3863
// do not include any declaration here.
3864
}
3865
}
3866
/*****************
3868
* Color Chooser *
3869
*****************/
3870
colorswatch {
3872
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3873
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3874
// applied to the overlay box.
3875
// base color corners rounding
3877
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3878
// sports a bigger radius.
3879
// nth-child is needed by the custom color strip.
3880
&.top {
3882
border-top-left-radius: $corner-radius + .5px;
3883
border-top-right-radius: $corner-radius + .5px;
3884
overlay {
3886
border-top-left-radius: $corner-radius;
3887
border-top-right-radius: $corner-radius;
3888
}
3889
}
3890
&.bottom {
3892
border-bottom-left-radius: $corner-radius + .5px;
3893
border-bottom-right-radius: $corner-radius + .5px;
3894
overlay {
3896
border-bottom-left-radius: $corner-radius;
3897
border-bottom-right-radius: $corner-radius;
3898
}
3899
}
3900
&.left,
3902
&:first-child:not(.top) {
3903
border-top-left-radius: $corner-radius + .5px;
3904
border-bottom-left-radius: $corner-radius + .5px;
3905
overlay {
3907
border-top-left-radius: $corner-radius;
3908
border-bottom-left-radius: $corner-radius;
3909
}
3910
}
3911
&.right,
3913
&:last-child:not(.bottom) {
3914
border-top-right-radius: $corner-radius + .5px;
3915
border-bottom-right-radius: $corner-radius + .5px;
3916
overlay {
3918
border-top-right-radius: $corner-radius;
3919
border-bottom-right-radius: $corner-radius;
3920
}
3921
}
3922
&.dark {
3924
color: on(dark);
3925
}
3926
&.light {
3928
color: on(light);
3929
}
3930
overlay {
3932
transition: $transition-shadow;
3933
box-shadow: $shadow-z1;
3934
&:drop(active),
3936
&:hover {
3937
box-shadow: $shadow-z3;
3938
}
3939
}
3940
&#add-color-button {
3942
border-radius: $corner-radius $corner-radius 0 0;
3943
color: $text;
3944
&:only-child {
3946
border-radius: $corner-radius;
3947
}
3948
overlay {
3950
background-color: $surface;
3951
}
3952
}
3953
&:disabled {
3955
opacity: .5;
3956
overlay {
3958
box-shadow: none;
3959
}
3960
}
3961
row:selected & {
3963
}
3964
&#editor-color-sample {
3966
border-radius: $corner-radius + .5px;
3967
overlay {
3969
border-radius: $corner-radius;
3970
&:hover {
3972
// box-shadow: $shadow-z1;
3973
}
3974
}
3975
}
3976
}
3977
// colorscale popup
3979
colorchooser .popover.osd {
3980
transition: $transition-shadow;
3981
border-radius: $corner-radius;
3982
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3983
background-color: $surface;
3984
&:backdrop {
3986
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3987
}
3988
}
3989
/********
3991
* Misc *
3992
********/
3993
// content view (grid/list)
3995
.content-view {
3996
background-color: $background;
3997
&:hover {
3999
// -gtk-icon-effect: highlight;
4000
}
4001
rubberband,
4003
.rubberband {
4004
@extend rubberband;
4005
}
4006
}
4007
.scale-popup {
4009
.osd & {
4010
// @extend %osd;
4011
button.flat { // FIXME: quick hack, redo properly
4013
}
4014
}
4015
button { // +/- buttons on GtkVolumeButton popup
4017
}
4018
}
4019
/**********************
4021
* Window Decorations *
4022
**********************/
4023
decoration {
4025
transition: $transition-shadow;
4026
border-radius: $corner-radius $corner-radius 0 0;
4027
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4028
// FIXME rationalize shadows
4030
// this is used for the resize cursor area
4032
margin: 8px;
4033
&:backdrop {
4035
// the transparent shadow here is to enforce that the shadow extents don't
4036
// change when we go to backdrop, to prevent jumping windows.
4037
// The biggest shadow should be in the same order then in the active state
4038
// or the jumping will happen during the transition.
4039
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4040
}
4041
.maximized &,
4043
.fullscreen &,
4044
.tiled &,
4045
.tiled-top &,
4046
.tiled-right &,
4047
.tiled-bottom &,
4048
.tiled-left & {
4049
border-radius: 0;
4050
}
4051
.popup & {
4053
box-shadow: none;
4054
}
4055
// server-side decorations as used by mutter
4057
.ssd & {
4058
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4059
}
4060
.csd.popup & {
4062
border-radius: $corner-radius;
4063
box-shadow: $shadow-z4;
4064
}
4065
tooltip.csd & {
4067
border-radius: $corner-radius;
4068
box-shadow: none;
4069
}
4070
messagedialog.csd & {
4072
border-radius: $corner-radius;
4073
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4074
&:backdrop {
4076
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4077
}
4078
}
4079
.solid-csd & {
4081
margin: 0;
4082
padding: 2px;
4083
border-radius: 0;
4084
box-shadow: none;
4085
box-shadow: inset 0 1px highlight($titlebar);
4086
background-color: $titlebar;
4087
&:backdrop {
4089
background-color: $titlebar-backdrop;
4090
}
4091
}
4092
}
4093
// Window Close button
4095
button.titlebutton {
4096
border-radius: $circular-radius;
4097
.selection-mode & {
4099
}
4100
}
4101
// catch all extend :)
4104
%selected_items {
4106
background-color: $overlay-selected;
4107
}
4108
.monospace {
4110
font-family: monospace;
4111
}
4112
/**********************
4114
* Touch Copy & Paste *
4115
**********************/
4116
// touch selection handlebars for the Popover.osd above
4118
cursor-handle {
4119
color: $primary;
4120
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4121
&.top:dir(ltr),
4123
&.bottom:dir(rtl) {
4124
-gtk-icon-transform: rotate(90deg);
4125
}
4126
&.bottom:dir(ltr),
4128
&.top:dir(rtl) {
4129
-gtk-icon-transform: unset;
4130
}
4131
&.insertion-cursor:dir(ltr),
4133
&.insertion-cursor:dir(rtl) {
4134
padding-top: 6px;
4135
-gtk-icon-transform: rotate(45deg);
4136
}
4137
}
4138
// Decouple the font of context menus from their entry/textview
4140
.context-menu {
4141
font: initial;
4142
}
4143
// shortcut window keys
4145
.keycap {
4146
min-width: 28px - 8px * 2;
4147
min-height: 28px - 2px;
4148
margin-top: 2px;
4149
padding-bottom: 2px;
4150
padding-left: 8px;
4151
padding-right: 8px;
4152
border: solid 1px $divider;
4154
border-radius: $corner-radius + 1px;
4155
box-shadow: inset 0 -2px $divider;
4156
background-color: $surface;
4157
color: $text;
4158
font-size: smaller;
4159
}
4160
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4162
// caret-color: $primary;
4163
}
4164
stackswitcher button.text-button { // FIXME aggregate with buttons
4166
min-width: 100px;
4167
}
4168
stackswitcher button.circular,
4170
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4171
min-width: $medium-size;
4172
min-height: $medium-size;
4173
padding: 0;
4174
}
4175
/*************
4177
* App Icons *
4178
*************/
4179
// Outline for low res icons
4181
.lowres-icon {
4182
// -gtk-icon-shadow: none;
4183
}
4184
// Drapshadow for large icons
4186
.icon-dropshadow {
4187
// -gtk-icon-shadow: none;
4188
}
4189
/*********
4191
* Emoji *
4192
*********/
4193
popover.emoji-picker {
4195
padding: 0;
4196
entry {
4198
border-bottom: 1px solid $divider;
4199
border-image: none;
4200
border-radius: 0;
4201
box-shadow: none;
4202
background-color: transparent;
4203
}
4204
scrolledwindow {
4206
border-bottom: 1px solid $divider;
4207
}
4208
}
4209
button.emoji-section {
4211
margin: 4px;
4212
&:checked {
4214
// background-color: transparent;
4215
@include ink-color($primary, $activated: true);
4216
}
4217
&:not(:last-child) {
4219
margin-right: 0;
4220
}
4221
}
4222
popover.emoji-picker .emoji {
4224
min-width: 3em;
4225
min-height: 3em;
4226
padding: 0 8px;
4227
// font-size: larger;
4228
widget {
4230
transition: $transition;
4231
border-radius: $corner-radius;
4232
&:hover {
4234
background-color: $overlay-hover;
4235
}
4236
}
4237
}
4238
popover.emoji-completion {
4240
padding: 8px 0;
4241
arrow {
4243
border: none;
4244
background: none;
4245
}
4246
.emoji-completion-row {
4248
min-height: $menuitem-size;
4249
padding: 0 12px;
4250
}
4251
.emoji:hover {
4253
background-color: $overlay-hover;
4254
}
4255
}
4256