114 lines
2.9 KiB
CSS
114 lines
2.9 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;
|
|
}
|
|
|
|
* { 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); }
|