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