ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: $overlay-checked;
35
}
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px $overlay-hover;
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px rgba($primary, 0.08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
}
112
border {
114
background-color: $base-alt;
115
color: $text2; // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: on(dark);
126
text-shadow: $text-shadow;
127
}
128
.rubberband,
130
rubberband {
131
border: 1px solid on(dark, primary);
132
background-color: rgba(on(dark, primary), 0.3);
133
}
134
flowbox {
136
rubberband {
137
@extend rubberband;
138
}
139
flowboxchild {
141
padding: 4px;
142
border-radius: $corner-radius;
143
&:selected {
145
@extend %selected_items;
146
}
147
}
148
}
149
.content-view .tile {
151
// margin: 2px;
152
// padding: 0;
153
// border-radius: 0;
154
// background-color: black;
155
&:selected {
157
background-color: transparent;
158
}
159
}
160
label {
162
caret-color: currentColor; // this shouldn't be needed.
163
&.separator {
165
color: $text2;
166
}
167
selection {
169
@extend %selected_items;
170
}
171
&:disabled {
173
color: $text-disabled;
174
selection {
176
// @extend %selected_items:disabled;
177
}
178
headerbar &,
180
menuitem &,
181
tab &,
182
button & {
183
color: inherit;
184
}
185
}
186
&.osd {
188
border-radius: $corner-radius;
189
background-color: $tooltip;
190
color: on($tooltip);
191
}
192
}
193
.dim-label {
195
color: $text2;
196
}
197
assistant {
199
.sidebar {
200
padding: 4px 0;
201
// background-color: $base;
202
}
203
.sidebar label {
205
min-height: $medium-size;
206
padding: 0 12px;
207
color: $text-disabled;
208
font-weight: 500;
209
&.highlight {
211
color: $text;
212
}
213
}
214
}
215
%osd,
217
.osd {
218
// opacity: .9;
219
}
220
/*********************
223
* Spinner Animation *
224
*********************/
225
@keyframes spin {
226
to {
227
-gtk-icon-transform: rotate(1turn);
228
}
229
}
230
spinner {
232
background: none;
233
opacity: 0; // non spinning spinner makes no sense
234
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
235
&:checked {
237
opacity: 1;
238
animation: spin 1s linear infinite;
239
&:disabled { opacity: 0.5; }
241
}
242
}
243
/****************
246
* Text Entries *
247
****************/
248
%entry,
249
entry {
250
min-height: $medium-size;
251
padding: 0 8px;
252
border-radius: $corner-radius $corner-radius 0 0;
253
caret-color: currentColor; // this shouldn't be needed.
254
@include entry(normal);
256
&:focus {
258
@include entry(checked);
259
}
260
&:drop(active) {
262
@include entry(hover);
263
}
264
&:disabled {
266
@include entry(disabled);
267
}
268
&.flat {
270
min-height: 0;
271
padding: 2px;
272
border-radius: 0;
273
background-color: transparent;
274
}
275
// icons inside the entry
277
image {
278
// min-height: $small-size;
279
// min-width: $small-size;
280
// border-radius: $circular-radius;
281
// @extend %ripple;
282
// @include ink-color($text2);
283
color: $text2;
284
&:hover,
286
&:active {
287
color: $text;
288
}
289
&:disabled {
291
color: $text-disabled;
292
}
293
&.left {
295
margin-left: ($medium-size - 16px) / 2 - 8px;
296
margin-right: 6px;
297
}
298
&.right {
300
margin-left: 6px;
301
margin-right: ($medium-size - 16px) / 2 - 8px;
302
}
303
}
304
undershoot {
306
&.left {
307
@include undershoot(left);
308
}
309
&.right {
311
@include undershoot(right);
312
}
313
}
314
selection {
316
@extend %selected_items;
317
}
318
// entry error and warning style
320
@each $class, $color in (".error": $error, ".warning": $warning) {
321
&#{$class} {
322
@include entry(normal, $color);
323
&:focus {
325
@include entry(checked, $color);
326
}
327
&:disabled {
329
@include entry(disabled, $color);
330
}
331
}
332
}
333
.osd & {
335
}
336
progress {
338
margin: 2px -8px;
339
border-bottom: 2px solid $primary;
340
background-color: transparent;
341
}
342
// linked entries
344
.linked:not(.vertical) > & {
345
@extend %linked;
346
}
347
// Vertically linked entries
349
.linked.vertical > & {
350
@extend %linked-vertical;
351
}
352
}
353
%entry_raised {
355
border-radius: $corner-radius;
356
@include entry(raised-normal);
358
&:focus {
360
@include entry(raised-focus);
361
}
362
&:drop(active) {
364
@include entry(raised-hover);
365
}
366
&:disabled {
368
@include entry(raised-disabled);
369
}
370
// entry error and warning style
372
@each $class, $color in (".error": $error, ".warning": $warning) {
373
&#{$class} {
374
@include entry(raised-normal, $color);
375
&:focus {
377
@include entry(raised-focus, $color);
378
}
379
&:disabled {
381
@include entry(raised-disabled, $color);
382
}
383
image {
385
color: on($color, text2);
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: on($color, text-disabled);
394
}
395
}
396
}
397
}
398
}
399
treeview entry {
401
&,
402
&.flat {
403
background-color: $base;
404
&,
406
&:focus {
407
border-image: none;
408
box-shadow: none;
409
}
410
}
411
}
412
.entry-tag {
414
margin: 2px;
415
border-radius: $circular-radius;
416
box-shadow: none;
417
background-color: $fill;
418
color: $text;
419
&:hover {
421
background-image: image($overlay-hover);
422
}
423
// side margins: compensate the entry padding with a negative margin
425
// then the negative margin itself
426
:dir(ltr) & {
427
margin-left: 4px;
428
margin-right: 0;
429
padding-left: 12px;
430
padding-right: 8px;
431
}
432
:dir(rtl) & {
434
margin-left: 0;
435
margin-right: 4px;
436
padding-left: 8px;
437
padding-right: 12px;
438
}
439
// seems any sizing doesn't work
441
&.button {
442
box-shadow: none;
443
background-color: transparent;
444
color: $text2;
445
}
446
}
447
/***********
450
* Buttons *
451
***********/
452
// stuff for .needs-attention
453
@keyframes needs-attention {
454
from {
455
background-image:
456
-gtk-gradient(
457
radial,
458
center center, 0,
459
center center, .001,
460
to($primary),
461
to(transparent)
462
);
463
}
464
to {
466
background-image:
467
-gtk-gradient(
468
radial,
469
center center, 0,
470
center center, .5,
471
to($primary),
472
to(transparent)
473
);
474
}
475
}
476
%button,
478
button {
479
min-height: 24px;
480
min-width: 16px;
481
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
482
border-radius: $corner-radius;
483
background-color: $surface;
484
color: $text;
485
font-weight: 500;
486
@extend %ripple;
488
@include raised-ink-color($text);
489
&:disabled {
491
box-shadow: none;
492
background-color: $fill;
493
color: $text-disabled;
494
}
495
&:checked {
497
background-color: mix($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
&:disabled {
972
color: $text-disabled;
973
}
974
entry {
976
@extend %entry_raised;
977
min-height: $medium-size;
979
min-width: $large-size;
980
padding: 0;
981
}
982
button {
984
min-height: $medium-size;
985
min-width: $large-size;
986
padding: 0;
987
@extend %button-flat-basic;
989
// Remove unwanted focus indicator
991
&:focus:not(:hover):not(:active) {
992
box-shadow: inset 0 0 0 9999px transparent;
993
}
994
&.up {
996
border-radius: $corner-radius $corner-radius 0 0;
997
}
998
&.down {
1000
border-radius: 0 0 $corner-radius $corner-radius;
1001
}
1002
}
1003
}
1004
// OSD vertical
1006
.osd &.vertical {
1007
}
1008
// Misc
1010
treeview &:not(.vertical) {
1011
min-height: 0;
1012
border-style: none;
1013
border-radius: 0;
1014
entry {
1016
min-height: 0;
1017
padding: 1px 2px;
1018
}
1019
}
1020
}
1021
/**************
1024
* ComboBoxes *
1025
**************/
1026
combobox {
1027
arrow {
1028
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1029
min-height: 16px;
1030
min-width: 16px;
1031
}
1032
// workaround for menuitem selection
1034
decoration {
1035
transition: none;
1036
}
1037
button.combo cellview {
1039
&:dir(ltr) {
1040
margin-left: 8px - ($medium-size - 16px) / 2;
1041
}
1042
&:dir(rtl) {
1044
margin-right: 8px - ($medium-size - 16px) / 2;
1045
}
1046
}
1047
menu {
1049
padding: 2px 0;
1050
menuitem {
1052
min-height: $medium-size - 2px * 2;
1053
padding: 0 8px;
1054
}
1055
// overflow arrows
1057
> arrow {
1058
&.top {
1059
margin-top: -2px;
1060
}
1061
&.bottom {
1063
margin-top: 2px * 2;
1064
margin-bottom: -2px * 3;
1065
}
1066
}
1067
}
1068
&.linked {
1070
button:nth-child(2) {
1071
&:dir(ltr) {
1072
@extend %linked-not-first-child;
1073
}
1074
&:dir(rtl) {
1076
@extend %linked-not-last-child;
1077
}
1078
}
1079
}
1080
> .linked:not(.vertical) > entry:not(:only-child) {
1082
border-radius: $corner-radius $corner-radius 0 0;
1083
&:first-child {
1085
margin-right: -$medium-size;
1086
padding-right: $medium-size;
1087
}
1088
&:last-child {
1090
margin-left: -$medium-size;
1091
padding-left: $medium-size;
1092
}
1093
}
1094
> .linked:not(.vertical) > button:not(:only-child) {
1096
@extend %button-flat-activatable;
1097
// @extend %button-small;
1098
min-height: 16px;
1100
min-width: 16px;
1101
margin: ($medium-size - $small-size) / 2;
1102
padding: ($small-size - 16px) / 2;
1103
border-radius: $circular-radius;
1104
}
1105
}
1106
// the combo is a composite widget so the way we do button linking doesn't
1108
// work, special case needed. See
1109
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1110
.linked:not(.vertical) > combobox {
1112
&:not(:first-child) > box > button.combo {
1113
@extend %linked-not-first-child;
1114
}
1115
&:not(:last-child) > box > button.combo {
1117
@extend %linked-not-last-child;
1118
}
1119
}
1120
.linked.vertical > combobox {
1122
&:not(:first-child) > box > button.combo {
1123
@extend %linked-vertical-not-first-child;
1124
}
1125
&:not(:last-child) > box > button.combo {
1127
@extend %linked-vertical-not-last-child;
1128
}
1129
}
1130
button.combo:only-child {
1132
border-radius: $corner-radius $corner-radius 0 0;
1133
font-weight: normal;
1134
@include entry(normal);
1136
&:focus {
1138
@include entry(focus);
1139
}
1140
&:drop(active),
1142
&:hover {
1143
@include entry(hover);
1144
}
1145
&:checked {
1147
@include entry(checked);
1148
}
1149
&:disabled {
1151
@include entry(disabled);
1152
}
1153
}
1154
/************
1157
* Toolbars *
1158
************/
1159
toolbar {
1160
-GtkWidget-window-dragging: true;
1161
padding: 2px;
1162
background-color: $background;
1163
button {
1165
@extend %button-flat;
1166
}
1167
// on OSD
1169
.osd & {
1170
background-color: transparent;
1171
}
1172
// stand-alone OSD toolbars
1174
&.osd {
1175
@extend %toolbar-osd;
1176
// positional classes for `attached` osd toolbars
1178
&.left,
1179
&.right,
1180
&.top,
1181
&.bottom {
1182
border-radius: 0;
1183
}
1184
&.bottom {
1186
box-shadow: none;
1187
background-color: transparent;
1188
background-image:
1189
linear-gradient(
1190
to bottom,
1191
transparent,
1192
rgba(black, .1) 30%,
1193
rgba(black, .2) 50%,
1194
rgba(black, .4)
1195
);
1196
}
1197
}
1198
// toolbar separators
1200
&.horizontal > separator {
1201
margin: 2px;
1202
}
1203
&.vertical > separator {
1205
margin: 2px;
1206
}
1207
&:not(.inline-toolbar):not(.osd) {
1209
scale,
1210
entry,
1211
spinbutton,
1212
button {
1213
margin: 2px;
1214
}
1215
.linked entry,
1217
.linked spinbutton,
1218
.linked button {
1219
&:not(:first-child) {
1220
margin-left: 0;
1221
}
1222
&:not(:last-child) {
1224
margin-right: 0;
1225
}
1226
}
1227
spinbutton {
1229
entry,
1230
button {
1231
margin: 0;
1232
}
1233
}
1234
switch {
1236
margin: 2px + $container-padding 2px;
1237
}
1238
}
1239
}
1240
%toolbar-osd {
1242
transition: $transition-shadow;
1243
padding: $container-padding;
1244
border-radius: $corner-radius;
1245
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1246
background-color: $surface;
1247
&:backdrop {
1249
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1250
}
1251
}
1252
// searchbar, location-bar & inline-toolbar
1254
.inline-toolbar {
1255
padding: $container-padding;
1256
border-style: solid;
1257
border-width: 0 1px 1px;
1258
border-color: $divider;
1259
background-color: $base-alt;
1260
}
1261
searchbar > revealer > box,
1263
.location-bar {
1264
padding: $container-padding;
1265
border-style: solid;
1266
border-width: 0 0 1px;
1267
border-color: $divider;
1268
background-color: $background;
1269
background-clip: border-box;
1270
}
1271
searchbar > revealer > box {
1273
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1274
margin: -6px;
1275
padding: $container-padding;
1276
}
1277
/***************
1280
* Header bars *
1281
***************/
1282
.titlebar {
1283
transition: background-color $duration $ease-out, color $duration $ease-out;
1284
border-radius: $corner-radius $corner-radius 0 0;
1285
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1286
background-color: $titlebar;
1287
color: $titlebar-text;
1288
&:disabled {
1290
color: $titlebar-text-disabled;
1291
}
1292
&:backdrop {
1294
background-color: $titlebar-backdrop;
1295
color: $titlebar-text2;
1296
&:disabled {
1298
color: $titlebar-text2-disabled;
1299
}
1300
}
1301
.title {
1303
padding-left: 12px;
1304
padding-right: 12px;
1305
font-weight: bold;
1306
}
1307
.subtitle {
1309
padding-left: 12px;
1310
padding-right: 12px;
1311
font-size: smaller;
1312
}
1313
.subtitle,
1315
.dim-label {
1316
transition: color $duration $ease-out;
1317
color: $titlebar-text2;
1318
&:backdrop {
1320
color: $titlebar-text-disabled;
1321
}
1322
}
1323
// Don't draw titlebar above titlebar
1325
.titlebar {
1326
background-color: transparent;
1327
box-shadow: none;
1328
}
1329
// The separator for split headerbars
1331
headerbar + separator {
1332
background-color: $titlebar-divider;
1333
}
1334
entry {
1336
box-shadow: inset 0 -1px $titlebar-stroke;
1337
background-color: $titlebar-entry-fill;
1338
color: $titlebar-text;
1339
&:disabled {
1341
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1342
background-color: $titlebar-entry-fill;
1343
color: $titlebar-text-disabled;
1344
}
1345
image {
1347
color: $titlebar-text2;
1348
&:hover,
1350
&:active {
1351
color: $titlebar-text;
1352
}
1353
&:disabled {
1355
color: $titlebar-text-disabled;
1356
}
1357
}
1358
}
1359
.linked:not(.vertical) > entry:not(:only-child) {
1361
border-radius: $corner-radius $corner-radius 0 0;
1362
}
1363
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1365
@extend %button-flat;
1366
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1368
$titlebar-indicator 0%,
1369
transparent 0%)
1370
0 0 0 / 0 0 0px;
1371
@include ink-color($titlebar-text2);
1373
&:disabled {
1375
color: $titlebar-text2-disabled;
1376
}
1377
@at-root %titlebar-button-checked,
1379
&:checked {
1380
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1381
$titlebar-indicator 100%,
1382
transparent 0%)
1383
0 0 2 / 0 0 2px;
1384
background-color: transparent;
1385
color: $titlebar-text;
1386
@include ink-color($titlebar-text);
1387
&:disabled {
1389
background-color: transparent;
1390
color: $titlebar-text-disabled;
1391
}
1392
}
1393
&:backdrop {
1395
color: $titlebar-text-disabled;
1396
&:disabled {
1398
color: $titlebar-text2-disabled;
1399
}
1400
&:checked {
1402
color: $titlebar-text2;
1403
&:disabled {
1405
color: $titlebar-text2-disabled;
1406
}
1407
}
1408
}
1409
}
1410
button.suggested-action, button.destructive-action {
1412
&:disabled {
1413
background-color: $titlebar-fill;
1414
color: $titlebar-text-disabled;
1415
}
1416
}
1417
// FIXME: Ugly overriding
1419
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1420
min-width: 120px - 8px * 2;
1421
}
1422
// FIXME: Ugly overriding
1424
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1425
min-width: 0;
1426
padding-left: ($medium-size - 24px) / 2;
1427
padding-right: ($medium-size - 24px) / 2;
1428
}
1429
&.selection-mode {
1431
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1432
// but let's keep it for backwards compatibility.
1433
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1434
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1435
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1436
background-color: $primary;
1437
color: on($primary);
1438
&:backdrop {
1440
color: on($primary, text2);
1441
}
1442
.subtitle:link {
1444
color: on($primary);
1445
}
1446
button:not(.suggested-action):not(.destructive-action) {
1448
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1449
currentColor 0%,
1450
transparent 0%)
1451
0 0 0 / 0 0 0px;
1452
color: on($primary);
1453
&:disabled {
1455
color: on($primary, text-disabled);
1456
}
1457
&:checked {
1459
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1460
currentColor 100%,
1461
transparent 0%)
1462
0 0 2 / 0 0 2px;
1463
color: on($primary);
1464
&:disabled {
1466
color: on($primary, text-disabled);
1467
}
1468
}
1469
&:backdrop {
1471
color: on($primary, text2);
1472
&:disabled {
1474
color: on($primary, text2-disabled);
1475
}
1476
&:checked {
1478
color: on($primary, text2);
1479
&:disabled {
1481
color: on($primary, text2-disabled);
1482
}
1483
}
1484
}
1485
}
1486
.selection-menu {
1488
padding-left: 16px;
1489
padding-right: 16px;
1490
arrow {
1492
-GtkArrow-arrow-scaling: 1;
1493
}
1494
.arrow {
1496
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1497
}
1498
}
1499
}
1500
.selection-mode {
1502
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1503
background-color: $primary;
1504
}
1505
// squared corners when the window is maximized, tiled, or fullscreen
1507
.tiled &,
1508
.tiled-top &,
1509
.tiled-right &,
1510
.tiled-bottom &,
1511
.tiled-left &,
1512
.maximized &,
1513
.fullscreen & {
1514
border-radius: 0;
1515
box-shadow: $shadow-z1;
1516
}
1517
&.default-decoration {
1519
min-height: $small-size;
1520
padding: $container-padding;
1521
box-shadow: inset 0 1px highlight($titlebar);
1522
.tiled &,
1524
.maximized &,
1525
.fullscreen & {
1526
box-shadow: none;
1527
}
1528
button.titlebutton {
1530
min-height: $small-size;
1531
min-width: $small-size;
1532
margin: 0;
1533
padding: 0;
1534
}
1535
// workaround for non-animatable buttons
1537
.background:not(.csd) & button.titlebutton:active {
1538
background-size: 1000% 1000%;
1539
}
1540
}
1541
.solid-csd & {
1543
&:dir(rtl), &:dir(ltr) { // specificity bump
1544
border-radius: 0;
1545
box-shadow: $shadow-z1; // just remove the highlight
1546
}
1547
}
1548
}
1549
headerbar {
1551
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1552
min-height: $large-size;
1553
padding: 0 $container-padding;
1554
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1556
entry,
1557
spinbutton,
1558
button {
1559
margin-top: $container-padding;
1560
margin-bottom: $container-padding;
1561
}
1562
separator.titlebutton {
1564
margin-top: $large-size / 4;
1565
margin-bottom: $large-size / 4;
1566
background-color: $titlebar-divider;
1567
}
1568
switch {
1570
margin-top: ($large-size - 24px) / 2;
1571
margin-bottom: ($large-size - 24px) / 2;
1572
}
1573
// reset button margins of the spinbutton
1575
spinbutton button {
1576
margin-top: 0;
1577
margin-bottom: 0;
1578
}
1579
// FIXME: This is a hacky workaround.
1581
.entry-tag {
1582
margin-top: 5px;
1583
margin-bottom: 5px;
1584
}
1585
}
1586
// Development versions of apps to use a differently styled headerbar
1588
window.devel .titlebar:not(.selection-mode) {
1589
}
1590
/************
1593
* Pathbars *
1594
************/
1595
%pathbar_button,
1596
.path-bar.linked:not(.vertical) > button {
1597
@extend %button-flat-basic;
1598
padding-left: ($medium-size - 24px) / 2;
1600
padding-right: ($medium-size - 24px) / 2;
1601
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1602
$primary 0%,
1603
transparent 0%)
1604
0 0 0 / 0 0 0px;
1605
border-radius: $corner-radius;
1606
&:checked {
1608
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1609
$primary 100%,
1610
transparent 0%)
1611
0 0 2 / 0 0 2px;
1612
color: $text;
1613
&,
1615
&:disabled {
1616
background-color: transparent;
1617
}
1618
}
1619
label:not(:only-child) {
1621
&:first-child {
1622
margin-left: 0;
1623
}
1624
&:last-child {
1626
margin-right: 0;
1627
}
1628
}
1629
&.text-button {
1631
min-width: 0;
1632
}
1633
&.slider-button {
1635
padding-left: (24px - 16px) / 2;
1636
padding-right: (24px - 16px) / 2;
1637
}
1638
}
1639
/**************
1642
* Tree Views *
1643
**************/
1644
treeview.view {
1645
@at-root * {
1646
-GtkTreeView-horizontal-separator: 4;
1647
-GtkTreeView-grid-line-width: 1;
1648
-GtkTreeView-grid-line-pattern: '';
1649
-GtkTreeView-tree-line-width: 1;
1650
-GtkTreeView-tree-line-pattern: '';
1651
-GtkTreeView-expander-size: 16;
1652
}
1653
border-left-color: $stroke; // this is actually the tree lines color,
1655
border-top-color: $divider; // while this is the grid lines color, better then nothing
1656
// FIXME: Avoid transparency background-color being slightly darker
1658
&:selected {
1659
background-color: $base;
1660
background-image: image($overlay-selected);
1661
}
1662
// to avoid borders being overridden by the previously set props
1664
rubberband {
1665
@extend rubberband;
1666
}
1667
&:hover,
1669
&:selected {
1670
border-radius: 0;
1671
}
1672
&.separator {
1674
min-height: 1px + 2px * 2;
1675
color: $divider;
1676
}
1677
&:drop(active) {
1679
// FIXME: box-shadow, background-color and background-image are not available here.
1680
border-style: solid none;
1681
border-width: 9999px;
1682
border-color: $overlay-hover;
1683
&.after {
1685
border-top-style: none;
1686
}
1687
&.before {
1689
border-bottom-style: none;
1690
}
1691
}
1692
&.expander {
1694
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1695
-gtk-icon-transform: rotate(-90deg);
1696
&:dir(rtl) {
1698
-gtk-icon-transform: rotate(90deg);
1699
}
1700
&:checked {
1702
-gtk-icon-transform: unset;
1703
}
1704
color: $text2;
1706
&:hover,
1708
&:active {
1709
color: $text;
1710
}
1711
&:disabled {
1713
color: $text2-disabled;
1714
}
1715
}
1716
&.progressbar { // progress bar in treeviews
1718
border-bottom: $bar-size solid $primary;
1719
box-shadow: none;
1720
background-color: transparent;
1721
background-image: none;
1722
&:selected:hover {
1724
box-shadow: none;
1725
}
1726
}
1727
&.trough { // progress bar trough in treeviews
1729
border-bottom: $bar-size solid $stroke-disabled;
1730
box-shadow: none;
1731
background-color: transparent;
1732
background-image: none;
1733
&:selected:hover {
1735
box-shadow: none;
1736
}
1737
}
1738
header {
1740
button {
1741
padding: 2px 6px;
1742
border-style: none solid solid none;
1743
border-width: 1px;
1744
border-color: $divider;
1745
border-radius: 0;
1746
background-clip: border-box;
1747
color: $text2;
1748
@include ink-color($text2);
1749
@include list-item;
1750
&:disabled {
1752
color: $text2-disabled;
1753
}
1754
&,
1756
&:disabled {
1757
background-color: $base;
1758
}
1759
&:last-child {
1761
border-right-style: none;
1762
}
1763
}
1764
}
1765
button.dnd,
1767
header.button.dnd { // for treeview-like derive widgets
1768
padding: 2px 6px;
1769
border-style: none solid solid;
1770
border-width: 1px;
1771
border-color: $divider;
1772
border-radius: 0;
1773
box-shadow: none;
1774
background-color: $base;
1775
background-clip: border-box;
1776
color: $primary;
1777
}
1778
// see tests/testaccel to test
1780
acceleditor > label {
1781
background-color: $primary;
1782
}
1783
}
1784
/*********
1787
* Menus *
1788
*********/
1789
menubar,
1790
.menubar {
1791
-GtkWidget-window-dragging: true;
1792
padding: 0;
1793
// box-shadow: inset 0 -1px $divider;
1794
background-color: $titlebar;
1795
color: $titlebar-text;
1796
&:backdrop {
1798
background-color: $titlebar-backdrop;
1799
color: $titlebar-text2;
1800
}
1801
.csd & {
1803
transition: $transition;
1804
}
1805
> menuitem {
1807
transition: $transition;
1808
min-height: 20px;
1809
padding: 4px 8px;
1810
color: $titlebar-text2;
1811
&:hover { // Seems like it :hover even with keyboard focus
1813
transition: none;
1814
background-color: $overlay-checked;
1815
color: $titlebar-text;
1816
}
1817
&:disabled {
1819
color: $titlebar-text2-disabled;
1820
}
1821
}
1822
}
1823
// Needed to make the border-radius of menus work
1825
// otherwise the background bleeds out of the menu edges
1826
.background.popup {
1827
background-color: transparent;
1828
}
1829
menu,
1831
.menu,
1832
.context-menu {
1833
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1834
padding: 4px 0;
1835
box-shadow: inset 0 1px highlight($surface);
1836
background-color: $surface;
1837
background-clip: border-box;
1838
border: 1px solid $divider; // adds borders in a non composited env
1839
.csd & {
1841
border: none; // axes borders in a composited env
1842
border-radius: $corner-radius;
1843
}
1844
menuitem {
1846
transition: background-color $duration $ease-out;
1847
min-height: 20px;
1848
min-width: 40px;
1849
padding: 4px 8px;
1850
color: $text;
1851
font: initial;
1852
text-shadow: none;
1853
&:hover {
1855
transition: none;
1856
background-color: $overlay-hover;
1857
}
1858
&:disabled {
1860
color: $text-disabled;
1861
}
1862
// submenu indicators
1864
arrow {
1865
min-height: 16px;
1866
min-width: 16px;
1867
color: $text2;
1868
&:disabled {
1870
color: $text2-disabled;
1871
}
1872
&:dir(ltr) {
1874
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1875
margin-left: 8px;
1876
}
1877
&:dir(rtl) {
1879
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1880
margin-right: 8px;
1881
}
1882
}
1883
// avoids labels color being overridden, see
1885
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1886
label {
1887
&:dir(rtl),
1888
&:dir(ltr) {
1889
// color: inherit;
1890
}
1891
}
1892
}
1893
// overflow arrows
1895
> arrow {
1896
min-height: 16px;
1897
min-width: 16px;
1898
padding: 4px;
1899
background-color: $surface;
1900
color: $text2;
1901
&.top {
1903
margin-top: -4px;
1904
border-bottom: 1px solid $divider;
1905
border-radius: $corner-radius $corner-radius 0 0;
1906
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1907
}
1908
&.bottom {
1910
margin-top: 4px * 2;
1911
margin-bottom: -4px * 3;
1912
border-top: 1px solid $divider;
1913
border-radius: 0 0 $corner-radius $corner-radius;
1914
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1915
}
1916
&:hover {
1918
background-image: image($overlay-hover);
1919
}
1920
&:disabled {
1922
border-color: transparent;
1923
background-color: transparent;
1924
color: transparent;
1925
// color: $text2-disabled;
1926
}
1927
}
1928
separator {
1930
margin: 4px 0;
1931
}
1932
}
1933
menuitem {
1935
accelerator {
1936
color: $text2;
1937
}
1938
&:disabled accelerator {
1940
color: $text2-disabled;
1941
}
1942
}
1943
/************
1946
* Popovers *
1947
************/
1948
popover.background {
1949
transition: $transition-shadow;
1950
padding: 2px;
1951
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1952
background-color: $surface;
1953
&:backdrop {
1955
box-shadow: $shadow-z2;
1956
}
1957
&, .csd & {
1959
border-style: solid;
1960
border-width: 1px;
1961
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1962
border-radius: $corner-radius + 1px;
1963
}
1964
> stack {
1966
margin: -4px; // remove extra padding from menu style popovers
1967
}
1968
> toolbar {
1970
margin: -2px;
1971
}
1972
> list,
1974
> .view,
1975
> toolbar {
1976
border-style: none;
1977
box-shadow: none;
1978
background-color: transparent;
1979
}
1980
// FIXME: Use the popover color instead of transparent as a workaround for .view
1982
list,
1983
.view:not(:selected),
1984
toolbar {
1985
background-color: $surface;
1986
}
1987
&.touch-selection,
1989
&.magnifier,
1990
&.osd {
1991
// @extend %osd;
1992
}
1993
button:not(.suggested-action):not(.destructive-action) {
1995
// @extend %button-flat;
1996
}
1997
.linked:not(.vertical) > entry:not(:only-child) {
1999
// border-radius: $corner-radius $corner-radius 0 0;
2000
}
2001
&.menu button,
2003
button.model {
2004
@extend %button-flat;
2005
min-height: 32px;
2007
padding: 0 8px;
2008
border-radius: $corner-radius;
2009
&:checked {
2011
// color: $primary;
2012
}
2013
}
2014
separator {
2016
margin: 4px 0;
2017
}
2018
list separator {
2020
margin: 0;
2021
}
2022
}
2023
/*************
2025
* Notebooks *
2026
*************/
2027
notebook {
2028
frame > paned > & > header,
2029
&.frame > header {
2030
background-color: $base-alt;
2031
}
2032
&:focus tab:checked {
2034
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2035
}
2036
> header {
2038
border-width: 1px;
2039
border-color: $divider;
2040
background-color: $background;
2041
background-clip: border-box;
2042
&.top {
2044
border-bottom-style: solid;
2045
> tabs {
2047
margin-bottom: -1px;
2048
> tab {
2050
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2051
&:checked {
2053
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2054
}
2055
&.reorderable-page {
2057
border-image-width: 0 1px 2px;
2058
}
2059
}
2060
}
2061
}
2062
&.bottom {
2064
border-top-style: solid;
2065
> tabs {
2067
margin-top: -1px;
2068
> tab {
2070
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2071
&:checked {
2073
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2074
}
2075
&.reorderable-page {
2077
border-image-width: 2px 1px 0;
2078
}
2079
}
2080
}
2081
}
2082
&.left {
2084
border-right-style: solid;
2085
> tabs {
2087
margin-right: -1px;
2088
> tab {
2090
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2091
&:checked {
2093
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2094
}
2095
&.reorderable-page {
2097
border-image-width: 1px 2px 1px 0;
2098
}
2099
}
2100
}
2101
}
2102
&.right {
2104
border-left-style: solid;
2105
> tabs {
2107
margin-left: -1px;
2108
> tab {
2110
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2111
&:checked {
2113
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2114
}
2115
&.reorderable-page {
2117
border-image-width: 1px 0 1px 2px;
2118
}
2119
}
2120
}
2121
}
2122
&.top > tabs > arrow {
2124
@extend %notebook_vert_arrows;
2125
border-top-style: none;
2127
}
2128
&.bottom > tabs > arrow {
2130
@extend %notebook_vert_arrows;
2131
border-bottom-style: none;
2133
}
2134
@at-root %notebook_vert_arrows {
2136
padding-left: 4px;
2137
padding-right: 4px;
2138
&.down {
2140
margin-left: -8px;
2141
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2142
}
2143
&.up {
2145
margin-right: -8px;
2146
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2147
}
2148
}
2149
&.left > tabs > arrow {
2151
@extend %notebook_horz_arrows;
2152
border-left-style: none;
2154
}
2155
&.right > tabs > arrow {
2157
@extend %notebook_horz_arrows;
2158
border-right-style: none;
2160
}
2161
@at-root %notebook_horz_arrows {
2163
padding-top: 4px;
2164
padding-bottom: 4px;
2165
&.down {
2167
margin-top: -8px;
2168
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2169
}
2170
&.up {
2172
margin-bottom: -8px;
2173
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2174
}
2175
}
2176
> tabs > arrow {
2178
min-height: 16px;
2179
min-width: 16px;
2180
border-radius: 0;
2181
@extend %ripple;
2183
@include ink-color($text2);
2184
&:disabled {
2186
color: $text2-disabled;
2187
}
2188
}
2189
tab {
2191
transition: $transition,
2192
background-size 0ms,
2193
background-image 0ms;
2194
min-height: $small-size;
2195
min-width: $small-size;
2196
padding: $container-padding 12px;
2197
border-width: 1px; // for reorderable tabs
2199
border-color: transparent; //
2200
outline: none;
2202
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2203
background-repeat: no-repeat;
2204
background-position: center;
2205
background-size: 0% 0%;
2206
background-clip: border-box;
2207
color: $text2;
2209
font-weight: 500;
2210
&:hover {
2212
background-color: $overlay-hover;
2213
}
2214
&:disabled {
2216
color: $text2-disabled;
2217
}
2218
&:checked {
2220
transition: $transition,
2221
background-size $ripple-fade-in-duration $ease-out,
2222
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2223
background-color: transparent;
2224
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2225
background-size: 1000% 1000%;
2226
background-clip: padding-box;
2227
color: $text;
2228
&:disabled {
2230
color: $text-disabled;
2231
}
2232
&.reorderable-page {
2234
border-color: $divider;
2235
background-color: $base;
2236
}
2237
}
2238
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2240
> box {
2241
transition: background-color $duration $ease-out;
2242
margin: -$container-padding -12px;
2243
padding: $container-padding 12px;
2244
&:drop(active) {
2246
background-color: $overlay-hover;
2247
}
2248
}
2249
// colors the button like the label, overridden otherwise
2251
button.flat {
2252
@extend %button-small;
2253
&:last-child {
2255
margin-left: $container-padding;
2256
margin-right: $container-padding - 12px;
2257
}
2258
&:first-child {
2260
margin-left: $container-padding - 12px;
2261
margin-right: $container-padding;
2262
}
2263
}
2264
}
2265
&.top,
2267
&.bottom {
2268
tabs {
2269
padding-left: 8px;
2270
padding-right: 8px;
2271
&:not(:only-child) {
2273
&:first-child {
2274
margin-left: 0;
2275
}
2276
&:last-child {
2278
margin-right: 0;
2279
}
2280
}
2281
tab.reorderable-page {
2283
border-style: none solid;
2284
}
2285
}
2286
}
2287
&.left,
2289
&.right {
2290
tabs {
2291
padding-top: 8px;
2292
padding-bottom: 8px;
2293
&:not(:only-child) {
2295
&:first-child {
2296
margin-top: 0;
2297
}
2298
&:last-child {
2300
margin-bottom: 0;
2301
}
2302
}
2303
tab.reorderable-page {
2305
border-style: solid none;
2306
}
2307
}
2308
}
2309
}
2310
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2312
background-color: $base;
2313
}
2314
}
2315
/**************
2318
* Scrollbars *
2319
**************/
2320
scrollbar {
2321
$_slider_min_length: 24px;
2322
// disable steppers
2324
@at-root * {
2325
-GtkScrollbar-has-backward-stepper: false;
2326
-GtkScrollbar-has-forward-stepper: false;
2327
}
2328
transition: $transition;
2330
background-color: $base;
2331
// scrollbar border
2333
&.top { border-bottom: 1px solid $divider; }
2334
&.bottom { border-top: 1px solid $divider; }
2335
&.left { border-right: 1px solid $divider; }
2336
&.right { border-left: 1px solid $divider; }
2337
// slider
2339
slider {
2340
transition: background-color $duration $ease-out;
2341
min-width: 8px;
2342
min-height: 8px;
2343
border: 4px solid transparent;
2344
border-radius: $circular-radius;
2345
background-clip: padding-box;
2346
background-color: $text-disabled;
2347
&:hover {
2349
background-color: $text2;
2350
}
2351
&:active {
2353
background-color: $text;
2354
}
2355
&:disabled {
2357
background-color: $text2-disabled;
2358
}
2359
}
2360
&.fine-tune {
2362
slider {
2363
min-width: 4px;
2364
min-height: 4px;
2365
}
2366
&.horizontal slider {
2368
margin: 2px 0;
2369
}
2370
&.vertical slider {
2372
margin: 0 2px;
2373
}
2374
}
2375
&.overlay-indicator {
2377
&:not(.fine-tune) slider {
2378
transition-property: background-color, min-height, min-width;
2379
}
2380
&:not(.dragging):not(.hovering) {
2382
border-color: transparent;
2383
background-color: transparent;
2384
slider {
2386
min-width: 4px;
2387
min-height: 4px;
2388
margin: 4px - 1px;
2389
border: 1px solid rgba($base, 0.3);
2390
}
2391
button {
2393
min-width: 4px;
2394
min-height: 4px;
2395
margin: 4px - 1px;
2396
border: 1px solid rgba($base, 0.3);
2397
border-radius: $circular-radius;
2398
background-color: $text-disabled;
2399
background-clip: padding-box;
2400
-gtk-icon-source: none;
2401
&:disabled {
2403
background-color: $text2-disabled;
2404
}
2405
}
2406
&.horizontal {
2408
slider {
2409
min-width: $_slider_min_length;
2410
}
2411
button {
2413
min-width: 8px;
2414
}
2415
}
2416
&.vertical {
2418
slider {
2419
min-height: $_slider_min_length;
2420
}
2421
button {
2423
min-height: 8px;
2424
}
2425
}
2426
}
2427
&.dragging,
2429
&.hovering {
2430
background-color: rgba($surface, 0.9);
2431
}
2432
}
2433
&.horizontal slider {
2435
min-width: $_slider_min_length;
2436
}
2437
&.vertical slider {
2439
min-height: $_slider_min_length;
2440
}
2441
// button styling
2443
button {
2444
@extend %button-flat-basic;
2445
min-width: 16px;
2447
min-height: 16px;
2448
padding: 0;
2449
border-radius: 0;
2450
}
2451
// button icons
2453
&.vertical {
2454
button {
2455
&.down {
2456
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2457
}
2458
&.up {
2460
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2461
}
2462
}
2463
}
2464
&.horizontal {
2466
button {
2467
&.down {
2468
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2469
}
2470
&.up {
2472
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2473
}
2474
}
2475
}
2476
}
2477
/**********
2480
* Switch *
2481
**********/
2482
switch {
2483
transition: all $duration $ease-out;
2484
margin: $container-padding 0;
2485
padding: 0 2px;
2486
border: 5px solid transparent;
2487
border-radius: $circular-radius;
2488
background-color: $stroke;
2489
background-clip: padding-box;
2490
font-size: 0;
2491
&:checked {
2493
background-color: rgba($primary, 0.5);
2494
}
2495
&:disabled {
2497
opacity: 0.5;
2498
}
2499
// hide on/off icons for >=3.24.5
2501
image {
2502
margin: -8px;
2503
-gtk-icon-transform: scale(0);
2504
}
2505
slider {
2507
transition: all $duration $ease-out;
2508
min-width: 20px;
2509
min-height: 20px;
2510
margin: -3px -2px;
2511
border-radius: $circular-radius;
2512
outline: none;
2513
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2514
background-color: $switch-surface;
2515
}
2516
&:hover slider {
2518
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2519
}
2520
&:focus slider {
2522
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2523
}
2524
&:checked slider {
2526
background-color: $primary;
2527
color: $primary;
2528
}
2529
row:selected & {
2531
}
2532
}
2533
/*************************
2536
* Check and Radio items *
2537
*************************/
2538
// draw regular check and radio items using our PNG assets
2539
// all assets are rendered from assets.svg. never add pngs directly
2540
// selection-mode
2542
.view.content-view.check:not(list),
2543
.content-view:not(list) .tile check {
2544
min-height: 40px;
2545
min-width: 40px;
2546
margin: 0;
2547
padding: 0;
2548
box-shadow: none;
2549
background-color: transparent;
2550
background-image: none;
2551
-gtk-icon-shadow: $icon-shadow-z2;
2552
&:hover,
2554
&:active {
2555
-gtk-icon-shadow: $icon-shadow-z4;
2556
}
2557
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2559
&#{$class} {
2560
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2561
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2563
}
2564
}
2565
}
2566
checkbutton,
2568
radiobutton {
2569
outline: none;
2570
}
2571
checkbutton.text-button,
2573
radiobutton.text-button {
2574
// this is for a nice focus on check and radios text
2575
padding: 2px;
2576
label:not(:only-child) {
2578
margin: 0 4px;
2579
}
2580
}
2581
$check-radio-size: 40px;
2583
check,
2585
radio {
2586
min-height: 24px;
2587
min-width: 24px;
2588
margin: -($check-radio-size - 24px) / 2;
2589
padding: ($check-radio-size - 24px) / 2;
2590
border-radius: $circular-radius;
2591
@extend %ripple;
2593
@include ink-color($text2);
2594
&:checked,
2596
&:indeterminate {
2597
@include ink-color($primary);
2598
}
2599
&:disabled {
2601
color: $text2-disabled;
2602
}
2603
&:only-child {
2605
// margin: -12px;
2606
}
2607
popover modelbutton.flat & {
2609
&,
2610
&:focus,
2611
&:hover,
2612
&:focus:hover,
2613
&:active,
2614
&:disabled {
2615
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2616
box-shadow: none;
2617
background-image: none;
2618
}
2619
&.left:dir(rtl) {
2621
margin-left: -12px;
2622
margin-right: -4px;
2623
}
2624
&.right:dir(ltr) {
2626
margin-left: -4px;
2627
margin-right: -12px;
2628
}
2629
}
2630
menu menuitem & {
2632
transition: none;
2633
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2634
padding: 0;
2635
&:dir(ltr) {
2637
margin-right: 8px;
2638
}
2639
&:dir(rtl) {
2641
margin-left: 8px;
2642
}
2643
&,
2645
&:hover,
2646
&:disabled {
2647
box-shadow: none;
2648
}
2649
}
2650
}
2651
%check,
2653
check {
2654
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2655
&:checked {
2657
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2658
}
2659
&:indeterminate {
2661
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2662
}
2663
}
2664
%radio,
2666
radio {
2667
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2668
&:checked {
2670
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2671
}
2672
&:indeterminate {
2674
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2675
}
2676
border-image-slice: $check-radio-size / 2px;
2678
border-image-width: $check-radio-size / 2;
2679
$radio-indicator-size: 10px / $check-radio-size / 2;
2681
border-image-source:
2683
-gtk-gradient(
2684
radial,
2685
center center, 0,
2686
center center, .001,
2687
to($primary),
2688
to(transparent)
2689
);
2690
&:checked:not(:indeterminate) {
2692
border-image-source:
2693
-gtk-gradient(
2694
radial,
2695
center center, 0,
2696
center center, $radio-indicator-size,
2697
to($primary),
2698
to(transparent)
2699
);
2700
&:disabled {
2702
border-image-source:
2703
-gtk-gradient(
2704
radial,
2705
center center, 0,
2706
center center, $radio-indicator-size,
2707
to($text2-disabled),
2708
to(transparent)
2709
);
2710
}
2711
}
2712
}
2713
%small_check,
2715
menu menuitem check {
2716
min-height: 16px;
2717
min-width: 16px;
2718
border-radius: $corner-radius;
2719
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2720
&:checked {
2722
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2723
}
2724
&:indeterminate {
2726
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2727
}
2728
}
2729
%small_radio,
2731
menu menuitem radio {
2732
min-height: 16px;
2733
min-width: 16px;
2734
border-image: none;
2735
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2736
&:checked {
2738
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2739
}
2740
&:indeterminate {
2742
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2743
}
2744
}
2745
// ANIMATION:
2747
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2748
// the transformation is set on the active state and it get reset on the checked state.
2749
radio:not(:checked):active {
2750
// -gtk-icon-transform: scale(0);
2751
}
2752
// Otherwise, treeview.view styling will be applied...
2754
treeview.view check,
2755
treeview.view radio {
2756
padding: 0;
2757
color: $text2;
2758
&:checked,
2760
&:indeterminate {
2761
color: $primary;
2762
}
2763
&:disabled {
2765
color: $text2-disabled;
2766
}
2767
&,
2769
&:hover,
2770
&:selected,
2771
&:selected:hover {
2772
box-shadow: none;
2773
background-color: transparent;
2774
}
2775
}
2776
treeview.view radio:checked {
2778
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2779
border-image: none;
2780
}
2781
/************
2784
* GtkScale *
2785
************/
2786
scale {
2787
// sizing
2788
$_marks_length: 8px;
2789
$_marks_distance: 7px;
2790
$trough_size: 2px;
2792
$finetune_trough_size: 4px;
2793
$slider_size: 32px;
2795
$slider_margin: -($slider_size - $trough_size) / 2;
2797
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2798
$color_slider_margin: -($slider_size) * 3 / 4;
2800
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2801
min-height: $trough_size;
2803
min-width: $trough_size;
2804
&.horizontal {
2806
padding: ($medium-size - $trough_size) / 2 12px;
2807
}
2808
&.vertical {
2810
padding: 12px ($medium-size - $trough_size) / 2;
2811
}
2812
// the slider is inside the trough, so to have make it bigger there's a negative margin
2814
slider {
2815
min-height: $slider_size;
2816
min-width: $slider_size;
2817
margin: $slider_margin;
2818
}
2819
// click-and-hold the slider to activate
2821
&.fine-tune {
2822
&.horizontal {
2823
min-height: $finetune_trough_size;
2824
padding-top: ($medium-size - $finetune_trough_size) / 2;
2825
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2826
}
2827
&.vertical {
2829
min-width: $finetune_trough_size;
2830
padding-left: ($medium-size - $finetune_trough_size) / 2;
2831
padding-right: ($medium-size - $finetune_trough_size) / 2;
2832
}
2833
// to make the trough grow in fine-tune mode
2835
slider {
2836
margin: $finetune_slider_margin;
2837
}
2838
}
2839
// the backing bit
2841
trough {
2842
transition: background-color $duration $ease-out;
2843
outline: none;
2844
background-color: $stroke;
2845
&:disabled {
2847
background-color: $stroke-disabled;
2848
}
2849
}
2850
// the colored part of the backing bit
2852
highlight {
2853
transition: background-image $duration $ease-out;
2854
background-image: image($primary);
2855
&:disabled {
2857
background-color: $background;
2858
background-image: image($text2-disabled);
2859
}
2860
}
2861
// this is another differently styled part of the backing bit, the most relevant use case is for example
2863
// in media player to indicate how much video stream as been cached
2864
fill {
2865
transition: background-color $duration $ease-out;
2866
background-color: $stroke;
2867
&:disabled {
2869
background-color: transparent;
2870
}
2871
}
2872
slider {
2874
transition: background-color $duration $ease-out,
2875
background-size $ripple-fade-out-duration $ease-out,
2876
background-image $ripple-fade-out-opacity-duration $ease-out;
2877
background-repeat: no-repeat;
2878
background-position: center;
2879
background-size: auto, 1000% 1000%;
2880
border-radius: 50%;
2881
color: $primary;
2882
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2884
&#{$class} {
2885
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2886
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2888
radial-gradient(circle, transparent 10%, transparent 0%);
2889
}
2890
}
2891
&:hover {
2893
background-color: $overlay-hover;
2894
}
2895
&:focus {
2897
background-color: $overlay-focus;
2898
}
2899
&:active {
2901
$_url: 'assets/scale-slider#{$asset-suffix}';
2902
transition: background-color $duration $ease-out,
2904
background-size 0ms,
2905
background-image 0ms;
2906
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2907
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2908
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2909
background-size: auto, 0% 0%;
2910
}
2911
}
2912
marks,
2914
value {
2915
color: $text2;
2916
}
2917
indicator {
2919
background-color: $stroke;
2920
color: transparent;
2921
}
2922
//marks margins
2924
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2925
(horizontal, bottom, bottom, top),
2926
(vertical, top, left, right),
2927
(vertical, bottom, right, left) {
2928
&.#{$scale_orient} marks {
2929
&.#{$marks_class} {
2930
margin-#{$marks_margin}: $_marks_distance;
2931
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2932
}
2933
}
2934
&.#{$scale_orient}.fine-tune marks {
2936
&.#{$marks_class} {
2937
margin-#{$marks_margin}: $_marks_distance - 1px;
2938
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2939
}
2940
}
2941
}
2942
&.horizontal {
2944
indicator {
2945
min-height: $_marks_length;
2946
min-width: 1px;
2947
}
2948
}
2949
&.vertical {
2951
indicator {
2952
min-height: 1px;
2953
min-width: $_marks_length;
2954
}
2955
}
2956
// *WARNING* scale with marks madness following
2958
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2960
@each $marks_class, $marks_infix in (
2961
".marks-before:not(.marks-after)": "-marks-before",
2962
".marks-after:not(.marks-before)": "-marks-after"
2963
) {
2964
&#{$dir_class}#{$marks_class} {
2965
slider {
2966
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2967
&#{$state_class} {
2968
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2969
background-image:
2971
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2972
radial-gradient(circle, transparent 10%, transparent 0%);
2973
}
2974
}
2975
&:active {
2977
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2978
background-image:
2980
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2981
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2982
}
2983
}
2984
}
2985
}
2986
}
2987
&.color {
2989
min-height: 0;
2990
min-width: 0;
2991
&.horizontal {
2993
padding: 0 0 12px 0;
2994
slider {
2996
&:dir(ltr), &:dir(rtl) { // specificity bump
2997
margin-bottom: $color_slider_margin;
2998
margin-top: $color_marks_slider_margin;
2999
}
3000
}
3001
}
3002
&.vertical {
3004
&:dir(ltr) {
3005
padding: 0 0 0 12px;
3006
slider {
3008
margin-left: $color_slider_margin;
3009
margin-right: $color_marks_slider_margin;
3010
}
3011
}
3012
&:dir(rtl) {
3014
padding: 0 12px 0 0;
3015
slider {
3017
margin-right: $color_slider_margin;
3018
margin-left: $color_marks_slider_margin;
3019
}
3020
}
3021
}
3022
}
3023
}
3024
/*****************
3027
* Progress bars *
3028
*****************/
3029
progressbar {
3030
// sizing
3031
&.horizontal {
3032
trough,
3033
progress {
3034
min-height: $bar-size;
3035
}
3036
}
3037
&.vertical {
3039
trough,
3040
progress {
3041
min-width: $bar-size;
3042
}
3043
}
3044
// FIXME: insensitive state missing and some other state should be set probably
3046
color: $text2;
3047
font-size: smaller;
3048
trough {
3050
background-color: $stroke-disabled;
3051
}
3052
progress {
3054
background-color: $primary;
3055
}
3056
&.osd { // progressbar.osd used for epiphany page loading progress
3058
// min-width: $bar-size;
3059
// min-height: $bar-size;
3060
// background-color: transparent;
3061
trough {
3063
// background-color: transparent;
3064
}
3065
progress {
3067
// background-color: $primary;
3068
}
3069
}
3070
// makes the progress indicator disappear, when the fraction is 0
3072
trough.empty progress {
3073
all: unset;
3074
}
3075
}
3076
/*************
3079
* Level Bar *
3080
*************/
3081
levelbar {
3082
&.horizontal {
3083
block {
3084
min-height: $bar-size;
3085
}
3086
&.discrete block {
3088
min-width: $medium-size;
3089
&:not(:last-child) {
3091
margin-right: 2px;
3092
}
3093
}
3094
}
3095
&.vertical {
3097
block {
3098
min-width: $bar-size;
3099
}
3100
&.discrete block {
3102
min-height: $medium-size;
3103
&:not(:last-child) {
3105
margin-bottom: 2px;
3106
}
3107
}
3108
}
3109
// imitate the entry style
3111
trough {
3112
// padding: 2px;
3113
// border-radius: $corner-radius;
3114
// box-shadow: $shadow-z1;
3115
// background-color: $base;
3116
&:disabled {
3118
// background-color: $base-alt;
3119
}
3120
}
3121
block {
3123
&.low {
3124
background-color: $warning;
3125
}
3126
&.high,
3128
&:not(.empty) {
3129
background-color: $primary;
3130
}
3131
&.full {
3133
background-color: $success;
3134
}
3135
&.empty {
3137
background-color: $stroke-disabled;
3138
}
3139
}
3140
}
3141
/****************
3144
* Print dialog *
3145
*****************/
3146
printdialog {
3147
paper {
3148
padding: 0;
3149
border: 1px solid $divider;
3150
background-color: $base;
3151
color: $text;
3152
}
3153
.dialog-action-box {
3155
margin: 12px;
3156
}
3157
}
3158
/**********
3161
* Frames *
3162
**********/
3163
frame > border,
3164
.frame {
3165
margin: 0;
3166
padding: 0;
3167
border: 1px solid $divider;
3168
border-radius: 0;
3169
box-shadow: none;
3170
&.flat {
3172
border-style: none;
3173
}
3174
}
3175
// for backward compatibility
3177
frame.flat > border {
3178
border-style: none;
3179
}
3180
actionbar > revealer > box {
3182
padding: $container-padding;
3183
border-top: 1px solid $divider;
3184
background-color: $base;
3185
background-clip: border-box;
3186
button:not(.suggested-action):not(.destructive-action) {
3188
@extend %button-flat;
3189
}
3190
.linked:not(.vertical) > entry:not(:only-child) {
3192
border-radius: $corner-radius $corner-radius 0 0;
3193
}
3194
}
3195
scrolledwindow {
3197
viewport.frame { // avoid double borders when viewport inside scrolled window
3198
border-style: none;
3199
}
3200
// This is used when content is touch-dragged past boundaries.
3202
// draws a box on top of the content, the size changes programmatically.
3203
@at-root overshoot {
3204
&.top { @include overshoot(top); }
3205
&.bottom { @include overshoot(bottom); }
3207
&.left { @include overshoot(left); }
3209
&.right { @include overshoot(right); }
3211
}
3212
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3214
@at-root undershoot {
3215
&.top { @include undershoot(top); }
3216
&.bottom { @include undershoot(bottom); }
3218
&.left { @include undershoot(left); }
3220
&.right { @include undershoot(right); }
3222
}
3223
@at-root junction { // the small square between two scrollbars
3225
border-style: solid none none solid;
3226
border-width: 1px;
3227
border-color: $divider;
3228
background-color: $base;
3229
&:dir(rtl) {
3231
border-style: solid solid none none;
3232
}
3233
}
3234
}
3235
// vbox and hbox separators
3237
separator {
3238
min-width: 1px;
3239
min-height: 1px;
3240
background-color: $divider;
3241
}
3242
%hide_separators {
3244
min-width: 0;
3245
min-height: 0;
3246
background-color: transparent;
3247
}
3248
/*********
3251
* Lists *
3252
*********/
3253
list {
3254
border-color: $divider;
3255
background-color: $base;
3256
row {
3258
padding: 2px;
3259
}
3260
}
3261
row {
3263
&.activatable {
3264
@extend %ripple;
3265
@include ink-color($text, $fg: false);
3266
@include list-item;
3267
// this is for indicathing which row generated a popover
3269
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3270
&.has-open-popup {
3271
background-color: $overlay-checked;
3272
}
3273
}
3274
&:selected {
3276
@extend %selected_items;
3277
@include ink-color($primary, $fg: false);
3279
}
3280
}
3281
/*********************
3284
* App Notifications *
3285
*********************/
3286
.app-notification {
3287
// @extend %osd;
3288
@extend %toolbar-osd;
3290
margin: 8px;
3292
button {
3294
@extend %button-flat;
3295
&.text-button:not(:disabled) {
3297
@include ink-color($primary);
3298
}
3299
}
3300
&.frame,
3302
border {
3303
border-style: none;
3304
}
3305
}
3306
/*************
3309
* Expanders *
3310
*************/
3311
expander {
3312
title > arrow {
3313
transition: all $duration $ease-out;
3314
min-width: 16px;
3315
min-height: 16px;
3316
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3317
-gtk-icon-transform: rotate(-90deg);
3318
&:dir(rtl) {
3320
-gtk-icon-transform: rotate(90deg);
3321
}
3322
&:checked {
3324
-gtk-icon-transform: unset;
3325
}
3326
color: $text2;
3328
&:hover,
3330
&:active {
3331
color: $text;
3332
}
3333
&:disabled {
3335
color: $text2-disabled;
3336
}
3337
}
3338
}
3339
/************
3342
* Calendar *
3343
************/
3344
calendar {
3345
padding: 1px;
3346
border: 1px solid $divider;
3347
color: $text;
3348
&:disabled {
3350
color: $text-disabled;
3351
}
3352
&:selected {
3354
@extend %selected_items;
3355
border-radius: $corner-radius + 1px;
3357
}
3358
&.header {
3360
border-style: none none solid;
3361
border-color: $divider;
3362
border-radius: 0;
3363
}
3364
&.button {
3366
border-radius: $corner-radius + 1px;
3367
color: $text2;
3368
&:hover {
3370
background-image: image($overlay-hover);
3371
}
3372
&:disabled {
3374
color: $text2-disabled;
3375
}
3376
}
3377
&.highlight {
3379
color: $text2;
3380
font-weight: 500;
3381
}
3382
&:indeterminate {
3384
color: $text2-disabled;
3385
}
3386
}
3387
/***********
3390
* Dialogs *
3391
***********/
3392
messagedialog { // Message Dialog styling
3393
&.background {
3394
background-color: $surface;
3395
}
3396
.titlebar {
3398
min-height: $small-size;
3399
border-style: none;
3400
box-shadow: inset 0 1px highlight($surface);
3401
background-color: $surface;
3402
color: $text;
3403
&:backdrop {
3405
background-color: $surface;
3406
color: $text2;
3407
}
3408
}
3409
&.csd { // rounded bottom border styling for csd version
3411
&.background {
3412
// bigger radius for better antialiasing
3413
border-bottom-left-radius: $corner-radius;
3414
border-bottom-right-radius: $corner-radius;
3415
}
3416
}
3417
// Hint text
3419
box.vertical > label + label {
3420
color: $text2;
3421
}
3422
.dialog-action-box {
3424
margin-top: -$container-padding;
3425
// padding: $container-padding;
3426
button:not(:last-child) {
3428
margin-right: $container-padding;
3429
}
3430
}
3431
}
3432
.dialog-action-box button {
3434
@extend %button-flat;
3435
&:not(:disabled) {
3437
@include ink-color($primary);
3438
}
3439
&.suggested-action:not(:disabled) {
3441
background-color: transparent;
3442
// @include ink-color($primary);
3443
}
3444
&.destructive-action:not(:disabled) {
3446
background-color: transparent;
3447
@include ink-color($error);
3448
}
3449
}
3450
filechooser {
3452
.dialog-action-box {
3453
border-top: 1px solid $divider;
3454
}
3455
#pathbarbox {
3457
border-bottom: 1px solid $divider;
3458
background-color: $background;
3459
> stack > box > button { // The new folder button
3461
@extend %button-flat;
3462
border-radius: $circular-radius;
3464
}
3465
}
3466
}
3467
filechooserbutton:drop(active) {
3469
// box-shadow: none;
3470
}
3471
/***********
3474
* Sidebar *
3475
***********/
3476
.sidebar {
3477
border-style: none;
3478
background-color: $base-alt;
3479
&:not(separator) {
3481
@at-root %sidebar_left,
3482
&:dir(ltr),
3483
&.left,
3484
&.left:dir(rtl) {
3485
border-right: 1px solid $divider;
3486
border-left-style: none;
3487
}
3488
@at-root %sidebar_right,
3490
&:dir(rtl),
3491
&.right {
3492
border-left: 1px solid $divider;
3493
border-right-style: none;
3494
}
3495
}
3496
list {
3498
background-color: transparent;
3499
}
3500
paned & {
3502
&,
3503
&.left,
3504
&.right,
3505
&.left:dir(rtl),
3506
&:dir(rtl),
3507
&:dir(ltr) {
3508
border-style: none;
3509
}
3510
}
3511
}
3512
stacksidebar.sidebar {
3514
& {
3515
&:dir(ltr),
3516
&.left,
3517
&.left:dir(rtl) {
3518
list {
3519
@extend %sidebar_left;
3520
}
3521
}
3522
&:dir(rtl),
3524
&.right {
3525
list {
3526
@extend %sidebar_right;
3527
}
3528
}
3529
}
3530
+ separator.vertical,
3532
separator.horizontal {
3533
@extend %hide_separators;
3534
}
3535
list {
3537
padding: 4px;
3538
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3539
}
3540
row {
3542
min-height: 32px;
3543
padding: 0 8px - 6px;
3544
border-radius: $corner-radius;
3545
&:selected {
3547
font-weight: 500;
3548
@include ink-color($primary, $activated: true);
3549
}
3550
+ row {
3552
margin-top: 4px;
3553
}
3554
> label {
3556
padding-left: 6px;
3557
padding-right: 6px;
3558
}
3559
&.needs-attention > label {
3561
@extend %needs-attention;
3562
}
3563
}
3564
}
3565
separator.sidebar {
3567
background-color: $divider;
3568
&.selection-mode,
3570
.selection-mode & {
3571
// background-color: $divider;
3572
}
3573
}
3574
/****************
3577
* File chooser *
3578
****************/
3579
// dim the sidebar icons, see bug #786613 for details on this oddity
3580
row image.sidebar-icon {
3581
transition: color $duration $ease-out;
3582
color: $text2;
3583
&:disabled {
3585
color: $text2-disabled;
3586
}
3587
}
3588
placessidebar.sidebar {
3590
> viewport.frame {
3591
border-style: none;
3592
}
3593
list {
3595
padding: (4px - 3px) 0 4px;
3596
}
3597
row {
3599
// Needs overriding of the GtkListBoxRow padding
3600
min-height: 32px;
3601
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3602
padding: 0;
3603
border-radius: $corner-radius;
3604
// Using margins/padding directly in the SidebarRow
3606
// will make the animation of the new bookmark row jump
3607
> revealer {
3608
padding: 0 8px;
3609
}
3610
&:selected {
3612
font-weight: 500;
3613
@include ink-color($primary, $activated: true);
3614
image.sidebar-icon {
3616
color: $primary;
3617
}
3618
}
3619
&:disabled {
3621
color: $text-disabled;
3622
}
3623
image.sidebar-icon {
3625
&:dir(ltr) {
3626
padding-right: 8px;
3627
}
3628
&:dir(rtl) {
3630
padding-left: 8px;
3631
}
3632
}
3633
label.sidebar-label {
3635
&:dir(ltr) {
3636
padding-right: 2px;
3637
}
3638
&:dir(rtl) {
3640
padding-left: 2px;
3641
}
3642
}
3643
@at-root button.sidebar-button {
3645
@extend %button-flat-basic;
3646
@extend %button-small;
3647
}
3648
&.sidebar-placeholder-row {
3650
background-color: $overlay-hover;
3651
}
3652
&.sidebar-new-bookmark-row {
3654
color: $primary;
3655
image.sidebar-icon {
3657
color: $primary;
3658
}
3659
}
3660
}
3661
}
3662
placesview {
3664
.server-list-button {
3665
> image {
3666
-gtk-icon-transform: rotate(0turn);
3667
}
3668
&:checked > image {
3670
-gtk-icon-transform: rotate(-0.5turn);
3671
}
3672
}
3673
// this selects the "connect to server" label
3675
> actionbar > revealer > box > label {
3676
padding-left: 8px;
3677
padding-right: 8px;
3678
}
3679
}
3680
/*********
3683
* Paned *
3684
*********/
3685
paned {
3686
> separator {
3687
min-width: 1px;
3688
min-height: 1px;
3689
-gtk-icon-source: none; // defeats the ugly default handle decoration
3690
border-style: none; // just to be sure
3691
background-color: transparent;
3692
// workaround, using background istead of a border since the border will get rendered twice (?)
3693
background-image: image($divider);
3694
background-size: 1px 1px;
3695
background-clip: content-box; // avoids borders image being rendered twice (?)
3696
&.wide {
3698
min-width: 6px;
3699
min-height: 6px;
3700
background-color: $background;
3701
background-image: image($divider), image($divider);
3702
background-size: 1px 1px, 1px 1px;
3703
}
3704
}
3705
&.horizontal > separator {
3707
background-repeat: repeat-y;
3708
&:dir(ltr) {
3710
margin: 0 -8px 0 0;
3711
padding: 0 8px 0 0;
3712
background-position: left;
3713
}
3714
&:dir(rtl) {
3716
margin: 0 0 0 -8px;
3717
padding: 0 0 0 8px;
3718
background-position: right;
3719
}
3720
&.wide {
3722
margin: 0;
3723
padding: 0;
3724
background-repeat: repeat-y, repeat-y;
3725
background-position: left, right;
3726
}
3727
}
3728
&.vertical > separator {
3730
margin: 0 0 -8px 0;
3731
padding: 0 0 8px 0;
3732
background-repeat: repeat-x;
3733
background-position: top;
3734
&.wide {
3736
margin: 0;
3737
padding: 0;
3738
background-repeat: repeat-x, repeat-x;
3739
background-position: bottom, top;
3740
}
3741
}
3742
}
3743
/**************
3746
* GtkInfoBar *
3747
**************/
3748
infobar {
3749
border-style: none;
3750
&.info,
3752
&.question {
3753
border-bottom: 1px solid $divider;
3754
background-color: $base;
3755
button {
3757
@extend %button-flat;
3758
&.text-button:not(:disabled) {
3760
@include ink-color($primary);
3761
}
3762
}
3763
}
3764
&.warning {
3766
background-color: $warning;
3767
color: on($warning);
3768
button.flat {
3770
@include ink-color(on($warning));
3771
}
3772
selection {}
3774
*:link {
3776
color: on($warning);
3777
}
3778
}
3779
&.error {
3781
background-color: $error;
3782
color: on($error);
3783
button.flat {
3785
@include ink-color(on($error));
3786
}
3787
selection {}
3789
*:link {
3791
color: on($error);
3792
}
3793
}
3794
// Remove ugly hard-coded padding
3796
button label {
3797
margin: 0 -4px;
3798
}
3799
}
3800
/************
3803
* Tooltips *
3804
************/
3805
tooltip {
3806
&.background {
3807
// background-color needs to be set this way otherwise it gets drawn twice
3808
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3809
background-color: $tooltip;
3810
color: on($tooltip);
3811
}
3812
// padding: 4px; /* not working */
3814
border-radius: $corner-radius;
3815
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3816
&:not(.csd):not(.unity-csd) {
3818
// border: 1px solid $divider;
3819
// border-radius: $corner-radius + 1px;
3820
// background-clip: $background-clip-extra;
3821
}
3822
// FIXME: we need a border or tooltips vanish on black background.
3824
decoration {
3825
background-color: transparent;
3826
}
3827
> box {
3829
margin: -6px; // Remove hard-coded 6px margin
3830
min-height: 32px - 4px * 2;
3831
padding: 4px 8px;
3832
}
3833
.dim-label {
3835
color: on($tooltip, text2);
3836
}
3837
* {
3839
// workaround for Eclipse.
3840
// do not include any declaration here.
3841
}
3842
}
3843
/*****************
3846
* Color Chooser *
3847
*****************/
3848
colorswatch {
3849
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3850
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3851
// applied to the overlay box.
3852
// base color corners rounding
3854
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3855
// sports a bigger radius.
3856
// nth-child is needed by the custom color strip.
3857
&.top {
3859
border-top-left-radius: $corner-radius + 0.5px;
3860
border-top-right-radius: $corner-radius + 0.5px;
3861
overlay {
3863
border-top-left-radius: $corner-radius;
3864
border-top-right-radius: $corner-radius;
3865
}
3866
}
3867
&.bottom {
3869
border-bottom-left-radius: $corner-radius + 0.5px;
3870
border-bottom-right-radius: $corner-radius + 0.5px;
3871
overlay {
3873
border-bottom-left-radius: $corner-radius;
3874
border-bottom-right-radius: $corner-radius;
3875
}
3876
}
3877
&.left,
3879
&:first-child:not(.top) {
3880
border-top-left-radius: $corner-radius + 0.5px;
3881
border-bottom-left-radius: $corner-radius + 0.5px;
3882
overlay {
3884
border-top-left-radius: $corner-radius;
3885
border-bottom-left-radius: $corner-radius;
3886
}
3887
}
3888
&.right,
3890
&:last-child:not(.bottom) {
3891
border-top-right-radius: $corner-radius + 0.5px;
3892
border-bottom-right-radius: $corner-radius + 0.5px;
3893
overlay {
3895
border-top-right-radius: $corner-radius;
3896
border-bottom-right-radius: $corner-radius;
3897
}
3898
}
3899
&.dark {
3901
color: on(dark);
3902
}
3903
&.light {
3905
color: on(light);
3906
}
3907
overlay {
3909
transition: $transition-shadow;
3910
box-shadow: $shadow-z1;
3911
&:drop(active),
3913
&:hover {
3914
box-shadow: $shadow-z3;
3915
}
3916
}
3917
&#add-color-button {
3919
border-radius: $corner-radius $corner-radius 0 0;
3920
color: $text;
3921
&:only-child {
3923
border-radius: $corner-radius;
3924
}
3925
overlay {
3927
background-color: $surface;
3928
}
3929
}
3930
&:disabled {
3932
opacity: 0.5;
3933
overlay {
3935
box-shadow: none;
3936
}
3937
}
3938
row:selected & {
3940
}
3941
&#editor-color-sample {
3943
border-radius: $corner-radius + 0.5px;
3944
overlay {
3946
border-radius: $corner-radius;
3947
&:hover {
3949
// box-shadow: $shadow-z1;
3950
}
3951
}
3952
}
3953
}
3954
// colorscale popup
3956
colorchooser .popover.osd {
3957
transition: $transition-shadow;
3958
border-radius: $corner-radius;
3959
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3960
background-color: $surface;
3961
&:backdrop {
3963
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3964
}
3965
}
3966
/********
3969
* Misc *
3970
********/
3971
// content view (grid/list)
3972
.content-view {
3973
background-color: $background;
3974
&:hover {
3976
// -gtk-icon-effect: highlight;
3977
}
3978
rubberband,
3980
.rubberband {
3981
@extend rubberband;
3982
}
3983
}
3984
.scale-popup {
3986
.osd & {
3987
// @extend %osd;
3988
button.flat { // FIXME: quick hack, redo properly
3990
}
3991
}
3992
button { // +/- buttons on GtkVolumeButton popup
3994
}
3995
}
3996
/**********************
3999
* Window Decorations *
4000
**********************/
4001
decoration {
4002
transition: $transition-shadow;
4003
border-radius: $corner-radius $corner-radius 0 0;
4004
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4005
// FIXME rationalize shadows
4007
// this is used for the resize cursor area
4009
margin: 8px;
4010
&:backdrop {
4012
// the transparent shadow here is to enforce that the shadow extents don't
4013
// change when we go to backdrop, to prevent jumping windows.
4014
// The biggest shadow should be in the same order then in the active state
4015
// or the jumping will happen during the transition.
4016
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4017
}
4018
.maximized &,
4020
.fullscreen &,
4021
.tiled &,
4022
.tiled-top &,
4023
.tiled-right &,
4024
.tiled-bottom &,
4025
.tiled-left & {
4026
border-radius: 0;
4027
}
4028
.popup & {
4030
box-shadow: none;
4031
}
4032
// server-side decorations as used by mutter
4034
.ssd & {
4035
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4036
}
4037
.csd.popup & {
4039
border-radius: $corner-radius;
4040
box-shadow: $shadow-z4;
4041
}
4042
tooltip.csd & {
4044
border-radius: $corner-radius;
4045
box-shadow: none;
4046
}
4047
messagedialog.csd & {
4049
border-radius: $corner-radius;
4050
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4051
&:backdrop {
4053
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4054
}
4055
}
4056
.solid-csd & {
4058
margin: 0;
4059
padding: 2px;
4060
border-radius: 0;
4061
box-shadow: none;
4062
box-shadow: inset 0 1px highlight($titlebar);
4063
background-color: $titlebar;
4064
&:backdrop {
4066
background-color: $titlebar-backdrop;
4067
}
4068
}
4069
}
4070
// Window Close button
4072
button.titlebutton {
4073
border-radius: $circular-radius;
4074
.selection-mode & {
4076
}
4077
}
4078
// catch all extend :)
4081
%selected_items {
4083
background-color: $overlay-selected;
4084
}
4085
.monospace {
4087
font-family: monospace;
4088
}
4089
/**********************
4092
* Touch Copy & Paste *
4093
**********************/
4094
// touch selection handlebars for the Popover.osd above
4095
cursor-handle {
4096
color: $primary;
4097
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4098
&.top:dir(ltr),
4100
&.bottom:dir(rtl) {
4101
-gtk-icon-transform: rotate(90deg);
4102
}
4103
&.bottom:dir(ltr),
4105
&.top:dir(rtl) {
4106
-gtk-icon-transform: unset;
4107
}
4108
&.insertion-cursor:dir(ltr),
4110
&.insertion-cursor:dir(rtl) {
4111
padding-top: 6px;
4112
-gtk-icon-transform: rotate(45deg);
4113
}
4114
}
4115
// Decouple the font of context menus from their entry/textview
4117
.context-menu {
4118
font: initial;
4119
}
4120
// shortcut window keys
4122
.keycap {
4123
min-width: 28px - 8px * 2;
4124
min-height: 28px - 2px;
4125
margin-top: 2px;
4126
padding-bottom: 2px;
4127
padding-left: 8px;
4128
padding-right: 8px;
4129
border: solid 1px $divider;
4131
border-radius: $corner-radius + 1px;
4132
box-shadow: inset 0 -2px $divider;
4133
background-color: $surface;
4134
color: $text;
4135
font-size: smaller;
4136
}
4137
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4139
caret-color: $primary;
4140
}
4141
stackswitcher button.text-button { // FIXME aggregate with buttons
4143
min-width: 100px;
4144
}
4145
stackswitcher button.circular,
4147
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4148
min-width: $medium-size;
4149
min-height: $medium-size;
4150
padding: 0;
4151
}
4152
/*************
4155
* App Icons *
4156
*************/
4157
// Outline for low res icons
4158
.lowres-icon {
4159
// -gtk-icon-shadow: none;
4160
}
4161
// Drapshadow for large icons
4163
.icon-dropshadow {
4164
// -gtk-icon-shadow: none;
4165
}
4166
/*********
4169
* Emoji *
4170
*********/
4171
popover.emoji-picker {
4172
padding: 0;
4173
entry {
4175
border-bottom: 1px solid $divider;
4176
border-image: none;
4177
border-radius: 0;
4178
box-shadow: none;
4179
background-color: transparent;
4180
}
4181
scrolledwindow {
4183
border-bottom: 1px solid $divider;
4184
}
4185
}
4186
button.emoji-section {
4188
margin: 4px;
4189
&:checked {
4191
// background-color: transparent;
4192
@include ink-color($primary, $activated: true);
4193
}
4194
&:not(:last-child) {
4196
margin-right: 0;
4197
}
4198
}
4199
popover.emoji-picker .emoji {
4201
min-width: 3em;
4202
min-height: 3em;
4203
padding: 0 8px;
4204
// font-size: larger;
4205
widget {
4207
transition: $transition;
4208
border-radius: $corner-radius;
4209
&:hover {
4211
background-color: $overlay-hover;
4212
}
4213
}
4214
}
4215
popover.emoji-completion {
4217
padding: 8px 0;
4218
arrow {
4220
border: none;
4221
background: none;
4222
}
4223
.emoji-completion-row {
4225
min-height: $menuitem-size;
4226
padding: 0 12px;
4227
}
4228
.emoji:hover {
4230
background-color: $overlay-hover;
4231
}
4232
}
4233