/* ============================================================================= Base Styles — Variables, Reset, Scrollbar Shared by login.html and index.html ============================================================================= */ /* ============================================================================= 1. CSS Variables ============================================================================= */ :root { /* Colors - Background */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --bg-elevated: #30363d; /* Colors - Text */ --text-primary: #f0f6fc; --text-secondary: #8b949e; --text-muted: #6e7681; /* Colors - Borders */ --border-color: #30363d; --border-light: #21262d; /* Colors - Accents (Okabe-Ito colorblind-safe palette) */ --accent-blue: #58a6ff; --accent-green: #98FF98; --accent-red: #D55E00; --accent-yellow: #d29922; --accent-purple: #a371f7; /* Colors - Trading */ --buy-color: #98FF98; --sell-color: #D55E00; /* Colors - Status */ --success: #98FF98; --danger: #D55E00; --warning: #d29922; /* Aliases used by login.html inline styles */ --accent-color: var(--accent-blue); --accent-hover: #4393e6; --profit-color: var(--accent-green); --loss-color: var(--accent-red); /* Theme-derived helpers — used in places that previously hardcoded white/black overlays. Override per theme below. */ --hover-overlay: rgba(255, 255, 255, 0.05); --hover-overlay-strong: rgba(255, 255, 255, 0.08); --scrim: rgba(0, 0, 0, 0.7); --legend-bg: rgba(22, 27, 34, 0.85); /* Chart palette — read by chart.js / journal-page.js / trade-replay.js so canvas-based charts follow the theme too. */ --chart-bg: #1a1a2e; --chart-text: #e0e0e0; --chart-grid: #2a2a4a; --chart-axis: #3a3a5a; --chart-tooltip-bg: #161b22; --chart-tooltip-border: #30363d; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --text-shadow-value: 0 1px 4px rgba(0, 0, 0, 0.75); /* Border Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* Font Sizes */ --font-2xs: 0.65rem; --font-xs: 0.75rem; --font-sm: 0.8rem; --font-md: 0.85rem; --font-base: 0.9rem; --font-lg: 1rem; --font-xl: 1.1rem; --font-2xl: 1.25rem; --font-3xl: 1.4rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* Font Families */ --font-mono: "SF Mono", "Monaco", "Inconsolata", monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; } /* ============================================================================= 1b. Light theme overrides Activated by setting `data-theme="light"` on . The bootstrap snippet in each top-level HTML file (index.html, login.html, journal.html) reads localStorage["stoprun_theme"] before paint to avoid a flash. ============================================================================= */ html[data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #f0f0ed; --bg-elevated: #dcdcd6; --text-primary: #1a1a1a; --text-secondary: #555555; --text-muted: #888888; --border-color: #cccccc; --border-light: #e0e0e0; --accent-blue: #2962ff; --accent-green: #1a8a1a; --accent-red: #B04A00; --accent-yellow: #b8860b; --accent-purple: #6f42c1; --buy-color: #1a8a1a; --sell-color: #B04A00; --success: #1a8a1a; --danger: #B04A00; --warning: #b8860b; --accent-color: var(--accent-blue); --accent-hover: #1d4fdb; --profit-color: var(--accent-green); --loss-color: var(--accent-red); --hover-overlay: rgba(0, 0, 0, 0.05); --hover-overlay-strong: rgba(0, 0, 0, 0.08); --scrim: rgba(0, 0, 0, 0.45); --legend-bg: rgba(255, 255, 255, 0.9); --chart-bg: #ffffff; --chart-text: #333333; --chart-grid: #e0e0e0; --chart-axis: #cccccc; --chart-tooltip-bg: #ffffff; --chart-tooltip-border: #cccccc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --text-shadow-value: 0 1px 3px rgba(0, 0, 0, 0.15); color-scheme: light; } html:not([data-theme="light"]) { color-scheme: dark; } /* ============================================================================= 2. Reset & Base ============================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; font-size: 14px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-color); }