tjh.dev
forked from
tangled.org/core
fork
Configure Feed
Select the types of activity you want to include in your feed.
this repo has no description
fork
Configure Feed
Select the types of activity you want to include in your feed.
oppi.li
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}