/* Scraper console. Tokens and components follow the design canvas («Доработка») in VS Code's manner (canvas «Строка · VS Code»): square corners, a 1 px focus outline, flat lists and menus, a blue primary; Geist, warm neutrals. */ /* Variable fonts: one face per file covers every weight used. */ @font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root { color-scheme: light; --font:'Geist',ui-sans-serif,system-ui,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace; --num-font:var(--font); --num-weight:600; --num-track:-0.02em; --main-line:#e6e5e0; --row-h:38px; --radius:4px; --bg:#f6f6f4; --panel:#ffffff; --panel-2:#fbfbfa; --canvas:#fbfbfa; --card-bg:#ffffff; --line:#e6e5e0; --line-2:#f1f0ec; --text:#17181a; --text-2:#45474d; --muted:#6b6e76; --link:#2f5bea; --accent:#2f5bea; --hover:#f3f2ef; --btn-bg:#ffffff; --btn-line:#dcdbd6; --pri-bg:#2f5bea; --pri-text:#ffffff; --kbd-inv-line:rgba(255,255,255,.35); --split-line:#45474d; --seg-bg:#f0efeb; --seg-on:#ffffff; --input-bg:#ffffff; --menu-bg:#ffffff; --shadow:0 4px 16px rgba(20,20,19,.16),0 0 0 1px rgba(20,20,19,.04); --scrim:rgba(23,24,26,.3); --sel-bg:#f2f5fe; --cur-bg:#eef2fe; --track:#efeee9; --pill-on-line:#b9ccf8; --pill-on-bg:rgba(47,91,234,.08); --pill-on-fg:#1c55b0; --ok-bg:#e7f4ec; --ok-fg:#17603c; --ok-dot:#1f8a53; --ok-fade:rgba(31,138,83,.08); --bad-bg:#fdeceb; --bad-fg:#a3261f; --bad-dot:#c4302b; --bad-fade:rgba(196,48,43,.08); --bad-line:#efc9c6; --bad-solid:#c4302b; --warn-bg:#fcf1dc; --warn-fg:#7f4a00; --warn-dot:#d98a1c; --info-bg:#e8f0fd; --info-fg:#1c55b0; --neu-bg:#f0efeb; --neu-fg:#45474d; --toast-bg:#17181a; --toast-fg:#ffffff; --toast-link:#9db6ff; --toast-ok:#7fdca7; --toast-danger:#ff9d97; --c1:#2f5bea; --c1-soft:#c9d6fb; --c1-fade:rgba(47,91,234,.08); --c2:#7aa0f5; --c3:#e0892f; --c-muted:#cfcdc6; --c-bad:#e07b6f; --c-ok-soft:#b7dfc6; --facet-fill:rgba(47,91,234,.07); --tok-k:#2f5bea; --tok-v:#9a5b00; --lift:0 8px 24px -14px rgba(20,20,19,.18); --sw-off:#d6d5d0; --hm0:#efeee9; --hm1:#c9d6fb; --hm2:#93acf6; --hm3:#5b82ef; --hm4:#2f5bea; --logo-bg:#17181a; --logo-fg:#ffffff; --scroll-thumb:rgba(23,24,26,.2); --scroll-thumb-hover:rgba(23,24,26,.34); /* Code on a dark card in both themes. */ --code-bg:#17181a; --code-fg:#e6e6e3; --code-btn:#2c2d31; --code-btn-line:#3a3b40; } :root[data-theme="dark"] { color-scheme: dark; --main-line:#252932; --bg:#0b0c0f; --panel:#111317; --panel-2:#15181d; --canvas:#0e1014; --card-bg:#15181d; --line:#252932; --line-2:#1c1f26; --text:#e8e9ed; --text-2:#b9bcc6; --muted:#8e93a1; --link:#9db6ff; --accent:#7c9dff; --hover:#1b1e25; --btn-bg:#171a20; --btn-line:#2c303a; --pri-bg:#3d64e0; --split-line:#9a9ea9; --seg-bg:#1a1d24; --seg-on:#2a2e37; --input-bg:#0f1115; --menu-bg:#181b21; --shadow:0 4px 16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05); --scrim:rgba(0,0,0,.55); --sel-bg:rgba(124,157,255,.08); --cur-bg:rgba(124,157,255,.13); --track:#20242c; --pill-on-line:rgba(124,157,255,.45); --pill-on-bg:rgba(124,157,255,.12); --pill-on-fg:#b9cbff; --ok-bg:rgba(63,185,122,.14); --ok-fg:#7fdca7; --ok-dot:#3fb97a; --ok-fade:rgba(63,185,122,.1); --bad-bg:rgba(240,98,90,.14); --bad-fg:#ff9d97; --bad-dot:#f0625a; --bad-fade:rgba(240,98,90,.1); --bad-line:rgba(240,98,90,.35); --bad-solid:#d9443b; --warn-bg:rgba(232,163,61,.14); --warn-fg:#f5c56b; --warn-dot:#e8a33d; --info-bg:rgba(124,157,255,.14); --info-fg:#b9cbff; --neu-bg:rgba(255,255,255,.07); --neu-fg:#b9bcc6; --toast-bg:#e8e9ed; --toast-fg:#0b0c0f; --toast-link:#2f5bea; --toast-ok:#1f8a53; --toast-danger:#c4302b; --c1:#7c9dff; --c1-soft:#34405f; --c1-fade:rgba(124,157,255,.1); --c2:#5b76c9; --c3:#e8a33d; --c-muted:#3a3f4a; --c-bad:#f0625a; --c-ok-soft:#2c4a3a; --facet-fill:rgba(124,157,255,.09); --tok-k:#9db6ff; --tok-v:#f5c56b; --lift:none; --sw-off:#3a3f4a; --hm0:#1a1d24; --hm1:#26345a; --hm2:#35518f; --hm3:#5474c9; --hm4:#7c9dff; --logo-bg:#e8e9ed; --logo-fg:#0b0c0f; --scroll-thumb:rgba(255,255,255,.16); --scroll-thumb-hover:rgba(255,255,255,.28); } /* ================= Base ================= */ /* Like the design canvas: content-box by default, border-box only on the controls whose size includes their border (buttons, chips, inputs, rows, tabs, menus). */ .tab, .btn, .kbd, .chip, .tr, .menu, .inp, .search, .rail2, .pt, .pill, .seg > *, .toast, .selbar, .sw, .cb, .tbl, .tbl th, .tbl td, .pop, .field, .ri, .mi, .logo, .av { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: normal; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4, p { margin: 0; } b, strong { font-weight: 600; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link); text-decoration: underline; } ::selection { background: var(--info-bg); } [hidden] { display: none !important; } :focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; } /* a control takes its ring outside, as VS Code's buttons do (on a filled one an inner ring would not show); rows, menu items, tabs and fields keep it inside */ :is(.btn, .pill, .sw, .cb):focus-visible { outline-offset: 1px; } .mono { font-family: var(--mono); } .num { font-variant-numeric: tabular-nums; } .big { font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: var(--num-track); font-weight: var(--num-weight); } .r { text-align: right; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub { font-size: 12.5px; color: var(--muted); } .text-2 { color: var(--text-2); } .grow { flex-grow: 1; min-width: 0; } .row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; } .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .i.s { width: 14px; height: 14px; } .spin { animation: spin 1.5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ================= Shell ================= */ .app { display: flex; height: 100vh; overflow: hidden; } .rail2 { width: 72px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; } .logo { width: 32px; height: 32px; border-radius: 4px; background: var(--logo-bg); color: var(--logo-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; margin-bottom: 10px; } .logo:hover { color: var(--logo-fg); text-decoration: none; } .rail-sep { width: 28px; height: 1px; background: var(--line); margin: 6px 0; } .ri { width: 72px; height: 52px; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 10.5px; font-weight: 500; position: relative; border: 0; background: transparent; font-family: inherit; cursor: pointer; transition: background-color 80ms, color 80ms; } .ri:hover { color: var(--text); text-decoration: none; } .ri.on { color: var(--text); box-shadow: inset 2px 0 0 var(--accent); } .ri .i { width: 18px; height: 18px; } .ri .pipd { position: absolute; top: 8px; left: 43px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); box-shadow: 0 0 0 2px var(--bg); } .ri .pipd.bad { background: var(--bad-dot); } .rail-spacer { flex-grow: 1; } .rail-bal { font-size: 12px; color: var(--text); margin: 6px 0; } .rail-bal:hover { color: var(--text); text-decoration: none; } .rail-bal.low, .rail-bal.low:hover { color: var(--warn-fg); } .rail-av { width: 32px; height: 32px; font-size: 11px; border: 0; cursor: pointer; padding: 0; } /* counter(dirty) counts a page's changed fields for its floating save bar. */ .main { flex-grow: 1; min-width: 0; background: var(--panel); border-left: 1px solid var(--main-line); display: flex; flex-direction: column; overflow: hidden; position: relative; counter-reset: dirty; } .pbar { min-height: 48px; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 0 8px; border-bottom: 1px solid var(--line); container: pbar / inline-size; } .pt { height: 48px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; white-space: nowrap; transition: color 80ms; } .pt:hover { color: var(--text); text-decoration: none; } .pt.on { color: var(--text); border-bottom-color: var(--accent); } .pt .n { font-size: 11.5px; color: var(--muted); font-weight: 400; } .pt .badge { margin-left: 0; } .pbar-title { font-size: 13.5px; font-weight: 500; padding: 0 8px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .pbar-title a { color: var(--muted); } .pbar-title a:hover { color: var(--text); text-decoration: none; } .pbar .sub { white-space: nowrap; } /* A page's own head (breadcrumb, title, status) in place of the tabs. */ .pbar.pbar-own { gap: 8px; padding-left: 16px; } .pbar .search { width: 200px; height: 26px; } .content { flex-grow: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; position: relative; } .content.flush { overflow: hidden; } .split { flex-grow: 1; display: flex; min-height: 0; position: relative; container: split / inline-size; } .page { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .list { flex-grow: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .list-body { flex-grow: 1; min-height: 0; overflow: auto; } .live { display: flex; align-items: center; gap: 6px; margin-right: 4px; } /* ================= Buttons ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 2px; border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color 80ms, opacity 80ms; } .btn:hover { background: var(--hover); color: var(--text); text-decoration: none; } .btn:active { background: var(--hover); } .btn.pri { background: var(--pri-bg); border-color: var(--pri-bg); color: var(--pri-text); } .btn.pri:hover { opacity: .88; color: var(--pri-text); } .btn.pri:active { opacity: .8; } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--hover); } .btn.dng { background: var(--bad-solid); border-color: var(--bad-solid); color: #fff; } .btn.dng:hover { opacity: .88; color: #fff; } .btn.dng-o { color: var(--bad-fg); border-color: var(--bad-line); } .btn.dng-o:hover { color: var(--bad-fg); } .btn.sm { height: 24px; padding: 0 8px; font-size: 12.5px; } .btn.lg { height: 32px; padding: 0 14px; font-size: 13.5px; } .btn.ico { width: 28px; padding: 0; } .btn.sm.ico { width: 24px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* A [data-gated] button waits until every field of its [data-gate] is valid: a typed phrase, a required "I have saved it" box. */ [data-gate]:has(:invalid) [data-gated] { opacity: .45; pointer-events: none; } /* A submit taking long: a spinner takes the place of the icon (console.js). */ .btn[aria-busy="true"] { pointer-events: none; } .btn[aria-busy="true"] > .i { display: none; } .btn[aria-busy="true"]::before { content: ''; width: 10px; height: 10px; border: 1.75px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1.5s linear infinite; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--btn-line); border-radius: 3px; font-family: var(--mono); font-size: 10.5px; line-height: 1; color: var(--text-2); background: var(--btn-bg); } .kbd.inv { background: transparent; border-color: var(--kbd-inv-line); color: var(--pri-text); } /* ================= Status ================= */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 3px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1; } .chip.xs { height: 18px; font-size: 11px; } .chip.sm { font-size: 11.5px; } .ok { background: var(--ok-bg); color: var(--ok-fg); } .bad { background: var(--bad-bg); color: var(--bad-fg); } .warn { background: var(--warn-bg); color: var(--warn-fg); } .info { background: var(--info-bg); color: var(--info-fg); } .neu { background: var(--neu-bg); color: var(--neu-fg); } .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .d-ok { background: var(--ok-dot); } .d-bad { background: var(--bad-dot); } .d-warn { background: var(--warn-dot); } .d-neu { background: var(--muted); } .d-info { background: var(--accent); } .d-off { background: var(--c-muted); } .badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 500; } .t-ok { color: var(--ok-fg); } .t-bad { color: var(--bad-fg); } .t-warn { color: var(--warn-fg); } .danger-text { color: var(--bad-fg); } /* ================= Segmented, pills, switch ================= */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--seg-bg); border-radius: 3px; flex-shrink: 0; } .seg > button, .seg > a, .seg > label { height: 22px; padding: 0 10px; border: 0; border-radius: 2px; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: background-color 80ms, color 80ms; } .seg > a:hover, .seg > button:hover, .seg > label:hover { color: var(--text); text-decoration: none; } .seg > .on, .seg > label:has(input:checked) { background: var(--seg-on); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--btn-line); } .seg > label input { position: absolute; opacity: 0; pointer-events: none; } .seg .n { font-size: 11.5px; color: var(--muted); font-weight: 400; } .seg.block { display: flex; } .seg.block > * { flex: 1; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 3px; border: 1px solid var(--btn-line); background: var(--btn-bg); font-family: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background-color 80ms; } .pill:hover { background: var(--hover); color: var(--text-2); text-decoration: none; } .pill.on { border-color: var(--pill-on-line); background: var(--pill-on-bg); color: var(--pill-on-fg); } .pill.dashed { border-style: dashed; } .pill select { border: 0; background: transparent; outline: 0; color: inherit; font-size: 13px; padding: 0; cursor: pointer; } .paid { font-size: 10.5px; padding: 1px 5px; border-radius: 2px; background: var(--warn-bg); color: var(--warn-fg); } .sw, .cb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 3px; margin: 0; padding: 0; flex-shrink: 0; cursor: pointer; border: 1px solid var(--split-line); background: var(--input-bg); transition: background-color 80ms, border-color 80ms; } .sw:checked, .sw.on, .cb:checked { border-color: var(--pri-bg); background: var(--pri-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .cb:indeterminate { border-color: var(--pri-bg); background: var(--pri-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; } .sw[disabled], .cb[disabled] { opacity: .45; cursor: default; } .sw-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } /* ================= Tables (grid rows) ================= */ .th { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 0 18px; height: 28px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; position: sticky; top: 0; z-index: 1; } .th > * { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; } .th > .r { justify-content: flex-end; } .th a { color: inherit; } .th a:hover { color: var(--text); text-decoration: none; } .tr { position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 0 18px; height: var(--row-h); font-size: 13px; color: var(--text); transition: background-color 80ms; } .tr.tall { height: 46px; } a.tr:hover, .tr[data-href]:hover { background: var(--hover); text-decoration: none; color: var(--text); } .tr[data-href] { cursor: pointer; } .tr:has(.cb:checked) { background: var(--sel-bg); } .tr.cur, a.tr.cur:hover { background: var(--cur-bg); box-shadow: inset 0 0 0 1px var(--accent); } .tr.off { color: var(--muted); } .tr > * { min-width: 0; } .tr .row-float { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding-left: 16px; background: linear-gradient(90deg, transparent, var(--hover) 16px); } .tr:has(.cb:checked) .row-float { background: linear-gradient(90deg, transparent, var(--sel-bg) 16px); } .tr:hover { background: var(--hover); } .tr .acts { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity 80ms; } .tr:hover .acts, .tr:focus-within .acts, .tr.cur .acts { opacity: 1; } .flt { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; color: var(--muted); border: 0; background: transparent; padding: 0; cursor: pointer; } .flt:hover { background: var(--hover); color: var(--text); } .flt.on { color: var(--info-fg); background: var(--info-bg); } .flt[aria-expanded="true"] { outline: 1px solid var(--accent); outline-offset: -1px; } .btn.ico[aria-expanded="true"] { background: var(--hover); } /* A filter popover opens inside a header cell: it must not inherit the header's muted 500 text. */ .th [popover] { font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; } .th [popover] a.btn { color: var(--text); } .selnote { display: flex; align-items: center; justify-content: center; gap: 10px; height: 34px; background: var(--info-bg); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--info-fg); flex-shrink: 0; } .selnote a { font-weight: 600; } .foot { height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); margin-top: auto; background: var(--panel); } .foot .kh { display: flex; align-items: center; gap: 4px; } .foot .fsep { width: 1px; height: 14px; background: var(--line); flex-shrink: 0; } .pg { display: inline-flex; gap: 2px; margin-left: 8px; } /* ================= Cards and text ================= */ .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); } .ct { font-size: 13.5px; font-weight: 600; } .ch { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; } .ch .ct { flex-grow: 1; } .sec { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .lk { font-size: 12.5px; font-weight: 500; white-space: nowrap; } .prop { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prop > span:first-child { font-size: 11.5px; color: var(--muted); } .prop > span:last-child { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .kv > span:first-child { color: var(--muted); } .kpis { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .kpis > div { background: var(--panel); padding: 9px 11px; min-width: 0; } .hr { height: 1px; background: var(--line); margin: 4px 2px; } .track { height: 6px; border-radius: 1px; background: var(--track); overflow: hidden; display: flex; } .track i { display: block; height: 6px; } .av { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; background: var(--info-bg); color: var(--info-fg); } .hm { width: 13px; height: 13px; border-radius: 2px; background: var(--hm0); } .hm.l1 { background: var(--hm1); } .hm.l2 { background: var(--hm2); } .hm.l3 { background: var(--hm3); } .hm.l4 { background: var(--hm4); } .hm.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); } .ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--panel-2) 0 10px, var(--line-2) 10px 20px); border: 1px dashed var(--line); border-radius: 3px; color: var(--muted); font-size: 12.5px; } .code { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; white-space: pre; overflow: auto; color: var(--text); margin: 0; } .code.wrap { white-space: pre-wrap; word-break: break-word; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } .tok-k { color: var(--tok-k); } .tok-v { color: var(--tok-v); } /* ================= Forms ================= */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lbl { font-size: 12.5px; font-weight: 500; color: var(--text-2); } .inp { height: 28px; border: 1px solid var(--btn-line); border-radius: 2px; padding: 0 10px; font-family: inherit; font-size: 13.5px; color: var(--text); background: var(--input-bg); outline: 0; width: 100%; transition: border-color 80ms, box-shadow 80ms; } .inp::placeholder, .search input::placeholder, textarea::placeholder { color: var(--muted); } .inp:focus, .inp:focus-visible { border-color: var(--accent); outline: 0; } .inp[aria-invalid="true"]:focus { border-color: var(--bad-dot); } .inp.mono { font-family: var(--mono); } .inp.sm { height: 24px; font-size: 13px; } textarea.inp { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; } select.inp { cursor: pointer; } .hint { font-size: 12px; color: var(--muted); } .err-text { font-size: 12px; color: var(--bad-fg); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .form-grid .span { grid-column: 1 / -1; } .search { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 1px solid var(--btn-line); border-radius: 2px; background: var(--input-bg); color: var(--muted); font-size: 13px; transition: border-color 80ms, box-shadow 80ms; } .search:focus-within { border-color: var(--accent); } .search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); flex-grow: 1; min-width: 0; } /* The floating save bar (Page.Float): centred over the bottom of the main panel. */ .savebar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 14px; border-radius: 4px; background: var(--toast-bg); color: var(--toast-fg); font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; animation: rise 200ms ease-out; } .savebar .btn.ghost { color: inherit; } .savebar .btn.ghost:hover { background: rgba(127,127,127,.2); } .savebar .kbd { background: transparent; border-color: currentColor; color: inherit; opacity: .7; } /* ================= Notices and empty states ================= */ .note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 3px; font-size: 13px; line-height: 1.5; align-items: flex-start; } .note .i { margin-top: 2px; } .note.bad { background: var(--bad-bg); color: var(--text); border: 1px solid var(--bad-line); } .note.bad b { color: var(--bad-fg); } .note.info { background: var(--info-bg); color: var(--text); } .note a { font-weight: 500; } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 24px; flex-grow: 1; } .empty-ic { width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: var(--info-bg); color: var(--info-fg); } .empty-ic.bad { background: var(--bad-bg); color: var(--bad-fg); } .empty-ic.neu { background: var(--neu-bg); color: var(--neu-fg); } .empty h3 { font-size: 15px; font-weight: 600; } .empty p { font-size: 13px; color: var(--text-2); max-width: 380px; line-height: 1.55; } .empty .acts { display: flex; gap: 8px; margin-top: 10px; } /* ================= Side panel ================= */ .pnl { width: 430px; flex-shrink: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel); min-height: 0; animation: pnl-in 180ms ease-out; } @keyframes pnl-in { from { transform: translateX(16px); opacity: 0; } } .pnl-top { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; } .pnl-nav { display: flex; align-items: center; gap: 4px; } .pnl-nav .sec { flex-grow: 1; } .pnl-title { font-size: 21px; font-weight: 500; line-height: 1.25; word-break: break-word; } .pnl-body { flex-grow: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .pnl-body.flush { padding: 0; gap: 0; } .pnl-f { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-shrink: 0; } .pnl-h { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .minirow { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; height: 30px; font-size: 13px; border-bottom: 1px solid var(--line-2); color: var(--text); } a.minirow:hover { background: var(--hover); text-decoration: none; color: var(--text); } /* ================= Popovers and menus ================= */ [popover] { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; inset: auto; position: fixed; } /* a popover measured before it shows (console.js placePopover) */ [popover].pop-measure { display: block; visibility: hidden; } .menu { background: var(--menu-bg); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column; min-width: 200px; max-height: min(70vh, 520px); overflow: auto; } [popover]:popover-open > .menu, [popover]:popover-open > .pop { animation: pop-in 120ms ease-out; } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } } .pop { background: var(--menu-bg); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); padding: 12px; } .mi { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: 3px; font-size: 13px; color: var(--text); border: 0; background: transparent; font-family: inherit; text-align: left; width: 100%; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background-color 80ms; } .mi:hover, .mi.hl { background: var(--pri-bg); color: var(--pri-text); text-decoration: none; } /* on the filled row whatever is muted, plain or accented takes the row's colour */ .mi:is(:hover, .hl) { --text: currentColor; --text-2: currentColor; --muted: currentColor; --accent: currentColor; } .mi.dng:hover, .mi.dng:hover .i { background: var(--bad-solid); color: #fff; } .mi .kbd, .mi .end { margin-left: auto; } .mi .i { color: var(--muted); } .mi.dng, .mi.dng .i { color: var(--bad-fg); } .mi.mi-off, .mi.mi-off:hover { cursor: default; background: transparent; color: var(--muted); } .mi .mi-hint { font-size: 11.5px; color: var(--muted); } .mi.on::after { content: ''; margin-left: auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--accent); } .th [popover] > form.menu > div:last-child { position: sticky; bottom: 0; background: var(--menu-bg); } .pbar [popover] > .menu { width: 260px; } .acts [popover] > .menu, #row-menu > .menu { width: 250px; } .mh { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 9px 4px; } .menu form { display: contents; } .tip { position: fixed; z-index: 100; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-radius: 3px; background: var(--toast-bg); color: var(--toast-fg); font-size: 12px; white-space: nowrap; pointer-events: none; animation: fade-in 120ms ease-out; } @keyframes fade-in { from { opacity: 0; } } /* ================= Dialogs ================= */ dialog.dlg { position: fixed; inset: 0; margin: auto; margin-top: 84px; padding: 0; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); background: var(--menu-bg); color: var(--text); border-radius: 6px; box-shadow: var(--shadow); border: 1px solid var(--line); display: none; flex-direction: column; overflow: hidden; } dialog.dlg[open] { display: flex; animation: dlg-in 160ms ease-out; } dialog.dlg.mid { margin-top: 150px; } dialog.dlg::backdrop { background: var(--scrim); animation: fade-in 160ms ease-out; } @keyframes dlg-in { from { opacity: 0; transform: scale(.98); } } .dlg-h { display: flex; gap: 14px; padding: 20px 22px 0; } .dlg-h h2 { font-size: 17px; font-weight: 600; } .dlg-h p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); } .dlg-ic { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dlg-b { padding: 16px 22px 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; } .dlg-f { display: flex; align-items: center; gap: 8px; padding: 16px 22px; margin-top: 18px; border-top: 1px solid var(--line); background: var(--panel-2); } .dlg-f .sub { flex-grow: 1; } dialog.sheet { position: fixed; inset: 8px 8px 8px auto; margin: 0; height: auto; max-height: none; width: 520px; max-width: calc(100vw - 16px); padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; } dialog.sheet[open] { display: flex; animation: sheet-in 220ms ease-out; } dialog.sheet::backdrop { background: var(--scrim); animation: fade-in 160ms ease-out; } @keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } } /* ================= Palette ================= */ #cmdk { width: 640px; } .cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .cmdk-in input { flex-grow: 1; border: 0; outline: 0; font-family: inherit; font-size: 16px; color: var(--text); background: transparent; } .cmdk-list { padding: 6px; display: flex; flex-direction: column; overflow: auto; max-height: 420px; } .cmdk-list .mi { height: 30px; } .cmdk-foot { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--panel-2); font-size: 12px; color: var(--muted); flex-shrink: 0; } .cmdk-foot span { display: flex; gap: 4px; align-items: center; } /* ================= Toasts and selection bar ================= */ .toasts { position: fixed; left: 98px; bottom: 26px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 4px; background: var(--toast-bg); color: var(--toast-fg); font-size: 13px; box-shadow: var(--shadow); pointer-events: auto; animation: rise 200ms ease-out; max-width: 520px; } .toast > span { padding: 12px 6px 12px 0; } .toast .i.ok { color: var(--toast-ok); background: none; } .toast .i.bad { color: var(--toast-danger); background: none; } .toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 200ms, transform 200ms; } /* translate, not transform: the floating bars centre themselves with transform. */ @keyframes rise { from { opacity: 0; translate: 0 8px; } } .selbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 4px; background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow); z-index: 3; animation: rise 200ms ease-out; white-space: nowrap; } .selbar .count { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; font-size: 13px; font-weight: 500; } .selbar .count b { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 3px; background: var(--pri-bg); color: var(--pri-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; } .selbar .btn { color: inherit; border-color: transparent; background: transparent; } .selbar .btn:hover { background: rgba(127,127,127,.2); } .selbar .btn.dngt { color: var(--toast-danger); } .selbar form { display: contents; } /* ================= Kit extras ================= */ .props { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px 16px; margin: 0; } /* In-page section navigation; console.js marks the section in view .active. */ .anchor a { display: flex; align-items: center; gap: 10px; height: var(--anchor-h, 28px); padding: 0 10px; border-radius: 0; color: var(--text-2); font-size: 13.5px; flex-shrink: 0; transition: background-color 80ms, color 80ms; } .anchor a:hover { background: var(--hover); color: var(--text); text-decoration: none; } .anchor a.active { background: var(--cur-bg); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); } .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .tab { height: 38px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 80ms; } .tab:hover { color: var(--text); text-decoration: none; } .tab.on { color: var(--text); border-bottom-color: var(--accent); } button.tab { border-top: 0; border-left: 0; border-right: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; } .tab .n { font-size: 11.5px; color: var(--muted); font-weight: 400; } .crumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; flex-shrink: 0; } a.crumb:hover { color: var(--text); text-decoration: none; } /* Table on : the same metrics as the .th/.tr grid rows. */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; } .tbl th { position: sticky; top: 0; z-index: 1; height: 28px; padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl td { height: var(--row-h); padding: 0 6px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl th:first-child, .tbl td:first-child { padding-left: 18px; } .tbl th:last-child, .tbl td:last-child { padding-right: 18px; } .tbl .r { text-align: right; } .tbl tbody tr:hover td { background: var(--hover); } .dlg-t { display: flex; align-items: center; gap: 8px; padding: 16px 16px 0 22px; } .dlg-t h2 { flex-grow: 1; font-size: 17px; font-weight: 600; } .field.has-err .inp { border-color: var(--bad-dot); } /* ================= Dropdowns (console.js enhances every