john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glas Theme Coming Next

Browse Source
This commit is contained in:
John OReilly
2026-03-13 16:05:38 -04:00
parent ac9420c812
commit 591e4155fc
4 changed files with 388 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
SVS-MSP-Calculator-light.css
View File

@@ -8,11 +8,11 @@
/* ── DESIGN TOKENS (light overrides) ───────────────────────────── */
:root {
--ink: #2c2825; /* soft near-black — readable without harshness */
--paper: #f4f2ed; /* warm off-white page background */
--paper: #ece7dc; /* warm sand/khaki page tone */
--accent: #1a6a98; /* blue — good for buttons, kept full strength */
--muted: #6b6360; /* mid-grey for secondary text */
--border: #d0cdc7; /* soft warm-grey borders */
--card: #ebe8e2; /* off-white card background */
--border: #d2cbc0; /* warm border to match khaki palette */
--card: #f1ebdf; /* general light-mode utility surface */
--green: #217045; /* darker green — accessible on white */
--amber: #a05f00; /* darker amber — accessible on white */
}
@@ -29,13 +29,71 @@ body {
to keep the SVG logo (fill="#0c0c0c" text) legible.
─────────────────────────────────────────────────────────────────── */
.top-bar {
background: #e8e4db !important;
background: #e3ddd2 !important;
border-bottom-color: rgba(0, 0, 0, 0.09) !important; /* replace strong blue stripe with soft warm separator */
}
/* ── SECTION CARDS ───────────────────────────────────────────────── */
.section {
background: #faf9f5 !important; /* warm white — less stark than pure white on cream background */
background: #f5f2ea !important; /* warm cream — floats above khaki paper */
}
/* ── SPLIT LIGHT-MODE SURFACES ─────────────────────────────────────
Keep sections as the main content cards.
Quote settings = warmer utility panel.
Live quote = cooler summary panel, including the mobile sheet.
*/
.quote-settings-bar {
background: #ebe1d2 !important;
border-color: #d8cab8 !important;
}
.qs-divider {
background: #d6c8b7 !important;
}
.qs-fee-input-wrap,
.qs-fee-dollar,
.qs-fee-input {
background: #f6f0e6 !important;
}
.sidebar {
background: #edf3f6 !important;
border-color: #cfdae2 !important;
}
.sidebar-utility .btn-reset-quote,
.mobile-panel-actions .btn-reset-quote {
background: #edf3f6 !important;
border-color: #cfdae2 !important;
}
.sidebar-body {
background: #f3f7f9 !important;
}
.export-wrap {
background: #edf3f6 !important;
border-top: 1px solid #d8e2e8 !important;
}
.mobile-panel-sheet {
background: #edf3f6 !important;
border-top-color: #cfdae2 !important;
}
.mobile-panel-close-row {
background: #edf3f6 !important;
border-bottom-color: #d8e2e8 !important;
}
.mobile-panel-actions {
background: #edf3f6 !important;
border-bottom-color: #d8e2e8 !important;
}
.mobile-panel-sheet .sidebar {
background: transparent !important;
}
.mobile-panel-sheet .sidebar-body {
background: #f3f7f9 !important;
}
.confirm-modal-card {
background: #f5f2ea !important;
}
.confirm-btn-secondary:hover {
background: rgba(0, 0, 0, 0.04) !important;
}
/* ── CHEVRON PILL — swap white-alpha tint for dark-alpha ─────────── */
@@ -73,12 +131,12 @@ body {
/* Dark mode steppers blend in naturally. Light mode needs explicit lift:
white surfaces stand off the warm card bg; accent symbols tie to brand. */
.step-btn {
background: #ffffff !important;
border-color: #b8b4ae !important; /* stronger than --border #d0cdc7 for crispness */
background: #faf8f3 !important; /* soft cream — not stark white */
border-color: #b8b4ae !important; /* stronger than --border for crispness */
color: var(--accent) !important; /* accent blue +/- symbols instead of muted grey */
}
.step-btn:hover {
background: #f0ede7 !important; /* warm tint matches section card on hover */
background: #ede8de !important; /* warm tint matches khaki family on hover */
border-color: var(--accent) !important;
color: var(--accent) !important;
}
@@ -88,7 +146,7 @@ body {
color: #fff !important;
}
.num-input {
background: #ffffff !important;
background: #faf8f3 !important; /* soft cream — matches step buttons */
border-color: #b8b4ae !important;
}
.num-input:focus {
@@ -98,7 +156,7 @@ body {
/* ── ADDON ROW SELECTED ──────────────────────────────────────────── */
.addon-row.selected {
background: #dff0fb !important;
background: #daedf8 !important;
border-color: var(--accent) !important;
box-shadow: inset 3px 0 0 0 var(--accent) !important;
}
@@ -111,7 +169,28 @@ body {
/* ── FEATURE CARDS ───────────────────────────────────────────────── */
.feature-card {
background: #f0ede7 !important;
background: #e9e4da !important;
}
/* ── SIDEBAR / SUMMARY TEXT ────────────────────────────────────────
Base dark theme hardcodes a few bright values for money and labels.
In light mode those need to return to dark text so the desktop
sidebar and the responsive mobile sheet remain readable.
*/
.sidebar-line .val {
color: var(--ink) !important;
}
.sidebar-mrr {
color: var(--ink) !important;
}
.vs-svs-label {
color: var(--ink) !important;
}
.vs-val-accent {
color: var(--accent) !important;
}
.vs-td-muted {
color: var(--muted) !important;
}
/* ── NUDGE BANNER ────────────────────────────────────────────────── */
@@ -131,7 +210,10 @@ body {
}
/* ── VS COMPARISON ───────────────────────────────────────────────── */
.vs-comparison-wrap { background: rgba(0, 0, 0, 0.025) !important; }
.vs-comparison-wrap {
background: #e5edf2 !important;
border-color: #cfdae2 !important;
}
.vs-save-green td { background: rgba(39, 174, 96, 0.10) !important; }
.vs-save-amber td { background: rgba(210, 120, 30, 0.09) !important; }