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