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