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