/* RocaViz chrome — light surfaces, recessive hairlines, ink for text. */ :root { --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --accent: #2a78d6; --good: #0ca30c; } /* Dark theme. The inline script in app.py's index_string always stamps data-theme explicitly (localStorage, else prefers-color-scheme) before first paint, so this is the one and only dark ruleset needed — no separate @media (prefers-color-scheme) copy to keep in sync. */ :root[data-theme="dark"] { --page: #131315; --surface: #1c1c1f; --ink: #f3f2ee; --ink-2: #bdbbb3; --muted: #86847c; --grid: #302f31; --baseline: #454448; --border: rgba(255, 255, 255, 0.12); --accent: #56a0f0; --good: #29c144; /* Dash 4's own components (Dropdown, RangeSlider, ...) read these design tokens directly instead of our --ink/--surface variables, so they need their own dark remap or they stay hardcoded white-on-white with unreadable (inherited var(--ink)) text. */ --Dash-Fill-Inverse-Strong: #1c1c1f; --Dash-Text-Strong: rgba(243, 242, 238, 0.92); --Dash-Text-Primary: rgba(243, 242, 238, 0.87); --Dash-Text-Weak: rgba(243, 242, 238, 0.65); --Dash-Text-Disabled: rgba(243, 242, 238, 0.4); --Dash-Stroke-Weak: rgba(255, 255, 255, 0.14); --Dash-Stroke-Strong: rgba(255, 255, 255, 0.45); --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.06); --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.1); --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.06); --Dash-Fill-Disabled: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; } .topbar { display: flex; align-items: baseline; gap: 24px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--grid); } .brand { font-weight: 650; font-size: 16px; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; } .nav-links { display: flex; gap: 18px; } .nav-link { color: var(--ink-2); text-decoration: none; font-size: 13px; } .nav-link:hover { color: var(--ink); } .theme-toggle { margin-left: auto; /* pushes it to the topbar's right edge */ width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.7; } .theme-toggle:hover { opacity: 1; border-color: var(--ink-2); } .content { max-width: 1280px; margin: 0 auto; padding: 24px 28px 64px; } .page-header { margin: 8px 0 20px; } .page-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .header-actions { display: flex; gap: 8px; flex-shrink: 0; } .page-title { font-size: 22px; font-weight: 650; margin: 0 0 4px; } .page-subtitle { color: var(--ink-2); margin: 4px 0 0; font-size: 13px; } .badge-row { display: flex; gap: 8px; margin: 6px 0; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12px; } .badge-running { color: var(--good); border-color: rgba(12, 163, 12, 0.35); } .badge-muted { color: var(--muted); } /* Experiment-type badges: fixed tint per type, everywhere. */ .badge-type-flowcell { background: rgba(0, 131, 0, 0.08); border-color: rgba(0, 131, 0, 0.30); color: #005e00; } .badge-type-galv { background: rgba(42, 120, 214, 0.08); border-color: rgba(42, 120, 214, 0.30); color: #1c5cab; } .badge-type-cv { background: rgba(74, 58, 167, 0.08); border-color: rgba(74, 58, 167, 0.30); color: #4a3aa7; } .badge-type-select { background: rgba(235, 104, 52, 0.10); border-color: rgba(235, 104, 52, 0.35); color: #b34415; } .badge-type-activ { background: rgba(237, 161, 0, 0.12); border-color: rgba(237, 161, 0, 0.40); color: #8a5d00; } .badge-type-other { background: rgba(11, 11, 11, 0.04); border-color: var(--border); color: var(--ink-2); } .badge-type-none { color: var(--muted); border-style: dashed; } .link-row { margin: -8px 0 16px; display: flex; gap: 16px; } .page-link { color: var(--accent); text-decoration: none; font-size: 13px; } .page-link:hover { text-decoration: underline; } .notice { background: var(--surface); border: 1px solid var(--grid); border-left: 3px solid #eda100; border-radius: 6px; padding: 10px 14px; color: var(--ink-2); font-size: 13px; } /* ---- stat tiles ---- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .stat-label { font-size: 12px; color: var(--ink-2); } .stat-value { font-size: 22px; font-weight: 600; margin-top: 2px; } .stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ---- multi-metric stat cards ---- */ .stat-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0 0 18px; align-items: start; } .stat-cards-row .card { margin-bottom: 0; } /* Rows stack vertically inside a card; a row holds one or two metrics. */ .multi-stat-grid { display: flex; flex-direction: column; gap: 11px; } .multi-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .multi-stat-cols-3 { grid-template-columns: 1fr 1fr 1fr; } .multi-stat-row-single { grid-template-columns: 1fr; } .value-pill { display: inline-block; padding: 0 8px; border-radius: 6px; } .value-good { background: rgba(12, 163, 12, 0.12); } .value-bad { background: rgba(208, 59, 59, 0.12); } .stat-value-sm { font-size: 18px; font-weight: 600; margin-top: 1px; } /* ---- cycle range slider (Dash 4 slider, incl. built-in end inputs) ---- */ .cycle-range-row { gap: 14px; margin-bottom: 20px; } .cycle-range-row .cycle-slider { flex: 1; min-width: 280px; max-width: 720px; } /* Dash 4 sliders paint from their own theme variable; re-point it. */ .cycle-slider { --Dash-Fill-Interactive-Strong: var(--accent); } .cycle-slider .dash-slider-root .dash-slider-range { background-color: var(--accent); } .cycle-slider .dash-slider-root .dash-slider-thumb { border-color: var(--accent); } /* ---- view tabs (global / per-cycle) ---- */ .view-tabs { display: flex !important; width: auto !important; border-bottom: 1px solid var(--grid); margin-bottom: 12px; } .view-tabs .view-tab { width: auto !important; flex: 0 0 auto !important; padding: 7px 16px !important; border: none !important; border-bottom: 2px solid transparent !important; background: transparent !important; color: var(--ink-2); font-size: 13px; cursor: pointer; } .view-tabs .view-tab:hover { color: var(--ink); } .view-tabs .view-tab--selected { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent) !important; } /* ---- min/median/mean/max summary table ---- */ .stats-table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; } .stats-table th { text-align: right; color: var(--ink-2); font-weight: 600; padding: 4px 14px; border-bottom: 1px solid var(--baseline); } .stats-table td { text-align: right; padding: 5px 14px; border-bottom: 1px solid var(--grid); } .stats-table tr:last-child td { border-bottom: none; } .stats-table .stats-metric { text-align: left; color: var(--ink-2); padding-left: 0; } .stats-table th:first-child { text-align: left; padding-left: 0; } /* ---- cards ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin: 0 0 18px; } .card-title { font-size: 14px; font-weight: 650; margin: 0 0 10px; color: var(--ink); } /* Collapsible cards: the title is a disclosure. */ details.collapsible>summary.card-title { cursor: pointer; user-select: none; list-style: none; } details.collapsible>summary.card-title::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform 0.15s; } details.collapsible[open]>summary.card-title::before { transform: rotate(90deg); } details.collapsible:not([open])>summary.card-title { margin-bottom: 0; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; } .card-grid .card { margin-bottom: 0; } .card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .card-grid-2 .card { margin-bottom: 0; } @media (max-width: 980px) { .card-grid-2 { grid-template-columns: 1fr; } } .hint { color: var(--muted); font-size: 12px; margin: -4px 0 8px; } .subcard-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--grid); } .subcard-title:first-of-type { margin-top: 10px; border-top: none; padding-top: 0; } .empty-note { color: var(--muted); font-size: 13px; } /* subcard title row with a metric badge on the right (e.g. range fade) */ .subcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fade-badge { font-size: 13.5px; margin-right: 2em; } .fade-badge:empty { display: none; } .fade-badge-good { background: rgba(12, 163, 12, 0.08); border-color: rgba(12, 163, 12, 0.30); color: #0a6b0a; } .fade-badge-warn { background: rgba(237, 161, 0, 0.12); border-color: rgba(237, 161, 0, 0.40); color: #8a5d00; } .fade-badge-orange { background: rgba(235, 104, 52, 0.10); border-color: rgba(235, 104, 52, 0.35); color: #b34415; } .fade-badge-bad { background: rgba(208, 59, 59, 0.08); border-color: rgba(208, 59, 59, 0.30); color: #a83232; } /* axis-fit toggle: small corner button overlaid on a chart's bottom-right */ .graph-wrap { position: relative; } .fit-toggle { position: absolute; right: 6px; bottom: 2px; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 20px; letter-spacing: -1px; line-height: 1; cursor: pointer; opacity: 0.55; } .fit-toggle:hover { opacity: 1; border-color: var(--ink-2); } /* non-blocking corner busy indicator (zoom/pan refetches) */ .corner-spinner-wrap { position: absolute; top: 0; right: 0; width: 12px; height: 12px; margin: 6px; pointer-events: none; } /* full-cover spinner shown only until a graph's first figure ever arrives — hides Plotly's default empty-axes canvas. pointer-events:none so it never blocks interaction once the (invisible-when-idle) overlay has resolved. */ .initial-spinner-wrap { position: absolute; inset: 0; pointer-events: none; } /* scatter-plotter sign filters: pushed to the filter row's right edge */ .sign-toggle-row { display: flex; gap: 6px; margin-left: auto; } .sign-toggle { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; } .sign-toggle.active { color: var(--ink); border-color: rgba(42, 120, 214, 0.4); background: rgba(42, 120, 214, 0.08); } /* ---- working-electrode card ---- */ .electrode-id { font-size: 12px; color: var(--ink-2); word-break: break-all; } .electrode-dims { font-size: 19px; font-weight: 600; margin-top: 2px; } .mix-note { text-align: center; color: var(--ink-2); font-size: 13px; margin: 0; } /* condensed synthesis summary below the composition pie */ .synth-line { font-size: 13px; line-height: 1.6; margin-top: 4px; } .synth-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; } .badge-water { background: rgba(42, 120, 214, 0.10); border-color: rgba(42, 120, 214, 0.30); color: #1c5cab; } .badge-agent { background: rgba(74, 58, 167, 0.07); border-color: rgba(74, 58, 167, 0.25); color: #4a3aa7; } /* ---- detail lists ---- */ .dl { display: flex; flex-direction: column; gap: 4px; } .dl-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid var(--grid); font-size: 13px; } .dl-row:last-child { border-bottom: none; } .dl-label { color: var(--ink-2); flex-shrink: 0; } .dl-value { text-align: right; word-break: break-word; } /* ---- filter row ---- */ .filter-row { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; } .filter-label { color: var(--ink-2); font-size: 13px; } .filter-muted { color: var(--muted); } .filter-input { width: 300px; padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 6px; background: var(--surface); font-size: 13px; } .filter-number { width: 90px; padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 6px; background: var(--surface); font-size: 13px; } .filter-dropdown { width: 220px; font-size: 13px; } .filter-dropdown-sm { width: 150px; font-size: 13px; } /* Dash 4 ships .dash-datepicker as `flex: 1`, so a DatePickerRange swallows whatever's left of its filter row and floats its two bounds a screenful apart. Width alone can't win against a flex-basis of 0. */ .filter-row .dash-datepicker { flex: 0 0 auto; width: 300px; } .filter-daterange { font-size: 13px; } /* ---- min/max range filters (e.g. mass, area, thickness) ---- */ .filter-range { display: flex; align-items: center; gap: 6px; } /* ---- /explore's stack of generic filter rules ---- */ .filter-stack { display: flex; flex-direction: column; } /* tighter than a standalone .filter-row: these read as one block */ .filter-rule { margin: 0 0 8px; } .filter-cat { display: flex; align-items: center; gap: 10px; } .filter-mode { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); white-space: nowrap; } /* These are native , so the browser paints them from `color-scheme`, not from data-theme — without this the *unselected* option is a solid white dot in dark mode, reading as the more-selected of the two. Scoped here rather than set on :root so no other page's native controls change appearance. */ :root[data-theme="dark"] .filter-mode { color-scheme: dark; } .filter-remove { border: none; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 4px 6px; cursor: pointer; } .filter-remove:hover { color: var(--ink); } .scatter-y-dropdown { width: 460px; max-width: 100%; } .filter-check { font-size: 13px; color: var(--ink-2); } /* ---- experiment switcher ---- */ .switcher-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .switcher-dropdown { width: 440px; max-width: 100%; font-size: 13px; } /* ---- landing hub ---- */ .home-hub { max-width: 1000px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .section-head .card-title { margin: 0; } .section-all { font-size: 12px; } .exp-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 13px; } .exp-row:last-child { border-bottom: none; } .exp-date { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .exp-name { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exp-name:hover { text-decoration: underline; } .exp-row .badge { flex-shrink: 0; font-size: 11px; padding: 1px 8px; } .exp-meta { color: var(--muted); flex-shrink: 0; margin-left: auto; font-size: 12px; } .exp-columns { align-items: start; } /* Each landing column stacks several type sections; .card-grid-2 zeroes the cards' own margin, so the column owns the spacing between them. */ .exp-column { display: flex; flex-direction: column; gap: 18px; } /* ---- compare page ---- Each summary card is topped by a rule in the color that test carries through every chart on the page; that rule is the only thing set inline (rocaviz/pages/compare.py), so the width lives here and only the hue travels with the data. */ .cmp-add-row { align-items: center; } /* Cards stretch to a common height and pin their metric grids to the bottom, so the same metric sits on the same line across every card — the numbers are meant to be read across, not one card at a time. */ .cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 0 0 18px; align-items: stretch; } .cmp-card { display: flex; flex-direction: column; margin-bottom: 0; border-top: 3px solid var(--baseline); border-radius: 4px 4px 8px 8px; padding-top: 13px; } .cmp-card .badge-row { margin: 6px 0 0; } .cmp-card-material { color: var(--ink-2); font-size: 12.5px; margin-top: 7px; } .cmp-card .multi-stat-grid { margin-top: auto; padding-top: 12px; } .cmp-card .empty-note { margin: 10px 0 2px; } .cmp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cmp-card-name { font-size: 14px; font-weight: 650; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; } .cmp-card-name:hover { color: var(--accent); } /* Electrode ids run long enough to wrap a card three lines deep; clip and leave the full value on the title attribute. */ .cmp-card-electrode { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-remove { flex-shrink: 0; border: none; background: none; color: var(--muted); font-size: 13px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 4px; } .cmp-remove:hover { color: var(--ink); background: var(--grid); } .cmp-empty { margin-bottom: 18px; } .cmp-empty-title { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; } /* /explore's selection bar: match count on the left, its actions on the right, above the table they act on. */ .cat-compare-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; min-height: 30px; } .cat-compare-bar .hint { margin: 0; } .cat-compare-actions { display: flex; gap: 8px; margin-left: auto; } /* ---- table actions ---- */ .table-actions { display: flex; justify-content: flex-end; margin: -6px 0 8px; } .btn { padding: 6px 14px; border: 1px solid var(--baseline); border-radius: 6px; background: var(--surface); color: var(--ink-2); font-size: 13px; cursor: pointer; } .btn:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); } /* only /explore's "+ Add filter" disables itself (at MAX_FILTERS rules) */ .btn:disabled { opacity: 0.45; cursor: default; } /* ---- tables ---- */ .dash-table-container { font-size: 13px; } /* !important throughout: dash_table's own bundled CSS loads after ours and sets background-color at equal-or-higher specificity, so a plain declaration here is silently overridden (only caught testing dark mode — the light-mode defaults happened to look close enough to pass unnoticed). */ .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { background: var(--surface) !important; color: var(--ink-2) !important; font-weight: 600; border-bottom: 1px solid var(--baseline) !important; } .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td { border-bottom: 1px solid var(--grid) !important; background: var(--surface) !important; color: var(--ink) !important; } /* DataTable defines its own --accent (hotpink) on the spreadsheet container, shadowing ours; re-point it at the app accent. */ .dash-table-container .dash-spreadsheet-container, .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner { --accent: inherit; } .dash-table-container .dash-cell a, .dash-table-container .dash-cell a:visited { color: var(--accent) !important; text-decoration: none; } .dash-table-container .dash-cell a:hover { text-decoration: underline; } /* dcc dropdown resets to match */ .Select-control, .Select-menu-outer { font-size: 13px; } /* ---- dark-theme overrides for fixed-tint badges ---- These use literal brand hex colors (not CSS variables) chosen for contrast on the light --surface; dark mode needs its own brighter set to stay legible on the dark --surface. assets/theme_toggle.js always stamps data-theme explicitly (checking localStorage, else prefers-color-scheme) before paint, so — unlike the :root variable block above — these don't need a prefers-color-scheme fallback copy. */ :root[data-theme="dark"] .badge-running { color: var(--good); border-color: rgba(41, 193, 68, 0.4); } :root[data-theme="dark"] .badge-type-flowcell { background: rgba(41, 193, 68, 0.12); border-color: rgba(41, 193, 68, 0.35); color: #6bdb85; } :root[data-theme="dark"] .badge-type-galv { background: rgba(86, 160, 240, 0.14); border-color: rgba(86, 160, 240, 0.4); color: #8cc0f5; } :root[data-theme="dark"] .badge-type-cv { background: rgba(150, 130, 230, 0.16); border-color: rgba(150, 130, 230, 0.42); color: #b6a5ef; } :root[data-theme="dark"] .badge-type-select { background: rgba(240, 150, 100, 0.16); border-color: rgba(240, 150, 100, 0.42); color: #f2ac80; } :root[data-theme="dark"] .badge-type-activ { background: rgba(240, 190, 70, 0.16); border-color: rgba(240, 190, 70, 0.44); color: #f0cb70; } :root[data-theme="dark"] .badge-type-other { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .value-good { background: rgba(41, 193, 68, 0.16); } :root[data-theme="dark"] .value-bad { background: rgba(230, 90, 90, 0.18); } :root[data-theme="dark"] .fade-badge-good { background: rgba(41, 193, 68, 0.12); border-color: rgba(41, 193, 68, 0.35); color: #6bdb85; } :root[data-theme="dark"] .fade-badge-warn { background: rgba(240, 190, 70, 0.16); border-color: rgba(240, 190, 70, 0.44); color: #f0cb70; } :root[data-theme="dark"] .fade-badge-orange { background: rgba(240, 150, 100, 0.16); border-color: rgba(240, 150, 100, 0.42); color: #f2ac80; } :root[data-theme="dark"] .fade-badge-bad { background: rgba(230, 90, 90, 0.14); border-color: rgba(230, 90, 90, 0.4); color: #ef8a8a; } :root[data-theme="dark"] .badge-water { background: rgba(86, 160, 240, 0.14); border-color: rgba(86, 160, 240, 0.4); color: #8cc0f5; } :root[data-theme="dark"] .badge-agent { background: rgba(150, 130, 230, 0.14); border-color: rgba(150, 130, 230, 0.4); color: #b6a5ef; } :root[data-theme="dark"] .sign-toggle.active { border-color: rgba(86, 160, 240, 0.45); background: rgba(86, 160, 240, 0.14); } :root[data-theme="dark"] .notice { border-left-color: #f0cb70; }