/* ===================================================================== BTCX Observatory — app.css Design tokens, layout, components. Hand-rolled, no preprocessor. ===================================================================== */ /* * Self-hosted IBM Plex (optional). To enable: * 1. Fetch the woff2 files from https://github.com/IBM/plex * (Latin + Latin-Ext subsets if you need cs/de chars). * 2. Drop them under static/fonts/ as IBMPlexSans-{Regular,Medium,SemiBold}.woff2 * and IBMPlexMono-{Regular,Medium}.woff2. * 3. Add the include_bytes! routes in src/view/static_assets.rs. * 4. Uncomment the @font-face block below. * * Currently the binary doesn't ship these files; the system-font * fallback (system-ui / SF Pro / Segoe UI / Consolas) covers the * gap and keeps the deploy a single self-contained ELF — no * external font CDN call. * * @font-face { * font-family: "IBM Plex Sans"; * src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); * font-weight: 400; * font-display: swap; * } * @font-face { * font-family: "IBM Plex Sans"; * src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2"); * font-weight: 500; * font-display: swap; * } * @font-face { * font-family: "IBM Plex Sans"; * src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); * font-weight: 600; * font-display: swap; * } * @font-face { * font-family: "IBM Plex Mono"; * src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); * font-weight: 400; * font-display: swap; * } * @font-face { * font-family: "IBM Plex Mono"; * src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2"); * font-weight: 500; * font-display: swap; * } */ /* --- Design tokens -------------------------------------------------- */ /* Dark is the default theme regardless of system preference. The theme toggle stores a `data-theme` attribute on which flips into light. */ :root { /* Surfaces */ --bg: #0c0e12; --bg-soft: #15171c; --bg-card: #15171c; /* Foreground */ --fg: #ececec; --fg-muted: #9a9a93; --fg-faint: #5e5e58; /* Borders (alpha so they tint with bg) */ --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); /* Accent */ --accent: #7ba8e0; --accent-fg: #0c0e12; --accent-soft: rgba(123, 168, 224, 0.12); /* Semantic */ --success: #6fb38b; --success-bg: rgba(111, 179, 139, 0.12); --warning: #d9a85a; --warning-bg: rgba(217, 168, 90, 0.14); --danger: #e07a72; --danger-bg: rgba(224, 122, 114, 0.14); /* Typography */ /* Font stacks — "IBM Plex Sans" / "IBM Plex Mono" first so the self-hosted woff2 (when an operator drops the files into static/fonts/ + uncomments the @font-face below) takes precedence. System fonts cover the (currently default) case where the woff2s aren't deployed. No external font CDN — fully offline-capable. */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; /* Layout */ --page-max: 1100px; --page-pad: 28px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Light mode — only when the user explicitly toggles. */ :root[data-theme="light"] { --bg: #fafaf7; --bg-soft: #f1efe8; --bg-card: #ffffff; --fg: #18181a; --fg-muted: #5f5e5a; --fg-faint: #9a9892; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.20); --accent: #2a4d80; --accent-fg: #ffffff; --accent-soft: rgba(42, 77, 128, 0.08); --success: #3d7a52; --success-bg: #e8f1e9; --warning: #8a5a14; --warning-bg: #faeeda; --danger: #a13c34; --danger-bg: #fbe8e6; } /* --- Reset & base --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-feature-settings: "kern", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; } .h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 14px; } /* --- Top nav -------------------------------------------------------- */ .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); } .topnav-inner { max-width: var(--page-max); margin: 0 auto; padding: 12px var(--page-pad); display: flex; align-items: center; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; margin-right: 4px; } .brand-mark { color: var(--accent); flex-shrink: 0; } .nav { display: flex; gap: 2px; margin-right: auto; } .nav a { padding: 7px 11px; border-radius: var(--r-md); color: var(--fg-muted); font-size: 14px; transition: background-color 120ms var(--ease), color 120ms var(--ease); } .nav a:hover { background: var(--bg-soft); color: var(--fg); } .nav a[aria-current="page"] { color: var(--fg); background: var(--bg-soft); } .nav-right { display: flex; align-items: center; gap: 10px; } .netpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; } .netpill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); } .netpill-dot[data-state="stale"] { background: var(--warning); } .netpill-dot[data-state="down"] { background: var(--danger); } .netpill-dot[data-state="ok"] { animation: pulse 2.4s var(--ease) infinite; } .netpill-sep { color: var(--fg-faint); } .netpill-label { color: var(--fg-faint); } .netpill-tip { color: var(--fg); font-size: 12.5px; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); } .iconbtn:hover { background: var(--bg-soft); color: var(--fg); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* --- Page container ------------------------------------------------- */ .page { max-width: var(--page-max); margin: 0 auto; padding: 28px var(--page-pad) 64px; } .block { margin: 36px 0; } /* --- Hero ----------------------------------------------------------- */ .hero { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #0a1126; aspect-ratio: 16 / 6; margin-bottom: 28px; border: 1px solid var(--border); animation: rise 600ms var(--ease) both; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero-overlay { position: absolute; top: 28px; left: 32px; color: #ffffff; max-width: 72%; } .hero-tag { margin: 0 0 8px; font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.005em; } .hero-title { margin: 0; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.04; font-weight: 600; letter-spacing: -0.018em; color: #ffffff; } .hero-pill { position: absolute; top: 28px; right: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); color: #ffffff; font-size: 12.5px; } .hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #5dcaa5; animation: pulse 2.4s var(--ease) infinite; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Banner --------------------------------------------------------- */ .banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px; margin-bottom: 20px; } .banner-warn { background: var(--warning-bg); color: var(--warning); } .banner-danger { background: var(--danger-bg); color: var(--danger); } .banner svg { flex-shrink: 0; } /* --- Search --------------------------------------------------------- */ .search { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 28px; transition: border-color 120ms var(--ease), background-color 120ms var(--ease); } .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-icon { color: var(--fg-faint); flex-shrink: 0; } .search input { flex: 1; border: 0; background: transparent; color: var(--fg); font: inherit; outline: none; min-width: 0; } .search input::placeholder { color: var(--fg-faint); } .search-kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--fg-muted); background: var(--bg-soft); } /* --- Stat cards (landing summary) ----------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 32px; } .stat { background: var(--bg-soft); border-radius: var(--r-md); padding: 13px 16px; } .stat-l { font-size: 12px; color: var(--fg-muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; } .stat-v { font-size: 22px; font-weight: 500; margin: 0; letter-spacing: -0.01em; } .stat-m { font-size: 14px; } /* Sub-line under .stat-v — e.g. block hash beneath chain tip, target threshold beneath block time. */ .stat-s { font-size: 12px; color: var(--fg-faint); margin: 4px 0 0; letter-spacing: 0; text-transform: none; } /* Unit suffix inside .stat-v (e.g. "BTCX" after the supply number) — smaller and de-emphasised so the magnitude dominates. */ .stat-unit { font-size: 14px; color: var(--fg-muted); font-weight: 400; margin-left: 3px; } /* --- Section cards -------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; transition: border-color 150ms var(--ease), transform 150ms var(--ease), background-color 150ms var(--ease); } .card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .card-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); margin-bottom: 12px; } .card-t { margin: 0 0 4px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; } .card-d { margin: 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; } /* --- Probes --------------------------------------------------------- */ .probes { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-card); } .probe { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; transition: background-color 120ms var(--ease); } .probe:last-child { border-bottom: 0; } .probe:hover { background: var(--bg-soft); } .probe code { color: var(--fg); font-size: 12.5px; } .probe-d { color: var(--fg-muted); font-size: 12.5px; margin-left: auto; text-align: right; } /* --- Footer --------------------------------------------------------- */ .foot { border-top: 1px solid var(--border); margin-top: 24px; } .foot-inner { max-width: var(--page-max); margin: 0 auto; padding: 18px var(--page-pad); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--fg-faint); } .foot-links { display: inline-flex; gap: 14px; } .foot-links a { color: var(--fg-muted); } .foot-links a:hover { color: var(--fg); } /* --- Responsive ----------------------------------------------------- */ @media (max-width: 760px) { :root { --page-pad: 18px; } .topnav-inner { flex-wrap: wrap; gap: 10px; } .brand { margin-right: auto; } .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; } .nav-right .netpill .netpill-name { display: none; } .nav-right .netpill .netpill-sep { display: none; } .hero { aspect-ratio: 4 / 3; } .hero-overlay { top: 20px; left: 22px; max-width: 86%; } .hero-pill { display: none; } .probe-d { display: none; } } @media (max-width: 460px) { .hero-title { font-size: 26px; } .hero-tag { font-size: 12.5px; } .search-kbd { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ===================================================================== Dashboard-specific styles (chain, UTXO) — preserved from the pre-designer pass. Eventually these pages should adopt the .stat / .cards system; until then the layouts below keep working. ===================================================================== */ /* Segmented time-range selector — 1d | 7d | 1m | 1y | all. */ .timeframe { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 0 0 20px; font-size: 13px; } .timeframe a { padding: 6px 14px; color: var(--fg-muted); border-right: 1px solid var(--border); transition: background-color 120ms var(--ease), color 120ms var(--ease); } .timeframe a:last-child { border-right: 0; } .timeframe a:hover { background: var(--bg-soft); color: var(--fg); } .timeframe a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); } /* Tile grid (chain & utxo dashboard summary tiles) */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 28px; } .tile { background: var(--bg-soft); border-radius: var(--r-md); padding: 13px 16px; } .tile .label { font-size: 12px; color: var(--fg-muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; } .tile .value { font-size: 22px; font-weight: 500; margin: 0; letter-spacing: -0.01em; } .tile .sub { color: var(--fg-faint); font-size: 12.5px; margin-top: 4px; } /* Chart panels */ .chart-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; } @media (min-width: 900px) { .chart-row.two { grid-template-columns: 1fr 1fr; } } .chart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px 10px; } .chart h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--fg-muted); } .chart .mount { width: 100%; height: 280px; } .chart .mount.tall { height: 360px; } /* Yellow note (chain/utxo empty-state messages) */ .note { background: var(--warning-bg); border-left: 3px solid var(--warning); padding: 12px 16px; margin-top: 36px; border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--fg); font-size: 13.5px; } /* Richlist table (utxo dashboard) */ table.richlist { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 14px; } table.richlist th, table.richlist td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; } table.richlist th { background: var(--bg-soft); color: var(--fg-muted); font-weight: 500; } table.richlist th.num, table.richlist td.num { text-align: right; font-variant-numeric: tabular-nums; } table.richlist td.addr code { /* Bech32 addresses are 42 chars. overflow-wrap:anywhere lets the browser break only when needed (vs word-break:break-all which always breaks per-character); slightly smaller font + tighter letter-spacing keeps the full address on ONE line in the /chain/miners 50/50 split layout. If it still overflows on a very narrow viewport the address wraps to 2 lines instead of leaking one trailing character. */ font-size: 12px; letter-spacing: -0.1px; overflow-wrap: anywhere; } /* Key-value table for block / address detail pages. Th left-aligned, muted; td right-side, mono for hashes. */ table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 18px; } table.kv th, table.kv td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } table.kv th { background: var(--bg-soft); color: var(--fg-muted); font-weight: 500; width: 220px; white-space: nowrap; } table.kv td code { font-size: 12.5px; word-break: break-all; } table.kv td.num { font-variant-numeric: tabular-nums; } .delta-pos { color: #2e9b3a; } .delta-neg { color: #b94343; } :root[data-theme="dark"] .delta-pos { color: #6fcb70; } :root[data-theme="dark"] .delta-neg { color: #e08e8e; } .addr-full { word-break: break-all; color: var(--fg-muted); font-size: 14px; margin: 0 0 16px; } .note-warn { background: rgba(230, 196, 98, 0.12); border-left: 3px solid #e6c462; padding: 10px 14px; margin: 12px 0; font-size: 13.5px; } .note-ok { background: rgba(110, 200, 130, 0.12); border-left: 3px solid #6fcb70; padding: 10px 14px; margin: 12px 0; font-size: 13.5px; } /* Subnav for tier sub-pages (e.g., /chain → /chain/miners). Sits below the h1, smaller than the timeframe selector. */ .subnav { display: inline-flex; gap: 16px; font-size: 13px; margin: 0 0 16px; } .subnav a { color: var(--fg-muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--fg); } .subnav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); } /* /chain/miners — side-by-side forger and signer distributions. Single column on narrow viewports, two columns above ~900 px. */ .miners-split { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 16px; } @media (min-width: 900px) { .miners-split { grid-template-columns: 1fr 1fr; } } .miners-split h3.h3 { font-size: 16px; margin: 0 0 4px; } /* Taller chart panel — used for force-directed graphs that benefit from vertical room (gossip topology on /network). */ .mount-tall { height: 520px; } /* Fullscreen variant for /network/graph — fills the viewport minus the header + page padding. */ .mount-fullscreen { height: calc(100vh - 240px); min-height: 520px; } /* Right-side action link in a chart panel's

header — e.g. "Full-screen →" on the gossip panel. */ .chart-action { float: right; font-size: 12.5px; font-weight: normal; color: var(--accent); text-decoration: none; } .chart-action:hover { text-decoration: underline; } /* Address history table — narrow Time column, mono digits in numeric columns. */ table.address-history td.col-time, table.address-history th.col-time { width: 16ch; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; } table.address-history td.num, table.address-history th.num { font-variant-numeric: tabular-nums; } /* Pagination strip beneath a paginated table. */ .pager { display: flex; align-items: center; gap: 16px; margin: 12px 0; font-size: 13.5px; } .pager a { color: var(--accent); text-decoration: none; } .pager a:hover { text-decoration: underline; } .pager-disabled { color: var(--fg-muted); opacity: 0.5; } .pager-info { color: var(--fg-muted); } .addr-link { color: var(--accent); text-decoration: none; } .addr-link:hover { text-decoration: underline; } /* Tile-label hyperlink — inherits the muted .label colour, gains a subtle dotted underline so it's clearly clickable without competing with the bigger value beneath. */ .tile-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .tile-link:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ---- Language picker (header dropdown) ---------------------------- */ .lang-switcher { position: relative; display: inline-block; } .lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 0 6px; } .lang-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; margin-right: 4px; font-style: normal; font-size: 14px; } .lang-btn .lang-flag { margin-right: 0; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); min-width: 160px; padding: 4px 0; z-index: 50; } .lang-menu[hidden] { display: none; } .lang-menu a { display: flex; align-items: center; padding: 8px 14px; color: var(--fg); text-decoration: none; font-size: 13.5px; } .lang-menu a:hover { background: var(--bg-card); } .lang-menu a.active { background: var(--bg-card); font-weight: 500; } .addr-name { display: inline-block; font-weight: 500; color: var(--fg); font-size: 13px; margin-bottom: 2px; } /* Extra-tall mount for full-page geo views — world choropleth + country drill-down. The dashboard mount-tall is too short for maps to read comfortably at typical viewport widths. */ .mount-xtall { height: 700px; } /* /admin chrome from baselib::server::admin emits a fixed set of `.admin-*` class names. AdminTheme::with_stylesheet("/static/app.css") in api/mod.rs makes those classes resolve here instead of the utilitarian inline fallback baselib ships with — so admin pages share the explorer's palette, typography, and dark/light theming without baselib having to know any of it. Keep the rule set close to baselib's class contract; if a new class lands upstream, mirror it here. */ body { color: var(--fg); background: var(--bg); } .admin-sub { color: var(--fg-muted); margin: 0 0 16px 0; font-size: 13.5px; } .admin-textarea { width: 100%; min-height: 70vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; padding: 12px; box-sizing: border-box; background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; resize: vertical; } .admin-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .admin-btn { padding: 8px 18px; font-size: 14px; font-weight: 500; cursor: pointer; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: 6px; transition: filter 0.12s; } .admin-btn:hover { filter: brightness(1.08); } .admin-btn:active { filter: brightness(0.92); } .admin-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .admin-back { color: var(--accent); text-decoration: none; font-size: 13.5px; border-bottom: 1px dotted currentColor; } .admin-back:hover { border-bottom-style: solid; } .admin-banner-ok { background: rgba(120, 200, 130, 0.10); border: 1px solid rgba(120, 200, 130, 0.45); color: var(--fg); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .admin-banner-err { background: rgba(220, 100, 100, 0.10); border: 1px solid rgba(220, 100, 100, 0.55); color: var(--fg); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .admin-overview-section { margin: 24px 0; } .admin-overview-section h2 { font-size: 14px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px 0; } .admin-overview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .admin-overview-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color 0.15s; } .admin-overview-card:hover { border-color: var(--accent); } .admin-overview-card h3 { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 4px 0; } .admin-overview-card p { font-size: 13px; color: var(--fg-muted); line-height: 1.45; margin: 0; } /* /admin/db (baselib::server::admin::db_page) emits these. Same palette + variables as the rest of the admin chrome above. */ .admin-counts { border-collapse: collapse; font-size: 13px; margin-bottom: 16px; } .admin-counts th, .admin-counts td { border: 1px solid var(--border); padding: 6px 12px; } .admin-counts th { background: var(--bg-card); color: var(--fg); text-align: left; } .admin-counts td.num { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .admin-ops { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 24px 0; } .admin-ops form { display: inline; } .admin-btn-secondary { padding: 6px 14px; font-size: 13px; cursor: pointer; background: var(--bg-card); color: var(--fg); border: 1px solid var(--border-strong); border-radius: 6px; } .admin-btn-secondary:hover { border-color: var(--accent); } .admin-hint { color: var(--fg-muted); font-size: 12.5px; margin: 6px 0 16px 0; } .admin-danger-zone { margin-top: 28px; padding: 18px; border: 1.5px dashed rgba(220, 100, 100, 0.6); border-radius: 8px; background: rgba(220, 100, 100, 0.04); } .admin-danger-zone h2 { margin-top: 0; color: rgba(220, 100, 100, 0.95); border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: 16px; } .admin-danger-zone .lede { font-weight: 600; color: rgba(220, 100, 100, 0.95); margin: 4px 0 8px 0; } .admin-danger-label { display: block; margin: 10px 0; font-weight: 500; color: rgba(220, 100, 100, 0.95); font-size: 13px; } .admin-btn-danger { background: rgba(220, 100, 100, 0.85); border-color: rgba(220, 100, 100, 0.85); } .admin-btn-danger:hover { filter: brightness(1.08); } .admin-sql-out { background: var(--bg-card); border: 1px solid var(--border); color: var(--fg); padding: 12px 14px; border-radius: 6px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.45; white-space: pre; margin-top: 12px; } /* /docs index + rendered markdown body */ .docs-index { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; } .docs-index .doc-card { display: block; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: border-color 0.15s, background 0.15s; } .docs-index .doc-card:hover { border-color: var(--accent); } .docs-index .doc-title { color: var(--accent); font-weight: 600; font-size: 14.5px; margin-bottom: 4px; } .docs-index .doc-desc { color: var(--fg-muted); font-size: 13px; line-height: 1.5; } .docs-content { max-width: 760px; font-size: 14.5px; line-height: 1.65; } .docs-content h1 { font-size: 26px; margin: 8px 0 16px 0; color: var(--fg); } .docs-content h2 { font-size: 19px; margin: 28px 0 10px 0; color: var(--accent); padding-bottom: 6px; border-bottom: 1px solid var(--border); } .docs-content h3 { font-size: 16px; margin: 22px 0 8px 0; color: var(--fg); } .docs-content h4 { font-size: 14.5px; margin: 18px 0 6px 0; font-weight: 600; } .docs-content p { margin: 10px 0; } .docs-content ul, .docs-content ol { padding-left: 22px; } .docs-content li { margin: 4px 0; } .docs-content hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; } .docs-content blockquote { margin: 14px 0; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--fg-muted); } .docs-content code { background: var(--bg-card); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: 0.92em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .docs-content pre { background: var(--bg-card); border: 1px solid var(--border); padding: 12px 14px; border-radius: 6px; overflow-x: auto; } .docs-content pre code { background: none; border: none; padding: 0; } .docs-content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; } .docs-content th, .docs-content td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); } .docs-content th { font-weight: 600; color: var(--fg); } .docs-content a { color: var(--accent); } .docs-content a:hover { text-decoration: underline; }