silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(theseus/settings/light): split --acid into fill + --acid-text for text

Browse source 
BCH-teal #0AC18E is ~2.9:1 on white — great for filled backgrounds and
tints, marginal for small text. Introduce --acid-text (dark mode: same
as --acid, light mode: #253A49 BCH-dark = ~12:1 on white). Rewrote
every text usage in settings.html to var(--acid-text):

- .brand (⛓ Theseus in sidebar)
- .side a.active (selected section)
- .btn text (Check for updates / add engine)
- .engcat .cat .add:hover text
- inline <b style="color:var(--acid)"> in the Ariadne status + Update
  status renders

Fills, borders, and background tints stay var(--acid) so the BCH-green
brand splash is preserved everywhere it works. Also drops the manual
.brand override in the light-media block — no longer needed since the
variable does the job.
This commit is contained in:
Local Dev 2026-09-08 01:51:03 +02:00
parent 9238e3143d
commit 26408a1972
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
settings.html
View file

@ -2,17 +2,23 @@
<html lang="en"> <html lang="en">
<head><meta charset="utf-8"><title>Theseus — Settings</title> <head><meta charset="utf-8"><title>Theseus — Settings</title>
<style> <style>
/* --acid-text: color used for text/inline emphasis. In dark mode it
equals --acid (bright acid green, ~10:1 on the dark ground). Light
mode overrides to #253A49 (BCH dark navy) which is ~12:1 on white,
because the BCH-teal --acid (#0AC18E) only manages ~2.9:1 as text.
--acid still drives fills, borders, and background tints where a
brand-green splash is wanted. */
:root{ --bg:#0b0e14; --panel:#141a24; --line:rgba(255,255,255,.09); :root{ --bg:#0b0e14; --panel:#141a24; --line:rgba(255,255,255,.09);
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; } --ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --acid-text:#d6ff3d; }
*{box-sizing:border-box} *{box-sizing:border-box}
body{margin:0;height:100vh;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif} body{margin:0;height:100vh;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app{display:flex;height:100vh} .app{display:flex;height:100vh}
/* left sidebar menu */ /* left sidebar menu */
.side{flex:none;width:220px;background:#0e131c;border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:2px} .side{flex:none;width:220px;background:#0e131c;border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.brand{font-weight:700;color:var(--acid);font-size:15px;padding:4px 12px 16px} .brand{font-weight:700;color:var(--acid-text);font-size:15px;padding:4px 12px 16px}
.side a{display:block;padding:9px 12px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:14px;cursor:pointer} .side a{display:block;padding:9px 12px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:14px;cursor:pointer}
.side a:hover{background:#ffffff0a;color:var(--ink)} .side a:hover{background:#ffffff0a;color:var(--ink)}
.side a.active{background:rgb(from var(--acid) r g b / .12);color:var(--acid)} .side a.active{background:rgb(from var(--acid) r g b / .12);color:var(--acid-text)}
/* content */ /* content */
.content{flex:1;overflow-y:auto;padding:2.4rem 2.4rem 4rem} .content{flex:1;overflow-y:auto;padding:2.4rem 2.4rem 4rem}
section{max-width:640px} section{max-width:640px}
@ -38,14 +44,14 @@
nativeTheme.themeSource, which drives prefers-color-scheme — so pinning nativeTheme.themeSource, which drives prefers-color-scheme — so pinning
color-scheme via that media query keeps the popup in sync automatically. */ color-scheme via that media query keeps the popup in sync automatically. */
:root { color-scheme: dark; } :root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { color-scheme: light; --acid: #0AC18E; } } @media (prefers-color-scheme: light) { :root { color-scheme: light; --acid: #0AC18E; --acid-text: #253A49; } }
/* Explicit option styling — Chromium respects it in the popup on Windows. */ /* Explicit option styling — Chromium respects it in the popup on Windows. */
select option { background: #1b2330; color: var(--ink); } select option { background: #1b2330; color: var(--ink); }
@media (prefers-color-scheme: light) { select option { background: #f1f3f7; color: #1a1f28; } } @media (prefers-color-scheme: light) { select option { background: #f1f3f7; color: #1a1f28; } }
code{font-family:ui-monospace,monospace;font-size:12px;background:#0e131b;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#bfeae4} code{font-family:ui-monospace,monospace;font-size:12px;background:#0e131b;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#bfeae4}
.addeng{display:flex;gap:6px} .addeng input{flex:1;background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;outline:none} .addeng{display:flex;gap:6px} .addeng input{flex:1;background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;outline:none}
.addeng input:focus{border-color:#4b7bec} .addeng input:focus{border-color:#4b7bec}
.btn{border:1px solid color-mix(in srgb, var(--acid) 33%, transparent);background:rgb(from var(--acid) r g b / .12);color:var(--acid);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer} .btn{border:1px solid color-mix(in srgb, var(--acid) 33%, transparent);background:rgb(from var(--acid) r g b / .12);color:var(--acid-text);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
.btn:hover{background:rgb(from var(--acid) r g b / .22)} .btn:hover{background:rgb(from var(--acid) r g b / .22)}
/* segmented control — small toggle used elsewhere (kept for reuse) */ /* segmented control — small toggle used elsewhere (kept for reuse) */
.segseg{display:inline-flex;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px} .segseg{display:inline-flex;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
@ -113,7 +119,7 @@
.engcat .cat .enm{flex:1} .engcat .cat .enm{flex:1}
.engcat .cat .kind{font-size:10.5px;letter-spacing:.05em;color:var(--dim);padding:1px 6px;border:1px solid var(--line);border-radius:999px} .engcat .cat .kind{font-size:10.5px;letter-spacing:.05em;color:var(--dim);padding:1px 6px;border:1px solid var(--line);border-radius:999px}
.engcat .cat .add{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer} .engcat .cat .add{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.engcat .cat .add:hover{background:rgb(from var(--acid) r g b / .14);border-color:color-mix(in srgb, var(--acid) 33%, transparent);color:var(--acid)} .engcat .cat .add:hover{background:rgb(from var(--acid) r g b / .14);border-color:color-mix(in srgb, var(--acid) 33%, transparent);color:var(--acid-text)}
.engcat .cempty2{color:var(--dim);font-size:12.5px;padding:6px 8px} .engcat .cempty2{color:var(--dim);font-size:12.5px;padding:6px 8px}
.sw.sm{width:38px;height:22px} .sw.sm .knob{width:15px;height:15px} .sw.sm input:checked + .track .knob{transform:translateX(16px)} .sw.sm{width:38px;height:22px} .sw.sm .knob{width:15px;height:15px} .sw.sm input:checked + .track .knob{transform:translateX(16px)}
.ceng .cn{font-weight:600} .ceng .cu{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .ceng .cn{font-weight:600} .ceng .cu{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
@ -132,10 +138,6 @@
:root{ --bg:#eef0f4; --panel:#ffffff; --line:rgba(0,0,0,.11); --ink:#1a1f28; --mut:#4a5262; --dim:#7b8494; } :root{ --bg:#eef0f4; --panel:#ffffff; --line:rgba(0,0,0,.11); --ink:#1a1f28; --mut:#4a5262; --dim:#7b8494; }
.side{ background:#f6f8fb; } .side{ background:#f6f8fb; }
.side a:hover{ background:rgba(0,0,0,.05); } .side a:hover{ background:rgba(0,0,0,.05); }
/* BCH dark navy for the ⛓ Theseus brand — the BCH-teal --acid was
~2.7:1 on the light sidebar; this reads as the primary UI accent
instead of a marginal green. */
.brand{ color:#253A49; }
select, .ctl input, .addeng input{ background:#f1f3f7; } select, .ctl input, .addeng input{ background:#f1f3f7; }
.track{ background:#c8cfdb; } .track{ background:#c8cfdb; }
.knob{ background:#8a93a2; } .knob{ background:#8a93a2; }
@ -922,7 +924,7 @@
const verSuffix = r.installedVersion ? ` (v${r.installedVersion})` : ""; const verSuffix = r.installedVersion ? ` (v${r.installedVersion})` : "";
const bundledSuffix = r.bundledVersion ? ` (bundled v${r.bundledVersion})` : ""; const bundledSuffix = r.bundledVersion ? ` (bundled v${r.bundledVersion})` : "";
if (r.state === "running") { if (r.state === "running") {
arStatus.innerHTML = `Status: <b style="color:var(--acid)">running</b>${verSuffix} — every browser on this machine resolves BCDN names.`; arStatus.innerHTML = `Status: <b style="color:var(--acid-text)">running</b>${verSuffix} — every browser on this machine resolves BCDN names.`;
arStop.hidden = false; arUninstall.hidden = !r.hasUninstaller; arStop.hidden = false; arUninstall.hidden = !r.hasUninstaller;
if (r.canUpdate) arUpdate.hidden = false; if (r.canUpdate) arUpdate.hidden = false;
} else if (r.state === "stopped") { } else if (r.state === "stopped") {
@ -967,7 +969,7 @@
try { try {
const r = await C.recheckUpdate(); const r = await C.recheckUpdate();
if (r && r.updateAvailable && r.updateAvailable.version) { if (r && r.updateAvailable && r.updateAvailable.version) {
updStatus.innerHTML = `<b style="color:var(--acid)">v${r.updateAvailable.version}</b> is available — the update chip in the toolbar will offer it.`; updStatus.innerHTML = `<b style="color:var(--acid-text)">v${r.updateAvailable.version}</b> is available — the update chip in the toolbar will offer it.`;
} else { } else {
updStatus.textContent = `You're on the latest (v${(r && r.currentVersion) || "?"}).`; updStatus.textContent = `You're on the latest (v${(r && r.currentVersion) || "?"}).`;
} }