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