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