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