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