/* ---- Theme tokens (src/range-solver-prefs.js's THEME_CHOICES / Settings) ---- Three themes, one shared set of custom properties — every component is written in terms of var(--text) etc., so it re-themes automatically with no per-component overrides, the sole exception being the plotted SVG colors in hit-probability-view.js, which can't reference a custom property from a bare attribute and so read these same tokens via getComputedStyle() at draw time instead (see its own cssVar() helper). Each theme is its own plain class (not html-scoped) rather than living only on :root, for two reasons: app.js needs to swap between three named options (not just toggle one on/off), and the Settings theme-picker's own illustrative thumbnails (src/ui/theme-picker.js) reuse these exact same classes on a small scoped preview element to render a genuine, always-in-sync preview of a theme that isn't even the active one — no separate hardcoded swatch colors to keep in sync by hand. :root itself keeps a plain copy of .theme-dark's own values as a static fallback (paint before app.js's classList.add runs on the very first load); app.js always applies exactly one of the three classes below to right after, so :root's copy is never the only thing in play. */ :root { --bg: #14181c; --panel: #1b2127; --panel-raised: #222a31; --line: #2a3138; --text: #d9e0e6; --dim: #7c8790; --accent: #e8a33d; --accent-dim: #8a6327; /* Category color for Analysis (src/nav-tools.js) — Measurement reuses --accent (already the reticle logo's own color); this is the one new hue in the palette, kept clearly distinct from both --accent and the status colors below so it never reads as "success" or "warning". */ --analysis: #4fa8d8; --analysis-dim: #2c5f78; --danger: #e0605a; --ok: #5fb87a; /* Hit Probability's two spotter-corrected error ellipses (see hit-probability-view.js's cssVar() reads, and .legend-swatch- conditions/-own-precision below) — their own hues, distinct from --accent/--analysis/--danger/--ok so they never read as "the sample ellipse" or a status color. */ --conditions-error: #22d3ee; --own-precision-error: #a855f7; /* Chartist's own index.css hardcodes rgba(0,0,0,...) for gridlines, tuned for a light background — lightened here for this app's dark default (see .chart-container .ct-grid below); the two high-contrast themes redefine it again, each its own way. */ --chart-grid: rgba(217, 224, 230, 0.15); /* Text color for content painted directly on top of --accent (button backgrounds, etc.) — near-black reads fine against this theme's bright amber, but needs to flip to light or dark again per high-contrast theme below, matching each one's own accent. */ --accent-text: #1b1400; --radius: 6px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Explicit, reusable form of :root's own values above — see the shared comment block above :root for why this duplication is intentional. Keep the two in sync by hand. */ .theme-dark { --bg: #14181c; --panel: #1b2127; --panel-raised: #222a31; --line: #2a3138; --text: #d9e0e6; --dim: #7c8790; --accent: #e8a33d; --accent-dim: #8a6327; --analysis: #4fa8d8; --analysis-dim: #2c5f78; --danger: #e0605a; --ok: #5fb87a; --conditions-error: #22d3ee; --own-precision-error: #a855f7; --chart-grid: rgba(217, 224, 230, 0.15); --accent-text: #1b1400; } /* Light background, dark text — maximum contrast in direct sunlight, closer to a printed page than the app's own dark palette. */ .theme-high-contrast-light { --bg: #ffffff; --panel: #ffffff; --panel-raised: #e8e8e8; --line: #999999; --text: #000000; --dim: #333333; --accent: #b34700; --accent-dim: #7a3000; --analysis: #004a99; --analysis-dim: #00337a; --danger: #b30000; --ok: #006622; /* Darker/deeper than the dark theme's own values — those are pastel enough to nearly wash out against a white background. */ --conditions-error: #0e7490; --own-precision-error: #7e22ce; --chart-grid: rgba(0, 0, 0, 0.15); --accent-text: #ffffff; } /* Pure black background, pure white text — the same "maximum contrast" idea as the light theme above, but for low-light/night use instead of direct sunlight: no bright white panels to bloom or ruin dark adaptation. Every hue pushed brighter/more saturated than the regular dark theme's own (which is deliberately soft) so it still reads as "high contrast" against pure black, not just "the usual dark theme". */ .theme-high-contrast-dark { --bg: #000000; --panel: #000000; --panel-raised: #1c1c1c; --line: #6b6b6b; --text: #ffffff; --dim: #b3b3b3; --accent: #ffb300; --accent-dim: #c98f00; --analysis: #5ac8ff; --analysis-dim: #2f83ab; --danger: #ff5c5c; --ok: #4ade80; --conditions-error: #2dd4e8; --own-precision-error: #c084fc; --chart-grid: rgba(255, 255, 255, 0.22); /* --accent is bright/light here too (same reasoning as the light theme's own --accent-text), so button text needs to go dark, not white. */ --accent-text: #1a1200; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); } body { -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; } h1 { font-size: 18px; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); } h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); } h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 8px; } p { margin: 0 0 10px; line-height: 1.5; } a { color: var(--accent); } .field { margin-bottom: 14px; } .field label { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-bottom: 4px; } .field input[type="range"] { width: 100%; } .field input[type="number"], .field select { width: 100%; background: var(--panel-raised); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); padding: 6px 8px; font-family: inherit; font-size: 13px; } /* A field driven by a library selection (a rifle's cartridge, e.g.) — still shows its value, just not editable while the selection governs it. */ .field input:disabled, .field select:disabled { opacity: 0.6; cursor: not-allowed; } /* Compact number box paired with a range slider — sits inline in the label row instead of taking the full field width. */ .field label input.val-input { width: 72px; color: var(--accent); font-variant-numeric: tabular-nums; padding: 2px 6px; font-size: 12px; margin-left: 8px; } .hint { font-size: 11px; color: var(--dim); margin-top: 3px; } .hint.warning { color: var(--danger); } /* Pasted-in-full Cd-Mach table (src/ui/arsenal/bullet-form.js) — a textarea instead of a single-line input, monospace so pasted columns of numbers stay visually aligned. */ .field textarea.cd-table-input { width: 100%; background: var(--panel-raised); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; } /* The instructions/example above it are one translated string with embedded newlines — preserve them instead of collapsing to one line. */ .cd-table-instructions { white-space: pre-line; } /* Small inline flag next to a bullet's/rifle's name (src/views/ arsenal-view.js) — this entry has local changes not reflected in any exported file yet. */ .unsaved-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; } /* Arsenal (src/views/arsenal-view.js): one row per saved bullet/rifle/ cartridge, with its Edit/Delete buttons pinned to the right. */ .arsenal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .arsenal-row:last-of-type { border-bottom: none; } .arsenal-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .arsenal-row-actions button { padding: 5px 10px; font-size: 12px; } .arsenal-row-actions select { padding: 4px 6px; font-size: 12px; width: auto; } /* A rifle row with saved cartridges packs up to six controls into .arsenal-row-actions (cartridge picker, Set active, comparison toggle, Save to file, Edit, Delete) — more than a phone-width row can hold beside the name/description on one line. Below the same breakpoint the rest of the shell switches to its mobile layout at (see layout.css), give the row its own line and let its actions wrap instead of overflowing the card. */ @media (max-width: 780px) { .arsenal-row { flex-direction: column; align-items: stretch; } .arsenal-row-actions { flex-wrap: wrap; } } .arsenal-form-actions { display: flex; gap: 8px; margin-top: 12px; } /* Caliber/manufacturer filters above the rifle/bullet lists (src/views/ arsenal-view.js) — side by side on desktop; flex-wrap alone (no media query needed) drops each field to its own full-width row once they no longer fit side by side, which is exactly what a phone-width screen needs. */ .arsenal-filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .arsenal-filter-row .field { flex: 1 1 180px; margin-bottom: 0; } .mass-dual-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Specificity has to beat .field input[type="number"] (width: 100%) above, or the two number inputs stretch full-width and stack instead of sitting side by side. */ .field .mass-dual-inputs input[type="number"] { width: 90px; } /* caliber-field.js's own select+number pair — same reasoning/specificity fix as .mass-dual-inputs above, just with a select (width:100% by default too) added to the mix instead of a second number input. */ .caliber-dual-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .field .caliber-dual-inputs select { flex: 1 1 160px; width: auto; } .field .caliber-dual-inputs input[type="number"] { flex: 0 0 90px; width: 90px; } .checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; margin-bottom: 4px; } .checkbox-field input[type="checkbox"] { width: auto; margin: 0; } /* ---- Theme picker (src/ui/theme-picker.js, Settings) ---- Each .theme-option-swatch below carries its own .theme-* class (see base.css's :root-adjacent theme block), so its children reading var(--bg)/var(--accent)/etc. resolve to THAT theme's colors, not the page's actual active one — a genuine, always-accurate preview, not a set of hand-picked swatch colors. */ .theme-picker { display: flex; gap: 12px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; /* room for the scrollbar so it doesn't sit flush under the swatches */ } .theme-option { all: unset; box-sizing: border-box; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: calc(var(--radius) + 4px); border: 2px solid transparent; cursor: pointer; } .theme-option:hover { background: var(--panel-raised); } .theme-option.active { border-color: var(--accent); } .theme-option-swatch { display: flex; flex-direction: column; gap: 5px; width: 76px; height: 50px; padding: 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); position: relative; overflow: hidden; } .theme-swatch-topbar { display: block; width: 55%; height: 6px; border-radius: 2px; background: var(--panel-raised); } .theme-swatch-accent { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); position: absolute; top: 7px; right: 7px; } .theme-swatch-line { display: block; width: 80%; height: 4px; border-radius: 2px; background: var(--dim); } .theme-swatch-line-short { width: 45%; } .theme-option-label { font-size: 11px; color: var(--dim); text-align: center; } .theme-option.active .theme-option-label { color: var(--text); font-weight: 600; } .muzzle-velocity-temp-details { margin: 10px 0 0 24px; padding-left: 12px; border-left: 2px solid var(--line); } .column-toggles { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; margin-bottom: 14px; } .column-toggles .checkbox-field { margin-bottom: 0; } .bullet-library-info { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 14px; line-height: 1.5; } /* Reusable input-grouping section (Rifle, Cartridge, Bullet, Atmosphere). `.nested` is a section inside another section (Bullet inside Cartridge) — a raised fill instead of its own border/margin so it reads as part of the parent rather than a sibling box. */ .input-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; } .input-section:last-child { margin-bottom: 0; } .input-section .field:last-child { margin-bottom: 0; } .input-section.nested { background: var(--panel-raised); border: none; padding: 12px; margin: 12px 0 0; } /* A standalone action button following a group of fields — inside a .input-section (Trajectory's "Add rifle/bullet to arsenal") or a plain .card (BC Estimator's "Estimate", Settings' "Reset to metric defaults"). A bare