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