Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
tangled-core input.css
23 kB · 1056 lines
CSS
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057@tailwind base;@tailwind components;@tailwind utilities;@layer base { @font-face { font-family: "InterVariable"; src: url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
::selection { @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; }
@layer base { html { font-size: 14px; scrollbar-gutter: stable; } @supports (font-variation-settings: normal) { html { font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "tnum" 1; } }
a { @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; }
label { @apply block text-gray-900 text-sm py-2 dark:text-gray-100; } input, textarea { @apply block rounded p-3 bg-gray-50 dark:bg-gray-800 dark:text-white border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500; } details summary::-webkit-details-marker { display: none; }
code { @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white; } }
@layer components { .btn { @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 before:absolute before:inset-0 before:-z-10 before:block before:rounded before:border before:border-gray-200 before:bg-white before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)] before:content-[''] before:transition-all before:duration-150 before:ease-in-out hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] hover:before:bg-gray-50 dark:hover:before:bg-gray-700 active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)] focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; }
.btn-flat { @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 before:absolute before:inset-0 before:-z-10 before:block before:rounded before:border before:border-gray-200 before:bg-white before:content-[''] before:transition-all before:duration-150 before:ease-in-out hover:before:bg-gray-50 dark:hover:before:bg-gray-700 focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; }
.btn-create { @apply btn text-white before:bg-green-600 hover:before:bg-green-700 dark:before:bg-green-700 dark:hover:before:bg-green-800 before:border before:border-green-700 hover:before:border-green-800 focus-visible:before:outline-green-500 disabled:before:bg-green-400 dark:disabled:before:bg-green-600; }
.prose { overflow-wrap: anywhere; }
.prose hr { @apply my-2; }
.prose li:has(input) { @apply list-none; }
.prose ul:has(input) { @apply pl-2; }
.prose .heading .anchor { @apply no-underline mx-2 opacity-0; }
.prose .heading:hover .anchor { @apply opacity-70; }
.prose .heading .anchor:hover { @apply opacity-70; }
.prose h1:target, .prose h2:target, .prose h3:target, .prose h4:target, .prose h5:target, .prose h6:target { @apply bg-yellow-200/30 dark:bg-yellow-600/30; }
.prose a.footnote-backref { @apply no-underline; }
.prose a.mention { @apply no-underline hover:underline font-bold; }
.prose li { @apply my-0 py-0; }
.prose ul, .prose ol { @apply my-1 py-0; }
.prose img { display: inline; margin: 0; vertical-align: middle; }
.prose input { @apply inline-block my-0 mb-1 mx-1; }
.prose input[type="checkbox"] { @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500; }
/* Mermaid diagrams */ .prose pre.mermaid { @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0; }
/* Base callout */ details[data-callout] { @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4; }
details[data-callout] > summary { @apply font-bold cursor-pointer mb-1; }
details[data-callout] > .callout-content { @apply text-sm leading-snug; }
/* Note (blue) */ details[data-callout="note" i] { @apply border-blue-400 dark:border-blue-500; } details[data-callout="note" i] > summary { @apply text-blue-700 dark:text-blue-400; }
/* Important (purple) */ details[data-callout="important" i] { @apply border-purple-400 dark:border-purple-500; } details[data-callout="important" i] > summary { @apply text-purple-700 dark:text-purple-400; }
/* Warning (yellow) */ details[data-callout="warning" i] { @apply border-yellow-400 dark:border-yellow-500; } details[data-callout="warning" i] > summary { @apply text-yellow-700 dark:text-yellow-400; }
/* Caution (red) */ details[data-callout="caution" i] { @apply border-red-400 dark:border-red-500; } details[data-callout="caution" i] > summary { @apply text-red-700 dark:text-red-400; }
/* Tip (green) */ details[data-callout="tip" i] { @apply border-green-400 dark:border-green-500; } details[data-callout="tip" i] > summary { @apply text-green-700 dark:text-green-400; }
/* Optional: hide the disclosure arrow like GitHub */ details[data-callout] > summary::-webkit-details-marker { display: none; } } @layer utilities { .error { @apply py-1 text-red-400 dark:text-red-300; } .success { @apply py-1 text-gray-900 dark:text-gray-100; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: scroll 60s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .animate-marquee { animation: none; transform: none; } }
@keyframes progress { from { width: 0%; } to { width: 100%; } }
.animate-progress { animation: progress 10s linear forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.animate-fadein { animation: fadeIn 0.25s ease-in forwards; }
.animate-fadeout { animation: fadeOut 0.25s ease-out forwards; } }}
/* Background */.bg { color: #4c4f69; background-color: #eff1f5;}/* PreWrapper */.chroma { color: #4c4f69;}/* Error */.chroma .err { color: #d20f39;}/* LineLink */.chroma .lnlinks { outline: none; text-decoration: none; color: inherit;}/* LineTableTD */.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0;}/* LineTable */.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0;}/* LineHighlight */.chroma .hl { @apply bg-amber-400/30 dark:bg-amber-500/20;}
.line-quote-hl, .line-range-hl { @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;}
:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] { @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;}
:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a { @apply !text-black dark:!text-white;}
/* LineNumbersTable */.chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1;}/* LineNumbers */.chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1;}/* Line */.chroma .line { display: flex;}/* Keyword */.chroma .k { color: #8839ef;}/* KeywordConstant */.chroma .kc { color: #fe640b;}/* KeywordDeclaration */.chroma .kd { color: #d20f39;}/* KeywordNamespace */.chroma .kn { color: #179299;}/* KeywordPseudo */.chroma .kp { color: #8839ef;}/* KeywordReserved */.chroma .kr { color: #8839ef;}/* KeywordType */.chroma .kt { color: #d20f39;}/* NameAttribute */.chroma .na { color: #1e66f5;}/* NameBuiltin */.chroma .nb { color: #04a5e5;}/* NameBuiltinPseudo */.chroma .bp { color: #04a5e5;}/* NameClass */.chroma .nc { color: #df8e1d;}/* NameConstant */.chroma .no { color: #df8e1d;}/* NameDecorator */.chroma .nd { color: #1e66f5; font-weight: bold;}/* NameEntity */.chroma .ni { color: #179299;}/* NameException */.chroma .ne { color: #fe640b;}/* NameFunction */.chroma .nf { color: #1e66f5;}/* NameFunctionMagic */.chroma .fm { color: #1e66f5;}/* NameLabel */.chroma .nl { color: #04a5e5;}/* NameNamespace */.chroma .nn { color: #fe640b;}/* NameProperty */.chroma .py { color: #fe640b;}/* NameTag */.chroma .nt { color: #8839ef;}/* NameVariable */.chroma .nv { color: #dc8a78;}/* NameVariableClass */.chroma .vc { color: #dc8a78;}/* NameVariableGlobal */.chroma .vg { color: #dc8a78;}/* NameVariableInstance */.chroma .vi { color: #dc8a78;}/* NameVariableMagic */.chroma .vm { color: #dc8a78;}/* LiteralString */.chroma .s { color: #40a02b;}/* LiteralStringAffix */.chroma .sa { color: #d20f39;}/* LiteralStringBacktick */.chroma .sb { color: #40a02b;}/* LiteralStringChar */.chroma .sc { color: #40a02b;}/* LiteralStringDelimiter */.chroma .dl { color: #1e66f5;}/* LiteralStringDoc */.chroma .sd { color: #9ca0b0;}/* LiteralStringDouble */.chroma .s2 { color: #40a02b;}/* LiteralStringEscape */.chroma .se { color: #1e66f5;}/* LiteralStringHeredoc */.chroma .sh { color: #9ca0b0;}/* LiteralStringInterpol */.chroma .si { color: #40a02b;}/* LiteralStringOther */.chroma .sx { color: #40a02b;}/* LiteralStringRegex */.chroma .sr { color: #179299;}/* LiteralStringSingle */.chroma .s1 { color: #40a02b;}/* LiteralStringSymbol */.chroma .ss { color: #40a02b;}/* LiteralNumber */.chroma .m { color: #fe640b;}/* LiteralNumberBin */.chroma .mb { color: #fe640b;}/* LiteralNumberFloat */.chroma .mf { color: #fe640b;}/* LiteralNumberHex */.chroma .mh { color: #fe640b;}/* LiteralNumberInteger */.chroma .mi { color: #fe640b;}/* LiteralNumberIntegerLong */.chroma .il { color: #fe640b;}/* LiteralNumberOct */.chroma .mo { color: #fe640b;}/* Operator */.chroma .o { color: #04a5e5; font-weight: bold;}/* OperatorWord */.chroma .ow { color: #04a5e5; font-weight: bold;}/* Comment */.chroma .c { color: #9ca0b0; font-style: italic;}/* CommentHashbang */.chroma .ch { color: #9ca0b0; font-style: italic;}/* CommentMultiline */.chroma .cm { color: #9ca0b0; font-style: italic;}/* CommentSingle */.chroma .c1 { color: #9ca0b0; font-style: italic;}/* CommentSpecial */.chroma .cs { color: #9ca0b0; font-style: italic;}/* CommentPreproc */.chroma .cp { color: #9ca0b0; font-style: italic;}/* CommentPreprocFile */.chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic;}/* GenericDeleted */.chroma .gd { color: #d20f39; background-color: oklch(93.6% 0.032 17.717);}/* GenericEmph */.chroma .ge { font-style: italic;}/* GenericError */.chroma .gr { color: #d20f39;}/* GenericHeading */.chroma .gh { color: #fe640b; font-weight: bold;}/* GenericInserted */.chroma .gi { color: #40a02b; background-color: oklch(96.2% 0.044 156.743);}/* GenericStrong */.chroma .gs { font-weight: bold;}/* GenericSubheading */.chroma .gu { color: #fe640b; font-weight: bold;}/* GenericTraceback */.chroma .gt { color: #d20f39;}/* GenericUnderline */.chroma .gl { text-decoration: underline;}
@media (prefers-color-scheme: dark) { /* Background */ .bg { color: #cad3f5; background-color: #24273a; } /* PreWrapper */ .chroma { color: #cad3f5; } /* Error */ .chroma .err { color: #ed8796; } /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } /* LineHighlight */ .chroma .hl { background-color: #494d64; } /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8087a2; } /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8087a2; } /* Line */ .chroma .line { display: flex; } /* Keyword */ .chroma .k { color: #c6a0f6; } /* KeywordConstant */ .chroma .kc { color: #f5a97f; } /* KeywordDeclaration */ .chroma .kd { color: #ed8796; } /* KeywordNamespace */ .chroma .kn { color: #8bd5ca; } /* KeywordPseudo */ .chroma .kp { color: #c6a0f6; } /* KeywordReserved */ .chroma .kr { color: #c6a0f6; } /* KeywordType */ .chroma .kt { color: #ed8796; } /* NameAttribute */ .chroma .na { color: #8aadf4; } /* NameBuiltin */ .chroma .nb { color: #91d7e3; } /* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3; } /* NameClass */ .chroma .nc { color: #eed49f; } /* NameConstant */ .chroma .no { color: #eed49f; } /* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold; } /* NameEntity */ .chroma .ni { color: #8bd5ca; } /* NameException */ .chroma .ne { color: #f5a97f; } /* NameFunction */ .chroma .nf { color: #8aadf4; } /* NameFunctionMagic */ .chroma .fm { color: #8aadf4; } /* NameLabel */ .chroma .nl { color: #91d7e3; } /* NameNamespace */ .chroma .nn { color: #f5a97f; } /* NameProperty */ .chroma .py { color: #f5a97f; } /* NameTag */ .chroma .nt { color: #c6a0f6; } /* NameVariable */ .chroma .nv { color: #f4dbd6; } /* NameVariableClass */ .chroma .vc { color: #f4dbd6; } /* NameVariableGlobal */ .chroma .vg { color: #f4dbd6; } /* NameVariableInstance */ .chroma .vi { color: #f4dbd6; } /* NameVariableMagic */ .chroma .vm { color: #f4dbd6; } /* LiteralString */ .chroma .s { color: #a6da95; } /* LiteralStringAffix */ .chroma .sa { color: #ed8796; } /* LiteralStringBacktick */ .chroma .sb { color: #a6da95; } /* LiteralStringChar */ .chroma .sc { color: #a6da95; } /* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4; } /* LiteralStringDoc */ .chroma .sd { color: #6e738d; } /* LiteralStringDouble */ .chroma .s2 { color: #a6da95; } /* LiteralStringEscape */ .chroma .se { color: #8aadf4; } /* LiteralStringHeredoc */ .chroma .sh { color: #6e738d; } /* LiteralStringInterpol */ .chroma .si { color: #a6da95; } /* LiteralStringOther */ .chroma .sx { color: #a6da95; } /* LiteralStringRegex */ .chroma .sr { color: #8bd5ca; } /* LiteralStringSingle */ .chroma .s1 { color: #a6da95; } /* LiteralStringSymbol */ .chroma .ss { color: #a6da95; } /* LiteralNumber */ .chroma .m { color: #f5a97f; } /* LiteralNumberBin */ .chroma .mb { color: #f5a97f; } /* LiteralNumberFloat */ .chroma .mf { color: #f5a97f; } /* LiteralNumberHex */ .chroma .mh { color: #f5a97f; } /* LiteralNumberInteger */ .chroma .mi { color: #f5a97f; } /* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f; } /* LiteralNumberOct */ .chroma .mo { color: #f5a97f; } /* Operator */ .chroma .o { color: #91d7e3; font-weight: bold; } /* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold; } /* Comment */ .chroma .c { color: #6e738d; font-style: italic; } /* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic; } /* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic; } /* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic; } /* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic; } /* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic; } /* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic; } /* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: oklch(44.4% 0.177 26.899 / 0.5); } /* GenericEmph */ .chroma .ge { font-style: italic; } /* GenericError */ .chroma .gr { color: #ed8796; } /* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold; } /* GenericInserted */ .chroma .gi { color: #a6da95; background-color: oklch(44.8% 0.119 151.328 / 0.5); } /* GenericStrong */ .chroma .gs { font-weight: bold; } /* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold; } /* GenericTraceback */ .chroma .gt { color: #ed8796; } /* GenericUnderline */ .chroma .gl { text-decoration: underline; }}
actor-typeahead { --color-background: #ffffff; --color-border: #d1d5db; --color-shadow: #000000; --color-hover: #f9fafb; --color-avatar-fallback: #e5e7eb; --radius: 0; --padding-menu: 0rem; z-index: 1000;}
actor-typeahead::part(handle) { color: #111827;}
actor-typeahead::part(menu) { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
@media (prefers-color-scheme: dark) { actor-typeahead { --color-background: #1f2937; --color-border: #4b5563; --color-shadow: #000000; --color-hover: #374151; --color-avatar-fallback: #4b5563; }
actor-typeahead::part(handle) { color: #f9fafb; }}