Monorepo for Tangled
tangled.org
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 "ss01" 1,
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 mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
95 }
96 input {
97 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
98 }
99 textarea {
100 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
101 }
102 details summary::-webkit-details-marker {
103 display: none;
104 }
105
106 code {
107 @apply font-mono rounded bg-gray-100 dark:bg-gray-700;
108 }
109 }
110
111 @layer components {
112 .btn {
113 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
114 bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
115 before:absolute before:inset-0 before:-z-10 before:block before:rounded
116 before:border before:border-gray-200 before:bg-white
117 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
118 before:content-[''] before:transition-all before:duration-150 before:ease-in-out
119 hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
120 hover:before:bg-gray-50
121 dark:hover:before:bg-gray-700
122 active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
123 focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
124 disabled:cursor-not-allowed disabled:opacity-50
125 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
126 }
127
128 .btn-create {
129 @apply btn text-white
130 before:bg-green-600 hover:before:bg-green-700
131 dark:before:bg-green-700 dark:hover:before:bg-green-800
132 before:border before:border-green-700 hover:before:border-green-800
133 focus-visible:before:outline-green-500
134 disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
135 }
136
137 .prose li:has(input) {
138 list-style: none;
139 .prose a.footnote-backref {
140 @apply no-underline;
141 }
142
143 .prose li {
144 @apply my-0 py-0;
145 }
146
147 .prose ul, .prose ol {
148 @apply my-1 py-0;
149 }
150
151 .prose img {
152 display: inline;
153 margin: 0;
154 vertical-align: middle;
155 }
156
157 .prose input {
158 @apply inline-block my-0 mb-1 mx-1;
159 }
160
161 .prose input[type="checkbox"] {
162 @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
163 }
164 }
165 @layer utilities {
166 .error {
167 @apply py-1 text-red-400 dark:text-red-300;
168 }
169 .success {
170 @apply py-1 text-gray-900 dark:text-gray-100;
171 }
172 }
173}
174
175/* Background */
176.bg {
177 color: #4c4f69;
178 background-color: #eff1f5;
179}
180/* PreWrapper */
181.chroma {
182 color: #4c4f69;
183}
184/* Error */
185.chroma .err {
186 color: #d20f39;
187}
188/* LineLink */
189.chroma .lnlinks {
190 outline: none;
191 text-decoration: none;
192 color: inherit;
193}
194/* LineTableTD */
195.chroma .lntd {
196 vertical-align: top;
197 padding: 0;
198 margin: 0;
199 border: 0;
200}
201/* LineTable */
202.chroma .lntable {
203 border-spacing: 0;
204 padding: 0;
205 margin: 0;
206 border: 0;
207}
208/* LineHighlight */
209.chroma .hl {
210 background-color: #bcc0cc;
211}
212/* LineNumbersTable */
213.chroma .lnt {
214 white-space: pre;
215 -webkit-user-select: none;
216 user-select: none;
217 margin-right: 0.4em;
218 padding: 0 0.4em 0 0.4em;
219 color: #8c8fa1;
220}
221/* LineNumbers */
222.chroma .ln {
223 white-space: pre;
224 -webkit-user-select: none;
225 user-select: none;
226 margin-right: 0.4em;
227 padding: 0 0.4em 0 0.4em;
228 color: #8c8fa1;
229}
230/* Line */
231.chroma .line {
232 display: flex;
233}
234/* Keyword */
235.chroma .k {
236 color: #8839ef;
237}
238/* KeywordConstant */
239.chroma .kc {
240 color: #fe640b;
241}
242/* KeywordDeclaration */
243.chroma .kd {
244 color: #d20f39;
245}
246/* KeywordNamespace */
247.chroma .kn {
248 color: #179299;
249}
250/* KeywordPseudo */
251.chroma .kp {
252 color: #8839ef;
253}
254/* KeywordReserved */
255.chroma .kr {
256 color: #8839ef;
257}
258/* KeywordType */
259.chroma .kt {
260 color: #d20f39;
261}
262/* NameAttribute */
263.chroma .na {
264 color: #1e66f5;
265}
266/* NameBuiltin */
267.chroma .nb {
268 color: #04a5e5;
269}
270/* NameBuiltinPseudo */
271.chroma .bp {
272 color: #04a5e5;
273}
274/* NameClass */
275.chroma .nc {
276 color: #df8e1d;
277}
278/* NameConstant */
279.chroma .no {
280 color: #df8e1d;
281}
282/* NameDecorator */
283.chroma .nd {
284 color: #1e66f5;
285 font-weight: bold;
286}
287/* NameEntity */
288.chroma .ni {
289 color: #179299;
290}
291/* NameException */
292.chroma .ne {
293 color: #fe640b;
294}
295/* NameFunction */
296.chroma .nf {
297 color: #1e66f5;
298}
299/* NameFunctionMagic */
300.chroma .fm {
301 color: #1e66f5;
302}
303/* NameLabel */
304.chroma .nl {
305 color: #04a5e5;
306}
307/* NameNamespace */
308.chroma .nn {
309 color: #fe640b;
310}
311/* NameProperty */
312.chroma .py {
313 color: #fe640b;
314}
315/* NameTag */
316.chroma .nt {
317 color: #8839ef;
318}
319/* NameVariable */
320.chroma .nv {
321 color: #dc8a78;
322}
323/* NameVariableClass */
324.chroma .vc {
325 color: #dc8a78;
326}
327/* NameVariableGlobal */
328.chroma .vg {
329 color: #dc8a78;
330}
331/* NameVariableInstance */
332.chroma .vi {
333 color: #dc8a78;
334}
335/* NameVariableMagic */
336.chroma .vm {
337 color: #dc8a78;
338}
339/* LiteralString */
340.chroma .s {
341 color: #40a02b;
342}
343/* LiteralStringAffix */
344.chroma .sa {
345 color: #d20f39;
346}
347/* LiteralStringBacktick */
348.chroma .sb {
349 color: #40a02b;
350}
351/* LiteralStringChar */
352.chroma .sc {
353 color: #40a02b;
354}
355/* LiteralStringDelimiter */
356.chroma .dl {
357 color: #1e66f5;
358}
359/* LiteralStringDoc */
360.chroma .sd {
361 color: #9ca0b0;
362}
363/* LiteralStringDouble */
364.chroma .s2 {
365 color: #40a02b;
366}
367/* LiteralStringEscape */
368.chroma .se {
369 color: #1e66f5;
370}
371/* LiteralStringHeredoc */
372.chroma .sh {
373 color: #9ca0b0;
374}
375/* LiteralStringInterpol */
376.chroma .si {
377 color: #40a02b;
378}
379/* LiteralStringOther */
380.chroma .sx {
381 color: #40a02b;
382}
383/* LiteralStringRegex */
384.chroma .sr {
385 color: #179299;
386}
387/* LiteralStringSingle */
388.chroma .s1 {
389 color: #40a02b;
390}
391/* LiteralStringSymbol */
392.chroma .ss {
393 color: #40a02b;
394}
395/* LiteralNumber */
396.chroma .m {
397 color: #fe640b;
398}
399/* LiteralNumberBin */
400.chroma .mb {
401 color: #fe640b;
402}
403/* LiteralNumberFloat */
404.chroma .mf {
405 color: #fe640b;
406}
407/* LiteralNumberHex */
408.chroma .mh {
409 color: #fe640b;
410}
411/* LiteralNumberInteger */
412.chroma .mi {
413 color: #fe640b;
414}
415/* LiteralNumberIntegerLong */
416.chroma .il {
417 color: #fe640b;
418}
419/* LiteralNumberOct */
420.chroma .mo {
421 color: #fe640b;
422}
423/* Operator */
424.chroma .o {
425 color: #04a5e5;
426 font-weight: bold;
427}
428/* OperatorWord */
429.chroma .ow {
430 color: #04a5e5;
431 font-weight: bold;
432}
433/* Comment */
434.chroma .c {
435 color: #9ca0b0;
436 font-style: italic;
437}
438/* CommentHashbang */
439.chroma .ch {
440 color: #9ca0b0;
441 font-style: italic;
442}
443/* CommentMultiline */
444.chroma .cm {
445 color: #9ca0b0;
446 font-style: italic;
447}
448/* CommentSingle */
449.chroma .c1 {
450 color: #9ca0b0;
451 font-style: italic;
452}
453/* CommentSpecial */
454.chroma .cs {
455 color: #9ca0b0;
456 font-style: italic;
457}
458/* CommentPreproc */
459.chroma .cp {
460 color: #9ca0b0;
461 font-style: italic;
462}
463/* CommentPreprocFile */
464.chroma .cpf {
465 color: #9ca0b0;
466 font-weight: bold;
467 font-style: italic;
468}
469/* GenericDeleted */
470.chroma .gd {
471 color: #d20f39;
472 background-color: oklch(93.6% 0.032 17.717);
473}
474/* GenericEmph */
475.chroma .ge {
476 font-style: italic;
477}
478/* GenericError */
479.chroma .gr {
480 color: #d20f39;
481}
482/* GenericHeading */
483.chroma .gh {
484 color: #fe640b;
485 font-weight: bold;
486}
487/* GenericInserted */
488.chroma .gi {
489 color: #40a02b;
490 background-color: oklch(96.2% 0.044 156.743);
491}
492/* GenericStrong */
493.chroma .gs {
494 font-weight: bold;
495}
496/* GenericSubheading */
497.chroma .gu {
498 color: #fe640b;
499 font-weight: bold;
500}
501/* GenericTraceback */
502.chroma .gt {
503 color: #d20f39;
504}
505/* GenericUnderline */
506.chroma .gl {
507 text-decoration: underline;
508}
509
510@media (prefers-color-scheme: dark) {
511 /* Background */
512 .bg {
513 color: #cad3f5;
514 background-color: #24273a;
515 }
516 /* PreWrapper */
517 .chroma {
518 color: #cad3f5;
519 }
520 /* Error */
521 .chroma .err {
522 color: #ed8796;
523 }
524 /* LineLink */
525 .chroma .lnlinks {
526 outline: none;
527 text-decoration: none;
528 color: inherit;
529 }
530 /* LineTableTD */
531 .chroma .lntd {
532 vertical-align: top;
533 padding: 0;
534 margin: 0;
535 border: 0;
536 }
537 /* LineTable */
538 .chroma .lntable {
539 border-spacing: 0;
540 padding: 0;
541 margin: 0;
542 border: 0;
543 }
544 /* LineHighlight */
545 .chroma .hl {
546 background-color: #494d64;
547 }
548 /* LineNumbersTable */
549 .chroma .lnt {
550 white-space: pre;
551 -webkit-user-select: none;
552 user-select: none;
553 margin-right: 0.4em;
554 padding: 0 0.4em 0 0.4em;
555 color: #8087a2;
556 }
557 /* LineNumbers */
558 .chroma .ln {
559 white-space: pre;
560 -webkit-user-select: none;
561 user-select: none;
562 margin-right: 0.4em;
563 padding: 0 0.4em 0 0.4em;
564 color: #8087a2;
565 }
566 /* Line */
567 .chroma .line {
568 display: flex;
569 }
570 /* Keyword */
571 .chroma .k {
572 color: #c6a0f6;
573 }
574 /* KeywordConstant */
575 .chroma .kc {
576 color: #f5a97f;
577 }
578 /* KeywordDeclaration */
579 .chroma .kd {
580 color: #ed8796;
581 }
582 /* KeywordNamespace */
583 .chroma .kn {
584 color: #8bd5ca;
585 }
586 /* KeywordPseudo */
587 .chroma .kp {
588 color: #c6a0f6;
589 }
590 /* KeywordReserved */
591 .chroma .kr {
592 color: #c6a0f6;
593 }
594 /* KeywordType */
595 .chroma .kt {
596 color: #ed8796;
597 }
598 /* NameAttribute */
599 .chroma .na {
600 color: #8aadf4;
601 }
602 /* NameBuiltin */
603 .chroma .nb {
604 color: #91d7e3;
605 }
606 /* NameBuiltinPseudo */
607 .chroma .bp {
608 color: #91d7e3;
609 }
610 /* NameClass */
611 .chroma .nc {
612 color: #eed49f;
613 }
614 /* NameConstant */
615 .chroma .no {
616 color: #eed49f;
617 }
618 /* NameDecorator */
619 .chroma .nd {
620 color: #8aadf4;
621 font-weight: bold;
622 }
623 /* NameEntity */
624 .chroma .ni {
625 color: #8bd5ca;
626 }
627 /* NameException */
628 .chroma .ne {
629 color: #f5a97f;
630 }
631 /* NameFunction */
632 .chroma .nf {
633 color: #8aadf4;
634 }
635 /* NameFunctionMagic */
636 .chroma .fm {
637 color: #8aadf4;
638 }
639 /* NameLabel */
640 .chroma .nl {
641 color: #91d7e3;
642 }
643 /* NameNamespace */
644 .chroma .nn {
645 color: #f5a97f;
646 }
647 /* NameProperty */
648 .chroma .py {
649 color: #f5a97f;
650 }
651 /* NameTag */
652 .chroma .nt {
653 color: #c6a0f6;
654 }
655 /* NameVariable */
656 .chroma .nv {
657 color: #f4dbd6;
658 }
659 /* NameVariableClass */
660 .chroma .vc {
661 color: #f4dbd6;
662 }
663 /* NameVariableGlobal */
664 .chroma .vg {
665 color: #f4dbd6;
666 }
667 /* NameVariableInstance */
668 .chroma .vi {
669 color: #f4dbd6;
670 }
671 /* NameVariableMagic */
672 .chroma .vm {
673 color: #f4dbd6;
674 }
675 /* LiteralString */
676 .chroma .s {
677 color: #a6da95;
678 }
679 /* LiteralStringAffix */
680 .chroma .sa {
681 color: #ed8796;
682 }
683 /* LiteralStringBacktick */
684 .chroma .sb {
685 color: #a6da95;
686 }
687 /* LiteralStringChar */
688 .chroma .sc {
689 color: #a6da95;
690 }
691 /* LiteralStringDelimiter */
692 .chroma .dl {
693 color: #8aadf4;
694 }
695 /* LiteralStringDoc */
696 .chroma .sd {
697 color: #6e738d;
698 }
699 /* LiteralStringDouble */
700 .chroma .s2 {
701 color: #a6da95;
702 }
703 /* LiteralStringEscape */
704 .chroma .se {
705 color: #8aadf4;
706 }
707 /* LiteralStringHeredoc */
708 .chroma .sh {
709 color: #6e738d;
710 }
711 /* LiteralStringInterpol */
712 .chroma .si {
713 color: #a6da95;
714 }
715 /* LiteralStringOther */
716 .chroma .sx {
717 color: #a6da95;
718 }
719 /* LiteralStringRegex */
720 .chroma .sr {
721 color: #8bd5ca;
722 }
723 /* LiteralStringSingle */
724 .chroma .s1 {
725 color: #a6da95;
726 }
727 /* LiteralStringSymbol */
728 .chroma .ss {
729 color: #a6da95;
730 }
731 /* LiteralNumber */
732 .chroma .m {
733 color: #f5a97f;
734 }
735 /* LiteralNumberBin */
736 .chroma .mb {
737 color: #f5a97f;
738 }
739 /* LiteralNumberFloat */
740 .chroma .mf {
741 color: #f5a97f;
742 }
743 /* LiteralNumberHex */
744 .chroma .mh {
745 color: #f5a97f;
746 }
747 /* LiteralNumberInteger */
748 .chroma .mi {
749 color: #f5a97f;
750 }
751 /* LiteralNumberIntegerLong */
752 .chroma .il {
753 color: #f5a97f;
754 }
755 /* LiteralNumberOct */
756 .chroma .mo {
757 color: #f5a97f;
758 }
759 /* Operator */
760 .chroma .o {
761 color: #91d7e3;
762 font-weight: bold;
763 }
764 /* OperatorWord */
765 .chroma .ow {
766 color: #91d7e3;
767 font-weight: bold;
768 }
769 /* Comment */
770 .chroma .c {
771 color: #6e738d;
772 font-style: italic;
773 }
774 /* CommentHashbang */
775 .chroma .ch {
776 color: #6e738d;
777 font-style: italic;
778 }
779 /* CommentMultiline */
780 .chroma .cm {
781 color: #6e738d;
782 font-style: italic;
783 }
784 /* CommentSingle */
785 .chroma .c1 {
786 color: #6e738d;
787 font-style: italic;
788 }
789 /* CommentSpecial */
790 .chroma .cs {
791 color: #6e738d;
792 font-style: italic;
793 }
794 /* CommentPreproc */
795 .chroma .cp {
796 color: #6e738d;
797 font-style: italic;
798 }
799 /* CommentPreprocFile */
800 .chroma .cpf {
801 color: #6e738d;
802 font-weight: bold;
803 font-style: italic;
804 }
805 /* GenericDeleted */
806 .chroma .gd {
807 color: #ed8796;
808 background-color: oklch(44.4% 0.177 26.899 / 0.5);
809 }
810 /* GenericEmph */
811 .chroma .ge {
812 font-style: italic;
813 }
814 /* GenericError */
815 .chroma .gr {
816 color: #ed8796;
817 }
818 /* GenericHeading */
819 .chroma .gh {
820 color: #f5a97f;
821 font-weight: bold;
822 }
823 /* GenericInserted */
824 .chroma .gi {
825 color: #a6da95;
826 background-color: oklch(44.8% 0.119 151.328 / 0.5);
827 }
828 /* GenericStrong */
829 .chroma .gs {
830 font-weight: bold;
831 }
832 /* GenericSubheading */
833 .chroma .gu {
834 color: #f5a97f;
835 font-weight: bold;
836 }
837 /* GenericTraceback */
838 .chroma .gt {
839 color: #ed8796;
840 }
841 /* GenericUnderline */
842 .chroma .gl {
843 text-decoration: underline;
844 }
845}
846
847.chroma .line:has(.ln:target) {
848 @apply bg-amber-400/30 dark:bg-amber-500/20;
849}