9eb29bb41e
- I2: .wd-row now wraps and .wd-output takes the full row width, so streamed output no longer gets crushed beside the button on the filename's line. - I3: split .webinar-dash into token scope + a new .wd-bar toolbar above a .wd-grid two-pane layout. Extracted renderAll (called from onload) which renders a global "Sync coverage" button, generalised runIngest's subprocess handling into a shared runClaude keyed by run id, and added spawnGate to preflight-disable both the sync and per-file ingest buttons when claude can't be spawned (no desktop Obsidian / no child_process). A successful ingest or sync now re-renders the dashboard instead of requiring reopen. - I6: the right pane now shows the tracked script path and last-synced date from the coverage file's metadata, and flags when cfg.script disagrees with it. - Minors: documented the unescaped-pipe split regex, added role="img" to the coverage meter alongside its aria-label.
202 lines
7.0 KiB
CSS
202 lines
7.0 KiB
CSS
.webinar-dash {
|
|
--wd-ink-000: #ffffff; --wd-ink-050: #f7f7f7; --wd-ink-100: #ececec;
|
|
--wd-ink-200: #d9d9d9; --wd-ink-400: #8a8a8a; --wd-ink-500: #5e5e5e;
|
|
--wd-ink-700: #262626; --wd-ink-900: #0a0a0a; --wd-ink-999: #000000;
|
|
--wd-red-500: #e1261c; --wd-red-600: #c31c14;
|
|
|
|
--wd-bg: var(--wd-ink-000);
|
|
--wd-bg-subtle: var(--wd-ink-050);
|
|
--wd-fg: var(--wd-ink-999);
|
|
--wd-fg-2: var(--wd-ink-700);
|
|
--wd-fg-3: var(--wd-ink-500);
|
|
--wd-fg-4: var(--wd-ink-400);
|
|
--wd-border: var(--wd-ink-200);
|
|
--wd-border-strong: var(--wd-ink-999);
|
|
--wd-border-subtle: var(--wd-ink-100);
|
|
--wd-accent: var(--wd-red-500);
|
|
--wd-accent-press: var(--wd-red-600);
|
|
--wd-accent-on: #ffffff;
|
|
--wd-ok: #0a8a3f;
|
|
--wd-warn: #c68a00;
|
|
--wd-danger: var(--wd-red-500);
|
|
|
|
--wd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
--wd-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
font-family: var(--wd-sans);
|
|
color: var(--wd-fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.theme-dark .webinar-dash {
|
|
--wd-bg: var(--wd-ink-900);
|
|
--wd-bg-subtle: #161616;
|
|
--wd-fg: var(--wd-ink-000);
|
|
--wd-fg-2: var(--wd-ink-200);
|
|
--wd-fg-3: var(--wd-ink-400);
|
|
--wd-fg-4: var(--wd-ink-500);
|
|
--wd-border: var(--wd-ink-700);
|
|
--wd-border-strong: #b8b8b8;
|
|
--wd-border-subtle: #161616;
|
|
/* Accent tracks the installed theme at .obsidian/themes/tesanti/theme.css,
|
|
whose dark section reads "Black canvas, same signal red": --accent-h/-s/-l
|
|
are declared once at :root and never redeclared under .theme-dark, and only
|
|
the hover state lifts (#c31c14 light, #ff4d43 dark). Match that exactly. */
|
|
--wd-accent: var(--wd-red-500);
|
|
--wd-accent-press: #ff4d43;
|
|
--wd-accent-on: #ffffff;
|
|
/* Status tokens are separate from the brand accent by design-system rule, and
|
|
here they carry small text in a dense table. #e1261c on near-black is about
|
|
3.8:1, under AA for small text, so these lift where the accent does not. */
|
|
--wd-ok: #2fbf6a;
|
|
--wd-warn: #e0a516;
|
|
--wd-danger: #ff5c50;
|
|
}
|
|
|
|
.wd-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
|
|
gap: 24px;
|
|
}
|
|
.wd-grid > * { min-width: 0; }
|
|
|
|
.wd-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
border: 1px solid var(--wd-border);
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
background: var(--wd-bg-subtle);
|
|
}
|
|
|
|
.wd-btn-ghost {
|
|
background: transparent;
|
|
color: var(--wd-fg);
|
|
border-color: var(--wd-border-strong);
|
|
}
|
|
.wd-btn-ghost:hover {
|
|
background: var(--wd-bg-muted, var(--wd-bg-subtle));
|
|
border-color: var(--wd-border-strong);
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.wd-grid { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
|
|
.wd-pane { display: flex; flex-direction: column; gap: 20px; }
|
|
|
|
.wd-eyebrow {
|
|
font-family: var(--wd-mono); font-size: 11px; line-height: 1;
|
|
letter-spacing: 0.12em; text-transform: uppercase;
|
|
color: var(--wd-fg-3); font-weight: 500;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.wd-eyebrow::before {
|
|
content: ""; width: 5px; height: 5px; flex: none; background: var(--wd-accent);
|
|
}
|
|
|
|
.wd-block { display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
.wd-row {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
border: 1px solid var(--wd-border); border-radius: 4px;
|
|
padding: 12px 12px 12px 16px; background: var(--wd-bg);
|
|
}
|
|
.wd-row + .wd-row { margin-top: -1px; }
|
|
.wd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
.wd-row-name {
|
|
font-size: 14px; font-weight: 600;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.wd-mono {
|
|
font-family: var(--wd-mono); font-size: 11px; color: var(--wd-fg-3);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.wd-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; flex: none;
|
|
font-family: var(--wd-sans); font-size: 13px; font-weight: 600;
|
|
padding: 6px 12px; border-radius: 6px; cursor: pointer;
|
|
border: 1px solid var(--wd-accent); background: var(--wd-accent);
|
|
color: var(--wd-accent-on);
|
|
transition: background 120ms cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
.wd-btn:hover { background: var(--wd-accent-press); border-color: var(--wd-accent-press); }
|
|
.wd-btn:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 2px; }
|
|
.wd-btn[disabled] {
|
|
opacity: 0.45; cursor: not-allowed;
|
|
background: transparent; color: var(--wd-fg-3); border-color: var(--wd-border);
|
|
}
|
|
.wd-btn svg { width: 14px; height: 14px; flex: none; }
|
|
|
|
.wd-done { display: flex; flex-direction: column; }
|
|
.wd-done-row {
|
|
display: flex; align-items: baseline; gap: 12px; padding: 5px 0;
|
|
border-bottom: 1px solid var(--wd-border-subtle); font-size: 13px;
|
|
}
|
|
.wd-done-row:last-child { border-bottom: 0; }
|
|
.wd-done-name {
|
|
color: var(--wd-fg-2);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
|
|
.wd-note { font-size: 12px; color: var(--wd-fg-3); }
|
|
.wd-error {
|
|
font-size: 13px; color: var(--wd-danger);
|
|
border: 1px solid var(--wd-danger); border-radius: 4px; padding: 12px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.webinar-dash * { transition-duration: 0.01ms !important; }
|
|
}
|
|
|
|
.wd-meter { display: flex; gap: 2px; height: 8px; width: 100%; }
|
|
.wd-meter > i { display: block; height: 100%; }
|
|
.wd-seg-covered { background: var(--wd-ok); }
|
|
.wd-seg-partial { background: var(--wd-warn); }
|
|
.wd-seg-absent { background: var(--wd-danger); }
|
|
|
|
.wd-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--wd-fg-2); }
|
|
.wd-key > span { display: inline-flex; align-items: center; gap: 6px; }
|
|
.wd-key i { width: 8px; height: 8px; flex: none; }
|
|
|
|
.wd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
.wd-tbl th {
|
|
font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em;
|
|
text-transform: uppercase; color: var(--wd-fg-3); font-weight: 500;
|
|
text-align: left; padding: 0 12px 8px 0;
|
|
border-bottom: 1px solid var(--wd-border-strong);
|
|
}
|
|
.wd-tbl td {
|
|
padding: 6px 12px 6px 0; border-bottom: 1px solid var(--wd-border-subtle);
|
|
vertical-align: baseline;
|
|
}
|
|
.wd-grp td {
|
|
padding-top: 16px; border-bottom: 1px solid var(--wd-border-strong);
|
|
font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em;
|
|
text-transform: uppercase; color: var(--wd-fg); font-weight: 500;
|
|
}
|
|
.wd-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
|
|
.wd-stat svg { width: 13px; height: 13px; flex: none; }
|
|
.wd-covered { color: var(--wd-ok); }
|
|
.wd-partial { color: var(--wd-warn); }
|
|
.wd-absent { color: var(--wd-danger); }
|
|
.wd-pin { font-family: var(--wd-mono); font-size: 10px; color: var(--wd-fg-4); }
|
|
|
|
.wd-status { font-family: var(--wd-mono); font-size: 11px; flex: none; }
|
|
.wd-status-running { color: var(--wd-warn); }
|
|
.wd-status-done { color: var(--wd-ok); }
|
|
.wd-status-failed { color: var(--wd-danger); }
|
|
.wd-output {
|
|
flex-basis: 100%;
|
|
width: 100%;
|
|
font-family: var(--wd-mono); font-size: 11px; white-space: pre-wrap;
|
|
max-height: 220px; overflow: auto; margin-top: 8px;
|
|
border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px;
|
|
color: var(--wd-fg-2);
|
|
}
|