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