Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
tangled-core input.css
27 kB · 1163 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164@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; }
.btn-cancel { @apply btn text-white before:bg-red-600 hover:before:bg-red-700 dark:before:bg-red-700 dark:hover:before:bg-red-800 before:border before:border-red-700 hover:before:border-red-800 focus-visible:before:outline-red-500 disabled:before:bg-red-400 dark:disabled:before:bg-red-600; }
.prose { overflow-wrap: anywhere; }
.prose td, .prose th { overflow-wrap: normal; }
.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; }}
@layer utilities { .hit-area { position: relative; }
.hit-area::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }
.hit-area-debug { position: relative; }
.hit-area-debug::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; border: 1px dashed #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.hit-area-debug:hover::before { border-color: #22c55e; background-color: rgba(34, 197, 94, 0.1); }
.hit-area-1 { --hit-area-t: -0.25rem; --hit-area-r: -0.25rem; --hit-area-b: -0.25rem; --hit-area-l: -0.25rem; } .hit-area-2 { --hit-area-t: -0.5rem; --hit-area-r: -0.5rem; --hit-area-b: -0.5rem; --hit-area-l: -0.5rem; } .hit-area-4 { --hit-area-t: -1rem; --hit-area-r: -1rem; --hit-area-b: -1rem; --hit-area-l: -1rem; } .hit-area-6 { --hit-area-t: -1.5rem; --hit-area-r: -1.5rem; --hit-area-b: -1.5rem; --hit-area-l: -1.5rem; } .hit-area-8 { --hit-area-t: -2rem; --hit-area-r: -2rem; --hit-area-b: -2rem; --hit-area-l: -2rem; } .hit-area-10 { --hit-area-t: -2.5rem; --hit-area-r: -2.5rem; --hit-area-b: -2.5rem; --hit-area-l: -2.5rem; } .hit-area-12 { --hit-area-t: -3rem; --hit-area-r: -3rem; --hit-area-b: -3rem; --hit-area-l: -3rem; }
.hit-area-l-1 { --hit-area-l: -0.25rem; } .hit-area-l-2 { --hit-area-l: -0.5rem; } .hit-area-l-4 { --hit-area-l: -1rem; } .hit-area-l-6 { --hit-area-l: -1.5rem; } .hit-area-l-8 { --hit-area-l: -2rem; } .hit-area-l-10 { --hit-area-l: -2.5rem; } .hit-area-l-12 { --hit-area-l: -3rem; }
.hit-area-r-1 { --hit-area-r: -0.25rem; } .hit-area-r-2 { --hit-area-r: -0.5rem; } .hit-area-r-4 { --hit-area-r: -1rem; } .hit-area-r-6 { --hit-area-r: -1.5rem; } .hit-area-r-8 { --hit-area-r: -2rem; } .hit-area-r-10 { --hit-area-r: -2.5rem; } .hit-area-r-12 { --hit-area-r: -3rem; }
.hit-area-t-1 { --hit-area-t: -0.25rem; } .hit-area-t-2 { --hit-area-t: -0.5rem; } .hit-area-t-4 { --hit-area-t: -1rem; } .hit-area-t-6 { --hit-area-t: -1.5rem; } .hit-area-t-8 { --hit-area-t: -2rem; } .hit-area-t-10 { --hit-area-t: -2.5rem; } .hit-area-t-12 { --hit-area-t: -3rem; }
.hit-area-b-1 { --hit-area-b: -0.25rem; } .hit-area-b-2 { --hit-area-b: -0.5rem; } .hit-area-b-4 { --hit-area-b: -1rem; } .hit-area-b-6 { --hit-area-b: -1.5rem; } .hit-area-b-8 { --hit-area-b: -2rem; } .hit-area-b-10 { --hit-area-b: -2.5rem; } .hit-area-b-12 { --hit-area-b: -3rem; }
.hit-area-x-1 { --hit-area-l: -0.25rem; --hit-area-r: -0.25rem; } .hit-area-x-2 { --hit-area-l: -0.5rem; --hit-area-r: -0.5rem; } .hit-area-x-4 { --hit-area-l: -1rem; --hit-area-r: -1rem; } .hit-area-x-6 { --hit-area-l: -1.5rem; --hit-area-r: -1.5rem; } .hit-area-x-8 { --hit-area-l: -2rem; --hit-area-r: -2rem; } .hit-area-x-10 { --hit-area-l: -2.5rem; --hit-area-r: -2.5rem; } .hit-area-x-12 { --hit-area-l: -3rem; --hit-area-r: -3rem; }
.hit-area-y-1 { --hit-area-t: -0.25rem; --hit-area-b: -0.25rem; } .hit-area-y-2 { --hit-area-t: -0.5rem; --hit-area-b: -0.5rem; } .hit-area-y-4 { --hit-area-t: -1rem; --hit-area-b: -1rem; } .hit-area-y-6 { --hit-area-t: -1.5rem; --hit-area-b: -1.5rem; } .hit-area-y-8 { --hit-area-t: -2rem; --hit-area-b: -2rem; } .hit-area-y-10 { --hit-area-t: -2.5rem; --hit-area-b: -2.5rem; } .hit-area-y-12 { --hit-area-t: -3rem; --hit-area-b: -3rem; }}