diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-10-06 00:05:49 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-10-06 00:05:49 +0200 |
| commit | f6563f22a9a0c9d876f80e8f758b902dcc3bec78 (patch) | |
| tree | 5b7fc20b153a7ba6c172de8bbb32a743ed5e70f7 /src/styles/tokens.css | |
| parent | 3dccdc1d11845edabe238e5cfd9a175c3dae208e (diff) | |
Restyle to a flat Miniflux-like design
- hairline separators instead of bordered rows, square corners, no shadows
- white background, system font stack, slimmer headings
- pine green accent; amber warn ramp carries the attention marks (due/late/mid)
- no hover backgrounds: hover is color/fill-state only
- reserve bold nav tab width and the scrollbar gutter so navigation never shifts layout
Diffstat (limited to 'src/styles/tokens.css')
| -rw-r--r-- | src/styles/tokens.css | 22 |
1 files changed, 10 insertions, 12 deletions
diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 4ab1f05..e60a00e 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -1,26 +1,24 @@ @layer tokens { :root { --white: oklch(1 0 0); - --bg: oklch(0.97 0.006 70); - --nav-height: 3rem; + --font-sans: + system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, sans-serif; + --nav-height: 2.75rem; + --bg: var(--white); --surface: var(--white); - --surface-hover: oklch(from var(--accent) 0.99 0.008 h); - --border: oklch(0.91 0.006 70); + --border: oklch(0.87 0.008 70); --text: oklch(0.25 0.006 55); - --text-secondary: oklch(0.58 0.01 50); + --text-secondary: oklch(0.55 0.01 50); - --accent: oklch(0.66 0.12 30); + --accent: oklch(0.52 0.09 165); --accent-hover: oklch(from var(--accent) calc(l - 0.06) c h); + --warn: oklch(0.58 0.11 70); + --warn-bg: oklch(from var(--warn) l c h / 0.12); --success: oklch(0.72 0.07 140); --danger: oklch(0.6 0.16 28); - - --shadow: oklch(from var(--text) l c h / 0.06); - --shadow-accent: oklch(from var(--accent) l c h / 0.1); - --shadow-accent-focus: oklch(from var(--accent) l c h / 0.15); - --shadow-accent-lg: oklch(from var(--accent) l c h / 0.2); --danger-bg: oklch(from var(--danger) l c h / 0.08); - --danger-hover-bg: oklch(from var(--danger) l c h / 0.1); } } |