diff --git a/web/static/css/theme-base.css b/web/static/css/theme-base.css index 23e51fa..2bad8c7 100644 --- a/web/static/css/theme-base.css +++ b/web/static/css/theme-base.css @@ -1,13 +1,16 @@ -/* theme-base.css --------------------------------------------------------- */ -/* 1) Core tokens (names stay stable; theme files only change values) */ -:root { +/* static/css/theme-base.css + Theme infrastructure for non-classic themes only. + When Classic is selected, this file effectively does nothing. */ + +/* 1) Tokens for non-classic themes (put variables on so they are scoped) */ +html[data-theme!="classic"] { --bg: #0b0f14; --bg-elev: #121821; --text: #e6edf3; --muted: #9fb0c2; --card: #0f141b; --border: #223040; - --accent: #2f6cab; /* links, primary buttons */ + --accent: #2f6cab; --accent-contrast: #ffffff; --accent-soft: rgba(47,108,171,.14); --success: #38b87c; @@ -17,16 +20,23 @@ --radius: 14px; } -/* 2) Global page surfaces */ -html, body { +/* 2) Global page surfaces — only when NOT classic */ +html[data-theme!="classic"], +html[data-theme!="classic"] body { background: var(--bg); color: var(--text); } -body.themed-bg { background: var(--bg); } /* keeps your existing class working */ -/* 3) Cards / panels (the boxes your Search History & “Illustration of the Day” use) */ -.result-wrap .result-toolbar, -.card, .panel, .box, .well, .modal-content { +/* Preserve optional class if non-classic themes want a flat bg */ +html[data-theme!="classic"] body.themed-bg { background: var(--bg); } + +/* 3) Cards / panels */ +html[data-theme!="classic"] .result-wrap .result-toolbar, +html[data-theme!="classic"] .card, +html[data-theme!="classic"] .panel, +html[data-theme!="classic"] .box, +html[data-theme!="classic"] .well, +html[data-theme!="classic"] .modal-content { background: var(--card); color: var(--text); border: 1px solid var(--border); @@ -35,55 +45,71 @@ body.themed-bg { background: var(--bg); } /* keeps your existing class working * } /* 4) Inputs */ -input[type="text"], input[type="search"], input[type="number"], select, -textarea, .form-control { +html[data-theme!="classic"] input[type="text"], +html[data-theme!="classic"] input[type="search"], +html[data-theme!="classic"] input[type="number"], +html[data-theme!="classic"] select, +html[data-theme!="classic"] textarea, +html[data-theme!="classic"] .form-control { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; } -input::placeholder, textarea::placeholder { color: var(--muted); } +html[data-theme!="classic"] input::placeholder, +html[data-theme!="classic"] textarea::placeholder { color: var(--muted); } -/* 5) Pills/filters (your Subject / Scripture / Source chips) */ -.pill, .subject-pill, .badge, .tag { +/* 5) Pills/filters */ +html[data-theme!="classic"] .pill, +html[data-theme!="classic"] .subject-pill, +html[data-theme!="classic"] .badge, +html[data-theme!="classic"] .tag { background: var(--accent-soft); color: var(--text); border: 1px solid var(--border); border-radius: 999px; } -.pill.is-active, .subject-pill.is-active { background: var(--accent); color: var(--accent-contrast); } +html[data-theme!="classic"] .pill.is-active, +html[data-theme!="classic"] .subject-pill.is-active { + background: var(--accent); + color: var(--accent-contrast); +} /* 6) Buttons */ -.btn, .button { +html[data-theme!="classic"] .btn, +html[data-theme!="classic"] .button { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; } -.btn-primary, .button.primary, .btn.btn-primary { +html[data-theme!="classic"] .btn-primary, +html[data-theme!="classic"] .button.primary, +html[data-theme!="classic"] .btn.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; } -.btn-secondary { background: var(--bg-elev); color: var(--text); } -.btn:hover { filter: brightness(1.06); } +html[data-theme!="classic"] .btn-secondary { background: var(--bg-elev); color: var(--text); } +html[data-theme!="classic"] .btn:hover { filter: brightness(1.06); } /* 7) Links & focus */ -a { color: var(--accent); } -a:hover { text-decoration: underline; } -:focus { outline: 2px solid var(--accent); outline-offset: 2px; } +html[data-theme!="classic"] a { color: var(--accent); } +html[data-theme!="classic"] a:hover { text-decoration: underline; } +html[data-theme!="classic"] :focus { outline: 2px solid var(--accent); outline-offset: 2px; } -/* 8) Tables (if any) */ -table { border-color: var(--border); } -th, td { border-color: var(--border); } -thead th { background: var(--bg-elev); } +/* 8) Tables */ +html[data-theme!="classic"] table { border-color: var(--border); } +html[data-theme!="classic"] th, +html[data-theme!="classic"] td { border-color: var(--border); } +html[data-theme!="classic"] thead th { background: var(--bg-elev); } -/* 9) Alerts / statuses */ -.alert-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text); } -.alert-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); } -.alert-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--text); } +/* 9) Alerts */ +html[data-theme!="classic"] .alert-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text); } +html[data-theme!="classic"] .alert-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); } +html[data-theme!="classic"] .alert-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--text); } -/* 10) Small utilities */ -.text-muted { color: var(--muted); } -.border { border: 1px solid var(--border); } -.card-round { border-radius: var(--radius); } \ No newline at end of file +/* 10) Utilities */ +html[data-theme!="classic"] .text-muted { color: var(--muted); } +html[data-theme!="classic"] .border { border: 1px solid var(--border); } +html[data-theme!="classic"] .card-round { border-radius: var(--radius); } \ No newline at end of file