/* Look shared by the CLI static report and by the web server dashboard. The report embeds this file inside the HTML, so it cannot depend on any other resource. */ /* One palette, two themes: light-dark() picks the second colour whenever the used scheme is dark, so every token stays defined in a single place instead of being repeated in a media query. Which scheme is used follows the system, unless the page pins it by putting data-theme on - that is what the theme switch of the dashboard does, and the only reason the two rules under the palette exist. The static report has no switch and always follows the system. */ :root { color-scheme: light dark; --ground: light-dark(#eef0ec, #0e1211); --surface: light-dark(#ffffff, #161b19); --surface-2: light-dark(#f7f8f5, #1c2220); --line: light-dark(#d6dad2, #2b3331); --line-strong: light-dark(#b9c0b5, #3d4744); --ink: light-dark(#171b19, #e6eae6); --ink-2: light-dark(#4c554f, #a6b0aa); --ink-3: light-dark(#78827b, #7c8781); --accent: light-dark(#1c5064, #6fb3c9); --accent-soft: light-dark(#dbe7ea, #1b2f37); --active: light-dark(#2f6b48, #6fb98a); --suspended: light-dark(#8a6410, #d4a445); --archived: light-dark(#5f6b73, #93a0a8); --missing: light-dark(#7a6a5f, #b3a294); --failed: light-dark(#a52d21, #f08a7c); --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --radius: 3px; /* light-dark() only switches colours, so the shadow switches each of its own instead of the whole list: the dark theme needs a heavier one to be seen at all over the dark ground. */ --shadow: 0 1px 2px light-dark(rgb(23 27 25 / 0.06), rgb(0 0 0 / 0.4)), 0 1px 1px light-dark(rgb(23 27 25 / 0.04), rgb(0 0 0 / 0.2)); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .page { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; display: flex; flex-direction: column; gap: 26px; } /* ---------- header ---------- */ .top { display: flex; flex-direction: column; gap: 6px; } .top .tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .top h1 { margin: 0; font-family: var(--font-title); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; } .top p { margin: 0; max-width: 62ch; color: var(--ink-2); } /* ---------- card ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card > h2 { margin: 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } /* ---------- numbers ---------- */ .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .stat { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; } .stat dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .stat dd { margin: 0; font-family: var(--font-title); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat .note { font-size: 12px; color: var(--ink-2); font-family: var(--font-text); } /* ---------- histogram ---------- */ .years { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; } .years header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .years .hint { font-size: 12px; color: var(--ink-3); } .bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; } .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer; } .bar .stem { width: 100%; background: var(--accent-soft); border-top: 3px solid var(--accent); border-radius: 1px 1px 0 0; transition: background 120ms ease; } .bar .value { font-variant-numeric: tabular-nums; color: var(--ink-2); } .bar .label { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .bar:hover .stem { background: var(--accent); } .bar[aria-pressed="true"] .stem { background: var(--accent); } .bar[aria-pressed="true"] .label { color: var(--ink); font-weight: 600; } /* ---------- fields and buttons ---------- */ .filters { padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } /* min-width and max-width hold the field: without them the select grows until the longest district of the list fits and pushes the page sideways. */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 100%; } .field--wide { flex: 1 1 240px; min-width: 180px; } .field select { width: 230px; max-width: 100%; } .field label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .field input, .field select, .field textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 9px; min-height: 36px; } .field input[type="month"] { font-family: var(--font-data); font-size: 13px; } .range { display: flex; align-items: center; gap: 8px; } .range .to { color: var(--ink-3); font-size: 13px; padding-bottom: 2px; } .actions { display: flex; gap: 8px; margin-left: auto; } .button { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 13px; min-height: 36px; cursor: pointer; } .button:hover { border-color: var(--accent); color: var(--accent); } .button--primary { background: var(--accent); border-color: var(--accent); color: var(--surface); } .button--primary:hover { color: var(--surface); opacity: 0.9; } .button:disabled { opacity: 0.5; cursor: default; } .button:disabled:hover { border-color: var(--line-strong); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- table ---------- */ .results { display: flex; flex-direction: column; gap: 10px; } .count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .count p { margin: 0; font-size: 13px; color: var(--ink-2); } .count strong { color: var(--ink); font-variant-numeric: tabular-nums; } .scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0; white-space: nowrap; } thead th button { font: inherit; color: inherit; background: none; border: 0; padding: 10px 12px; width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 5px; } thead th button:hover { color: var(--accent); } thead th .arrow { opacity: 0; font-size: 9px; } thead th[aria-sort] button { color: var(--ink); } thead th[aria-sort] .arrow { opacity: 1; } thead th.num button { justify-content: flex-end; text-align: right; } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-2); } .num { text-align: right; font-variant-numeric: tabular-nums; } .cnj { font-family: var(--font-data); font-size: 12.5px; white-space: nowrap; } .legacy { display: block; font-family: var(--font-data); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } .date { font-family: var(--font-data); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .venue { min-width: 190px; } .venue .court { display: block; font-size: 12px; color: var(--ink-2); } .subject { color: var(--ink-2); font-size: 12.5px; max-width: 260px; } .subject span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .badge--active { color: var(--active); } .badge--suspended { color: var(--suspended); } .badge--archived { color: var(--archived); } .badge--missing { color: var(--missing); } .badge--failed { color: var(--failed); } .badge--waiting { color: var(--ink-3); } /* Space between the badges at the bottom of the count, with no margin on the first item. */ .statuses .badge + .badge { margin-left: 14px; } .error { color: var(--failed); font-size: 12px; display: block; max-width: 320px; } /* No display:flex here: a table cell that becomes a flex container loses the alignment with the row borders. */ .entry { min-width: 210px; } .entry .date, .entry .type { display: block; } .entry .type { color: var(--ink); margin-top: 2px; } a { color: var(--accent); } a.external { font-size: 12px; white-space: nowrap; } .empty { padding: 44px 18px; text-align: center; color: var(--ink-2); } .empty p { margin: 0 0 4px; } .footer { font-size: 12.5px; color: var(--ink-3); display: flex; flex-direction: column; gap: 4px; } .footer code { font-family: var(--font-data); font-size: 12px; color: var(--ink-2); } @media (max-width: 700px) { .page { padding: 24px 14px 48px; } .actions { margin-left: 0; } .subject { display: none; } thead th.subject { display: none; } } @media print { /* On paper there is no dark theme: without this the page would print the light ink of the dark palette over the white of the sheet. It beats the data-theme rules above because it comes later with the same specificity. */ :root, :root[data-theme="dark"] { color-scheme: light; } body { background: #fff; } .filters, .years, .actions, .upload, .batches { display: none; } .scroll { overflow: visible; border: 0; box-shadow: none; } tbody tr { break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }