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}