/* * ZHANG.stream design system: one stylesheet for zhang.stream, every *.zhang.stream site and ipscaner.com. * Load it with: * * Look: shadcn "neutral" tokens in oklch, one blue primary, square corners everywhere, * JetBrains Mono for body and numbers, Merriweather for headings, a restrained 12-27px type scale, * one control height (26px). Light and dark follow the OS; data-theme="light|dark" on forces one. * * Rules that come with it: * - Categories get different hues, never shades of one hue. * - Read colours from tokens; never hard-code hex in components or charts. * - Nothing in HTML is smaller than 12px. Small labels step down by colour, not size. * - One control height: buttons, choices, inputs and selects are all 26px. * - State lives in the block it belongs to (empty / error / stale), never a page-wide overlay. */ /* ---------- Fonts (SIL OFL 1.1, licences next to the files) ---------- */ @font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"); 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: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations"); 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: "JetBrains Mono Variable"; font-style: italic; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-wght-italic.woff2) format("woff2-variations"); 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: "Merriweather Variable"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(fonts/merriweather-latin-wght-normal.woff2) format("woff2-variations"); 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: "Merriweather Variable"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(fonts/merriweather-latin-ext-wght-normal.woff2) format("woff2-variations"); 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; } /* ---------- Tokens ---------- */ :root { color-scheme: light; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --sidebar: oklch(0.985 0 0); /* Semantic colours: one value, named by meaning. */ --ok: oklch(0.696 0.17 162.48); /* up, online, passed */ --warn: oklch(0.77 0.16 70); /* waiting, close to a limit */ --bad: var(--destructive); /* something went wrong */ --unknown: var(--muted-foreground); /* state not known */ --info: oklch(0.623 0.214 259.815); /* neutral highlight, blue-500 */ --chart-1: var(--info); --chart-2: var(--ok); --chart-3: var(--warn); --chart-4: oklch(0.55 0.22 305); /* purple */ --chart-5: var(--destructive); --grid: var(--border); --radius: 0; --control: 26px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --wide: 1180px; --measure: 760px; --gutter: 24px; --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace; --font-heading: "Merriweather Variable", "Merriweather", Georgia, "Noto Serif CJK SC", "Songti SC", "SimSun", serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.424 0.199 265.638); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 14%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --sidebar: oklch(0.205 0 0); --chart-4: oklch(0.72 0.18 305); } } :root[data-theme="dark"] { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.424 0.199 265.638); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 14%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --sidebar: oklch(0.205 0 0); --chart-4: oklch(0.72 0.18 305); } /* Links on the dark primary need a lighter blue to stay readable. */ :root { --link: var(--primary); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: var(--info); } } :root[data-theme="dark"] { --link: var(--info); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-mono); font-size: 14px; line-height: 1.78; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.4; color: var(--foreground); } h1 { font-size: 27px; font-weight: 900; margin: 0 0 6px; } h2 { font-size: 19px; font-weight: 900; margin: 64px 0 4px; padding-bottom: 9px; border-bottom: 1px solid var(--border); } h3 { font-size: 15px; font-weight: 700; margin: 34px 0 4px; } h4 { font-size: 14px; font-weight: 700; margin: 24px 0 4px; } p { margin: 14px 0; } a { color: var(--link); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } small { font-size: 12px; } img { max-width: 100%; display: block; } hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } code { font-family: var(--font-mono); font-size: .92em; background: var(--muted); padding: 1px 5px; } pre { background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 11%, transparent); padding: 15px 17px; overflow-x: auto; font-size: 12.5px; line-height: 1.62; margin: 16px 0; } pre code { background: none; padding: 0; font-size: inherit; } ol, ul { padding-left: 22px; } li { margin: 7px 0; } ::selection { background: color-mix(in oklab, var(--info) 30%, transparent); } :focus-visible { outline: 2px solid var(--info); outline-offset: 2px; } .tnum { font-variant-numeric: tabular-nums; } .zs-heading { font-family: var(--font-heading); } .zs-muted { color: var(--muted-foreground); } .zs-meta { color: var(--muted-foreground); font-size: 12.5px; line-height: 1.85; } .zs-label { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); font-size: 12px; } .zs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .zs-skip { position: absolute; left: -9999px; top: 0; } .zs-skip:focus { left: 16px; top: 6px; z-index: 20; background: var(--foreground); color: var(--background); padding: 2px 10px; font-size: 12px; } /* ---------- Shell ---------- */ /* Top bar: one 36px row, card background across the full width, contents in the page container. */ .zs-topbar { height: 36px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--card); font-size: 12px; } .zs-topbar > .zs-container { height: 100%; display: flex; align-items: center; gap: 12px; } .zs-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); text-decoration: none; font-family: var(--font-heading); font-weight: 900; font-size: 13px; white-space: nowrap; } .zs-brand b { font-weight: 900; } .zs-brand .zs-sub { font-family: var(--font-mono); font-weight: 400; color: var(--muted-foreground); font-size: 12px; } .zs-brand .zs-sub::before { content: "/"; margin-right: 8px; color: var(--border); } .zs-tabs { margin-left: auto; margin-right: -12px; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; } .zs-tabs::-webkit-scrollbar { display: none; } .zs-tabs a, .zs-tabs button { display: inline-flex; align-items: center; height: var(--control); padding: 0 12px; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; font: inherit; background: none; border: 0; cursor: pointer; } .zs-tabs a:hover, .zs-tabs button:hover { color: var(--foreground); } .zs-tabs [aria-current="page"], .zs-tabs [aria-selected="true"] { background: var(--muted); color: var(--foreground); } .zs-container { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); } /* Page header strip for tool sites: title left, a group of controls right. */ .zs-pagehead { border-bottom: 1px solid var(--border); background: var(--card); } .zs-pagehead > .zs-container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-block: 12px; } .zs-pagehead h1 { font-size: 17px; font-weight: 900; margin: 0; } .zs-pagehead .zs-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Reading layout: a 200px side index next to the content column. */ .zs-doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; padding-bottom: 120px; } .zs-doc > main { min-width: 0; max-width: var(--measure); } .zs-toc { position: sticky; top: 0; align-self: start; padding: 34px 0; font-size: 12px; line-height: 2.05; } .zs-toc a { display: block; color: var(--muted-foreground); text-decoration: none; border-left: 2px solid var(--border); padding-left: 11px; } .zs-toc a:hover { color: var(--foreground); border-left-color: var(--primary); } .zs-toc a[aria-current="page"] { color: var(--foreground); border-left-color: var(--primary); } .zs-toc a.sub { padding-left: 22px; opacity: .78; } .zs-toc .grp { margin-top: 13px; } .zs-toc .zs-label { display: block; margin: 13px 0 2px; padding-left: 13px; } .zs-top { padding: 52px 0 0; } .zs-top .zs-meta { margin: 10px 0 0; } /* Footer: one quiet line. */ .zs-footer { border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); } .zs-footer > .zs-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-block: 14px; } .zs-footer nav { display: flex; flex-wrap: wrap; gap: 16px; } .zs-footer a { color: inherit; text-decoration: none; } .zs-footer a:hover { color: var(--foreground); } @media (max-width: 1000px) { .zs-doc { grid-template-columns: minmax(0, 1fr); gap: 0; } .zs-toc { position: static; padding: 18px 0 0; columns: 2; font-size: 12px; } .zs-toc .grp, .zs-toc .zs-label { break-inside: avoid; } .zs-top { padding-top: 28px; } } @media (max-width: 640px) { :root { --gutter: 16px; } h2 { margin-top: 48px; } .zs-brand .zs-sub { display: none; } .zs-tabs a, .zs-tabs button { padding: 0 8px; } .zs-tabs { margin-right: -8px; } } /* ---------- Controls: everything is 26px tall ---------- */ .zs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--foreground); font: 12px/1 var(--font-mono); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; } .zs-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--muted); text-decoration: none; } .zs-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .zs-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in oklab, var(--primary) 88%, var(--foreground)); } .zs-btn--danger { border-color: color-mix(in oklab, var(--destructive) 60%, transparent); color: var(--destructive); } .zs-btn--danger-solid { background: var(--destructive); border-color: var(--destructive); color: oklch(0.985 0 0); } .zs-btn--quiet { border-color: transparent; color: var(--muted-foreground); } .zs-btn--quiet:hover:not(:disabled) { color: var(--foreground); } .zs-btn--icon { width: var(--control); padding: 0; } .zs-btn:disabled, .zs-btn[aria-disabled="true"] { border-style: dashed; opacity: .5; cursor: not-allowed; } .zs-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } /* Single choice (radiogroup) and multi choice (aria-pressed) share one look: 4px apart, never joined. */ .zs-seg, .zs-chips { display: flex; flex-wrap: wrap; gap: 4px; } .zs-seg > *, .zs-chips > * { display: inline-flex; align-items: center; height: var(--control); padding: 0 10px; border: 1px solid var(--border); background: transparent; color: var(--foreground); font: 12px/1 var(--font-mono); cursor: pointer; white-space: nowrap; } .zs-seg > *:hover, .zs-chips > *:hover { background: var(--muted); } .zs-seg > [aria-checked="true"], .zs-seg > [aria-selected="true"], .zs-chips > [aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .zs-seg > :disabled, .zs-chips > :disabled { border-style: dashed; opacity: .45; cursor: not-allowed; } /* Inputs share the control box. */ .zs-input, .zs-select { height: var(--control); padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius); background: transparent; color: var(--foreground); font: 12px/1 var(--font-mono); min-width: 0; } .zs-textarea { display: block; width: 100%; padding: 6px 10px; border: 1px solid var(--input); background: transparent; color: var(--foreground); font: 12px/1.6 var(--font-mono); resize: vertical; } .zs-input:focus, .zs-select:focus, .zs-textarea:focus { outline: 2px solid var(--info); outline-offset: -1px; } .zs-field { display: grid; gap: 4px; } .zs-field > label { font-size: 12px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); } .zs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Slider: 26px hit area, 4px square track, 12px square thumb. */ .zs-slider { -webkit-appearance: none; appearance: none; height: var(--control); background: transparent; width: 100%; --p: 50%; } .zs-slider::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--primary) var(--p), var(--border) var(--p)); } .zs-slider::-moz-range-track { height: 4px; background: var(--border); } .zs-slider::-moz-range-progress { height: 4px; background: var(--primary); } .zs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; background: var(--foreground); border: 0; border-radius: 0; } .zs-slider::-moz-range-thumb { width: 12px; height: 12px; background: var(--foreground); border: 0; border-radius: 0; } /* ---------- Surfaces ---------- */ /* Cards draw their edge inside (inset ring), so side-by-side cards line up and never get clipped. */ .zs-card { background: var(--card); color: var(--card-foreground); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); padding: 16px; } .zs-card--sm { padding: 12px; } .zs-card-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; margin: 0; padding: 0; border: 0; line-height: 1.5; } .zs-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .zs-card-head .zs-end { margin-left: auto; display: flex; align-items: center; gap: 8px; } .zs-stack { display: flex; flex-direction: column; gap: 12px; } .zs-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .zs-sidebar { border: 1px solid var(--border); background: var(--card); } .zs-sidebar > * + * { border-top: 1px solid var(--border); } .zs-sidebar-section { padding: 10px 12px; } .zs-list { list-style: none; margin: 0; padding: 0; } .zs-list > li { margin: 0; } .zs-list > li > a, .zs-list > li > button { display: block; width: 100%; text-align: left; padding: 2px 12px; color: var(--foreground); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; } .zs-list > li > :hover { background: var(--muted); } .zs-list > li > [aria-current], .zs-list > li > [aria-selected="true"] { background: var(--muted); } /* Callouts: why (primary edge) and pitfall (destructive edge). */ .zs-why, .zs-pit { border-left: 2px solid var(--primary); padding: 1px 0 1px 15px; margin: 18px 0; } .zs-pit { border-left-color: var(--destructive); } .zs-why > :first-child, .zs-pit > :first-child { margin-top: 0; } .zs-why > :last-child, .zs-pit > :last-child { margin-bottom: 0; } .zs-lead { font-family: var(--font-heading); font-weight: 700; } /* ---------- Data ---------- */ /* The one table: muted serif header, 12px tabular body, scrolls sideways inside its own wrapper. */ .zs-table-wrap { overflow-x: auto; margin: 18px 0; } .zs-table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; } .zs-table th, .zs-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; } .zs-table th { background: var(--muted); font-family: var(--font-heading); font-weight: 700; font-size: 12px; white-space: nowrap; } .zs-table td.r, .zs-table th.r { text-align: right; } .zs-table td.nw { white-space: nowrap; } .zs-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); } .zs-table tbody tr[aria-selected="true"] { background: var(--muted); } .zs-table a { color: var(--foreground); text-decoration: none; } /* .stack: on phones each row becomes a block. Cells 1 and 2 (name, badge) share the first line, the rest go full width below. --pair puts cells 3 and 4 side by side. td[data-label] shows its label. */ @media (max-width: 640px) { .zs-table.stack thead { display: none; } .zs-table.stack, .zs-table.stack tbody { display: block; } .zs-table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--border); } .zs-table.stack tr + tr { border-top: 0; } .zs-table.stack td { border: 0; padding: 0; min-width: 0; } .zs-table.stack td:nth-child(2) { justify-self: end; } .zs-table.stack td:nth-child(n+3) { grid-column: 1 / -1; } .zs-table.stack--pair tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .zs-table.stack--pair td:nth-child(3) { grid-column: 1; } .zs-table.stack--pair td:nth-child(4) { grid-column: 2; } .zs-table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); } } .zs-table a:hover { color: var(--link); text-decoration: underline; } /* Prose tables inherit the same look. */ .zs-prose table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 18px 0; display: block; overflow-x: auto; } .zs-prose th, .zs-prose td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; vertical-align: top; } .zs-prose th { background: var(--muted); font-weight: 700; font-family: var(--font-heading); font-size: 12px; } /* Key / value list. */ .zs-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 16px; margin: 0; font-size: 13px; } .zs-kv dt { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); font-size: 12px; line-height: 1.85; } .zs-kv dd { margin: 0; overflow-wrap: anywhere; } /* Big read-out, for an IP address or one key number. */ /* Tone text for readouts and inline values. */ .t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-bad { color: var(--bad); } .zs-readout { font: 600 clamp(22px, 5vw, 28px)/1.25 var(--font-mono); letter-spacing: -.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* Badge: 20px, square. */ .zs-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 12px; line-height: 1; white-space: nowrap; border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); } .zs-badge--secondary { background: var(--secondary); color: var(--secondary-foreground); } .zs-badge--outline { background: transparent; border-color: var(--border); color: var(--foreground); } .zs-badge--ghost { background: transparent; color: var(--muted-foreground); } .zs-badge--destructive { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); } /* Status dot + text. The dot is the only round thing in the system. */ .zs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; } .zs-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--unknown); flex: none; } .zs-status--ok::before { background: var(--ok); } .zs-status--warn::before { background: var(--warn); } .zs-status--bad::before { background: var(--bad); } .zs-status--info::before { background: var(--info); } /* Latency dots: a row of small squares coloured by result. */ .zs-dots { display: inline-flex; gap: 3px; vertical-align: middle; } .zs-dots > i { width: 8px; height: 8px; background: var(--unknown); } .zs-dots > i.ok { background: var(--ok); } .zs-dots > i.warn { background: var(--warn); } .zs-dots > i.bad { background: var(--bad); } .zs-dots > i.fail { background: transparent; box-shadow: inset 0 0 0 1px var(--bad); } /* sample failed, no value */ /* ---------- States: they belong to the block, not the page ---------- */ .zs-empty { padding: 16px; color: var(--muted-foreground); font-size: 12px; border: 1px dashed var(--border); } .zs-error { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); font-size: 12px; } .zs-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 12px; } .zs-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--foreground); border-radius: 50%; animation: zs-spin .8s linear infinite; } @keyframes zs-spin { to { transform: rotate(360deg); } } /* Toast stays hidden until it has data-open (or class is-open). */ .zs-toast:not([data-open]):not(.is-open), .zs-toast[hidden] { display: none; } .zs-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--popover); color: var(--popover-foreground); box-shadow: inset 0 0 0 1px var(--border); padding: 6px 12px; font-size: 12px; max-width: calc(100vw - 32px); } .zs-popover { background: var(--popover); color: var(--popover-foreground); box-shadow: inset 0 0 0 1px var(--border); padding: 6px 10px; font-size: 12px; max-width: 320px; } /* ---------- Reading ---------- */ .zs-prose { overflow-wrap: break-word; } .zs-prose img { margin: 18px 0; } .zs-prose figure { margin: 18px 0; } .zs-prose figure img { margin: 0; } .zs-prose figcaption { font-size: 12px; color: var(--muted-foreground); padding-top: 4px; } .zs-prose blockquote { border-left: 2px solid var(--primary); margin: 18px 0; padding: 1px 0 1px 15px; color: var(--muted-foreground); } .zs-prose h2:first-child, .zs-prose h3:first-child { margin-top: 0; } .zs-photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .zs-photo { margin: 0; } .zs-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--muted); } .zs-photo figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted-foreground); padding-top: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }