ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: $overlay-checked;
35
}
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px $overlay-hover;
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px rgba($primary, 0.08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: $text2; // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: on(dark);
127
text-shadow: $text-shadow;
128
}
129
.rubberband,
131
rubberband {
132
border: 1px solid on(dark, primary);
133
background-color: rgba(on(dark, primary), 0.3);
134
}
135
flowbox {
137
rubberband {
138
@extend rubberband;
139
}
140
flowboxchild {
142
padding: 4px;
143
border-radius: $corner-radius;
144
&:selected {
146
@extend %selected_items;
147
}
148
}
149
}
150
.content-view .tile {
152
// margin: 2px;
153
// padding: 0;
154
// border-radius: 0;
155
// background-color: black;
156
&:selected {
158
background-color: transparent;
159
}
160
}
161
label {
163
caret-color: $primary; // this shouldn't be needed.
164
&.separator {
166
color: $text2;
167
}
168
selection {
170
@extend %selected_items;
171
}
172
&:disabled {
174
color: $text-disabled;
175
headerbar &,
177
menuitem &,
178
tab &,
179
button & {
180
color: inherit;
181
}
182
}
183
&.osd {
185
border-radius: $corner-radius;
186
background-color: $tooltip;
187
color: on($tooltip);
188
}
189
}
190
.dim-label {
192
color: $text2;
193
}
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base;
199
}
200
.sidebar label {
202
min-height: $medium-size;
203
padding: 0 12px;
204
color: $text-disabled;
205
font-weight: 500;
206
&.highlight {
208
color: $text;
209
}
210
}
211
}
212
%osd,
214
.osd {
215
// opacity: .9;
216
}
217
/*********************
220
* Spinner Animation *
221
*********************/
222
@keyframes spin {
223
to {
224
-gtk-icon-transform: rotate(1turn);
225
}
226
}
227
spinner {
229
background: none;
230
opacity: 0; // non spinning spinner makes no sense
231
color: $primary;
232
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
233
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
/****************
247
* Text Entries *
248
****************/
249
%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
/***********
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($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
/*********
889
* Links *
890
*********/
891
*: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 {
917
&:not(.vertical) {
918
// in this horizontal configuration, the whole spinbutton
919
// behaves as the entry, so we extend the entry styling
920
// and nuke the style on the internal entry
921
@extend %entry;
922
padding: 0;
924
entry {
926
min-width: $large-size - 8px * 2;
927
// reset all the other props since the spinbutton node is styled here
928
margin: 0;
929
border-image: none;
930
border-radius: 0;
931
box-shadow: none;
932
background-color: transparent;
933
}
934
button {
936
@extend %button-flat-basic;
937
@extend %button-small;
938
// margin: $container-padding;
940
border: solid $container-padding transparent;
941
// Remove unwanted focus indicator
943
&:focus:not(:hover):not(:active) {
944
box-shadow: inset 0 0 0 9999px transparent;
945
}
946
&.up:dir(ltr),
948
&.down:dir(rtl) {
949
margin-left: -$container-padding / 2;
950
}
951
&.up:dir(rtl),
953
&.down:dir(ltr) {
954
margin-right: -$container-padding / 2;
955
}
956
}
957
}
958
// OSD horizontal
960
.osd &:not(.vertical) {
961
}
962
// Vertical
964
&.vertical {
965
// in the vertical configuration, we treat the spinbutton
966
// as a box, and tweak the style of the entry in the middle
967
// so that it's linked
968
// FIXME: this should not be set at all, but otherwise it gets the wrong
970
// color
971
caret-color: $primary;
972
// FIXME: this should not be set at all, but otherwise it gets the wrong
974
// color
975
&:disabled {
976
color: $text-disabled;
977
}
978
entry {
980
@extend %entry_raised;
981
min-height: $medium-size;
983
min-width: $large-size;
984
padding: 0;
985
}
986
button {
988
min-height: $medium-size;
989
min-width: $large-size;
990
padding: 0;
991
@extend %button-flat-basic;
993
// Remove unwanted focus indicator
995
&:focus:not(:hover):not(:active) {
996
box-shadow: inset 0 0 0 9999px transparent;
997
}
998
&.up {
1000
border-radius: $corner-radius $corner-radius 0 0;
1001
}
1002
&.down {
1004
border-radius: 0 0 $corner-radius $corner-radius;
1005
}
1006
}
1007
}
1008
// OSD vertical
1010
.osd &.vertical {
1011
}
1012
// Misc
1014
treeview &:not(.vertical) {
1015
min-height: 0;
1016
border-style: none;
1017
border-radius: 0;
1018
entry {
1020
min-height: 0;
1021
padding: 1px 2px;
1022
}
1023
}
1024
}
1025
/**************
1028
* ComboBoxes *
1029
**************/
1030
combobox {
1031
arrow {
1032
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1033
min-height: 16px;
1034
min-width: 16px;
1035
}
1036
// workaround for menuitem selection
1038
decoration {
1039
transition: none;
1040
}
1041
button.combo cellview {
1043
&:dir(ltr) {
1044
margin-left: 8px - ($medium-size - 16px) / 2;
1045
}
1046
&:dir(rtl) {
1048
margin-right: 8px - ($medium-size - 16px) / 2;
1049
}
1050
}
1051
menu {
1053
padding: 2px 0;
1054
menuitem {
1056
min-height: $medium-size - 2px * 2;
1057
padding: 0 8px;
1058
}
1059
// overflow arrows
1061
> arrow {
1062
&.top {
1063
margin-top: -2px;
1064
}
1065
&.bottom {
1067
margin-top: 2px * 2;
1068
margin-bottom: -2px * 3;
1069
}
1070
}
1071
}
1072
&.linked {
1074
button:nth-child(2) {
1075
&:dir(ltr) {
1076
@extend %linked-not-first-child;
1077
}
1078
&:dir(rtl) {
1080
@extend %linked-not-last-child;
1081
}
1082
}
1083
}
1084
> .linked:not(.vertical) > entry:not(:only-child) {
1086
border-radius: $corner-radius $corner-radius 0 0;
1087
&:first-child {
1089
margin-right: -$medium-size;
1090
padding-right: $medium-size;
1091
}
1092
&:last-child {
1094
margin-left: -$medium-size;
1095
padding-left: $medium-size;
1096
}
1097
}
1098
> .linked:not(.vertical) > button:not(:only-child) {
1100
@extend %button-flat-activatable;
1101
// @extend %button-small;
1102
min-height: 16px;
1104
min-width: 16px;
1105
margin: ($medium-size - $small-size) / 2;
1106
padding: ($small-size - 16px) / 2;
1107
border-radius: $circular-radius;
1108
}
1109
}
1110
// the combo is a composite widget so the way we do button linking doesn't
1112
// work, special case needed. See
1113
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1114
.linked:not(.vertical) > combobox {
1116
&:not(:first-child) > box > button.combo {
1117
@extend %linked-not-first-child;
1118
}
1119
&:not(:last-child) > box > button.combo {
1121
@extend %linked-not-last-child;
1122
}
1123
}
1124
.linked.vertical > combobox {
1126
&:not(:first-child) > box > button.combo {
1127
@extend %linked-vertical-not-first-child;
1128
}
1129
&:not(:last-child) > box > button.combo {
1131
@extend %linked-vertical-not-last-child;
1132
}
1133
}
1134
button.combo:only-child {
1136
border-radius: $corner-radius $corner-radius 0 0;
1137
font-weight: normal;
1138
@include entry(normal);
1140
&:focus {
1142
@include entry(focus);
1143
}
1144
&:drop(active),
1146
&:hover {
1147
@include entry(hover);
1148
}
1149
&:checked {
1151
@include entry(checked);
1152
}
1153
&:disabled {
1155
@include entry(disabled);
1156
}
1157
}
1158
/************
1161
* Toolbars *
1162
************/
1163
toolbar {
1164
-GtkWidget-window-dragging: true;
1165
padding: 2px;
1166
background-color: $background;
1167
button {
1169
@extend %button-flat;
1170
}
1171
// on OSD
1173
.osd & {
1174
background-color: transparent;
1175
}
1176
// stand-alone OSD toolbars
1178
&.osd {
1179
@extend %toolbar-osd;
1180
// positional classes for `attached` osd toolbars
1182
&.left,
1183
&.right,
1184
&.top,
1185
&.bottom {
1186
border-radius: 0;
1187
}
1188
&.bottom {
1190
box-shadow: none;
1191
background-color: transparent;
1192
background-image:
1193
linear-gradient(
1194
to bottom,
1195
transparent,
1196
rgba(black, .1) 30%,
1197
rgba(black, .2) 50%,
1198
rgba(black, .4)
1199
);
1200
}
1201
}
1202
// toolbar separators
1204
&.horizontal > separator {
1205
margin: 2px;
1206
}
1207
&.vertical > separator {
1209
margin: 2px;
1210
}
1211
&:not(.inline-toolbar):not(.osd) {
1213
scale,
1214
entry,
1215
spinbutton,
1216
button {
1217
margin: 2px;
1218
}
1219
.linked entry,
1221
.linked spinbutton,
1222
.linked button {
1223
&:not(:first-child) {
1224
margin-left: 0;
1225
}
1226
&:not(:last-child) {
1228
margin-right: 0;
1229
}
1230
}
1231
spinbutton {
1233
entry,
1234
button {
1235
margin: 0;
1236
}
1237
}
1238
switch {
1240
margin: 2px + $container-padding 2px;
1241
}
1242
}
1243
}
1244
%toolbar-osd {
1246
transition: $transition-shadow;
1247
padding: $container-padding;
1248
border-radius: $corner-radius;
1249
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1250
background-color: $surface;
1251
&:backdrop {
1253
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1254
}
1255
}
1256
// searchbar, location-bar & inline-toolbar
1258
.inline-toolbar {
1259
padding: $container-padding;
1260
border-style: solid;
1261
border-width: 0 1px 1px;
1262
border-color: $divider;
1263
background-color: $base-alt;
1264
}
1265
searchbar > revealer > box,
1267
.location-bar {
1268
padding: $container-padding;
1269
border-style: solid;
1270
border-width: 0 0 1px;
1271
border-color: $divider;
1272
background-color: $background;
1273
background-clip: border-box;
1274
}
1275
searchbar > revealer > box {
1277
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1278
margin: -6px;
1279
padding: $container-padding;
1280
}
1281
/***************
1284
* Header bars *
1285
***************/
1286
.titlebar {
1287
transition: background-color $duration $ease-out, color $duration $ease-out;
1288
border-radius: $corner-radius $corner-radius 0 0;
1289
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1290
background-color: $titlebar;
1291
color: $titlebar-text;
1292
&:disabled {
1294
color: $titlebar-text-disabled;
1295
}
1296
&:backdrop {
1298
background-color: $titlebar-backdrop;
1299
color: $titlebar-text2;
1300
&:disabled {
1302
color: $titlebar-text2-disabled;
1303
}
1304
}
1305
.title {
1307
padding-left: 12px;
1308
padding-right: 12px;
1309
font-weight: bold;
1310
}
1311
.subtitle {
1313
padding-left: 12px;
1314
padding-right: 12px;
1315
font-size: smaller;
1316
}
1317
.subtitle,
1319
.dim-label {
1320
transition: color $duration $ease-out;
1321
color: $titlebar-text2;
1322
&:backdrop {
1324
color: $titlebar-text-disabled;
1325
}
1326
}
1327
// Don't draw titlebar above titlebar
1329
.titlebar {
1330
background-color: transparent;
1331
box-shadow: none;
1332
}
1333
// The separator for split headerbars
1335
headerbar + separator {
1336
background-color: $titlebar-divider;
1337
}
1338
entry {
1340
box-shadow: inset 0 -1px $titlebar-stroke;
1341
background-color: $titlebar-entry-fill;
1342
color: $titlebar-text;
1343
&:disabled {
1345
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1346
background-color: $titlebar-entry-fill;
1347
color: $titlebar-text-disabled;
1348
}
1349
image {
1351
color: $titlebar-text2;
1352
&:hover,
1354
&:active {
1355
color: $titlebar-text;
1356
}
1357
&:disabled {
1359
color: $titlebar-text-disabled;
1360
}
1361
}
1362
}
1363
.linked:not(.vertical) > entry:not(:only-child) {
1365
border-radius: $corner-radius $corner-radius 0 0;
1366
}
1367
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1369
@extend %button-flat;
1370
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1372
$titlebar-indicator 0%,
1373
transparent 0%)
1374
0 0 0 / 0 0 0px;
1375
@include ink-color($titlebar-text2);
1377
&:disabled {
1379
color: $titlebar-text2-disabled;
1380
}
1381
@at-root %titlebar-button-checked,
1383
&:checked {
1384
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1385
$titlebar-indicator 100%,
1386
transparent 0%)
1387
0 0 2 / 0 0 2px;
1388
background-color: transparent;
1389
color: $titlebar-text;
1390
@include ink-color($titlebar-text);
1391
&:disabled {
1393
background-color: transparent;
1394
color: $titlebar-text-disabled;
1395
}
1396
}
1397
&:backdrop {
1399
color: $titlebar-text-disabled;
1400
&:disabled {
1402
color: $titlebar-text2-disabled;
1403
}
1404
&:checked {
1406
color: $titlebar-text2;
1407
&:disabled {
1409
color: $titlebar-text2-disabled;
1410
}
1411
}
1412
}
1413
}
1414
button.suggested-action, button.destructive-action {
1416
&:disabled {
1417
background-color: $titlebar-fill;
1418
color: $titlebar-text-disabled;
1419
}
1420
}
1421
// FIXME: Ugly overriding
1423
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1424
min-width: 120px - 8px * 2;
1425
}
1426
// FIXME: Ugly overriding
1428
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1429
min-width: 0;
1430
padding-left: ($medium-size - 24px) / 2;
1431
padding-right: ($medium-size - 24px) / 2;
1432
}
1433
&.selection-mode {
1435
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1436
// but let's keep it for backwards compatibility.
1437
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1438
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1439
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1440
background-color: $primary;
1441
color: on($primary);
1442
&:backdrop {
1444
color: on($primary, text2);
1445
}
1446
.subtitle:link {
1448
color: on($primary);
1449
}
1450
button:not(.suggested-action):not(.destructive-action) {
1452
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1453
currentColor 0%,
1454
transparent 0%)
1455
0 0 0 / 0 0 0px;
1456
color: on($primary);
1457
&:disabled {
1459
color: on($primary, text-disabled);
1460
}
1461
&:checked {
1463
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1464
currentColor 100%,
1465
transparent 0%)
1466
0 0 2 / 0 0 2px;
1467
color: on($primary);
1468
&:disabled {
1470
color: on($primary, text-disabled);
1471
}
1472
}
1473
&:backdrop {
1475
color: on($primary, text2);
1476
&:disabled {
1478
color: on($primary, text2-disabled);
1479
}
1480
&:checked {
1482
color: on($primary, text2);
1483
&:disabled {
1485
color: on($primary, text2-disabled);
1486
}
1487
}
1488
}
1489
}
1490
.selection-menu {
1492
padding-left: 16px;
1493
padding-right: 16px;
1494
arrow {
1496
-GtkArrow-arrow-scaling: 1;
1497
}
1498
.arrow {
1500
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1501
}
1502
}
1503
}
1504
.selection-mode {
1506
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1507
background-color: $primary;
1508
}
1509
// squared corners when the window is maximized, tiled, or fullscreen
1511
.tiled &,
1512
.tiled-top &,
1513
.tiled-right &,
1514
.tiled-bottom &,
1515
.tiled-left &,
1516
.maximized &,
1517
.fullscreen & {
1518
border-radius: 0;
1519
box-shadow: $shadow-z1;
1520
}
1521
&.default-decoration {
1523
min-height: $small-size;
1524
padding: $container-padding;
1525
box-shadow: inset 0 1px highlight($titlebar);
1526
.tiled &,
1528
.maximized &,
1529
.fullscreen & {
1530
box-shadow: none;
1531
}
1532
button.titlebutton {
1534
min-height: $small-size;
1535
min-width: $small-size;
1536
margin: 0;
1537
padding: 0;
1538
}
1539
// workaround for non-animatable buttons
1541
.background:not(.csd) & button.titlebutton:active {
1542
background-size: 1000% 1000%;
1543
}
1544
}
1545
.solid-csd & {
1547
&:dir(rtl), &:dir(ltr) { // specificity bump
1548
border-radius: 0;
1549
box-shadow: $shadow-z1; // just remove the highlight
1550
}
1551
}
1552
}
1553
headerbar {
1555
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1556
min-height: $large-size;
1557
padding: 0 $container-padding;
1558
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1560
entry,
1561
spinbutton,
1562
button {
1563
margin-top: $container-padding;
1564
margin-bottom: $container-padding;
1565
}
1566
separator.titlebutton {
1568
margin-top: $large-size / 4;
1569
margin-bottom: $large-size / 4;
1570
background-color: $titlebar-divider;
1571
}
1572
switch {
1574
margin-top: ($large-size - 24px) / 2;
1575
margin-bottom: ($large-size - 24px) / 2;
1576
}
1577
// reset button margins of the spinbutton
1579
spinbutton button {
1580
margin-top: 0;
1581
margin-bottom: 0;
1582
}
1583
// FIXME: This is a hacky workaround.
1585
.entry-tag {
1586
margin-top: 5px;
1587
margin-bottom: 5px;
1588
}
1589
}
1590
// Development versions of apps to use a differently styled headerbar
1592
window.devel .titlebar:not(.selection-mode) {
1593
}
1594
/************
1597
* Pathbars *
1598
************/
1599
%pathbar_button,
1600
.path-bar.linked:not(.vertical) > button {
1601
@extend %button-flat-basic;
1602
padding-left: ($medium-size - 24px) / 2;
1604
padding-right: ($medium-size - 24px) / 2;
1605
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1606
$primary 0%,
1607
transparent 0%)
1608
0 0 0 / 0 0 0px;
1609
border-radius: $corner-radius;
1610
&:checked {
1612
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1613
$primary 100%,
1614
transparent 0%)
1615
0 0 2 / 0 0 2px;
1616
color: $text;
1617
&,
1619
&:disabled {
1620
background-color: transparent;
1621
}
1622
}
1623
label:not(:only-child) {
1625
&:first-child {
1626
margin-left: 0;
1627
}
1628
&:last-child {
1630
margin-right: 0;
1631
}
1632
}
1633
&.text-button {
1635
min-width: 0;
1636
}
1637
&.slider-button {
1639
padding-left: (24px - 16px) / 2;
1640
padding-right: (24px - 16px) / 2;
1641
}
1642
}
1643
/**************
1646
* Tree Views *
1647
**************/
1648
treeview.view {
1649
@at-root * {
1650
-GtkTreeView-horizontal-separator: 4;
1651
-GtkTreeView-grid-line-width: 1;
1652
-GtkTreeView-grid-line-pattern: '';
1653
-GtkTreeView-tree-line-width: 1;
1654
-GtkTreeView-tree-line-pattern: '';
1655
-GtkTreeView-expander-size: 16;
1656
}
1657
border-left-color: $stroke; // this is actually the tree lines color,
1659
border-top-color: $divider; // while this is the grid lines color, better then nothing
1660
// FIXME: Avoid transparency background-color being slightly darker
1662
&:selected {
1663
background-color: $base;
1664
background-image: image($overlay-selected);
1665
}
1666
// to avoid borders being overridden by the previously set props
1668
rubberband {
1669
@extend rubberband;
1670
}
1671
&:hover,
1673
&:selected {
1674
border-radius: 0;
1675
}
1676
&.separator {
1678
min-height: 1px + 2px * 2;
1679
color: $divider;
1680
}
1681
&:drop(active) {
1683
// FIXME: box-shadow, background-color and background-image are not available here.
1684
border-style: solid none;
1685
border-width: 9999px;
1686
border-color: $overlay-hover;
1687
&.after {
1689
border-top-style: none;
1690
}
1691
&.before {
1693
border-bottom-style: none;
1694
}
1695
}
1696
&.expander {
1698
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1699
-gtk-icon-transform: rotate(-90deg);
1700
&:dir(rtl) {
1702
-gtk-icon-transform: rotate(90deg);
1703
}
1704
&:checked {
1706
-gtk-icon-transform: unset;
1707
}
1708
color: $text2;
1710
&:hover,
1712
&:active {
1713
color: $text;
1714
}
1715
&:disabled {
1717
color: $text2-disabled;
1718
}
1719
}
1720
&.progressbar { // progress bar in treeviews
1722
border-bottom: $bar-size solid $primary;
1723
box-shadow: none;
1724
background-color: transparent;
1725
background-image: none;
1726
&:selected:hover {
1728
box-shadow: none;
1729
}
1730
}
1731
&.trough { // progress bar trough in treeviews
1733
border-bottom: $bar-size solid $stroke-disabled;
1734
box-shadow: none;
1735
background-color: transparent;
1736
background-image: none;
1737
&:selected:hover {
1739
box-shadow: none;
1740
}
1741
}
1742
header {
1744
button {
1745
padding: 2px 6px;
1746
border-style: none solid solid none;
1747
border-width: 1px;
1748
border-color: $divider;
1749
border-radius: 0;
1750
background-clip: border-box;
1751
color: $text2;
1752
@include ink-color($text2);
1753
@include list-item;
1754
&:disabled {
1756
color: $text2-disabled;
1757
}
1758
&,
1760
&:disabled {
1761
background-color: $base;
1762
}
1763
&:last-child {
1765
border-right-style: none;
1766
}
1767
}
1768
}
1769
button.dnd,
1771
header.button.dnd { // for treeview-like derive widgets
1772
padding: 2px 6px;
1773
border-style: none solid solid;
1774
border-width: 1px;
1775
border-color: $divider;
1776
border-radius: 0;
1777
box-shadow: none;
1778
background-color: $base;
1779
background-clip: border-box;
1780
color: $primary;
1781
}
1782
// see tests/testaccel to test
1784
acceleditor > label {
1785
background-color: $primary;
1786
}
1787
}
1788
/*********
1791
* Menus *
1792
*********/
1793
menubar,
1794
.menubar {
1795
-GtkWidget-window-dragging: true;
1796
padding: 0;
1797
// box-shadow: inset 0 -1px $divider;
1798
background-color: $titlebar;
1799
color: $titlebar-text;
1800
&:backdrop {
1802
background-color: $titlebar-backdrop;
1803
color: $titlebar-text2;
1804
}
1805
.csd & {
1807
transition: $transition;
1808
}
1809
> menuitem {
1811
transition: $transition;
1812
min-height: 20px;
1813
padding: 4px 8px;
1814
color: $titlebar-text2;
1815
&:hover { // Seems like it :hover even with keyboard focus
1817
transition: none;
1818
background-color: $overlay-checked;
1819
color: $titlebar-text;
1820
}
1821
&:disabled {
1823
color: $titlebar-text2-disabled;
1824
}
1825
}
1826
}
1827
// Needed to make the border-radius of menus work
1829
// otherwise the background bleeds out of the menu edges
1830
.background.popup {
1831
background-color: transparent;
1832
}
1833
menu,
1835
.menu,
1836
.context-menu {
1837
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1838
padding: 4px 0;
1839
box-shadow: inset 0 1px highlight($surface);
1840
background-color: $surface;
1841
background-clip: border-box;
1842
border: 1px solid $divider; // adds borders in a non composited env
1843
.csd & {
1845
border: none; // axes borders in a composited env
1846
border-radius: $corner-radius;
1847
}
1848
menuitem {
1850
transition: background-color $duration $ease-out;
1851
min-height: 20px;
1852
min-width: 40px;
1853
padding: 4px 8px;
1854
color: $text;
1855
font: initial;
1856
text-shadow: none;
1857
&:hover {
1859
transition: none;
1860
background-color: $overlay-hover;
1861
}
1862
&:disabled {
1864
color: $text-disabled;
1865
}
1866
// submenu indicators
1868
arrow {
1869
min-height: 16px;
1870
min-width: 16px;
1871
color: $text2;
1872
&:disabled {
1874
color: $text2-disabled;
1875
}
1876
&:dir(ltr) {
1878
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1879
margin-left: 8px;
1880
}
1881
&:dir(rtl) {
1883
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1884
margin-right: 8px;
1885
}
1886
}
1887
// avoids labels color being overridden, see
1889
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1890
label {
1891
&:dir(rtl),
1892
&:dir(ltr) {
1893
// color: inherit;
1894
}
1895
}
1896
}
1897
// overflow arrows
1899
> arrow {
1900
min-height: 16px;
1901
min-width: 16px;
1902
padding: 4px;
1903
background-color: $surface;
1904
color: $text2;
1905
&.top {
1907
margin-top: -4px;
1908
border-bottom: 1px solid $divider;
1909
border-radius: $corner-radius $corner-radius 0 0;
1910
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1911
}
1912
&.bottom {
1914
margin-top: 4px * 2;
1915
margin-bottom: -4px * 3;
1916
border-top: 1px solid $divider;
1917
border-radius: 0 0 $corner-radius $corner-radius;
1918
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1919
}
1920
&:hover {
1922
background-image: image($overlay-hover);
1923
}
1924
&:disabled {
1926
border-color: transparent;
1927
background-color: transparent;
1928
color: transparent;
1929
// color: $text2-disabled;
1930
}
1931
}
1932
separator {
1934
margin: 4px 0;
1935
}
1936
}
1937
menuitem {
1939
accelerator {
1940
color: $text2;
1941
}
1942
&:disabled accelerator {
1944
color: $text2-disabled;
1945
}
1946
}
1947
/************
1950
* Popovers *
1951
************/
1952
popover.background {
1953
transition: $transition-shadow;
1954
padding: 2px;
1955
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1956
background-color: $surface;
1957
&:backdrop {
1959
box-shadow: $shadow-z2;
1960
}
1961
&, .csd & {
1963
border-style: solid;
1964
border-width: 1px;
1965
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1966
border-radius: $corner-radius + 1px;
1967
}
1968
> stack {
1970
margin: -4px; // remove extra padding from menu style popovers
1971
}
1972
> toolbar {
1974
margin: -2px;
1975
}
1976
> list,
1978
> .view,
1979
> toolbar {
1980
border-style: none;
1981
box-shadow: none;
1982
background-color: transparent;
1983
}
1984
// FIXME: Use the popover color instead of transparent as a workaround for .view
1986
list,
1987
.view:not(:selected),
1988
toolbar {
1989
background-color: $surface;
1990
}
1991
&.touch-selection,
1993
&.magnifier,
1994
&.osd {
1995
// @extend %osd;
1996
}
1997
button:not(.suggested-action):not(.destructive-action) {
1999
// @extend %button-flat;
2000
}
2001
.linked:not(.vertical) > entry:not(:only-child) {
2003
// border-radius: $corner-radius $corner-radius 0 0;
2004
}
2005
&.menu button,
2007
button.model {
2008
@extend %button-flat;
2009
min-height: 32px;
2011
padding: 0 8px;
2012
border-radius: $corner-radius;
2013
&:checked {
2015
// color: $primary;
2016
}
2017
}
2018
separator {
2020
margin: 4px 0;
2021
}
2022
list separator {
2024
margin: 0;
2025
}
2026
}
2027
/*************
2029
* Notebooks *
2030
*************/
2031
notebook {
2032
frame > paned > & > header,
2033
&.frame > header {
2034
background-color: $base-alt;
2035
}
2036
&:focus tab:checked {
2038
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2039
}
2040
> header {
2042
border-width: 1px;
2043
border-color: $divider;
2044
background-color: $background;
2045
background-clip: border-box;
2046
&.top {
2048
border-bottom-style: solid;
2049
> tabs {
2051
margin-bottom: -1px;
2052
> tab {
2054
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2055
&:checked {
2057
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2058
}
2059
&.reorderable-page {
2061
border-image-width: 0 1px 2px;
2062
}
2063
}
2064
}
2065
}
2066
&.bottom {
2068
border-top-style: solid;
2069
> tabs {
2071
margin-top: -1px;
2072
> tab {
2074
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2075
&:checked {
2077
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2078
}
2079
&.reorderable-page {
2081
border-image-width: 2px 1px 0;
2082
}
2083
}
2084
}
2085
}
2086
&.left {
2088
border-right-style: solid;
2089
> tabs {
2091
margin-right: -1px;
2092
> tab {
2094
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2095
&:checked {
2097
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2098
}
2099
&.reorderable-page {
2101
border-image-width: 1px 2px 1px 0;
2102
}
2103
}
2104
}
2105
}
2106
&.right {
2108
border-left-style: solid;
2109
> tabs {
2111
margin-left: -1px;
2112
> tab {
2114
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2115
&:checked {
2117
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2118
}
2119
&.reorderable-page {
2121
border-image-width: 1px 0 1px 2px;
2122
}
2123
}
2124
}
2125
}
2126
&.top > tabs > arrow {
2128
@extend %notebook_vert_arrows;
2129
border-top-style: none;
2131
}
2132
&.bottom > tabs > arrow {
2134
@extend %notebook_vert_arrows;
2135
border-bottom-style: none;
2137
}
2138
@at-root %notebook_vert_arrows {
2140
padding-left: 4px;
2141
padding-right: 4px;
2142
&.down {
2144
margin-left: -8px;
2145
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2146
}
2147
&.up {
2149
margin-right: -8px;
2150
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2151
}
2152
}
2153
&.left > tabs > arrow {
2155
@extend %notebook_horz_arrows;
2156
border-left-style: none;
2158
}
2159
&.right > tabs > arrow {
2161
@extend %notebook_horz_arrows;
2162
border-right-style: none;
2164
}
2165
@at-root %notebook_horz_arrows {
2167
padding-top: 4px;
2168
padding-bottom: 4px;
2169
&.down {
2171
margin-top: -8px;
2172
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2173
}
2174
&.up {
2176
margin-bottom: -8px;
2177
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2178
}
2179
}
2180
> tabs > arrow {
2182
min-height: 16px;
2183
min-width: 16px;
2184
border-radius: 0;
2185
@extend %ripple;
2187
@include ink-color($text2);
2188
&:disabled {
2190
color: $text2-disabled;
2191
}
2192
}
2193
tab {
2195
transition: $transition,
2196
background-size 0ms,
2197
background-image 0ms;
2198
min-height: $small-size;
2199
min-width: $small-size;
2200
padding: $container-padding 12px;
2201
border-width: 1px; // for reorderable tabs
2203
border-color: transparent; //
2204
outline: none;
2206
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2207
background-repeat: no-repeat;
2208
background-position: center;
2209
background-size: 0% 0%;
2210
background-clip: border-box;
2211
color: $text2;
2213
font-weight: 500;
2214
&:hover {
2216
background-color: $overlay-hover;
2217
}
2218
&:disabled {
2220
color: $text2-disabled;
2221
}
2222
&:checked {
2224
transition: $transition,
2225
background-size $ripple-fade-in-duration $ease-out,
2226
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2227
background-color: transparent;
2228
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2229
background-size: 1000% 1000%;
2230
background-clip: padding-box;
2231
color: $text;
2232
&:disabled {
2234
color: $text-disabled;
2235
}
2236
&.reorderable-page {
2238
border-color: $divider;
2239
background-color: $base;
2240
}
2241
}
2242
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2244
> box {
2245
transition: background-color $duration $ease-out;
2246
margin: -$container-padding -12px;
2247
padding: $container-padding 12px;
2248
&:drop(active) {
2250
background-color: $overlay-hover;
2251
}
2252
}
2253
// colors the button like the label, overridden otherwise
2255
button.flat {
2256
@extend %button-small;
2257
&:last-child {
2259
margin-left: $container-padding;
2260
margin-right: $container-padding - 12px;
2261
}
2262
&:first-child {
2264
margin-left: $container-padding - 12px;
2265
margin-right: $container-padding;
2266
}
2267
}
2268
}
2269
&.top,
2271
&.bottom {
2272
tabs {
2273
padding-left: 8px;
2274
padding-right: 8px;
2275
&:not(:only-child) {
2277
&:first-child {
2278
margin-left: 0;
2279
}
2280
&:last-child {
2282
margin-right: 0;
2283
}
2284
}
2285
tab.reorderable-page {
2287
border-style: none solid;
2288
}
2289
}
2290
}
2291
&.left,
2293
&.right {
2294
tabs {
2295
padding-top: 8px;
2296
padding-bottom: 8px;
2297
&:not(:only-child) {
2299
&:first-child {
2300
margin-top: 0;
2301
}
2302
&:last-child {
2304
margin-bottom: 0;
2305
}
2306
}
2307
tab.reorderable-page {
2309
border-style: solid none;
2310
}
2311
}
2312
}
2313
}
2314
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2316
background-color: $base;
2317
}
2318
}
2319
/**************
2322
* Scrollbars *
2323
**************/
2324
scrollbar {
2325
$_slider_min_length: 24px;
2326
// disable steppers
2328
@at-root * {
2329
-GtkScrollbar-has-backward-stepper: false;
2330
-GtkScrollbar-has-forward-stepper: false;
2331
}
2332
transition: $transition;
2334
background-color: $base;
2335
// scrollbar border
2337
&.top { border-bottom: 1px solid $divider; }
2338
&.bottom { border-top: 1px solid $divider; }
2339
&.left { border-right: 1px solid $divider; }
2340
&.right { border-left: 1px solid $divider; }
2341
// slider
2343
slider {
2344
transition: background-color $duration $ease-out;
2345
min-width: 8px;
2346
min-height: 8px;
2347
border: 4px solid transparent;
2348
border-radius: $circular-radius;
2349
background-clip: padding-box;
2350
background-color: $text-disabled;
2351
&:hover {
2353
background-color: $text2;
2354
}
2355
&:active {
2357
background-color: $text;
2358
}
2359
&:disabled {
2361
background-color: $text2-disabled;
2362
}
2363
}
2364
&.fine-tune {
2366
slider {
2367
min-width: 4px;
2368
min-height: 4px;
2369
}
2370
&.horizontal slider {
2372
margin: 2px 0;
2373
}
2374
&.vertical slider {
2376
margin: 0 2px;
2377
}
2378
}
2379
&.overlay-indicator {
2381
&:not(.fine-tune) slider {
2382
transition-property: background-color, min-height, min-width;
2383
}
2384
&:not(.dragging):not(.hovering) {
2386
border-color: transparent;
2387
background-color: transparent;
2388
slider {
2390
min-width: 4px;
2391
min-height: 4px;
2392
margin: 4px - 1px;
2393
border: 1px solid rgba($base, 0.3);
2394
}
2395
button {
2397
min-width: 4px;
2398
min-height: 4px;
2399
margin: 4px - 1px;
2400
border: 1px solid rgba($base, 0.3);
2401
border-radius: $circular-radius;
2402
background-color: $text-disabled;
2403
background-clip: padding-box;
2404
-gtk-icon-source: none;
2405
&:disabled {
2407
background-color: $text2-disabled;
2408
}
2409
}
2410
&.horizontal {
2412
slider {
2413
min-width: $_slider_min_length;
2414
}
2415
button {
2417
min-width: 8px;
2418
}
2419
}
2420
&.vertical {
2422
slider {
2423
min-height: $_slider_min_length;
2424
}
2425
button {
2427
min-height: 8px;
2428
}
2429
}
2430
}
2431
&.dragging,
2433
&.hovering {
2434
background-color: rgba($surface, 0.9);
2435
}
2436
}
2437
&.horizontal slider {
2439
min-width: $_slider_min_length;
2440
}
2441
&.vertical slider {
2443
min-height: $_slider_min_length;
2444
}
2445
// button styling
2447
button {
2448
@extend %button-flat-basic;
2449
min-width: 16px;
2451
min-height: 16px;
2452
padding: 0;
2453
border-radius: 0;
2454
}
2455
// button icons
2457
&.vertical {
2458
button {
2459
&.down {
2460
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2461
}
2462
&.up {
2464
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2465
}
2466
}
2467
}
2468
&.horizontal {
2470
button {
2471
&.down {
2472
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2473
}
2474
&.up {
2476
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2477
}
2478
}
2479
}
2480
}
2481
/**********
2484
* Switch *
2485
**********/
2486
switch {
2487
transition: all $duration $ease-out;
2488
margin: $container-padding 0;
2489
padding: 0 2px;
2490
border: 5px solid transparent;
2491
border-radius: $circular-radius;
2492
background-color: $stroke;
2493
background-clip: padding-box;
2494
font-size: 0;
2495
&:checked {
2497
background-color: rgba($primary, 0.5);
2498
}
2499
&:disabled {
2501
opacity: 0.5;
2502
}
2503
// hide on/off icons for >=3.24.5
2505
image {
2506
margin: -8px;
2507
-gtk-icon-transform: scale(0);
2508
}
2509
slider {
2511
transition: all $duration $ease-out;
2512
min-width: 20px;
2513
min-height: 20px;
2514
margin: -3px -2px;
2515
border-radius: $circular-radius;
2516
outline: none;
2517
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2518
background-color: $switch-surface;
2519
}
2520
&:hover slider {
2522
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2523
}
2524
&:focus slider {
2526
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2527
}
2528
&:checked slider {
2530
background-color: $primary;
2531
color: $primary;
2532
}
2533
row:selected & {
2535
}
2536
}
2537
/*************************
2540
* Check and Radio items *
2541
*************************/
2542
// draw regular check and radio items using our PNG assets
2543
// all assets are rendered from assets.svg. never add pngs directly
2544
// selection-mode
2546
.view.content-view.check:not(list),
2547
.content-view:not(list) .tile check {
2548
min-height: 40px;
2549
min-width: 40px;
2550
margin: 0;
2551
padding: 0;
2552
box-shadow: none;
2553
background-color: transparent;
2554
background-image: none;
2555
-gtk-icon-shadow: $icon-shadow-z2;
2556
&:hover,
2558
&:active {
2559
-gtk-icon-shadow: $icon-shadow-z4;
2560
}
2561
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2563
&#{$class} {
2564
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2565
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2567
}
2568
}
2569
}
2570
checkbutton,
2572
radiobutton {
2573
outline: none;
2574
}
2575
checkbutton.text-button,
2577
radiobutton.text-button {
2578
// this is for a nice focus on check and radios text
2579
padding: 2px;
2580
label:not(:only-child) {
2582
margin: 0 4px;
2583
}
2584
}
2585
$check-radio-size: 40px;
2587
check,
2589
radio {
2590
min-height: 24px;
2591
min-width: 24px;
2592
margin: -($check-radio-size - 24px) / 2;
2593
padding: ($check-radio-size - 24px) / 2;
2594
border-radius: $circular-radius;
2595
@extend %ripple;
2597
@include ink-color($text2);
2598
&:checked,
2600
&:indeterminate {
2601
@include ink-color($primary);
2602
}
2603
&:disabled {
2605
color: $text2-disabled;
2606
}
2607
&:only-child {
2609
// margin: -12px;
2610
}
2611
popover modelbutton.flat & {
2613
&,
2614
&:focus,
2615
&:hover,
2616
&:focus:hover,
2617
&:active,
2618
&:disabled {
2619
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2620
box-shadow: none;
2621
background-image: none;
2622
}
2623
&.left:dir(rtl) {
2625
margin-left: -12px;
2626
margin-right: -4px;
2627
}
2628
&.right:dir(ltr) {
2630
margin-left: -4px;
2631
margin-right: -12px;
2632
}
2633
}
2634
menu menuitem & {
2636
transition: none;
2637
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2638
padding: 0;
2639
&:dir(ltr) {
2641
margin-right: 8px;
2642
}
2643
&:dir(rtl) {
2645
margin-left: 8px;
2646
}
2647
&,
2649
&:hover,
2650
&:disabled {
2651
box-shadow: none;
2652
}
2653
}
2654
}
2655
%check,
2657
check {
2658
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2659
&:checked {
2661
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2662
}
2663
&:indeterminate {
2665
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2666
}
2667
}
2668
%radio,
2670
radio {
2671
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2672
&:checked {
2674
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2675
}
2676
&:indeterminate {
2678
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2679
}
2680
border-image-slice: $check-radio-size / 2px;
2682
border-image-width: $check-radio-size / 2;
2683
$radio-indicator-size: 10px / $check-radio-size / 2;
2685
border-image-source:
2687
-gtk-gradient(
2688
radial,
2689
center center, 0,
2690
center center, .001,
2691
to($primary),
2692
to(transparent)
2693
);
2694
&:checked:not(:indeterminate) {
2696
border-image-source:
2697
-gtk-gradient(
2698
radial,
2699
center center, 0,
2700
center center, $radio-indicator-size,
2701
to($primary),
2702
to(transparent)
2703
);
2704
&:disabled {
2706
border-image-source:
2707
-gtk-gradient(
2708
radial,
2709
center center, 0,
2710
center center, $radio-indicator-size,
2711
to($text2-disabled),
2712
to(transparent)
2713
);
2714
}
2715
}
2716
}
2717
%small_check,
2719
menu menuitem check {
2720
min-height: 16px;
2721
min-width: 16px;
2722
border-radius: $corner-radius;
2723
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2724
&:checked {
2726
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2727
}
2728
&:indeterminate {
2730
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2731
}
2732
}
2733
%small_radio,
2735
menu menuitem radio {
2736
min-height: 16px;
2737
min-width: 16px;
2738
border-image: none;
2739
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2740
&:checked {
2742
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2743
}
2744
&:indeterminate {
2746
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2747
}
2748
}
2749
// ANIMATION:
2751
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2752
// the transformation is set on the active state and it get reset on the checked state.
2753
radio:not(:checked):active {
2754
// -gtk-icon-transform: scale(0);
2755
}
2756
// Otherwise, treeview.view styling will be applied...
2758
treeview.view check,
2759
treeview.view radio {
2760
padding: 0;
2761
color: $text2;
2762
&:checked,
2764
&:indeterminate {
2765
color: $primary;
2766
}
2767
&:disabled {
2769
color: $text2-disabled;
2770
}
2771
&,
2773
&:hover,
2774
&:selected,
2775
&:selected:hover {
2776
box-shadow: none;
2777
background-color: transparent;
2778
}
2779
}
2780
treeview.view radio:checked {
2782
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2783
border-image: none;
2784
}
2785
/************
2788
* GtkScale *
2789
************/
2790
scale {
2791
// sizing
2792
$_marks_length: 8px;
2793
$_marks_distance: 7px;
2794
$trough_size: 2px;
2796
$finetune_trough_size: 4px;
2797
$slider_size: 32px;
2799
$slider_margin: -($slider_size - $trough_size) / 2;
2801
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2802
$color_slider_margin: -($slider_size) * 3 / 4;
2804
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2805
min-height: $trough_size;
2807
min-width: $trough_size;
2808
&.horizontal {
2810
padding: ($medium-size - $trough_size) / 2 12px;
2811
}
2812
&.vertical {
2814
padding: 12px ($medium-size - $trough_size) / 2;
2815
}
2816
// the slider is inside the trough, so to have make it bigger there's a negative margin
2818
slider {
2819
min-height: $slider_size;
2820
min-width: $slider_size;
2821
margin: $slider_margin;
2822
}
2823
// click-and-hold the slider to activate
2825
&.fine-tune {
2826
&.horizontal {
2827
min-height: $finetune_trough_size;
2828
padding-top: ($medium-size - $finetune_trough_size) / 2;
2829
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2830
}
2831
&.vertical {
2833
min-width: $finetune_trough_size;
2834
padding-left: ($medium-size - $finetune_trough_size) / 2;
2835
padding-right: ($medium-size - $finetune_trough_size) / 2;
2836
}
2837
// to make the trough grow in fine-tune mode
2839
slider {
2840
margin: $finetune_slider_margin;
2841
}
2842
}
2843
// the backing bit
2845
trough {
2846
transition: background-color $duration $ease-out;
2847
outline: none;
2848
background-color: $stroke;
2849
&:disabled {
2851
background-color: $stroke-disabled;
2852
}
2853
}
2854
// the colored part of the backing bit
2856
highlight {
2857
transition: background-image $duration $ease-out;
2858
background-image: image($primary);
2859
&:disabled {
2861
background-color: $background;
2862
background-image: image($text2-disabled);
2863
}
2864
}
2865
// this is another differently styled part of the backing bit, the most relevant use case is for example
2867
// in media player to indicate how much video stream as been cached
2868
fill {
2869
transition: background-color $duration $ease-out;
2870
background-color: $stroke;
2871
&:disabled {
2873
background-color: transparent;
2874
}
2875
}
2876
slider {
2878
transition: background-color $duration $ease-out,
2879
background-size $ripple-fade-out-duration $ease-out,
2880
background-image $ripple-fade-out-opacity-duration $ease-out;
2881
background-repeat: no-repeat;
2882
background-position: center;
2883
background-size: auto, 1000% 1000%;
2884
border-radius: 50%;
2885
color: $primary;
2886
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2888
&#{$class} {
2889
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2890
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2892
radial-gradient(circle, transparent 10%, transparent 0%);
2893
}
2894
}
2895
&:hover {
2897
background-color: $overlay-hover;
2898
}
2899
&:focus {
2901
background-color: $overlay-focus;
2902
}
2903
&:active {
2905
$_url: 'assets/scale-slider#{$asset-suffix}';
2906
transition: background-color $duration $ease-out,
2908
background-size 0ms,
2909
background-image 0ms;
2910
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2911
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2912
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2913
background-size: auto, 0% 0%;
2914
}
2915
}
2916
marks,
2918
value {
2919
color: $text2;
2920
}
2921
indicator {
2923
background-color: $stroke;
2924
color: transparent;
2925
}
2926
//marks margins
2928
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2929
(horizontal, bottom, bottom, top),
2930
(vertical, top, left, right),
2931
(vertical, bottom, right, left) {
2932
&.#{$scale_orient} marks {
2933
&.#{$marks_class} {
2934
margin-#{$marks_margin}: $_marks_distance;
2935
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2936
}
2937
}
2938
&.#{$scale_orient}.fine-tune marks {
2940
&.#{$marks_class} {
2941
margin-#{$marks_margin}: $_marks_distance - 1px;
2942
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2943
}
2944
}
2945
}
2946
&.horizontal {
2948
indicator {
2949
min-height: $_marks_length;
2950
min-width: 1px;
2951
}
2952
}
2953
&.vertical {
2955
indicator {
2956
min-height: 1px;
2957
min-width: $_marks_length;
2958
}
2959
}
2960
// *WARNING* scale with marks madness following
2962
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2964
@each $marks_class, $marks_infix in (
2965
".marks-before:not(.marks-after)": "-marks-before",
2966
".marks-after:not(.marks-before)": "-marks-after"
2967
) {
2968
&#{$dir_class}#{$marks_class} {
2969
slider {
2970
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2971
&#{$state_class} {
2972
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2973
background-image:
2975
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2976
radial-gradient(circle, transparent 10%, transparent 0%);
2977
}
2978
}
2979
&:active {
2981
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2982
background-image:
2984
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2985
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2986
}
2987
}
2988
}
2989
}
2990
}
2991
&.color {
2993
min-height: 0;
2994
min-width: 0;
2995
&.horizontal {
2997
padding: 0 0 12px 0;
2998
slider {
3000
&:dir(ltr), &:dir(rtl) { // specificity bump
3001
margin-bottom: $color_slider_margin;
3002
margin-top: $color_marks_slider_margin;
3003
}
3004
}
3005
}
3006
&.vertical {
3008
&:dir(ltr) {
3009
padding: 0 0 0 12px;
3010
slider {
3012
margin-left: $color_slider_margin;
3013
margin-right: $color_marks_slider_margin;
3014
}
3015
}
3016
&:dir(rtl) {
3018
padding: 0 12px 0 0;
3019
slider {
3021
margin-right: $color_slider_margin;
3022
margin-left: $color_marks_slider_margin;
3023
}
3024
}
3025
}
3026
}
3027
}
3028
/*****************
3031
* Progress bars *
3032
*****************/
3033
progressbar {
3034
// sizing
3035
&.horizontal {
3036
trough,
3037
progress {
3038
min-height: $bar-size;
3039
}
3040
}
3041
&.vertical {
3043
trough,
3044
progress {
3045
min-width: $bar-size;
3046
}
3047
}
3048
// FIXME: insensitive state missing and some other state should be set probably
3050
color: $text2;
3051
font-size: smaller;
3052
trough {
3054
background-color: $stroke-disabled;
3055
}
3056
progress {
3058
background-color: $primary;
3059
}
3060
&.osd { // progressbar.osd used for epiphany page loading progress
3062
// min-width: $bar-size;
3063
// min-height: $bar-size;
3064
// background-color: transparent;
3065
trough {
3067
// background-color: transparent;
3068
}
3069
progress {
3071
// background-color: $primary;
3072
}
3073
}
3074
// makes the progress indicator disappear, when the fraction is 0
3076
trough.empty progress {
3077
all: unset;
3078
}
3079
}
3080
/*************
3083
* Level Bar *
3084
*************/
3085
levelbar {
3086
&.horizontal {
3087
block {
3088
min-height: $bar-size;
3089
}
3090
&.discrete block {
3092
min-width: $medium-size;
3093
&:not(:last-child) {
3095
margin-right: 2px;
3096
}
3097
}
3098
}
3099
&.vertical {
3101
block {
3102
min-width: $bar-size;
3103
}
3104
&.discrete block {
3106
min-height: $medium-size;
3107
&:not(:last-child) {
3109
margin-bottom: 2px;
3110
}
3111
}
3112
}
3113
// imitate the entry style
3115
trough {
3116
// padding: 2px;
3117
// border-radius: $corner-radius;
3118
// box-shadow: $shadow-z1;
3119
// background-color: $base;
3120
&:disabled {
3122
// background-color: $base-alt;
3123
}
3124
}
3125
block {
3127
&.low {
3128
background-color: $warning;
3129
}
3130
&.high,
3132
&:not(.empty) {
3133
background-color: $primary;
3134
}
3135
&.full {
3137
background-color: $success;
3138
}
3139
&.empty {
3141
background-color: $stroke-disabled;
3142
}
3143
}
3144
}
3145
/****************
3148
* Print dialog *
3149
*****************/
3150
printdialog {
3151
paper {
3152
padding: 0;
3153
border: 1px solid $divider;
3154
background-color: $base;
3155
color: $text;
3156
}
3157
.dialog-action-box {
3159
margin: 12px;
3160
}
3161
}
3162
/**********
3165
* Frames *
3166
**********/
3167
frame > border,
3168
.frame {
3169
margin: 0;
3170
padding: 0;
3171
border: 1px solid $divider;
3172
border-radius: 0;
3173
box-shadow: none;
3174
&.flat {
3176
border-style: none;
3177
}
3178
}
3179
// for backward compatibility
3181
frame.flat > border {
3182
border-style: none;
3183
}
3184
actionbar > revealer > box {
3186
padding: $container-padding;
3187
border-top: 1px solid $divider;
3188
background-color: $base;
3189
background-clip: border-box;
3190
button:not(.suggested-action):not(.destructive-action) {
3192
@extend %button-flat;
3193
}
3194
.linked:not(.vertical) > entry:not(:only-child) {
3196
border-radius: $corner-radius $corner-radius 0 0;
3197
}
3198
}
3199
scrolledwindow {
3201
viewport.frame { // avoid double borders when viewport inside scrolled window
3202
border-style: none;
3203
}
3204
// This is used when content is touch-dragged past boundaries.
3206
// draws a box on top of the content, the size changes programmatically.
3207
@at-root overshoot {
3208
&.top { @include overshoot(top); }
3209
&.bottom { @include overshoot(bottom); }
3211
&.left { @include overshoot(left); }
3213
&.right { @include overshoot(right); }
3215
}
3216
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3218
@at-root undershoot {
3219
&.top { @include undershoot(top); }
3220
&.bottom { @include undershoot(bottom); }
3222
&.left { @include undershoot(left); }
3224
&.right { @include undershoot(right); }
3226
}
3227
@at-root junction { // the small square between two scrollbars
3229
border-style: solid none none solid;
3230
border-width: 1px;
3231
border-color: $divider;
3232
background-color: $base;
3233
&:dir(rtl) {
3235
border-style: solid solid none none;
3236
}
3237
}
3238
}
3239
// vbox and hbox separators
3241
separator {
3242
min-width: 1px;
3243
min-height: 1px;
3244
background-color: $divider;
3245
}
3246
%hide_separators {
3248
min-width: 0;
3249
min-height: 0;
3250
background-color: transparent;
3251
}
3252
/*********
3255
* Lists *
3256
*********/
3257
list {
3258
border-color: $divider;
3259
background-color: $base;
3260
row {
3262
padding: 2px;
3263
}
3264
}
3265
row {
3267
&.activatable {
3268
@extend %ripple;
3269
@include ink-color($text, $fg: false);
3270
@include list-item;
3271
// this is for indicathing which row generated a popover
3273
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3274
&.has-open-popup {
3275
background-color: $overlay-checked;
3276
}
3277
}
3278
&:selected {
3280
@extend %selected_items;
3281
@include ink-color($primary, $fg: false);
3283
}
3284
}
3285
/*********************
3288
* App Notifications *
3289
*********************/
3290
.app-notification {
3291
// @extend %osd;
3292
@extend %toolbar-osd;
3294
margin: 8px;
3296
button {
3298
@extend %button-flat;
3299
&.text-button:not(:disabled) {
3301
@include ink-color($primary);
3302
}
3303
}
3304
&.frame,
3306
border {
3307
border-style: none;
3308
}
3309
}
3310
/*************
3313
* Expanders *
3314
*************/
3315
expander {
3316
title > arrow {
3317
transition: all $duration $ease-out;
3318
min-width: 16px;
3319
min-height: 16px;
3320
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3321
-gtk-icon-transform: rotate(-90deg);
3322
&:dir(rtl) {
3324
-gtk-icon-transform: rotate(90deg);
3325
}
3326
&:checked {
3328
-gtk-icon-transform: unset;
3329
}
3330
color: $text2;
3332
&:hover,
3334
&:active {
3335
color: $text;
3336
}
3337
&:disabled {
3339
color: $text2-disabled;
3340
}
3341
}
3342
}
3343
/************
3346
* Calendar *
3347
************/
3348
calendar {
3349
padding: 1px;
3350
border: 1px solid $divider;
3351
color: $text;
3352
&:disabled {
3354
color: $text-disabled;
3355
}
3356
&:selected {
3358
@extend %selected_items;
3359
border-radius: $corner-radius + 1px;
3361
}
3362
&.header {
3364
border-style: none none solid;
3365
border-color: $divider;
3366
border-radius: 0;
3367
}
3368
&.button {
3370
border-radius: $corner-radius + 1px;
3371
color: $text2;
3372
&:hover {
3374
background-image: image($overlay-hover);
3375
}
3376
&:disabled {
3378
color: $text2-disabled;
3379
}
3380
}
3381
&.highlight {
3383
color: $text2;
3384
font-weight: 500;
3385
}
3386
&:indeterminate {
3388
color: $text2-disabled;
3389
}
3390
}
3391
/***********
3394
* Dialogs *
3395
***********/
3396
messagedialog { // Message Dialog styling
3397
&.background {
3398
background-color: $surface;
3399
}
3400
.titlebar {
3402
min-height: $small-size;
3403
border-style: none;
3404
box-shadow: inset 0 1px highlight($surface);
3405
background-color: $surface;
3406
color: $text;
3407
&:backdrop {
3409
background-color: $surface;
3410
color: $text2;
3411
}
3412
}
3413
&.csd { // rounded bottom border styling for csd version
3415
&.background {
3416
// bigger radius for better antialiasing
3417
border-bottom-left-radius: $corner-radius;
3418
border-bottom-right-radius: $corner-radius;
3419
}
3420
}
3421
// Hint text
3423
box.vertical > label + label {
3424
color: $text2;
3425
}
3426
.dialog-action-box {
3428
margin-top: -$container-padding;
3429
// padding: $container-padding;
3430
button:not(:last-child) {
3432
margin-right: $container-padding;
3433
}
3434
}
3435
}
3436
.dialog-action-box button {
3438
@extend %button-flat;
3439
&:not(:disabled) {
3441
@include ink-color($primary);
3442
}
3443
&.suggested-action:not(:disabled) {
3445
background-color: transparent;
3446
// @include ink-color($primary);
3447
}
3448
&.destructive-action:not(:disabled) {
3450
background-color: transparent;
3451
@include ink-color($error);
3452
}
3453
}
3454
filechooser {
3456
.dialog-action-box {
3457
border-top: 1px solid $divider;
3458
}
3459
#pathbarbox {
3461
border-bottom: 1px solid $divider;
3462
background-color: $background;
3463
> stack > box > button { // The new folder button
3465
@extend %button-flat;
3466
border-radius: $circular-radius;
3468
}
3469
}
3470
}
3471
filechooserbutton:drop(active) {
3473
// box-shadow: none;
3474
}
3475
/***********
3478
* Sidebar *
3479
***********/
3480
.sidebar {
3481
border-style: none;
3482
background-color: $base-alt;
3483
&:not(separator) {
3485
@at-root %sidebar_left,
3486
&:dir(ltr),
3487
&.left,
3488
&.left:dir(rtl) {
3489
border-right: 1px solid $divider;
3490
border-left-style: none;
3491
}
3492
@at-root %sidebar_right,
3494
&:dir(rtl),
3495
&.right {
3496
border-left: 1px solid $divider;
3497
border-right-style: none;
3498
}
3499
}
3500
list {
3502
background-color: transparent;
3503
}
3504
paned & {
3506
&,
3507
&.left,
3508
&.right,
3509
&.left:dir(rtl),
3510
&:dir(rtl),
3511
&:dir(ltr) {
3512
border-style: none;
3513
}
3514
}
3515
}
3516
stacksidebar.sidebar {
3518
& {
3519
&:dir(ltr),
3520
&.left,
3521
&.left:dir(rtl) {
3522
list {
3523
@extend %sidebar_left;
3524
}
3525
}
3526
&:dir(rtl),
3528
&.right {
3529
list {
3530
@extend %sidebar_right;
3531
}
3532
}
3533
}
3534
+ separator.vertical,
3536
separator.horizontal {
3537
@extend %hide_separators;
3538
}
3539
list {
3541
padding: 4px;
3542
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3543
}
3544
row {
3546
min-height: 32px;
3547
padding: 0 8px - 6px;
3548
border-radius: $corner-radius;
3549
&:selected {
3551
font-weight: 500;
3552
@include ink-color($primary, $activated: true);
3553
}
3554
+ row {
3556
margin-top: 4px;
3557
}
3558
> label {
3560
padding-left: 6px;
3561
padding-right: 6px;
3562
}
3563
&.needs-attention > label {
3565
@extend %needs-attention;
3566
}
3567
}
3568
}
3569
separator.sidebar {
3571
background-color: $divider;
3572
&.selection-mode,
3574
.selection-mode & {
3575
// background-color: $divider;
3576
}
3577
}
3578
/****************
3581
* File chooser *
3582
****************/
3583
// dim the sidebar icons, see bug #786613 for details on this oddity
3584
row image.sidebar-icon {
3585
transition: color $duration $ease-out;
3586
color: $text2;
3587
&:disabled {
3589
color: $text2-disabled;
3590
}
3591
}
3592
placessidebar.sidebar {
3594
> viewport.frame {
3595
border-style: none;
3596
}
3597
list {
3599
padding: (4px - 3px) 0 4px;
3600
}
3601
row {
3603
// Needs overriding of the GtkListBoxRow padding
3604
min-height: 32px;
3605
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3606
padding: 0;
3607
border-radius: $corner-radius;
3608
// Using margins/padding directly in the SidebarRow
3610
// will make the animation of the new bookmark row jump
3611
> revealer {
3612
padding: 0 8px;
3613
}
3614
&:selected {
3616
font-weight: 500;
3617
@include ink-color($primary, $activated: true);
3618
image.sidebar-icon {
3620
color: $primary;
3621
}
3622
}
3623
&:disabled {
3625
color: $text-disabled;
3626
}
3627
image.sidebar-icon {
3629
&:dir(ltr) {
3630
padding-right: 8px;
3631
}
3632
&:dir(rtl) {
3634
padding-left: 8px;
3635
}
3636
}
3637
label.sidebar-label {
3639
&:dir(ltr) {
3640
padding-right: 2px;
3641
}
3642
&:dir(rtl) {
3644
padding-left: 2px;
3645
}
3646
}
3647
@at-root button.sidebar-button {
3649
@extend %button-flat-basic;
3650
@extend %button-small;
3651
}
3652
&.sidebar-placeholder-row {
3654
background-color: $overlay-hover;
3655
}
3656
&.sidebar-new-bookmark-row {
3658
color: $primary;
3659
image.sidebar-icon {
3661
color: $primary;
3662
}
3663
}
3664
}
3665
}
3666
placesview {
3668
.server-list-button {
3669
> image {
3670
-gtk-icon-transform: rotate(0turn);
3671
}
3672
&:checked > image {
3674
-gtk-icon-transform: rotate(-0.5turn);
3675
}
3676
}
3677
// this selects the "connect to server" label
3679
> actionbar > revealer > box > label {
3680
padding-left: 8px;
3681
padding-right: 8px;
3682
}
3683
}
3684
/*********
3687
* Paned *
3688
*********/
3689
paned {
3690
> separator {
3691
min-width: 1px;
3692
min-height: 1px;
3693
-gtk-icon-source: none; // defeats the ugly default handle decoration
3694
border-style: none; // just to be sure
3695
background-color: transparent;
3696
// workaround, using background istead of a border since the border will get rendered twice (?)
3697
background-image: image($divider);
3698
background-size: 1px 1px;
3699
background-clip: content-box; // avoids borders image being rendered twice (?)
3700
&.wide {
3702
min-width: 6px;
3703
min-height: 6px;
3704
background-color: $background;
3705
background-image: image($divider), image($divider);
3706
background-size: 1px 1px, 1px 1px;
3707
}
3708
}
3709
&.horizontal > separator {
3711
background-repeat: repeat-y;
3712
&:dir(ltr) {
3714
margin: 0 -8px 0 0;
3715
padding: 0 8px 0 0;
3716
background-position: left;
3717
}
3718
&:dir(rtl) {
3720
margin: 0 0 0 -8px;
3721
padding: 0 0 0 8px;
3722
background-position: right;
3723
}
3724
&.wide {
3726
margin: 0;
3727
padding: 0;
3728
background-repeat: repeat-y, repeat-y;
3729
background-position: left, right;
3730
}
3731
}
3732
&.vertical > separator {
3734
margin: 0 0 -8px 0;
3735
padding: 0 0 8px 0;
3736
background-repeat: repeat-x;
3737
background-position: top;
3738
&.wide {
3740
margin: 0;
3741
padding: 0;
3742
background-repeat: repeat-x, repeat-x;
3743
background-position: bottom, top;
3744
}
3745
}
3746
}
3747
/**************
3750
* GtkInfoBar *
3751
**************/
3752
infobar {
3753
border-style: none;
3754
&.info,
3756
&.question {
3757
border-bottom: 1px solid $divider;
3758
background-color: $base;
3759
button {
3761
@extend %button-flat;
3762
&.text-button:not(:disabled) {
3764
@include ink-color($primary);
3765
}
3766
}
3767
}
3768
&.warning {
3770
background-color: $warning;
3771
color: on($warning);
3772
button.flat {
3774
@include ink-color(on($warning));
3775
}
3776
selection {}
3778
*:link {
3780
color: on($warning);
3781
}
3782
}
3783
&.error {
3785
background-color: $error;
3786
color: on($error);
3787
button.flat {
3789
@include ink-color(on($error));
3790
}
3791
selection {}
3793
*:link {
3795
color: on($error);
3796
}
3797
}
3798
// Remove ugly hard-coded padding
3800
button label {
3801
margin: 0 -4px;
3802
}
3803
}
3804
/************
3807
* Tooltips *
3808
************/
3809
tooltip {
3810
&.background {
3811
// background-color needs to be set this way otherwise it gets drawn twice
3812
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3813
background-color: $tooltip;
3814
color: on($tooltip);
3815
}
3816
// padding: 4px; /* not working */
3818
border-radius: $corner-radius;
3819
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3820
&:not(.csd):not(.unity-csd) {
3822
// border: 1px solid $divider;
3823
// border-radius: $corner-radius + 1px;
3824
// background-clip: $background-clip-extra;
3825
}
3826
// FIXME: we need a border or tooltips vanish on black background.
3828
decoration {
3829
background-color: transparent;
3830
}
3831
> box {
3833
margin: -6px; // Remove hard-coded 6px margin
3834
min-height: 32px - 4px * 2;
3835
padding: 4px 8px;
3836
}
3837
.dim-label {
3839
color: on($tooltip, text2);
3840
}
3841
* {
3843
// workaround for Eclipse.
3844
// do not include any declaration here.
3845
}
3846
}
3847
/*****************
3850
* Color Chooser *
3851
*****************/
3852
colorswatch {
3853
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3854
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3855
// applied to the overlay box.
3856
// base color corners rounding
3858
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3859
// sports a bigger radius.
3860
// nth-child is needed by the custom color strip.
3861
&.top {
3863
border-top-left-radius: $corner-radius + 0.5px;
3864
border-top-right-radius: $corner-radius + 0.5px;
3865
overlay {
3867
border-top-left-radius: $corner-radius;
3868
border-top-right-radius: $corner-radius;
3869
}
3870
}
3871
&.bottom {
3873
border-bottom-left-radius: $corner-radius + 0.5px;
3874
border-bottom-right-radius: $corner-radius + 0.5px;
3875
overlay {
3877
border-bottom-left-radius: $corner-radius;
3878
border-bottom-right-radius: $corner-radius;
3879
}
3880
}
3881
&.left,
3883
&:first-child:not(.top) {
3884
border-top-left-radius: $corner-radius + 0.5px;
3885
border-bottom-left-radius: $corner-radius + 0.5px;
3886
overlay {
3888
border-top-left-radius: $corner-radius;
3889
border-bottom-left-radius: $corner-radius;
3890
}
3891
}
3892
&.right,
3894
&:last-child:not(.bottom) {
3895
border-top-right-radius: $corner-radius + 0.5px;
3896
border-bottom-right-radius: $corner-radius + 0.5px;
3897
overlay {
3899
border-top-right-radius: $corner-radius;
3900
border-bottom-right-radius: $corner-radius;
3901
}
3902
}
3903
&.dark {
3905
color: on(dark);
3906
}
3907
&.light {
3909
color: on(light);
3910
}
3911
overlay {
3913
transition: $transition-shadow;
3914
box-shadow: $shadow-z1;
3915
&:drop(active),
3917
&:hover {
3918
box-shadow: $shadow-z3;
3919
}
3920
}
3921
&#add-color-button {
3923
border-radius: $corner-radius $corner-radius 0 0;
3924
color: $text;
3925
&:only-child {
3927
border-radius: $corner-radius;
3928
}
3929
overlay {
3931
background-color: $surface;
3932
}
3933
}
3934
&:disabled {
3936
opacity: 0.5;
3937
overlay {
3939
box-shadow: none;
3940
}
3941
}
3942
row:selected & {
3944
}
3945
&#editor-color-sample {
3947
border-radius: $corner-radius + 0.5px;
3948
overlay {
3950
border-radius: $corner-radius;
3951
&:hover {
3953
// box-shadow: $shadow-z1;
3954
}
3955
}
3956
}
3957
}
3958
// colorscale popup
3960
colorchooser .popover.osd {
3961
transition: $transition-shadow;
3962
border-radius: $corner-radius;
3963
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3964
background-color: $surface;
3965
&:backdrop {
3967
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3968
}
3969
}
3970
/********
3973
* Misc *
3974
********/
3975
// content view (grid/list)
3976
.content-view {
3977
background-color: $background;
3978
&:hover {
3980
// -gtk-icon-effect: highlight;
3981
}
3982
rubberband,
3984
.rubberband {
3985
@extend rubberband;
3986
}
3987
}
3988
.scale-popup {
3990
.osd & {
3991
// @extend %osd;
3992
button.flat { // FIXME: quick hack, redo properly
3994
}
3995
}
3996
button { // +/- buttons on GtkVolumeButton popup
3998
}
3999
}
4000
/**********************
4003
* Window Decorations *
4004
**********************/
4005
decoration {
4006
transition: $transition-shadow;
4007
border-radius: $corner-radius $corner-radius 0 0;
4008
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4009
// FIXME rationalize shadows
4011
// this is used for the resize cursor area
4013
margin: 8px;
4014
&:backdrop {
4016
// the transparent shadow here is to enforce that the shadow extents don't
4017
// change when we go to backdrop, to prevent jumping windows.
4018
// The biggest shadow should be in the same order then in the active state
4019
// or the jumping will happen during the transition.
4020
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4021
}
4022
.maximized &,
4024
.fullscreen &,
4025
.tiled &,
4026
.tiled-top &,
4027
.tiled-right &,
4028
.tiled-bottom &,
4029
.tiled-left & {
4030
border-radius: 0;
4031
}
4032
.popup & {
4034
box-shadow: none;
4035
}
4036
// server-side decorations as used by mutter
4038
.ssd & {
4039
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4040
}
4041
.csd.popup & {
4043
border-radius: $corner-radius;
4044
box-shadow: $shadow-z4;
4045
}
4046
tooltip.csd & {
4048
border-radius: $corner-radius;
4049
box-shadow: none;
4050
}
4051
messagedialog.csd & {
4053
border-radius: $corner-radius;
4054
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4055
&:backdrop {
4057
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4058
}
4059
}
4060
.solid-csd & {
4062
margin: 0;
4063
padding: 2px;
4064
border-radius: 0;
4065
box-shadow: none;
4066
box-shadow: inset 0 1px highlight($titlebar);
4067
background-color: $titlebar;
4068
&:backdrop {
4070
background-color: $titlebar-backdrop;
4071
}
4072
}
4073
}
4074
// Window Close button
4076
button.titlebutton {
4077
border-radius: $circular-radius;
4078
.selection-mode & {
4080
}
4081
}
4082
// catch all extend :)
4085
%selected_items {
4087
background-color: $overlay-selected;
4088
}
4089
.monospace {
4091
font-family: monospace;
4092
}
4093
/**********************
4096
* Touch Copy & Paste *
4097
**********************/
4098
// touch selection handlebars for the Popover.osd above
4099
cursor-handle {
4100
color: $primary;
4101
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4102
&.top:dir(ltr),
4104
&.bottom:dir(rtl) {
4105
-gtk-icon-transform: rotate(90deg);
4106
}
4107
&.bottom:dir(ltr),
4109
&.top:dir(rtl) {
4110
-gtk-icon-transform: unset;
4111
}
4112
&.insertion-cursor:dir(ltr),
4114
&.insertion-cursor:dir(rtl) {
4115
padding-top: 6px;
4116
-gtk-icon-transform: rotate(45deg);
4117
}
4118
}
4119
// Decouple the font of context menus from their entry/textview
4121
.context-menu {
4122
font: initial;
4123
}
4124
// shortcut window keys
4126
.keycap {
4127
min-width: 28px - 8px * 2;
4128
min-height: 28px - 2px;
4129
margin-top: 2px;
4130
padding-bottom: 2px;
4131
padding-left: 8px;
4132
padding-right: 8px;
4133
border: solid 1px $divider;
4135
border-radius: $corner-radius + 1px;
4136
box-shadow: inset 0 -2px $divider;
4137
background-color: $surface;
4138
color: $text;
4139
font-size: smaller;
4140
}
4141
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4143
// caret-color: $primary;
4144
}
4145
stackswitcher button.text-button { // FIXME aggregate with buttons
4147
min-width: 100px;
4148
}
4149
stackswitcher button.circular,
4151
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4152
min-width: $medium-size;
4153
min-height: $medium-size;
4154
padding: 0;
4155
}
4156
/*************
4159
* App Icons *
4160
*************/
4161
// Outline for low res icons
4162
.lowres-icon {
4163
// -gtk-icon-shadow: none;
4164
}
4165
// Drapshadow for large icons
4167
.icon-dropshadow {
4168
// -gtk-icon-shadow: none;
4169
}
4170
/*********
4173
* Emoji *
4174
*********/
4175
popover.emoji-picker {
4176
padding: 0;
4177
entry {
4179
border-bottom: 1px solid $divider;
4180
border-image: none;
4181
border-radius: 0;
4182
box-shadow: none;
4183
background-color: transparent;
4184
}
4185
scrolledwindow {
4187
border-bottom: 1px solid $divider;
4188
}
4189
}
4190
button.emoji-section {
4192
margin: 4px;
4193
&:checked {
4195
// background-color: transparent;
4196
@include ink-color($primary, $activated: true);
4197
}
4198
&:not(:last-child) {
4200
margin-right: 0;
4201
}
4202
}
4203
popover.emoji-picker .emoji {
4205
min-width: 3em;
4206
min-height: 3em;
4207
padding: 0 8px;
4208
// font-size: larger;
4209
widget {
4211
transition: $transition;
4212
border-radius: $corner-radius;
4213
&:hover {
4215
background-color: $overlay-hover;
4216
}
4217
}
4218
}
4219
popover.emoji-completion {
4221
padding: 8px 0;
4222
arrow {
4224
border: none;
4225
background: none;
4226
}
4227
.emoji-completion-row {
4229
min-height: $menuitem-size;
4230
padding: 0 12px;
4231
}
4232
.emoji:hover {
4234
background-color: $overlay-hover;
4235
}
4236
}
4237