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