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