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