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