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