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