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("focus", $text);
35
}
36
}
37
/**
39
* Base States
40
*/
41
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px overlay("hover", $text);
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: $text2; // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: on(dark);
127
text-shadow: $text-shadow;
128
}
129
.rubberband,
131
rubberband {
132
border: 1px solid on(dark, primary);
133
background-color: rgba(on(dark, primary), .3);
134
}
135
flowbox {
137
rubberband {
138
@extend rubberband;
139
}
140
flowboxchild {
142
padding: 4px;
143
border-radius: $corner-radius;
144
&:selected {
146
@extend %selected_items;
147
}
148
}
149
}
150
.content-view .tile {
152
// margin: 2px;
153
// padding: 0;
154
// border-radius: 0;
155
// background-color: black;
156
&:selected {
158
background-color: transparent;
159
}
160
}
161
label {
163
caret-color: $primary; // this shouldn't be needed.
164
&.separator {
166
color: $text2;
167
}
168
selection {
170
@extend %selected_items;
171
}
172
&:disabled {
174
color: $text-disabled;
175
headerbar &,
177
menuitem &,
178
tab &,
179
button & {
180
color: inherit;
181
}
182
}
183
&.osd {
185
border-radius: $corner-radius;
186
background-color: $tooltip;
187
color: on($tooltip);
188
}
189
}
190
.dim-label {
192
color: $text2;
193
}
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base;
199
}
200
.sidebar label {
202
min-height: $medium-size;
203
padding: 0 12px;
204
color: $text-disabled;
205
font-weight: 500;
206
&.highlight {
208
color: $text;
209
}
210
}
211
}
212
%osd,
214
.osd {
215
// opacity: .9;
216
}
217
/**
219
* Spinner Animation
220
*/
221
@keyframes spin {
223
to {
224
-gtk-icon-transform: rotate(1turn);
225
}
226
}
227
spinner {
229
background: none;
230
opacity: 0; // non spinning spinner makes no sense
231
color: $primary;
232
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
233
transition: opacity $duration * 4 $ease-out;
234
animation: spin 1s linear infinite;
235
&:checked {
237
opacity: 1;
238
}
239
&:disabled {
241
color: $text2-disabled;
242
}
243
}
244
/**
246
* Text Entries
247
*/
248
%entry,
250
entry {
251
min-height: $medium-size;
252
padding: 0 8px;
253
border-radius: $corner-radius $corner-radius 0 0;
254
@include entry(normal);
256
&:focus {
258
@include entry(checked);
259
}
260
&:drop(active) {
262
@include entry(hover);
263
}
264
&:disabled {
266
@include entry(disabled);
267
}
268
&.flat {
270
min-height: 0;
271
padding: 2px;
272
border-radius: 0;
273
background-color: transparent;
274
}
275
// icons inside the entry
277
image {
278
// min-height: $small-size;
279
// min-width: $small-size;
280
// border-radius: $circular-radius;
281
// @extend %ripple;
282
// @include ink-color($text2);
283
color: $text2;
284
&:hover,
286
&:active {
287
color: $text;
288
}
289
&:disabled {
291
color: $text-disabled;
292
}
293
&.left {
295
margin-left: ($medium-size - 16px) / 2 - 8px;
296
margin-right: 6px;
297
}
298
&.right {
300
margin-left: 6px;
301
margin-right: ($medium-size - 16px) / 2 - 8px;
302
}
303
}
304
undershoot {
306
&.left {
307
@include undershoot(left);
308
}
309
&.right {
311
@include undershoot(right);
312
}
313
}
314
selection {
316
@extend %selected_items;
317
}
318
// entry error and warning style
320
@each $class, $color in (".error": $error, ".warning": $warning) {
321
&#{$class} {
322
@include entry(normal, $color);
323
&:focus {
325
@include entry(checked, $color);
326
}
327
&:disabled {
329
@include entry(disabled, $color);
330
}
331
}
332
}
333
.osd & {
335
}
336
progress {
338
margin: 0 -8px -4px;
339
border-bottom: 2px solid $primary;
340
background-color: transparent;
341
}
342
// linked entries
344
.linked:not(.vertical) > & {
345
@extend %linked;
346
}
347
// Vertically linked entries
349
.linked.vertical > & {
350
@extend %linked-vertical;
351
}
352
}
353
%entry_raised {
355
border-radius: $corner-radius;
356
@include entry(raised-normal);
358
&:focus {
360
@include entry(raised-focus);
361
}
362
&:drop(active) {
364
@include entry(raised-hover);
365
}
366
&:disabled {
368
@include entry(raised-disabled);
369
}
370
// entry error and warning style
372
@each $class, $color in (".error": $error, ".warning": $warning) {
373
&#{$class} {
374
@include entry(raised-normal, $color);
375
&:focus {
377
@include entry(raised-focus, $color);
378
}
379
&:disabled {
381
@include entry(raised-disabled, $color);
382
}
383
image {
385
color: on($color, text2);
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: on($color, text-disabled);
394
}
395
}
396
}
397
}
398
}
399
treeview entry {
401
&,
402
&.flat {
403
background-color: $base;
404
&,
406
&:focus {
407
border-image: none;
408
box-shadow: none;
409
}
410
}
411
}
412
.entry-tag {
414
margin: 2px;
415
border-radius: $circular-radius;
416
box-shadow: none;
417
background-color: $fill;
418
color: $text;
419
&:hover {
421
background-image: image(overlay("hover", $text));
422
}
423
// side margins: compensate the entry padding with a negative margin
425
// then the negative margin itself
426
:dir(ltr) & {
427
margin-left: 4px;
428
margin-right: 0;
429
padding-left: 12px;
430
padding-right: 8px;
431
}
432
:dir(rtl) & {
434
margin-left: 0;
435
margin-right: 4px;
436
padding-left: 8px;
437
padding-right: 12px;
438
}
439
// seems any sizing doesn't work
441
&.button {
442
box-shadow: none;
443
background-color: transparent;
444
color: $text2;
445
}
446
}
447
/**
449
* Buttons
450
*/
451
// stuff for .needs-attention
453
@keyframes needs-attention {
454
from {
455
background-image:
456
-gtk-gradient(
457
radial,
458
center center, 0,
459
center center, .001,
460
to($primary),
461
to(transparent)
462
);
463
}
464
to {
466
background-image:
467
-gtk-gradient(
468
radial,
469
center center, 0,
470
center center, .5,
471
to($primary),
472
to(transparent)
473
);
474
}
475
}
476
%button,
478
button {
479
min-height: 24px;
480
min-width: 16px;
481
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
482
border-radius: $corner-radius;
483
background-color: $surface;
484
color: $text;
485
font-weight: 500;
486
@extend %ripple;
488
@include raised-ink-color($text);
489
&:disabled {
491
box-shadow: none;
492
background-color: $fill;
493
color: $text-disabled;
494
}
495
&:checked {
497
background-color: overlay("activated", $primary, $background: $surface);
498
color: $primary;
499
@include raised-ink-color($primary);
500
&:disabled {
502
box-shadow: none;
503
background-color: overlay("activated", $text, $background: $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("activated", $text);
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: overlay("activated", on($color), $background: $color);
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: overlay("activated", $color);
667
}
668
}
669
.osd & {
671
}
672
}
673
}
674
.stack-switcher > & {
676
// to position the needs attention dot, padding is added to the button
677
// child, a label needs just lateral padding while an icon needs vertical
678
// padding added too.
679
> label {
681
margin: 0 -6px;
682
padding: 0 6px;
683
}
684
> image {
686
margin: -3px -6px;
687
padding: 3px 6px;
688
}
689
&.needs-attention {
691
> label,
692
> image {
693
@extend %needs-attention;
694
}
695
&:checked {
697
> label,
698
> image {
699
animation: none;
700
background-image: none;
701
}
702
}
703
}
704
}
705
// hide separators
707
&.font,
708
&.file {
709
separator {
710
@extend %hide_separators;
711
}
712
}
713
&.font {
715
> box > box > label {
716
// font-weight: bold;
717
}
718
}
719
// inline-toolbar buttons
721
.inline-toolbar & {
722
// @extend %button-flat;
723
&:not(.text-button) {
725
border-radius: $circular-radius;
726
}
727
}
728
.primary-toolbar & {
730
-gtk-icon-shadow: none; // tango icons don't need shadows
731
}
732
&.close,
734
&.circular { // The Bloody Circul Button
735
border-radius: $circular-radius;
736
label {
738
// padding: 0;
739
}
740
}
741
}
742
%button-small {
744
min-height: $small-size;
745
min-width: $small-size;
746
padding: 0;
747
border-radius: $circular-radius;
748
}
749
%needs-attention {
751
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
752
background-repeat: no-repeat;
753
background-position: right 3px;
754
background-size: 6px 6px;
755
&:dir(rtl) {
757
background-position: left 3px;
758
}
759
}
760
// all the following is for the +|- buttons on inline toolbars, that way
762
// should really be deprecated...
763
.inline-toolbar toolbutton > button {
764
}
765
// More inline toolbar buttons
767
toolbar.inline-toolbar toolbutton {
768
&:not(:first-child) > button.flat {
769
// @extend %linked-not-first-child;
770
}
771
&:not(:last-child) > button.flat {
773
// @extend %linked-not-last-child;
774
}
775
}
776
%linked-not-first-child {
778
border-top-left-radius: 0;
779
border-bottom-left-radius: 0;
780
}
781
%linked-not-last-child {
783
border-top-right-radius: 0;
784
border-bottom-right-radius: 0;
785
}
786
%linked {
788
&:not(:first-child) {
789
@extend %linked-not-first-child;
790
}
791
&:not(:last-child) {
793
@extend %linked-not-last-child;
794
}
795
}
796
%linked-vertical-not-first-child {
798
border-top-left-radius: 0;
799
border-top-right-radius: 0;
800
}
801
%linked-vertical-not-last-child {
803
border-bottom-left-radius: 0;
804
border-bottom-right-radius: 0;
805
}
806
%linked-vertical {
808
&:not(:first-child) {
809
@extend %linked-vertical-not-first-child;
810
}
811
&:not(:last-child) {
813
@extend %linked-vertical-not-last-child;
814
}
815
}
816
%linked-image-button {
818
&:first-child {
819
border-top-left-radius: $corner-radius;
820
border-bottom-left-radius: $corner-radius;
821
}
822
&:last-child {
824
border-top-right-radius: $corner-radius;
825
border-bottom-right-radius: $corner-radius;
826
}
827
&:only-child {
829
border-radius: $circular-radius;
830
}
831
}
832
%linked-vertical-image-button {
834
&:first-child {
835
border-top-left-radius: $corner-radius;
836
border-top-right-radius: $corner-radius;
837
}
838
&:last-child {
840
border-bottom-left-radius: $corner-radius;
841
border-bottom-right-radius: $corner-radius;
842
}
843
&:only-child {
845
border-radius: $circular-radius;
846
}
847
}
848
/* menu buttons */
850
modelbutton.flat,
851
.menuitem.button.flat {
852
min-height: $menuitem-size;
853
padding: 0 8px;
854
border-radius: $corner-radius;
855
@extend %ripple;
857
@include ink-color($text, $fg: false);
858
&:selected {
860
@extend %selected_items;
861
}
862
}
863
modelbutton.flat arrow {
865
&.left {
866
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
867
}
868
&.right {
870
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
871
}
872
}
873
button.color {
875
min-height: $small-size;
876
min-width: $small-size;
877
padding: $container-padding;
878
colorswatch:only-child {
880
&,
881
overlay {
882
// border-radius: 0;
883
}
884
}
885
}
886
/**
888
* Links
889
*/
890
*:link {
892
color: $primary;
893
}
894
*:visited {
896
color: $visited;
897
}
898
button.link {
900
&:link {
901
@include ink-color($primary);
902
}
903
&:visited {
905
@include ink-color($visited);
906
}
907
> label {
909
text-decoration-line: underline;
910
}
911
}
912
/**
914
* GtkSpinButton
915
*/
916
spinbutton {
918
&:not(.vertical) {
919
// in this horizontal configuration, the whole spinbutton
920
// behaves as the entry, so we extend the entry styling
921
// and nuke the style on the internal entry
922
@extend %entry;
923
padding: 0;
925
entry {
927
min-width: $large-size - 8px * 2;
928
// reset all the other props since the spinbutton node is styled here
929
margin: 0;
930
border-image: none;
931
border-radius: 0;
932
box-shadow: none;
933
background-color: transparent;
934
}
935
button {
937
@extend %button-flat-basic;
938
@extend %button-small;
939
// margin: $container-padding;
941
border: solid $container-padding transparent;
942
// Remove unwanted focus indicator
944
&:focus:not(:hover):not(:active) {
945
box-shadow: inset 0 0 0 9999px transparent;
946
}
947
&.up:dir(ltr),
949
&.down:dir(rtl) {
950
margin-left: -$container-padding / 2;
951
}
952
&.up:dir(rtl),
954
&.down:dir(ltr) {
955
margin-right: -$container-padding / 2;
956
}
957
}
958
}
959
// OSD horizontal
961
.osd &:not(.vertical) {
962
}
963
// Vertical
965
&.vertical {
966
// in the vertical configuration, we treat the spinbutton
967
// as a box, and tweak the style of the entry in the middle
968
// so that it's linked
969
// FIXME: this should not be set at all, but otherwise it gets the wrong
971
// color
972
caret-color: $primary;
973
// FIXME: this should not be set at all, but otherwise it gets the wrong
975
// color
976
&:disabled {
977
color: $text-disabled;
978
}
979
entry {
981
@extend %entry_raised;
982
min-height: $medium-size;
984
min-width: $large-size;
985
padding: 0;
986
}
987
button {
989
min-height: $medium-size;
990
min-width: $large-size;
991
padding: 0;
992
@extend %button-flat-basic;
994
// Remove unwanted focus indicator
996
&:focus:not(:hover):not(:active) {
997
box-shadow: inset 0 0 0 9999px transparent;
998
}
999
&.up {
1001
border-radius: $corner-radius $corner-radius 0 0;
1002
}
1003
&.down {
1005
border-radius: 0 0 $corner-radius $corner-radius;
1006
}
1007
}
1008
}
1009
// OSD vertical
1011
.osd &.vertical {
1012
}
1013
// Misc
1015
treeview &:not(.vertical) {
1016
min-height: 0;
1017
border-style: none;
1018
border-radius: 0;
1019
entry {
1021
min-height: 0;
1022
padding: 1px 2px;
1023
}
1024
}
1025
}
1026
/**
1028
* ComboBoxes
1029
*/
1030
combobox {
1032
arrow {
1033
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1034
min-height: 16px;
1035
min-width: 16px;
1036
}
1037
// workaround for menuitem selection
1039
decoration {
1040
transition: none;
1041
}
1042
button.combo cellview {
1044
&:dir(ltr) {
1045
margin-left: 8px - ($medium-size - 16px) / 2;
1046
}
1047
&:dir(rtl) {
1049
margin-right: 8px - ($medium-size - 16px) / 2;
1050
}
1051
}
1052
menu {
1054
padding: 2px 0;
1055
menuitem {
1057
min-height: $medium-size - 2px * 2;
1058
padding: 0 8px;
1059
}
1060
// overflow arrows
1062
> arrow {
1063
&.top {
1064
margin-top: -2px;
1065
}
1066
&.bottom {
1068
margin-top: 2px * 2;
1069
margin-bottom: -2px * 3;
1070
}
1071
}
1072
}
1073
&.linked {
1075
button:nth-child(2) {
1076
&:dir(ltr) {
1077
@extend %linked-not-first-child;
1078
}
1079
&:dir(rtl) {
1081
@extend %linked-not-last-child;
1082
}
1083
}
1084
}
1085
> .linked:not(.vertical) > entry:not(:only-child) {
1087
border-radius: $corner-radius $corner-radius 0 0;
1088
&:first-child {
1090
margin-right: -$medium-size;
1091
padding-right: $medium-size;
1092
}
1093
&:last-child {
1095
margin-left: -$medium-size;
1096
padding-left: $medium-size;
1097
}
1098
}
1099
> .linked:not(.vertical) > button:not(:only-child) {
1101
@extend %button-flat-activatable;
1102
// @extend %button-small;
1103
min-height: 16px;
1105
min-width: 16px;
1106
margin: ($medium-size - $small-size) / 2;
1107
padding: ($small-size - 16px) / 2;
1108
border-radius: $circular-radius;
1109
}
1110
}
1111
// the combo is a composite widget so the way we do button linking doesn't
1113
// work, special case needed. See
1114
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1115
.linked:not(.vertical) > combobox {
1117
&:not(:first-child) > box > button.combo {
1118
@extend %linked-not-first-child;
1119
}
1120
&:not(:last-child) > box > button.combo {
1122
@extend %linked-not-last-child;
1123
}
1124
}
1125
.linked.vertical > combobox {
1127
&:not(:first-child) > box > button.combo {
1128
@extend %linked-vertical-not-first-child;
1129
}
1130
&:not(:last-child) > box > button.combo {
1132
@extend %linked-vertical-not-last-child;
1133
}
1134
}
1135
button.combo:only-child {
1137
border-radius: $corner-radius $corner-radius 0 0;
1138
font-weight: normal;
1139
@include entry(normal);
1141
&:focus {
1143
@include entry(focus);
1144
}
1145
&:drop(active),
1147
&:hover {
1148
@include entry(hover);
1149
}
1150
&:checked {
1152
@include entry(checked);
1153
}
1154
&:disabled {
1156
@include entry(disabled);
1157
}
1158
}
1159
/**
1161
* Toolbars
1162
*/
1163
toolbar {
1165
-GtkWidget-window-dragging: true;
1166
padding: 2px;
1167
background-color: $background;
1168
button {
1170
@extend %button-flat;
1171
}
1172
// on OSD
1174
.osd & {
1175
background-color: transparent;
1176
}
1177
// stand-alone OSD toolbars
1179
&.osd {
1180
@extend %toolbar-osd;
1181
// positional classes for `attached` osd toolbars
1183
&.left,
1184
&.right,
1185
&.top,
1186
&.bottom {
1187
border-radius: 0;
1188
}
1189
&.bottom {
1191
box-shadow: none;
1192
background-color: transparent;
1193
background-image:
1194
linear-gradient(
1195
to bottom,
1196
transparent,
1197
rgba(black, .1) 30%,
1198
rgba(black, .2) 50%,
1199
rgba(black, .4)
1200
);
1201
}
1202
}
1203
// toolbar separators
1205
&.horizontal > separator {
1206
margin: 2px;
1207
}
1208
&.vertical > separator {
1210
margin: 2px;
1211
}
1212
&:not(.inline-toolbar):not(.osd) {
1214
scale,
1215
entry,
1216
spinbutton,
1217
button {
1218
margin: 2px;
1219
}
1220
.linked entry,
1222
.linked spinbutton,
1223
.linked button {
1224
&:not(:first-child) {
1225
margin-left: 0;
1226
}
1227
&:not(:last-child) {
1229
margin-right: 0;
1230
}
1231
}
1232
spinbutton {
1234
entry,
1235
button {
1236
margin: 0;
1237
}
1238
}
1239
switch {
1241
margin: 2px + $container-padding 2px;
1242
}
1243
}
1244
}
1245
%toolbar-osd {
1247
transition: $transition-shadow;
1248
padding: $container-padding;
1249
border-radius: $corner-radius;
1250
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1251
background-color: $surface;
1252
&:backdrop {
1254
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1255
}
1256
}
1257
// searchbar, location-bar & inline-toolbar
1259
.inline-toolbar {
1260
padding: $container-padding;
1261
border-style: solid;
1262
border-width: 0 1px 1px;
1263
border-color: $divider;
1264
background-color: $base-alt;
1265
}
1266
searchbar > revealer > box,
1268
.location-bar {
1269
padding: $container-padding;
1270
border-style: solid;
1271
border-width: 0 0 1px;
1272
border-color: $divider;
1273
background-color: $background;
1274
background-clip: border-box;
1275
}
1276
searchbar > revealer > box {
1278
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1279
margin: -6px;
1280
padding: $container-padding;
1281
}
1282
/**
1284
* Header bars
1285
*/
1286
.titlebar {
1288
transition: background-color $duration $ease-out, color $duration $ease-out;
1289
border-radius: $corner-radius $corner-radius 0 0;
1290
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1291
background-color: $titlebar;
1292
color: $titlebar-text;
1293
&:disabled {
1295
color: $titlebar-text-disabled;
1296
}
1297
&:backdrop {
1299
background-color: $titlebar-backdrop;
1300
color: $titlebar-text2;
1301
&:disabled {
1303
color: $titlebar-text2-disabled;
1304
}
1305
}
1306
.title {
1308
padding-left: 12px;
1309
padding-right: 12px;
1310
font-weight: bold;
1311
}
1312
.subtitle {
1314
padding-left: 12px;
1315
padding-right: 12px;
1316
font-size: smaller;
1317
}
1318
.subtitle,
1320
.dim-label {
1321
transition: color $duration $ease-out;
1322
color: $titlebar-text2;
1323
&:backdrop {
1325
color: $titlebar-text-disabled;
1326
}
1327
}
1328
// Don't draw titlebar above titlebar
1330
.titlebar {
1331
background-color: transparent;
1332
box-shadow: none;
1333
}
1334
// The separator for split headerbars
1336
headerbar + separator {
1337
background-color: $titlebar-divider;
1338
}
1339
entry {
1341
box-shadow: inset 0 -1px $titlebar-stroke;
1342
background-color: $titlebar-entry-fill;
1343
color: $titlebar-text;
1344
&:disabled {
1346
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1347
background-color: $titlebar-entry-fill;
1348
color: $titlebar-text-disabled;
1349
}
1350
image {
1352
color: $titlebar-text2;
1353
&:hover,
1355
&:active {
1356
color: $titlebar-text;
1357
}
1358
&:disabled {
1360
color: $titlebar-text-disabled;
1361
}
1362
}
1363
}
1364
.linked:not(.vertical) > entry:not(:only-child) {
1366
border-radius: $corner-radius $corner-radius 0 0;
1367
}
1368
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1370
@extend %button-flat;
1371
border-image:
1373
radial-gradient(
1374
circle closest-corner at center calc(100% - 1px),
1375
$titlebar-indicator 0%,
1376
transparent 0%
1377
) 0 0 0 / 0 0 0;
1378
@include ink-color($titlebar-text2);
1380
&:disabled {
1382
color: $titlebar-text2-disabled;
1383
}
1384
@at-root %titlebar-button-checked,
1386
&:checked {
1387
border-image:
1388
radial-gradient(
1389
circle closest-corner at center calc(100% - 1px),
1390
$titlebar-indicator 100%,
1391
transparent 0%
1392
) 0 0 2 / 0 0 2px;
1393
background-color: transparent;
1394
color: $titlebar-text;
1395
@include ink-color($titlebar-text);
1396
&:disabled {
1398
background-color: transparent;
1399
color: $titlebar-text-disabled;
1400
}
1401
}
1402
&:backdrop {
1404
color: $titlebar-text-disabled;
1405
&:disabled {
1407
color: $titlebar-text2-disabled;
1408
}
1409
&:checked {
1411
color: $titlebar-text2;
1412
&:disabled {
1414
color: $titlebar-text2-disabled;
1415
}
1416
}
1417
}
1418
}
1419
button.suggested-action, button.destructive-action {
1421
&:disabled {
1422
background-color: $titlebar-fill;
1423
color: $titlebar-text-disabled;
1424
}
1425
}
1426
// FIXME: Ugly overriding
1428
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1429
min-width: 120px - 8px * 2;
1430
}
1431
// FIXME: Ugly overriding
1433
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1434
min-width: 0;
1435
padding-left: ($medium-size - 24px) / 2;
1436
padding-right: ($medium-size - 24px) / 2;
1437
}
1438
&.selection-mode {
1440
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1441
// but let's keep it for backwards compatibility.
1442
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1443
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1444
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1445
background-color: $primary;
1446
color: on($primary);
1447
&:backdrop {
1449
color: on($primary, text2);
1450
}
1451
.subtitle:link {
1453
color: on($primary);
1454
}
1455
button:not(.suggested-action):not(.destructive-action) {
1457
border-image:
1458
radial-gradient(
1459
circle closest-corner at center calc(100% - 1px),
1460
currentcolor 0%,
1461
transparent 0%
1462
) 0 0 0 / 0 0 0;
1463
color: on($primary);
1464
&:disabled {
1466
color: on($primary, text-disabled);
1467
}
1468
&:checked {
1470
border-image:
1471
radial-gradient(
1472
circle closest-corner at center calc(100% - 1px),
1473
currentcolor 100%,
1474
transparent 0%
1475
) 0 0 2 / 0 0 2px;
1476
color: on($primary);
1477
&:disabled {
1479
color: on($primary, text-disabled);
1480
}
1481
}
1482
&:backdrop {
1484
color: on($primary, text2);
1485
&:disabled {
1487
color: on($primary, text2-disabled);
1488
}
1489
&:checked {
1491
color: on($primary, text2);
1492
&:disabled {
1494
color: on($primary, text2-disabled);
1495
}
1496
}
1497
}
1498
}
1499
.selection-menu {
1501
padding-left: 16px;
1502
padding-right: 16px;
1503
arrow {
1505
-GtkArrow-arrow-scaling: 1;
1506
}
1507
.arrow {
1509
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1510
}
1511
}
1512
}
1513
.selection-mode {
1515
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1516
background-color: $primary;
1517
}
1518
// squared corners when the window is maximized, tiled, or fullscreen
1520
.tiled &,
1521
.tiled-top &,
1522
.tiled-right &,
1523
.tiled-bottom &,
1524
.tiled-left &,
1525
.maximized &,
1526
.fullscreen & {
1527
border-radius: 0;
1528
box-shadow: $shadow-z1;
1529
}
1530
&.default-decoration {
1532
min-height: $small-size;
1533
padding: $container-padding;
1534
box-shadow: inset 0 1px highlight($titlebar);
1535
.tiled &,
1537
.maximized &,
1538
.fullscreen & {
1539
box-shadow: none;
1540
}
1541
button.titlebutton {
1543
min-height: $small-size;
1544
min-width: $small-size;
1545
margin: 0;
1546
padding: 0;
1547
}
1548
// workaround for non-animatable buttons
1550
.background:not(.csd) & button.titlebutton:active {
1551
background-size: 1000% 1000%;
1552
}
1553
}
1554
.solid-csd & {
1556
&:dir(rtl), &:dir(ltr) { // specificity bump
1557
border-radius: 0;
1558
box-shadow: $shadow-z1; // just remove the highlight
1559
}
1560
}
1561
}
1562
headerbar {
1564
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1565
min-height: $large-size;
1566
padding: 0 $container-padding;
1567
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1569
entry,
1570
spinbutton,
1571
button {
1572
margin-top: $container-padding;
1573
margin-bottom: $container-padding;
1574
}
1575
separator.titlebutton {
1577
margin-top: $large-size / 4;
1578
margin-bottom: $large-size / 4;
1579
background-color: $titlebar-divider;
1580
}
1581
switch {
1583
margin-top: ($large-size - 24px) / 2;
1584
margin-bottom: ($large-size - 24px) / 2;
1585
}
1586
// reset button margins of the spinbutton
1588
spinbutton button {
1589
margin-top: 0;
1590
margin-bottom: 0;
1591
}
1592
// FIXME: This is a hacky workaround.
1594
.entry-tag {
1595
margin-top: 5px;
1596
margin-bottom: 5px;
1597
}
1598
}
1599
// Development versions of apps to use a differently styled headerbar
1601
window.devel .titlebar:not(.selection-mode) {
1602
}
1603
/**
1605
* Pathbars
1606
*/
1607
%pathbar_button,
1609
.path-bar.linked:not(.vertical) > button {
1610
@extend %button-flat-basic;
1611
padding-left: ($medium-size - 24px) / 2;
1613
padding-right: ($medium-size - 24px) / 2;
1614
border-image:
1615
radial-gradient(
1616
circle closest-corner at center calc(100% - 1px),
1617
$primary 0%,
1618
transparent 0%
1619
) 0 0 0 / 0 0 0;
1620
border-radius: $corner-radius;
1621
&:checked {
1623
border-image:
1624
radial-gradient(
1625
circle closest-corner at center calc(100% - 1px),
1626
$primary 100%,
1627
transparent 0%
1628
) 0 0 2 / 0 0 2px;
1629
color: $text;
1630
&,
1632
&:disabled {
1633
background-color: transparent;
1634
}
1635
}
1636
label:not(:only-child) {
1638
&:first-child {
1639
margin-left: 0;
1640
}
1641
&:last-child {
1643
margin-right: 0;
1644
}
1645
}
1646
&.text-button {
1648
min-width: 0;
1649
}
1650
&.slider-button {
1652
padding-left: (24px - 16px) / 2;
1653
padding-right: (24px - 16px) / 2;
1654
}
1655
}
1656
/**
1658
* Tree Views
1659
*/
1660
treeview.view {
1662
@at-root * {
1663
-GtkTreeView-horizontal-separator: 4;
1664
-GtkTreeView-grid-line-width: 1;
1665
-GtkTreeView-grid-line-pattern: '';
1666
-GtkTreeView-tree-line-width: 1;
1667
-GtkTreeView-tree-line-pattern: '';
1668
-GtkTreeView-expander-size: 16;
1669
}
1670
border-left-color: $stroke; // this is actually the tree lines color,
1672
border-top-color: $divider; // while this is the grid lines color, better then nothing
1673
// FIXME: Avoid transparency background-color being slightly darker
1675
&:selected {
1676
background-color: $base;
1677
background-image: image($overlay-selected);
1678
}
1679
// to avoid borders being overridden by the previously set props
1681
rubberband {
1682
@extend rubberband;
1683
}
1684
&:hover,
1686
&:selected {
1687
border-radius: 0;
1688
}
1689
&.separator {
1691
min-height: 1px + 2px * 2;
1692
color: $divider;
1693
}
1694
&:drop(active) {
1696
// FIXME: box-shadow, background-color and background-image are not available here.
1697
border-style: solid none;
1698
border-width: 9999px;
1699
border-color: overlay("hover", $text);
1700
&.after {
1702
border-top-style: none;
1703
}
1704
&.before {
1706
border-bottom-style: none;
1707
}
1708
}
1709
&.expander {
1711
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1712
-gtk-icon-transform: rotate(-90deg);
1713
&:dir(rtl) {
1715
-gtk-icon-transform: rotate(90deg);
1716
}
1717
&:checked {
1719
-gtk-icon-transform: unset;
1720
}
1721
color: $text2;
1723
&:hover,
1725
&:active {
1726
color: $text;
1727
}
1728
&:disabled {
1730
color: $text2-disabled;
1731
}
1732
}
1733
&.progressbar { // progress bar in treeviews
1735
border-bottom: $bar-size solid $primary;
1736
box-shadow: none;
1737
background-color: transparent;
1738
background-image: none;
1739
&:selected:hover {
1741
box-shadow: none;
1742
}
1743
}
1744
&.trough { // progress bar trough in treeviews
1746
border-bottom: $bar-size solid $stroke-disabled;
1747
box-shadow: none;
1748
background-color: transparent;
1749
background-image: none;
1750
&:selected:hover {
1752
box-shadow: none;
1753
}
1754
}
1755
header {
1757
button {
1758
padding: 2px 6px;
1759
border-style: none solid solid none;
1760
border-width: 1px;
1761
border-color: $divider;
1762
border-radius: 0;
1763
background-clip: border-box;
1764
color: $text2;
1765
@include ink-color($text2);
1766
@include list-item;
1767
&:disabled {
1769
color: $text2-disabled;
1770
}
1771
&,
1773
&:disabled {
1774
background-color: $base;
1775
}
1776
&:last-child {
1778
border-right-style: none;
1779
}
1780
}
1781
}
1782
button.dnd,
1784
header.button.dnd { // for treeview-like derive widgets
1785
padding: 2px 6px;
1786
border-style: none solid solid;
1787
border-width: 1px;
1788
border-color: $divider;
1789
border-radius: 0;
1790
box-shadow: none;
1791
background-color: $base;
1792
background-clip: border-box;
1793
color: $primary;
1794
}
1795
// see tests/testaccel to test
1797
acceleditor > label {
1798
background-color: $primary;
1799
}
1800
}
1801
/**
1803
* Menus
1804
*/
1805
menubar,
1807
.menubar {
1808
-GtkWidget-window-dragging: true;
1809
padding: 0;
1810
// box-shadow: inset 0 -1px $divider;
1811
background-color: $titlebar;
1812
color: $titlebar-text;
1813
&:backdrop {
1815
background-color: $titlebar-backdrop;
1816
color: $titlebar-text2;
1817
}
1818
.csd & {
1820
transition: $transition;
1821
}
1822
> menuitem {
1824
transition: $transition;
1825
min-height: 20px;
1826
padding: 4px 8px;
1827
color: $titlebar-text2;
1828
&:hover { // Seems like it :hover even with keyboard focus
1830
transition: none;
1831
background-color: overlay("activated", $titlebar-text);
1832
color: $titlebar-text;
1833
}
1834
&:disabled {
1836
color: $titlebar-text2-disabled;
1837
}
1838
}
1839
}
1840
// Needed to make the border-radius of menus work
1842
// otherwise the background bleeds out of the menu edges
1843
.background.popup {
1844
background-color: transparent;
1845
}
1846
menu,
1848
.menu,
1849
.context-menu {
1850
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1851
padding: 4px 0;
1852
box-shadow: inset 0 1px highlight($surface);
1853
background-color: $surface;
1854
background-clip: border-box;
1855
border: 1px solid $divider; // adds borders in a non composited env
1856
.csd & {
1858
border: none; // axes borders in a composited env
1859
border-radius: $corner-radius;
1860
}
1861
menuitem {
1863
transition: background-color $duration $ease-out;
1864
min-height: 20px;
1865
min-width: 40px;
1866
padding: 4px 8px;
1867
color: $text;
1868
font: initial;
1869
text-shadow: none;
1870
&:hover {
1872
transition: none;
1873
background-color: overlay("hover", $text);
1874
}
1875
&:disabled {
1877
color: $text-disabled;
1878
}
1879
// submenu indicators
1881
arrow {
1882
min-height: 16px;
1883
min-width: 16px;
1884
color: $text2;
1885
&:disabled {
1887
color: $text2-disabled;
1888
}
1889
&:dir(ltr) {
1891
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1892
margin-left: 8px;
1893
}
1894
&:dir(rtl) {
1896
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1897
margin-right: 8px;
1898
}
1899
}
1900
// avoids labels color being overridden, see
1902
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1903
label {
1904
&:dir(rtl),
1905
&:dir(ltr) {
1906
// color: inherit;
1907
}
1908
}
1909
}
1910
// overflow arrows
1912
> arrow {
1913
min-height: 16px;
1914
min-width: 16px;
1915
padding: 4px;
1916
background-color: $surface;
1917
color: $text2;
1918
&.top {
1920
margin-top: -4px;
1921
border-bottom: 1px solid $divider;
1922
border-radius: $corner-radius $corner-radius 0 0;
1923
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1924
}
1925
&.bottom {
1927
margin-top: 4px * 2;
1928
margin-bottom: -4px * 3;
1929
border-top: 1px solid $divider;
1930
border-radius: 0 0 $corner-radius $corner-radius;
1931
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1932
}
1933
&:hover {
1935
background-image: image(overlay("hover", $text));
1936
}
1937
&:disabled {
1939
border-color: transparent;
1940
background-color: transparent;
1941
color: transparent;
1942
// color: $text2-disabled;
1943
}
1944
}
1945
separator {
1947
margin: 4px 0;
1948
}
1949
}
1950
menuitem {
1952
accelerator {
1953
color: $text2;
1954
}
1955
&:disabled accelerator {
1957
color: $text2-disabled;
1958
}
1959
}
1960
/**
1962
* Popovers
1963
*/
1964
popover.background {
1966
transition: $transition-shadow;
1967
padding: 2px;
1968
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1969
background-color: $surface;
1970
&:backdrop {
1972
box-shadow: $shadow-z2;
1973
}
1974
&, .csd & {
1976
border-style: solid;
1977
border-width: 1px;
1978
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
1979
border-radius: $corner-radius + 1px;
1980
}
1981
> stack {
1983
margin: -4px; // remove extra padding from menu style popovers
1984
}
1985
> toolbar {
1987
margin: -2px;
1988
}
1989
> list,
1991
> .view,
1992
> toolbar {
1993
border-style: none;
1994
box-shadow: none;
1995
background-color: transparent;
1996
}
1997
// FIXME: Use the popover color instead of transparent as a workaround for .view
1999
list,
2000
.view:not(:selected),
2001
toolbar {
2002
background-color: $surface;
2003
}
2004
&.touch-selection,
2006
&.magnifier,
2007
&.osd {
2008
// @extend %osd;
2009
}
2010
button:not(.suggested-action):not(.destructive-action) {
2012
// @extend %button-flat;
2013
}
2014
.linked:not(.vertical) > entry:not(:only-child) {
2016
// border-radius: $corner-radius $corner-radius 0 0;
2017
}
2018
&.menu button,
2020
button.model {
2021
@extend %button-flat;
2022
min-height: 32px;
2024
padding: 0 8px;
2025
border-radius: $corner-radius;
2026
&:checked {
2028
// color: $primary;
2029
}
2030
}
2031
separator {
2033
margin: 4px 0;
2034
}
2035
list separator {
2037
margin: 0;
2038
}
2039
}
2040
/**
2042
* Notebooks
2043
*/
2044
notebook {
2046
frame > paned > & > header,
2047
&.frame > header {
2048
background-color: $base-alt;
2049
}
2050
&:focus tab:checked {
2052
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2053
}
2054
> header {
2056
border-width: 1px;
2057
border-color: $divider;
2058
background-color: $background;
2059
background-clip: border-box;
2060
&.top {
2062
border-bottom-style: solid;
2063
> tabs {
2065
margin-bottom: -1px;
2066
> tab {
2068
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2069
&:checked {
2071
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2072
}
2073
&.reorderable-page {
2075
border-image-width: 0 1px 2px;
2076
}
2077
}
2078
}
2079
}
2080
&.bottom {
2082
border-top-style: solid;
2083
> tabs {
2085
margin-top: -1px;
2086
> tab {
2088
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2089
&:checked {
2091
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2092
}
2093
&.reorderable-page {
2095
border-image-width: 2px 1px 0;
2096
}
2097
}
2098
}
2099
}
2100
&.left {
2102
border-right-style: solid;
2103
> tabs {
2105
margin-right: -1px;
2106
> tab {
2108
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2109
&:checked {
2111
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2112
}
2113
&.reorderable-page {
2115
border-image-width: 1px 2px 1px 0;
2116
}
2117
}
2118
}
2119
}
2120
&.right {
2122
border-left-style: solid;
2123
> tabs {
2125
margin-left: -1px;
2126
> tab {
2128
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2129
&:checked {
2131
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2132
}
2133
&.reorderable-page {
2135
border-image-width: 1px 0 1px 2px;
2136
}
2137
}
2138
}
2139
}
2140
&.top > tabs > arrow {
2142
@extend %notebook_vert_arrows;
2143
border-top-style: none;
2145
}
2146
&.bottom > tabs > arrow {
2148
@extend %notebook_vert_arrows;
2149
border-bottom-style: none;
2151
}
2152
@at-root %notebook_vert_arrows {
2154
padding-left: 4px;
2155
padding-right: 4px;
2156
&.down {
2158
margin-left: -8px;
2159
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2160
}
2161
&.up {
2163
margin-right: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2165
}
2166
}
2167
&.left > tabs > arrow {
2169
@extend %notebook_horz_arrows;
2170
border-left-style: none;
2172
}
2173
&.right > tabs > arrow {
2175
@extend %notebook_horz_arrows;
2176
border-right-style: none;
2178
}
2179
@at-root %notebook_horz_arrows {
2181
padding-top: 4px;
2182
padding-bottom: 4px;
2183
&.down {
2185
margin-top: -8px;
2186
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2187
}
2188
&.up {
2190
margin-bottom: -8px;
2191
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2192
}
2193
}
2194
> tabs > arrow {
2196
min-height: 16px;
2197
min-width: 16px;
2198
border-radius: 0;
2199
@extend %ripple;
2201
@include ink-color($text2);
2202
&:disabled {
2204
color: $text2-disabled;
2205
}
2206
}
2207
tab {
2209
transition: $transition,
2210
background-size 0ms,
2211
background-image 0ms;
2212
min-height: $small-size;
2213
min-width: $small-size;
2214
padding: $container-padding 12px;
2215
border-width: 1px; // for reorderable tabs
2217
border-color: transparent; //
2218
outline: none;
2220
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2221
background-repeat: no-repeat;
2222
background-position: center;
2223
background-size: 0% 0%;
2224
background-clip: border-box;
2225
color: $text2;
2227
font-weight: 500;
2228
&:hover {
2230
background-color: overlay("hover", $text);
2231
}
2232
&:disabled {
2234
color: $text2-disabled;
2235
}
2236
&:checked {
2238
transition: $transition,
2239
background-size $ripple-fade-in-duration $ease-out,
2240
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2241
background-color: transparent;
2242
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2243
background-size: 1000% 1000%;
2244
background-clip: padding-box;
2245
color: $text;
2246
&:disabled {
2248
color: $text-disabled;
2249
}
2250
&.reorderable-page {
2252
border-color: $divider;
2253
background-color: $base;
2254
}
2255
}
2256
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2258
> box {
2259
transition: background-color $duration $ease-out;
2260
margin: -$container-padding -12px;
2261
padding: $container-padding 12px;
2262
&:drop(active) {
2264
background-color: overlay("hover", $text);
2265
}
2266
}
2267
// colors the button like the label, overridden otherwise
2269
button.flat {
2270
@extend %button-small;
2271
&:last-child {
2273
margin-left: $container-padding;
2274
margin-right: $container-padding - 12px;
2275
}
2276
&:first-child {
2278
margin-left: $container-padding - 12px;
2279
margin-right: $container-padding;
2280
}
2281
}
2282
}
2283
&.top,
2285
&.bottom {
2286
tabs {
2287
padding-left: 8px;
2288
padding-right: 8px;
2289
&:not(:only-child) {
2291
&:first-child {
2292
margin-left: 0;
2293
}
2294
&:last-child {
2296
margin-right: 0;
2297
}
2298
}
2299
tab.reorderable-page {
2301
border-style: none solid;
2302
}
2303
}
2304
}
2305
&.left,
2307
&.right {
2308
tabs {
2309
padding-top: 8px;
2310
padding-bottom: 8px;
2311
&:not(:only-child) {
2313
&:first-child {
2314
margin-top: 0;
2315
}
2316
&:last-child {
2318
margin-bottom: 0;
2319
}
2320
}
2321
tab.reorderable-page {
2323
border-style: solid none;
2324
}
2325
}
2326
}
2327
}
2328
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2330
background-color: $base;
2331
}
2332
}
2333
/**
2335
* Scrollbars
2336
*/
2337
scrollbar {
2339
$_slider_min_length: 24px;
2340
// disable steppers
2342
@at-root * {
2343
-GtkScrollbar-has-backward-stepper: false;
2344
-GtkScrollbar-has-forward-stepper: false;
2345
}
2346
transition: $transition;
2348
background-color: $base;
2349
// scrollbar border
2351
&.top { border-bottom: 1px solid $divider; }
2352
&.bottom { border-top: 1px solid $divider; }
2353
&.left { border-right: 1px solid $divider; }
2354
&.right { border-left: 1px solid $divider; }
2355
// slider
2357
slider {
2358
transition: background-color $duration $ease-out;
2359
min-width: 8px;
2360
min-height: 8px;
2361
border: 4px solid transparent;
2362
border-radius: $circular-radius;
2363
background-clip: padding-box;
2364
background-color: $text-disabled;
2365
&:hover {
2367
background-color: $text2;
2368
}
2369
&:active {
2371
background-color: $text;
2372
}
2373
&:disabled {
2375
background-color: $text2-disabled;
2376
}
2377
}
2378
&.fine-tune {
2380
slider {
2381
min-width: 4px;
2382
min-height: 4px;
2383
}
2384
&.horizontal slider {
2386
margin: 2px 0;
2387
}
2388
&.vertical slider {
2390
margin: 0 2px;
2391
}
2392
}
2393
&.overlay-indicator {
2395
&:not(.fine-tune) slider {
2396
transition-property: background-color, min-height, min-width;
2397
}
2398
&:not(.dragging):not(.hovering) {
2400
border-color: transparent;
2401
background-color: transparent;
2402
slider {
2404
min-width: 4px;
2405
min-height: 4px;
2406
margin: 4px - 1px;
2407
border: 1px solid rgba($base, .3);
2408
}
2409
button {
2411
min-width: 4px;
2412
min-height: 4px;
2413
margin: 4px - 1px;
2414
border: 1px solid rgba($base, .3);
2415
border-radius: $circular-radius;
2416
background-color: $text-disabled;
2417
background-clip: padding-box;
2418
-gtk-icon-source: none;
2419
&:disabled {
2421
background-color: $text2-disabled;
2422
}
2423
}
2424
&.horizontal {
2426
slider {
2427
min-width: $_slider_min_length;
2428
}
2429
button {
2431
min-width: 8px;
2432
}
2433
}
2434
&.vertical {
2436
slider {
2437
min-height: $_slider_min_length;
2438
}
2439
button {
2441
min-height: 8px;
2442
}
2443
}
2444
}
2445
&.dragging,
2447
&.hovering {
2448
background-color: rgba($surface, .9);
2449
}
2450
}
2451
&.horizontal slider {
2453
min-width: $_slider_min_length;
2454
}
2455
&.vertical slider {
2457
min-height: $_slider_min_length;
2458
}
2459
// button styling
2461
button {
2462
@extend %button-flat-basic;
2463
min-width: 16px;
2465
min-height: 16px;
2466
padding: 0;
2467
border-radius: 0;
2468
}
2469
// button icons
2471
&.vertical {
2472
button {
2473
&.down {
2474
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2475
}
2476
&.up {
2478
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2479
}
2480
}
2481
}
2482
&.horizontal {
2484
button {
2485
&.down {
2486
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2487
}
2488
&.up {
2490
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2491
}
2492
}
2493
}
2494
}
2495
/**
2498
* Switch
2499
*/
2500
switch {
2502
transition: all $duration $ease-out;
2503
margin: $container-padding 0;
2504
padding: 0 2px;
2505
border: 5px solid transparent;
2506
border-radius: $circular-radius;
2507
background-color: $stroke;
2508
background-clip: padding-box;
2509
font-size: 0;
2510
&:checked {
2512
background-color: rgba($primary, .5);
2513
}
2514
&:disabled {
2516
opacity: .5;
2517
}
2518
// hide on/off icons for >=3.24.5
2520
image {
2521
margin: -8px;
2522
-gtk-icon-transform: scale(0);
2523
}
2524
slider {
2526
transition: all $duration $ease-out;
2527
min-width: 20px;
2528
min-height: 20px;
2529
margin: -3px -2px;
2530
border-radius: $circular-radius;
2531
outline: none;
2532
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2533
background-color: $switch-surface;
2534
}
2535
&:hover slider {
2537
box-shadow: 0 0 0 10px overlay("hover", $text), $shadow-z1;
2538
}
2539
&:focus slider {
2541
box-shadow: 0 0 0 10px overlay("focus", $text), $shadow-z1;
2542
}
2543
&:checked slider {
2545
background-color: $primary;
2546
}
2547
&:checked:hover slider {
2549
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2550
}
2551
&:checked:focus slider {
2553
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2554
}
2555
row:selected & {
2557
}
2558
}
2559
/**
2561
* Check and Radio items
2562
*/
2563
// draw regular check and radio items using our PNG assets
2565
// all assets are rendered from assets.svg. never add pngs directly
2566
// selection-mode
2568
.view.content-view.check:not(list),
2569
.content-view:not(list) .tile check {
2570
min-height: 40px;
2571
min-width: 40px;
2572
margin: 0;
2573
padding: 0;
2574
box-shadow: none;
2575
background-color: transparent;
2576
background-image: none;
2577
-gtk-icon-shadow: $icon-shadow-z2;
2578
&:hover,
2580
&:active {
2581
-gtk-icon-shadow: $icon-shadow-z4;
2582
}
2583
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2585
&#{$class} {
2586
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2587
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2589
}
2590
}
2591
}
2592
checkbutton,
2594
radiobutton {
2595
outline: none;
2596
}
2597
checkbutton.text-button,
2599
radiobutton.text-button {
2600
// this is for a nice focus on check and radios text
2601
padding: 2px;
2602
label:not(:only-child) {
2604
margin: 0 4px;
2605
}
2606
}
2607
$check-radio-size: 40px;
2609
check,
2611
radio {
2612
min-height: 24px;
2613
min-width: 24px;
2614
margin: -($check-radio-size - 24px) / 2;
2615
padding: ($check-radio-size - 24px) / 2;
2616
border-radius: $circular-radius;
2617
@extend %ripple;
2619
@include ink-color($text2);
2620
&:checked,
2622
&:indeterminate {
2623
@include ink-color($primary);
2624
}
2625
&:disabled {
2627
color: $text2-disabled;
2628
}
2629
&:only-child {
2631
// margin: -12px;
2632
}
2633
popover modelbutton.flat & {
2635
&,
2636
&:focus,
2637
&:hover,
2638
&:focus:hover,
2639
&:active,
2640
&:disabled {
2641
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2642
box-shadow: none;
2643
background-image: none;
2644
}
2645
&.left:dir(rtl) {
2647
margin-left: -12px;
2648
margin-right: -4px;
2649
}
2650
&.right:dir(ltr) {
2652
margin-left: -4px;
2653
margin-right: -12px;
2654
}
2655
}
2656
menu menuitem & {
2658
transition: none;
2659
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2660
padding: 0;
2661
&:dir(ltr) {
2663
margin-right: 8px;
2664
}
2665
&:dir(rtl) {
2667
margin-left: 8px;
2668
}
2669
&,
2671
&:hover,
2672
&:disabled {
2673
box-shadow: none;
2674
}
2675
}
2676
}
2677
%check,
2679
check {
2680
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2681
&:checked {
2683
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2684
}
2685
&:indeterminate {
2687
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2688
}
2689
}
2690
%radio,
2692
radio {
2693
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2694
&:checked {
2696
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2697
}
2698
&:indeterminate {
2700
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2701
}
2702
border-image-slice: $check-radio-size / 2px;
2704
border-image-width: $check-radio-size / 2;
2705
$radio-indicator-size: 10px / $check-radio-size / 2;
2707
border-image-source:
2709
-gtk-gradient(
2710
radial,
2711
center center, 0,
2712
center center, .001,
2713
to($primary),
2714
to(transparent)
2715
);
2716
&:checked:not(:indeterminate) {
2718
border-image-source:
2719
-gtk-gradient(
2720
radial,
2721
center center, 0,
2722
center center, $radio-indicator-size,
2723
to($primary),
2724
to(transparent)
2725
);
2726
&:disabled {
2728
border-image-source:
2729
-gtk-gradient(
2730
radial,
2731
center center, 0,
2732
center center, $radio-indicator-size,
2733
to($text2-disabled),
2734
to(transparent)
2735
);
2736
}
2737
}
2738
}
2739
%small_check,
2741
menu menuitem check {
2742
min-height: 16px;
2743
min-width: 16px;
2744
border-radius: $corner-radius;
2745
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2746
&:checked {
2748
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2749
}
2750
&:indeterminate {
2752
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2753
}
2754
}
2755
%small_radio,
2757
menu menuitem radio {
2758
min-height: 16px;
2759
min-width: 16px;
2760
border-image: none;
2761
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2762
&:checked {
2764
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2765
}
2766
&:indeterminate {
2768
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2769
}
2770
}
2771
// ANIMATION:
2773
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2774
// the transformation is set on the active state and it get reset on the checked state.
2775
radio:not(:checked):active {
2776
// -gtk-icon-transform: scale(0);
2777
}
2778
// Otherwise, treeview.view styling will be applied...
2780
treeview.view check,
2781
treeview.view radio {
2782
padding: 0;
2783
color: $text2;
2784
&:checked,
2786
&:indeterminate {
2787
color: $primary;
2788
}
2789
&:disabled {
2791
color: $text2-disabled;
2792
}
2793
&,
2795
&:hover,
2796
&:selected,
2797
&:selected:hover {
2798
box-shadow: none;
2799
background-color: transparent;
2800
}
2801
}
2802
treeview.view radio:checked {
2804
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2805
border-image: none;
2806
}
2807
/**
2809
* GtkScale
2810
*/
2811
scale {
2813
// sizing
2814
$_marks_length: 8px;
2815
$_marks_distance: 7px;
2816
$trough_size: 2px;
2818
$finetune_trough_size: 4px;
2819
$slider_size: 32px;
2821
$slider_margin: -($slider_size - $trough_size) / 2;
2823
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2824
$color_slider_margin: -($slider_size) * 3 / 4;
2826
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2827
min-height: $trough_size;
2829
min-width: $trough_size;
2830
&.horizontal {
2832
padding: ($medium-size - $trough_size) / 2 12px;
2833
}
2834
&.vertical {
2836
padding: 12px ($medium-size - $trough_size) / 2;
2837
}
2838
// the slider is inside the trough, so to have make it bigger there's a negative margin
2840
slider {
2841
min-height: $slider_size;
2842
min-width: $slider_size;
2843
margin: $slider_margin;
2844
}
2845
// click-and-hold the slider to activate
2847
&.fine-tune {
2848
&.horizontal {
2849
min-height: $finetune_trough_size;
2850
padding-top: ($medium-size - $finetune_trough_size) / 2;
2851
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2852
}
2853
&.vertical {
2855
min-width: $finetune_trough_size;
2856
padding-left: ($medium-size - $finetune_trough_size) / 2;
2857
padding-right: ($medium-size - $finetune_trough_size) / 2;
2858
}
2859
// to make the trough grow in fine-tune mode
2861
slider {
2862
margin: $finetune_slider_margin;
2863
}
2864
}
2865
// the backing bit
2867
trough {
2868
transition: background-color $duration $ease-out;
2869
outline: none;
2870
background-color: $stroke;
2871
&:disabled {
2873
background-color: $stroke-disabled;
2874
}
2875
}
2876
// the colored part of the backing bit
2878
highlight {
2879
transition: background-image $duration $ease-out;
2880
background-image: image($primary);
2881
&:disabled {
2883
background-color: $background;
2884
background-image: image($text2-disabled);
2885
}
2886
}
2887
// this is another differently styled part of the backing bit, the most relevant use case is for example
2889
// in media player to indicate how much video stream as been cached
2890
fill {
2891
transition: background-color $duration $ease-out;
2892
background-color: $stroke;
2893
&:disabled {
2895
background-color: transparent;
2896
}
2897
}
2898
slider {
2900
transition: background-color $duration $ease-out,
2901
background-size $ripple-fade-out-duration $ease-out,
2902
background-image $ripple-fade-out-opacity-duration $ease-out;
2903
background-repeat: no-repeat;
2904
background-position: center;
2905
background-size: auto, 1000% 1000%;
2906
border-radius: 50%;
2907
color: $primary;
2908
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2910
&#{$class} {
2911
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2912
background-image:
2914
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2915
radial-gradient(circle, transparent 10%, transparent 0%);
2916
}
2917
}
2918
&:hover {
2920
background-color: overlay("hover", $primary);
2921
}
2922
&:focus {
2924
background-color: overlay("focus", $primary);
2925
}
2926
&:active {
2928
$_url: 'assets/scale-slider#{$asset-suffix}';
2929
transition: background-color $duration $ease-out,
2931
background-size 0ms,
2932
background-image 0ms;
2933
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2934
background-image:
2935
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2936
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2937
background-size: auto, 0% 0%;
2938
}
2939
}
2940
marks,
2942
value {
2943
color: $text2;
2944
}
2945
indicator {
2947
background-color: $stroke;
2948
color: transparent;
2949
}
2950
//marks margins
2952
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2953
(horizontal, bottom, bottom, top),
2954
(vertical, top, left, right),
2955
(vertical, bottom, right, left) {
2956
&.#{$scale_orient} marks {
2957
&.#{$marks_class} {
2958
margin-#{$marks_margin}: $_marks_distance;
2959
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2960
}
2961
}
2962
&.#{$scale_orient}.fine-tune marks {
2964
&.#{$marks_class} {
2965
margin-#{$marks_margin}: $_marks_distance - 1px;
2966
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2967
}
2968
}
2969
}
2970
&.horizontal {
2972
indicator {
2973
min-height: $_marks_length;
2974
min-width: 1px;
2975
}
2976
}
2977
&.vertical {
2979
indicator {
2980
min-height: 1px;
2981
min-width: $_marks_length;
2982
}
2983
}
2984
// *WARNING* scale with marks madness following
2986
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2988
@each $marks_class, $marks_infix in (
2989
".marks-before:not(.marks-after)": "-marks-before",
2990
".marks-after:not(.marks-before)": "-marks-after"
2991
) {
2992
&#{$dir_class}#{$marks_class} {
2993
slider {
2994
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2995
&#{$state_class} {
2996
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2997
background-image:
2999
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3000
radial-gradient(circle, transparent 10%, transparent 0%);
3001
}
3002
}
3003
&:active {
3005
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3006
background-image:
3008
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3009
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3010
}
3011
}
3012
}
3013
}
3014
}
3015
&.color {
3017
min-height: 0;
3018
min-width: 0;
3019
&.horizontal {
3021
padding: 0 0 12px 0;
3022
slider {
3024
&:dir(ltr), &:dir(rtl) { // specificity bump
3025
margin-bottom: $color_slider_margin;
3026
margin-top: $color_marks_slider_margin;
3027
}
3028
}
3029
}
3030
&.vertical {
3032
&:dir(ltr) {
3033
padding: 0 0 0 12px;
3034
slider {
3036
margin-left: $color_slider_margin;
3037
margin-right: $color_marks_slider_margin;
3038
}
3039
}
3040
&:dir(rtl) {
3042
padding: 0 12px 0 0;
3043
slider {
3045
margin-right: $color_slider_margin;
3046
margin-left: $color_marks_slider_margin;
3047
}
3048
}
3049
}
3050
}
3051
}
3052
/**
3054
* Progress bars
3055
*/
3056
progressbar {
3058
// sizing
3059
&.horizontal {
3060
trough,
3061
progress {
3062
min-height: $bar-size;
3063
}
3064
}
3065
&.vertical {
3067
trough,
3068
progress {
3069
min-width: $bar-size;
3070
}
3071
}
3072
// FIXME: insensitive state missing and some other state should be set probably
3074
color: $text2;
3075
font-size: smaller;
3076
trough {
3078
background-color: $stroke-disabled;
3079
}
3080
progress {
3082
background-color: $primary;
3083
}
3084
&.osd { // progressbar.osd used for epiphany page loading progress
3086
// min-width: $bar-size;
3087
// min-height: $bar-size;
3088
// background-color: transparent;
3089
trough {
3091
// background-color: transparent;
3092
}
3093
progress {
3095
// background-color: $primary;
3096
}
3097
}
3098
// makes the progress indicator disappear, when the fraction is 0
3100
trough.empty progress {
3101
all: unset;
3102
}
3103
}
3104
/**
3106
* Level Bar
3107
*/
3108
levelbar {
3110
&.horizontal {
3111
block {
3112
min-height: $bar-size;
3113
}
3114
&.discrete block {
3116
min-width: $medium-size;
3117
&:not(:last-child) {
3119
margin-right: 2px;
3120
}
3121
}
3122
}
3123
&.vertical {
3125
block {
3126
min-width: $bar-size;
3127
}
3128
&.discrete block {
3130
min-height: $medium-size;
3131
&:not(:last-child) {
3133
margin-bottom: 2px;
3134
}
3135
}
3136
}
3137
// imitate the entry style
3139
trough {
3140
// padding: 2px;
3141
// border-radius: $corner-radius;
3142
// box-shadow: $shadow-z1;
3143
// background-color: $base;
3144
&:disabled {
3146
// background-color: $base-alt;
3147
}
3148
}
3149
block {
3151
&.low {
3152
background-color: $warning;
3153
}
3154
&.high,
3156
&:not(.empty) {
3157
background-color: $primary;
3158
}
3159
&.full {
3161
background-color: $success;
3162
}
3163
&.empty {
3165
background-color: $stroke-disabled;
3166
}
3167
}
3168
}
3169
/**
3171
* Print dialog
3172
*/
3173
printdialog {
3175
paper {
3176
padding: 0;
3177
border: 1px solid $divider;
3178
background-color: $base;
3179
color: $text;
3180
}
3181
.dialog-action-box {
3183
margin: 12px;
3184
}
3185
}
3186
/**
3188
* Frames
3189
*/
3190
frame > border,
3192
.frame {
3193
margin: 0;
3194
padding: 0;
3195
border: 1px solid $divider;
3196
border-radius: 0;
3197
box-shadow: none;
3198
&.flat {
3200
border-style: none;
3201
}
3202
}
3203
// for backward compatibility
3205
frame.flat > border {
3206
border-style: none;
3207
}
3208
actionbar > revealer > box {
3210
padding: $container-padding;
3211
border-top: 1px solid $divider;
3212
background-color: $base;
3213
background-clip: border-box;
3214
button:not(.suggested-action):not(.destructive-action) {
3216
@extend %button-flat;
3217
}
3218
.linked:not(.vertical) > entry:not(:only-child) {
3220
border-radius: $corner-radius $corner-radius 0 0;
3221
}
3222
}
3223
scrolledwindow {
3225
viewport.frame { // avoid double borders when viewport inside scrolled window
3226
border-style: none;
3227
}
3228
// This is used when content is touch-dragged past boundaries.
3230
// draws a box on top of the content, the size changes programmatically.
3231
@at-root overshoot {
3232
&.top { @include overshoot(top); }
3233
&.bottom { @include overshoot(bottom); }
3235
&.left { @include overshoot(left); }
3237
&.right { @include overshoot(right); }
3239
}
3240
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3242
@at-root undershoot {
3243
&.top { @include undershoot(top); }
3244
&.bottom { @include undershoot(bottom); }
3246
&.left { @include undershoot(left); }
3248
&.right { @include undershoot(right); }
3250
}
3251
@at-root junction { // the small square between two scrollbars
3253
border-style: solid none none solid;
3254
border-width: 1px;
3255
border-color: $divider;
3256
background-color: $base;
3257
&:dir(rtl) {
3259
border-style: solid solid none none;
3260
}
3261
}
3262
}
3263
// vbox and hbox separators
3265
separator {
3266
min-width: 1px;
3267
min-height: 1px;
3268
background-color: $divider;
3269
}
3270
%hide_separators {
3272
min-width: 0;
3273
min-height: 0;
3274
background-color: transparent;
3275
}
3276
/**
3278
* Lists
3279
*/
3280
list {
3282
border-color: $divider;
3283
background-color: $base;
3284
row {
3286
padding: 2px;
3287
}
3288
}
3289
row {
3291
&.activatable {
3292
@extend %ripple;
3293
@include ink-color($text, $fg: false);
3294
@include list-item;
3295
// this is for indicathing which row generated a popover
3297
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3298
&.has-open-popup {
3299
background-color: overlay("activated", $text);
3300
}
3301
}
3302
&:selected {
3304
@extend %selected_items;
3305
@include ink-color($primary, $fg: false);
3307
&.has-open-popup {
3309
background-color: overlay("activated", $primary, $background: $overlay-selected);
3310
}
3311
}
3312
}
3313
/**
3315
* App Notifications
3316
*/
3317
.app-notification {
3319
// @extend %osd;
3320
@extend %toolbar-osd;
3322
margin: 8px;
3324
button {
3326
@extend %button-flat;
3327
&.text-button:not(:disabled) {
3329
@include ink-color($primary);
3330
}
3331
}
3332
&.frame,
3334
border {
3335
border-style: none;
3336
}
3337
}
3338
/**
3340
* Expanders
3341
*/
3342
expander {
3344
title > arrow {
3345
transition: all $duration $ease-out;
3346
min-width: 16px;
3347
min-height: 16px;
3348
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3349
-gtk-icon-transform: rotate(-90deg);
3350
&:dir(rtl) {
3352
-gtk-icon-transform: rotate(90deg);
3353
}
3354
&:checked {
3356
-gtk-icon-transform: unset;
3357
}
3358
color: $text2;
3360
&:hover,
3362
&:active {
3363
color: $text;
3364
}
3365
&:disabled {
3367
color: $text2-disabled;
3368
}
3369
}
3370
}
3371
/**
3373
* Calendar
3374
*/
3375
calendar {
3377
padding: 1px;
3378
border: 1px solid $divider;
3379
color: $text;
3380
&:disabled {
3382
color: $text-disabled;
3383
}
3384
&:selected {
3386
@extend %selected_items;
3387
border-radius: $corner-radius + 1px;
3389
}
3390
&.header {
3392
border-style: none none solid;
3393
border-color: $divider;
3394
border-radius: 0;
3395
}
3396
&.button {
3398
border-radius: $corner-radius + 1px;
3399
color: $text2;
3400
&:hover {
3402
background-image: image(overlay("hover", $text));
3403
}
3404
&:disabled {
3406
color: $text2-disabled;
3407
}
3408
}
3409
&.highlight {
3411
color: $text2;
3412
font-weight: 500;
3413
}
3414
&:indeterminate {
3416
color: $text2-disabled;
3417
}
3418
}
3419
/**
3421
* Dialogs
3422
*/
3423
messagedialog { // Message Dialog styling
3425
&.background {
3426
background-color: $surface;
3427
}
3428
.titlebar {
3430
min-height: $small-size;
3431
border-style: none;
3432
box-shadow: inset 0 1px highlight($surface);
3433
background-color: $surface;
3434
color: $text;
3435
&:backdrop {
3437
background-color: $surface;
3438
color: $text2;
3439
}
3440
}
3441
&.csd { // rounded bottom border styling for csd version
3443
&.background {
3444
// bigger radius for better antialiasing
3445
border-bottom-left-radius: $corner-radius;
3446
border-bottom-right-radius: $corner-radius;
3447
}
3448
}
3449
// Hint text
3451
box.vertical > label + label {
3452
color: $text2;
3453
}
3454
.dialog-action-box {
3456
margin-top: -$container-padding;
3457
// padding: $container-padding;
3458
button:not(:last-child) {
3460
margin-right: $container-padding;
3461
}
3462
}
3463
}
3464
.dialog-action-box button {
3466
@extend %button-flat;
3467
&:not(:disabled) {
3469
@include ink-color($primary);
3470
}
3471
&.suggested-action:not(:disabled) {
3473
background-color: transparent;
3474
// @include ink-color($primary);
3475
}
3476
&.destructive-action:not(:disabled) {
3478
background-color: transparent;
3479
@include ink-color($error);
3480
}
3481
}
3482
filechooser {
3484
.dialog-action-box {
3485
border-top: 1px solid $divider;
3486
}
3487
#pathbarbox {
3489
border-bottom: 1px solid $divider;
3490
background-color: $background;
3491
> stack > box > button { // The new folder button
3493
@extend %button-flat;
3494
border-radius: $circular-radius;
3496
}
3497
}
3498
}
3499
filechooserbutton:drop(active) {
3501
// box-shadow: none;
3502
}
3503
/**
3505
* Sidebar
3506
*/
3507
.sidebar {
3509
border-style: none;
3510
background-color: $base-alt;
3511
&:not(separator) {
3513
@at-root %sidebar_left,
3514
&:dir(ltr),
3515
&.left,
3516
&.left:dir(rtl) {
3517
border-right: 1px solid $divider;
3518
border-left-style: none;
3519
}
3520
@at-root %sidebar_right,
3522
&:dir(rtl),
3523
&.right {
3524
border-left: 1px solid $divider;
3525
border-right-style: none;
3526
}
3527
}
3528
list {
3530
background-color: transparent;
3531
}
3532
paned & {
3534
&,
3535
&.left,
3536
&.right,
3537
&.left:dir(rtl),
3538
&:dir(rtl),
3539
&:dir(ltr) {
3540
border-style: none;
3541
}
3542
}
3543
}
3544
stacksidebar.sidebar {
3546
& {
3547
&:dir(ltr),
3548
&.left,
3549
&.left:dir(rtl) {
3550
list {
3551
@extend %sidebar_left;
3552
}
3553
}
3554
&:dir(rtl),
3556
&.right {
3557
list {
3558
@extend %sidebar_right;
3559
}
3560
}
3561
}
3562
+ separator.vertical,
3564
separator.horizontal {
3565
@extend %hide_separators;
3566
}
3567
list {
3569
padding: 4px;
3570
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3571
}
3572
row {
3574
min-height: 32px;
3575
padding: 0 8px - 6px;
3576
border-radius: $corner-radius;
3577
&:selected {
3579
font-weight: 500;
3580
@include ink-color($primary, $activated: true);
3581
}
3582
+ row {
3584
margin-top: 4px;
3585
}
3586
> label {
3588
padding-left: 6px;
3589
padding-right: 6px;
3590
}
3591
&.needs-attention > label {
3593
@extend %needs-attention;
3594
}
3595
}
3596
}
3597
separator.sidebar {
3599
background-color: $divider;
3600
&.selection-mode,
3602
.selection-mode & {
3603
// background-color: $divider;
3604
}
3605
}
3606
/**
3608
* File chooser
3609
*/
3610
// dim the sidebar icons, see bug #786613 for details on this oddity
3612
row image.sidebar-icon {
3613
transition: color $duration $ease-out;
3614
color: $text2;
3615
&:disabled {
3617
color: $text2-disabled;
3618
}
3619
}
3620
placessidebar.sidebar {
3622
> viewport.frame {
3623
border-style: none;
3624
}
3625
list {
3627
padding: (4px - 3px) 0 4px;
3628
}
3629
row {
3631
// Needs overriding of the GtkListBoxRow padding
3632
min-height: 32px;
3633
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3634
padding: 0;
3635
border-radius: $corner-radius;
3636
// Using margins/padding directly in the SidebarRow
3638
// will make the animation of the new bookmark row jump
3639
> revealer {
3640
padding: 0 8px;
3641
}
3642
&:selected {
3644
font-weight: 500;
3645
@include ink-color($primary, $activated: true);
3646
image.sidebar-icon {
3648
color: $primary;
3649
}
3650
}
3651
&:disabled {
3653
color: $text-disabled;
3654
}
3655
image.sidebar-icon {
3657
&:dir(ltr) {
3658
padding-right: 8px;
3659
}
3660
&:dir(rtl) {
3662
padding-left: 8px;
3663
}
3664
}
3665
label.sidebar-label {
3667
&:dir(ltr) {
3668
padding-right: 2px;
3669
}
3670
&:dir(rtl) {
3672
padding-left: 2px;
3673
}
3674
}
3675
@at-root button.sidebar-button {
3677
@extend %button-flat-basic;
3678
@extend %button-small;
3679
}
3680
&.sidebar-placeholder-row {
3682
background-color: overlay("hover", $text);
3683
}
3684
&.sidebar-new-bookmark-row {
3686
color: $primary;
3687
image.sidebar-icon {
3689
color: $primary;
3690
}
3691
}
3692
}
3693
}
3694
placesview {
3696
.server-list-button {
3697
> image {
3698
-gtk-icon-transform: rotate(0turn);
3699
}
3700
&:checked > image {
3702
-gtk-icon-transform: rotate(-.5turn);
3703
}
3704
}
3705
// this selects the "connect to server" label
3707
> actionbar > revealer > box > label {
3708
padding-left: 8px;
3709
padding-right: 8px;
3710
}
3711
}
3712
/**
3714
* Paned
3715
*/
3716
paned {
3718
> separator {
3719
min-width: 1px;
3720
min-height: 1px;
3721
-gtk-icon-source: none; // defeats the ugly default handle decoration
3722
border-style: none; // just to be sure
3723
background-color: transparent;
3724
// workaround, using background istead of a border since the border will get rendered twice (?)
3725
background-image: image($divider);
3726
background-size: 1px 1px;
3727
background-clip: content-box; // avoids borders image being rendered twice (?)
3728
&.wide {
3730
min-width: 6px;
3731
min-height: 6px;
3732
background-color: $background;
3733
background-image: image($divider), image($divider);
3734
background-size: 1px 1px, 1px 1px;
3735
}
3736
}
3737
&.horizontal > separator {
3739
background-repeat: repeat-y;
3740
&:dir(ltr) {
3742
margin: 0 -8px 0 0;
3743
padding: 0 8px 0 0;
3744
background-position: left;
3745
}
3746
&:dir(rtl) {
3748
margin: 0 0 0 -8px;
3749
padding: 0 0 0 8px;
3750
background-position: right;
3751
}
3752
&.wide {
3754
margin: 0;
3755
padding: 0;
3756
background-repeat: repeat-y, repeat-y;
3757
background-position: left, right;
3758
}
3759
}
3760
&.vertical > separator {
3762
margin: 0 0 -8px 0;
3763
padding: 0 0 8px 0;
3764
background-repeat: repeat-x;
3765
background-position: top;
3766
&.wide {
3768
margin: 0;
3769
padding: 0;
3770
background-repeat: repeat-x, repeat-x;
3771
background-position: bottom, top;
3772
}
3773
}
3774
}
3775
/**
3777
* GtkInfoBar
3778
*/
3779
infobar {
3781
border-style: none;
3782
&.info,
3784
&.question {
3785
border-bottom: 1px solid $divider;
3786
background-color: $base;
3787
button {
3789
@extend %button-flat;
3790
&.text-button:not(:disabled) {
3792
@include ink-color($primary);
3793
}
3794
}
3795
}
3796
&.warning {
3798
background-color: $warning;
3799
color: on($warning);
3800
button.flat {
3802
@include ink-color(on($warning));
3803
}
3804
selection {
3806
}
3807
*:link {
3809
color: on($warning);
3810
}
3811
}
3812
&.error {
3814
background-color: $error;
3815
color: on($error);
3816
button.flat {
3818
@include ink-color(on($error));
3819
}
3820
selection {
3822
}
3823
*:link {
3825
color: on($error);
3826
}
3827
}
3828
// Remove ugly hard-coded padding
3830
button label {
3831
margin: 0 -4px;
3832
}
3833
}
3834
/**
3836
* Tooltips
3837
*/
3838
tooltip {
3840
&.background {
3841
// background-color needs to be set this way otherwise it gets drawn twice
3842
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3843
background-color: $tooltip;
3844
color: on($tooltip);
3845
}
3846
// padding: 4px; /* not working */
3848
border-radius: $corner-radius;
3849
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3850
&:not(.csd):not(.unity-csd) {
3852
// border: 1px solid $divider;
3853
// border-radius: $corner-radius + 1px;
3854
// background-clip: $background-clip-extra;
3855
}
3856
// FIXME: we need a border or tooltips vanish on black background.
3858
decoration {
3859
background-color: transparent;
3860
}
3861
> box {
3863
margin: -6px; // Remove hard-coded 6px margin
3864
min-height: 32px - 4px * 2;
3865
padding: 4px 8px;
3866
}
3867
.dim-label {
3869
color: on($tooltip, text2);
3870
}
3871
* {
3873
// workaround for Eclipse.
3874
// do not include any declaration here.
3875
}
3876
}
3877
/**
3879
* Color Chooser
3880
*/
3881
colorswatch {
3883
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3884
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3885
// applied to the overlay box.
3886
// base color corners rounding
3888
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3889
// sports a bigger radius.
3890
// nth-child is needed by the custom color strip.
3891
&.top {
3893
border-top-left-radius: $corner-radius + .5px;
3894
border-top-right-radius: $corner-radius + .5px;
3895
overlay {
3897
border-top-left-radius: $corner-radius;
3898
border-top-right-radius: $corner-radius;
3899
}
3900
}
3901
&.bottom {
3903
border-bottom-left-radius: $corner-radius + .5px;
3904
border-bottom-right-radius: $corner-radius + .5px;
3905
overlay {
3907
border-bottom-left-radius: $corner-radius;
3908
border-bottom-right-radius: $corner-radius;
3909
}
3910
}
3911
&.left,
3913
&:first-child:not(.top) {
3914
border-top-left-radius: $corner-radius + .5px;
3915
border-bottom-left-radius: $corner-radius + .5px;
3916
overlay {
3918
border-top-left-radius: $corner-radius;
3919
border-bottom-left-radius: $corner-radius;
3920
}
3921
}
3922
&.right,
3924
&:last-child:not(.bottom) {
3925
border-top-right-radius: $corner-radius + .5px;
3926
border-bottom-right-radius: $corner-radius + .5px;
3927
overlay {
3929
border-top-right-radius: $corner-radius;
3930
border-bottom-right-radius: $corner-radius;
3931
}
3932
}
3933
&.dark {
3935
color: on(dark);
3936
}
3937
&.light {
3939
color: on(light);
3940
}
3941
overlay {
3943
transition: $transition-shadow;
3944
box-shadow: $shadow-z1;
3945
&:drop(active),
3947
&:hover {
3948
box-shadow: $shadow-z3;
3949
}
3950
}
3951
&#add-color-button {
3953
border-radius: $corner-radius $corner-radius 0 0;
3954
color: $text;
3955
&:only-child {
3957
border-radius: $corner-radius;
3958
}
3959
overlay {
3961
background-color: $surface;
3962
}
3963
}
3964
&:disabled {
3966
opacity: .5;
3967
overlay {
3969
box-shadow: none;
3970
}
3971
}
3972
row:selected & {
3974
}
3975
&#editor-color-sample {
3977
border-radius: $corner-radius + .5px;
3978
overlay {
3980
border-radius: $corner-radius;
3981
&:hover {
3983
// box-shadow: $shadow-z1;
3984
}
3985
}
3986
}
3987
}
3988
// colorscale popup
3990
colorchooser .popover.osd {
3991
transition: $transition-shadow;
3992
border-radius: $corner-radius;
3993
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3994
background-color: $surface;
3995
&:backdrop {
3997
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3998
}
3999
}
4000
/**
4002
* Misc
4003
*/
4004
// content view (grid/list)
4006
.content-view {
4007
background-color: $background;
4008
&:hover {
4010
// -gtk-icon-effect: highlight;
4011
}
4012
rubberband,
4014
.rubberband {
4015
@extend rubberband;
4016
}
4017
}
4018
.scale-popup {
4020
.osd & {
4021
// @extend %osd;
4022
button.flat { // FIXME: quick hack, redo properly
4024
}
4025
}
4026
button { // +/- buttons on GtkVolumeButton popup
4028
}
4029
}
4030
/**
4032
* Window Decorations
4033
*/
4034
decoration {
4036
transition: $transition-shadow;
4037
border-radius: $corner-radius $corner-radius 0 0;
4038
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4039
// FIXME rationalize shadows
4041
// this is used for the resize cursor area
4043
margin: 8px;
4044
&:backdrop {
4046
// the transparent shadow here is to enforce that the shadow extents don't
4047
// change when we go to backdrop, to prevent jumping windows.
4048
// The biggest shadow should be in the same order then in the active state
4049
// or the jumping will happen during the transition.
4050
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4051
}
4052
.maximized &,
4054
.fullscreen &,
4055
.tiled &,
4056
.tiled-top &,
4057
.tiled-right &,
4058
.tiled-bottom &,
4059
.tiled-left & {
4060
border-radius: 0;
4061
}
4062
.popup & {
4064
box-shadow: none;
4065
}
4066
// server-side decorations as used by mutter
4068
.ssd & {
4069
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4070
}
4071
.csd.popup & {
4073
border-radius: $corner-radius;
4074
box-shadow: $shadow-z4;
4075
}
4076
tooltip.csd & {
4078
border-radius: $corner-radius;
4079
box-shadow: none;
4080
}
4081
messagedialog.csd & {
4083
border-radius: $corner-radius;
4084
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4085
&:backdrop {
4087
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4088
}
4089
}
4090
.solid-csd & {
4092
margin: 0;
4093
padding: 2px;
4094
border-radius: 0;
4095
box-shadow: none;
4096
box-shadow: inset 0 1px highlight($titlebar);
4097
background-color: $titlebar;
4098
&:backdrop {
4100
background-color: $titlebar-backdrop;
4101
}
4102
}
4103
}
4104
// Window Close button
4106
button.titlebutton {
4107
border-radius: $circular-radius;
4108
.selection-mode & {
4110
}
4111
}
4112
// catch all extend :)
4115
%selected_items {
4117
background-color: $overlay-selected;
4118
}
4119
.monospace {
4121
font-family: monospace;
4122
}
4123
/**
4125
* Touch Copy & Paste
4126
*/
4127
// touch selection handlebars for the Popover.osd above
4129
cursor-handle {
4130
color: $primary;
4131
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4132
&.top:dir(ltr),
4134
&.bottom:dir(rtl) {
4135
-gtk-icon-transform: rotate(90deg);
4136
}
4137
&.bottom:dir(ltr),
4139
&.top:dir(rtl) {
4140
-gtk-icon-transform: unset;
4141
}
4142
&.insertion-cursor:dir(ltr),
4144
&.insertion-cursor:dir(rtl) {
4145
padding-top: 6px;
4146
-gtk-icon-transform: rotate(45deg);
4147
}
4148
}
4149
// Decouple the font of context menus from their entry/textview
4151
.context-menu {
4152
font: initial;
4153
}
4154
// shortcut window keys
4156
.keycap {
4157
min-width: 28px - 8px * 2;
4158
min-height: 28px - 2px;
4159
margin-top: 2px;
4160
padding-bottom: 2px;
4161
padding-left: 8px;
4162
padding-right: 8px;
4163
border: solid 1px $divider;
4165
border-radius: $corner-radius + 1px;
4166
box-shadow: inset 0 -2px $divider;
4167
background-color: $surface;
4168
color: $text;
4169
font-size: smaller;
4170
}
4171
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4173
// caret-color: $primary;
4174
}
4175
stackswitcher button.text-button { // FIXME aggregate with buttons
4177
min-width: 100px;
4178
}
4179
stackswitcher button.circular,
4181
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4182
min-width: $medium-size;
4183
min-height: $medium-size;
4184
padding: 0;
4185
}
4186
/**
4188
* App Icons
4189
*/
4190
// Outline for low res icons
4192
.lowres-icon {
4193
// -gtk-icon-shadow: none;
4194
}
4195
// Drapshadow for large icons
4197
.icon-dropshadow {
4198
// -gtk-icon-shadow: none;
4199
}
4200
/**
4202
* Emoji
4203
*/
4204
popover.emoji-picker {
4206
padding: 0;
4207
entry {
4209
border-bottom: 1px solid $divider;
4210
border-image: none;
4211
border-radius: 0;
4212
box-shadow: none;
4213
background-color: transparent;
4214
}
4215
scrolledwindow {
4217
border-bottom: 1px solid $divider;
4218
}
4219
}
4220
button.emoji-section {
4222
margin: 4px;
4223
&:checked {
4225
// background-color: transparent;
4226
@include ink-color($primary, $activated: true);
4227
}
4228
&:not(:last-child) {
4230
margin-right: 0;
4231
}
4232
}
4233
popover.emoji-picker .emoji {
4235
min-width: 3em;
4236
min-height: 3em;
4237
padding: 0 8px;
4238
// font-size: larger;
4239
widget {
4241
transition: $transition;
4242
border-radius: $corner-radius;
4243
&:hover {
4245
background-color: overlay("hover", $text);
4246
}
4247
}
4248
}
4249
popover.emoji-completion {
4251
padding: 8px 0;
4252
arrow {
4254
border: none;
4255
background: none;
4256
}
4257
.emoji-completion-row {
4259
min-height: $menuitem-size;
4260
padding: 0 12px;
4261
}
4262
.emoji:hover {
4264
background-color: overlay("hover", $text);
4265
}
4266
}
4267