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 ink-color($text, $elevation: true);
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 ink-color($primary, $elevation: true);
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
color: $text2;
561
@include ink-color($text);
562
&:disabled {
564
background-color: transparent;
565
color: $text2-disabled;
566
}
567
}
568
%button-flat-activatable {
570
@extend %button-flat-basic;
571
&:checked {
573
background-color: overlay("activated", $text);
574
color: $text;
575
@include ink-color($text);
576
&:disabled {
578
color: $text-disabled;
579
}
580
}
581
}
582
%button-flat,
584
button.flat {
585
@extend %button-flat-activatable;
586
&.text-button {
588
min-width: 64px - 8px * 2;
589
padding-left: 8px;
590
padding-right: 8px;
591
}
592
&.text-button.image-button {
594
min-width: 24px;
595
padding: ($medium-size - 24px) / 2;
596
label {
598
&:first-child {
599
margin-left: 12px - ($medium-size - 24px) / 2;
600
}
601
&:last-child {
603
margin-right: 12px - ($medium-size - 24px) / 2;
604
}
605
}
606
}
607
.linked:not(.vertical) > &,
609
.linked.vertical > & {
610
&:not(:only-child) { // specificity bump
611
border-radius: $corner-radius;
612
&.image-button:not(.text-button) {
614
border-radius: $circular-radius;
615
}
616
}
617
}
618
}
619
button {
621
// big standalone buttons like in Documents pager
622
&.osd {
623
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
624
&.image-button {
626
padding: ($large-size - 24px) / 2;
627
}
628
&:disabled {
630
opacity: 0;
631
}
632
}
633
// overlay / OSD style
635
@at-root %osd_button,
636
.osd & {
637
}
638
// Suggested and Destructive Action buttons
640
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
641
&#{$class} {
642
background-color: $color;
643
color: on($color);
644
@include ink-color(on($color), $elevation: true);
645
&:disabled {
647
box-shadow: none;
648
background-color: $fill;
649
color: $text-disabled;
650
}
651
&:checked {
653
background-color: overlay("activated", on($color), $background: $color);
654
}
655
&.flat {
657
background-color: transparent;
658
color: $color;
659
@include ink-color($color);
660
&:disabled {
662
box-shadow: none;
663
background-color: transparent;
664
color: $text2-disabled;
665
}
666
&:checked {
668
background-color: overlay("activated", $color);
669
}
670
}
671
.osd & {
673
}
674
}
675
}
676
.stack-switcher > & {
678
// to position the needs attention dot, padding is added to the button
679
// child, a label needs just lateral padding while an icon needs vertical
680
// padding added too.
681
> label {
683
margin: 0 -6px;
684
padding: 0 6px;
685
}
686
> image {
688
margin: -3px -6px;
689
padding: 3px 6px;
690
}
691
&.needs-attention {
693
> label,
694
> image {
695
@extend %needs-attention;
696
}
697
&:checked {
699
> label,
700
> image {
701
animation: none;
702
background-image: none;
703
}
704
}
705
}
706
}
707
// hide separators
709
&.font,
710
&.file {
711
separator {
712
@extend %hide_separators;
713
}
714
}
715
&.font {
717
> box > box > label {
718
// font-weight: bold;
719
}
720
}
721
// inline-toolbar buttons
723
.inline-toolbar & {
724
// @extend %button-flat;
725
&:not(.text-button) {
727
border-radius: $circular-radius;
728
}
729
}
730
.primary-toolbar & {
732
-gtk-icon-shadow: none; // tango icons don't need shadows
733
}
734
&.close,
736
&.circular { // The Bloody Circul Button
737
border-radius: $circular-radius;
738
label {
740
// padding: 0;
741
}
742
}
743
}
744
%button-small {
746
min-height: $small-size;
747
min-width: $small-size;
748
padding: 0;
749
border-radius: $circular-radius;
750
}
751
%needs-attention {
753
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
754
background-repeat: no-repeat;
755
background-position: right 3px;
756
background-size: 6px 6px;
757
&:dir(rtl) {
759
background-position: left 3px;
760
}
761
}
762
// all the following is for the +|- buttons on inline toolbars, that way
764
// should really be deprecated...
765
.inline-toolbar toolbutton > button {
766
}
767
// More inline toolbar buttons
769
toolbar.inline-toolbar toolbutton {
770
&:not(:first-child) > button.flat {
771
// @extend %linked-not-first-child;
772
}
773
&:not(:last-child) > button.flat {
775
// @extend %linked-not-last-child;
776
}
777
}
778
%linked-not-first-child {
780
border-top-left-radius: 0;
781
border-bottom-left-radius: 0;
782
}
783
%linked-not-last-child {
785
border-top-right-radius: 0;
786
border-bottom-right-radius: 0;
787
}
788
%linked {
790
&:not(:first-child) {
791
@extend %linked-not-first-child;
792
}
793
&:not(:last-child) {
795
@extend %linked-not-last-child;
796
}
797
}
798
%linked-vertical-not-first-child {
800
border-top-left-radius: 0;
801
border-top-right-radius: 0;
802
}
803
%linked-vertical-not-last-child {
805
border-bottom-left-radius: 0;
806
border-bottom-right-radius: 0;
807
}
808
%linked-vertical {
810
&:not(:first-child) {
811
@extend %linked-vertical-not-first-child;
812
}
813
&:not(:last-child) {
815
@extend %linked-vertical-not-last-child;
816
}
817
}
818
%linked-image-button {
820
&:first-child {
821
border-top-left-radius: $corner-radius;
822
border-bottom-left-radius: $corner-radius;
823
}
824
&:last-child {
826
border-top-right-radius: $corner-radius;
827
border-bottom-right-radius: $corner-radius;
828
}
829
&:only-child {
831
border-radius: $circular-radius;
832
}
833
}
834
%linked-vertical-image-button {
836
&:first-child {
837
border-top-left-radius: $corner-radius;
838
border-top-right-radius: $corner-radius;
839
}
840
&:last-child {
842
border-bottom-left-radius: $corner-radius;
843
border-bottom-right-radius: $corner-radius;
844
}
845
&:only-child {
847
border-radius: $circular-radius;
848
}
849
}
850
/* menu buttons */
852
modelbutton.flat,
853
.menuitem.button.flat {
854
min-height: $menuitem-size;
855
padding: 0 8px;
856
border-radius: $corner-radius;
857
@extend %ripple;
859
@include ink-color($text);
860
&:selected {
862
@extend %selected_items;
863
}
864
}
865
modelbutton.flat arrow {
867
&.left {
868
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
869
}
870
&.right {
872
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
873
}
874
}
875
button.color {
877
min-height: $small-size;
878
min-width: $small-size;
879
padding: $container-padding;
880
colorswatch:only-child {
882
&,
883
overlay {
884
// border-radius: 0;
885
}
886
}
887
}
888
/**
890
* Links
891
*/
892
*:link {
894
color: $primary;
895
}
896
*:visited {
898
color: $visited;
899
}
900
button.link {
902
&:link {
903
color: $primary;
904
@include ink-color($primary);
905
}
906
&:visited {
908
color: $visited;
909
@include ink-color($visited);
910
}
911
> label {
913
text-decoration-line: underline;
914
}
915
}
916
/**
918
* GtkSpinButton
919
*/
920
spinbutton {
922
&:not(.vertical) {
923
// in this horizontal configuration, the whole spinbutton
924
// behaves as the entry, so we extend the entry styling
925
// and nuke the style on the internal entry
926
@extend %entry;
927
padding: 0;
929
entry {
931
min-width: $large-size - 8px * 2;
932
// reset all the other props since the spinbutton node is styled here
933
margin: 0;
934
border-image: none;
935
border-radius: 0;
936
box-shadow: none;
937
background-color: transparent;
938
}
939
button {
941
@extend %button-flat-basic;
942
@extend %button-small;
943
// margin: $container-padding;
945
border: solid $container-padding transparent;
946
// Remove unwanted focus indicator
948
&:focus:not(:hover):not(:active) {
949
box-shadow: inset 0 0 0 9999px transparent;
950
}
951
&.up:dir(ltr),
953
&.down:dir(rtl) {
954
margin-left: -$container-padding / 2;
955
}
956
&.up:dir(rtl),
958
&.down:dir(ltr) {
959
margin-right: -$container-padding / 2;
960
}
961
}
962
}
963
// OSD horizontal
965
.osd &:not(.vertical) {
966
}
967
// Vertical
969
&.vertical {
970
// in the vertical configuration, we treat the spinbutton
971
// as a box, and tweak the style of the entry in the middle
972
// so that it's linked
973
// FIXME: this should not be set at all, but otherwise it gets the wrong
975
// color
976
caret-color: $primary;
977
// FIXME: this should not be set at all, but otherwise it gets the wrong
979
// color
980
&:disabled {
981
color: $text-disabled;
982
}
983
entry {
985
@extend %entry_raised;
986
min-height: $medium-size;
988
min-width: $large-size;
989
padding: 0;
990
}
991
button {
993
min-height: $medium-size;
994
min-width: $large-size;
995
padding: 0;
996
@extend %button-flat-basic;
998
// Remove unwanted focus indicator
1000
&:focus:not(:hover):not(:active) {
1001
box-shadow: inset 0 0 0 9999px transparent;
1002
}
1003
&.up {
1005
border-radius: $corner-radius $corner-radius 0 0;
1006
}
1007
&.down {
1009
border-radius: 0 0 $corner-radius $corner-radius;
1010
}
1011
}
1012
}
1013
// OSD vertical
1015
.osd &.vertical {
1016
}
1017
// Misc
1019
treeview &:not(.vertical) {
1020
min-height: 0;
1021
border-style: none;
1022
border-radius: 0;
1023
entry {
1025
min-height: 0;
1026
padding: 1px 2px;
1027
}
1028
}
1029
}
1030
/**
1032
* ComboBoxes
1033
*/
1034
combobox {
1036
arrow {
1037
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1038
min-height: 16px;
1039
min-width: 16px;
1040
}
1041
// workaround for menuitem selection
1043
decoration {
1044
transition: none;
1045
}
1046
button.combo cellview {
1048
&:dir(ltr) {
1049
margin-left: 8px - ($medium-size - 16px) / 2;
1050
}
1051
&:dir(rtl) {
1053
margin-right: 8px - ($medium-size - 16px) / 2;
1054
}
1055
}
1056
menu {
1058
padding: 2px 0;
1059
menuitem {
1061
min-height: $medium-size - 2px * 2;
1062
padding: 0 8px;
1063
}
1064
// overflow arrows
1066
> arrow {
1067
&.top {
1068
margin-top: -2px;
1069
}
1070
&.bottom {
1072
margin-top: 2px * 2;
1073
margin-bottom: -2px * 3;
1074
}
1075
}
1076
}
1077
&.linked {
1079
button:nth-child(2) {
1080
&:dir(ltr) {
1081
@extend %linked-not-first-child;
1082
}
1083
&:dir(rtl) {
1085
@extend %linked-not-last-child;
1086
}
1087
}
1088
}
1089
> .linked:not(.vertical) > entry:not(:only-child) {
1091
border-radius: $corner-radius $corner-radius 0 0;
1092
&:first-child {
1094
margin-right: -$medium-size;
1095
padding-right: $medium-size;
1096
}
1097
&:last-child {
1099
margin-left: -$medium-size;
1100
padding-left: $medium-size;
1101
}
1102
}
1103
> .linked:not(.vertical) > button:not(:only-child) {
1105
@extend %button-flat-activatable;
1106
// @extend %button-small;
1107
min-height: 16px;
1109
min-width: 16px;
1110
margin: ($medium-size - $small-size) / 2;
1111
padding: ($small-size - 16px) / 2;
1112
border-radius: $circular-radius;
1113
}
1114
}
1115
// the combo is a composite widget so the way we do button linking doesn't
1117
// work, special case needed. See
1118
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1119
.linked:not(.vertical) > combobox {
1121
&:not(:first-child) > box > button.combo {
1122
@extend %linked-not-first-child;
1123
}
1124
&:not(:last-child) > box > button.combo {
1126
@extend %linked-not-last-child;
1127
}
1128
}
1129
.linked.vertical > combobox {
1131
&:not(:first-child) > box > button.combo {
1132
@extend %linked-vertical-not-first-child;
1133
}
1134
&:not(:last-child) > box > button.combo {
1136
@extend %linked-vertical-not-last-child;
1137
}
1138
}
1139
button.combo:only-child {
1141
border-radius: $corner-radius $corner-radius 0 0;
1142
font-weight: normal;
1143
@include entry(normal);
1145
&:focus {
1147
@include entry(focus);
1148
}
1149
&:drop(active),
1151
&:hover {
1152
@include entry(hover);
1153
}
1154
&:checked {
1156
@include entry(checked);
1157
}
1158
&:disabled {
1160
@include entry(disabled);
1161
}
1162
}
1163
/**
1165
* Toolbars
1166
*/
1167
toolbar {
1169
-GtkWidget-window-dragging: true;
1170
padding: 2px;
1171
background-color: $background;
1172
button {
1174
@extend %button-flat;
1175
}
1176
// on OSD
1178
.osd & {
1179
background-color: transparent;
1180
}
1181
// stand-alone OSD toolbars
1183
&.osd {
1184
@extend %toolbar-osd;
1185
// positional classes for `attached` osd toolbars
1187
&.left,
1188
&.right,
1189
&.top,
1190
&.bottom {
1191
border-radius: 0;
1192
}
1193
&.bottom {
1195
box-shadow: none;
1196
background-color: transparent;
1197
background-image:
1198
linear-gradient(
1199
to bottom,
1200
transparent,
1201
rgba(black, .1) 30%,
1202
rgba(black, .2) 50%,
1203
rgba(black, .4)
1204
);
1205
}
1206
}
1207
// toolbar separators
1209
&.horizontal > separator {
1210
margin: 2px;
1211
}
1212
&.vertical > separator {
1214
margin: 2px;
1215
}
1216
&:not(.inline-toolbar):not(.osd) {
1218
scale,
1219
entry,
1220
spinbutton,
1221
button {
1222
margin: 2px;
1223
}
1224
.linked entry,
1226
.linked spinbutton,
1227
.linked button {
1228
&:not(:first-child) {
1229
margin-left: 0;
1230
}
1231
&:not(:last-child) {
1233
margin-right: 0;
1234
}
1235
}
1236
spinbutton {
1238
entry,
1239
button {
1240
margin: 0;
1241
}
1242
}
1243
switch {
1245
margin: 2px + $container-padding 2px;
1246
}
1247
}
1248
}
1249
%toolbar-osd {
1251
transition: $transition-shadow;
1252
padding: $container-padding;
1253
border-radius: $corner-radius;
1254
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1255
background-color: $surface;
1256
&:backdrop {
1258
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1259
}
1260
}
1261
// searchbar, location-bar & inline-toolbar
1263
.inline-toolbar {
1264
padding: $container-padding;
1265
border-style: solid;
1266
border-width: 0 1px 1px;
1267
border-color: $divider;
1268
background-color: $base-alt;
1269
}
1270
searchbar > revealer > box,
1272
.location-bar {
1273
padding: $container-padding;
1274
border-style: solid;
1275
border-width: 0 0 1px;
1276
border-color: $divider;
1277
background-color: $background;
1278
background-clip: border-box;
1279
}
1280
searchbar > revealer > box {
1282
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1283
margin: -6px;
1284
padding: $container-padding;
1285
}
1286
/**
1288
* Header bars
1289
*/
1290
.titlebar {
1292
transition: background-color $duration $ease-out, color $duration $ease-out;
1293
border-radius: $corner-radius $corner-radius 0 0;
1294
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1295
background-color: $titlebar;
1296
color: $titlebar-text;
1297
&:disabled {
1299
color: $titlebar-text-disabled;
1300
}
1301
&:backdrop {
1303
background-color: $titlebar-backdrop;
1304
color: $titlebar-text2;
1305
&:disabled {
1307
color: $titlebar-text2-disabled;
1308
}
1309
}
1310
.title {
1312
padding-left: 12px;
1313
padding-right: 12px;
1314
font-weight: bold;
1315
}
1316
.subtitle {
1318
padding-left: 12px;
1319
padding-right: 12px;
1320
font-size: smaller;
1321
}
1322
.subtitle,
1324
.dim-label {
1325
transition: color $duration $ease-out;
1326
color: $titlebar-text2;
1327
&:backdrop {
1329
color: $titlebar-text-disabled;
1330
}
1331
}
1332
// Don't draw titlebar above titlebar
1334
.titlebar {
1335
background-color: transparent;
1336
box-shadow: none;
1337
}
1338
// The separator for split headerbars
1340
headerbar + separator {
1341
background-color: $titlebar-divider;
1342
}
1343
entry {
1345
box-shadow: inset 0 -1px $titlebar-stroke;
1346
background-color: $titlebar-entry-fill;
1347
color: $titlebar-text;
1348
&:disabled {
1350
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1351
background-color: $titlebar-entry-fill;
1352
color: $titlebar-text-disabled;
1353
}
1354
image {
1356
color: $titlebar-text2;
1357
&:hover,
1359
&:active {
1360
color: $titlebar-text;
1361
}
1362
&:disabled {
1364
color: $titlebar-text-disabled;
1365
}
1366
}
1367
}
1368
.linked:not(.vertical) > entry:not(:only-child) {
1370
border-radius: $corner-radius $corner-radius 0 0;
1371
}
1372
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1374
@extend %button-flat;
1375
border-image:
1377
radial-gradient(
1378
circle closest-corner at center calc(100% - 1px),
1379
$titlebar-indicator 0%,
1380
transparent 0%
1381
) 0 0 0 / 0 0 0;
1382
color: $titlebar-text2;
1384
@include ink-color($titlebar-text2);
1385
&:disabled {
1387
color: $titlebar-text2-disabled;
1388
}
1389
@at-root %titlebar-button-checked,
1391
&:checked {
1392
border-image:
1393
radial-gradient(
1394
circle closest-corner at center calc(100% - 1px),
1395
$titlebar-indicator 100%,
1396
transparent 0%
1397
) 0 0 2 / 0 0 2px;
1398
background-color: transparent;
1399
color: $titlebar-text;
1400
@include ink-color($titlebar-text);
1401
&:disabled {
1403
background-color: transparent;
1404
color: $titlebar-text-disabled;
1405
}
1406
}
1407
&:backdrop {
1409
color: $titlebar-text-disabled;
1410
&:disabled {
1412
color: $titlebar-text2-disabled;
1413
}
1414
&:checked {
1416
color: $titlebar-text2;
1417
&:disabled {
1419
color: $titlebar-text2-disabled;
1420
}
1421
}
1422
}
1423
}
1424
button.suggested-action, button.destructive-action {
1426
&:disabled {
1427
background-color: $titlebar-fill;
1428
color: $titlebar-text-disabled;
1429
}
1430
}
1431
// FIXME: Ugly overriding
1433
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1434
min-width: 120px - 8px * 2;
1435
}
1436
// FIXME: Ugly overriding
1438
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1439
min-width: 0;
1440
padding-left: ($medium-size - 24px) / 2;
1441
padding-right: ($medium-size - 24px) / 2;
1442
}
1443
&.selection-mode {
1445
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1446
// but let's keep it for backwards compatibility.
1447
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1448
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1449
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1450
background-color: $primary;
1451
color: on($primary);
1452
&:backdrop {
1454
color: on($primary, text2);
1455
}
1456
.subtitle:link {
1458
color: on($primary);
1459
}
1460
button:not(.suggested-action):not(.destructive-action) {
1462
border-image:
1463
radial-gradient(
1464
circle closest-corner at center calc(100% - 1px),
1465
currentcolor 0%,
1466
transparent 0%
1467
) 0 0 0 / 0 0 0;
1468
color: on($primary);
1469
&:disabled {
1471
color: on($primary, text-disabled);
1472
}
1473
&:checked {
1475
border-image:
1476
radial-gradient(
1477
circle closest-corner at center calc(100% - 1px),
1478
currentcolor 100%,
1479
transparent 0%
1480
) 0 0 2 / 0 0 2px;
1481
color: on($primary);
1482
&:disabled {
1484
color: on($primary, text-disabled);
1485
}
1486
}
1487
&:backdrop {
1489
color: on($primary, text2);
1490
&:disabled {
1492
color: on($primary, text2-disabled);
1493
}
1494
&:checked {
1496
color: on($primary, text2);
1497
&:disabled {
1499
color: on($primary, text2-disabled);
1500
}
1501
}
1502
}
1503
}
1504
.selection-menu {
1506
padding-left: 16px;
1507
padding-right: 16px;
1508
arrow {
1510
-GtkArrow-arrow-scaling: 1;
1511
}
1512
.arrow {
1514
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1515
}
1516
}
1517
}
1518
.selection-mode {
1520
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1521
background-color: $primary;
1522
}
1523
// squared corners when the window is maximized, tiled, or fullscreen
1525
.tiled &,
1526
.tiled-top &,
1527
.tiled-right &,
1528
.tiled-bottom &,
1529
.tiled-left &,
1530
.maximized &,
1531
.fullscreen & {
1532
border-radius: 0;
1533
box-shadow: $shadow-z1;
1534
}
1535
&.default-decoration {
1537
min-height: $small-size;
1538
padding: $container-padding;
1539
box-shadow: inset 0 1px highlight($titlebar);
1540
.tiled &,
1542
.maximized &,
1543
.fullscreen & {
1544
box-shadow: none;
1545
}
1546
button.titlebutton {
1548
min-height: $small-size;
1549
min-width: $small-size;
1550
margin: 0;
1551
padding: 0;
1552
}
1553
// workaround for non-animatable buttons
1555
.background:not(.csd) & button.titlebutton:active {
1556
background-size: 1000% 1000%;
1557
}
1558
}
1559
.solid-csd & {
1561
&:dir(rtl), &:dir(ltr) { // specificity bump
1562
border-radius: 0;
1563
box-shadow: $shadow-z1; // just remove the highlight
1564
}
1565
}
1566
}
1567
headerbar {
1569
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1570
min-height: $large-size;
1571
padding: 0 $container-padding;
1572
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1574
entry,
1575
spinbutton,
1576
button {
1577
margin-top: $container-padding;
1578
margin-bottom: $container-padding;
1579
}
1580
separator.titlebutton {
1582
margin-top: $large-size / 4;
1583
margin-bottom: $large-size / 4;
1584
background-color: $titlebar-divider;
1585
}
1586
switch {
1588
margin-top: ($large-size - 24px) / 2;
1589
margin-bottom: ($large-size - 24px) / 2;
1590
}
1591
// reset button margins of the spinbutton
1593
spinbutton button {
1594
margin-top: 0;
1595
margin-bottom: 0;
1596
}
1597
// FIXME: This is a hacky workaround.
1599
.entry-tag {
1600
margin-top: 5px;
1601
margin-bottom: 5px;
1602
}
1603
}
1604
// Development versions of apps to use a differently styled headerbar
1606
window.devel .titlebar:not(.selection-mode) {
1607
}
1608
/**
1610
* Pathbars
1611
*/
1612
%pathbar_button,
1614
.path-bar.linked:not(.vertical) > button {
1615
@extend %button-flat-basic;
1616
padding-left: ($medium-size - 24px) / 2;
1618
padding-right: ($medium-size - 24px) / 2;
1619
border-image:
1620
radial-gradient(
1621
circle closest-corner at center calc(100% - 1px),
1622
$primary 0%,
1623
transparent 0%
1624
) 0 0 0 / 0 0 0;
1625
border-radius: $corner-radius;
1626
&:checked {
1628
border-image:
1629
radial-gradient(
1630
circle closest-corner at center calc(100% - 1px),
1631
$primary 100%,
1632
transparent 0%
1633
) 0 0 2 / 0 0 2px;
1634
color: $text;
1635
&,
1637
&:disabled {
1638
background-color: transparent;
1639
}
1640
}
1641
label:not(:only-child) {
1643
&:first-child {
1644
margin-left: 0;
1645
}
1646
&:last-child {
1648
margin-right: 0;
1649
}
1650
}
1651
&.text-button {
1653
min-width: 0;
1654
}
1655
&.slider-button {
1657
padding-left: (24px - 16px) / 2;
1658
padding-right: (24px - 16px) / 2;
1659
}
1660
}
1661
/**
1663
* Tree Views
1664
*/
1665
treeview.view {
1667
@at-root * {
1668
-GtkTreeView-horizontal-separator: 4;
1669
-GtkTreeView-grid-line-width: 1;
1670
-GtkTreeView-grid-line-pattern: '';
1671
-GtkTreeView-tree-line-width: 1;
1672
-GtkTreeView-tree-line-pattern: '';
1673
-GtkTreeView-expander-size: 16;
1674
}
1675
border-left-color: $stroke; // this is actually the tree lines color,
1677
border-top-color: $divider; // while this is the grid lines color, better then nothing
1678
// FIXME: Avoid transparency background-color being slightly darker
1680
&:selected {
1681
background-color: $base;
1682
background-image: image($overlay-selected);
1683
}
1684
// to avoid borders being overridden by the previously set props
1686
rubberband {
1687
@extend rubberband;
1688
}
1689
&:hover,
1691
&:selected {
1692
border-radius: 0;
1693
}
1694
&.separator {
1696
min-height: 1px + 2px * 2;
1697
color: $divider;
1698
}
1699
&:drop(active) {
1701
// FIXME: box-shadow, background-color and background-image are not available here.
1702
border-style: solid none;
1703
border-width: 9999px;
1704
border-color: overlay("hover", $text);
1705
&.after {
1707
border-top-style: none;
1708
}
1709
&.before {
1711
border-bottom-style: none;
1712
}
1713
}
1714
&.expander {
1716
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1717
-gtk-icon-transform: rotate(-90deg);
1718
&:dir(rtl) {
1720
-gtk-icon-transform: rotate(90deg);
1721
}
1722
&:checked {
1724
-gtk-icon-transform: unset;
1725
}
1726
color: $text2;
1728
&:hover,
1730
&:active {
1731
color: $text;
1732
}
1733
&:disabled {
1735
color: $text2-disabled;
1736
}
1737
}
1738
&.progressbar { // progress bar in treeviews
1740
border-bottom: $bar-size solid $primary;
1741
box-shadow: none;
1742
background-color: transparent;
1743
background-image: none;
1744
&:selected:hover {
1746
box-shadow: none;
1747
}
1748
}
1749
&.trough { // progress bar trough in treeviews
1751
border-bottom: $bar-size solid $stroke-disabled;
1752
box-shadow: none;
1753
background-color: transparent;
1754
background-image: none;
1755
&:selected:hover {
1757
box-shadow: none;
1758
}
1759
}
1760
header {
1762
button {
1763
padding: 2px 6px;
1764
border-style: none solid solid none;
1765
border-width: 1px;
1766
border-color: $divider;
1767
border-radius: 0;
1768
background-clip: border-box;
1769
color: $text2;
1770
@include ink-color($text2);
1771
@include list-item;
1772
&:disabled {
1774
color: $text2-disabled;
1775
}
1776
&,
1778
&:disabled {
1779
background-color: $base;
1780
}
1781
&:last-child {
1783
border-right-style: none;
1784
}
1785
}
1786
}
1787
button.dnd,
1789
header.button.dnd { // for treeview-like derive widgets
1790
padding: 2px 6px;
1791
border-style: none solid solid;
1792
border-width: 1px;
1793
border-color: $divider;
1794
border-radius: 0;
1795
box-shadow: none;
1796
background-color: $base;
1797
background-clip: border-box;
1798
color: $primary;
1799
}
1800
// see tests/testaccel to test
1802
acceleditor > label {
1803
background-color: $primary;
1804
}
1805
}
1806
/**
1808
* Menus
1809
*/
1810
menubar,
1812
.menubar {
1813
-GtkWidget-window-dragging: true;
1814
padding: 0;
1815
// box-shadow: inset 0 -1px $divider;
1816
background-color: $titlebar;
1817
color: $titlebar-text;
1818
&:backdrop {
1820
background-color: $titlebar-backdrop;
1821
color: $titlebar-text2;
1822
}
1823
.csd & {
1825
transition: $transition;
1826
}
1827
> menuitem {
1829
transition: $transition;
1830
min-height: 20px;
1831
padding: 4px 8px;
1832
color: $titlebar-text2;
1833
&:hover { // Seems like it :hover even with keyboard focus
1835
transition: none;
1836
background-color: overlay("activated", $titlebar-text);
1837
color: $titlebar-text;
1838
}
1839
&:disabled {
1841
color: $titlebar-text2-disabled;
1842
}
1843
}
1844
}
1845
// Needed to make the border-radius of menus work
1847
// otherwise the background bleeds out of the menu edges
1848
.background.popup {
1849
background-color: transparent;
1850
}
1851
menu,
1853
.menu,
1854
.context-menu {
1855
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1856
padding: 4px 0;
1857
box-shadow: inset 0 1px highlight($surface);
1858
background-color: $surface;
1859
background-clip: border-box;
1860
border: 1px solid $divider; // adds borders in a non composited env
1861
.csd & {
1863
border: none; // axes borders in a composited env
1864
border-radius: $corner-radius;
1865
}
1866
menuitem {
1868
transition: background-color $duration $ease-out;
1869
min-height: 20px;
1870
min-width: 40px;
1871
padding: 4px 8px;
1872
color: $text;
1873
font: initial;
1874
text-shadow: none;
1875
&:hover {
1877
transition: none;
1878
background-color: overlay("hover", $text);
1879
}
1880
&:disabled {
1882
color: $text-disabled;
1883
}
1884
// submenu indicators
1886
arrow {
1887
min-height: 16px;
1888
min-width: 16px;
1889
color: $text2;
1890
&:disabled {
1892
color: $text2-disabled;
1893
}
1894
&:dir(ltr) {
1896
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1897
margin-left: 8px;
1898
}
1899
&:dir(rtl) {
1901
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1902
margin-right: 8px;
1903
}
1904
}
1905
// avoids labels color being overridden, see
1907
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1908
label {
1909
&:dir(rtl),
1910
&:dir(ltr) {
1911
// color: inherit;
1912
}
1913
}
1914
}
1915
// overflow arrows
1917
> arrow {
1918
min-height: 16px;
1919
min-width: 16px;
1920
padding: 4px;
1921
background-color: $surface;
1922
color: $text2;
1923
&.top {
1925
margin-top: -4px;
1926
border-bottom: 1px solid $divider;
1927
border-radius: $corner-radius $corner-radius 0 0;
1928
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1929
}
1930
&.bottom {
1932
margin-top: 4px * 2;
1933
margin-bottom: -4px * 3;
1934
border-top: 1px solid $divider;
1935
border-radius: 0 0 $corner-radius $corner-radius;
1936
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1937
}
1938
&:hover {
1940
background-image: image(overlay("hover", $text));
1941
}
1942
&:disabled {
1944
border-color: transparent;
1945
background-color: transparent;
1946
color: transparent;
1947
// color: $text2-disabled;
1948
}
1949
}
1950
separator {
1952
margin: 4px 0;
1953
}
1954
}
1955
menuitem {
1957
accelerator {
1958
color: $text2;
1959
}
1960
&:disabled accelerator {
1962
color: $text2-disabled;
1963
}
1964
}
1965
/**
1967
* Popovers
1968
*/
1969
popover.background {
1971
transition: $transition-shadow;
1972
padding: 2px;
1973
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1974
background-color: $surface;
1975
&:backdrop {
1977
box-shadow: $shadow-z2;
1978
}
1979
&, .csd & {
1981
border-style: solid;
1982
border-width: 1px;
1983
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
1984
border-radius: $corner-radius + 1px;
1985
}
1986
> stack {
1988
margin: -4px; // remove extra padding from menu style popovers
1989
}
1990
> toolbar {
1992
margin: -2px;
1993
}
1994
> list,
1996
> .view,
1997
> toolbar {
1998
border-style: none;
1999
box-shadow: none;
2000
background-color: transparent;
2001
}
2002
// FIXME: Use the popover color instead of transparent as a workaround for .view
2004
list,
2005
.view:not(:selected),
2006
toolbar {
2007
background-color: $surface;
2008
}
2009
&.touch-selection,
2011
&.magnifier,
2012
&.osd {
2013
// @extend %osd;
2014
}
2015
button:not(.suggested-action):not(.destructive-action) {
2017
// @extend %button-flat;
2018
}
2019
.linked:not(.vertical) > entry:not(:only-child) {
2021
// border-radius: $corner-radius $corner-radius 0 0;
2022
}
2023
&.menu button,
2025
button.model {
2026
@extend %button-flat;
2027
min-height: 32px;
2029
padding: 0 8px;
2030
border-radius: $corner-radius;
2031
&:checked {
2033
// color: $primary;
2034
}
2035
}
2036
separator {
2038
margin: 4px 0;
2039
}
2040
list separator {
2042
margin: 0;
2043
}
2044
}
2045
/**
2047
* Notebooks
2048
*/
2049
notebook {
2051
frame > paned > & > header,
2052
&.frame > header {
2053
background-color: $base-alt;
2054
}
2055
&:focus tab:checked {
2057
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2058
}
2059
> header {
2061
border-width: 1px;
2062
border-color: $divider;
2063
background-color: $background;
2064
background-clip: border-box;
2065
&.top {
2067
border-bottom-style: solid;
2068
> tabs {
2070
margin-bottom: -1px;
2071
> tab {
2073
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2074
&:checked {
2076
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2077
}
2078
&.reorderable-page {
2080
border-image-width: 0 1px 2px;
2081
}
2082
}
2083
}
2084
}
2085
&.bottom {
2087
border-top-style: solid;
2088
> tabs {
2090
margin-top: -1px;
2091
> tab {
2093
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2094
&:checked {
2096
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2097
}
2098
&.reorderable-page {
2100
border-image-width: 2px 1px 0;
2101
}
2102
}
2103
}
2104
}
2105
&.left {
2107
border-right-style: solid;
2108
> tabs {
2110
margin-right: -1px;
2111
> tab {
2113
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2114
&:checked {
2116
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2117
}
2118
&.reorderable-page {
2120
border-image-width: 1px 2px 1px 0;
2121
}
2122
}
2123
}
2124
}
2125
&.right {
2127
border-left-style: solid;
2128
> tabs {
2130
margin-left: -1px;
2131
> tab {
2133
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2134
&:checked {
2136
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2137
}
2138
&.reorderable-page {
2140
border-image-width: 1px 0 1px 2px;
2141
}
2142
}
2143
}
2144
}
2145
&.top > tabs > arrow {
2147
@extend %notebook_vert_arrows;
2148
border-top-style: none;
2150
}
2151
&.bottom > tabs > arrow {
2153
@extend %notebook_vert_arrows;
2154
border-bottom-style: none;
2156
}
2157
@at-root %notebook_vert_arrows {
2159
padding-left: 4px;
2160
padding-right: 4px;
2161
&.down {
2163
margin-left: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2165
}
2166
&.up {
2168
margin-right: -8px;
2169
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2170
}
2171
}
2172
&.left > tabs > arrow {
2174
@extend %notebook_horz_arrows;
2175
border-left-style: none;
2177
}
2178
&.right > tabs > arrow {
2180
@extend %notebook_horz_arrows;
2181
border-right-style: none;
2183
}
2184
@at-root %notebook_horz_arrows {
2186
padding-top: 4px;
2187
padding-bottom: 4px;
2188
&.down {
2190
margin-top: -8px;
2191
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2192
}
2193
&.up {
2195
margin-bottom: -8px;
2196
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2197
}
2198
}
2199
> tabs > arrow {
2201
min-height: 16px;
2202
min-width: 16px;
2203
border-radius: 0;
2204
@extend %ripple;
2206
@include ink-color($text2);
2207
&:disabled {
2209
color: $text2-disabled;
2210
}
2211
}
2212
tab {
2214
transition: $transition,
2215
background-size 0ms,
2216
background-image 0ms;
2217
min-height: $small-size;
2218
min-width: $small-size;
2219
padding: $container-padding 12px;
2220
border-width: 1px; // for reorderable tabs
2222
border-color: transparent; //
2223
outline: none;
2225
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2226
background-repeat: no-repeat;
2227
background-position: center;
2228
background-size: 0% 0%;
2229
background-clip: border-box;
2230
color: $text2;
2232
font-weight: 500;
2233
&:hover {
2235
background-color: overlay("hover", $text);
2236
}
2237
&:disabled {
2239
color: $text2-disabled;
2240
}
2241
&:checked {
2243
transition: $transition,
2244
background-size $ripple-fade-in-duration $ease-out,
2245
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2246
background-color: transparent;
2247
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2248
background-size: 1000% 1000%;
2249
background-clip: padding-box;
2250
color: $text;
2251
&:disabled {
2253
color: $text-disabled;
2254
}
2255
&.reorderable-page {
2257
border-color: $divider;
2258
background-color: $base;
2259
}
2260
}
2261
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2263
> box {
2264
transition: background-color $duration $ease-out;
2265
margin: -$container-padding -12px;
2266
padding: $container-padding 12px;
2267
&:drop(active) {
2269
background-color: overlay("hover", $text);
2270
}
2271
}
2272
// colors the button like the label, overridden otherwise
2274
button.flat {
2275
@extend %button-small;
2276
&:last-child {
2278
margin-left: $container-padding;
2279
margin-right: $container-padding - 12px;
2280
}
2281
&:first-child {
2283
margin-left: $container-padding - 12px;
2284
margin-right: $container-padding;
2285
}
2286
}
2287
}
2288
&.top,
2290
&.bottom {
2291
tabs {
2292
padding-left: 8px;
2293
padding-right: 8px;
2294
&:not(:only-child) {
2296
&:first-child {
2297
margin-left: 0;
2298
}
2299
&:last-child {
2301
margin-right: 0;
2302
}
2303
}
2304
tab.reorderable-page {
2306
border-style: none solid;
2307
}
2308
}
2309
}
2310
&.left,
2312
&.right {
2313
tabs {
2314
padding-top: 8px;
2315
padding-bottom: 8px;
2316
&:not(:only-child) {
2318
&:first-child {
2319
margin-top: 0;
2320
}
2321
&:last-child {
2323
margin-bottom: 0;
2324
}
2325
}
2326
tab.reorderable-page {
2328
border-style: solid none;
2329
}
2330
}
2331
}
2332
}
2333
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2335
background-color: $base;
2336
}
2337
}
2338
/**
2340
* Scrollbars
2341
*/
2342
scrollbar {
2344
$_slider_min_length: 24px;
2345
// disable steppers
2347
@at-root * {
2348
-GtkScrollbar-has-backward-stepper: false;
2349
-GtkScrollbar-has-forward-stepper: false;
2350
}
2351
transition: $transition;
2353
background-color: $base;
2354
// scrollbar border
2356
&.top { border-bottom: 1px solid $divider; }
2357
&.bottom { border-top: 1px solid $divider; }
2358
&.left { border-right: 1px solid $divider; }
2359
&.right { border-left: 1px solid $divider; }
2360
// slider
2362
slider {
2363
transition: background-color $duration $ease-out;
2364
min-width: 8px;
2365
min-height: 8px;
2366
border: 4px solid transparent;
2367
border-radius: $circular-radius;
2368
background-clip: padding-box;
2369
background-color: $text-disabled;
2370
&:hover {
2372
background-color: $text2;
2373
}
2374
&:active {
2376
background-color: $text;
2377
}
2378
&:disabled {
2380
background-color: $text2-disabled;
2381
}
2382
}
2383
&.fine-tune {
2385
slider {
2386
min-width: 4px;
2387
min-height: 4px;
2388
}
2389
&.horizontal slider {
2391
margin: 2px 0;
2392
}
2393
&.vertical slider {
2395
margin: 0 2px;
2396
}
2397
}
2398
&.overlay-indicator {
2400
&:not(.fine-tune) slider {
2401
transition-property: background-color, min-height, min-width;
2402
}
2403
&:not(.dragging):not(.hovering) {
2405
border-color: transparent;
2406
background-color: transparent;
2407
slider {
2409
min-width: 4px;
2410
min-height: 4px;
2411
margin: 4px - 1px;
2412
border: 1px solid rgba($base, .3);
2413
}
2414
button {
2416
min-width: 4px;
2417
min-height: 4px;
2418
margin: 4px - 1px;
2419
border: 1px solid rgba($base, .3);
2420
border-radius: $circular-radius;
2421
background-color: $text-disabled;
2422
background-clip: padding-box;
2423
-gtk-icon-source: none;
2424
&:disabled {
2426
background-color: $text2-disabled;
2427
}
2428
}
2429
&.horizontal {
2431
slider {
2432
min-width: $_slider_min_length;
2433
}
2434
button {
2436
min-width: 8px;
2437
}
2438
}
2439
&.vertical {
2441
slider {
2442
min-height: $_slider_min_length;
2443
}
2444
button {
2446
min-height: 8px;
2447
}
2448
}
2449
}
2450
&.dragging,
2452
&.hovering {
2453
background-color: rgba($surface, .9);
2454
}
2455
}
2456
&.horizontal slider {
2458
min-width: $_slider_min_length;
2459
}
2460
&.vertical slider {
2462
min-height: $_slider_min_length;
2463
}
2464
// button styling
2466
button {
2467
@extend %button-flat-basic;
2468
min-width: 16px;
2470
min-height: 16px;
2471
padding: 0;
2472
border-radius: 0;
2473
}
2474
// button icons
2476
&.vertical {
2477
button {
2478
&.down {
2479
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2480
}
2481
&.up {
2483
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2484
}
2485
}
2486
}
2487
&.horizontal {
2489
button {
2490
&.down {
2491
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2492
}
2493
&.up {
2495
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2496
}
2497
}
2498
}
2499
}
2500
/**
2503
* Switch
2504
*/
2505
switch {
2507
transition: all $duration $ease-out;
2508
margin: $container-padding 0;
2509
padding: 0 2px;
2510
border: 5px solid transparent;
2511
border-radius: $circular-radius;
2512
background-color: $stroke;
2513
background-clip: padding-box;
2514
font-size: 0;
2515
&:checked {
2517
background-color: rgba($primary, .5);
2518
}
2519
&:disabled {
2521
opacity: .5;
2522
}
2523
// hide on/off icons for >=3.24.5
2525
image {
2526
margin: -8px;
2527
-gtk-icon-transform: scale(0);
2528
}
2529
slider {
2531
transition: all $duration $ease-out;
2532
min-width: 20px;
2533
min-height: 20px;
2534
margin: -3px -2px;
2535
border-radius: $circular-radius;
2536
outline: none;
2537
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2538
background-color: $switch-surface;
2539
}
2540
&:hover slider {
2542
box-shadow: 0 0 0 10px overlay("hover", $text), $shadow-z1;
2543
}
2544
&:focus slider {
2546
box-shadow: 0 0 0 10px overlay("focus", $text), $shadow-z1;
2547
}
2548
&:checked slider {
2550
background-color: $primary;
2551
}
2552
&:checked:hover slider {
2554
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2555
}
2556
&:checked:focus slider {
2558
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2559
}
2560
row:selected & {
2562
}
2563
}
2564
/**
2566
* Check and Radio items
2567
*/
2568
// draw regular check and radio items using our PNG assets
2570
// all assets are rendered from assets.svg. never add pngs directly
2571
// selection-mode
2573
.view.content-view.check:not(list),
2574
.content-view:not(list) .tile check {
2575
min-height: 40px;
2576
min-width: 40px;
2577
margin: 0;
2578
padding: 0;
2579
box-shadow: none;
2580
background-color: transparent;
2581
background-image: none;
2582
-gtk-icon-shadow: $icon-shadow-z2;
2583
&:hover,
2585
&:active {
2586
-gtk-icon-shadow: $icon-shadow-z4;
2587
}
2588
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2590
&#{$class} {
2591
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2592
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2594
}
2595
}
2596
}
2597
checkbutton,
2599
radiobutton {
2600
outline: none;
2601
}
2602
checkbutton.text-button,
2604
radiobutton.text-button {
2605
// this is for a nice focus on check and radios text
2606
padding: 2px;
2607
label:not(:only-child) {
2609
margin: 0 4px;
2610
}
2611
}
2612
$check-radio-size: 40px;
2614
check,
2616
radio {
2617
min-height: 24px;
2618
min-width: 24px;
2619
margin: -($check-radio-size - 24px) / 2;
2620
padding: ($check-radio-size - 24px) / 2;
2621
border-radius: $circular-radius;
2622
color: $text2;
2623
@extend %ripple;
2624
@include ink-color($text2);
2625
&:checked,
2627
&:indeterminate {
2628
color: $primary;
2629
@include ink-color($primary);
2630
}
2631
&:disabled {
2633
color: $text2-disabled;
2634
}
2635
&:only-child {
2637
// margin: -12px;
2638
}
2639
popover modelbutton.flat & {
2641
&,
2642
&:focus,
2643
&:hover,
2644
&:focus:hover,
2645
&:active,
2646
&:disabled {
2647
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2648
box-shadow: none;
2649
background-image: none;
2650
}
2651
&.left:dir(rtl) {
2653
margin-left: -12px;
2654
margin-right: -4px;
2655
}
2656
&.right:dir(ltr) {
2658
margin-left: -4px;
2659
margin-right: -12px;
2660
}
2661
}
2662
menu menuitem & {
2664
transition: none;
2665
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2666
padding: 0;
2667
&:dir(ltr) {
2669
margin-right: 8px;
2670
}
2671
&:dir(rtl) {
2673
margin-left: 8px;
2674
}
2675
&,
2677
&:hover,
2678
&:disabled {
2679
box-shadow: none;
2680
}
2681
}
2682
}
2683
%check,
2685
check {
2686
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2687
&:checked {
2689
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2690
}
2691
&:indeterminate {
2693
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2694
}
2695
}
2696
%radio,
2698
radio {
2699
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2700
&:checked {
2702
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2703
}
2704
&:indeterminate {
2706
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2707
}
2708
border-image-slice: $check-radio-size / 2px;
2710
border-image-width: $check-radio-size / 2;
2711
$radio-indicator-size: 10px / $check-radio-size / 2;
2713
border-image-source:
2715
-gtk-gradient(
2716
radial,
2717
center center, 0,
2718
center center, .001,
2719
to($primary),
2720
to(transparent)
2721
);
2722
&:checked:not(:indeterminate) {
2724
border-image-source:
2725
-gtk-gradient(
2726
radial,
2727
center center, 0,
2728
center center, $radio-indicator-size,
2729
to($primary),
2730
to(transparent)
2731
);
2732
&:disabled {
2734
border-image-source:
2735
-gtk-gradient(
2736
radial,
2737
center center, 0,
2738
center center, $radio-indicator-size,
2739
to($text2-disabled),
2740
to(transparent)
2741
);
2742
}
2743
}
2744
}
2745
%small_check,
2747
menu menuitem check {
2748
min-height: 16px;
2749
min-width: 16px;
2750
border-radius: $corner-radius;
2751
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2752
&:checked {
2754
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2755
}
2756
&:indeterminate {
2758
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2759
}
2760
}
2761
%small_radio,
2763
menu menuitem radio {
2764
min-height: 16px;
2765
min-width: 16px;
2766
border-image: none;
2767
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2768
&:checked {
2770
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2771
}
2772
&:indeterminate {
2774
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2775
}
2776
}
2777
// ANIMATION:
2779
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2780
// the transformation is set on the active state and it get reset on the checked state.
2781
radio:not(:checked):active {
2782
// -gtk-icon-transform: scale(0);
2783
}
2784
// Otherwise, treeview.view styling will be applied...
2786
treeview.view check,
2787
treeview.view radio {
2788
padding: 0;
2789
color: $text2;
2790
&:checked,
2792
&:indeterminate {
2793
color: $primary;
2794
}
2795
&:disabled {
2797
color: $text2-disabled;
2798
}
2799
&,
2801
&:hover,
2802
&:selected,
2803
&:selected:hover {
2804
box-shadow: none;
2805
background-color: transparent;
2806
}
2807
}
2808
treeview.view radio:checked {
2810
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2811
border-image: none;
2812
}
2813
/**
2815
* GtkScale
2816
*/
2817
scale {
2819
// sizing
2820
$_marks_length: 8px;
2821
$_marks_distance: 7px;
2822
$trough_size: 2px;
2824
$finetune_trough_size: 4px;
2825
$slider_size: 32px;
2827
$slider_margin: -($slider_size - $trough_size) / 2;
2829
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2830
$color_slider_margin: -($slider_size) * 3 / 4;
2832
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2833
min-height: $trough_size;
2835
min-width: $trough_size;
2836
&.horizontal {
2838
padding: ($medium-size - $trough_size) / 2 12px;
2839
}
2840
&.vertical {
2842
padding: 12px ($medium-size - $trough_size) / 2;
2843
}
2844
// the slider is inside the trough, so to have make it bigger there's a negative margin
2846
slider {
2847
min-height: $slider_size;
2848
min-width: $slider_size;
2849
margin: $slider_margin;
2850
}
2851
// click-and-hold the slider to activate
2853
&.fine-tune {
2854
&.horizontal {
2855
min-height: $finetune_trough_size;
2856
padding-top: ($medium-size - $finetune_trough_size) / 2;
2857
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2858
}
2859
&.vertical {
2861
min-width: $finetune_trough_size;
2862
padding-left: ($medium-size - $finetune_trough_size) / 2;
2863
padding-right: ($medium-size - $finetune_trough_size) / 2;
2864
}
2865
// to make the trough grow in fine-tune mode
2867
slider {
2868
margin: $finetune_slider_margin;
2869
}
2870
}
2871
// the backing bit
2873
trough {
2874
transition: background-color $duration $ease-out;
2875
outline: none;
2876
background-color: $stroke;
2877
&:disabled {
2879
background-color: $stroke-disabled;
2880
}
2881
}
2882
// the colored part of the backing bit
2884
highlight {
2885
transition: background-image $duration $ease-out;
2886
background-image: image($primary);
2887
&:disabled {
2889
background-color: $background;
2890
background-image: image($text2-disabled);
2891
}
2892
}
2893
// this is another differently styled part of the backing bit, the most relevant use case is for example
2895
// in media player to indicate how much video stream as been cached
2896
fill {
2897
transition: background-color $duration $ease-out;
2898
background-color: $stroke;
2899
&:disabled {
2901
background-color: transparent;
2902
}
2903
}
2904
slider {
2906
transition: background-color $duration $ease-out,
2907
background-size $ripple-fade-out-duration $ease-out,
2908
background-image $ripple-fade-out-opacity-duration $ease-out;
2909
background-repeat: no-repeat;
2910
background-position: center;
2911
background-size: auto, 1000% 1000%;
2912
border-radius: 50%;
2913
color: $primary;
2914
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2916
&#{$class} {
2917
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2918
background-image:
2920
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2921
radial-gradient(circle, transparent 10%, transparent 0%);
2922
}
2923
}
2924
&:hover {
2926
background-color: overlay("hover", $primary);
2927
}
2928
&:focus {
2930
background-color: overlay("focus", $primary);
2931
}
2932
&:active {
2934
$_url: 'assets/scale-slider#{$asset-suffix}';
2935
transition: background-color $duration $ease-out,
2937
background-size 0ms,
2938
background-image 0ms;
2939
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2940
background-image:
2941
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2942
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2943
background-size: auto, 0% 0%;
2944
}
2945
}
2946
marks,
2948
value {
2949
color: $text2;
2950
}
2951
indicator {
2953
background-color: $stroke;
2954
color: transparent;
2955
}
2956
//marks margins
2958
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2959
(horizontal, bottom, bottom, top),
2960
(vertical, top, left, right),
2961
(vertical, bottom, right, left) {
2962
&.#{$scale_orient} marks {
2963
&.#{$marks_class} {
2964
margin-#{$marks_margin}: $_marks_distance;
2965
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2966
}
2967
}
2968
&.#{$scale_orient}.fine-tune marks {
2970
&.#{$marks_class} {
2971
margin-#{$marks_margin}: $_marks_distance - 1px;
2972
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2973
}
2974
}
2975
}
2976
&.horizontal {
2978
indicator {
2979
min-height: $_marks_length;
2980
min-width: 1px;
2981
}
2982
}
2983
&.vertical {
2985
indicator {
2986
min-height: 1px;
2987
min-width: $_marks_length;
2988
}
2989
}
2990
// *WARNING* scale with marks madness following
2992
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2994
@each $marks_class, $marks_infix in (
2995
".marks-before:not(.marks-after)": "-marks-before",
2996
".marks-after:not(.marks-before)": "-marks-after"
2997
) {
2998
&#{$dir_class}#{$marks_class} {
2999
slider {
3000
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3001
&#{$state_class} {
3002
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3003
background-image:
3005
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3006
radial-gradient(circle, transparent 10%, transparent 0%);
3007
}
3008
}
3009
&:active {
3011
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3012
background-image:
3014
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3015
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3016
}
3017
}
3018
}
3019
}
3020
}
3021
&.color {
3023
min-height: 0;
3024
min-width: 0;
3025
&.horizontal {
3027
padding: 0 0 12px 0;
3028
slider {
3030
&:dir(ltr), &:dir(rtl) { // specificity bump
3031
margin-bottom: $color_slider_margin;
3032
margin-top: $color_marks_slider_margin;
3033
}
3034
}
3035
}
3036
&.vertical {
3038
&:dir(ltr) {
3039
padding: 0 0 0 12px;
3040
slider {
3042
margin-left: $color_slider_margin;
3043
margin-right: $color_marks_slider_margin;
3044
}
3045
}
3046
&:dir(rtl) {
3048
padding: 0 12px 0 0;
3049
slider {
3051
margin-right: $color_slider_margin;
3052
margin-left: $color_marks_slider_margin;
3053
}
3054
}
3055
}
3056
}
3057
}
3058
/**
3060
* Progress bars
3061
*/
3062
progressbar {
3064
// sizing
3065
&.horizontal {
3066
trough,
3067
progress {
3068
min-height: $bar-size;
3069
}
3070
}
3071
&.vertical {
3073
trough,
3074
progress {
3075
min-width: $bar-size;
3076
}
3077
}
3078
// FIXME: insensitive state missing and some other state should be set probably
3080
color: $text2;
3081
font-size: smaller;
3082
trough {
3084
background-color: $stroke-disabled;
3085
}
3086
progress {
3088
background-color: $primary;
3089
}
3090
&.osd { // progressbar.osd used for epiphany page loading progress
3092
// min-width: $bar-size;
3093
// min-height: $bar-size;
3094
// background-color: transparent;
3095
trough {
3097
// background-color: transparent;
3098
}
3099
progress {
3101
// background-color: $primary;
3102
}
3103
}
3104
// makes the progress indicator disappear, when the fraction is 0
3106
trough.empty progress {
3107
all: unset;
3108
}
3109
}
3110
/**
3112
* Level Bar
3113
*/
3114
levelbar {
3116
&.horizontal {
3117
block {
3118
min-height: $bar-size;
3119
}
3120
&.discrete block {
3122
min-width: $medium-size;
3123
&:not(:last-child) {
3125
margin-right: 2px;
3126
}
3127
}
3128
}
3129
&.vertical {
3131
block {
3132
min-width: $bar-size;
3133
}
3134
&.discrete block {
3136
min-height: $medium-size;
3137
&:not(:last-child) {
3139
margin-bottom: 2px;
3140
}
3141
}
3142
}
3143
// imitate the entry style
3145
trough {
3146
// padding: 2px;
3147
// border-radius: $corner-radius;
3148
// box-shadow: $shadow-z1;
3149
// background-color: $base;
3150
&:disabled {
3152
// background-color: $base-alt;
3153
}
3154
}
3155
block {
3157
&.low {
3158
background-color: $warning;
3159
}
3160
&.high,
3162
&:not(.empty) {
3163
background-color: $primary;
3164
}
3165
&.full {
3167
background-color: $success;
3168
}
3169
&.empty {
3171
background-color: $stroke-disabled;
3172
}
3173
}
3174
}
3175
/**
3177
* Print dialog
3178
*/
3179
printdialog {
3181
paper {
3182
padding: 0;
3183
border: 1px solid $divider;
3184
background-color: $base;
3185
color: $text;
3186
}
3187
.dialog-action-box {
3189
margin: 12px;
3190
}
3191
}
3192
/**
3194
* Frames
3195
*/
3196
frame > border,
3198
.frame {
3199
margin: 0;
3200
padding: 0;
3201
border: 1px solid $divider;
3202
border-radius: 0;
3203
box-shadow: none;
3204
&.flat {
3206
border-style: none;
3207
}
3208
}
3209
// for backward compatibility
3211
frame.flat > border {
3212
border-style: none;
3213
}
3214
actionbar > revealer > box {
3216
padding: $container-padding;
3217
border-top: 1px solid $divider;
3218
background-color: $base;
3219
background-clip: border-box;
3220
button:not(.suggested-action):not(.destructive-action) {
3222
@extend %button-flat;
3223
}
3224
.linked:not(.vertical) > entry:not(:only-child) {
3226
border-radius: $corner-radius $corner-radius 0 0;
3227
}
3228
}
3229
scrolledwindow {
3231
viewport.frame { // avoid double borders when viewport inside scrolled window
3232
border-style: none;
3233
}
3234
// This is used when content is touch-dragged past boundaries.
3236
// draws a box on top of the content, the size changes programmatically.
3237
@at-root overshoot {
3238
&.top { @include overshoot(top); }
3239
&.bottom { @include overshoot(bottom); }
3241
&.left { @include overshoot(left); }
3243
&.right { @include overshoot(right); }
3245
}
3246
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3248
@at-root undershoot {
3249
&.top { @include undershoot(top); }
3250
&.bottom { @include undershoot(bottom); }
3252
&.left { @include undershoot(left); }
3254
&.right { @include undershoot(right); }
3256
}
3257
@at-root junction { // the small square between two scrollbars
3259
border-style: solid none none solid;
3260
border-width: 1px;
3261
border-color: $divider;
3262
background-color: $base;
3263
&:dir(rtl) {
3265
border-style: solid solid none none;
3266
}
3267
}
3268
}
3269
// vbox and hbox separators
3271
separator {
3272
min-width: 1px;
3273
min-height: 1px;
3274
background-color: $divider;
3275
}
3276
%hide_separators {
3278
min-width: 0;
3279
min-height: 0;
3280
background-color: transparent;
3281
}
3282
/**
3284
* Lists
3285
*/
3286
list {
3288
border-color: $divider;
3289
background-color: $base;
3290
row {
3292
padding: 2px;
3293
}
3294
}
3295
row {
3297
&.activatable {
3298
@extend %ripple;
3299
@include ink-color($text);
3300
@include list-item;
3301
// this is for indicathing which row generated a popover
3303
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3304
&.has-open-popup {
3305
background-color: overlay("activated", $text);
3306
}
3307
}
3308
&:selected {
3310
@extend %selected_items;
3311
@include ink-color($primary);
3313
&.has-open-popup {
3315
background-color: overlay("activated", $primary, $background: $overlay-selected);
3316
}
3317
}
3318
}
3319
/**
3321
* App Notifications
3322
*/
3323
.app-notification {
3325
// @extend %osd;
3326
@extend %toolbar-osd;
3328
margin: 8px;
3330
button {
3332
@extend %button-flat;
3333
&.text-button:not(:disabled) {
3335
color: $primary;
3336
@include ink-color($primary);
3337
}
3338
}
3339
&.frame,
3341
border {
3342
border-style: none;
3343
}
3344
}
3345
/**
3347
* Expanders
3348
*/
3349
expander {
3351
title > arrow {
3352
transition: all $duration $ease-out;
3353
min-width: 16px;
3354
min-height: 16px;
3355
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3356
-gtk-icon-transform: rotate(-90deg);
3357
&:dir(rtl) {
3359
-gtk-icon-transform: rotate(90deg);
3360
}
3361
&:checked {
3363
-gtk-icon-transform: unset;
3364
}
3365
color: $text2;
3367
&:hover,
3369
&:active {
3370
color: $text;
3371
}
3372
&:disabled {
3374
color: $text2-disabled;
3375
}
3376
}
3377
}
3378
/**
3380
* Calendar
3381
*/
3382
calendar {
3384
padding: 1px;
3385
border: 1px solid $divider;
3386
color: $text;
3387
&:disabled {
3389
color: $text-disabled;
3390
}
3391
&:selected {
3393
@extend %selected_items;
3394
border-radius: $corner-radius + 1px;
3396
}
3397
&.header {
3399
border-style: none none solid;
3400
border-color: $divider;
3401
border-radius: 0;
3402
}
3403
&.button {
3405
border-radius: $corner-radius + 1px;
3406
color: $text2;
3407
&:hover {
3409
background-image: image(overlay("hover", $text));
3410
}
3411
&:disabled {
3413
color: $text2-disabled;
3414
}
3415
}
3416
&.highlight {
3418
color: $text2;
3419
font-weight: 500;
3420
}
3421
&:indeterminate {
3423
color: $text2-disabled;
3424
}
3425
}
3426
/**
3428
* Dialogs
3429
*/
3430
messagedialog { // Message Dialog styling
3432
&.background {
3433
background-color: $surface;
3434
}
3435
.titlebar {
3437
min-height: $small-size;
3438
border-style: none;
3439
box-shadow: inset 0 1px highlight($surface);
3440
background-color: $surface;
3441
color: $text;
3442
&:backdrop {
3444
background-color: $surface;
3445
color: $text2;
3446
}
3447
}
3448
&.csd { // rounded bottom border styling for csd version
3450
&.background {
3451
// bigger radius for better antialiasing
3452
border-bottom-left-radius: $corner-radius;
3453
border-bottom-right-radius: $corner-radius;
3454
}
3455
}
3456
// Hint text
3458
box.vertical > label + label {
3459
color: $text2;
3460
}
3461
.dialog-action-box {
3463
margin-top: -$container-padding;
3464
// padding: $container-padding;
3465
button:not(:last-child) {
3467
margin-right: $container-padding;
3468
}
3469
}
3470
}
3471
.dialog-action-box button {
3473
@extend %button-flat;
3474
&:not(:disabled) {
3476
@include ink-color($primary);
3477
}
3478
&.suggested-action:not(:disabled) {
3480
background-color: transparent;
3481
// @include ink-color($primary);
3482
}
3483
&.destructive-action:not(:disabled) {
3485
background-color: transparent;
3486
@include ink-color($error);
3487
}
3488
}
3489
filechooser {
3491
.dialog-action-box {
3492
border-top: 1px solid $divider;
3493
}
3494
#pathbarbox {
3496
border-bottom: 1px solid $divider;
3497
background-color: $background;
3498
> stack > box > button { // The new folder button
3500
@extend %button-flat;
3501
border-radius: $circular-radius;
3503
}
3504
}
3505
}
3506
filechooserbutton:drop(active) {
3508
// box-shadow: none;
3509
}
3510
/**
3512
* Sidebar
3513
*/
3514
.sidebar {
3516
border-style: none;
3517
background-color: $base-alt;
3518
&:not(separator) {
3520
@at-root %sidebar_left,
3521
&:dir(ltr),
3522
&.left,
3523
&.left:dir(rtl) {
3524
border-right: 1px solid $divider;
3525
border-left-style: none;
3526
}
3527
@at-root %sidebar_right,
3529
&:dir(rtl),
3530
&.right {
3531
border-left: 1px solid $divider;
3532
border-right-style: none;
3533
}
3534
}
3535
list {
3537
background-color: transparent;
3538
}
3539
paned & {
3541
&,
3542
&.left,
3543
&.right,
3544
&.left:dir(rtl),
3545
&:dir(rtl),
3546
&:dir(ltr) {
3547
border-style: none;
3548
}
3549
}
3550
}
3551
stacksidebar.sidebar {
3553
& {
3554
&:dir(ltr),
3555
&.left,
3556
&.left:dir(rtl) {
3557
list {
3558
@extend %sidebar_left;
3559
}
3560
}
3561
&:dir(rtl),
3563
&.right {
3564
list {
3565
@extend %sidebar_right;
3566
}
3567
}
3568
}
3569
+ separator.vertical,
3571
separator.horizontal {
3572
@extend %hide_separators;
3573
}
3574
list {
3576
padding: 4px;
3577
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3578
}
3579
row {
3581
min-height: 32px;
3582
padding: 0 8px - 6px;
3583
border-radius: $corner-radius;
3584
&:selected {
3586
background-color: overlay("activated", $primary);
3587
color: $primary;
3588
font-weight: 500;
3589
@include ink-color($primary);
3590
}
3591
+ row {
3593
margin-top: 4px;
3594
}
3595
> label {
3597
padding-left: 6px;
3598
padding-right: 6px;
3599
}
3600
&.needs-attention > label {
3602
@extend %needs-attention;
3603
}
3604
}
3605
}
3606
separator.sidebar {
3608
background-color: $divider;
3609
&.selection-mode,
3611
.selection-mode & {
3612
// background-color: $divider;
3613
}
3614
}
3615
/**
3617
* File chooser
3618
*/
3619
// dim the sidebar icons, see bug #786613 for details on this oddity
3621
row image.sidebar-icon {
3622
transition: color $duration $ease-out;
3623
color: $text2;
3624
&:disabled {
3626
color: $text2-disabled;
3627
}
3628
}
3629
placessidebar.sidebar {
3631
> viewport.frame {
3632
border-style: none;
3633
}
3634
list {
3636
padding: (4px - 3px) 0 4px;
3637
}
3638
row {
3640
// Needs overriding of the GtkListBoxRow padding
3641
min-height: 32px;
3642
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3643
padding: 0;
3644
border-radius: $corner-radius;
3645
// Using margins/padding directly in the SidebarRow
3647
// will make the animation of the new bookmark row jump
3648
> revealer {
3649
padding: 0 8px;
3650
}
3651
&:selected {
3653
background-color: overlay("activated", $primary);
3654
color: $primary;
3655
font-weight: 500;
3656
@include ink-color($primary);
3657
image.sidebar-icon {
3659
color: $primary;
3660
}
3661
}
3662
&:disabled {
3664
color: $text-disabled;
3665
}
3666
image.sidebar-icon {
3668
&:dir(ltr) {
3669
padding-right: 8px;
3670
}
3671
&:dir(rtl) {
3673
padding-left: 8px;
3674
}
3675
}
3676
label.sidebar-label {
3678
&:dir(ltr) {
3679
padding-right: 2px;
3680
}
3681
&:dir(rtl) {
3683
padding-left: 2px;
3684
}
3685
}
3686
@at-root button.sidebar-button {
3688
@extend %button-flat-basic;
3689
@extend %button-small;
3690
}
3691
&.sidebar-placeholder-row {
3693
background-color: overlay("hover", $text);
3694
}
3695
&.sidebar-new-bookmark-row {
3697
color: $primary;
3698
image.sidebar-icon {
3700
color: $primary;
3701
}
3702
}
3703
}
3704
}
3705
placesview {
3707
.server-list-button {
3708
> image {
3709
-gtk-icon-transform: rotate(0turn);
3710
}
3711
&:checked > image {
3713
-gtk-icon-transform: rotate(-.5turn);
3714
}
3715
}
3716
// this selects the "connect to server" label
3718
> actionbar > revealer > box > label {
3719
padding-left: 8px;
3720
padding-right: 8px;
3721
}
3722
}
3723
/**
3725
* Paned
3726
*/
3727
paned {
3729
> separator {
3730
min-width: 1px;
3731
min-height: 1px;
3732
-gtk-icon-source: none; // defeats the ugly default handle decoration
3733
border-style: none; // just to be sure
3734
background-color: transparent;
3735
// workaround, using background istead of a border since the border will get rendered twice (?)
3736
background-image: image($divider);
3737
background-size: 1px 1px;
3738
background-clip: content-box; // avoids borders image being rendered twice (?)
3739
&.wide {
3741
min-width: 6px;
3742
min-height: 6px;
3743
background-color: $background;
3744
background-image: image($divider), image($divider);
3745
background-size: 1px 1px, 1px 1px;
3746
}
3747
}
3748
&.horizontal > separator {
3750
background-repeat: repeat-y;
3751
&:dir(ltr) {
3753
margin: 0 -8px 0 0;
3754
padding: 0 8px 0 0;
3755
background-position: left;
3756
}
3757
&:dir(rtl) {
3759
margin: 0 0 0 -8px;
3760
padding: 0 0 0 8px;
3761
background-position: right;
3762
}
3763
&.wide {
3765
margin: 0;
3766
padding: 0;
3767
background-repeat: repeat-y, repeat-y;
3768
background-position: left, right;
3769
}
3770
}
3771
&.vertical > separator {
3773
margin: 0 0 -8px 0;
3774
padding: 0 0 8px 0;
3775
background-repeat: repeat-x;
3776
background-position: top;
3777
&.wide {
3779
margin: 0;
3780
padding: 0;
3781
background-repeat: repeat-x, repeat-x;
3782
background-position: bottom, top;
3783
}
3784
}
3785
}
3786
/**
3788
* GtkInfoBar
3789
*/
3790
infobar {
3792
border-style: none;
3793
&.info,
3795
&.question {
3796
border-bottom: 1px solid $divider;
3797
background-color: $base;
3798
button {
3800
@extend %button-flat;
3801
&.text-button:not(:disabled) {
3803
color: $primary;
3804
@include ink-color($primary);
3805
}
3806
}
3807
}
3808
&.warning {
3810
background-color: $warning;
3811
color: on($warning);
3812
button.flat {
3814
color: on($warning);
3815
@include ink-color(on($warning));
3816
}
3817
selection {
3819
}
3820
*:link {
3822
color: on($warning);
3823
}
3824
}
3825
&.error {
3827
background-color: $error;
3828
color: on($error);
3829
button.flat {
3831
color: on($error);
3832
@include ink-color(on($error));
3833
}
3834
selection {
3836
}
3837
*:link {
3839
color: on($error);
3840
}
3841
}
3842
// Remove ugly hard-coded padding
3844
button label {
3845
margin: 0 -4px;
3846
}
3847
}
3848
/**
3850
* Tooltips
3851
*/
3852
tooltip {
3854
&.background {
3855
// background-color needs to be set this way otherwise it gets drawn twice
3856
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3857
background-color: $tooltip;
3858
color: on($tooltip);
3859
}
3860
// padding: 4px; /* not working */
3862
border-radius: $corner-radius;
3863
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3864
&:not(.csd):not(.unity-csd) {
3866
// border: 1px solid $divider;
3867
// border-radius: $corner-radius + 1px;
3868
// background-clip: $background-clip-extra;
3869
}
3870
// FIXME: we need a border or tooltips vanish on black background.
3872
decoration {
3873
background-color: transparent;
3874
}
3875
> box {
3877
margin: -6px; // Remove hard-coded 6px margin
3878
min-height: 32px - 4px * 2;
3879
padding: 4px 8px;
3880
}
3881
.dim-label {
3883
color: on($tooltip, text2);
3884
}
3885
* {
3887
// workaround for Eclipse.
3888
// do not include any declaration here.
3889
}
3890
}
3891
/**
3893
* Color Chooser
3894
*/
3895
colorswatch {
3897
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3898
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3899
// applied to the overlay box.
3900
// base color corners rounding
3902
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3903
// sports a bigger radius.
3904
// nth-child is needed by the custom color strip.
3905
&.top {
3907
border-top-left-radius: $corner-radius + .5px;
3908
border-top-right-radius: $corner-radius + .5px;
3909
overlay {
3911
border-top-left-radius: $corner-radius;
3912
border-top-right-radius: $corner-radius;
3913
}
3914
}
3915
&.bottom {
3917
border-bottom-left-radius: $corner-radius + .5px;
3918
border-bottom-right-radius: $corner-radius + .5px;
3919
overlay {
3921
border-bottom-left-radius: $corner-radius;
3922
border-bottom-right-radius: $corner-radius;
3923
}
3924
}
3925
&.left,
3927
&:first-child:not(.top) {
3928
border-top-left-radius: $corner-radius + .5px;
3929
border-bottom-left-radius: $corner-radius + .5px;
3930
overlay {
3932
border-top-left-radius: $corner-radius;
3933
border-bottom-left-radius: $corner-radius;
3934
}
3935
}
3936
&.right,
3938
&:last-child:not(.bottom) {
3939
border-top-right-radius: $corner-radius + .5px;
3940
border-bottom-right-radius: $corner-radius + .5px;
3941
overlay {
3943
border-top-right-radius: $corner-radius;
3944
border-bottom-right-radius: $corner-radius;
3945
}
3946
}
3947
&.dark {
3949
color: on(dark);
3950
}
3951
&.light {
3953
color: on(light);
3954
}
3955
overlay {
3957
transition: $transition-shadow;
3958
box-shadow: $shadow-z1;
3959
&:drop(active),
3961
&:hover {
3962
box-shadow: $shadow-z3;
3963
}
3964
}
3965
&#add-color-button {
3967
border-radius: $corner-radius $corner-radius 0 0;
3968
color: $text;
3969
&:only-child {
3971
border-radius: $corner-radius;
3972
}
3973
overlay {
3975
background-color: $surface;
3976
}
3977
}
3978
&:disabled {
3980
opacity: .5;
3981
overlay {
3983
box-shadow: none;
3984
}
3985
}
3986
row:selected & {
3988
}
3989
&#editor-color-sample {
3991
border-radius: $corner-radius + .5px;
3992
overlay {
3994
border-radius: $corner-radius;
3995
&:hover {
3997
// box-shadow: $shadow-z1;
3998
}
3999
}
4000
}
4001
}
4002
// colorscale popup
4004
colorchooser .popover.osd {
4005
transition: $transition-shadow;
4006
border-radius: $corner-radius;
4007
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4008
background-color: $surface;
4009
&:backdrop {
4011
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4012
}
4013
}
4014
/**
4016
* Misc
4017
*/
4018
// content view (grid/list)
4020
.content-view {
4021
background-color: $background;
4022
&:hover {
4024
// -gtk-icon-effect: highlight;
4025
}
4026
rubberband,
4028
.rubberband {
4029
@extend rubberband;
4030
}
4031
}
4032
.scale-popup {
4034
.osd & {
4035
// @extend %osd;
4036
button.flat { // FIXME: quick hack, redo properly
4038
}
4039
}
4040
button { // +/- buttons on GtkVolumeButton popup
4042
}
4043
}
4044
/**
4046
* Window Decorations
4047
*/
4048
decoration {
4050
transition: $transition-shadow;
4051
border-radius: $corner-radius $corner-radius 0 0;
4052
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4053
// FIXME rationalize shadows
4055
// this is used for the resize cursor area
4057
margin: 8px;
4058
&:backdrop {
4060
// the transparent shadow here is to enforce that the shadow extents don't
4061
// change when we go to backdrop, to prevent jumping windows.
4062
// The biggest shadow should be in the same order then in the active state
4063
// or the jumping will happen during the transition.
4064
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4065
}
4066
.maximized &,
4068
.fullscreen &,
4069
.tiled &,
4070
.tiled-top &,
4071
.tiled-right &,
4072
.tiled-bottom &,
4073
.tiled-left & {
4074
border-radius: 0;
4075
}
4076
.popup & {
4078
box-shadow: none;
4079
}
4080
// server-side decorations as used by mutter
4082
.ssd & {
4083
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4084
}
4085
.csd.popup & {
4087
border-radius: $corner-radius;
4088
box-shadow: $shadow-z4;
4089
}
4090
tooltip.csd & {
4092
border-radius: $corner-radius;
4093
box-shadow: none;
4094
}
4095
messagedialog.csd & {
4097
border-radius: $corner-radius;
4098
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4099
&:backdrop {
4101
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4102
}
4103
}
4104
.solid-csd & {
4106
margin: 0;
4107
padding: 2px;
4108
border-radius: 0;
4109
box-shadow: none;
4110
box-shadow: inset 0 1px highlight($titlebar);
4111
background-color: $titlebar;
4112
&:backdrop {
4114
background-color: $titlebar-backdrop;
4115
}
4116
}
4117
}
4118
// Window Close button
4120
button.titlebutton {
4121
border-radius: $circular-radius;
4122
.selection-mode & {
4124
}
4125
}
4126
// catch all extend :)
4129
%selected_items {
4131
background-color: $overlay-selected;
4132
}
4133
.monospace {
4135
font-family: monospace;
4136
}
4137
/**
4139
* Touch Copy & Paste
4140
*/
4141
// touch selection handlebars for the Popover.osd above
4143
cursor-handle {
4144
color: $primary;
4145
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4146
&.top:dir(ltr),
4148
&.bottom:dir(rtl) {
4149
-gtk-icon-transform: rotate(90deg);
4150
}
4151
&.bottom:dir(ltr),
4153
&.top:dir(rtl) {
4154
-gtk-icon-transform: unset;
4155
}
4156
&.insertion-cursor:dir(ltr),
4158
&.insertion-cursor:dir(rtl) {
4159
padding-top: 6px;
4160
-gtk-icon-transform: rotate(45deg);
4161
}
4162
}
4163
// Decouple the font of context menus from their entry/textview
4165
.context-menu {
4166
font: initial;
4167
}
4168
// shortcut window keys
4170
.keycap {
4171
min-width: 28px - 8px * 2;
4172
min-height: 28px - 2px;
4173
margin-top: 2px;
4174
padding-bottom: 2px;
4175
padding-left: 8px;
4176
padding-right: 8px;
4177
border: solid 1px $divider;
4179
border-radius: $corner-radius + 1px;
4180
box-shadow: inset 0 -2px $divider;
4181
background-color: $surface;
4182
color: $text;
4183
font-size: smaller;
4184
}
4185
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4187
// caret-color: $primary;
4188
}
4189
stackswitcher button.text-button { // FIXME aggregate with buttons
4191
min-width: 100px;
4192
}
4193
stackswitcher button.circular,
4195
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4196
min-width: $medium-size;
4197
min-height: $medium-size;
4198
padding: 0;
4199
}
4200
/**
4202
* App Icons
4203
*/
4204
// Outline for low res icons
4206
.lowres-icon {
4207
// -gtk-icon-shadow: none;
4208
}
4209
// Drapshadow for large icons
4211
.icon-dropshadow {
4212
// -gtk-icon-shadow: none;
4213
}
4214
/**
4216
* Emoji
4217
*/
4218
popover.emoji-picker {
4220
padding: 0;
4221
entry {
4223
border-bottom: 1px solid $divider;
4224
border-image: none;
4225
border-radius: 0;
4226
box-shadow: none;
4227
background-color: transparent;
4228
}
4229
scrolledwindow {
4231
border-bottom: 1px solid $divider;
4232
}
4233
}
4234
button.emoji-section {
4236
margin: 4px;
4237
&:checked {
4239
background-color: overlay("activated", $primary);
4240
color: $primary;
4241
@include ink-color($primary);
4242
}
4243
&:not(:last-child) {
4245
margin-right: 0;
4246
}
4247
}
4248
popover.emoji-picker .emoji {
4250
min-width: 3em;
4251
min-height: 3em;
4252
padding: 0 8px;
4253
// font-size: larger;
4254
widget {
4256
transition: $transition;
4257
border-radius: $corner-radius;
4258
&:hover {
4260
background-color: overlay("hover", $text);
4261
}
4262
}
4263
}
4264
popover.emoji-completion {
4266
padding: 8px 0;
4267
arrow {
4269
border: none;
4270
background: none;
4271
}
4272
.emoji-completion-row {
4274
min-height: $menuitem-size;
4275
padding: 0 12px;
4276
}
4277
.emoji:hover {
4279
background-color: overlay("hover", $text);
4280
}
4281
}
4282