Spaces:
Running
Running
File size: 3,132 Bytes
830f2f5 45fb44a 830f2f5 45fb44a 830f2f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | @import "./fonts.css";
/* Design tokens + shared primitives. Component styles live in their .vue files. */
:root {
--bg: #0b0b0c;
--surface: #141416;
--surface-2: #1c1c1f;
--line: #262629;
--line-strong: #3a3a3f;
--text: #f2eee6;
--text-2: #b8b3a8;
--text-3: #77736b;
/* Change --accent to re-theme; everything else derives from it. */
--accent: #d7ff3b;
--accent-ink: #0b0b0c;
--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
--accent-hover: color-mix(in srgb, var(--accent) 80%, white);
--radius: 4px;
/* sticky header height; the docked panel and sticky table heads sit under it */
--header-h: 57px;
/* docked detail panel: --panel is the room it takes, 0 while closed */
--panel-w: 460px;
--panel: 0px;
--font: "Inter Tight Variable", ui-sans-serif, system-ui, sans-serif;
--font-display: "Big Shoulders Display Variable", "Inter Tight Variable", sans-serif;
--font-mono: "JetBrains Mono Variable", ui-monospace, Menlo, monospace;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
color-scheme: dark;
}
html.panel-open { --panel: var(--panel-w); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* The page itself has no visible scrollbar — <ScrollProgress> in the header shows position
instead, and the layout no longer shifts by the scrollbar's width. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* Inner scroll areas (e.g. the drawer) get thin, themed scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 3px solid var(--bg);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
/* Shared primitives */
.mono { font-family: var(--font-mono); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 16px;
border: 1px solid var(--line-strong); border-radius: var(--radius);
background: transparent; color: var(--text);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
text-decoration: none; cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--text-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|