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