mvdan.cc
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: normal;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "InterVariable";
23 src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
24 font-weight: bold;
25 font-style: normal;
26 font-display: swap;
27 }
28
29 @font-face {
30 font-family: "InterVariable";
31 src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
32 font-weight: bold;
33 font-style: italic;
34 font-display: swap;
35 }
36
37 @font-face {
38 font-family: "IBMPlexMono";
39 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
40 font-weight: normal;
41 font-style: normal;
42 font-display: swap;
43 }
44
45 @font-face {
46 font-family: "IBMPlexMono";
47 src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
48 font-weight: normal;
49 font-style: italic;
50 font-display: swap;
51 }
52
53 @font-face {
54 font-family: "IBMPlexMono";
55 src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
56 font-weight: bold;
57 font-style: normal;
58 font-display: swap;
59 }
60
61 @font-face {
62 font-family: "IBMPlexMono";
63 src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
64 font-weight: bold;
65 font-style: italic;
66 font-display: swap;
67 }
68
69 ::selection {
70 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
71 }
72
73 @layer base {
74 html {
75 font-size: 14px;
76 scrollbar-gutter: stable;
77 }
78 @supports (font-variation-settings: normal) {
79 html {
80 font-feature-settings:
81 "kern" 1,
82 "liga" 1,
83 "cv05" 1,
84 "tnum" 1;
85 }
86 }
87
88 a {
89 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
90 }
91
92 label {
93 @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
94 }
95 input, textarea {
96 @apply
97 block rounded p-3
98 bg-gray-50 dark:bg-gray-800 dark:text-white
99 border border-gray-300 dark:border-gray-600
100 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
101 }
102 details summary::-webkit-details-marker {
103 display: none;
104 }
105
106 code {
107 @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
108 }
109 }
110
111 @layer components {
112 .btn {
113 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
114 bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
115 before:absolute before:inset-0 before:-z-10 before:block before:rounded
116 before:border before:border-gray-200 before:bg-white
117 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
118 before:content-[''] before:transition-all before:duration-150 before:ease-in-out
119 hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
120 hover:before:bg-gray-50
121 dark:hover:before:bg-gray-700
122 active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
123 focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
124 disabled:cursor-not-allowed disabled:opacity-50
125 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
126 }
127
128 .btn-flat {
129 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
130 bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
131 before:absolute before:inset-0 before:-z-10 before:block before:rounded
132 before:border before:border-gray-200 before:bg-white
133 before:content-[''] before:transition-all before:duration-150 before:ease-in-out
134 hover:before:bg-gray-50
135 dark:hover:before:bg-gray-700
136 focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
137 disabled:cursor-not-allowed disabled:opacity-50
138 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
139 }
140
141 .btn-create {
142 @apply btn text-white
143 before:bg-green-600 hover:before:bg-green-700
144 dark:before:bg-green-700 dark:hover:before:bg-green-800
145 before:border before:border-green-700 hover:before:border-green-800
146 focus-visible:before:outline-green-500
147 disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
148 }
149
150 .prose {
151 overflow-wrap: anywhere;
152 }
153
154 .prose hr {
155 @apply my-2;
156 }
157
158 .prose li:has(input) {
159 @apply list-none;
160 }
161
162 .prose ul:has(input) {
163 @apply pl-2;
164 }
165
166 .prose .heading .anchor {
167 @apply no-underline mx-2 opacity-0;
168 }
169
170 .prose .heading:hover .anchor {
171 @apply opacity-70;
172 }
173
174 .prose .heading .anchor:hover {
175 @apply opacity-70;
176 }
177
178 .prose a.footnote-backref {
179 @apply no-underline;
180 }
181
182 .prose a.mention {
183 @apply no-underline hover:underline font-bold;
184 }
185
186 .prose li {
187 @apply my-0 py-0;
188 }
189
190 .prose ul,
191 .prose ol {
192 @apply my-1 py-0;
193 }
194
195 .prose img {
196 display: inline;
197 margin: 0;
198 vertical-align: middle;
199 }
200
201 .prose input {
202 @apply inline-block my-0 mb-1 mx-1;
203 }
204
205 .prose input[type="checkbox"] {
206 @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
207 }
208
209 /* Base callout */
210 details[data-callout] {
211 @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
212 }
213
214 details[data-callout] > summary {
215 @apply font-bold cursor-pointer mb-1;
216 }
217
218 details[data-callout] > .callout-content {
219 @apply text-sm leading-snug;
220 }
221
222 /* Note (blue) */
223 details[data-callout="note" i] {
224 @apply border-blue-400 dark:border-blue-500;
225 }
226 details[data-callout="note" i] > summary {
227 @apply text-blue-700 dark:text-blue-400;
228 }
229
230 /* Important (purple) */
231 details[data-callout="important" i] {
232 @apply border-purple-400 dark:border-purple-500;
233 }
234 details[data-callout="important" i] > summary {
235 @apply text-purple-700 dark:text-purple-400;
236 }
237
238 /* Warning (yellow) */
239 details[data-callout="warning" i] {
240 @apply border-yellow-400 dark:border-yellow-500;
241 }
242 details[data-callout="warning" i] > summary {
243 @apply text-yellow-700 dark:text-yellow-400;
244 }
245
246 /* Caution (red) */
247 details[data-callout="caution" i] {
248 @apply border-red-400 dark:border-red-500;
249 }
250 details[data-callout="caution" i] > summary {
251 @apply text-red-700 dark:text-red-400;
252 }
253
254 /* Tip (green) */
255 details[data-callout="tip" i] {
256 @apply border-green-400 dark:border-green-500;
257 }
258 details[data-callout="tip" i] > summary {
259 @apply text-green-700 dark:text-green-400;
260 }
261
262 /* Optional: hide the disclosure arrow like GitHub */
263 details[data-callout] > summary::-webkit-details-marker {
264 display: none;
265 }
266
267 }
268 @layer utilities {
269 .error {
270 @apply py-1 text-red-400 dark:text-red-300;
271 }
272 .success {
273 @apply py-1 text-gray-900 dark:text-gray-100;
274 }
275 }
276
277}
278
279/* Background */
280.bg {
281 color: #4c4f69;
282 background-color: #eff1f5;
283}
284/* PreWrapper */
285.chroma {
286 color: #4c4f69;
287}
288/* Error */
289.chroma .err {
290 color: #d20f39;
291}
292/* LineLink */
293.chroma .lnlinks {
294 outline: none;
295 text-decoration: none;
296 color: inherit;
297}
298/* LineTableTD */
299.chroma .lntd {
300 vertical-align: top;
301 padding: 0;
302 margin: 0;
303 border: 0;
304}
305/* LineTable */
306.chroma .lntable {
307 border-spacing: 0;
308 padding: 0;
309 margin: 0;
310 border: 0;
311}
312/* LineHighlight */
313.chroma .hl {
314 @apply bg-amber-400/30 dark:bg-amber-500/20;
315}
316
317/* LineNumbersTable */
318.chroma .lnt {
319 white-space: pre;
320 -webkit-user-select: none;
321 user-select: none;
322 margin-right: 0.4em;
323 padding: 0 0.4em 0 0.4em;
324 color: #8c8fa1;
325}
326/* LineNumbers */
327.chroma .ln {
328 white-space: pre;
329 -webkit-user-select: none;
330 user-select: none;
331 margin-right: 0.4em;
332 padding: 0 0.4em 0 0.4em;
333 color: #8c8fa1;
334}
335/* Line */
336.chroma .line {
337 display: flex;
338}
339/* Keyword */
340.chroma .k {
341 color: #8839ef;
342}
343/* KeywordConstant */
344.chroma .kc {
345 color: #fe640b;
346}
347/* KeywordDeclaration */
348.chroma .kd {
349 color: #d20f39;
350}
351/* KeywordNamespace */
352.chroma .kn {
353 color: #179299;
354}
355/* KeywordPseudo */
356.chroma .kp {
357 color: #8839ef;
358}
359/* KeywordReserved */
360.chroma .kr {
361 color: #8839ef;
362}
363/* KeywordType */
364.chroma .kt {
365 color: #d20f39;
366}
367/* NameAttribute */
368.chroma .na {
369 color: #1e66f5;
370}
371/* NameBuiltin */
372.chroma .nb {
373 color: #04a5e5;
374}
375/* NameBuiltinPseudo */
376.chroma .bp {
377 color: #04a5e5;
378}
379/* NameClass */
380.chroma .nc {
381 color: #df8e1d;
382}
383/* NameConstant */
384.chroma .no {
385 color: #df8e1d;
386}
387/* NameDecorator */
388.chroma .nd {
389 color: #1e66f5;
390 font-weight: bold;
391}
392/* NameEntity */
393.chroma .ni {
394 color: #179299;
395}
396/* NameException */
397.chroma .ne {
398 color: #fe640b;
399}
400/* NameFunction */
401.chroma .nf {
402 color: #1e66f5;
403}
404/* NameFunctionMagic */
405.chroma .fm {
406 color: #1e66f5;
407}
408/* NameLabel */
409.chroma .nl {
410 color: #04a5e5;
411}
412/* NameNamespace */
413.chroma .nn {
414 color: #fe640b;
415}
416/* NameProperty */
417.chroma .py {
418 color: #fe640b;
419}
420/* NameTag */
421.chroma .nt {
422 color: #8839ef;
423}
424/* NameVariable */
425.chroma .nv {
426 color: #dc8a78;
427}
428/* NameVariableClass */
429.chroma .vc {
430 color: #dc8a78;
431}
432/* NameVariableGlobal */
433.chroma .vg {
434 color: #dc8a78;
435}
436/* NameVariableInstance */
437.chroma .vi {
438 color: #dc8a78;
439}
440/* NameVariableMagic */
441.chroma .vm {
442 color: #dc8a78;
443}
444/* LiteralString */
445.chroma .s {
446 color: #40a02b;
447}
448/* LiteralStringAffix */
449.chroma .sa {
450 color: #d20f39;
451}
452/* LiteralStringBacktick */
453.chroma .sb {
454 color: #40a02b;
455}
456/* LiteralStringChar */
457.chroma .sc {
458 color: #40a02b;
459}
460/* LiteralStringDelimiter */
461.chroma .dl {
462 color: #1e66f5;
463}
464/* LiteralStringDoc */
465.chroma .sd {
466 color: #9ca0b0;
467}
468/* LiteralStringDouble */
469.chroma .s2 {
470 color: #40a02b;
471}
472/* LiteralStringEscape */
473.chroma .se {
474 color: #1e66f5;
475}
476/* LiteralStringHeredoc */
477.chroma .sh {
478 color: #9ca0b0;
479}
480/* LiteralStringInterpol */
481.chroma .si {
482 color: #40a02b;
483}
484/* LiteralStringOther */
485.chroma .sx {
486 color: #40a02b;
487}
488/* LiteralStringRegex */
489.chroma .sr {
490 color: #179299;
491}
492/* LiteralStringSingle */
493.chroma .s1 {
494 color: #40a02b;
495}
496/* LiteralStringSymbol */
497.chroma .ss {
498 color: #40a02b;
499}
500/* LiteralNumber */
501.chroma .m {
502 color: #fe640b;
503}
504/* LiteralNumberBin */
505.chroma .mb {
506 color: #fe640b;
507}
508/* LiteralNumberFloat */
509.chroma .mf {
510 color: #fe640b;
511}
512/* LiteralNumberHex */
513.chroma .mh {
514 color: #fe640b;
515}
516/* LiteralNumberInteger */
517.chroma .mi {
518 color: #fe640b;
519}
520/* LiteralNumberIntegerLong */
521.chroma .il {
522 color: #fe640b;
523}
524/* LiteralNumberOct */
525.chroma .mo {
526 color: #fe640b;
527}
528/* Operator */
529.chroma .o {
530 color: #04a5e5;
531 font-weight: bold;
532}
533/* OperatorWord */
534.chroma .ow {
535 color: #04a5e5;
536 font-weight: bold;
537}
538/* Comment */
539.chroma .c {
540 color: #9ca0b0;
541 font-style: italic;
542}
543/* CommentHashbang */
544.chroma .ch {
545 color: #9ca0b0;
546 font-style: italic;
547}
548/* CommentMultiline */
549.chroma .cm {
550 color: #9ca0b0;
551 font-style: italic;
552}
553/* CommentSingle */
554.chroma .c1 {
555 color: #9ca0b0;
556 font-style: italic;
557}
558/* CommentSpecial */
559.chroma .cs {
560 color: #9ca0b0;
561 font-style: italic;
562}
563/* CommentPreproc */
564.chroma .cp {
565 color: #9ca0b0;
566 font-style: italic;
567}
568/* CommentPreprocFile */
569.chroma .cpf {
570 color: #9ca0b0;
571 font-weight: bold;
572 font-style: italic;
573}
574/* GenericDeleted */
575.chroma .gd {
576 color: #d20f39;
577 background-color: oklch(93.6% 0.032 17.717);
578}
579/* GenericEmph */
580.chroma .ge {
581 font-style: italic;
582}
583/* GenericError */
584.chroma .gr {
585 color: #d20f39;
586}
587/* GenericHeading */
588.chroma .gh {
589 color: #fe640b;
590 font-weight: bold;
591}
592/* GenericInserted */
593.chroma .gi {
594 color: #40a02b;
595 background-color: oklch(96.2% 0.044 156.743);
596}
597/* GenericStrong */
598.chroma .gs {
599 font-weight: bold;
600}
601/* GenericSubheading */
602.chroma .gu {
603 color: #fe640b;
604 font-weight: bold;
605}
606/* GenericTraceback */
607.chroma .gt {
608 color: #d20f39;
609}
610/* GenericUnderline */
611.chroma .gl {
612 text-decoration: underline;
613}
614
615@media (prefers-color-scheme: dark) {
616 /* Background */
617 .bg {
618 color: #cad3f5;
619 background-color: #24273a;
620 }
621 /* PreWrapper */
622 .chroma {
623 color: #cad3f5;
624 }
625 /* Error */
626 .chroma .err {
627 color: #ed8796;
628 }
629 /* LineLink */
630 .chroma .lnlinks {
631 outline: none;
632 text-decoration: none;
633 color: inherit;
634 }
635 /* LineTableTD */
636 .chroma .lntd {
637 vertical-align: top;
638 padding: 0;
639 margin: 0;
640 border: 0;
641 }
642 /* LineTable */
643 .chroma .lntable {
644 border-spacing: 0;
645 padding: 0;
646 margin: 0;
647 border: 0;
648 }
649 /* LineHighlight */
650 .chroma .hl {
651 background-color: #494d64;
652 }
653 /* LineNumbersTable */
654 .chroma .lnt {
655 white-space: pre;
656 -webkit-user-select: none;
657 user-select: none;
658 margin-right: 0.4em;
659 padding: 0 0.4em 0 0.4em;
660 color: #8087a2;
661 }
662 /* LineNumbers */
663 .chroma .ln {
664 white-space: pre;
665 -webkit-user-select: none;
666 user-select: none;
667 margin-right: 0.4em;
668 padding: 0 0.4em 0 0.4em;
669 color: #8087a2;
670 }
671 /* Line */
672 .chroma .line {
673 display: flex;
674 }
675 /* Keyword */
676 .chroma .k {
677 color: #c6a0f6;
678 }
679 /* KeywordConstant */
680 .chroma .kc {
681 color: #f5a97f;
682 }
683 /* KeywordDeclaration */
684 .chroma .kd {
685 color: #ed8796;
686 }
687 /* KeywordNamespace */
688 .chroma .kn {
689 color: #8bd5ca;
690 }
691 /* KeywordPseudo */
692 .chroma .kp {
693 color: #c6a0f6;
694 }
695 /* KeywordReserved */
696 .chroma .kr {
697 color: #c6a0f6;
698 }
699 /* KeywordType */
700 .chroma .kt {
701 color: #ed8796;
702 }
703 /* NameAttribute */
704 .chroma .na {
705 color: #8aadf4;
706 }
707 /* NameBuiltin */
708 .chroma .nb {
709 color: #91d7e3;
710 }
711 /* NameBuiltinPseudo */
712 .chroma .bp {
713 color: #91d7e3;
714 }
715 /* NameClass */
716 .chroma .nc {
717 color: #eed49f;
718 }
719 /* NameConstant */
720 .chroma .no {
721 color: #eed49f;
722 }
723 /* NameDecorator */
724 .chroma .nd {
725 color: #8aadf4;
726 font-weight: bold;
727 }
728 /* NameEntity */
729 .chroma .ni {
730 color: #8bd5ca;
731 }
732 /* NameException */
733 .chroma .ne {
734 color: #f5a97f;
735 }
736 /* NameFunction */
737 .chroma .nf {
738 color: #8aadf4;
739 }
740 /* NameFunctionMagic */
741 .chroma .fm {
742 color: #8aadf4;
743 }
744 /* NameLabel */
745 .chroma .nl {
746 color: #91d7e3;
747 }
748 /* NameNamespace */
749 .chroma .nn {
750 color: #f5a97f;
751 }
752 /* NameProperty */
753 .chroma .py {
754 color: #f5a97f;
755 }
756 /* NameTag */
757 .chroma .nt {
758 color: #c6a0f6;
759 }
760 /* NameVariable */
761 .chroma .nv {
762 color: #f4dbd6;
763 }
764 /* NameVariableClass */
765 .chroma .vc {
766 color: #f4dbd6;
767 }
768 /* NameVariableGlobal */
769 .chroma .vg {
770 color: #f4dbd6;
771 }
772 /* NameVariableInstance */
773 .chroma .vi {
774 color: #f4dbd6;
775 }
776 /* NameVariableMagic */
777 .chroma .vm {
778 color: #f4dbd6;
779 }
780 /* LiteralString */
781 .chroma .s {
782 color: #a6da95;
783 }
784 /* LiteralStringAffix */
785 .chroma .sa {
786 color: #ed8796;
787 }
788 /* LiteralStringBacktick */
789 .chroma .sb {
790 color: #a6da95;
791 }
792 /* LiteralStringChar */
793 .chroma .sc {
794 color: #a6da95;
795 }
796 /* LiteralStringDelimiter */
797 .chroma .dl {
798 color: #8aadf4;
799 }
800 /* LiteralStringDoc */
801 .chroma .sd {
802 color: #6e738d;
803 }
804 /* LiteralStringDouble */
805 .chroma .s2 {
806 color: #a6da95;
807 }
808 /* LiteralStringEscape */
809 .chroma .se {
810 color: #8aadf4;
811 }
812 /* LiteralStringHeredoc */
813 .chroma .sh {
814 color: #6e738d;
815 }
816 /* LiteralStringInterpol */
817 .chroma .si {
818 color: #a6da95;
819 }
820 /* LiteralStringOther */
821 .chroma .sx {
822 color: #a6da95;
823 }
824 /* LiteralStringRegex */
825 .chroma .sr {
826 color: #8bd5ca;
827 }
828 /* LiteralStringSingle */
829 .chroma .s1 {
830 color: #a6da95;
831 }
832 /* LiteralStringSymbol */
833 .chroma .ss {
834 color: #a6da95;
835 }
836 /* LiteralNumber */
837 .chroma .m {
838 color: #f5a97f;
839 }
840 /* LiteralNumberBin */
841 .chroma .mb {
842 color: #f5a97f;
843 }
844 /* LiteralNumberFloat */
845 .chroma .mf {
846 color: #f5a97f;
847 }
848 /* LiteralNumberHex */
849 .chroma .mh {
850 color: #f5a97f;
851 }
852 /* LiteralNumberInteger */
853 .chroma .mi {
854 color: #f5a97f;
855 }
856 /* LiteralNumberIntegerLong */
857 .chroma .il {
858 color: #f5a97f;
859 }
860 /* LiteralNumberOct */
861 .chroma .mo {
862 color: #f5a97f;
863 }
864 /* Operator */
865 .chroma .o {
866 color: #91d7e3;
867 font-weight: bold;
868 }
869 /* OperatorWord */
870 .chroma .ow {
871 color: #91d7e3;
872 font-weight: bold;
873 }
874 /* Comment */
875 .chroma .c {
876 color: #6e738d;
877 font-style: italic;
878 }
879 /* CommentHashbang */
880 .chroma .ch {
881 color: #6e738d;
882 font-style: italic;
883 }
884 /* CommentMultiline */
885 .chroma .cm {
886 color: #6e738d;
887 font-style: italic;
888 }
889 /* CommentSingle */
890 .chroma .c1 {
891 color: #6e738d;
892 font-style: italic;
893 }
894 /* CommentSpecial */
895 .chroma .cs {
896 color: #6e738d;
897 font-style: italic;
898 }
899 /* CommentPreproc */
900 .chroma .cp {
901 color: #6e738d;
902 font-style: italic;
903 }
904 /* CommentPreprocFile */
905 .chroma .cpf {
906 color: #6e738d;
907 font-weight: bold;
908 font-style: italic;
909 }
910 /* GenericDeleted */
911 .chroma .gd {
912 color: #ed8796;
913 background-color: oklch(44.4% 0.177 26.899 / 0.5);
914 }
915 /* GenericEmph */
916 .chroma .ge {
917 font-style: italic;
918 }
919 /* GenericError */
920 .chroma .gr {
921 color: #ed8796;
922 }
923 /* GenericHeading */
924 .chroma .gh {
925 color: #f5a97f;
926 font-weight: bold;
927 }
928 /* GenericInserted */
929 .chroma .gi {
930 color: #a6da95;
931 background-color: oklch(44.8% 0.119 151.328 / 0.5);
932 }
933 /* GenericStrong */
934 .chroma .gs {
935 font-weight: bold;
936 }
937 /* GenericSubheading */
938 .chroma .gu {
939 color: #f5a97f;
940 font-weight: bold;
941 }
942 /* GenericTraceback */
943 .chroma .gt {
944 color: #ed8796;
945 }
946 /* GenericUnderline */
947 .chroma .gl {
948 text-decoration: underline;
949 }
950}
951
952actor-typeahead {
953 --color-background: #ffffff;
954 --color-border: #d1d5db;
955 --color-shadow: #000000;
956 --color-hover: #f9fafb;
957 --color-avatar-fallback: #e5e7eb;
958 --radius: 0.0;
959 --padding-menu: 0.0rem;
960 z-index: 1000;
961}
962
963actor-typeahead::part(handle) {
964 color: #111827;
965}
966
967actor-typeahead::part(menu) {
968 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
969}
970
971@media (prefers-color-scheme: dark) {
972 actor-typeahead {
973 --color-background: #1f2937;
974 --color-border: #4b5563;
975 --color-shadow: #000000;
976 --color-hover: #374151;
977 --color-avatar-fallback: #4b5563;
978 }
979
980 actor-typeahead::part(handle) {
981 color: #f9fafb;
982 }
983}