1cd1389408
Remove hardcoreMode, setModeOnly, and bossTeamMatch toggles which had no mechanical impact on the tracker. Replace them with a customRules markdown field so users can document their own rules (especially useful for genlockes). Add react-markdown + remark-gfm for rendering and @tailwindcss/typography for prose styling. The custom rules display is collapsible and hidden by default. Also simplifies the BossDefeatModal by removing the Lost result and attempts counter, and always shows boss team size in the level cap bar. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
132 lines
3.9 KiB
CSS
132 lines
3.9 KiB
CSS
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
/* ── Geist font family (variable, self-hosted) ─────────────────── */
|
|
|
|
@font-face {
|
|
font-family: 'Geist Sans';
|
|
src: url('/fonts/GeistSans-Variable.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Geist Mono';
|
|
src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Tailwind v4 theme tokens ──────────────────────────────────── */
|
|
|
|
@theme {
|
|
/* Typography */
|
|
--font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
|
|
|
|
/* Brand surfaces (dark-first) */
|
|
--color-surface-0: #0d1117;
|
|
--color-surface-1: #161b22;
|
|
--color-surface-2: #1c2128;
|
|
--color-surface-3: #21262d;
|
|
--color-surface-4: #282e36;
|
|
|
|
/* Brand accent (steel blue from logo) */
|
|
--color-accent-50: #e8f4fa;
|
|
--color-accent-100: #c5e3f2;
|
|
--color-accent-200: #9dcde6;
|
|
--color-accent-300: #7eb0ce;
|
|
--color-accent-400: #5c95b8;
|
|
--color-accent-500: #4a7d9e;
|
|
--color-accent-600: #395e73;
|
|
--color-accent-700: #2d4a5c;
|
|
--color-accent-800: #1f3340;
|
|
--color-accent-900: #142129;
|
|
|
|
/* Text on dark */
|
|
--color-text-primary: #e6edf3;
|
|
--color-text-secondary: #9198a1;
|
|
--color-text-tertiary: #8b949e;
|
|
--color-text-muted: #8b949e;
|
|
--color-text-link: #7eb0ce;
|
|
|
|
/* Borders */
|
|
--color-border-default: rgba(255, 255, 255, 0.08);
|
|
--color-border-muted: rgba(255, 255, 255, 0.04);
|
|
--color-border-accent: rgba(126, 176, 206, 0.3);
|
|
|
|
/* Status (tuned for dark surfaces) */
|
|
--color-status-alive: #2ea043;
|
|
--color-status-alive-bg: rgba(46, 160, 67, 0.15);
|
|
--color-status-dead: #da3633;
|
|
--color-status-dead-bg: rgba(218, 54, 51, 0.15);
|
|
--color-status-active: #3fb950;
|
|
--color-status-active-bg: rgba(63, 185, 80, 0.15);
|
|
--color-status-completed: #58a6ff;
|
|
--color-status-completed-bg: rgba(88, 166, 255, 0.15);
|
|
--color-status-failed: #f85149;
|
|
--color-status-failed-bg: rgba(248, 81, 73, 0.15);
|
|
}
|
|
|
|
@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
|
|
|
|
/* ── Light mode overrides ─────────────────────────────────────── */
|
|
|
|
html[data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
/* Surfaces */
|
|
--color-surface-0: #ffffff;
|
|
--color-surface-1: #f6f8fa;
|
|
--color-surface-2: #eef1f4;
|
|
--color-surface-3: #d8dee4;
|
|
--color-surface-4: #ced5dc;
|
|
|
|
/* Accent (darkened for text contrast on light surfaces) */
|
|
--color-accent-200: #245f7e;
|
|
--color-accent-300: #1a5068;
|
|
--color-accent-400: #2d6a89;
|
|
|
|
/* Text */
|
|
--color-text-primary: #1f2328;
|
|
--color-text-secondary: #656d76;
|
|
--color-text-tertiary: #596069;
|
|
--color-text-muted: #596069;
|
|
--color-text-link: #1a5068;
|
|
|
|
/* Borders */
|
|
--color-border-default: rgba(0, 0, 0, 0.15);
|
|
--color-border-muted: rgba(0, 0, 0, 0.08);
|
|
--color-border-accent: rgba(57, 94, 115, 0.35);
|
|
|
|
/* Status (adjusted for light surfaces) */
|
|
--color-status-alive: #1a7f37;
|
|
--color-status-alive-bg: rgba(26, 127, 55, 0.1);
|
|
--color-status-dead: #cf222e;
|
|
--color-status-dead-bg: rgba(207, 34, 46, 0.1);
|
|
--color-status-active: #116b2b;
|
|
--color-status-active-bg: rgba(17, 107, 43, 0.08);
|
|
--color-status-completed: #0969da;
|
|
--color-status-completed-bg: rgba(9, 105, 218, 0.1);
|
|
--color-status-failed: #cf222e;
|
|
--color-status-failed-bg: rgba(207, 34, 46, 0.1);
|
|
}
|
|
|
|
/* ── Base layer ────────────────────────────────────────────────── */
|
|
|
|
@layer base {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-0 text-text-primary font-sans antialiased;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-accent-600/50 text-white;
|
|
}
|
|
}
|