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