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