lewis.moe
Monorepo for Tangled
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 60s 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 10s linear forwards;
312 }
313
314 @keyframes fadeIn {
315 from { opacity: 0; }
316 to { opacity: 1; }
317 }
318
319 @keyframes fadeOut {
320 from { opacity: 1; }
321 to { opacity: 0; }
322 }
323
324 .animate-fadein {
325 animation: fadeIn 0.25s ease-in forwards;
326 }
327
328 .animate-fadeout {
329 animation: fadeOut 0.25s ease-out forwards;
330 }
331 }
332
333}
334
335/* Background */
336.bg {
337 color: #4c4f69;
338 background-color: #eff1f5;
339}
340/* PreWrapper */
341.chroma {
342 color: #4c4f69;
343}
344/* Error */
345.chroma .err {
346 color: #d20f39;
347}
348/* LineLink */
349.chroma .lnlinks {
350 outline: none;
351 text-decoration: none;
352 color: inherit;
353}
354/* LineTableTD */
355.chroma .lntd {
356 vertical-align: top;
357 padding: 0;
358 margin: 0;
359 border: 0;
360}
361/* LineTable */
362.chroma .lntable {
363 border-spacing: 0;
364 padding: 0;
365 margin: 0;
366 border: 0;
367}
368/* LineHighlight */
369.chroma .hl {
370 @apply bg-amber-400/30 dark:bg-amber-500/20;
371}
372
373/* LineNumbersTable */
374.chroma .lnt {
375 white-space: pre;
376 -webkit-user-select: none;
377 user-select: none;
378 margin-right: 0.4em;
379 padding: 0 0.4em 0 0.4em;
380 color: #8c8fa1;
381}
382/* LineNumbers */
383.chroma .ln {
384 white-space: pre;
385 -webkit-user-select: none;
386 user-select: none;
387 margin-right: 0.4em;
388 padding: 0 0.4em 0 0.4em;
389 color: #8c8fa1;
390}
391/* Line */
392.chroma .line {
393 display: flex;
394}
395/* Keyword */
396.chroma .k {
397 color: #8839ef;
398}
399/* KeywordConstant */
400.chroma .kc {
401 color: #fe640b;
402}
403/* KeywordDeclaration */
404.chroma .kd {
405 color: #d20f39;
406}
407/* KeywordNamespace */
408.chroma .kn {
409 color: #179299;
410}
411/* KeywordPseudo */
412.chroma .kp {
413 color: #8839ef;
414}
415/* KeywordReserved */
416.chroma .kr {
417 color: #8839ef;
418}
419/* KeywordType */
420.chroma .kt {
421 color: #d20f39;
422}
423/* NameAttribute */
424.chroma .na {
425 color: #1e66f5;
426}
427/* NameBuiltin */
428.chroma .nb {
429 color: #04a5e5;
430}
431/* NameBuiltinPseudo */
432.chroma .bp {
433 color: #04a5e5;
434}
435/* NameClass */
436.chroma .nc {
437 color: #df8e1d;
438}
439/* NameConstant */
440.chroma .no {
441 color: #df8e1d;
442}
443/* NameDecorator */
444.chroma .nd {
445 color: #1e66f5;
446 font-weight: bold;
447}
448/* NameEntity */
449.chroma .ni {
450 color: #179299;
451}
452/* NameException */
453.chroma .ne {
454 color: #fe640b;
455}
456/* NameFunction */
457.chroma .nf {
458 color: #1e66f5;
459}
460/* NameFunctionMagic */
461.chroma .fm {
462 color: #1e66f5;
463}
464/* NameLabel */
465.chroma .nl {
466 color: #04a5e5;
467}
468/* NameNamespace */
469.chroma .nn {
470 color: #fe640b;
471}
472/* NameProperty */
473.chroma .py {
474 color: #fe640b;
475}
476/* NameTag */
477.chroma .nt {
478 color: #8839ef;
479}
480/* NameVariable */
481.chroma .nv {
482 color: #dc8a78;
483}
484/* NameVariableClass */
485.chroma .vc {
486 color: #dc8a78;
487}
488/* NameVariableGlobal */
489.chroma .vg {
490 color: #dc8a78;
491}
492/* NameVariableInstance */
493.chroma .vi {
494 color: #dc8a78;
495}
496/* NameVariableMagic */
497.chroma .vm {
498 color: #dc8a78;
499}
500/* LiteralString */
501.chroma .s {
502 color: #40a02b;
503}
504/* LiteralStringAffix */
505.chroma .sa {
506 color: #d20f39;
507}
508/* LiteralStringBacktick */
509.chroma .sb {
510 color: #40a02b;
511}
512/* LiteralStringChar */
513.chroma .sc {
514 color: #40a02b;
515}
516/* LiteralStringDelimiter */
517.chroma .dl {
518 color: #1e66f5;
519}
520/* LiteralStringDoc */
521.chroma .sd {
522 color: #9ca0b0;
523}
524/* LiteralStringDouble */
525.chroma .s2 {
526 color: #40a02b;
527}
528/* LiteralStringEscape */
529.chroma .se {
530 color: #1e66f5;
531}
532/* LiteralStringHeredoc */
533.chroma .sh {
534 color: #9ca0b0;
535}
536/* LiteralStringInterpol */
537.chroma .si {
538 color: #40a02b;
539}
540/* LiteralStringOther */
541.chroma .sx {
542 color: #40a02b;
543}
544/* LiteralStringRegex */
545.chroma .sr {
546 color: #179299;
547}
548/* LiteralStringSingle */
549.chroma .s1 {
550 color: #40a02b;
551}
552/* LiteralStringSymbol */
553.chroma .ss {
554 color: #40a02b;
555}
556/* LiteralNumber */
557.chroma .m {
558 color: #fe640b;
559}
560/* LiteralNumberBin */
561.chroma .mb {
562 color: #fe640b;
563}
564/* LiteralNumberFloat */
565.chroma .mf {
566 color: #fe640b;
567}
568/* LiteralNumberHex */
569.chroma .mh {
570 color: #fe640b;
571}
572/* LiteralNumberInteger */
573.chroma .mi {
574 color: #fe640b;
575}
576/* LiteralNumberIntegerLong */
577.chroma .il {
578 color: #fe640b;
579}
580/* LiteralNumberOct */
581.chroma .mo {
582 color: #fe640b;
583}
584/* Operator */
585.chroma .o {
586 color: #04a5e5;
587 font-weight: bold;
588}
589/* OperatorWord */
590.chroma .ow {
591 color: #04a5e5;
592 font-weight: bold;
593}
594/* Comment */
595.chroma .c {
596 color: #9ca0b0;
597 font-style: italic;
598}
599/* CommentHashbang */
600.chroma .ch {
601 color: #9ca0b0;
602 font-style: italic;
603}
604/* CommentMultiline */
605.chroma .cm {
606 color: #9ca0b0;
607 font-style: italic;
608}
609/* CommentSingle */
610.chroma .c1 {
611 color: #9ca0b0;
612 font-style: italic;
613}
614/* CommentSpecial */
615.chroma .cs {
616 color: #9ca0b0;
617 font-style: italic;
618}
619/* CommentPreproc */
620.chroma .cp {
621 color: #9ca0b0;
622 font-style: italic;
623}
624/* CommentPreprocFile */
625.chroma .cpf {
626 color: #9ca0b0;
627 font-weight: bold;
628 font-style: italic;
629}
630/* GenericDeleted */
631.chroma .gd {
632 color: #d20f39;
633 background-color: oklch(93.6% 0.032 17.717);
634}
635/* GenericEmph */
636.chroma .ge {
637 font-style: italic;
638}
639/* GenericError */
640.chroma .gr {
641 color: #d20f39;
642}
643/* GenericHeading */
644.chroma .gh {
645 color: #fe640b;
646 font-weight: bold;
647}
648/* GenericInserted */
649.chroma .gi {
650 color: #40a02b;
651 background-color: oklch(96.2% 0.044 156.743);
652}
653/* GenericStrong */
654.chroma .gs {
655 font-weight: bold;
656}
657/* GenericSubheading */
658.chroma .gu {
659 color: #fe640b;
660 font-weight: bold;
661}
662/* GenericTraceback */
663.chroma .gt {
664 color: #d20f39;
665}
666/* GenericUnderline */
667.chroma .gl {
668 text-decoration: underline;
669}
670
671@media (prefers-color-scheme: dark) {
672 /* Background */
673 .bg {
674 color: #cad3f5;
675 background-color: #24273a;
676 }
677 /* PreWrapper */
678 .chroma {
679 color: #cad3f5;
680 }
681 /* Error */
682 .chroma .err {
683 color: #ed8796;
684 }
685 /* LineLink */
686 .chroma .lnlinks {
687 outline: none;
688 text-decoration: none;
689 color: inherit;
690 }
691 /* LineTableTD */
692 .chroma .lntd {
693 vertical-align: top;
694 padding: 0;
695 margin: 0;
696 border: 0;
697 }
698 /* LineTable */
699 .chroma .lntable {
700 border-spacing: 0;
701 padding: 0;
702 margin: 0;
703 border: 0;
704 }
705 /* LineHighlight */
706 .chroma .hl {
707 background-color: #494d64;
708 }
709 /* LineNumbersTable */
710 .chroma .lnt {
711 white-space: pre;
712 -webkit-user-select: none;
713 user-select: none;
714 margin-right: 0.4em;
715 padding: 0 0.4em 0 0.4em;
716 color: #8087a2;
717 }
718 /* LineNumbers */
719 .chroma .ln {
720 white-space: pre;
721 -webkit-user-select: none;
722 user-select: none;
723 margin-right: 0.4em;
724 padding: 0 0.4em 0 0.4em;
725 color: #8087a2;
726 }
727 /* Line */
728 .chroma .line {
729 display: flex;
730 }
731 /* Keyword */
732 .chroma .k {
733 color: #c6a0f6;
734 }
735 /* KeywordConstant */
736 .chroma .kc {
737 color: #f5a97f;
738 }
739 /* KeywordDeclaration */
740 .chroma .kd {
741 color: #ed8796;
742 }
743 /* KeywordNamespace */
744 .chroma .kn {
745 color: #8bd5ca;
746 }
747 /* KeywordPseudo */
748 .chroma .kp {
749 color: #c6a0f6;
750 }
751 /* KeywordReserved */
752 .chroma .kr {
753 color: #c6a0f6;
754 }
755 /* KeywordType */
756 .chroma .kt {
757 color: #ed8796;
758 }
759 /* NameAttribute */
760 .chroma .na {
761 color: #8aadf4;
762 }
763 /* NameBuiltin */
764 .chroma .nb {
765 color: #91d7e3;
766 }
767 /* NameBuiltinPseudo */
768 .chroma .bp {
769 color: #91d7e3;
770 }
771 /* NameClass */
772 .chroma .nc {
773 color: #eed49f;
774 }
775 /* NameConstant */
776 .chroma .no {
777 color: #eed49f;
778 }
779 /* NameDecorator */
780 .chroma .nd {
781 color: #8aadf4;
782 font-weight: bold;
783 }
784 /* NameEntity */
785 .chroma .ni {
786 color: #8bd5ca;
787 }
788 /* NameException */
789 .chroma .ne {
790 color: #f5a97f;
791 }
792 /* NameFunction */
793 .chroma .nf {
794 color: #8aadf4;
795 }
796 /* NameFunctionMagic */
797 .chroma .fm {
798 color: #8aadf4;
799 }
800 /* NameLabel */
801 .chroma .nl {
802 color: #91d7e3;
803 }
804 /* NameNamespace */
805 .chroma .nn {
806 color: #f5a97f;
807 }
808 /* NameProperty */
809 .chroma .py {
810 color: #f5a97f;
811 }
812 /* NameTag */
813 .chroma .nt {
814 color: #c6a0f6;
815 }
816 /* NameVariable */
817 .chroma .nv {
818 color: #f4dbd6;
819 }
820 /* NameVariableClass */
821 .chroma .vc {
822 color: #f4dbd6;
823 }
824 /* NameVariableGlobal */
825 .chroma .vg {
826 color: #f4dbd6;
827 }
828 /* NameVariableInstance */
829 .chroma .vi {
830 color: #f4dbd6;
831 }
832 /* NameVariableMagic */
833 .chroma .vm {
834 color: #f4dbd6;
835 }
836 /* LiteralString */
837 .chroma .s {
838 color: #a6da95;
839 }
840 /* LiteralStringAffix */
841 .chroma .sa {
842 color: #ed8796;
843 }
844 /* LiteralStringBacktick */
845 .chroma .sb {
846 color: #a6da95;
847 }
848 /* LiteralStringChar */
849 .chroma .sc {
850 color: #a6da95;
851 }
852 /* LiteralStringDelimiter */
853 .chroma .dl {
854 color: #8aadf4;
855 }
856 /* LiteralStringDoc */
857 .chroma .sd {
858 color: #6e738d;
859 }
860 /* LiteralStringDouble */
861 .chroma .s2 {
862 color: #a6da95;
863 }
864 /* LiteralStringEscape */
865 .chroma .se {
866 color: #8aadf4;
867 }
868 /* LiteralStringHeredoc */
869 .chroma .sh {
870 color: #6e738d;
871 }
872 /* LiteralStringInterpol */
873 .chroma .si {
874 color: #a6da95;
875 }
876 /* LiteralStringOther */
877 .chroma .sx {
878 color: #a6da95;
879 }
880 /* LiteralStringRegex */
881 .chroma .sr {
882 color: #8bd5ca;
883 }
884 /* LiteralStringSingle */
885 .chroma .s1 {
886 color: #a6da95;
887 }
888 /* LiteralStringSymbol */
889 .chroma .ss {
890 color: #a6da95;
891 }
892 /* LiteralNumber */
893 .chroma .m {
894 color: #f5a97f;
895 }
896 /* LiteralNumberBin */
897 .chroma .mb {
898 color: #f5a97f;
899 }
900 /* LiteralNumberFloat */
901 .chroma .mf {
902 color: #f5a97f;
903 }
904 /* LiteralNumberHex */
905 .chroma .mh {
906 color: #f5a97f;
907 }
908 /* LiteralNumberInteger */
909 .chroma .mi {
910 color: #f5a97f;
911 }
912 /* LiteralNumberIntegerLong */
913 .chroma .il {
914 color: #f5a97f;
915 }
916 /* LiteralNumberOct */
917 .chroma .mo {
918 color: #f5a97f;
919 }
920 /* Operator */
921 .chroma .o {
922 color: #91d7e3;
923 font-weight: bold;
924 }
925 /* OperatorWord */
926 .chroma .ow {
927 color: #91d7e3;
928 font-weight: bold;
929 }
930 /* Comment */
931 .chroma .c {
932 color: #6e738d;
933 font-style: italic;
934 }
935 /* CommentHashbang */
936 .chroma .ch {
937 color: #6e738d;
938 font-style: italic;
939 }
940 /* CommentMultiline */
941 .chroma .cm {
942 color: #6e738d;
943 font-style: italic;
944 }
945 /* CommentSingle */
946 .chroma .c1 {
947 color: #6e738d;
948 font-style: italic;
949 }
950 /* CommentSpecial */
951 .chroma .cs {
952 color: #6e738d;
953 font-style: italic;
954 }
955 /* CommentPreproc */
956 .chroma .cp {
957 color: #6e738d;
958 font-style: italic;
959 }
960 /* CommentPreprocFile */
961 .chroma .cpf {
962 color: #6e738d;
963 font-weight: bold;
964 font-style: italic;
965 }
966 /* GenericDeleted */
967 .chroma .gd {
968 color: #ed8796;
969 background-color: oklch(44.4% 0.177 26.899 / 0.5);
970 }
971 /* GenericEmph */
972 .chroma .ge {
973 font-style: italic;
974 }
975 /* GenericError */
976 .chroma .gr {
977 color: #ed8796;
978 }
979 /* GenericHeading */
980 .chroma .gh {
981 color: #f5a97f;
982 font-weight: bold;
983 }
984 /* GenericInserted */
985 .chroma .gi {
986 color: #a6da95;
987 background-color: oklch(44.8% 0.119 151.328 / 0.5);
988 }
989 /* GenericStrong */
990 .chroma .gs {
991 font-weight: bold;
992 }
993 /* GenericSubheading */
994 .chroma .gu {
995 color: #f5a97f;
996 font-weight: bold;
997 }
998 /* GenericTraceback */
999 .chroma .gt {
1000 color: #ed8796;
1001 }
1002 /* GenericUnderline */
1003 .chroma .gl {
1004 text-decoration: underline;
1005 }
1006}
1007
1008actor-typeahead {
1009 --color-background: #ffffff;
1010 --color-border: #d1d5db;
1011 --color-shadow: #000000;
1012 --color-hover: #f9fafb;
1013 --color-avatar-fallback: #e5e7eb;
1014 --radius: 0.0;
1015 --padding-menu: 0.0rem;
1016 z-index: 1000;
1017}
1018
1019actor-typeahead::part(handle) {
1020 color: #111827;
1021}
1022
1023actor-typeahead::part(menu) {
1024 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1025}
1026
1027@media (prefers-color-scheme: dark) {
1028 actor-typeahead {
1029 --color-background: #1f2937;
1030 --color-border: #4b5563;
1031 --color-shadow: #000000;
1032 --color-hover: #374151;
1033 --color-avatar-fallback: #4b5563;
1034 }
1035
1036 actor-typeahead::part(handle) {
1037 color: #f9fafb;
1038 }
1039}