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