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