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