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
%osd,
202
.osd {
203
// opacity: .9;
204
}
205
/**
207
* Spinner Animation
208
*/
209
@keyframes spin {
211
to {
212
transform: rotate(1turn);
213
}
214
}
215
spinner {
217
// background: none;
218
opacity: 0; // non spinning spinner makes no sense
219
color: $primary;
220
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
221
transition: opacity $duration * 4 $ease-out;
222
animation: spin 1s linear infinite;
223
&:checked {
225
opacity: 1;
226
}
227
&:disabled {
229
color: disabled-hint($on-surface);
230
}
231
}
232
/**
234
* General Typography
235
*/
236
@function pt($size: $font-size) {
238
@return ($size * .75 / 1px) * 1pt;
239
}
240
.large-title {
242
font-weight: 400;
243
font-size: pt(48px);
244
}
245
.title-1 {
247
font-weight: 400;
248
font-size: pt(34px);
249
letter-spacing: pt(.25px);
250
}
251
.title-2 {
253
font-weight: 400;
254
font-size: pt(24px);
255
}
256
.title-3 {
258
font-weight: 500;
259
font-size: pt(20px);
260
letter-spacing: pt(.15px);
261
}
262
.title-4 {
264
font-weight: 400;
265
font-size: pt(16px);
266
letter-spacing: pt(.5px);
267
}
268
.heading {
270
font-weight: 500;
271
font-size: 1em;
272
}
273
.body {
275
font-weight: 400;
276
font-size: 1em;
277
}
278
.caption-heading {
280
font-weight: 500;
281
font-size: pt(12px);
282
letter-spacing: pt(1.5px);
283
}
284
.caption {
286
font-weight: 400;
287
font-size: pt(12px);
288
letter-spacing: pt(.4px);
289
}
290
/**
292
* Text Entries
293
*/
294
%entry,
296
entry {
297
min-height: $medium-size;
298
padding: 0 8px;
299
border-spacing: $container-padding;
300
border-radius: $corner-radius $corner-radius 0 0;
301
@include entry(normal);
303
&:hover,
305
&:drop(active) {
306
@include entry(hover);
307
}
308
&:focus-within {
310
@include entry(checked);
311
> text > placeholder {
313
opacity: 0;
314
}
315
}
316
&:disabled {
318
@include entry(disabled);
319
}
320
&.flat {
322
min-height: 0;
323
padding: 2px;
324
border-radius: 0;
325
background-color: transparent;
326
}
327
> text {
329
> placeholder {
330
color: hint($on-surface);
331
}
332
> selection {
334
background-color: $overlay-selected;
335
}
336
> block-cursor {
338
background-color: $primary;
339
color: $on-primary;
340
}
341
> undershoot {
343
&.left {
344
// @include undershoot(left);
345
}
346
&.right {
348
// @include undershoot(right);
349
}
350
}
351
}
352
// icons inside the entry
354
> image {
355
min-width: $small-size;
356
min-height: $small-size;
357
border-radius: $circular-radius;
358
@extend %ripple;
359
@include ink-color($on-surface);
360
color: hint($on-surface);
361
margin-top: $container-padding;
362
margin-bottom: $container-padding;
363
&:disabled {
365
color: disabled($on-surface);
366
}
367
&.left {
369
margin-left: ($medium-size - $small-size) / 2 - 8px;
370
}
371
&.right {
373
margin-right: ($medium-size - $small-size) / 2 - 8px;
374
}
375
}
376
&.password > image.caps-lock-indicator {
378
}
379
// entry error and warning style
381
@each $class, $color in (".error": $error, ".warning": $warning) {
382
&#{$class} {
383
@include entry(normal, $color);
384
&:focus-within {
386
@include entry(checked, $color);
387
}
388
&:disabled {
390
@include entry(disabled, $color);
391
}
392
}
393
}
394
.osd & {
396
}
397
> progress > trough > progress {
399
margin: 0 -8px;
400
margin-bottom: -4px;
401
border-bottom: 2px solid $primary;
402
background-color: transparent;
403
}
404
// linked entries
406
.linked:not(.vertical) > & {
407
// @extend %linked;
408
}
409
// Vertically linked entries
411
.linked.vertical > & {
412
// @extend %linked-vertical;
413
}
414
}
415
%entry_raised {
417
border-radius: $corner-radius;
418
@include entry(raised-normal);
420
&:focus-within {
422
@include entry(raised-focus);
423
}
424
&:drop(active) {
426
@include entry(raised-hover);
427
}
428
&:disabled {
430
@include entry(raised-disabled);
431
}
432
// entry error and warning style
434
@each $class, $color in (".error": $error, ".warning": $warning) {
435
&#{$class} {
436
@include entry(raised-normal, $color);
437
&:focus-within {
439
@include entry(raised-focus, $color);
440
}
441
&:disabled {
443
@include entry(raised-disabled, $color);
444
}
445
image {
447
color: hint(on($color));
448
&:hover,
450
&:active {
451
color: on($color);
452
}
453
&:disabled {
455
color: disabled(on($color));
456
}
457
}
458
}
459
}
460
}
461
treeview entry {
463
&,
464
&.flat {
465
background-color: $surface-z1;
466
&,
468
&:focus-within {
469
border-image: none;
470
box-shadow: none;
471
}
472
}
473
}
474
.entry-tag {
476
margin: 2px;
477
border-radius: $circular-radius;
478
box-shadow: none;
479
background-color: fill($on-surface);
480
color: $on-surface;
481
&:hover {
483
background-image: image(overlay("hover", $on-surface));
484
}
485
// side margins: compensate the entry padding with a negative margin
487
// then the negative margin itself
488
:dir(ltr) & {
489
margin-left: 4px;
490
margin-right: 0;
491
padding-left: 12px;
492
padding-right: 8px;
493
}
494
:dir(rtl) & {
496
margin-left: 0;
497
margin-right: 4px;
498
padding-left: 8px;
499
padding-right: 12px;
500
}
501
// seems any sizing doesn't work
503
&.button {
504
box-shadow: none;
505
background-color: transparent;
506
color: hint($on-surface);
507
}
508
}
509
/**
511
* Buttons
512
*/
513
// stuff for .needs-attention
515
@keyframes needs-attention {
516
from {
517
background-image: radial-gradient(farthest-side, $primary 0%, transparent 0%);
518
}
519
to {
521
background-image: radial-gradient(farthest-side, $primary 100%, transparent 100%);
522
}
523
}
524
%button,
526
button {
527
min-height: 24px;
528
min-width: 16px;
529
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
530
border-radius: $corner-radius;
531
background-color: $surface-z8;
532
color: $on-surface;
533
font-weight: 500;
534
@extend %ripple;
536
@include ink-color($on-surface, $on: $surface-z8, $button-style: "raised");
537
&:disabled {
539
box-shadow: none;
540
background-color: fill($on-surface);
541
color: disabled($on-surface);
542
}
543
&:checked {
545
$background-color: overlay("activated", $primary, $on: $surface-z8);
546
color: $primary;
547
@include ink-color($primary, $on: $background-color, $button-style: "raised");
548
&:disabled {
550
box-shadow: none;
551
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
552
color: disabled($on-surface);
553
}
554
}
555
&.text-button {
557
min-width: 64px - 16px * 2;
558
padding-left: 16px;
559
padding-right: 16px;
560
}
561
&.image-button {
563
min-width: 24px;
564
padding: ($medium-size - 24px) / 2;
565
border-radius: $circular-radius;
566
}
567
// NOTE: Some image-only buttons use this as well
569
&.text-button.image-button {
570
min-width: 64px - 16px * 2;
571
padding-left: 16px;
572
padding-right: 16px;
573
// min-width: 24px;
574
// padding: ($medium-size - 24px) / 2;
575
border-radius: $corner-radius;
576
label {
578
&:first-child {
579
// margin-left: 16px - ($medium-size - 24px) / 2;
580
}
581
&:last-child {
583
// margin-right: 16px - ($medium-size - 24px) / 2;
584
}
585
}
586
image:not(:only-child) {
588
// margin: 0 (24px - 16px) / 2;
589
}
590
image {
592
&:first-child {
593
margin-left: 12px - 16px;
594
margin-right: 8px;
595
}
596
&:last-child {
598
margin-left: 8px;
599
margin-right: 12px - 16px;
600
}
601
}
602
}
603
.linked:not(.vertical) > & {
605
// @extend %linked;
606
&.image-button:not(.text-button) {
608
// @extend %linked-image-button;
609
}
610
}
611
.linked.vertical > & {
613
// @extend %linked-vertical;
614
&.image-button:not(.text-button) {
616
// @extend %linked-vertical-image-button;
617
}
618
}
619
}
620
%button-outlined {
622
background-color: transparent;
623
@include ink-color($on-surface, $hover-alt: true, $button-style: "outlined");
624
}
625
%button-flat-basic {
627
background-color: transparent;
628
color: hint($on-surface);
629
@include ink-color($on-surface, $button-style: "flat");
630
&:disabled {
632
background-color: transparent;
633
color: disabled-hint($on-surface);
634
}
635
}
636
%button-flat-activatable {
638
@extend %button-flat-basic;
639
&:checked {
641
$background-color: overlay("activated", $primary);
642
color: $primary;
643
@include ink-color($primary, $on: $background-color, $button-style: "flat");
644
&:disabled {
646
color: disabled($on-surface);
647
}
648
}
649
}
650
%button-flat,
652
button.flat {
653
@extend %button-flat-activatable;
654
&.text-button {
656
min-width: 64px - 8px * 2;
657
padding-left: 8px;
658
padding-right: 8px;
659
}
660
&.text-button.image-button {
662
min-width: 24px;
663
padding: ($medium-size - 24px) / 2;
664
label {
666
&:first-child {
667
margin-left: 12px - ($medium-size - 24px) / 2;
668
}
669
&:last-child {
671
margin-right: 12px - ($medium-size - 24px) / 2;
672
}
673
}
674
}
675
.linked:not(.vertical) > &,
677
.linked.vertical > & {
678
&:not(:only-child) { // specificity bump
679
border-radius: $corner-radius;
680
&.image-button:not(.text-button) {
682
border-radius: $circular-radius;
683
}
684
}
685
}
686
}
687
button {
689
// big standalone buttons like in Documents pager
690
&.osd {
691
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
692
&.image-button {
694
padding: ($large-size - 24px) / 2;
695
}
696
&:disabled {
698
opacity: 0;
699
}
700
}
701
// overlay / OSD style
703
@at-root %osd_button,
704
.osd & {
705
}
706
// Suggested and Destructive Action buttons
708
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
709
&#{$class} {
710
background-color: $color;
711
color: on($color);
712
@include ink-color(on($color), $on: $color, $button-style: "raised");
713
&:disabled {
715
box-shadow: none;
716
background-color: fill($on-surface);
717
color: disabled($on-surface);
718
}
719
&:checked {
721
background-color: overlay("activated", on($color), $on: $color);
722
}
723
&.flat {
725
background-color: transparent;
726
@include ink-color($color);
727
&:disabled {
729
box-shadow: none;
730
background-color: transparent;
731
color: disabled-hint($on-surface);
732
}
733
&:checked {
735
background-color: overlay("activated", $color);
736
}
737
}
738
.osd & {
740
}
741
}
742
}
743
stackswitcher > & {
745
// to position the needs attention dot, padding is added to the button
746
// child, a label needs just lateral padding while an icon needs vertical
747
// padding added too.
748
> label {
750
margin: 0 -6px;
751
padding: 0 6px;
752
}
753
> image {
755
margin: -3px -6px;
756
padding: 3px 6px;
757
}
758
&.needs-attention {
760
> label,
761
> image {
762
@extend %needs-attention;
763
}
764
&:checked {
766
> label,
767
> image {
768
animation: none;
769
background-image: none;
770
}
771
}
772
}
773
}
774
&.font > box {
776
border-spacing: 6px;
777
> box {
779
> separator {
780
@extend %hide_separators;
781
}
782
> label {
784
// font-weight: bold;
785
}
786
}
787
}
788
// force circular button shape
790
&.close,
791
&.circular {
792
border-radius: $circular-radius;
793
}
794
}
795
%button-small {
797
min-height: $small-size;
798
min-width: $small-size;
799
padding: 0;
800
border-radius: $circular-radius;
801
}
802
%needs-attention {
804
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
805
background-repeat: no-repeat;
806
background-position: right 3px;
807
background-size: 6px 6px;
808
&:dir(rtl) {
810
background-position: left 3px;
811
}
812
}
813
.linked:not(stackswitcher) {
815
border-spacing: $container-padding;
816
}
817
.linked:not(.vertical) > button.radio {
819
border-radius: 0;
820
&:first-child {
822
border-top-left-radius: $corner-radius;
823
border-bottom-left-radius: $corner-radius;
824
}
825
&:last-child {
827
border-top-right-radius: $corner-radius;
828
border-bottom-right-radius: $corner-radius;
829
}
830
&:not(:first-child) {
832
margin-left: -$container-padding;
833
}
834
}
835
.linked.vertical > button.radio {
837
border-radius: 0;
838
&:first-child {
840
border-top-left-radius: $corner-radius;
841
border-top-right-radius: $corner-radius;
842
}
843
&:last-child {
845
border-bottom-left-radius: $corner-radius;
846
border-bottom-right-radius: $corner-radius;
847
}
848
&:not(:first-child) {
850
margin-top: -$container-padding;
851
}
852
}
853
%linked-not-first-child {
855
border-top-left-radius: 0;
856
border-bottom-left-radius: 0;
857
}
858
%linked-not-last-child {
860
border-top-right-radius: 0;
861
border-bottom-right-radius: 0;
862
}
863
%linked {
865
&:not(:first-child) {
866
@extend %linked-not-first-child;
867
}
868
&:not(:last-child) {
870
@extend %linked-not-last-child;
871
}
872
}
873
%linked-vertical-not-first-child {
875
border-top-left-radius: 0;
876
border-top-right-radius: 0;
877
}
878
%linked-vertical-not-last-child {
880
border-bottom-left-radius: 0;
881
border-bottom-right-radius: 0;
882
}
883
%linked-vertical {
885
&:not(:first-child) {
886
@extend %linked-vertical-not-first-child;
887
}
888
&:not(:last-child) {
890
@extend %linked-vertical-not-last-child;
891
}
892
}
893
%linked-image-button {
895
&:first-child {
896
border-top-left-radius: $corner-radius;
897
border-bottom-left-radius: $corner-radius;
898
}
899
&:last-child {
901
border-top-right-radius: $corner-radius;
902
border-bottom-right-radius: $corner-radius;
903
}
904
&:only-child {
906
border-radius: $circular-radius;
907
}
908
}
909
%linked-vertical-image-button {
911
&:first-child {
912
border-top-left-radius: $corner-radius;
913
border-top-right-radius: $corner-radius;
914
}
915
&:last-child {
917
border-bottom-left-radius: $corner-radius;
918
border-bottom-right-radius: $corner-radius;
919
}
920
&:only-child {
922
border-radius: $circular-radius;
923
}
924
}
925
/* menu buttons */
927
modelbutton.flat {
928
// min-height: $menuitem-size;
929
// padding: 0 8px;
930
// border-radius: $corner-radius;
931
@extend %ripple;
933
@include ink-color($on-surface);
934
&:selected {
936
// background-color: $overlay-selected;
937
}
938
}
939
modelbutton.flat arrow {
941
min-width: 16px;
942
min-height: 16px;
943
color: hint($on-surface);
944
&:disabled {
946
color: disabled-hint($on-surface);
947
}
948
&.left {
950
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
951
}
952
&.right {
954
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
955
}
956
}
957
button.color {
959
min-width: $small-size;
960
min-height: $small-size;
961
padding: $container-padding;
962
}
963
/**
965
* Links
966
*/
967
link {
969
color: $primary;
970
&:visited {
972
color: $visited;
973
}
974
}
975
button.link {
977
color: $primary;
978
@include ink-color($primary);
979
&:visited {
981
color: $visited;
982
@include ink-color($visited);
983
}
984
> label {
986
text-decoration-line: underline;
987
}
988
}
989
/**
991
* GtkSpinButton
992
*/
993
spinbutton {
995
font-feature-settings: "tnum";
996
&:not(.vertical) {
998
// in this horizontal configuration, the whole spinbutton
999
// behaves as the entry, so we extend the entry styling
1000
// and nuke the style on the internal entry
1001
@extend %entry;
1002
> text {
1004
min-width: 32px;
1005
}
1006
> button {
1008
@extend %button-flat-basic;
1009
@extend %button-small;
1010
margin: $container-padding 0;
1012
&.up:dir(ltr),
1014
&.down:dir(rtl) {
1015
// margin-left: $container-padding / 2;
1016
}
1017
&.up:dir(rtl),
1019
&.down:dir(ltr) {
1020
// margin-right: $container-padding / 2;
1021
}
1022
&.up:dir(ltr) {
1024
margin-right: ($medium-size - $small-size) / 2 - 8px;
1025
}
1026
&.up:dir(rtl) {
1028
margin-left: ($medium-size - $small-size) / 2 - 8px;
1029
}
1030
}
1031
}
1032
// OSD horizontal
1034
.osd &:not(.vertical) {
1035
}
1036
// Vertical
1038
&.vertical {
1039
// in the vertical configuration, we treat the spinbutton
1040
// as a box, and tweak the style of the entry in the middle
1041
// so that it's linked
1042
> text {
1044
@extend %entry_raised;
1045
min-height: $medium-size;
1047
min-width: $large-size;
1048
padding: 0;
1049
> selection {
1051
background-color: $overlay-selected;
1052
}
1053
}
1054
button {
1056
min-height: $medium-size;
1057
min-width: $large-size;
1058
padding: 0;
1059
@extend %button-flat-basic;
1061
// Remove unwanted focus indicator
1063
&:focus:not(:hover):not(:active) {
1064
box-shadow: inset 0 0 0 9999px transparent;
1065
}
1066
&.up {
1068
border-radius: $corner-radius $corner-radius 0 0;
1069
}
1070
&.down {
1072
border-radius: 0 0 $corner-radius $corner-radius;
1073
}
1074
}
1075
}
1076
// OSD vertical
1078
.osd &.vertical {
1079
}
1080
// Misc
1082
treeview &:not(.vertical) {
1083
min-height: 0;
1084
border-style: none;
1085
border-radius: 0;
1086
> text {
1088
min-height: 0;
1089
padding: 1px 2px;
1090
}
1091
}
1092
}
1093
/**
1095
* ComboBoxes
1096
*/
1097
dropdown,
1099
combobox {
1100
arrow {
1101
min-width: 16px;
1102
min-height: 16px;
1103
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1104
transition: -gtk-icon-transform $duration $ease-out;
1105
}
1106
button:checked arrow {
1108
color: $primary;
1109
-gtk-icon-transform: rotate(-.5turn);
1110
}
1111
}
1112
dropdown {
1114
> button > box {
1115
border-spacing: 6px;
1116
}
1117
> popover.menu > contents {
1119
// allow search entries with no padding
1120
padding: 0;
1121
listview {
1123
padding: 6px 0;
1124
> row {
1126
min-height: 32px - 4px * 2;
1127
padding: 4px 8px;
1128
&:selected {
1130
background-color: overlay("focus", $on-surface);
1131
}
1132
}
1133
}
1134
}
1135
}
1136
// drodowns with searchboxes on top
1138
.dropdown-searchbar {
1139
border-bottom: 1px solid divider($on-surface);
1140
> entry.search {
1142
border-image: none;
1143
border-radius: 0;
1144
box-shadow: none;
1145
background-color: transparent;
1146
}
1147
}
1148
combobox {
1150
> box > button > box {
1151
border-spacing: 6px;
1152
}
1153
cellview {
1155
margin: -2px;
1156
}
1157
// align menu labels with the button label
1159
> popover.menu > contents modelbutton {
1160
padding-left: 8px;
1161
padding-right: 8px;
1162
}
1163
> .linked:not(.vertical) > entry:not(:only-child) {
1165
// border-radius: $corner-radius $corner-radius 0 0;
1166
&:first-child {
1168
margin-right: -($medium-size + $container-padding);
1169
padding-right: $medium-size;
1170
}
1171
&:last-child {
1173
margin-left: -($medium-size + $container-padding);
1174
padding-left: $medium-size;
1175
}
1176
}
1177
> .linked:not(.vertical) > button:not(:only-child) {
1179
@extend %button-flat-activatable;
1180
// @extend %button-small;
1181
min-height: 16px;
1183
min-width: 16px;
1184
margin: ($medium-size - $small-size) / 2;
1185
padding: ($small-size - 16px) / 2;
1186
border-radius: $circular-radius;
1187
}
1188
}
1189
// the combo is a composite widget so the way we do button linking doesn't
1191
// work, special case needed. See
1192
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1193
.linked:not(.vertical) > combobox {
1195
&:not(:first-child) > box > button.combo {
1196
// @extend %linked-not-first-child;
1197
}
1198
&:not(:last-child) > box > button.combo {
1200
// @extend %linked-not-last-child;
1201
}
1202
}
1203
.linked.vertical > combobox {
1205
&:not(:first-child) > box > button.combo {
1206
// @extend %linked-vertical-not-first-child;
1207
}
1208
&:not(:last-child) > box > button.combo {
1210
// @extend %linked-vertical-not-last-child;
1211
}
1212
}
1213
dropdown > button.toggle,
1215
button.combo:only-child {
1216
padding-left: 8px;
1217
padding-right: 8px;
1218
border-radius: $corner-radius $corner-radius 0 0;
1219
font-weight: normal;
1220
@include entry(normal);
1222
&:focus {
1224
@include entry(focus);
1225
}
1226
&:drop(active),
1228
&:hover {
1229
@include entry(hover);
1230
}
1231
&:checked {
1233
@include entry(checked);
1234
}
1235
&:disabled {
1237
@include entry(disabled);
1238
}
1239
arrow {
1241
transition: color $duration $ease-out;
1242
color: hint($on-surface);
1243
&:disabled {
1245
color: disabled-hint($on-surface);
1246
}
1247
}
1248
}
1249
/**
1251
* Toolbars
1252
*/
1253
.toolbar {
1255
padding: 4px;
1256
border-spacing: 4px;
1257
&.top { border-bottom: 1px solid divider($on-surface); }
1259
&.bottom { border-top: 1px solid divider($on-surface); }
1260
&.start { border-right: 1px solid divider($on-surface); }
1261
&.end { border-left: 1px solid divider($on-surface); }
1262
button {
1264
@extend %button-flat;
1265
}
1266
// on OSD
1268
.osd & {
1269
}
1270
// stand-alone OSD toolbars
1272
&.osd {
1273
@extend %toolbar-osd;
1274
// positional classes for `attached` osd toolbars
1276
&.left,
1277
&.right,
1278
&.top,
1279
&.bottom {
1280
border-radius: 0;
1281
}
1282
&.bottom {
1284
box-shadow: none;
1285
background-color: transparent;
1286
background-image:
1287
linear-gradient(
1288
to bottom,
1289
transparent,
1290
rgba(black, .1) 30%,
1291
rgba(black, .2) 50%,
1292
rgba(black, .4)
1293
);
1294
}
1295
}
1296
// toolbar separators
1298
&.horizontal > separator {
1299
margin: 4px 0;
1300
}
1301
&.vertical > separator {
1303
margin: 0 4px;
1304
}
1305
}
1306
%toolbar-osd {
1308
transition: $transition-shadow;
1309
padding: $container-padding;
1310
border-spacing: $container-padding;
1311
border-radius: $corner-radius;
1312
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
1313
background-color: $surface-z8;
1314
&:backdrop {
1316
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
1317
}
1318
}
1319
// searchbar, location-bar & inline-toolbar
1321
.inline-toolbar {
1322
padding: $container-padding;
1323
border-style: solid;
1324
border-width: 0 1px 1px;
1325
border-color: divider($on-surface);
1326
background-color: $surface-z1;
1327
}
1328
searchbar > revealer > box {
1330
padding: $container-padding;
1331
border-spacing: $container-padding;
1332
border-bottom: 1px solid divider($on-surface);
1333
}
1334
/**
1336
* Title buttons
1337
*/
1338
windowcontrols {
1340
border-spacing: $container-padding;
1341
&:not(:only-child):not(.empty) {
1343
border-image:
1344
linear-gradient(
1345
to bottom,
1346
transparent 12px,
1347
divider($on-titlebar) 12px,
1348
divider($on-titlebar) calc(100% - 12px),
1349
transparent calc(100% - 12px)
1350
) 1;
1351
&.start:dir(ltr),
1353
&.end:dir(rtl) {
1354
padding-right: $container-padding;
1355
border-right: 1px solid;
1356
}
1357
&.start:dir(rtl),
1359
&.end:dir(ltr) {
1360
padding-left: $container-padding;
1361
border-left: 1px solid;
1362
}
1363
}
1364
button {
1366
}
1367
}
1368
/**
1370
* Header bars
1371
*/
1372
.titlebar {
1374
transition: background-color $duration $ease-out, color $duration $ease-out;
1375
border-radius: $corner-radius $corner-radius 0 0;
1376
box-shadow: $shadow-z2, inset 0 1px highlight($titlebar);
1377
background-color: $titlebar;
1378
color: $on-titlebar;
1379
&:disabled {
1381
color: disabled($on-titlebar);
1382
}
1383
&:backdrop {
1385
background-color: $titlebar-backdrop;
1386
color: hint($on-titlebar);
1387
&:disabled {
1389
color: disabled-hint($on-titlebar);
1390
}
1391
}
1392
box.start,
1394
box.end {
1395
border-spacing: $container-padding;
1396
}
1397
.title {
1399
padding-left: 12px;
1400
padding-right: 12px;
1401
font-weight: bold;
1402
}
1403
.subtitle {
1405
padding-left: 12px;
1406
padding-right: 12px;
1407
font-size: smaller;
1408
}
1409
.subtitle,
1411
.dim-label {
1412
transition: color $duration $ease-out;
1413
color: hint($on-titlebar);
1414
&:backdrop {
1416
color: disabled($on-titlebar);
1417
}
1418
}
1419
// The separator for split headerbars
1421
headerbar + separator {
1422
background-color: divider($on-titlebar);
1423
}
1424
entry {
1426
box-shadow: inset 0 -1px stroke($on-titlebar);
1427
background-color: entry-fill($on-titlebar);
1428
color: $on-titlebar;
1429
&:disabled {
1431
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1432
background-color: entry-fill($on-titlebar);
1433
color: disabled($on-titlebar);
1434
}
1435
image {
1437
color: hint($on-titlebar);
1438
&:hover,
1440
&:active {
1441
color: $on-titlebar;
1442
}
1443
&:disabled {
1445
color: disabled($on-titlebar);
1446
}
1447
}
1448
}
1449
.linked:not(.vertical) > entry:not(:only-child) {
1451
border-radius: $corner-radius $corner-radius 0 0;
1452
}
1453
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1455
@extend %button-flat;
1456
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1458
$titlebar-indicator 0%,
1459
transparent 0%)
1460
0 0 0 / 0 0 0px;
1461
background-color: transparent;
1462
color: hint($on-titlebar);
1463
@include ink-color($on-titlebar);
1464
&:disabled {
1466
color: disabled-hint($on-titlebar);
1467
}
1468
@at-root %titlebar-button-checked,
1470
&:checked {
1471
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1472
$titlebar-indicator 100%,
1473
transparent 100%)
1474
0 0 2 / 0 0 2px;
1475
background-color: transparent;
1476
color: $on-titlebar;
1477
@include ink-color($on-titlebar);
1478
&:disabled {
1480
background-color: transparent;
1481
color: disabled($on-titlebar);
1482
}
1483
}
1484
&:backdrop {
1486
color: disabled($on-titlebar);
1487
&:disabled {
1489
color: disabled-hint($on-titlebar);
1490
}
1491
&:checked {
1493
color: hint($on-titlebar);
1494
&:disabled {
1496
color: disabled-hint($on-titlebar);
1497
}
1498
}
1499
}
1500
}
1501
button.suggested-action,
1503
button.destructive-action {
1504
&:disabled {
1505
background-color: fill($on-titlebar);
1506
color: disabled($on-titlebar);
1507
}
1508
}
1509
// FIXME: Ugly overriding
1511
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1512
min-width: 120px - 8px * 2;
1513
}
1514
// FIXME: Ugly overriding
1516
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1517
min-width: 0;
1518
padding-left: ($medium-size - 24px) / 2;
1519
padding-right: ($medium-size - 24px) / 2;
1520
}
1521
&.selection-mode {
1523
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1524
// but let's keep it for backwards compatibility.
1525
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1526
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1527
box-shadow: $shadow-z2, inset 0 1px highlight($primary);
1528
background-color: $primary;
1529
color: $on-primary;
1530
&:backdrop {
1532
color: hint($on-primary);
1533
}
1534
.subtitle:link {
1536
color: $on-primary;
1537
}
1538
button:not(.suggested-action):not(.destructive-action) {
1540
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1541
currentColor 0%,
1542
transparent 0%)
1543
0 0 0 / 0 0 0px;
1544
color: $on-primary;
1545
&:disabled {
1547
color: disabled($on-primary);
1548
}
1549
&:checked {
1551
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1552
currentColor 100%,
1553
transparent 100%)
1554
0 0 2 / 0 0 2px;
1555
color: $on-primary;
1556
&:disabled {
1558
color: disabled($on-primary);
1559
}
1560
}
1561
&:backdrop {
1563
color: hint($on-primary);
1564
&:disabled {
1566
color: disabled-hint($on-primary);
1567
}
1568
&:checked {
1570
color: hint($on-primary);
1571
&:disabled {
1573
color: disabled-hint($on-primary);
1574
}
1575
}
1576
}
1577
}
1578
.selection-menu {
1580
padding-left: 16px;
1581
padding-right: 16px;
1582
.arrow {
1584
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1585
}
1586
}
1587
}
1588
.selection-mode {
1590
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1591
background-color: $primary;
1592
}
1593
// squared corners when the window is maximized, tiled, or fullscreen
1595
.tiled &,
1596
.tiled-top &,
1597
.tiled-right &,
1598
.tiled-bottom &,
1599
.tiled-left &,
1600
.maximized &,
1601
.fullscreen & {
1602
border-radius: 0;
1603
box-shadow: $shadow-z2;
1604
}
1605
&.default-decoration {
1607
min-height: $small-size;
1608
padding: $container-padding;
1609
box-shadow: inset 0 1px highlight($titlebar);
1610
.tiled &,
1612
.maximized &,
1613
.fullscreen & {
1614
box-shadow: none;
1615
}
1616
button.titlebutton {
1618
min-height: $small-size;
1619
min-width: $small-size;
1620
margin: 0;
1621
padding: 0;
1622
}
1623
// workaround for non-animatable buttons
1625
.background:not(.csd) & button.titlebutton:active {
1626
background-size: 1000% 1000%;
1627
}
1628
}
1629
.solid-csd & {
1631
&:dir(rtl), &:dir(ltr) { // specificity bump
1632
border-radius: 0;
1633
box-shadow: $shadow-z2; // just remove the highlight
1634
}
1635
}
1636
}
1637
headerbar > windowhandle > box {
1639
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1640
min-height: $large-size;
1641
padding: 0 $container-padding;
1642
border-spacing: $container-padding;
1643
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1645
entry,
1646
spinbutton,
1647
button {
1648
margin-top: $container-padding;
1649
margin-bottom: $container-padding;
1650
}
1651
separator.titlebutton {
1653
margin-top: $large-size / 4;
1654
margin-bottom: $large-size / 4;
1655
background-color: divider($on-titlebar);
1656
}
1657
switch {
1659
margin-top: ($large-size - 24px) / 2;
1660
margin-bottom: ($large-size - 24px) / 2;
1661
}
1662
// reset button margins of the spinbutton
1664
spinbutton button {
1665
margin-top: 0;
1666
margin-bottom: 0;
1667
}
1668
// FIXME: This is a hacky workaround.
1670
.entry-tag {
1671
margin-top: 5px;
1672
margin-bottom: 5px;
1673
}
1674
}
1675
// Development versions of apps to use a differently styled headerbar
1677
window.devel .titlebar:not(.selection-mode) {
1678
}
1679
/**
1681
* Pathbars
1682
*/
1683
%pathbar_button,
1685
pathbar.linked:not(.vertical) > button {
1686
@extend %button-flat-basic;
1687
padding-left: ($medium-size - 24px) / 2;
1689
padding-right: ($medium-size - 24px) / 2;
1690
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1691
$primary 0%,
1692
transparent 0%)
1693
0 0 0 / 0 0 0px;
1694
border-radius: $corner-radius;
1695
&:checked {
1697
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1698
$primary 100%,
1699
transparent 100%)
1700
0 0 2 / 0 0 2px;
1701
color: $on-surface;
1702
&,
1704
&:disabled {
1705
background-color: transparent;
1706
}
1707
}
1708
label:not(:only-child) {
1710
&:first-child {
1711
margin-left: 0;
1712
}
1713
&:last-child {
1715
margin-right: 0;
1716
}
1717
}
1718
&.text-button {
1720
min-width: 0;
1721
}
1722
&.slider-button {
1724
padding-left: (24px - 16px) / 2;
1725
padding-right: (24px - 16px) / 2;
1726
}
1727
}
1728
/**
1730
* Tree Views
1731
*/
1732
columnview.view,
1734
treeview.view {
1735
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1736
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1737
// to avoid borders being overridden by the previously set props
1739
> rubberband {
1740
@extend rubberband;
1741
}
1742
// FIXME: Avoid transparency background-color being slightly darker
1744
&:selected {
1745
// background-color: $surface-z1;
1746
// background-image: image($overlay-selected);
1747
}
1748
&:hover,
1750
&:selected {
1751
// border-radius: 0;
1752
}
1753
&.separator {
1755
min-height: 1px + 2px * 2;
1756
color: divider($on-surface);
1757
}
1758
&:drop(active) {
1760
box-shadow: none;
1761
}
1762
> dndtarget:drop(active) {
1764
// FIXME: box-shadow, background-color and background-image are not available here.
1765
border-style: solid none;
1766
border-width: 9999px;
1767
border-color: overlay("hover", $on-surface);
1768
&.after {
1770
border-top-style: none;
1771
}
1772
&.before {
1774
border-bottom-style: none;
1775
}
1776
}
1777
&.expander {
1779
// GtkTreeView uses the larger of the expander’s min-width and min-height
1780
min-width: 16px;
1781
min-height: 16px;
1782
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1783
-gtk-icon-transform: rotate(-90deg);
1784
&:dir(rtl) {
1786
-gtk-icon-transform: rotate(90deg);
1787
}
1788
&:checked {
1790
-gtk-icon-transform: unset;
1791
}
1792
color: hint($on-surface);
1794
&:hover,
1796
&:active {
1797
color: $on-surface;
1798
}
1799
&:disabled {
1801
color: disabled-hint($on-surface);
1802
}
1803
}
1804
&.progressbar { // progress bar in treeviews
1806
border-bottom: $bar-size solid $primary;
1807
background-color: transparent;
1808
&:selected:hover {
1810
background-color: transparent;
1811
}
1812
}
1813
&.trough { // progress bar trough in treeviews
1815
border-bottom: $bar-size solid disabled-stroke($on-surface);
1816
background-color: transparent;
1817
&:selected:hover {
1819
background-color: transparent;
1820
}
1821
}
1822
> header {
1824
> button {
1825
padding: 2px 6px;
1826
border-style: none solid solid none;
1827
border-width: 1px;
1828
border-color: divider($on-surface);
1829
border-radius: 0;
1830
background-clip: padding-box;
1831
background-color: transparent;
1832
color: hint($on-surface);
1833
@include ink-color($on-surface, $hover-alt: true, $button-style: "flat");
1834
@include list-item;
1835
&:disabled {
1837
color: disabled-hint($on-surface);
1838
}
1839
&,
1841
&:disabled {
1842
// background-color: $surface-z1;
1843
}
1844
&:last-child {
1846
border-right-style: none;
1847
}
1848
}
1849
}
1850
button.dnd,
1852
header.button.dnd { // for treeview-like derive widgets
1853
padding: 2px 6px;
1854
border-style: none solid solid;
1855
border-width: 1px;
1856
border-color: divider($on-surface);
1857
border-radius: 0;
1858
box-shadow: none;
1859
// background-color: $surface-z1;
1860
background-clip: border-box;
1861
color: $primary;
1862
}
1863
// see tests/testaccel to test
1865
acceleditor > label {
1866
background-color: $primary;
1867
}
1868
}
1869
/**
1871
* Menus
1872
*/
1873
menubar {
1875
// box-shadow: inset 0 -1px divider($on-surface);
1876
background-color: $titlebar;
1877
color: $on-titlebar;
1878
&:backdrop {
1880
background-color: $titlebar-backdrop;
1881
color: hint($on-titlebar);
1882
}
1883
.csd & {
1885
transition: $transition;
1886
}
1887
> item {
1889
// transition: $transition;
1890
min-height: 20px;
1891
padding: 4px 8px;
1892
color: hint($on-titlebar);
1893
@extend %ripple;
1895
// @include ink-color($on-titlebar);
1896
&:hover {
1898
background-color: overlay("hover", $on-titlebar);
1899
}
1900
&:focus:not(:hover) {
1902
background-color: overlay("focus", $on-titlebar);
1903
}
1904
&:active {
1906
background-image: radial-gradient(circle, overlay("pressed", $on-titlebar) 10%, transparent 10%);
1907
}
1908
&:selected:not(:focus) {
1910
transition: none;
1911
background-color: overlay("activated", $on-titlebar);
1912
color: $on-titlebar;
1913
}
1914
&:disabled {
1916
color: disabled-hint($on-titlebar);
1917
}
1918
}
1919
}
1920
popover.menu {
1922
> contents {
1923
padding: 6px 0;
1924
}
1925
separator {
1927
margin: 6px 0;
1928
}
1929
label.title {
1931
min-height: 32px - 4px * 2;
1932
padding: 4px 32px; // this will fall apart with font sizing
1933
font-weight: bold;
1934
}
1935
modelbutton {
1937
// transition: background-color $duration $ease-out;
1938
min-height: 30px - 4px * 2;
1939
min-width: 40px;
1940
padding: 4px 32px;
1941
&:hover {
1943
// transition: none;
1944
// background-color: overlay("hover", $on-surface);
1945
}
1946
&:disabled {
1948
color: disabled($on-surface);
1949
}
1950
accelerator {
1952
color: hint($on-surface);
1953
&:dir(ltr) {
1955
margin-left: 24px;
1956
margin-right: 16px - 32px;
1957
}
1958
&:dir(rtl) {
1960
margin-left: 16px - 32px;
1961
margin-right: 24px;
1962
}
1963
}
1964
&:disabled accelerator {
1966
color: disabled-hint($on-surface);
1967
}
1968
}
1969
check,
1971
radio {
1972
&,
1973
&:focus,
1974
&:hover,
1975
&:active,
1976
&:disabled {
1977
// transition: none;
1978
background-color: transparent;
1979
background-image: none;
1980
}
1981
}
1982
arrow,
1984
check,
1985
radio {
1986
min-width: 16px;
1987
min-height: 16px;
1988
margin: 0;
1989
padding: 0;
1990
&.left {
1992
margin-left: 8px - 32px;
1993
margin-right: 8px;
1994
}
1995
&.right {
1997
margin-left: 8px;
1998
margin-right: 8px - 32px;
1999
}
2000
}
2001
button.model {
2003
@extend %button-flat;
2004
// min-height: 32px;
2006
// padding: 0 8px;
2007
// border-radius: $corner-radius;
2008
&:checked {
2010
// color: $primary;
2011
}
2012
}
2013
box.inline-buttons {
2015
padding: 0 8px;
2016
button.image-button.model {
2018
}
2019
}
2020
box.circular-buttons {
2022
padding: 4px 32px;
2023
button.circular.image-button.model {
2025
padding: 12px;
2026
}
2027
}
2028
}
2029
/**
2031
* Popovers
2032
*/
2033
popover {
2035
font: initial; // Decouple the font of popovers from their entry/textview
2036
&.background {
2038
background-color: transparent;
2039
}
2040
> arrow,
2042
> contents {
2043
transition: $transition-shadow;
2044
box-shadow: $shadow-z4;
2045
background-color: $surface-z8;
2046
color: $on-surface;
2047
&:backdrop {
2049
box-shadow: $shadow-z2;
2050
}
2051
}
2052
@at-root %popover-border {
2054
border-width: 1px;
2055
border-style: solid;
2056
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2057
background-clip: padding-box;
2058
}
2059
> arrow {
2061
@extend %popover-border;
2062
}
2063
> contents {
2065
padding: 8px;
2066
@if $version >= 4.2 {
2068
border-radius: $corner-radius;
2069
} @else {
2070
@extend %popover-border;
2071
border-radius: $corner-radius + 1px;
2072
}
2073
> list,
2075
.view,
2076
> .toolbar {
2077
border-style: none;
2078
box-shadow: none;
2079
background-color: transparent;
2080
}
2081
separator {
2083
// margin: 4px 0;
2084
}
2085
list separator {
2087
// margin: 0;
2088
}
2089
}
2090
.osd &,
2092
&.touch-selection,
2093
&.magnifier {
2094
// @extend %osd;
2095
}
2096
button {
2098
@extend %button-outlined;
2099
}
2100
frame,
2102
.frame {
2103
border: 1px solid divider($on-surface);
2104
box-shadow: none;
2105
background-color: transparent;
2106
}
2107
.linked:not(.vertical) > entry:not(:only-child) {
2109
// border-radius: $corner-radius $corner-radius 0 0;
2110
}
2111
}
2112
/**
2114
* Notebooks
2115
*/
2116
notebook {
2118
&:focus:focus-visible > header > tabs > tab:checked {
2119
background-color: overlay("focus", $primary);
2120
}
2121
> header {
2123
&.top {
2124
box-shadow: inset 0 -1px divider($on-surface);
2125
> tabs {
2127
> tab {
2128
box-shadow: inset 0 -2px transparent;
2129
&:checked {
2131
box-shadow: inset 0 -2px $primary;
2132
}
2133
}
2134
}
2135
}
2136
&.bottom {
2138
box-shadow: inset 0 1px divider($on-surface);
2139
> tabs {
2141
> tab {
2142
box-shadow: inset 0 2px transparent;
2143
&:checked {
2145
box-shadow: inset 0 2px $primary;
2146
}
2147
}
2148
}
2149
}
2150
&.left {
2152
box-shadow: inset -1px 0 divider($on-surface);
2153
> tabs {
2155
> tab {
2156
box-shadow: inset -2px 0 transparent;
2157
&:checked {
2159
box-shadow: inset -2px 0 $primary;
2160
}
2161
}
2162
}
2163
}
2164
&.right {
2166
box-shadow: inset 1px 0 divider($on-surface);
2167
> tabs {
2169
> tab {
2170
box-shadow: inset 2px 0 transparent;
2171
&:checked {
2173
box-shadow: inset 2px 0 $primary;
2174
}
2175
}
2176
}
2177
}
2178
&.top > tabs > arrow {
2180
@extend %notebook_vert_arrows;
2181
}
2182
&.bottom > tabs > arrow {
2184
@extend %notebook_vert_arrows;
2185
}
2186
@at-root %notebook_vert_arrows {
2188
&.down {
2189
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2190
}
2191
&.up {
2193
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2194
}
2195
}
2196
&.left > tabs > arrow {
2198
@extend %notebook_horz_arrows;
2199
}
2200
&.right > tabs > arrow {
2202
@extend %notebook_horz_arrows;
2203
}
2204
@at-root %notebook_horz_arrows {
2206
&.down {
2207
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2208
}
2209
&.up {
2211
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2212
}
2213
}
2214
> tabs > arrow {
2216
min-height: 16px;
2217
min-width: 16px;
2218
padding: 4px;
2219
border-radius: 0;
2220
color: hint($on-surface);
2221
@extend %ripple;
2222
@include ink-color($on-surface, $hover-alt: true);
2223
&:disabled {
2225
color: disabled-hint($on-surface);
2226
}
2227
}
2228
> tabs > tab {
2230
@extend %ripple;
2231
@include ink-color($on-surface, $hover-alt: true);
2232
min-height: $small-size;
2233
min-width: $small-size;
2234
padding: $container-padding 12px;
2235
color: hint($on-surface);
2236
font-weight: 500;
2237
&:hover {
2239
// background-color: overlay("hover-alt", $on-surface);
2240
}
2241
&:active {
2243
// background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
2244
}
2245
&:disabled {
2247
color: disabled-hint($on-surface);
2248
}
2249
&:checked {
2251
@include ink-color($primary, $hover-alt: true);
2252
color: $primary;
2253
&:hover {
2255
// background-color: overlay("hover-alt", $primary);
2256
}
2257
&:active {
2259
// background-image: radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2260
}
2261
&:disabled {
2263
color: disabled-hint($on-surface);
2264
}
2265
&.reorderable-page {
2267
// border-color: divider($on-surface);
2268
// background-color: $surface-z1;
2269
}
2270
}
2271
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2273
> box {
2274
transition: background-color $duration $ease-out;
2275
margin: -$container-padding -12px;
2276
padding: $container-padding 12px;
2277
&:drop(active) {
2279
background-color: overlay("hover", $on-surface);
2280
}
2281
}
2282
// colors the button like the label, overridden otherwise
2284
button.flat {
2285
@extend %button-small;
2286
&:last-child {
2288
margin-left: $container-padding;
2289
margin-right: $container-padding - 12px;
2290
}
2291
&:first-child {
2293
margin-left: $container-padding - 12px;
2294
margin-right: $container-padding;
2295
}
2296
}
2297
}
2298
}
2299
}
2300
/**
2302
* Scrollbars
2303
*/
2304
scrollbar {
2306
$_slider_min_length: 24px;
2307
transition: $transition;
2309
background-clip: padding-box;
2310
// background-color: $surface-z1;
2311
// scrollbar border
2313
&.top { border-bottom: 1px solid divider($on-surface); }
2314
&.bottom { border-top: 1px solid divider($on-surface); }
2315
&.left { border-right: 1px solid divider($on-surface); }
2316
&.right { border-left: 1px solid divider($on-surface); }
2317
// slider
2319
> range > trough > slider {
2320
transition: background-color $duration $ease-out;
2321
min-width: 10px;
2322
min-height: 10px;
2323
border: 3px solid transparent;
2324
border-radius: $circular-radius;
2325
background-clip: padding-box;
2326
background-color: scrollbar-thumb($on-surface);
2327
&:hover {
2329
background-color: scrollbar-thumb($on-surface, "hover");
2330
}
2331
&:active {
2333
background-color: scrollbar-thumb($on-surface, "pressed");
2334
}
2335
&:disabled {
2337
background-color: scrollbar-thumb($on-surface, "disabled");
2338
}
2339
}
2340
&.horizontal > range > trough > slider {
2342
min-width: $_slider_min_length;
2343
}
2344
&.vertical > range > trough > slider {
2346
min-height: $_slider_min_length;
2347
}
2348
> range.fine-tune {
2350
> trough > slider {
2351
min-width: 4px;
2352
min-height: 4px;
2353
}
2354
&.horizontal > trough > slider {
2356
margin: 3px 0;
2357
}
2358
&.vertical > trough > slider {
2360
margin: 0 3px;
2361
}
2362
}
2363
&.overlay-indicator {
2365
> range:not(.fine-tune) > trough > slider {
2366
transition-property: background-color, min-height, min-width;
2367
}
2368
&:not(.dragging):not(.hovering) {
2370
border-color: transparent;
2371
background-color: transparent;
2372
> range > trough > slider {
2374
min-width: 4px;
2375
min-height: 4px;
2376
margin: 3px - 1px;
2377
border: 1px solid rgba($surface-z1, 0.3);
2378
}
2379
&.horizontal > range > trough > slider {
2381
min-width: $_slider_min_length;
2382
}
2383
&.vertical > range > trough > slider {
2385
min-height: $_slider_min_length;
2386
}
2387
}
2388
&.dragging,
2390
&.hovering {
2391
background-color: $surface-z8;
2392
}
2393
}
2394
}
2395
/**
2397
* Switch
2398
*/
2399
switch {
2401
transition: all $duration $ease-out;
2402
margin: $container-padding 0;
2403
padding: 0 2px;
2404
border: 5px solid transparent;
2405
border-radius: $circular-radius;
2406
background-color: stroke($on-surface);
2407
background-clip: padding-box;
2408
font-size: 0;
2409
&:checked {
2411
background-color: rgba($primary, .5);
2412
}
2413
&:disabled {
2415
opacity: .5;
2416
}
2417
// hide on/off icons for >=3.24.5
2419
> image {
2420
margin: -8px;
2421
-gtk-icon-transform: scale(0);
2422
}
2423
> slider {
2425
transition: all $duration $ease-out;
2426
min-width: 20px;
2427
min-height: 20px;
2428
margin: -3px -2px;
2429
border-radius: $circular-radius;
2430
box-shadow:
2431
0 0 0 10px transparent,
2432
0 0 0 -10px overlay("pressed", $on-surface),
2433
$shadow-z1;
2434
background-color: $surface-switch-thumb;
2435
}
2436
&:hover > slider {
2438
box-shadow:
2439
0 0 0 10px overlay("hover", $on-surface),
2440
0 0 0 -10px overlay("pressed", $on-surface),
2441
$shadow-z1;
2442
}
2443
&:focus > slider {
2445
box-shadow:
2446
0 0 0 10px overlay("focus", $on-surface),
2447
0 0 0 -10px overlay("pressed", $on-surface),
2448
$shadow-z1;
2449
}
2450
&:active > slider {
2452
box-shadow:
2453
0 0 0 10px overlay("hover", $on-surface),
2454
0 0 0 10px overlay("pressed", $on-surface),
2455
$shadow-z1;
2456
}
2457
&:checked > slider {
2459
background-color: $primary;
2460
}
2461
&:checked:hover > slider {
2463
box-shadow:
2464
0 0 0 10px overlay("hover", $primary),
2465
0 0 0 -10px overlay("pressed", $primary),
2466
$shadow-z1;
2467
}
2468
&:checked:focus > slider {
2470
box-shadow:
2471
0 0 0 10px overlay("focus", $primary),
2472
0 0 0 -10px overlay("pressed", $primary),
2473
$shadow-z1;
2474
}
2475
&:checked:active > slider {
2477
box-shadow:
2478
0 0 0 10px overlay("hover", $primary),
2479
0 0 0 10px overlay("pressed", $primary),
2480
$shadow-z1;
2481
}
2482
row:selected & {
2484
}
2485
}
2486
/**
2488
* Check and Radio items
2489
*/
2490
// draw regular check and radio items using our PNG assets
2492
// all assets are rendered from assets.svg. never add pngs directly
2493
// selection-mode
2495
.view.content-view.check:not(list),
2496
.content-view:not(list) .tile check {
2497
min-height: 40px;
2498
min-width: 40px;
2499
margin: 0;
2500
padding: 0;
2501
background-color: transparent;
2502
background-image: none;
2503
-gtk-icon-shadow: $icon-shadow-z2;
2504
&:hover,
2506
&:active {
2507
-gtk-icon-shadow: $icon-shadow-z4;
2508
}
2509
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2511
&#{$class} {
2512
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2513
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2515
}
2516
}
2517
}
2518
checkbutton,
2520
radiobutton {
2521
border-spacing: 4px;
2522
&.text-button {
2524
padding: 4px;
2525
}
2526
}
2527
$check-radio-size: 40px;
2529
check,
2531
radio {
2532
min-height: 24px;
2533
min-width: 24px;
2534
margin: -($check-radio-size - 24px) / 2;
2535
padding: ($check-radio-size - 24px) / 2;
2536
border-radius: $circular-radius;
2537
color: hint($on-surface);
2538
@extend %ripple;
2539
@include ink-color($on-surface);
2540
&:checked,
2542
&:indeterminate {
2543
color: $primary;
2544
@include ink-color($primary);
2545
}
2546
&:disabled {
2548
color: disabled-hint($on-surface);
2549
}
2550
}
2551
%check,
2553
check {
2554
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2555
&:checked {
2557
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2558
}
2559
&:indeterminate {
2561
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2562
}
2563
}
2564
%radio,
2566
radio {
2567
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2568
&:checked {
2570
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2571
}
2572
&:indeterminate {
2574
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2575
}
2576
border-image-slice: $check-radio-size / 2px;
2578
border-image-width: $check-radio-size / 2;
2579
$radio-indicator-size: 10px / $check-radio-size / 2;
2581
border-image-source: radial-gradient(circle, $primary 0%, transparent 0%);
2583
&:checked:not(:indeterminate) {
2585
border-image-source: radial-gradient(circle, $primary 4.5px, transparent 5px);
2586
&:disabled {
2588
border-image-source: radial-gradient(circle, disabled-hint($on-surface) 4.5px, transparent 5px);
2589
}
2590
}
2591
}
2592
%small_check,
2594
popover.menu modelbutton check {
2595
min-height: 16px;
2596
min-width: 16px;
2597
border-radius: $corner-radius;
2598
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2599
&:checked {
2601
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2602
}
2603
&:indeterminate {
2605
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2606
}
2607
}
2608
%small_radio,
2610
popover.menu modelbutton radio {
2611
min-height: 16px;
2612
min-width: 16px;
2613
border-image: none;
2614
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2615
&:checked {
2617
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2618
}
2619
&:indeterminate {
2621
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2622
}
2623
}
2624
// ANIMATION:
2626
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2627
// the transformation is set on the active state and it get reset on the checked state.
2628
radio:not(:checked):active {
2629
// -gtk-icon-transform: scale(0);
2630
}
2631
// Otherwise, treeview.view styling will be applied...
2633
treeview.view check,
2634
treeview.view radio {
2635
padding: 0;
2636
color: hint($on-surface);
2637
&:checked,
2639
&:indeterminate {
2640
color: $primary;
2641
}
2642
&:disabled {
2644
color: disabled-hint($on-surface);
2645
}
2646
&,
2648
&:hover,
2649
&:selected,
2650
&:selected:hover {
2651
background-color: transparent;
2652
}
2653
}
2654
treeview.view radio:checked {
2656
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2657
border-image: none;
2658
}
2659
/**
2661
* GtkScale
2662
*/
2663
scale {
2665
// sizing
2666
$_marks_length: 8px;
2667
$_marks_distance: 7px;
2668
$trough_size: 2px;
2670
$finetune_trough_size: 4px;
2671
$slider_size: 32px;
2673
$slider_margin: -($slider_size - $trough_size) / 2;
2675
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2676
$color_slider_margin: -($slider_size) * 3 / 4;
2678
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2679
min-height: $trough_size;
2681
min-width: $trough_size;
2682
&.horizontal {
2684
padding: ($medium-size - $trough_size) / 2 12px;
2685
}
2686
&.vertical {
2688
padding: 12px ($medium-size - $trough_size) / 2;
2689
}
2690
// click-and-hold the slider to activate
2692
&.fine-tune {
2693
&.horizontal {
2694
min-height: $finetune_trough_size;
2695
padding-top: ($medium-size - $finetune_trough_size) / 2;
2696
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2697
}
2698
&.vertical {
2700
min-width: $finetune_trough_size;
2701
padding-left: ($medium-size - $finetune_trough_size) / 2;
2702
padding-right: ($medium-size - $finetune_trough_size) / 2;
2703
}
2704
// to make the trough grow in fine-tune mode
2706
> trough > slider {
2707
margin: $finetune_slider_margin;
2708
}
2709
}
2710
// the backing bit
2712
> trough {
2713
transition: background-color $duration $ease-out;
2714
background-color: stroke($on-surface);
2715
&:disabled {
2717
background-color: disabled-stroke($on-surface);
2718
}
2719
// the colored part of the backing bit
2721
> highlight {
2722
transition: background-image $duration $ease-out;
2723
background-image: image($primary);
2724
&:disabled {
2726
background-color: $surface-z0;
2727
background-image: image(disabled-hint($on-surface));
2728
}
2729
}
2730
// this is another differently styled part of the backing bit, the most relevant use case is for example
2732
// in media player to indicate how much video stream as been cached
2733
> fill {
2734
transition: background-color $duration $ease-out;
2735
background-color: stroke($on-surface);
2736
&:disabled {
2738
background-color: transparent;
2739
}
2740
}
2741
> slider {
2743
transition: background-color $duration $ease-out,
2744
background-size $ripple-fade-out-duration $ease-out,
2745
background-image $ripple-fade-out-opacity-duration $ease-out;
2746
min-width: $slider_size;
2747
min-height: $slider_size;
2748
// the slider is inside the trough, so to have make it bigger there's a negative margin
2749
margin: $slider_margin;
2750
border-radius: 50%;
2751
background-repeat: no-repeat;
2752
background-position: center;
2753
background-size: auto, 1000% 1000%;
2754
color: $primary;
2755
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2757
&#{$class} {
2758
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2759
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2761
radial-gradient(circle, transparent 10%, transparent 10%);
2762
}
2763
}
2764
&:hover {
2766
background-color: overlay("hover", $primary);
2767
}
2768
&:focus {
2770
background-color: overlay("focus", $primary);
2771
}
2772
&:active {
2774
$_url: 'assets/scale-slider#{$asset-suffix}';
2775
transition: background-color $duration $ease-out,
2777
background-size 0ms,
2778
background-image 0ms;
2779
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2780
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2781
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2782
background-size: auto, 0% 0%;
2783
}
2784
}
2785
}
2786
> marks,
2788
> value {
2789
color: hint($on-surface);
2790
}
2791
> value {
2793
font-feature-settings: "tnum";
2794
}
2795
indicator {
2797
background-color: stroke($on-surface);
2798
}
2799
//marks margins
2801
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2802
(horizontal, bottom, bottom, top),
2803
(vertical, top, left, right),
2804
(vertical, bottom, right, left) {
2805
&.#{$scale_orient} > marks {
2806
&.#{$marks_class} {
2807
margin-#{$marks_margin}: $_marks_distance;
2808
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2809
}
2810
}
2811
&.#{$scale_orient}.fine-tune > marks {
2813
&.#{$marks_class} {
2814
margin-#{$marks_margin}: $_marks_distance - 1px;
2815
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2816
}
2817
}
2818
}
2819
&.horizontal {
2821
indicator {
2822
min-height: $_marks_length;
2823
min-width: 1px;
2824
}
2825
}
2826
&.vertical {
2828
indicator {
2829
min-height: 1px;
2830
min-width: $_marks_length;
2831
}
2832
}
2833
// *WARNING* scale with marks madness following
2835
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2837
@each $marks_class, $marks_infix in (
2838
".marks-before:not(.marks-after)": "-marks-before",
2839
".marks-after:not(.marks-before)": "-marks-after"
2840
) {
2841
&#{$dir_class}#{$marks_class} > trough > slider {
2842
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2843
&#{$state_class} {
2844
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2845
background-image:
2847
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2848
radial-gradient(circle, transparent 10%, transparent 10%);
2849
}
2850
}
2851
&:active {
2853
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2854
background-image:
2856
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2857
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2858
}
2859
}
2860
}
2861
}
2862
&.color {
2864
min-height: 0;
2865
min-width: 0;
2866
&.horizontal {
2868
// specificity bump
2869
&:dir(ltr),
2870
&:dir(rtl) {
2871
padding: 0 0 12px 0;
2872
slider {
2874
margin-bottom: $color_slider_margin;
2875
margin-top: $color_marks_slider_margin;
2876
}
2877
}
2878
}
2879
&.vertical {
2881
&:dir(ltr) {
2882
padding: 0 0 0 12px;
2883
slider {
2885
margin-left: $color_slider_margin;
2886
margin-right: $color_marks_slider_margin;
2887
}
2888
}
2889
&:dir(rtl) {
2891
padding: 0 12px 0 0;
2892
slider {
2894
margin-right: $color_slider_margin;
2895
margin-left: $color_marks_slider_margin;
2896
}
2897
}
2898
}
2899
}
2900
}
2901
/**
2903
* Progress bars
2904
*/
2905
progressbar {
2907
// FIXME: insensitive state missing and some other state should be set probably
2908
color: hint($on-surface);
2909
font-size: smaller;
2910
font-feature-settings: "tnum";
2911
> trough {
2913
background-color: disabled-stroke($on-surface);
2914
> progress {
2916
background-color: $primary;
2917
}
2918
}
2919
// sizing
2921
&.horizontal > trough {
2922
min-width: 150px;
2923
&,
2925
> progress {
2926
min-height: $bar-size;
2927
}
2928
}
2929
&.vertical > trough {
2931
min-height: 80px;
2932
&,
2934
> progress {
2935
min-width: $bar-size;
2936
}
2937
}
2938
// progressbar.osd used for epiphany page loading progress
2940
&.osd {
2941
// min-width: $bar-size;
2942
// min-height: $bar-size;
2943
// background-color: transparent;
2944
> trough {
2946
// background-color: transparent;
2947
> progress {
2949
// background-color: $primary;
2950
}
2951
}
2952
}
2953
// makes the progress indicator disappear, when the fraction is 0
2955
> trough.empty > progress {
2956
all: unset;
2957
}
2958
}
2959
/**
2961
* Level Bar
2962
*/
2963
levelbar {
2965
&.horizontal {
2966
> trough > block {
2967
min-height: $bar-size;
2968
}
2969
&.discrete > trough > block {
2971
min-width: $medium-size;
2972
&:not(:last-child) {
2974
margin-right: 2px;
2975
}
2976
}
2977
}
2978
&.vertical {
2980
> trough > block {
2981
min-width: $bar-size;
2982
}
2983
&.discrete > trough > block {
2985
min-height: $medium-size;
2986
&:not(:last-child) {
2988
margin-bottom: 2px;
2989
}
2990
}
2991
}
2992
> trough {
2994
}
2995
> trough > block {
2997
&.low {
2998
background-color: $warning;
2999
}
3000
&.high,
3002
&:not(.empty) {
3003
background-color: $primary;
3004
}
3005
&.full {
3007
background-color: $success;
3008
}
3009
&.empty {
3011
background-color: disabled-stroke($on-surface);
3012
}
3013
}
3014
}
3015
/**
3017
* Print dialog
3018
*/
3019
window.dialog.print {
3021
paper {
3022
// padding: 0;
3023
// border: 1px solid divider($on-surface);
3024
border-radius: $corner-radius;
3025
box-shadow: $shadow-z1;
3026
background-color: $surface-z1;
3027
color: $on-surface;
3028
}
3029
.dialog-action-box {
3031
margin: 12px;
3032
}
3033
}
3034
/**
3036
* Frames
3037
*/
3038
frame,
3040
.frame {
3041
// border: 1px solid divider($on-surface);
3042
border-radius: $corner-radius;
3043
box-shadow: $shadow-z1;
3044
background-color: $surface-z1;
3045
color: $on-surface;
3046
button {
3048
@extend %button-outlined;
3049
}
3050
}
3051
frame > label {
3053
margin: 4px;
3054
}
3055
statusbar {
3057
padding: 6px 10px;
3058
// border-top: 1px solid divider($on-surface);
3059
}
3060
actionbar > revealer > box {
3062
padding: $container-padding;
3063
border-spacing: $container-padding;
3064
border-top: 1px solid divider($on-surface);
3065
// background-clip: border-box;
3066
button:not(.suggested-action):not(.destructive-action) {
3068
@extend %button-flat;
3069
}
3070
.linked:not(.vertical) > entry:not(:only-child) {
3072
border-radius: $corner-radius $corner-radius 0 0;
3073
}
3074
}
3075
scrolledwindow {
3077
// This is used when content is touch-dragged past boundaries.
3078
// draws a box on top of the content, the size changes programmatically.
3079
@at-root overshoot {
3080
&.top { @include overshoot(top); }
3081
&.bottom { @include overshoot(bottom); }
3083
&.left { @include overshoot(left); }
3085
&.right { @include overshoot(right); }
3087
}
3088
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3090
@at-root undershoot {
3091
// &.top { @include undershoot(top); }
3092
// &.bottom { @include undershoot(bottom); }
3094
// &.left { @include undershoot(left); }
3096
// &.right { @include undershoot(right); }
3098
}
3099
// the small square between two scrollbars
3101
@at-root junction {
3102
border-style: solid none none solid;
3103
border-width: 1px;
3104
border-color: divider($on-surface);
3105
// background-color: $surface-z1;
3106
&:dir(rtl) {
3108
border-style: solid solid none none;
3109
}
3110
}
3111
}
3112
// vbox and hbox separators
3114
separator {
3115
min-width: 1px;
3116
min-height: 1px;
3117
background-color: divider($on-surface);
3118
}
3119
%hide_separators {
3121
min-width: 0;
3122
min-height: 0;
3123
background-color: transparent;
3124
}
3125
/**
3127
* Lists
3128
*/
3129
listview,
3131
list {
3132
// background-color: $surface-z1;
3133
// color: $on-surface;
3134
> row {
3136
padding: 2px;
3137
&.expander {
3139
padding: 0;
3140
.row-header {
3142
padding: 2px;
3143
}
3144
}
3145
}
3146
&.separators:not(.horizontal) > row:not(:first-child) {
3148
border-top: 1px solid divider($on-surface);
3149
}
3150
&.separators.horizontal > row:not(:first-child) {
3152
border-left: 1px solid divider($on-surface);
3153
}
3154
}
3155
row {
3157
background-clip: padding-box;
3158
&.activatable {
3160
@extend %ripple;
3161
@include ink-color($on-surface, $hover-alt: true);
3162
@include list-item;
3163
// this is for indicathing which row generated a popover
3165
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3166
&.has-open-popup {
3167
background-color: overlay("activated", $on-surface);
3168
}
3169
}
3170
&:selected {
3172
background-color: $overlay-selected;
3173
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3175
&.has-open-popup {
3177
background-color: overlay("activated", $primary, $on: $overlay-selected);
3178
}
3179
}
3180
}
3181
listview {
3183
> row {
3184
@extend %ripple;
3185
@include ink-color($on-surface, $hover-alt: true);
3186
@include list-item;
3187
}
3188
&:selected {
3190
background-color: $overlay-selected;
3191
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3193
}
3194
}
3195
columnview {
3197
// move padding to child cells
3198
> listview > row {
3199
padding: 0;
3200
// align horizontal sizing with header buttons
3202
> cell {
3203
min-height: 24px;
3204
padding: 4px 6px;
3205
&:not(:last-child) {
3207
border-right: 1px solid transparent;
3208
}
3209
}
3210
}
3211
// make column separators visible when :show-column-separators is true
3213
&.column-separators > listview > row > cell {
3214
border-right-color: divider($on-surface);
3215
}
3216
// shrink vertically for .data-table
3218
&.data-table > listview > row > cell {
3219
padding-top: 2px;
3220
padding-bottom: 2px;
3221
}
3222
}
3223
// rich lists usually containing other widgets than just labels/text
3225
.rich-list {
3226
> row {
3227
padding: 12px;
3228
min-height: $medium-size;
3229
> box {
3231
border-spacing: 12px;
3232
}
3233
}
3234
}
3235
/**
3237
* App Notifications
3238
*/
3239
.app-notification {
3241
@extend %toolbar-osd;
3242
margin: 8px;
3243
border-style: none;
3244
button {
3246
@extend %button-flat;
3247
&.text-button:not(:disabled) {
3249
color: $primary;
3250
@include ink-color($primary);
3251
}
3252
}
3253
}
3254
/**
3256
* Expanders
3257
*/
3258
expander {
3260
transition: all $duration $ease-out;
3261
min-width: 16px;
3262
min-height: 16px;
3263
padding: 4px;
3264
border-radius: $circular-radius;
3265
color: hint($on-surface);
3266
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3267
@extend %ripple;
3269
@include ink-color($on-surface);
3270
&:disabled {
3272
color: disabled-hint($on-surface);
3273
}
3274
&:checked {
3276
&:dir(ltr) {
3277
-gtk-icon-transform: rotate(-180deg);
3278
}
3279
&:dir(rtl) {
3281
-gtk-icon-transform: rotate(180deg);
3282
}
3283
}
3284
}
3285
indent {
3287
min-width: 16px;
3288
min-height: 16px;
3289
padding: 4px;
3290
}
3291
expander-widget {
3293
&:focus > box > title > expander {
3294
box-shadow: inset 0 0 0 9999px overlay("focus", $on-surface);
3295
}
3296
> box > title:drop(active) > expander,
3298
> box > title:hover > expander {
3299
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
3300
}
3301
> box > title:active > expander {
3303
transition-duration: $ripple-active-transition-duration;
3304
animation: ripple $ripple-fade-in-duration $ease-out forwards;
3305
background-size: 0% 0%;
3306
background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
3307
}
3308
}
3309
/**
3311
* Calendar
3312
*/
3313
calendar {
3315
// border: 1px solid divider($on-surface);
3316
border-radius: $corner-radius;
3317
box-shadow: $shadow-z1;
3318
background-color: $surface-z1;
3319
color: $on-surface;
3320
&:disabled {
3322
color: disabled($on-surface);
3323
}
3324
> header {
3326
padding: 4px;
3327
border-spacing: 4px;
3328
border-bottom: 1px solid divider($on-surface);
3329
> button.image-button {
3331
padding: 0;
3332
min-width: 28px;
3333
min-height: 28px;
3334
border-radius: $circular-radius;
3335
background-color: transparent;
3336
color: hint($on-surface);
3337
@include ink-color($on-surface, $button-style: "flat");
3338
&:disabled {
3340
color: disabled-hint($on-surface);
3341
}
3342
}
3343
}
3344
> grid {
3346
padding: 4px;
3347
border-spacing: 4px;
3348
> label {
3350
// padding: 4px;
3351
padding: 0;
3352
min-width: 28px;
3353
min-height: 28px;
3354
border-radius: $circular-radius;
3355
}
3356
> label.day-name,
3358
> label.week-number {
3359
color: hint($on-surface);
3360
font-weight: 500;
3361
}
3362
> label.day-number {
3364
@extend %ripple;
3365
@include ink-color($on-surface);
3366
&.today {
3368
box-shadow: inset 0 0 0 1px hint($on-surface);
3369
}
3370
&.other-month {
3372
color: disabled-hint($on-surface);
3373
}
3374
&:selected {
3376
background-color: $overlay-selected;
3377
box-shadow: inset 0 0 0 1px transparent;
3378
@include ink-color($primary, $on: $overlay-selected);
3379
}
3380
}
3381
}
3382
}
3383
/**
3385
* Dialogs
3386
*/
3387
window.dialog.message { // Message Dialog styling
3389
&.csd.background {
3390
min-width: 280px;
3391
border-radius: $corner-radius; // rounded bottom border styling for csd version
3392
background-color: $surface-z8;
3393
}
3394
> .titlebar {
3396
min-height: 24px;
3397
box-shadow: inset 0 1px highlight($surface-z8);
3398
background-color: transparent;
3399
color: $on-surface;
3400
&:backdrop {
3402
background-color: transparent;
3403
color: hint($on-surface);
3404
}
3405
}
3406
> box.dialog-vbox.vertical {
3408
border-spacing: 20px;
3409
> box.vertical > box.horizontal {
3411
margin: 0 24px - 30px;
3412
}
3413
}
3414
label.title {
3416
font-weight: 500;
3417
font-size: pt(20px);
3418
letter-spacing: pt(.15px);
3419
}
3420
// Hint text
3422
label.title + label {
3423
color: hint($on-surface);
3424
}
3425
list,
3427
.view {
3428
background-color: transparent;
3429
}
3430
.dialog-action-area > button {
3432
@extend %button-flat;
3433
&:not(:disabled) {
3435
color: $primary;
3436
@include ink-color($primary);
3437
}
3438
&.suggested-action:not(:disabled) {
3440
background-color: transparent;
3441
// color: $primary;
3442
// @include ink-color($primary);
3443
}
3444
&.destructive-action:not(:disabled) {
3446
background-color: transparent;
3447
color: $error;
3448
@include ink-color($error);
3449
}
3450
}
3451
}
3452
.dialog-action-area {
3454
// margin-top: -$container-padding;
3455
padding: $container-padding;
3456
border-spacing: $container-padding;
3457
}
3458
filechooser {
3460
.dialog-action-box {
3461
border-top: 1px solid divider($on-surface);
3462
}
3463
#pathbarbox {
3465
border-bottom: 1px solid divider($on-surface);
3466
// background-color: $surface-z0;
3467
> stack > box > button { // The new folder button
3469
@extend %button-flat;
3470
border-radius: $circular-radius;
3472
}
3473
}
3474
}
3475
filechooserbutton > button > box {
3477
border-spacing: 6px;
3478
}
3479
filechooserbutton:drop(active) {
3481
// box-shadow: none;
3482
}
3483
/**
3485
* Sidebar
3486
*/
3487
.sidebar {
3489
border-style: none;
3490
&:not(separator) {
3492
@at-root %sidebar_left,
3493
&:dir(ltr),
3494
&.left,
3495
&.left:dir(rtl) {
3496
border-right: 1px solid divider($on-surface);
3497
border-left-style: none;
3498
}
3499
@at-root %sidebar_right,
3501
&:dir(rtl),
3502
&.right {
3503
border-left: 1px solid divider($on-surface);
3504
border-right-style: none;
3505
}
3506
}
3507
list {
3509
// background-color: transparent;
3510
}
3511
paned & {
3513
&:dir(rtl):not(:dir(ltr)),
3514
&:dir(ltr):not(:dir(rtl)) {
3515
border-style: none;
3516
}
3517
}
3518
}
3519
stacksidebar.sidebar {
3521
list {
3522
padding: 4px;
3523
}
3524
list.separators:not(.horizontal) > row:not(:first-child) {
3526
border-top-style: none;
3527
}
3528
row {
3530
min-height: 32px;
3531
padding: 0 8px - 6px;
3532
border-radius: $corner-radius;
3533
color: hint($on-surface);
3534
font-weight: 500;
3535
&:selected {
3537
background-color: overlay("activated", $primary);
3538
color: $primary;
3539
@include ink-color($primary, $on: overlay("activated", $primary));
3540
}
3541
+ row {
3543
margin-top: 4px;
3544
}
3545
> label {
3547
padding-left: 6px;
3548
padding-right: 6px;
3549
}
3550
&.needs-attention > label {
3552
@extend %needs-attention;
3553
}
3554
}
3555
}
3556
separator.sidebar {
3558
&.selection-mode,
3559
.selection-mode & {
3560
// background-color: divider($on-surface);
3561
}
3562
}
3563
/**
3565
* File chooser
3566
*/
3567
// dim the sidebar icons, see bug #786613 for details on this oddity
3569
row image.sidebar-icon {
3570
transition: color $duration $ease-out;
3571
color: hint($on-surface);
3572
&:disabled {
3574
color: disabled-hint($on-surface);
3575
}
3576
}
3577
placessidebar.sidebar {
3579
list {
3580
padding: 4px 0;
3581
> separator {
3583
margin: 4px 0;
3584
}
3585
}
3586
row {
3588
// Needs overriding of the GtkListBoxRow padding
3589
min-height: 32px;
3590
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3591
padding: 0;
3592
border-radius: $corner-radius;
3593
color: hint($on-surface);
3594
font-weight: 500;
3595
// Using margins/padding directly in the SidebarRow
3597
// will make the animation of the new bookmark row jump
3598
> revealer {
3599
padding: 0 8px;
3600
}
3601
&:selected {
3603
background-color: overlay("activated", $primary);
3604
color: $primary;
3605
@include ink-color($primary, $on: overlay("activated", $primary));
3606
image.sidebar-icon {
3608
color: $primary;
3609
}
3610
}
3611
&:disabled {
3613
color: disabled($on-surface);
3614
}
3615
image.sidebar-icon {
3617
&:dir(ltr) {
3618
padding-right: 8px;
3619
}
3620
&:dir(rtl) {
3622
padding-left: 8px;
3623
}
3624
}
3625
label.sidebar-label {
3627
&:dir(ltr) {
3628
padding-right: 2px;
3629
}
3630
&:dir(rtl) {
3632
padding-left: 2px;
3633
}
3634
}
3635
@at-root button.sidebar-button {
3637
@extend %button-flat-basic;
3638
@extend %button-small;
3639
}
3640
&.sidebar-placeholder-row {
3642
background-color: overlay("hover", $on-surface);
3643
}
3644
&.sidebar-new-bookmark-row {
3646
color: $primary;
3647
image.sidebar-icon {
3649
color: $primary;
3650
}
3651
}
3652
}
3653
}
3654
placesview {
3656
.server-list-button {
3657
> image {
3658
-gtk-icon-transform: rotate(0turn);
3659
}
3660
&:checked > image {
3662
-gtk-icon-transform: rotate(-0.5turn);
3663
}
3664
}
3665
> actionbar > revealer > box > box {
3667
border-spacing: $container-padding;
3668
}
3669
// this selects the "connect to server" label
3671
> actionbar > revealer > box > box > label {
3672
padding-left: 8px;
3673
padding-right: 8px;
3674
}
3675
}
3676
/**
3678
* Paned
3679
*/
3680
paned {
3682
> separator {
3683
background-clip: content-box;
3684
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3685
&.wide {
3687
min-width: 4px;
3688
min-height: 4px;
3689
border: 1px solid divider($on-surface);
3690
background-color: transparent;
3691
}
3692
}
3693
&.horizontal > separator {
3695
&:not(.wide) {
3696
margin: 0 -4px;
3697
padding: 0 4px;
3698
}
3699
&.wide {
3701
border-style: none solid;
3702
}
3703
}
3704
&.vertical > separator {
3706
&:not(.wide) {
3707
margin: -4px 0;
3708
padding: 4px 0;
3709
}
3710
&.wide {
3712
border-style: solid none;
3713
}
3714
}
3715
}
3716
/**
3718
* GtkVideo
3719
*/
3720
video {
3722
background-color: black;
3723
image.osd {
3725
min-width: 64px;
3726
min-height: 64px;
3727
border-radius: 32px;
3728
background-color: $scrim;
3729
color: $on-scrim;
3730
}
3731
controls.osd {
3733
padding: 4px;
3734
background-image:
3735
linear-gradient(
3736
to bottom,
3737
transparent,
3738
rgba(black, .1) 30%,
3739
rgba(black, .2) 50%,
3740
rgba(black, .4)
3741
);
3742
color: on(black);
3743
button {
3745
background-color: transparent;
3746
color: hint(on(black));
3747
@include ink-color(on(black));
3748
}
3749
}
3750
}
3751
/**
3753
* GtkInfoBar
3754
*/
3755
infobar {
3757
> revealer > box {
3758
padding: 8px;
3759
border-spacing: 12px;
3760
}
3761
&.action:hover > revealer > box {
3763
background-image: image(overlay("hover", $on-surface));
3764
}
3765
&.info > revealer > box,
3767
&.question > revealer > box {
3768
border-bottom: 1px solid divider($on-surface);
3769
// background-color: $surface-z1;
3770
button {
3772
@extend %button-flat;
3773
&.text-button:not(:disabled) {
3775
color: $primary;
3776
@include ink-color($primary);
3777
}
3778
}
3779
}
3780
&.warning > revealer > box {
3782
background-color: $warning;
3783
color: $on-warning;
3784
button.flat {
3786
color: $on-warning;
3787
@include ink-color($on-warning);
3788
}
3789
selection {
3791
}
3792
link {
3794
color: $on-warning;
3795
}
3796
}
3797
&.error > revealer > box {
3799
background-color: $error;
3800
color: $on-error;
3801
button.flat {
3803
color: $on-error;
3804
@include ink-color($on-error);
3805
}
3806
selection {
3808
}
3809
link {
3811
color: $on-error;
3812
}
3813
}
3814
// Remove ugly hard-coded padding
3816
button label {
3817
// margin: 0 -4px;
3818
}
3819
}
3820
/**
3822
* Tooltips
3823
*/
3824
tooltip {
3826
&.background {
3827
// background-color needs to be set this way otherwise it gets drawn twice
3828
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3829
background-color: $tooltip;
3830
color: $on-tooltip;
3831
}
3832
min-height: 32px - 4px * 2;
3834
padding: 4px 8px;
3835
border-radius: $corner-radius;
3836
&:not(.csd) {
3838
background-color: $tooltip;
3839
}
3840
> box {
3842
border-spacing: 6px;
3843
}
3844
.dim-label {
3846
color: hint($on-tooltip);
3847
}
3848
}
3849
/**
3851
* Color Chooser
3852
*/
3853
colorswatch {
3855
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3856
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3857
// applied to the overlay box.
3858
// base color corners rounding
3860
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3861
// sports a bigger radius.
3862
// nth-child is needed by the custom color strip.
3863
transition: $transition-shadow;
3865
box-shadow: $shadow-z1;
3866
&:drop(active),
3868
&.activatable:hover {
3869
box-shadow: $shadow-z3;
3870
}
3871
&:disabled {
3873
opacity: .5;
3874
// box-shadow: none;
3875
}
3876
&.top {
3878
border-top-left-radius: $corner-radius;
3879
border-top-right-radius: $corner-radius;
3880
}
3881
&.bottom {
3883
border-bottom-left-radius: $corner-radius;
3884
border-bottom-right-radius: $corner-radius;
3885
}
3886
&.left,
3888
&:first-child:not(.top) {
3889
border-top-left-radius: $corner-radius;
3890
border-bottom-left-radius: $corner-radius;
3891
}
3892
&.right,
3894
&:last-child:not(.bottom) {
3895
border-top-right-radius: $corner-radius;
3896
border-bottom-right-radius: $corner-radius;
3897
}
3898
&.dark {
3900
color: $on-dark;
3901
}
3902
&.light {
3904
color: $on-light;
3905
}
3906
&#add-color-button {
3908
// border-radius: $corner-radius 0 0 $corner-radius;
3909
background-color: $surface-z8;
3910
color: $on-surface;
3911
&:only-child {
3913
// border-radius: $corner-radius;
3914
}
3915
}
3916
row:selected & {
3918
}
3919
&#editor-color-sample {
3921
border-radius: $corner-radius;
3922
}
3923
}
3924
// colorscale popup
3926
colorchooser .popover.osd {
3927
transition: $transition-shadow;
3928
border-radius: $corner-radius;
3929
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
3930
background-color: $surface-z8;
3931
&:backdrop {
3933
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
3934
}
3935
}
3936
/**
3938
* Misc
3939
*/
3940
// content view (grid/list)
3942
.content-view {
3943
// background-color: $surface-z0;
3944
&:hover {
3946
// -gtk-icon-filter: brightness(1.2);
3947
}
3948
}
3949
.scale-popup {
3951
.osd & {
3952
// @extend %osd;
3953
button.flat {
3955
}
3956
}
3957
// +/- buttons on GtkVolumeButton popup
3959
button {
3960
}
3961
}
3962
/**
3964
* Window Decorations
3965
*/
3966
window {
3968
&.csd {
3969
transition: $transition-shadow;
3970
border-radius: $corner-radius $corner-radius 0 0;
3971
border-radius: $corner-radius;
3972
box-shadow: $shadow-z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
3973
&:backdrop {
3975
// the transparent shadow here is to enforce that the shadow extents don't
3976
// change when we go to backdrop, to prevent jumping windows.
3977
// The biggest shadow should be in the same order then in the active state
3978
// or the jumping will happen during the transition.
3979
box-shadow: $shadow-z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
3980
}
3981
}
3982
// server-side decorations as used by mutter
3984
&.ssd {
3985
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
3986
}
3987
&.solid-csd {
3989
margin: 0;
3990
padding: 2px;
3991
border-radius: 0;
3992
box-shadow: none;
3993
box-shadow: inset 0 1px highlight($titlebar);
3994
background-color: $titlebar;
3995
&:backdrop {
3997
background-color: $titlebar-backdrop;
3998
}
3999
}
4000
&.maximized,
4002
&.fullscreen,
4003
&.tiled,
4004
&.tiled-top,
4005
&.tiled-left,
4006
&.tiled-right,
4007
&.tiled-bottom {
4008
border-radius: 0;
4009
}
4010
}
4011
// catch all extend :)
4013
%selected_items {
4015
background-color: $overlay-selected;
4016
}
4017
.monospace {
4019
font-family: monospace;
4020
}
4021
/**
4023
* Touch Copy & Paste
4024
*/
4025
// touch selection handlebars for the Popover.osd above
4027
cursor-handle {
4028
min-width: 24px;
4029
min-height: 24px;
4030
border-radius: 50%;
4031
background-color: $primary;
4032
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4033
&.top:dir(ltr),
4035
&.bottom:dir(rtl) {
4036
border-top-right-radius: 0;
4037
// -gtk-icon-transform: rotate(90deg);
4038
}
4039
&.bottom:dir(ltr),
4041
&.top:dir(rtl) {
4042
border-top-left-radius: 0;
4043
// -gtk-icon-transform: unset;
4044
}
4045
&.insertion-cursor:dir(ltr),
4047
&.insertion-cursor:dir(rtl) {
4048
margin-top: 6px;
4049
transform: rotate(45deg);
4050
}
4051
}
4052
shortcuts-section {
4054
margin: 20px;
4055
}
4056
.shortcuts-search-results {
4058
margin: 20px;
4059
border-spacing: 24px;
4060
}
4061
// shortcut window keys
4063
shortcut {
4064
border-spacing: 6px;
4065
}
4066
shortcut > .keycap {
4068
min-width: 28px - 8px * 2;
4069
// min-height: 28px - 2px;
4070
min-height: 28px;
4071
// margin-top: 2px;
4072
// padding-bottom: 2px;
4073
padding-left: 8px;
4074
padding-right: 8px;
4075
// border: solid 1px divider($on-surface);
4077
// border-radius: $corner-radius + 1px;
4078
border-radius: $corner-radius;
4079
// box-shadow: inset 0 -2px divider($on-surface);
4080
box-shadow: $shadow-z1;
4081
background-color: $surface-z8;
4082
color: $on-surface;
4083
font-size: smaller;
4084
}
4085
// FIXME needs to be done widget by widget, this wildcard should really die
4087
:drop(active) {
4088
// caret-color: $primary;
4089
}
4090
// FIXME aggregate with buttons
4092
stackswitcher > button.text-button {
4093
min-width: 100px;
4094
}
4095
stackswitcher.circular {
4097
border-spacing: 12px;
4098
// FIXME aggregate with buttons
4100
> button.circular {
4101
min-width: $medium-size;
4102
min-height: $medium-size;
4103
padding: 0;
4104
}
4105
}
4106
/**
4108
* App Icons
4109
*/
4110
// Outline for low res icons
4112
.lowres-icon {
4113
// -gtk-icon-shadow: none;
4114
}
4115
// Drapshadow for large icons
4117
.icon-dropshadow {
4118
// -gtk-icon-shadow: none;
4119
}
4120
/**
4122
* Emoji
4123
*/
4124
popover.emoji-picker > contents {
4126
padding: 0;
4127
emoji {
4129
min-width: 3em;
4130
min-height: 3em;
4131
// padding: 8px;
4132
border-radius: $corner-radius;
4133
// font-size: larger;
4134
@extend %ripple;
4136
@include ink-color($on-surface);
4137
}
4138
}
4139
.emoji-searchbar {
4141
border-bottom: 1px solid divider($on-surface);
4142
> entry.search {
4144
border-image: none;
4145
border-radius: 0;
4146
box-shadow: none;
4147
background-color: transparent;
4148
}
4149
}
4150
.emoji-toolbar {
4152
padding: 4px;
4153
border-spacing: 4px;
4154
border-top: 1px solid divider($on-surface);
4155
> button.emoji-section {
4157
&:checked {
4158
background-color: overlay("activated", $primary);
4159
color: $primary;
4160
@include ink-color($primary, $on: overlay("activated", $primary));
4161
}
4162
}
4163
}
4164
popover.emoji-completion > contents {
4166
padding: 8px 0;
4167
emoji-completion-row {
4169
min-height: 32px;
4170
padding: 0 8px;
4171
@extend %ripple;
4172
@include ink-color($on-surface);
4173
> box {
4175
border-spacing: 8px;
4176
}
4177
}
4178
emoji {
4180
// min-width: 3em;
4181
// min-height: 3em;
4182
// padding: 8px;
4183
border-radius: $corner-radius;
4184
@extend %ripple;
4186
@include ink-color($on-surface);
4187
}
4188
}
4189
popover.entry-completion > contents {
4191
padding: 0;
4192
treeview.view {
4194
min-height: 32px; // FIXME: should be in .cell
4195
padding: 8px 0;
4196
> .cell {
4198
padding: 0 4px; // FIXME: should be `0 8px`
4199
&:selected:hover {
4201
background-color: overlay("focus", $on-surface);
4202
}
4203
}
4204
}
4205
}
4206