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