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