Unicode text, UTF-8 text
1
/**
2
* Base States
3
*/
4
.background {
6
background-color: $surface-z0;
7
color: $on-surface;
8
}
9
dnd {
11
color: $on-surface;
12
}
13
.normal-icons {
15
-gtk-icon-size: 16px;
16
}
17
.large-icons {
19
-gtk-icon-size: 32px;
20
}
21
image:disabled {
23
-gtk-icon-filter: opacity(0.5);
24
}
25
.view {
27
// background-color: $surface-z1;
28
// color: $on-surface;
29
> .cell:hover {
31
background-color: overlay("hover-alt", $on-surface);
32
}
33
&:disabled {
35
color: disabled($on-surface);
36
}
37
&:selected {
39
background-color: $overlay-selected;
40
}
41
> .cell:selected:hover {
43
background-color: overlay("hover-alt", $primary, $on: $overlay-selected);
44
}
45
}
46
textview {
48
caret-color: $primary;
49
> text {
51
> selection {
52
background-color: $overlay-selected;
53
}
54
}
55
> border {
57
// background-color: $surface-z1-alt;
58
color: hint($on-surface); // FIXME: not working
59
}
60
}
61
iconview {
63
> .cell {
64
border-radius: $corner-radius;
65
}
66
&:drop(active) {
68
// box-shadow: none;
69
}
70
> dndtarget:drop(active) {
72
box-shadow: inset 0 0 0 2px $primary;
73
}
74
}
75
%iconview-desktop {
77
// background-color: $scrim;
78
color: $on-dark;
79
text-shadow: $text-shadow;
80
> rubberband {
82
border: 1px solid primary($on-dark);
83
background-color: rgba(primary($on-dark), .24);
84
}
85
}
86
rubberband {
88
border: 1px solid $primary;
89
background-color: rgba($primary, .24);
90
}
91
flowbox {
93
padding: 4px;
94
border-spacing: 4px;
95
> flowboxchild {
97
padding: 4px;
98
border-radius: $corner-radius;
99
@extend %ripple;
101
@include ink-color($on-surface, $hover-alt: true);
102
&:selected {
104
background-color: $overlay-selected;
105
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
107
}
108
}
109
}
110
gridview {
112
padding: 4px;
113
border-spacing: 4px;
114
> child {
116
padding: 4px;
117
border-radius: $corner-radius;
118
@extend %ripple;
120
@include ink-color($on-surface, $hover-alt: true);
121
&:selected {
123
background-color: $overlay-selected;
124
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
126
}
127
}
128
}
129
coverflow > cover {
131
box-shadow: $shadow-z2;
132
background-color: $surface-z8;
133
color: $on-surface;
134
}
135
.content-view .tile {
137
// margin: 2px;
138
// padding: 0;
139
// border-radius: 0;
140
// background-color: black;
141
&:selected {
143
background-color: transparent;
144
}
145
}
146
label {
148
caret-color: $primary;
149
&.separator {
151
color: hint($on-surface);
152
}
153
&.error {
155
color: $error;
156
}
157
> selection {
159
background-color: $overlay-selected;
160
}
161
&:disabled {
163
color: disabled($on-surface);
164
headerbar &,
166
modelbutton &,
167
tab &,
168
button & {
169
color: inherit;
170
}
171
}
172
&.osd {
174
border-radius: $corner-radius;
175
background-color: $tooltip;
176
color: $on-tooltip;
177
}
178
}
179
.dim-label {
181
color: hint($on-surface);
182
}
183
window.assistant {
185
.sidebar {
186
padding: 4px 0;
187
> label {
189
min-height: $medium-size;
190
padding: 0 12px;
191
color: disabled($on-surface);
192
font-weight: 500;
193
&.highlight {
195
color: $on-surface;
196
}
197
}
198
}
199
}
200
window.aboutdialog > box > box > image.large-icons {
202
-gtk-icon-size: 128px;
203
}
204
%osd,
206
.osd {
207
// opacity: .9;
208
}
209
/**
211
* Spinner Animation
212
*/
213
@keyframes spin {
215
to {
216
transform: rotate(1turn);
217
}
218
}
219
spinner {
221
// background: none;
222
opacity: 0; // non spinning spinner makes no sense
223
color: $primary;
224
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
225
transition: opacity $duration * 4 $ease-out;
226
animation: spin 1s linear infinite;
227
&:checked {
229
opacity: 1;
230
}
231
&:disabled {
233
color: disabled-hint($on-surface);
234
}
235
}
236
/**
238
* General Typography
239
*/
240
@function pt($size: $font-size) {
242
@return ($size * .75 / 1px) * 1pt;
243
}
244
.large-title {
246
font-weight: 400;
247
font-size: pt(48px);
248
}
249
.title-1 {
251
font-weight: 400;
252
font-size: pt(34px);
253
letter-spacing: pt(.25px);
254
}
255
.title-2 {
257
font-weight: 400;
258
font-size: pt(24px);
259
}
260
.title-3 {
262
font-weight: 500;
263
font-size: pt(20px);
264
letter-spacing: pt(.15px);
265
}
266
.title-4 {
268
font-weight: 400;
269
font-size: pt(16px);
270
letter-spacing: pt(.5px);
271
}
272
.heading {
274
font-weight: 500;
275
font-size: 1em;
276
}
277
.body {
279
font-weight: 400;
280
font-size: 1em;
281
}
282
.caption-heading {
284
font-weight: 500;
285
font-size: pt(12px);
286
letter-spacing: pt(1.5px);
287
}
288
.caption {
290
font-weight: 400;
291
font-size: pt(12px);
292
letter-spacing: pt(.4px);
293
}
294
/**
296
* Text Entries
297
*/
298
%entry,
300
entry {
301
min-height: $medium-size;
302
padding: 0 8px;
303
border-spacing: $container-padding;
304
border-radius: $corner-radius $corner-radius 0 0;
305
@include entry(normal);
307
&:hover,
309
&:drop(active) {
310
@include entry(hover);
311
}
312
&:focus-within {
314
@include entry(checked);
315
> text > placeholder {
317
opacity: 0;
318
}
319
}
320
&:disabled {
322
@include entry(disabled);
323
}
324
&.flat {
326
min-height: 0;
327
padding: 2px;
328
border-radius: 0;
329
background-color: transparent;
330
}
331
> text {
333
> placeholder {
334
color: hint($on-surface);
335
}
336
> selection {
338
background-color: $overlay-selected;
339
}
340
> block-cursor {
342
background-color: $primary;
343
color: $on-primary;
344
}
345
> undershoot {
347
&.left {
348
// @include undershoot(left);
349
}
350
&.right {
352
// @include undershoot(right);
353
}
354
}
355
}
356
// icons inside the entry
358
> image {
359
min-width: $small-size;
360
min-height: $small-size;
361
border-radius: $circular-radius;
362
@extend %ripple;
363
@include ink-color($on-surface);
364
color: hint($on-surface);
365
margin-top: $container-padding;
366
margin-bottom: $container-padding;
367
&:disabled {
369
color: disabled($on-surface);
370
}
371
&.left {
373
margin-left: ($medium-size - $small-size) / 2 - 8px;
374
}
375
&.right {
377
margin-right: ($medium-size - $small-size) / 2 - 8px;
378
}
379
}
380
&.password > image.caps-lock-indicator {
382
}
383
// entry error and warning style
385
@each $class, $color in (".error": $error, ".warning": $warning) {
386
&#{$class} {
387
@include entry(normal, $color);
388
&:focus-within {
390
@include entry(checked, $color);
391
}
392
&:disabled {
394
@include entry(disabled, $color);
395
}
396
}
397
}
398
.osd & {
400
}
401
> progress > trough > progress {
403
margin: 0 -8px;
404
margin-bottom: -4px;
405
border-bottom: 2px solid $primary;
406
background-color: transparent;
407
}
408
// linked entries
410
.linked:not(.vertical) > & {
411
// @extend %linked;
412
}
413
// Vertically linked entries
415
.linked.vertical > & {
416
// @extend %linked-vertical;
417
}
418
}
419
%entry_raised {
421
border-radius: $corner-radius;
422
@include entry(raised-normal);
424
&:focus-within {
426
@include entry(raised-focus);
427
}
428
&:drop(active) {
430
@include entry(raised-hover);
431
}
432
&:disabled {
434
@include entry(raised-disabled);
435
}
436
// entry error and warning style
438
@each $class, $color in (".error": $error, ".warning": $warning) {
439
&#{$class} {
440
@include entry(raised-normal, $color);
441
&:focus-within {
443
@include entry(raised-focus, $color);
444
}
445
&:disabled {
447
@include entry(raised-disabled, $color);
448
}
449
image {
451
color: hint(on($color));
452
&:hover,
454
&:active {
455
color: on($color);
456
}
457
&:disabled {
459
color: disabled(on($color));
460
}
461
}
462
}
463
}
464
}
465
treeview entry {
467
&,
468
&.flat {
469
background-color: $surface-z1;
470
&,
472
&:focus-within {
473
border-image: none;
474
box-shadow: none;
475
}
476
}
477
}
478
.entry-tag {
480
margin: 2px;
481
border-radius: $circular-radius;
482
box-shadow: none;
483
background-color: fill($on-surface);
484
color: $on-surface;
485
&:hover {
487
background-image: image(overlay("hover", $on-surface));
488
}
489
// side margins: compensate the entry padding with a negative margin
491
// then the negative margin itself
492
:dir(ltr) & {
493
margin-left: 4px;
494
margin-right: 0;
495
padding-left: 12px;
496
padding-right: 8px;
497
}
498
:dir(rtl) & {
500
margin-left: 0;
501
margin-right: 4px;
502
padding-left: 8px;
503
padding-right: 12px;
504
}
505
// seems any sizing doesn't work
507
&.button {
508
box-shadow: none;
509
background-color: transparent;
510
color: hint($on-surface);
511
}
512
}
513
/**
515
* Buttons
516
*/
517
// stuff for .needs-attention
519
@keyframes needs-attention {
520
from {
521
background-image: radial-gradient(farthest-side, $primary 0%, transparent 0%);
522
}
523
to {
525
background-image: radial-gradient(farthest-side, $primary 100%, transparent 100%);
526
}
527
}
528
%button,
530
button {
531
min-height: 24px;
532
min-width: 16px;
533
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
534
border-radius: $corner-radius;
535
background-color: $surface-z8;
536
color: $on-surface;
537
font-weight: 500;
538
@extend %ripple;
540
@include ink-color($on-surface, $on: $surface-z8, $button-style: "raised");
541
&:disabled {
543
box-shadow: none;
544
background-color: fill($on-surface);
545
color: disabled($on-surface);
546
}
547
&:checked {
549
$background-color: overlay("activated", $primary, $on: $surface-z8);
550
color: $primary;
551
@include ink-color($primary, $on: $background-color, $button-style: "raised");
552
&:disabled {
554
box-shadow: none;
555
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
556
color: disabled($on-surface);
557
}
558
}
559
&.text-button {
561
min-width: 64px - 16px * 2;
562
padding-left: 16px;
563
padding-right: 16px;
564
}
565
&.image-button {
567
min-width: 24px;
568
padding: ($medium-size - 24px) / 2;
569
border-radius: $circular-radius;
570
}
571
// NOTE: Some image-only buttons use this as well
573
&.text-button.image-button {
574
min-width: 64px - 16px * 2;
575
padding-left: 16px;
576
padding-right: 16px;
577
// min-width: 24px;
578
// padding: ($medium-size - 24px) / 2;
579
border-radius: $corner-radius;
580
label {
582
&:first-child {
583
// margin-left: 16px - ($medium-size - 24px) / 2;
584
}
585
&:last-child {
587
// margin-right: 16px - ($medium-size - 24px) / 2;
588
}
589
}
590
image:not(:only-child) {
592
// margin: 0 (24px - 16px) / 2;
593
}
594
image {
596
&:first-child {
597
margin-left: 12px - 16px;
598
margin-right: 8px;
599
}
600
&:last-child {
602
margin-left: 8px;
603
margin-right: 12px - 16px;
604
}
605
}
606
}
607
.linked:not(.vertical) > & {
609
// @extend %linked;
610
&.image-button:not(.text-button) {
612
// @extend %linked-image-button;
613
}
614
}
615
.linked.vertical > & {
617
// @extend %linked-vertical;
618
&.image-button:not(.text-button) {
620
// @extend %linked-vertical-image-button;
621
}
622
}
623
}
624
%button-outlined {
626
background-color: transparent;
627
@include ink-color($on-surface, $hover-alt: true, $button-style: "outlined");
628
}
629
%button-flat-basic {
631
background-color: transparent;
632
color: hint($on-surface);
633
@include ink-color($on-surface, $button-style: "flat");
634
&:disabled {
636
background-color: transparent;
637
color: disabled-hint($on-surface);
638
}
639
}
640
%button-flat-activatable {
642
@extend %button-flat-basic;
643
&:checked {
645
$background-color: overlay("activated", $primary);
646
color: $primary;
647
@include ink-color($primary, $on: $background-color, $button-style: "flat");
648
&:disabled {
650
color: disabled($on-surface);
651
}
652
}
653
}
654
%button-flat,
656
button.flat {
657
@extend %button-flat-activatable;
658
&.text-button {
660
min-width: 64px - 8px * 2;
661
padding-left: 8px;
662
padding-right: 8px;
663
}
664
&.text-button.image-button {
666
min-width: 24px;
667
padding: ($medium-size - 24px) / 2;
668
label {
670
&:first-child {
671
margin-left: 12px - ($medium-size - 24px) / 2;
672
}
673
&:last-child {
675
margin-right: 12px - ($medium-size - 24px) / 2;
676
}
677
}
678
}
679
.linked:not(.vertical) > &,
681
.linked.vertical > & {
682
&:not(:only-child) { // specificity bump
683
border-radius: $corner-radius;
684
&.image-button:not(.text-button) {
686
border-radius: $circular-radius;
687
}
688
}
689
}
690
}
691
button {
693
// big standalone buttons like in Documents pager
694
&.osd {
695
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
696
&.image-button {
698
padding: ($large-size - 24px) / 2;
699
}
700
&:disabled {
702
opacity: 0;
703
}
704
}
705
// overlay / OSD style
707
@at-root %osd_button,
708
.osd & {
709
}
710
// Suggested and Destructive Action buttons
712
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
713
&#{$class} {
714
background-color: $color;
715
color: on($color);
716
@include ink-color(on($color), $on: $color, $button-style: "raised");
717
&:disabled {
719
box-shadow: none;
720
background-color: fill($on-surface);
721
color: disabled($on-surface);
722
}
723
&:checked {
725
background-color: overlay("activated", on($color), $on: $color);
726
}
727
&.flat {
729
background-color: transparent;
730
@include ink-color($color);
731
&:disabled {
733
box-shadow: none;
734
background-color: transparent;
735
color: disabled-hint($on-surface);
736
}
737
&:checked {
739
background-color: overlay("activated", $color);
740
}
741
}
742
.osd & {
744
}
745
}
746
}
747
stackswitcher > & {
749
// to position the needs attention dot, padding is added to the button
750
// child, a label needs just lateral padding while an icon needs vertical
751
// padding added too.
752
> label {
754
margin: 0 -6px;
755
padding: 0 6px;
756
}
757
> image {
759
margin: -3px -6px;
760
padding: 3px 6px;
761
}
762
&.needs-attention {
764
> label,
765
> image {
766
@extend %needs-attention;
767
}
768
&:checked {
770
> label,
771
> image {
772
animation: none;
773
background-image: none;
774
}
775
}
776
}
777
}
778
&.font > box {
780
border-spacing: 6px;
781
> box {
783
> separator {
784
@extend %hide_separators;
785
}
786
> label {
788
// font-weight: bold;
789
}
790
}
791
}
792
// force circular button shape
794
&.close,
795
&.circular {
796
border-radius: $circular-radius;
797
}
798
}
799
%button-small {
801
min-height: $small-size;
802
min-width: $small-size;
803
padding: 0;
804
border-radius: $circular-radius;
805
}
806
%needs-attention {
808
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
809
background-repeat: no-repeat;
810
background-position: right 3px;
811
background-size: 6px 6px;
812
&:dir(rtl) {
814
background-position: left 3px;
815
}
816
}
817
.linked:not(stackswitcher) {
819
border-spacing: $container-padding;
820
}
821
.linked:not(.vertical) > button.radio {
823
border-radius: 0;
824
&:first-child {
826
border-top-left-radius: $corner-radius;
827
border-bottom-left-radius: $corner-radius;
828
}
829
&:last-child {
831
border-top-right-radius: $corner-radius;
832
border-bottom-right-radius: $corner-radius;
833
}
834
&:not(:first-child) {
836
margin-left: -$container-padding;
837
}
838
}
839
.linked.vertical > button.radio {
841
border-radius: 0;
842
&:first-child {
844
border-top-left-radius: $corner-radius;
845
border-top-right-radius: $corner-radius;
846
}
847
&:last-child {
849
border-bottom-left-radius: $corner-radius;
850
border-bottom-right-radius: $corner-radius;
851
}
852
&:not(:first-child) {
854
margin-top: -$container-padding;
855
}
856
}
857
%linked-not-first-child {
859
border-top-left-radius: 0;
860
border-bottom-left-radius: 0;
861
}
862
%linked-not-last-child {
864
border-top-right-radius: 0;
865
border-bottom-right-radius: 0;
866
}
867
%linked {
869
&:not(:first-child) {
870
@extend %linked-not-first-child;
871
}
872
&:not(:last-child) {
874
@extend %linked-not-last-child;
875
}
876
}
877
%linked-vertical-not-first-child {
879
border-top-left-radius: 0;
880
border-top-right-radius: 0;
881
}
882
%linked-vertical-not-last-child {
884
border-bottom-left-radius: 0;
885
border-bottom-right-radius: 0;
886
}
887
%linked-vertical {
889
&:not(:first-child) {
890
@extend %linked-vertical-not-first-child;
891
}
892
&:not(:last-child) {
894
@extend %linked-vertical-not-last-child;
895
}
896
}
897
%linked-image-button {
899
&:first-child {
900
border-top-left-radius: $corner-radius;
901
border-bottom-left-radius: $corner-radius;
902
}
903
&:last-child {
905
border-top-right-radius: $corner-radius;
906
border-bottom-right-radius: $corner-radius;
907
}
908
&:only-child {
910
border-radius: $circular-radius;
911
}
912
}
913
%linked-vertical-image-button {
915
&:first-child {
916
border-top-left-radius: $corner-radius;
917
border-top-right-radius: $corner-radius;
918
}
919
&:last-child {
921
border-bottom-left-radius: $corner-radius;
922
border-bottom-right-radius: $corner-radius;
923
}
924
&:only-child {
926
border-radius: $circular-radius;
927
}
928
}
929
/* menu buttons */
931
modelbutton.flat {
932
// min-height: $menuitem-size;
933
// padding: 0 8px;
934
// border-radius: $corner-radius;
935
@extend %ripple;
937
@include ink-color($on-surface);
938
&:selected {
940
// background-color: $overlay-selected;
941
}
942
}
943
modelbutton.flat arrow {
945
min-width: 16px;
946
min-height: 16px;
947
color: hint($on-surface);
948
&:disabled {
950
color: disabled-hint($on-surface);
951
}
952
&.left {
954
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
955
}
956
&.right {
958
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
959
}
960
}
961
button.color {
963
min-width: $small-size;
964
min-height: $small-size;
965
padding: $container-padding;
966
}
967
/**
969
* Links
970
*/
971
link {
973
color: $primary;
974
&:visited {
976
color: $visited;
977
}
978
}
979
button.link {
981
color: $primary;
982
@include ink-color($primary);
983
&:visited {
985
color: $visited;
986
@include ink-color($visited);
987
}
988
> label {
990
text-decoration-line: underline;
991
}
992
}
993
/**
995
* GtkSpinButton
996
*/
997
spinbutton {
999
font-feature-settings: "tnum";
1000
&:not(.vertical) {
1002
// in this horizontal configuration, the whole spinbutton
1003
// behaves as the entry, so we extend the entry styling
1004
// and nuke the style on the internal entry
1005
@extend %entry;
1006
> text {
1008
min-width: 32px;
1009
}
1010
> button {
1012
@extend %button-flat-basic;
1013
@extend %button-small;
1014
margin: $container-padding 0;
1016
&.up:dir(ltr),
1018
&.down:dir(rtl) {
1019
// margin-left: $container-padding / 2;
1020
}
1021
&.up:dir(rtl),
1023
&.down:dir(ltr) {
1024
// margin-right: $container-padding / 2;
1025
}
1026
&.up:dir(ltr) {
1028
margin-right: ($medium-size - $small-size) / 2 - 8px;
1029
}
1030
&.up:dir(rtl) {
1032
margin-left: ($medium-size - $small-size) / 2 - 8px;
1033
}
1034
}
1035
}
1036
// OSD horizontal
1038
.osd &:not(.vertical) {
1039
}
1040
// Vertical
1042
&.vertical {
1043
// in the vertical configuration, we treat the spinbutton
1044
// as a box, and tweak the style of the entry in the middle
1045
// so that it's linked
1046
> text {
1048
@extend %entry_raised;
1049
min-height: $medium-size;
1051
min-width: $large-size;
1052
padding: 0;
1053
> selection {
1055
background-color: $overlay-selected;
1056
}
1057
}
1058
button {
1060
min-height: $medium-size;
1061
min-width: $large-size;
1062
padding: 0;
1063
@extend %button-flat-basic;
1065
// Remove unwanted focus indicator
1067
&:focus:not(:hover):not(:active) {
1068
box-shadow: inset 0 0 0 9999px transparent;
1069
}
1070
&.up {
1072
border-radius: $corner-radius $corner-radius 0 0;
1073
}
1074
&.down {
1076
border-radius: 0 0 $corner-radius $corner-radius;
1077
}
1078
}
1079
}
1080
// OSD vertical
1082
.osd &.vertical {
1083
}
1084
// Misc
1086
treeview &:not(.vertical) {
1087
min-height: 0;
1088
border-style: none;
1089
border-radius: 0;
1090
> text {
1092
min-height: 0;
1093
padding: 1px 2px;
1094
}
1095
}
1096
}
1097
/**
1099
* ComboBoxes
1100
*/
1101
dropdown,
1103
combobox {
1104
arrow {
1105
min-width: 16px;
1106
min-height: 16px;
1107
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1108
transition: -gtk-icon-transform $duration $ease-out;
1109
}
1110
button:checked arrow {
1112
color: $primary;
1113
-gtk-icon-transform: rotate(-.5turn);
1114
}
1115
}
1116
dropdown {
1118
> button > box {
1119
border-spacing: 6px;
1120
}
1121
> popover.menu > contents {
1123
// allow search entries with no padding
1124
padding: 0;
1125
listview {
1127
padding: 6px 0;
1128
> row {
1130
min-height: 32px - 4px * 2;
1131
padding: 4px 8px;
1132
&:selected {
1134
background-color: overlay("focus", $on-surface);
1135
}
1136
}
1137
}
1138
}
1139
}
1140
// drodowns with searchboxes on top
1142
.dropdown-searchbar {
1143
border-bottom: 1px solid divider($on-surface);
1144
> entry.search {
1146
border-image: none;
1147
border-radius: 0;
1148
box-shadow: none;
1149
background-color: transparent;
1150
}
1151
}
1152
combobox {
1154
> box > button > box {
1155
border-spacing: 6px;
1156
}
1157
cellview {
1159
margin: -2px;
1160
}
1161
// align menu labels with the button label
1163
> popover.menu > contents modelbutton {
1164
padding-left: 8px;
1165
padding-right: 8px;
1166
}
1167
> .linked:not(.vertical) > entry:not(:only-child) {
1169
// border-radius: $corner-radius $corner-radius 0 0;
1170
&:first-child {
1172
margin-right: -($medium-size + $container-padding);
1173
padding-right: $medium-size;
1174
}
1175
&:last-child {
1177
margin-left: -($medium-size + $container-padding);
1178
padding-left: $medium-size;
1179
}
1180
}
1181
> .linked:not(.vertical) > button:not(:only-child) {
1183
@extend %button-flat-activatable;
1184
// @extend %button-small;
1185
min-height: 16px;
1187
min-width: 16px;
1188
margin: ($medium-size - $small-size) / 2;
1189
padding: ($small-size - 16px) / 2;
1190
border-radius: $circular-radius;
1191
}
1192
}
1193
// the combo is a composite widget so the way we do button linking doesn't
1195
// work, special case needed. See
1196
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1197
.linked:not(.vertical) > combobox {
1199
&:not(:first-child) > box > button.combo {
1200
// @extend %linked-not-first-child;
1201
}
1202
&:not(:last-child) > box > button.combo {
1204
// @extend %linked-not-last-child;
1205
}
1206
}
1207
.linked.vertical > combobox {
1209
&:not(:first-child) > box > button.combo {
1210
// @extend %linked-vertical-not-first-child;
1211
}
1212
&:not(:last-child) > box > button.combo {
1214
// @extend %linked-vertical-not-last-child;
1215
}
1216
}
1217
dropdown > button.toggle,
1219
button.combo:only-child {
1220
padding-left: 8px;
1221
padding-right: 8px;
1222
border-radius: $corner-radius $corner-radius 0 0;
1223
font-weight: normal;
1224
@include entry(normal);
1226
&:focus {
1228
@include entry(focus);
1229
}
1230
&:drop(active),
1232
&:hover {
1233
@include entry(hover);
1234
}
1235
&:checked {
1237
@include entry(checked);
1238
}
1239
&:disabled {
1241
@include entry(disabled);
1242
}
1243
arrow {
1245
transition: color $duration $ease-out;
1246
color: hint($on-surface);
1247
&:disabled {
1249
color: disabled-hint($on-surface);
1250
}
1251
}
1252
}
1253
/**
1255
* Toolbars
1256
*/
1257
.toolbar {
1259
padding: 4px;
1260
border-spacing: 4px;
1261
&.top { border-bottom: 1px solid divider($on-surface); }
1263
&.bottom { border-top: 1px solid divider($on-surface); }
1264
&.start { border-right: 1px solid divider($on-surface); }
1265
&.end { border-left: 1px solid divider($on-surface); }
1266
button {
1268
@extend %button-flat;
1269
}
1270
// on OSD
1272
.osd & {
1273
}
1274
// stand-alone OSD toolbars
1276
&.osd {
1277
@extend %toolbar-osd;
1278
// positional classes for `attached` osd toolbars
1280
&.left,
1281
&.right,
1282
&.top,
1283
&.bottom {
1284
border-radius: 0;
1285
}
1286
&.bottom {
1288
box-shadow: none;
1289
background-color: transparent;
1290
background-image:
1291
linear-gradient(
1292
to bottom,
1293
transparent,
1294
rgba(black, .1) 30%,
1295
rgba(black, .2) 50%,
1296
rgba(black, .4)
1297
);
1298
}
1299
}
1300
// toolbar separators
1302
&.horizontal > separator {
1303
margin: 4px 0;
1304
}
1305
&.vertical > separator {
1307
margin: 0 4px;
1308
}
1309
}
1310
%toolbar-osd {
1312
transition: $transition-shadow;
1313
padding: $container-padding;
1314
border-spacing: $container-padding;
1315
border-radius: $corner-radius;
1316
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
1317
background-color: $surface-z8;
1318
&:backdrop {
1320
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
1321
}
1322
}
1323
// searchbar, location-bar & inline-toolbar
1325
.inline-toolbar {
1326
padding: $container-padding;
1327
border-style: solid;
1328
border-width: 0 1px 1px;
1329
border-color: divider($on-surface);
1330
background-color: $surface-z1;
1331
}
1332
searchbar > revealer > box {
1334
padding: $container-padding;
1335
border-spacing: $container-padding;
1336
border-bottom: 1px solid divider($on-surface);
1337
}
1338
/**
1340
* Title buttons
1341
*/
1342
windowcontrols {
1344
border-spacing: $container-padding;
1345
&:not(:only-child):not(.empty) {
1347
border-image:
1348
linear-gradient(
1349
to bottom,
1350
transparent 12px,
1351
divider($on-titlebar) 12px,
1352
divider($on-titlebar) calc(100% - 12px),
1353
transparent calc(100% - 12px)
1354
) 1;
1355
&.start:dir(ltr),
1357
&.end:dir(rtl) {
1358
padding-right: $container-padding;
1359
border-right: 1px solid;
1360
}
1361
&.start:dir(rtl),
1363
&.end:dir(ltr) {
1364
padding-left: $container-padding;
1365
border-left: 1px solid;
1366
}
1367
}
1368
button {
1370
}
1371
}
1372
/**
1374
* Header bars
1375
*/
1376
.titlebar {
1378
transition: background-color $duration $ease-out, color $duration $ease-out;
1379
border-radius: $corner-radius $corner-radius 0 0;
1380
box-shadow: $shadow-z2, inset 0 1px highlight($titlebar);
1381
background-color: $titlebar;
1382
color: $on-titlebar;
1383
&:disabled {
1385
color: disabled($on-titlebar);
1386
}
1387
&:backdrop {
1389
background-color: $titlebar-backdrop;
1390
color: hint($on-titlebar);
1391
&:disabled {
1393
color: disabled-hint($on-titlebar);
1394
}
1395
}
1396
box.start,
1398
box.end {
1399
border-spacing: $container-padding;
1400
}
1401
.title {
1403
padding-left: 12px;
1404
padding-right: 12px;
1405
font-weight: bold;
1406
}
1407
.subtitle {
1409
padding-left: 12px;
1410
padding-right: 12px;
1411
font-size: smaller;
1412
}
1413
.subtitle,
1415
.dim-label {
1416
transition: color $duration $ease-out;
1417
color: hint($on-titlebar);
1418
&:backdrop {
1420
color: disabled($on-titlebar);
1421
}
1422
}
1423
// The separator for split headerbars
1425
headerbar + separator {
1426
background-color: divider($on-titlebar);
1427
}
1428
entry {
1430
box-shadow: inset 0 -1px stroke($on-titlebar);
1431
background-color: entry-fill($on-titlebar);
1432
color: $on-titlebar;
1433
&:disabled {
1435
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1436
background-color: entry-fill($on-titlebar);
1437
color: disabled($on-titlebar);
1438
}
1439
image {
1441
color: hint($on-titlebar);
1442
&:hover,
1444
&:active {
1445
color: $on-titlebar;
1446
}
1447
&:disabled {
1449
color: disabled($on-titlebar);
1450
}
1451
}
1452
}
1453
.linked:not(.vertical) > entry:not(:only-child) {
1455
border-radius: $corner-radius $corner-radius 0 0;
1456
}
1457
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1459
@extend %button-flat;
1460
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1462
$titlebar-indicator 0%,
1463
transparent 0%)
1464
0 0 0 / 0 0 0px;
1465
background-color: transparent;
1466
color: hint($on-titlebar);
1467
@include ink-color($on-titlebar);
1468
&:disabled {
1470
color: disabled-hint($on-titlebar);
1471
}
1472
@at-root %titlebar-button-checked,
1474
&:checked {
1475
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1476
$titlebar-indicator 100%,
1477
transparent 100%)
1478
0 0 2 / 0 0 2px;
1479
background-color: transparent;
1480
color: $on-titlebar;
1481
@include ink-color($on-titlebar);
1482
&:disabled {
1484
background-color: transparent;
1485
color: disabled($on-titlebar);
1486
}
1487
}
1488
&:backdrop {
1490
color: disabled($on-titlebar);
1491
&:disabled {
1493
color: disabled-hint($on-titlebar);
1494
}
1495
&:checked {
1497
color: hint($on-titlebar);
1498
&:disabled {
1500
color: disabled-hint($on-titlebar);
1501
}
1502
}
1503
}
1504
}
1505
button.suggested-action,
1507
button.destructive-action {
1508
&:disabled {
1509
background-color: fill($on-titlebar);
1510
color: disabled($on-titlebar);
1511
}
1512
}
1513
// FIXME: Ugly overriding
1515
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1516
min-width: 120px - 8px * 2;
1517
}
1518
// FIXME: Ugly overriding
1520
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1521
min-width: 0;
1522
padding-left: ($medium-size - 24px) / 2;
1523
padding-right: ($medium-size - 24px) / 2;
1524
}
1525
&.selection-mode {
1527
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1528
// but let's keep it for backwards compatibility.
1529
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1530
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1531
box-shadow: $shadow-z2, inset 0 1px highlight($primary);
1532
background-color: $primary;
1533
color: $on-primary;
1534
&:backdrop {
1536
color: hint($on-primary);
1537
}
1538
.subtitle:link {
1540
color: $on-primary;
1541
}
1542
button:not(.suggested-action):not(.destructive-action) {
1544
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1545
currentColor 0%,
1546
transparent 0%)
1547
0 0 0 / 0 0 0px;
1548
color: $on-primary;
1549
&:disabled {
1551
color: disabled($on-primary);
1552
}
1553
&:checked {
1555
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1556
currentColor 100%,
1557
transparent 100%)
1558
0 0 2 / 0 0 2px;
1559
color: $on-primary;
1560
&:disabled {
1562
color: disabled($on-primary);
1563
}
1564
}
1565
&:backdrop {
1567
color: hint($on-primary);
1568
&:disabled {
1570
color: disabled-hint($on-primary);
1571
}
1572
&:checked {
1574
color: hint($on-primary);
1575
&:disabled {
1577
color: disabled-hint($on-primary);
1578
}
1579
}
1580
}
1581
}
1582
.selection-menu {
1584
padding-left: 16px;
1585
padding-right: 16px;
1586
.arrow {
1588
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1589
}
1590
}
1591
}
1592
.selection-mode {
1594
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1595
background-color: $primary;
1596
}
1597
// squared corners when the window is maximized, tiled, or fullscreen
1599
.tiled &,
1600
.tiled-top &,
1601
.tiled-right &,
1602
.tiled-bottom &,
1603
.tiled-left &,
1604
.maximized &,
1605
.fullscreen & {
1606
border-radius: 0;
1607
box-shadow: $shadow-z2;
1608
}
1609
&.default-decoration {
1611
min-height: $small-size;
1612
padding: $container-padding;
1613
box-shadow: inset 0 1px highlight($titlebar);
1614
.tiled &,
1616
.maximized &,
1617
.fullscreen & {
1618
box-shadow: none;
1619
}
1620
button.titlebutton {
1622
min-height: $small-size;
1623
min-width: $small-size;
1624
margin: 0;
1625
padding: 0;
1626
}
1627
// workaround for non-animatable buttons
1629
.background:not(.csd) & button.titlebutton:active {
1630
background-size: 1000% 1000%;
1631
}
1632
}
1633
.solid-csd & {
1635
&:dir(rtl), &:dir(ltr) { // specificity bump
1636
border-radius: 0;
1637
box-shadow: $shadow-z2; // just remove the highlight
1638
}
1639
}
1640
}
1641
headerbar > windowhandle > box {
1643
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1644
min-height: $large-size;
1645
padding: 0 $container-padding;
1646
border-spacing: $container-padding;
1647
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1649
entry,
1650
spinbutton,
1651
button {
1652
margin-top: $container-padding;
1653
margin-bottom: $container-padding;
1654
}
1655
separator.titlebutton {
1657
margin-top: $large-size / 4;
1658
margin-bottom: $large-size / 4;
1659
background-color: divider($on-titlebar);
1660
}
1661
switch {
1663
margin-top: ($large-size - 24px) / 2;
1664
margin-bottom: ($large-size - 24px) / 2;
1665
}
1666
// reset button margins of the spinbutton
1668
spinbutton button {
1669
margin-top: 0;
1670
margin-bottom: 0;
1671
}
1672
// FIXME: This is a hacky workaround.
1674
.entry-tag {
1675
margin-top: 5px;
1676
margin-bottom: 5px;
1677
}
1678
}
1679
// Development versions of apps to use a differently styled headerbar
1681
window.devel .titlebar:not(.selection-mode) {
1682
}
1683
/**
1685
* Pathbars
1686
*/
1687
%pathbar_button,
1689
pathbar.linked:not(.vertical) > button {
1690
@extend %button-flat-basic;
1691
padding-left: ($medium-size - 24px) / 2;
1693
padding-right: ($medium-size - 24px) / 2;
1694
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1695
$primary 0%,
1696
transparent 0%)
1697
0 0 0 / 0 0 0px;
1698
border-radius: $corner-radius;
1699
&:checked {
1701
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1702
$primary 100%,
1703
transparent 100%)
1704
0 0 2 / 0 0 2px;
1705
color: $on-surface;
1706
&,
1708
&:disabled {
1709
background-color: transparent;
1710
}
1711
}
1712
label:not(:only-child) {
1714
&:first-child {
1715
margin-left: 0;
1716
}
1717
&:last-child {
1719
margin-right: 0;
1720
}
1721
}
1722
&.text-button {
1724
min-width: 0;
1725
}
1726
&.slider-button {
1728
padding-left: (24px - 16px) / 2;
1729
padding-right: (24px - 16px) / 2;
1730
}
1731
}
1732
/**
1734
* Tree Views
1735
*/
1736
columnview.view,
1738
treeview.view {
1739
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1740
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1741
// to avoid borders being overridden by the previously set props
1743
> rubberband {
1744
@extend rubberband;
1745
}
1746
// FIXME: Avoid transparency background-color being slightly darker
1748
&:selected {
1749
// background-color: $surface-z1;
1750
// background-image: image($overlay-selected);
1751
}
1752
&:hover,
1754
&:selected {
1755
// border-radius: 0;
1756
}
1757
&.separator {
1759
min-height: 1px + 2px * 2;
1760
color: divider($on-surface);
1761
}
1762
&:drop(active) {
1764
box-shadow: none;
1765
}
1766
> dndtarget:drop(active) {
1768
// FIXME: box-shadow, background-color and background-image are not available here.
1769
border-style: solid none;
1770
border-width: 9999px;
1771
border-color: overlay("hover", $on-surface);
1772
&.after {
1774
border-top-style: none;
1775
}
1776
&.before {
1778
border-bottom-style: none;
1779
}
1780
}
1781
&.expander {
1783
// GtkTreeView uses the larger of the expander’s min-width and min-height
1784
min-width: 16px;
1785
min-height: 16px;
1786
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1787
-gtk-icon-transform: rotate(-90deg);
1788
&:dir(rtl) {
1790
-gtk-icon-transform: rotate(90deg);
1791
}
1792
&:checked {
1794
-gtk-icon-transform: unset;
1795
}
1796
color: hint($on-surface);
1798
&:hover,
1800
&:active {
1801
color: $on-surface;
1802
}
1803
&:disabled {
1805
color: disabled-hint($on-surface);
1806
}
1807
}
1808
&.progressbar { // progress bar in treeviews
1810
border-bottom: $bar-size solid $primary;
1811
background-color: transparent;
1812
&:selected:hover {
1814
background-color: transparent;
1815
}
1816
}
1817
&.trough { // progress bar trough in treeviews
1819
border-bottom: $bar-size solid disabled-stroke($on-surface);
1820
background-color: transparent;
1821
&:selected:hover {
1823
background-color: transparent;
1824
}
1825
}
1826
> header {
1828
> button {
1829
padding: 2px 6px;
1830
border-style: none solid solid none;
1831
border-width: 1px;
1832
border-color: divider($on-surface);
1833
border-radius: 0;
1834
background-clip: padding-box;
1835
background-color: transparent;
1836
color: hint($on-surface);
1837
@include ink-color($on-surface, $hover-alt: true, $button-style: "flat");
1838
@include list-item;
1839
&:disabled {
1841
color: disabled-hint($on-surface);
1842
}
1843
&,
1845
&:disabled {
1846
// background-color: $surface-z1;
1847
}
1848
&:last-child {
1850
border-right-style: none;
1851
}
1852
}
1853
}
1854
button.dnd,
1856
header.button.dnd { // for treeview-like derive widgets
1857
padding: 2px 6px;
1858
border-style: none solid solid;
1859
border-width: 1px;
1860
border-color: divider($on-surface);
1861
border-radius: 0;
1862
box-shadow: none;
1863
// background-color: $surface-z1;
1864
background-clip: border-box;
1865
color: $primary;
1866
}
1867
// see tests/testaccel to test
1869
acceleditor > label {
1870
background-color: $primary;
1871
}
1872
}
1873
/**
1875
* Menus
1876
*/
1877
menubar {
1879
// box-shadow: inset 0 -1px divider($on-surface);
1880
background-color: $titlebar;
1881
color: $on-titlebar;
1882
&:backdrop {
1884
background-color: $titlebar-backdrop;
1885
color: hint($on-titlebar);
1886
}
1887
.csd & {
1889
transition: $transition;
1890
}
1891
> item {
1893
// transition: $transition;
1894
min-height: 20px;
1895
padding: 4px 8px;
1896
color: hint($on-titlebar);
1897
@extend %ripple;
1899
// @include ink-color($on-titlebar);
1900
&:hover {
1902
background-color: overlay("hover", $on-titlebar);
1903
}
1904
&:focus:not(:hover) {
1906
background-color: overlay("focus", $on-titlebar);
1907
}
1908
&:active {
1910
background-image: radial-gradient(circle, overlay("pressed", $on-titlebar) 10%, transparent 10%);
1911
}
1912
&:selected:not(:focus) {
1914
transition: none;
1915
background-color: overlay("activated", $on-titlebar);
1916
color: $on-titlebar;
1917
}
1918
&:disabled {
1920
color: disabled-hint($on-titlebar);
1921
}
1922
}
1923
}
1924
popover.menu {
1926
> contents {
1927
padding: 6px 0;
1928
}
1929
separator {
1931
margin: 6px 0;
1932
}
1933
label.title {
1935
min-height: 32px - 4px * 2;
1936
padding: 4px 32px; // this will fall apart with font sizing
1937
font-weight: bold;
1938
}
1939
modelbutton {
1941
// transition: background-color $duration $ease-out;
1942
min-height: 30px - 4px * 2;
1943
min-width: 40px;
1944
padding: 4px 32px;
1945
&:hover {
1947
// transition: none;
1948
// background-color: overlay("hover", $on-surface);
1949
}
1950
&:disabled {
1952
color: disabled($on-surface);
1953
}
1954
accelerator {
1956
color: hint($on-surface);
1957
&:dir(ltr) {
1959
margin-left: 24px;
1960
margin-right: 16px - 32px;
1961
}
1962
&:dir(rtl) {
1964
margin-left: 16px - 32px;
1965
margin-right: 24px;
1966
}
1967
}
1968
&:disabled accelerator {
1970
color: disabled-hint($on-surface);
1971
}
1972
}
1973
check,
1975
radio {
1976
&,
1977
&:focus,
1978
&:hover,
1979
&:active,
1980
&:disabled {
1981
// transition: none;
1982
background-color: transparent;
1983
background-image: none;
1984
}
1985
}
1986
arrow,
1988
check,
1989
radio {
1990
min-width: 16px;
1991
min-height: 16px;
1992
margin: 0;
1993
padding: 0;
1994
&.left {
1996
margin-left: 8px - 32px;
1997
margin-right: 8px;
1998
}
1999
&.right {
2001
margin-left: 8px;
2002
margin-right: 8px - 32px;
2003
}
2004
}
2005
button.model {
2007
@extend %button-flat;
2008
// min-height: 32px;
2010
// padding: 0 8px;
2011
// border-radius: $corner-radius;
2012
&:checked {
2014
// color: $primary;
2015
}
2016
}
2017
box.inline-buttons {
2019
padding: 0 8px;
2020
button.image-button.model {
2022
}
2023
}
2024
box.circular-buttons {
2026
padding: 4px 32px;
2027
button.circular.image-button.model {
2029
padding: 12px;
2030
}
2031
}
2032
}
2033
/**
2035
* Popovers
2036
*/
2037
popover {
2039
font: initial; // Decouple the font of popovers from their entry/textview
2040
&.background {
2042
background-color: transparent;
2043
}
2044
> arrow,
2046
> contents {
2047
transition: $transition-shadow;
2048
box-shadow: $shadow-z4;
2049
background-color: $surface-z8;
2050
color: $on-surface;
2051
&:backdrop {
2053
box-shadow: $shadow-z2;
2054
}
2055
}
2056
@at-root %popover-border {
2058
border-width: 1px;
2059
border-style: solid;
2060
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2061
background-clip: padding-box;
2062
}
2063
> arrow {
2065
@extend %popover-border;
2066
}
2067
> contents {
2069
padding: 8px;
2070
@if $version >= 4.2 {
2072
border-radius: $corner-radius;
2073
} @else {
2074
@extend %popover-border;
2075
border-radius: $corner-radius + 1px;
2076
}
2077
> list,
2079
.view,
2080
> .toolbar {
2081
border-style: none;
2082
box-shadow: none;
2083
background-color: transparent;
2084
}
2085
separator {
2087
// margin: 4px 0;
2088
}
2089
list separator {
2091
// margin: 0;
2092
}
2093
}
2094
.osd &,
2096
&.touch-selection,
2097
&.magnifier {
2098
// @extend %osd;
2099
}
2100
button {
2102
@extend %button-outlined;
2103
}
2104
frame,
2106
.frame {
2107
border: 1px solid divider($on-surface);
2108
box-shadow: none;
2109
background-color: transparent;
2110
}
2111
.linked:not(.vertical) > entry:not(:only-child) {
2113
// border-radius: $corner-radius $corner-radius 0 0;
2114
}
2115
}
2116
/**
2118
* Notebooks
2119
*/
2120
notebook {
2122
&:focus:focus-visible > header > tabs > tab:checked {
2123
background-color: overlay("focus", $primary);
2124
}
2125
> header {
2127
&.top {
2128
box-shadow: inset 0 -1px divider($on-surface);
2129
> tabs {
2131
> tab {
2132
box-shadow: inset 0 -2px transparent;
2133
&:checked {
2135
box-shadow: inset 0 -2px $primary;
2136
}
2137
}
2138
}
2139
}
2140
&.bottom {
2142
box-shadow: inset 0 1px divider($on-surface);
2143
> tabs {
2145
> tab {
2146
box-shadow: inset 0 2px transparent;
2147
&:checked {
2149
box-shadow: inset 0 2px $primary;
2150
}
2151
}
2152
}
2153
}
2154
&.left {
2156
box-shadow: inset -1px 0 divider($on-surface);
2157
> tabs {
2159
> tab {
2160
box-shadow: inset -2px 0 transparent;
2161
&:checked {
2163
box-shadow: inset -2px 0 $primary;
2164
}
2165
}
2166
}
2167
}
2168
&.right {
2170
box-shadow: inset 1px 0 divider($on-surface);
2171
> tabs {
2173
> tab {
2174
box-shadow: inset 2px 0 transparent;
2175
&:checked {
2177
box-shadow: inset 2px 0 $primary;
2178
}
2179
}
2180
}
2181
}
2182
&.top > tabs > arrow {
2184
@extend %notebook_vert_arrows;
2185
}
2186
&.bottom > tabs > arrow {
2188
@extend %notebook_vert_arrows;
2189
}
2190
@at-root %notebook_vert_arrows {
2192
&.down {
2193
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2194
}
2195
&.up {
2197
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2198
}
2199
}
2200
&.left > tabs > arrow {
2202
@extend %notebook_horz_arrows;
2203
}
2204
&.right > tabs > arrow {
2206
@extend %notebook_horz_arrows;
2207
}
2208
@at-root %notebook_horz_arrows {
2210
&.down {
2211
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2212
}
2213
&.up {
2215
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2216
}
2217
}
2218
> tabs > arrow {
2220
min-height: 16px;
2221
min-width: 16px;
2222
padding: 4px;
2223
border-radius: 0;
2224
color: hint($on-surface);
2225
@extend %ripple;
2226
@include ink-color($on-surface, $hover-alt: true);
2227
&:disabled {
2229
color: disabled-hint($on-surface);
2230
}
2231
}
2232
> tabs > tab {
2234
@extend %ripple;
2235
@include ink-color($on-surface, $hover-alt: true);
2236
min-height: $small-size;
2237
min-width: $small-size;
2238
padding: $container-padding 12px;
2239
color: hint($on-surface);
2240
font-weight: 500;
2241
&:hover {
2243
// background-color: overlay("hover-alt", $on-surface);
2244
}
2245
&:active {
2247
// background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
2248
}
2249
&:disabled {
2251
color: disabled-hint($on-surface);
2252
}
2253
&:checked {
2255
@include ink-color($primary, $hover-alt: true);
2256
color: $primary;
2257
&:hover {
2259
// background-color: overlay("hover-alt", $primary);
2260
}
2261
&:active {
2263
// background-image: radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2264
}
2265
&:disabled {
2267
color: disabled-hint($on-surface);
2268
}
2269
&.reorderable-page {
2271
// border-color: divider($on-surface);
2272
// background-color: $surface-z1;
2273
}
2274
}
2275
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2277
> box {
2278
transition: background-color $duration $ease-out;
2279
margin: -$container-padding -12px;
2280
padding: $container-padding 12px;
2281
&:drop(active) {
2283
background-color: overlay("hover", $on-surface);
2284
}
2285
}
2286
// colors the button like the label, overridden otherwise
2288
button.flat {
2289
@extend %button-small;
2290
&:last-child {
2292
margin-left: $container-padding;
2293
margin-right: $container-padding - 12px;
2294
}
2295
&:first-child {
2297
margin-left: $container-padding - 12px;
2298
margin-right: $container-padding;
2299
}
2300
}
2301
}
2302
}
2303
}
2304
/**
2306
* Scrollbars
2307
*/
2308
scrollbar {
2310
$_slider_min_length: 24px;
2311
transition: $transition;
2313
background-clip: padding-box;
2314
// background-color: $surface-z1;
2315
// scrollbar border
2317
&.top { border-bottom: 1px solid divider($on-surface); }
2318
&.bottom { border-top: 1px solid divider($on-surface); }
2319
&.left { border-right: 1px solid divider($on-surface); }
2320
&.right { border-left: 1px solid divider($on-surface); }
2321
// slider
2323
> range > trough > slider {
2324
transition: background-color $duration $ease-out;
2325
min-width: 10px;
2326
min-height: 10px;
2327
border: 3px solid transparent;
2328
border-radius: $circular-radius;
2329
background-clip: padding-box;
2330
background-color: scrollbar-thumb($on-surface);
2331
&:hover {
2333
background-color: scrollbar-thumb($on-surface, "hover");
2334
}
2335
&:active {
2337
background-color: scrollbar-thumb($on-surface, "pressed");
2338
}
2339
&:disabled {
2341
background-color: scrollbar-thumb($on-surface, "disabled");
2342
}
2343
}
2344
&.horizontal > range > trough > slider {
2346
min-width: $_slider_min_length;
2347
}
2348
&.vertical > range > trough > slider {
2350
min-height: $_slider_min_length;
2351
}
2352
> range.fine-tune {
2354
> trough > slider {
2355
min-width: 4px;
2356
min-height: 4px;
2357
}
2358
&.horizontal > trough > slider {
2360
margin: 3px 0;
2361
}
2362
&.vertical > trough > slider {
2364
margin: 0 3px;
2365
}
2366
}
2367
&.overlay-indicator {
2369
> range:not(.fine-tune) > trough > slider {
2370
transition-property: background-color, min-height, min-width;
2371
}
2372
&:not(.dragging):not(.hovering) {
2374
border-color: transparent;
2375
background-color: transparent;
2376
> range > trough > slider {
2378
min-width: 4px;
2379
min-height: 4px;
2380
margin: 3px - 1px;
2381
border: 1px solid rgba($surface-z1, 0.3);
2382
}
2383
&.horizontal > range > trough > slider {
2385
min-width: $_slider_min_length;
2386
}
2387
&.vertical > range > trough > slider {
2389
min-height: $_slider_min_length;
2390
}
2391
}
2392
&.dragging,
2394
&.hovering {
2395
background-color: $surface-z8;
2396
}
2397
}
2398
}
2399
/**
2401
* Switch
2402
*/
2403
switch {
2405
transition: all $duration $ease-out;
2406
margin: $container-padding 0;
2407
padding: 0 2px;
2408
border: 5px solid transparent;
2409
border-radius: $circular-radius;
2410
background-color: stroke($on-surface);
2411
background-clip: padding-box;
2412
font-size: 0;
2413
&:checked {
2415
background-color: rgba($primary, .5);
2416
}
2417
&:disabled {
2419
opacity: .5;
2420
}
2421
// hide on/off icons for >=3.24.5
2423
> image {
2424
margin: -8px;
2425
-gtk-icon-transform: scale(0);
2426
}
2427
> slider {
2429
transition: all $duration $ease-out;
2430
min-width: 20px;
2431
min-height: 20px;
2432
margin: -3px -2px;
2433
border-radius: $circular-radius;
2434
box-shadow:
2435
0 0 0 10px transparent,
2436
0 0 0 -10px overlay("pressed", $on-surface),
2437
$shadow-z1;
2438
background-color: $surface-switch-thumb;
2439
}
2440
&:hover > slider {
2442
box-shadow:
2443
0 0 0 10px overlay("hover", $on-surface),
2444
0 0 0 -10px overlay("pressed", $on-surface),
2445
$shadow-z1;
2446
}
2447
&:focus > slider {
2449
box-shadow:
2450
0 0 0 10px overlay("focus", $on-surface),
2451
0 0 0 -10px overlay("pressed", $on-surface),
2452
$shadow-z1;
2453
}
2454
&:active > slider {
2456
box-shadow:
2457
0 0 0 10px overlay("hover", $on-surface),
2458
0 0 0 10px overlay("pressed", $on-surface),
2459
$shadow-z1;
2460
}
2461
&:checked > slider {
2463
background-color: $primary;
2464
}
2465
&:checked:hover > slider {
2467
box-shadow:
2468
0 0 0 10px overlay("hover", $primary),
2469
0 0 0 -10px overlay("pressed", $primary),
2470
$shadow-z1;
2471
}
2472
&:checked:focus > slider {
2474
box-shadow:
2475
0 0 0 10px overlay("focus", $primary),
2476
0 0 0 -10px overlay("pressed", $primary),
2477
$shadow-z1;
2478
}
2479
&:checked:active > slider {
2481
box-shadow:
2482
0 0 0 10px overlay("hover", $primary),
2483
0 0 0 10px overlay("pressed", $primary),
2484
$shadow-z1;
2485
}
2486
row:selected & {
2488
}
2489
}
2490
/**
2492
* Check and Radio items
2493
*/
2494
// draw regular check and radio items using our PNG assets
2496
// all assets are rendered from assets.svg. never add pngs directly
2497
// selection-mode
2499
.view.content-view.check:not(list),
2500
.content-view:not(list) .tile check {
2501
min-height: 40px;
2502
min-width: 40px;
2503
margin: 0;
2504
padding: 0;
2505
background-color: transparent;
2506
background-image: none;
2507
-gtk-icon-shadow: $icon-shadow-z2;
2508
&:hover,
2510
&:active {
2511
-gtk-icon-shadow: $icon-shadow-z4;
2512
}
2513
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2515
&#{$class} {
2516
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2517
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2519
}
2520
}
2521
}
2522
checkbutton,
2524
radiobutton {
2525
border-spacing: 4px;
2526
&.text-button {
2528
padding: 4px;
2529
}
2530
}
2531
$check-radio-size: 40px;
2533
check,
2535
radio {
2536
min-height: 24px;
2537
min-width: 24px;
2538
margin: -($check-radio-size - 24px) / 2;
2539
padding: ($check-radio-size - 24px) / 2;
2540
border-radius: $circular-radius;
2541
color: hint($on-surface);
2542
@extend %ripple;
2543
@include ink-color($on-surface);
2544
&:checked,
2546
&:indeterminate {
2547
color: $primary;
2548
@include ink-color($primary);
2549
}
2550
&:disabled {
2552
color: disabled-hint($on-surface);
2553
}
2554
}
2555
%check,
2557
check {
2558
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2559
&:checked {
2561
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2562
}
2563
&:indeterminate {
2565
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2566
}
2567
}
2568
%radio,
2570
radio {
2571
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2572
&:checked {
2574
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2575
}
2576
&:indeterminate {
2578
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2579
}
2580
border-image-slice: $check-radio-size / 2px;
2582
border-image-width: $check-radio-size / 2;
2583
$radio-indicator-size: 10px / $check-radio-size / 2;
2585
border-image-source: radial-gradient(circle, $primary 0%, transparent 0%);
2587
&:checked:not(:indeterminate) {
2589
border-image-source: radial-gradient(circle, $primary 4.5px, transparent 5px);
2590
&:disabled {
2592
border-image-source: radial-gradient(circle, disabled-hint($on-surface) 4.5px, transparent 5px);
2593
}
2594
}
2595
}
2596
%small_check,
2598
popover.menu modelbutton check {
2599
min-height: 16px;
2600
min-width: 16px;
2601
border-radius: $corner-radius;
2602
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2603
&:checked {
2605
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2606
}
2607
&:indeterminate {
2609
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2610
}
2611
}
2612
%small_radio,
2614
popover.menu modelbutton radio {
2615
min-height: 16px;
2616
min-width: 16px;
2617
border-image: none;
2618
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2619
&:checked {
2621
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2622
}
2623
&:indeterminate {
2625
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2626
}
2627
}
2628
// ANIMATION:
2630
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2631
// the transformation is set on the active state and it get reset on the checked state.
2632
radio:not(:checked):active {
2633
// -gtk-icon-transform: scale(0);
2634
}
2635
// Otherwise, treeview.view styling will be applied...
2637
treeview.view check,
2638
treeview.view radio {
2639
padding: 0;
2640
color: hint($on-surface);
2641
&:checked,
2643
&:indeterminate {
2644
color: $primary;
2645
}
2646
&:disabled {
2648
color: disabled-hint($on-surface);
2649
}
2650
&,
2652
&:hover,
2653
&:selected,
2654
&:selected:hover {
2655
background-color: transparent;
2656
}
2657
}
2658
treeview.view radio:checked {
2660
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2661
border-image: none;
2662
}
2663
/**
2665
* GtkScale
2666
*/
2667
scale {
2669
// sizing
2670
$_marks_length: 8px;
2671
$_marks_distance: 7px;
2672
$trough_size: 2px;
2674
$finetune_trough_size: 4px;
2675
$slider_size: 32px;
2677
$slider_margin: -($slider_size - $trough_size) / 2;
2679
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2680
$color_slider_margin: -($slider_size) * 3 / 4;
2682
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2683
min-height: $trough_size;
2685
min-width: $trough_size;
2686
&.horizontal {
2688
padding: ($medium-size - $trough_size) / 2 12px;
2689
}
2690
&.vertical {
2692
padding: 12px ($medium-size - $trough_size) / 2;
2693
}
2694
// click-and-hold the slider to activate
2696
&.fine-tune {
2697
&.horizontal {
2698
min-height: $finetune_trough_size;
2699
padding-top: ($medium-size - $finetune_trough_size) / 2;
2700
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2701
}
2702
&.vertical {
2704
min-width: $finetune_trough_size;
2705
padding-left: ($medium-size - $finetune_trough_size) / 2;
2706
padding-right: ($medium-size - $finetune_trough_size) / 2;
2707
}
2708
// to make the trough grow in fine-tune mode
2710
> trough > slider {
2711
margin: $finetune_slider_margin;
2712
}
2713
}
2714
// the backing bit
2716
> trough {
2717
transition: background-color $duration $ease-out;
2718
background-color: stroke($on-surface);
2719
&:disabled {
2721
background-color: disabled-stroke($on-surface);
2722
}
2723
// the colored part of the backing bit
2725
> highlight {
2726
transition: background-image $duration $ease-out;
2727
background-image: image($primary);
2728
&:disabled {
2730
background-color: $surface-z0;
2731
background-image: image(disabled-hint($on-surface));
2732
}
2733
}
2734
// this is another differently styled part of the backing bit, the most relevant use case is for example
2736
// in media player to indicate how much video stream as been cached
2737
> fill {
2738
transition: background-color $duration $ease-out;
2739
background-color: stroke($on-surface);
2740
&:disabled {
2742
background-color: transparent;
2743
}
2744
}
2745
> slider {
2747
transition: background-color $duration $ease-out,
2748
background-size $ripple-fade-out-duration $ease-out,
2749
background-image $ripple-fade-out-opacity-duration $ease-out;
2750
min-width: $slider_size;
2751
min-height: $slider_size;
2752
// the slider is inside the trough, so to have make it bigger there's a negative margin
2753
margin: $slider_margin;
2754
border-radius: 50%;
2755
background-repeat: no-repeat;
2756
background-position: center;
2757
background-size: auto, 1000% 1000%;
2758
color: $primary;
2759
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2761
&#{$class} {
2762
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2763
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2765
radial-gradient(circle, transparent 10%, transparent 10%);
2766
}
2767
}
2768
&:hover {
2770
background-color: overlay("hover", $primary);
2771
}
2772
&:focus {
2774
background-color: overlay("focus", $primary);
2775
}
2776
&:active {
2778
$_url: 'assets/scale-slider#{$asset-suffix}';
2779
transition: background-color $duration $ease-out,
2781
background-size 0ms,
2782
background-image 0ms;
2783
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2784
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2785
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2786
background-size: auto, 0% 0%;
2787
}
2788
}
2789
}
2790
> marks,
2792
> value {
2793
color: hint($on-surface);
2794
}
2795
> value {
2797
font-feature-settings: "tnum";
2798
}
2799
indicator {
2801
background-color: stroke($on-surface);
2802
}
2803
//marks margins
2805
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2806
(horizontal, bottom, bottom, top),
2807
(vertical, top, left, right),
2808
(vertical, bottom, right, left) {
2809
&.#{$scale_orient} > marks {
2810
&.#{$marks_class} {
2811
margin-#{$marks_margin}: $_marks_distance;
2812
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2813
}
2814
}
2815
&.#{$scale_orient}.fine-tune > marks {
2817
&.#{$marks_class} {
2818
margin-#{$marks_margin}: $_marks_distance - 1px;
2819
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2820
}
2821
}
2822
}
2823
&.horizontal {
2825
indicator {
2826
min-height: $_marks_length;
2827
min-width: 1px;
2828
}
2829
}
2830
&.vertical {
2832
indicator {
2833
min-height: 1px;
2834
min-width: $_marks_length;
2835
}
2836
}
2837
// *WARNING* scale with marks madness following
2839
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2841
@each $marks_class, $marks_infix in (
2842
".marks-before:not(.marks-after)": "-marks-before",
2843
".marks-after:not(.marks-before)": "-marks-after"
2844
) {
2845
&#{$dir_class}#{$marks_class} > trough > slider {
2846
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2847
&#{$state_class} {
2848
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2849
background-image:
2851
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2852
radial-gradient(circle, transparent 10%, transparent 10%);
2853
}
2854
}
2855
&:active {
2857
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2858
background-image:
2860
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2861
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2862
}
2863
}
2864
}
2865
}
2866
&.color {
2868
min-height: 0;
2869
min-width: 0;
2870
&.horizontal {
2872
// specificity bump
2873
&:dir(ltr),
2874
&:dir(rtl) {
2875
padding: 0 0 12px 0;
2876
slider {
2878
margin-bottom: $color_slider_margin;
2879
margin-top: $color_marks_slider_margin;
2880
}
2881
}
2882
}
2883
&.vertical {
2885
&:dir(ltr) {
2886
padding: 0 0 0 12px;
2887
slider {
2889
margin-left: $color_slider_margin;
2890
margin-right: $color_marks_slider_margin;
2891
}
2892
}
2893
&:dir(rtl) {
2895
padding: 0 12px 0 0;
2896
slider {
2898
margin-right: $color_slider_margin;
2899
margin-left: $color_marks_slider_margin;
2900
}
2901
}
2902
}
2903
}
2904
}
2905
/**
2907
* Progress bars
2908
*/
2909
progressbar {
2911
// FIXME: insensitive state missing and some other state should be set probably
2912
color: hint($on-surface);
2913
font-size: smaller;
2914
font-feature-settings: "tnum";
2915
> trough {
2917
background-color: disabled-stroke($on-surface);
2918
> progress {
2920
background-color: $primary;
2921
}
2922
}
2923
// sizing
2925
&.horizontal > trough {
2926
min-width: 150px;
2927
&,
2929
> progress {
2930
min-height: $bar-size;
2931
}
2932
}
2933
&.vertical > trough {
2935
min-height: 80px;
2936
&,
2938
> progress {
2939
min-width: $bar-size;
2940
}
2941
}
2942
// progressbar.osd used for epiphany page loading progress
2944
&.osd {
2945
// min-width: $bar-size;
2946
// min-height: $bar-size;
2947
// background-color: transparent;
2948
> trough {
2950
// background-color: transparent;
2951
> progress {
2953
// background-color: $primary;
2954
}
2955
}
2956
}
2957
// makes the progress indicator disappear, when the fraction is 0
2959
> trough.empty > progress {
2960
all: unset;
2961
}
2962
}
2963
/**
2965
* Level Bar
2966
*/
2967
levelbar {
2969
&.horizontal {
2970
> trough > block {
2971
min-height: $bar-size;
2972
}
2973
&.discrete > trough > block {
2975
min-width: $medium-size;
2976
&:not(:last-child) {
2978
margin-right: 2px;
2979
}
2980
}
2981
}
2982
&.vertical {
2984
> trough > block {
2985
min-width: $bar-size;
2986
}
2987
&.discrete > trough > block {
2989
min-height: $medium-size;
2990
&:not(:last-child) {
2992
margin-bottom: 2px;
2993
}
2994
}
2995
}
2996
> trough {
2998
}
2999
> trough > block {
3001
&.low {
3002
background-color: $warning;
3003
}
3004
&.high,
3006
&:not(.empty) {
3007
background-color: $primary;
3008
}
3009
&.full {
3011
background-color: $success;
3012
}
3013
&.empty {
3015
background-color: disabled-stroke($on-surface);
3016
}
3017
}
3018
}
3019
/**
3021
* Print dialog
3022
*/
3023
window.dialog.print {
3025
paper {
3026
// padding: 0;
3027
// border: 1px solid divider($on-surface);
3028
border-radius: $corner-radius;
3029
box-shadow: $shadow-z1;
3030
background-color: $surface-z1;
3031
color: $on-surface;
3032
}
3033
.dialog-action-box {
3035
margin: 12px;
3036
}
3037
}
3038
/**
3040
* Frames
3041
*/
3042
frame,
3044
.frame {
3045
// border: 1px solid divider($on-surface);
3046
border-radius: $corner-radius;
3047
box-shadow: $shadow-z1;
3048
background-color: $surface-z1;
3049
color: $on-surface;
3050
button {
3052
@extend %button-outlined;
3053
}
3054
}
3055
frame > label {
3057
margin: 4px;
3058
}
3059
statusbar {
3061
padding: 6px 10px;
3062
// border-top: 1px solid divider($on-surface);
3063
}
3064
actionbar > revealer > box {
3066
padding: $container-padding;
3067
border-spacing: $container-padding;
3068
border-top: 1px solid divider($on-surface);
3069
// background-clip: border-box;
3070
button:not(.suggested-action):not(.destructive-action) {
3072
@extend %button-flat;
3073
}
3074
.linked:not(.vertical) > entry:not(:only-child) {
3076
border-radius: $corner-radius $corner-radius 0 0;
3077
}
3078
}
3079
scrolledwindow {
3081
// This is used when content is touch-dragged past boundaries.
3082
// draws a box on top of the content, the size changes programmatically.
3083
@at-root overshoot {
3084
&.top { @include overshoot(top); }
3085
&.bottom { @include overshoot(bottom); }
3087
&.left { @include overshoot(left); }
3089
&.right { @include overshoot(right); }
3091
}
3092
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3094
@at-root undershoot {
3095
// &.top { @include undershoot(top); }
3096
// &.bottom { @include undershoot(bottom); }
3098
// &.left { @include undershoot(left); }
3100
// &.right { @include undershoot(right); }
3102
}
3103
// the small square between two scrollbars
3105
@at-root junction {
3106
border-style: solid none none solid;
3107
border-width: 1px;
3108
border-color: divider($on-surface);
3109
// background-color: $surface-z1;
3110
&:dir(rtl) {
3112
border-style: solid solid none none;
3113
}
3114
}
3115
}
3116
// vbox and hbox separators
3118
separator {
3119
min-width: 1px;
3120
min-height: 1px;
3121
background-color: divider($on-surface);
3122
}
3123
%hide_separators {
3125
min-width: 0;
3126
min-height: 0;
3127
background-color: transparent;
3128
}
3129
/**
3131
* Lists
3132
*/
3133
listview,
3135
list {
3136
// background-color: $surface-z1;
3137
// color: $on-surface;
3138
> row {
3140
padding: 2px;
3141
&.expander {
3143
padding: 0;
3144
.row-header {
3146
padding: 2px;
3147
}
3148
}
3149
}
3150
&.separators:not(.horizontal) > row:not(:first-child) {
3152
border-top: 1px solid divider($on-surface);
3153
}
3154
&.separators.horizontal > row:not(:first-child) {
3156
border-left: 1px solid divider($on-surface);
3157
}
3158
}
3159
row {
3161
background-clip: padding-box;
3162
&.activatable {
3164
@extend %ripple;
3165
@include ink-color($on-surface, $hover-alt: true);
3166
@include list-item;
3167
// this is for indicathing which row generated a popover
3169
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3170
&.has-open-popup {
3171
background-color: overlay("activated", $on-surface);
3172
}
3173
}
3174
&:selected {
3176
background-color: $overlay-selected;
3177
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3179
&.has-open-popup {
3181
background-color: overlay("activated", $primary, $on: $overlay-selected);
3182
}
3183
}
3184
}
3185
listview {
3187
> row {
3188
@extend %ripple;
3189
@include ink-color($on-surface, $hover-alt: true);
3190
@include list-item;
3191
}
3192
&:selected {
3194
background-color: $overlay-selected;
3195
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3197
}
3198
}
3199
columnview {
3201
// move padding to child cells
3202
> listview > row {
3203
padding: 0;
3204
// align horizontal sizing with header buttons
3206
> cell {
3207
min-height: 24px;
3208
padding: 4px 6px;
3209
&:not(:last-child) {
3211
border-right: 1px solid transparent;
3212
}
3213
}
3214
}
3215
// make column separators visible when :show-column-separators is true
3217
&.column-separators > listview > row > cell {
3218
border-right-color: divider($on-surface);
3219
}
3220
// shrink vertically for .data-table
3222
&.data-table > listview > row > cell {
3223
padding-top: 2px;
3224
padding-bottom: 2px;
3225
}
3226
}
3227
// rich lists usually containing other widgets than just labels/text
3229
.rich-list {
3230
> row {
3231
padding: 12px;
3232
min-height: $medium-size;
3233
> box {
3235
border-spacing: 12px;
3236
}
3237
}
3238
}
3239
/**
3241
* App Notifications
3242
*/
3243
.app-notification {
3245
@extend %toolbar-osd;
3246
margin: 8px;
3247
border-style: none;
3248
button {
3250
@extend %button-flat;
3251
&.text-button:not(:disabled) {
3253
color: $primary;
3254
@include ink-color($primary);
3255
}
3256
}
3257
}
3258
/**
3260
* Expanders
3261
*/
3262
expander {
3264
transition: all $duration $ease-out;
3265
min-width: 16px;
3266
min-height: 16px;
3267
padding: 4px;
3268
border-radius: $circular-radius;
3269
color: hint($on-surface);
3270
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3271
@extend %ripple;
3273
@include ink-color($on-surface);
3274
&:disabled {
3276
color: disabled-hint($on-surface);
3277
}
3278
&:checked {
3280
&:dir(ltr) {
3281
-gtk-icon-transform: rotate(-180deg);
3282
}
3283
&:dir(rtl) {
3285
-gtk-icon-transform: rotate(180deg);
3286
}
3287
}
3288
}
3289
indent {
3291
min-width: 16px;
3292
min-height: 16px;
3293
padding: 4px;
3294
}
3295
expander-widget {
3297
&:focus > box > title > expander {
3298
box-shadow: inset 0 0 0 9999px overlay("focus", $on-surface);
3299
}
3300
> box > title:drop(active) > expander,
3302
> box > title:hover > expander {
3303
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
3304
}
3305
> box > title:active > expander {
3307
transition-duration: $ripple-active-transition-duration;
3308
animation: ripple $ripple-fade-in-duration $ease-out forwards;
3309
background-size: 0% 0%;
3310
background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
3311
}
3312
}
3313
/**
3315
* Calendar
3316
*/
3317
calendar {
3319
// border: 1px solid divider($on-surface);
3320
border-radius: $corner-radius;
3321
box-shadow: $shadow-z1;
3322
background-color: $surface-z1;
3323
color: $on-surface;
3324
&:disabled {
3326
color: disabled($on-surface);
3327
}
3328
> header {
3330
padding: 4px;
3331
border-spacing: 4px;
3332
border-bottom: 1px solid divider($on-surface);
3333
> button.image-button {
3335
padding: 0;
3336
min-width: 28px;
3337
min-height: 28px;
3338
border-radius: $circular-radius;
3339
background-color: transparent;
3340
color: hint($on-surface);
3341
@include ink-color($on-surface, $button-style: "flat");
3342
&:disabled {
3344
color: disabled-hint($on-surface);
3345
}
3346
}
3347
}
3348
> grid {
3350
padding: 4px;
3351
border-spacing: 4px;
3352
> label {
3354
// padding: 4px;
3355
padding: 0;
3356
min-width: 28px;
3357
min-height: 28px;
3358
border-radius: $circular-radius;
3359
}
3360
> label.day-name,
3362
> label.week-number {
3363
color: hint($on-surface);
3364
font-weight: 500;
3365
}
3366
> label.day-number {
3368
@extend %ripple;
3369
@include ink-color($on-surface);
3370
&.today {
3372
box-shadow: inset 0 0 0 1px hint($on-surface);
3373
}
3374
&.other-month {
3376
color: disabled-hint($on-surface);
3377
}
3378
&:selected {
3380
background-color: $overlay-selected;
3381
box-shadow: inset 0 0 0 1px transparent;
3382
@include ink-color($primary, $on: $overlay-selected);
3383
}
3384
}
3385
}
3386
}
3387
/**
3389
* Dialogs
3390
*/
3391
window.dialog.message { // Message Dialog styling
3393
&.csd.background {
3394
min-width: 280px;
3395
border-radius: $corner-radius; // rounded bottom border styling for csd version
3396
background-color: $surface-z8;
3397
}
3398
> .titlebar {
3400
min-height: 24px;
3401
box-shadow: inset 0 1px highlight($surface-z8);
3402
background-color: transparent;
3403
color: $on-surface;
3404
&:backdrop {
3406
background-color: transparent;
3407
color: hint($on-surface);
3408
}
3409
}
3410
> box.dialog-vbox.vertical {
3412
border-spacing: 20px;
3413
> box.vertical > box.horizontal {
3415
margin: 0 24px - 30px;
3416
}
3417
}
3418
label.title {
3420
font-weight: 500;
3421
font-size: pt(20px);
3422
letter-spacing: pt(.15px);
3423
}
3424
// Hint text
3426
label.title + label {
3427
color: hint($on-surface);
3428
}
3429
list,
3431
.view {
3432
background-color: transparent;
3433
}
3434
.dialog-action-area > button {
3436
@extend %button-flat;
3437
&:not(:disabled) {
3439
color: $primary;
3440
@include ink-color($primary);
3441
}
3442
&.suggested-action:not(:disabled) {
3444
background-color: transparent;
3445
// color: $primary;
3446
// @include ink-color($primary);
3447
}
3448
&.destructive-action:not(:disabled) {
3450
background-color: transparent;
3451
color: $error;
3452
@include ink-color($error);
3453
}
3454
}
3455
}
3456
.dialog-action-area {
3458
// margin-top: -$container-padding;
3459
padding: $container-padding;
3460
border-spacing: $container-padding;
3461
}
3462
filechooser {
3464
.dialog-action-box {
3465
border-top: 1px solid divider($on-surface);
3466
}
3467
#pathbarbox {
3469
border-bottom: 1px solid divider($on-surface);
3470
// background-color: $surface-z0;
3471
> stack > box > button { // The new folder button
3473
@extend %button-flat;
3474
border-radius: $circular-radius;
3476
}
3477
}
3478
}
3479
filechooserbutton > button > box {
3481
border-spacing: 6px;
3482
}
3483
filechooserbutton:drop(active) {
3485
// box-shadow: none;
3486
}
3487
/**
3489
* Sidebar
3490
*/
3491
.sidebar {
3493
border-style: none;
3494
&:not(separator) {
3496
@at-root %sidebar_left,
3497
&:dir(ltr),
3498
&.left,
3499
&.left:dir(rtl) {
3500
border-right: 1px solid divider($on-surface);
3501
border-left-style: none;
3502
}
3503
@at-root %sidebar_right,
3505
&:dir(rtl),
3506
&.right {
3507
border-left: 1px solid divider($on-surface);
3508
border-right-style: none;
3509
}
3510
}
3511
list {
3513
// background-color: transparent;
3514
}
3515
paned & {
3517
&:dir(rtl):not(:dir(ltr)),
3518
&:dir(ltr):not(:dir(rtl)) {
3519
border-style: none;
3520
}
3521
}
3522
}
3523
stacksidebar.sidebar {
3525
list {
3526
padding: 4px;
3527
}
3528
list.separators:not(.horizontal) > row:not(:first-child) {
3530
border-top-style: none;
3531
}
3532
row {
3534
min-height: 32px;
3535
padding: 0 8px - 6px;
3536
border-radius: $corner-radius;
3537
color: hint($on-surface);
3538
font-weight: 500;
3539
&:selected {
3541
background-color: overlay("activated", $primary);
3542
color: $primary;
3543
@include ink-color($primary, $on: overlay("activated", $primary));
3544
}
3545
+ row {
3547
margin-top: 4px;
3548
}
3549
> label {
3551
padding-left: 6px;
3552
padding-right: 6px;
3553
}
3554
&.needs-attention > label {
3556
@extend %needs-attention;
3557
}
3558
}
3559
}
3560
separator.sidebar {
3562
&.selection-mode,
3563
.selection-mode & {
3564
// background-color: divider($on-surface);
3565
}
3566
}
3567
/**
3569
* File chooser
3570
*/
3571
// dim the sidebar icons, see bug #786613 for details on this oddity
3573
row image.sidebar-icon {
3574
transition: color $duration $ease-out;
3575
color: hint($on-surface);
3576
&:disabled {
3578
color: disabled-hint($on-surface);
3579
}
3580
}
3581
placessidebar.sidebar {
3583
list {
3584
padding: 4px 0;
3585
> separator {
3587
margin: 4px 0;
3588
}
3589
}
3590
row {
3592
// Needs overriding of the GtkListBoxRow padding
3593
min-height: 32px;
3594
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3595
padding: 0;
3596
border-radius: $corner-radius;
3597
color: hint($on-surface);
3598
font-weight: 500;
3599
// Using margins/padding directly in the SidebarRow
3601
// will make the animation of the new bookmark row jump
3602
> revealer {
3603
padding: 0 8px;
3604
}
3605
&:selected {
3607
background-color: overlay("activated", $primary);
3608
color: $primary;
3609
@include ink-color($primary, $on: overlay("activated", $primary));
3610
image.sidebar-icon {
3612
color: $primary;
3613
}
3614
}
3615
&:disabled {
3617
color: disabled($on-surface);
3618
}
3619
image.sidebar-icon {
3621
&:dir(ltr) {
3622
padding-right: 8px;
3623
}
3624
&:dir(rtl) {
3626
padding-left: 8px;
3627
}
3628
}
3629
label.sidebar-label {
3631
&:dir(ltr) {
3632
padding-right: 2px;
3633
}
3634
&:dir(rtl) {
3636
padding-left: 2px;
3637
}
3638
}
3639
@at-root button.sidebar-button {
3641
@extend %button-flat-basic;
3642
@extend %button-small;
3643
}
3644
&.sidebar-placeholder-row {
3646
background-color: overlay("hover", $on-surface);
3647
}
3648
&.sidebar-new-bookmark-row {
3650
color: $primary;
3651
image.sidebar-icon {
3653
color: $primary;
3654
}
3655
}
3656
}
3657
}
3658
placesview {
3660
.server-list-button {
3661
> image {
3662
-gtk-icon-transform: rotate(0turn);
3663
}
3664
&:checked > image {
3666
-gtk-icon-transform: rotate(-0.5turn);
3667
}
3668
}
3669
> actionbar > revealer > box > box {
3671
border-spacing: $container-padding;
3672
}
3673
// this selects the "connect to server" label
3675
> actionbar > revealer > box > box > label {
3676
padding-left: 8px;
3677
padding-right: 8px;
3678
}
3679
}
3680
/**
3682
* Paned
3683
*/
3684
paned {
3686
> separator {
3687
background-clip: content-box;
3688
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3689
&.wide {
3691
min-width: 4px;
3692
min-height: 4px;
3693
border: 1px solid divider($on-surface);
3694
background-color: transparent;
3695
}
3696
}
3697
&.horizontal > separator {
3699
&:not(.wide) {
3700
margin: 0 -4px;
3701
padding: 0 4px;
3702
}
3703
&.wide {
3705
border-style: none solid;
3706
}
3707
}
3708
&.vertical > separator {
3710
&:not(.wide) {
3711
margin: -4px 0;
3712
padding: 4px 0;
3713
}
3714
&.wide {
3716
border-style: solid none;
3717
}
3718
}
3719
}
3720
/**
3722
* GtkVideo
3723
*/
3724
video {
3726
background-color: black;
3727
image.osd {
3729
min-width: 64px;
3730
min-height: 64px;
3731
border-radius: 32px;
3732
background-color: $scrim;
3733
color: $on-scrim;
3734
}
3735
controls.osd {
3737
padding: 4px;
3738
background-image:
3739
linear-gradient(
3740
to bottom,
3741
transparent,
3742
rgba(black, .1) 30%,
3743
rgba(black, .2) 50%,
3744
rgba(black, .4)
3745
);
3746
color: on(black);
3747
button {
3749
background-color: transparent;
3750
color: hint(on(black));
3751
@include ink-color(on(black));
3752
}
3753
}
3754
}
3755
/**
3757
* GtkInfoBar
3758
*/
3759
infobar {
3761
> revealer > box {
3762
padding: 8px;
3763
border-spacing: 12px;
3764
}
3765
&.action:hover > revealer > box {
3767
background-image: image(overlay("hover", $on-surface));
3768
}
3769
&.info > revealer > box,
3771
&.question > revealer > box {
3772
border-bottom: 1px solid divider($on-surface);
3773
// background-color: $surface-z1;
3774
button {
3776
@extend %button-flat;
3777
&.text-button:not(:disabled) {
3779
color: $primary;
3780
@include ink-color($primary);
3781
}
3782
}
3783
}
3784
&.warning > revealer > box {
3786
background-color: $warning;
3787
color: $on-warning;
3788
button.flat {
3790
color: $on-warning;
3791
@include ink-color($on-warning);
3792
}
3793
selection {
3795
}
3796
link {
3798
color: $on-warning;
3799
}
3800
}
3801
&.error > revealer > box {
3803
background-color: $error;
3804
color: $on-error;
3805
button.flat {
3807
color: $on-error;
3808
@include ink-color($on-error);
3809
}
3810
selection {
3812
}
3813
link {
3815
color: $on-error;
3816
}
3817
}
3818
// Remove ugly hard-coded padding
3820
button label {
3821
// margin: 0 -4px;
3822
}
3823
}
3824
/**
3826
* Tooltips
3827
*/
3828
tooltip {
3830
&.background {
3831
// background-color needs to be set this way otherwise it gets drawn twice
3832
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3833
background-color: $tooltip;
3834
color: $on-tooltip;
3835
}
3836
min-height: 32px - 4px * 2;
3838
padding: 4px 8px;
3839
border-radius: $corner-radius;
3840
&:not(.csd) {
3842
background-color: $tooltip;
3843
}
3844
> box {
3846
border-spacing: 6px;
3847
}
3848
.dim-label {
3850
color: hint($on-tooltip);
3851
}
3852
}
3853
/**
3855
* Color Chooser
3856
*/
3857
colorswatch {
3859
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3860
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3861
// applied to the overlay box.
3862
// base color corners rounding
3864
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3865
// sports a bigger radius.
3866
// nth-child is needed by the custom color strip.
3867
transition: $transition-shadow;
3869
box-shadow: $shadow-z1;
3870
&:drop(active),
3872
&.activatable:hover {
3873
box-shadow: $shadow-z3;
3874
}
3875
&:disabled {
3877
opacity: .5;
3878
// box-shadow: none;
3879
}
3880
&.top {
3882
border-top-left-radius: $corner-radius;
3883
border-top-right-radius: $corner-radius;
3884
}
3885
&.bottom {
3887
border-bottom-left-radius: $corner-radius;
3888
border-bottom-right-radius: $corner-radius;
3889
}
3890
&.left,
3892
&:first-child:not(.top) {
3893
border-top-left-radius: $corner-radius;
3894
border-bottom-left-radius: $corner-radius;
3895
}
3896
&.right,
3898
&:last-child:not(.bottom) {
3899
border-top-right-radius: $corner-radius;
3900
border-bottom-right-radius: $corner-radius;
3901
}
3902
&.dark {
3904
color: $on-dark;
3905
}
3906
&.light {
3908
color: $on-light;
3909
}
3910
&#add-color-button {
3912
// border-radius: $corner-radius 0 0 $corner-radius;
3913
background-color: $surface-z8;
3914
color: $on-surface;
3915
&:only-child {
3917
// border-radius: $corner-radius;
3918
}
3919
}
3920
row:selected & {
3922
}
3923
&#editor-color-sample {
3925
border-radius: $corner-radius;
3926
}
3927
}
3928
// colorscale popup
3930
colorchooser .popover.osd {
3931
transition: $transition-shadow;
3932
border-radius: $corner-radius;
3933
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
3934
background-color: $surface-z8;
3935
&:backdrop {
3937
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
3938
}
3939
}
3940
/**
3942
* Misc
3943
*/
3944
// content view (grid/list)
3946
.content-view {
3947
// background-color: $surface-z0;
3948
&:hover {
3950
// -gtk-icon-filter: brightness(1.2);
3951
}
3952
}
3953
.scale-popup {
3955
.osd & {
3956
// @extend %osd;
3957
button.flat {
3959
}
3960
}
3961
// +/- buttons on GtkVolumeButton popup
3963
button {
3964
}
3965
}
3966
/**
3968
* Window Decorations
3969
*/
3970
window {
3972
&.csd {
3973
transition: $transition-shadow;
3974
border-radius: $corner-radius $corner-radius 0 0;
3975
border-radius: $corner-radius;
3976
box-shadow: $shadow-z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
3977
&:backdrop {
3979
// the transparent shadow here is to enforce that the shadow extents don't
3980
// change when we go to backdrop, to prevent jumping windows.
3981
// The biggest shadow should be in the same order then in the active state
3982
// or the jumping will happen during the transition.
3983
box-shadow: $shadow-z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
3984
}
3985
}
3986
// server-side decorations as used by mutter
3988
&.ssd {
3989
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
3990
}
3991
&.solid-csd {
3993
margin: 0;
3994
padding: 2px;
3995
border-radius: 0;
3996
box-shadow: none;
3997
box-shadow: inset 0 1px highlight($titlebar);
3998
background-color: $titlebar;
3999
&:backdrop {
4001
background-color: $titlebar-backdrop;
4002
}
4003
}
4004
&.maximized,
4006
&.fullscreen,
4007
&.tiled,
4008
&.tiled-top,
4009
&.tiled-left,
4010
&.tiled-right,
4011
&.tiled-bottom {
4012
border-radius: 0;
4013
}
4014
}
4015
// catch all extend :)
4017
%selected_items {
4019
background-color: $overlay-selected;
4020
}
4021
.monospace {
4023
font-family: monospace;
4024
}
4025
/**
4027
* Touch Copy & Paste
4028
*/
4029
// touch selection handlebars for the Popover.osd above
4031
cursor-handle {
4032
min-width: 24px;
4033
min-height: 24px;
4034
border-radius: 50%;
4035
background-color: $primary;
4036
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4037
&.top:dir(ltr),
4039
&.bottom:dir(rtl) {
4040
border-top-right-radius: 0;
4041
// -gtk-icon-transform: rotate(90deg);
4042
}
4043
&.bottom:dir(ltr),
4045
&.top:dir(rtl) {
4046
border-top-left-radius: 0;
4047
// -gtk-icon-transform: unset;
4048
}
4049
&.insertion-cursor:dir(ltr),
4051
&.insertion-cursor:dir(rtl) {
4052
margin-top: 6px;
4053
transform: rotate(45deg);
4054
}
4055
}
4056
shortcuts-section {
4058
margin: 20px;
4059
}
4060
.shortcuts-search-results {
4062
margin: 20px;
4063
border-spacing: 24px;
4064
}
4065
// shortcut window keys
4067
shortcut {
4068
border-spacing: 6px;
4069
}
4070
shortcut > .keycap {
4072
min-width: 28px - 8px * 2;
4073
// min-height: 28px - 2px;
4074
min-height: 28px;
4075
// margin-top: 2px;
4076
// padding-bottom: 2px;
4077
padding-left: 8px;
4078
padding-right: 8px;
4079
// border: solid 1px divider($on-surface);
4081
// border-radius: $corner-radius + 1px;
4082
border-radius: $corner-radius;
4083
// box-shadow: inset 0 -2px divider($on-surface);
4084
box-shadow: $shadow-z1;
4085
background-color: $surface-z8;
4086
color: $on-surface;
4087
font-size: smaller;
4088
}
4089
// FIXME needs to be done widget by widget, this wildcard should really die
4091
:drop(active) {
4092
// caret-color: $primary;
4093
}
4094
// FIXME aggregate with buttons
4096
stackswitcher > button.text-button {
4097
min-width: 100px;
4098
}
4099
stackswitcher.circular {
4101
border-spacing: 12px;
4102
// FIXME aggregate with buttons
4104
> button.circular {
4105
min-width: $medium-size;
4106
min-height: $medium-size;
4107
padding: 0;
4108
}
4109
}
4110
/**
4112
* App Icons
4113
*/
4114
// Outline for low res icons
4116
.lowres-icon {
4117
// -gtk-icon-shadow: none;
4118
}
4119
// Drapshadow for large icons
4121
.icon-dropshadow {
4122
// -gtk-icon-shadow: none;
4123
}
4124
/**
4126
* Emoji
4127
*/
4128
popover.emoji-picker > contents {
4130
padding: 0;
4131
emoji {
4133
min-width: 3em;
4134
min-height: 3em;
4135
// padding: 8px;
4136
border-radius: $corner-radius;
4137
// font-size: larger;
4138
@extend %ripple;
4140
@include ink-color($on-surface);
4141
}
4142
}
4143
.emoji-searchbar {
4145
border-bottom: 1px solid divider($on-surface);
4146
> entry.search {
4148
border-image: none;
4149
border-radius: 0;
4150
box-shadow: none;
4151
background-color: transparent;
4152
}
4153
}
4154
.emoji-toolbar {
4156
padding: 4px;
4157
border-spacing: 4px;
4158
border-top: 1px solid divider($on-surface);
4159
> button.emoji-section {
4161
&:checked {
4162
background-color: overlay("activated", $primary);
4163
color: $primary;
4164
@include ink-color($primary, $on: overlay("activated", $primary));
4165
}
4166
}
4167
}
4168
popover.emoji-completion > contents {
4170
padding: 8px 0;
4171
emoji-completion-row {
4173
min-height: 32px;
4174
padding: 0 8px;
4175
@extend %ripple;
4176
@include ink-color($on-surface);
4177
> box {
4179
border-spacing: 8px;
4180
}
4181
}
4182
emoji {
4184
// min-width: 3em;
4185
// min-height: 3em;
4186
// padding: 8px;
4187
border-radius: $corner-radius;
4188
@extend %ripple;
4190
@include ink-color($on-surface);
4191
}
4192
}
4193
popover.entry-completion > contents {
4195
padding: 0;
4196
treeview.view {
4198
min-height: 32px; // FIXME: should be in .cell
4199
padding: 8px 0;
4200
> .cell {
4202
padding: 0 4px; // FIXME: should be `0 8px`
4203
&:selected:hover {
4205
background-color: overlay("focus", $on-surface);
4206
}
4207
}
4208
}
4209
}
4210