fix(theseus/settings/light): map every dark-navy card to a BCH-palette surface

Screenshot showed Registries > Collision policy rows rendering as
solid dark bars in light mode — .polrow hardcoded background:#10151f
with no light override, so the whole card blob-ed dark on the white
page and the text disappeared. Same story for .segseg, .engcat,
select/input backgrounds, .ctxmenu, .themeCards etc.

The light-media block gains a proper mapping keyed to the user's
BCH palette (#0AC18E / #253A49 / #F8FDFF):

- --bg → #F8FDFF (BCH white), --ink → #253A49 (BCH dark)
- .polrow → #f4f8fb card on white; hover #eaf0f5; SELECTED row
  gets an acid-green tint via :has(input:checked) so BCDN-first
  reads as the chosen option without an ugly dark bar
- .segseg, .engcat, .themeCards, .ctxmenu, select/input all get
  the same treatment — subtle off-white surfaces on top of the
  panel, dark-navy text
- Sidebar (.side) already had a light override; refined the border
  and hover states to use rgba(37,58,73,X) so they match the ink

Verified via CDP: --bg=#F8FDFF, --ink=#253A49, .polrow color=
rgb(37,58,73), engcat bg=rgb(244,248,251), theme card bg=white.
This commit is contained in:
Local Dev 2026-09-08 18:49:53 +02:00
parent 22be28ed17
commit 83e2a83bf8

View file

@ -135,13 +135,31 @@
.note{color:var(--dim);font-size:12.5px;margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem} .note{color:var(--dim);font-size:12.5px;margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
/* light theme (placed last so these win over the dark base rules) */ /* light theme (placed last so these win over the dark base rules) */
@media (prefers-color-scheme: light){ @media (prefers-color-scheme: light){
:root{ --bg:#eef0f4; --panel:#ffffff; --line:rgba(0,0,0,.11); --ink:#1a1f28; --mut:#4a5262; --dim:#7b8494; } :root{ --bg:#F8FDFF; --panel:#ffffff; --line:rgba(37,58,73,.15); --ink:#253A49; --mut:#4a5262; --dim:#7b8494; }
.side{ background:#f6f8fb; } .side{ background:#f1f5f8; border-right-color:rgba(37,58,73,.10); }
.side a:hover{ background:rgba(0,0,0,.05); } .side a{ color:#4a5262; }
select, .ctl input, .addeng input{ background:#f1f3f7; } .side a:hover{ background:rgba(37,58,73,.06); color:#253A49; }
.track{ background:#c8cfdb; } /* Every dark-hardcoded card / control needs a light equivalent. All the
#10151f / #0e131c / #1b2330 tones map to a subtle off-white so they
still read as cards against the #F8FDFF page, with rgba(37,58,73,X)
hover tints keyed to BCH dark for consistent depth. */
.polrow{ background:#f4f8fb; color:#253A49; }
.polrow:hover{ background:#eaf0f5; }
.polrow input:checked ~ span,
.polrow:has(input:checked){ background:rgb(from var(--acid) r g b / .10); border-color:color-mix(in srgb, var(--acid) 35%, transparent); }
.segseg{ background:#eef1f6; }
.segseg .seg.on{ background:#ffffff; color:#253A49; box-shadow:inset 0 0 0 1px rgba(37,58,73,.12); }
.engcat{ background:#f4f8fb; }
.engcat .cat:hover{ background:#eaf0f5; }
select, .ctl input, .addeng input{ background:#f1f5f8; color:#253A49; }
select option{ background:#ffffff; color:#253A49; }
.track{ background:#d3dae3; }
.knob{ background:#8a93a2; } .knob{ background:#8a93a2; }
code, .ceng, .eng{ background:#eef1f6; } code, .ceng, .eng{ background:#eef2f6; color:#253A49; }
.themeCards .tc{ background:#ffffff; border-color:rgba(37,58,73,.15); }
.themeCards .tc:hover{ border-color:rgba(37,58,73,.30); }
.ctxmenu{ background:#ffffff; border-color:rgba(37,58,73,.15); color:#253A49; }
.ctxmenu .mi:hover{ background:rgba(37,58,73,.06); }
} }
</style></head> </style></head>
<body> <body>