tangled-core / input.css

@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 font-bold py-2 uppercase 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;
        }
        textarea {
            @apply font-mono;
        }
        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;
        }

        /* 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;
}

/* 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.0;
  --padding-menu: 0.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;
  }
}