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