kyleandClaude Opus 5.5
2297187f88
/report.html shows one company's backups over the last 7, 30 or 90 days, chosen in the page and kept in the URL so reports can be bookmarked or linked. Reached from Reports in the top bar, or a company's name in a job's detail. - Summary (jobs, runs, success rate, warnings, failures, overdue now); per job: run counts, success rate (successful / finished runs), last result and last successful backup; a day-by-day strip; every warning and failure with its message - Print / Save as PDF: a print stylesheet prints light whatever the screen theme, hides the controls, keeps rows and strips whole across pages, and keeps the coloured cells and badges - Days before a job was first known show as "Not monitored yet" rather than as missed backups, so a 90-day report for a newly added client doesn't look like 60 days of failures - CSV of every run (full messages, times in the browser's time zone, UTF-8 BOM for Excel, formula-like values defused with a leading ') Backend: GET /api/v1/tenants, /api/v1/reports/tenant and /api/v1/reports/tenant.csv; periods capped at retention. tzdata added for systems without time zone data. Frontend status and day-strip helpers moved out of app.js into status.js / history.js for reuse. Tested: 9 new backend tests; in the browser against the API with 30 days of demo history (summary, issues, strips, 7/30/90 switching, CSV download with BOM, print styles applied on screen), mock mode and phone width. Co-Authored-By: Claude Opus 5.5 <[email protected]>
526 lines
18 KiB
CSS
526 lines
18 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--bg: #f6f7f9;
|
|
--surface: #ffffff;
|
|
--surface-alt: #f0f2f5;
|
|
--border: #d9dde3;
|
|
--text: #1f2328;
|
|
--muted: #656d76;
|
|
--accent: #0969da;
|
|
|
|
/* Status palette: each has fg/bg/border so badges stay legible in both themes */
|
|
--success-fg: #116329; --success-bg: #dafbe1; --success-bd: #4ac26b;
|
|
--warning-fg: #7d4e00; --warning-bg: #fff8c5; --warning-bd: #d4a72c;
|
|
--failed-fg: #a40e26; --failed-bg: #ffebe9; --failed-bd: #ff8182;
|
|
--unknown-fg: #57606a; --unknown-bg: #eaeef2; --unknown-bd: #afb8c1;
|
|
--running-fg: #0550ae; --running-bg: #ddf4ff; --running-bd: #54aeff;
|
|
|
|
--radius: 8px;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 4%);
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0d1117;
|
|
--surface: #161b22;
|
|
--surface-alt: #1c2128;
|
|
--border: #30363d;
|
|
--text: #e6edf3;
|
|
--muted: #8d96a0;
|
|
--accent: #4493f8;
|
|
--success-fg: #6fdd8b; --success-bg: #12261e; --success-bd: #2ea043;
|
|
--warning-fg: #f2cc60; --warning-bg: #272115; --warning-bd: #9e6a03;
|
|
--failed-fg: #ffa198; --failed-bg: #2d1214; --failed-bd: #da3633;
|
|
--unknown-fg: #9da7b3; --unknown-bg: #21262d; --unknown-bd: #484f58;
|
|
--running-fg: #79c0ff; --running-bg: #0c2d4b; --running-bd: #1f6feb;
|
|
--shadow: none;
|
|
}
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|
|
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px; height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- Layout ---------- */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.topbar__title { margin: 0; font-size: 1.25rem; }
|
|
.topbar__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
|
|
/* Only when shown: display:flex on the bare class would override the hidden attribute */
|
|
.topbar__user:not([hidden]) {
|
|
display: flex; align-items: center; gap: 0.75rem;
|
|
padding-left: 0.75rem; border-left: 1px solid var(--border);
|
|
}
|
|
a.btn { text-decoration: none; }
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1.25rem 1.5rem 3rem;
|
|
}
|
|
|
|
/* ---------- Controls ---------- */
|
|
.btn {
|
|
font: inherit;
|
|
padding: 0.4rem 0.9rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface-alt);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { border-color: var(--muted); }
|
|
.btn:disabled { opacity: 0.6; cursor: progress; }
|
|
.btn--icon { padding: 0.25rem 0.55rem; line-height: 1; }
|
|
|
|
.input {
|
|
font: inherit;
|
|
width: min(100%, 360px);
|
|
padding: 0.45rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
.toolbar { margin: 1rem 0; }
|
|
|
|
/* ---------- Banner ---------- */
|
|
.banner {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 1rem;
|
|
border: 1px solid;
|
|
}
|
|
.banner--error { background: var(--failed-bg); color: var(--failed-fg); border-color: var(--failed-bd); }
|
|
|
|
/* ---------- Summary cards ---------- */
|
|
.summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
.summary-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.15rem;
|
|
padding: 0.9rem 1rem;
|
|
font: inherit;
|
|
text-align: left;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left-width: 4px;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
cursor: pointer;
|
|
}
|
|
.summary-card[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -1px; }
|
|
.summary-card__count { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.summary-card__label { font-size: 0.85rem; color: var(--muted); }
|
|
.summary-card--failed { border-left-color: var(--failed-bd); }
|
|
.summary-card--warning { border-left-color: var(--warning-bd); }
|
|
.summary-card--running { border-left-color: var(--running-bd); }
|
|
.summary-card--success { border-left-color: var(--success-bd); }
|
|
.summary-card--overdue { border-left-color: var(--unknown-bd); }
|
|
|
|
/* ---------- Table ---------- */
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.jobs { width: 100%; border-collapse: collapse; }
|
|
.jobs th, .jobs td {
|
|
padding: 0.65rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
.jobs tbody tr:last-child td { border-bottom: none; }
|
|
.jobs tbody tr:hover { background: var(--surface-alt); }
|
|
.jobs th { background: var(--surface-alt); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
|
|
.sort {
|
|
all: unset;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
}
|
|
.sort::after { content: " ↕"; opacity: 0.4; }
|
|
th[aria-sort="ascending"] .sort::after { content: " ↑"; opacity: 1; }
|
|
th[aria-sort="descending"] .sort::after { content: " ↓"; opacity: 1; }
|
|
th[aria-sort="ascending"] .sort,
|
|
th[aria-sort="descending"] .sort { color: var(--text); }
|
|
|
|
.time { display: flex; flex-direction: column; }
|
|
.time__rel { font-size: 0.8rem; color: var(--muted); }
|
|
|
|
.empty { padding: 2rem; text-align: center; color: var(--muted); margin: 0; }
|
|
|
|
/* ---------- Status badges ---------- */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.2rem 0.65rem;
|
|
font: inherit;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 1px solid;
|
|
border-radius: 999px;
|
|
}
|
|
button.badge { cursor: pointer; }
|
|
button.badge:hover { filter: brightness(0.95); }
|
|
/* Icon + text, not colour alone, so it's readable for colour-blind users */
|
|
.badge__icon { font-size: 0.75rem; }
|
|
.badge--success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-bd); }
|
|
.badge--warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-bd); }
|
|
.badge--failed { color: var(--failed-fg); background: var(--failed-bg); border-color: var(--failed-bd); }
|
|
.badge--unknown { color: var(--unknown-fg); background: var(--unknown-bg); border-color: var(--unknown-bd); }
|
|
.badge--running { color: var(--running-fg); background: var(--running-bg); border-color: var(--running-bd); }
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.badge--running .badge__icon { animation: spin 2s linear infinite; }
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.tag-overdue {
|
|
margin-left: 0.5rem;
|
|
padding: 0.05rem 0.45rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
color: var(--failed-fg);
|
|
background: var(--failed-bg);
|
|
}
|
|
|
|
/* ---------- Modal ---------- */
|
|
.modal {
|
|
width: min(720px, calc(100vw - 2rem));
|
|
max-height: calc(100vh - 4rem);
|
|
padding: 0;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
.modal::backdrop { background: rgb(0 0 0 / 45%); }
|
|
.modal__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.modal__title { margin: 0; font-size: 1.15rem; }
|
|
.modal__header p { margin: 0.15rem 0 0; }
|
|
.modal__body { padding: 1rem 1.25rem 1.25rem; }
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 0.4rem 1.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
.detail-grid dt { color: var(--muted); }
|
|
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
|
|
|
|
.detail-section-title { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0.5rem; }
|
|
|
|
.message {
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
white-space: pre-wrap; /* preserve backup-software line breaks */
|
|
overflow-wrap: anywhere;
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 0.85rem;
|
|
background: var(--surface-alt);
|
|
border: 1px solid var(--border);
|
|
border-left-width: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
.message--failed { border-left-color: var(--failed-bd); }
|
|
.message--warning { border-left-color: var(--warning-bd); }
|
|
.message--success { border-left-color: var(--success-bd); }
|
|
.message--running { border-left-color: var(--running-bd); }
|
|
|
|
.detail-status { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
|
|
|
|
.link {
|
|
all: unset;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---------- Run history ---------- */
|
|
.history-stats { margin: 0 0 0.6rem; font-size: 0.9rem; }
|
|
|
|
/* One cell per day, oldest → today. Colour + tooltip; the runs table below is the accessible detail. */
|
|
.day-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(30, 1fr);
|
|
gap: 3px;
|
|
}
|
|
.day {
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
background: var(--surface-alt);
|
|
cursor: pointer;
|
|
}
|
|
.day:disabled { cursor: default; opacity: 0.6; }
|
|
.day:not(:disabled):hover { filter: brightness(0.9); }
|
|
.day[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.day--success { background: var(--success-bd); border-color: var(--success-bd); }
|
|
.day--warning { background: var(--warning-bd); border-color: var(--warning-bd); }
|
|
.day--failed { background: var(--failed-bd); border-color: var(--failed-bd); }
|
|
.day--running { background: var(--running-bd); border-color: var(--running-bd); }
|
|
.day--unknown { background: var(--unknown-bd); border-color: var(--unknown-bd); }
|
|
.day-strip__ticks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.history-filter { margin: 0.75rem 0 0; font-size: 0.85rem; }
|
|
|
|
.runs-wrap {
|
|
margin-top: 0.75rem;
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.runs { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
|
.runs th, .runs td {
|
|
padding: 0.4rem 0.75rem;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.runs th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--surface-alt);
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
.runs tbody tr:last-child td { border-bottom: none; }
|
|
.runs tr.is-selected td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
|
.runs .badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
|
|
/* ---------- Admin page ---------- */
|
|
.container--narrow { max-width: 1100px; }
|
|
.topbar__nav { display: flex; align-items: center; gap: 1rem; }
|
|
|
|
.banner--info { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
|
|
|
|
.panel {
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem 1.25rem 1.25rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.panel__title { font-size: 1.05rem; margin: 0 0 0.25rem; }
|
|
section > .panel__title { margin: 0 0 0.75rem; }
|
|
.panel__title:focus { outline: none; } /* focused from script after a change, not by the user */
|
|
.panel p { margin: 0 0 0.75rem; }
|
|
|
|
code {
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 0.9em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* New key form: label, hint above the input (so autocomplete can't cover it), error below */
|
|
.new-key { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
|
|
.field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 22rem; max-width: 30rem; }
|
|
.field label { font-weight: 600; }
|
|
.hint { font-size: 0.85rem; color: var(--muted); }
|
|
.field .input { width: 100%; }
|
|
.error-msg { display: none; font-size: 0.85rem; color: var(--failed-fg); }
|
|
/* Only after the user has interacted with the field (or tried to submit) */
|
|
.field .input:user-invalid { border-color: var(--failed-bd); background: var(--failed-bg); }
|
|
.field .input:user-invalid + .error-msg { display: block; }
|
|
.form-error { flex-basis: 100%; margin: 0; color: var(--failed-fg); }
|
|
|
|
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
|
|
.btn--primary:hover { filter: brightness(1.08); border-color: var(--accent); }
|
|
.btn--danger { background: var(--failed-bd); border-color: var(--failed-bd); color: #fff; font-weight: 600; }
|
|
.btn--danger-outline { color: var(--failed-fg); border-color: var(--failed-bd); background: transparent; }
|
|
.btn--danger-outline:hover { background: var(--failed-bg); border-color: var(--failed-bd); }
|
|
|
|
/* The one-time key */
|
|
.secret {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--warning-bd);
|
|
border-left-width: 4px;
|
|
border-radius: 6px;
|
|
background: var(--warning-bg);
|
|
}
|
|
.secret__title { margin: 0 0 0.5rem; font-size: 1rem; }
|
|
.secret__title:focus { outline: none; }
|
|
.secret__row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.75rem; flex-wrap: wrap; }
|
|
.secret__value {
|
|
flex: 1 1 20rem;
|
|
padding: 0.45rem 0.75rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
user-select: all; /* one click selects the whole key */
|
|
}
|
|
|
|
/* Key table */
|
|
.keys td { vertical-align: top; }
|
|
.keys td .badge { margin-bottom: 0.25rem; }
|
|
.keys td > .time__rel { display: block; }
|
|
.keys .actions { text-align: right; width: 1%; }
|
|
.keys tr.is-revoked td { color: var(--muted); }
|
|
.keys tr.is-revoked code { text-decoration: line-through; }
|
|
.stale-note { display: block; font-size: 0.8rem; font-weight: 600; color: var(--warning-fg); }
|
|
|
|
/* Confirm dialog */
|
|
.modal--small { width: min(460px, calc(100vw - 2rem)); }
|
|
.modal--small .modal__body p { margin-top: 0; }
|
|
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
|
|
|
|
/* ---------- Report page ---------- */
|
|
.report-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: 0.75rem 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.report-controls__field { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.report-controls__field label { font-weight: 600; font-size: 0.9rem; }
|
|
.report-controls__field .input { width: auto; min-width: 14rem; }
|
|
.report-controls__actions { display: flex; gap: 0.5rem; margin-left: auto; }
|
|
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
|
|
|
|
.report__header { margin-bottom: 1rem; }
|
|
.report__title { margin: 0; font-size: 1.4rem; }
|
|
.report__period { margin: 0.25rem 0 0; color: var(--muted); }
|
|
.report__section-title { font-size: 1.05rem; margin: 1.75rem 0 0.75rem; }
|
|
.report__footer { margin-top: 1.5rem; font-size: 0.85rem; }
|
|
|
|
.report-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
|
gap: 0.75rem;
|
|
margin: 0;
|
|
}
|
|
.report-summary__item {
|
|
padding: 0.75rem 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left-width: 4px;
|
|
border-radius: var(--radius);
|
|
}
|
|
.report-summary__item dt { font-size: 0.85rem; color: var(--muted); }
|
|
.report-summary__item dd { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.report-summary__item--warning { border-left-color: var(--warning-bd); }
|
|
.report-summary__item--failed { border-left-color: var(--failed-bd); }
|
|
|
|
/* Row headers (job names) are <th> for accessibility, but shouldn't look like the column headings */
|
|
.report-table tbody th {
|
|
background: none; color: var(--text); font-size: inherit; font-weight: 600;
|
|
text-transform: none; letter-spacing: normal;
|
|
}
|
|
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.report-table td > .time__rel { display: block; }
|
|
.report-table .badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
|
|
.report-alert { color: var(--failed-fg); font-weight: 600; }
|
|
.report-message { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 20rem; font-size: 0.85rem; }
|
|
.nowrap { white-space: nowrap; }
|
|
|
|
.report-legend {
|
|
display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
|
|
margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted);
|
|
}
|
|
.report-legend li { display: flex; align-items: center; gap: 0.35rem; }
|
|
.report-legend .day { display: inline-block; width: 0.9rem; height: 0.9rem; }
|
|
|
|
.report-daily__job { margin-bottom: 0.75rem; }
|
|
.report-daily__name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
|
|
/* One cell per day of the report's period */
|
|
.report-strip { grid-template-columns: repeat(var(--days, 30), 1fr); gap: 2px; }
|
|
.report-strip .day { display: block; height: 18px; cursor: default; }
|
|
/* Before the dashboard knew of the job: outlined only, so it doesn't read as a missed backup */
|
|
.day--untracked { background: transparent; border: 1px dashed var(--muted); opacity: 0.5; }
|
|
|
|
/* ---------- Printing ---------- */
|
|
@media print {
|
|
/* Always print light, whatever the screen's theme (same values as the light tokens above) */
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-alt: #f0f2f5;
|
|
--border: #c9ced6;
|
|
--text: #1f2328;
|
|
--muted: #57606a;
|
|
--accent: #0969da;
|
|
--success-fg: #116329; --success-bg: #dafbe1; --success-bd: #4ac26b;
|
|
--warning-fg: #7d4e00; --warning-bg: #fff8c5; --warning-bd: #d4a72c;
|
|
--failed-fg: #a40e26; --failed-bg: #ffebe9; --failed-bd: #ff8182;
|
|
--unknown-fg: #57606a; --unknown-bg: #eaeef2; --unknown-bd: #afb8c1;
|
|
--running-fg: #0550ae; --running-bg: #ddf4ff; --running-bd: #54aeff;
|
|
--shadow: none;
|
|
font-size: 11pt;
|
|
}
|
|
@page { margin: 14mm; }
|
|
body { background: #fff; color: var(--text); }
|
|
.no-print, .topbar, .banner { display: none !important; }
|
|
.container { max-width: none; padding: 0; }
|
|
.table-wrap { overflow: visible; box-shadow: none; }
|
|
.jobs th, .jobs td { white-space: normal; padding: 0.35rem 0.5rem; }
|
|
.jobs tbody tr:hover { background: none; }
|
|
.report-message { min-width: 0; }
|
|
/* Keep things whole across page breaks */
|
|
tr, .report-daily__job, .report-summary__item, .report-legend { break-inside: avoid; }
|
|
.report__section-title { break-after: avoid; }
|
|
thead { display: table-header-group; } /* repeat column headings on each page */
|
|
/* Browsers drop backgrounds when printing unless told they carry meaning */
|
|
.day, .badge, .report-summary__item { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
|
}
|