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