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