b596b2d608
UI: - Editor tab strip above the report with per-spec scoping (sidebar tree, results, source, status counts, hero copy); cookie-persisted active spec - Status pill + workers / headed overflow menu moved from topbar into the editor bar to slim the global chrome - Summary stripe and pending-preview body so the report never lands empty - Tag bar with first-6 + "+N more" + clear; auto-run first idle test on load - Mobile drawer for the test explorer; keyboard shortcuts overlay (?) - Skipped + failed sample tests with proper icons / step rendering Tabs: - Network tab: public git.levkin.ca repos rendered as Playwright-style GET ... 200 rows with expandable JSON bodies and repo links - Trace tab: career timeline as a Gantt-style waterfall - Console tab: live run events; Source tab regenerates per active spec Theming: - Wire up high-contrast (WCAG AAA) theme: cycle dark → light → hc → dark, widen theme cookie regex to accept "hc", add HC overrides for syntax tokens and a few hardcoded "text-on-accent" sites in app.css Testing: - Add @playwright/test dev dependency + playwright.config.ts on port 3173 - tests/portfolio.spec.ts: 37 specs across 12 describe blocks - scripts/fetch-gitea-repos.mjs to refresh giteaRepos from the Gitea API Docs / housekeeping: - README rewritten to reflect editor strip, network tab, HC theme, test runner, and updated project structure - IDEAS.md trimmed to remaining roadmap; shipped items removed - .gitignore ignores stray PDFs at repo root (canonical resume in assets/) - Add assets/ilia-dobkin-resume.pdf as the canonical resume binary Co-authored-by: Cursor <cursoragent@cursor.com>
159 lines
4.5 KiB
CSS
159 lines
4.5 KiB
CSS
/* base.css — design tokens (Playwright trace viewer + VS Code dark+) */
|
|
:root {
|
|
/* Type */
|
|
--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-base: 14px;
|
|
--text-md: 15px;
|
|
--text-lg: 18px;
|
|
--text-xl: 22px;
|
|
--text-2xl: 30px;
|
|
--text-3xl: 44px;
|
|
|
|
--radius-sm: 4px;
|
|
--radius: 6px;
|
|
--radius-lg: 10px;
|
|
|
|
/* Easing */
|
|
--ease: cubic-bezier(.2,.7,.2,1);
|
|
|
|
/* Status semantic */
|
|
--pass: #4ec9b0; /* playwright/teal-green */
|
|
--pass-2:#2ea889;
|
|
--fail: #f48771;
|
|
--skip: #d7ba7d;
|
|
--info: #569cd6;
|
|
--run: #4ec9b0;
|
|
}
|
|
|
|
/* Dark (default) — Playwright trace viewer / VS Code dark+ */
|
|
:root[data-theme='dark'] {
|
|
--bg: #1e1e1e;
|
|
--bg-2: #181818;
|
|
--bg-3: #252526;
|
|
--panel: #1f1f1f;
|
|
--panel-2: #232323;
|
|
--line: #2d2d30;
|
|
--line-2: #3c3c3c;
|
|
--text: #e6e6e6;
|
|
--text-2: #c8c8c8;
|
|
--text-3: #9da0a4;
|
|
--text-4: #6e7177;
|
|
--accent: #4ec9b0;
|
|
--selection: #264f78;
|
|
--shadow: 0 2px 8px rgba(0,0,0,.4);
|
|
--hover: rgba(255,255,255,.04);
|
|
--active: rgba(255,255,255,.07);
|
|
--kbd-bg: #2d2d30;
|
|
--tag-bg: #2a2d2e;
|
|
--tag-fg: #9cdcfe;
|
|
--green-arrow: #4ec9b0;
|
|
--topbar-bg: #2d2d30;
|
|
--statusbar-bg: #007acc;
|
|
--statusbar-fg: #ffffff;
|
|
}
|
|
|
|
/* Light */
|
|
:root[data-theme='light'] {
|
|
--bg: #ffffff;
|
|
--bg-2: #f3f3f3;
|
|
--bg-3: #ececec;
|
|
--panel: #ffffff;
|
|
--panel-2: #f8f8f8;
|
|
--line: #e6e6e6;
|
|
--line-2: #d4d4d4;
|
|
--text: #1f1f1f;
|
|
--text-2: #393939;
|
|
--text-3: #616161;
|
|
--text-4: #8a8a8a;
|
|
--accent: #0c8a6f;
|
|
--pass: #098e6a;
|
|
--pass-2: #0c8a6f;
|
|
--fail: #c72e22;
|
|
--skip: #b07c1f;
|
|
--info: #2169b8;
|
|
--selection:#add6ff;
|
|
--shadow: 0 2px 8px rgba(0,0,0,.08);
|
|
--hover: rgba(0,0,0,.04);
|
|
--active: rgba(0,0,0,.06);
|
|
--kbd-bg: #ececec;
|
|
--tag-bg: #e8f0fe;
|
|
--tag-fg: #1a73e8;
|
|
--green-arrow: #098e6a;
|
|
--topbar-bg: #f3f3f3;
|
|
--statusbar-bg: #007acc;
|
|
--statusbar-fg: #ffffff;
|
|
}
|
|
|
|
/* High Contrast — WCAG AAA (every text token ≥ 7:1 against --bg).
|
|
* Colors picked from the Windows / VS Code HC palette: pure black canvas,
|
|
* pure-white prose, yellow as the universal accent, lime/red/cyan for
|
|
* pass/fail/info so the three are still distinguishable for protanopia. */
|
|
:root[data-theme='hc'] {
|
|
--bg: #000000;
|
|
--bg-2: #000000;
|
|
--bg-3: #0a0a0a;
|
|
--panel: #000000;
|
|
--panel-2: #0a0a0a;
|
|
--line: #ffffff;
|
|
--line-2: #ffffff;
|
|
--text: #ffffff; /* 21:1 */
|
|
--text-2: #ffffff; /* 21:1 — no muting; AAA prose */
|
|
--text-3: #e6e6e6; /* 18:1 */
|
|
--text-4: #c0c0c0; /* 12.6:1 */
|
|
--accent: #ffff00; /* 19.6:1 — the one yellow */
|
|
--pass: #00ff00; /* 15.3:1 */
|
|
--pass-2: #00ff00;
|
|
--fail: #ff8585; /* 9.5:1 */
|
|
--skip: #ffd700; /* 16.4:1 */
|
|
--info: #7fd5ff; /* 11.7:1 */
|
|
--run: #00ff00;
|
|
--selection:#ffff00; /* paired with black text via override below */
|
|
--shadow: 0 0 0 1px #ffffff;
|
|
--hover: rgba(255,255,255,.18);
|
|
--active: rgba(255,255,255,.30);
|
|
--kbd-bg: #000000;
|
|
--tag-bg: #000000;
|
|
--tag-fg: #ffff00;
|
|
--green-arrow: #00ff00;
|
|
--topbar-bg: #000000;
|
|
--statusbar-bg: #ffff00;
|
|
--statusbar-fg: #000000;
|
|
}
|
|
:root[data-theme='hc'] ::selection { background: #ffff00; color: #000000; }
|
|
|
|
/* AAA also requires every interactive control to expose a visible focus
|
|
* indicator; force a 3px yellow outline on every focused element in HC,
|
|
* overriding the `outline: 0` declarations sprinkled through app.css. */
|
|
:root[data-theme='hc'] :focus-visible {
|
|
outline: 3px solid #ffff00 !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-base);
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
::selection { background: var(--selection); color: var(--text); }
|
|
button { font: inherit; color: inherit; }
|
|
input { font: inherit; color: inherit; }
|
|
a { color: inherit; text-decoration: none; }
|
|
code, pre, .mono { font-family: var(--font-mono); }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }
|