APDU list + detail: hover and the detail header follow the theme tints

- the detail header used --bg-input in dark mode (plus a light-only #dbeafe
  override), so it only matched the list selection in the light theme; it now
  uses var(--selected-bg) — the same variable as the selected row — so the two
  are in sync in both themes (light unchanged)
- .apdu-entry:hover used --bg-panel (a grey in the same family as the GET
  RESPONSE pair rows); both themes now set --hover-bg — the accent at 16%
  (dark) / 10% (light), a translucent tint that stacks with whatever the row's
  background is — and a single hover rule uses it: hovering tints the row
  blue, lighter than the selection and a different hue from the pair rows.
  The rules stay ordered .apdu-pair → :hover → .selected, so hovering the
  selected row keeps its selection colour
- Node tests pin the hover variable per theme, the hover rule (and that the
  old grey rule is gone) and the detail header's variable; 540 Python +
  80 Node tests
- SW cache simtrace-analyser-v91 (cosmetic, no version bump)
This commit is contained in:
catarrh committed 2026-10-18 11:38:02 +03:00
1 parent 119b1cd54a
commit 4a03f83459
3 files changed
+18 -4

No files matched your search

+13
View File
@@ -37,6 +37,19 @@ test('the APDU selection is a blue tint in both themes', () => {
assert.doesNotMatch(src, /--selected-bg: var\(--bg-input\)/);
});
test('the APDU hover is a slight blue tint in both themes', () => {
assert.match(src, /\.apdu-entry:hover \{ background: var\(--hover-bg\); \}/);
assert.match(src, /--hover-bg: rgba\(59, 130, 246, 0\.16\);/); // dark
assert.match(src, /--hover-bg: rgba\(59, 130, 246, 0\.10\);/); // light
// The hover must not fall back to the pair rows' grey or the selection.
assert.doesNotMatch(src, /\.apdu-entry:hover \{ background: var\(--bg-panel\); \}/);
});
test('the detail header follows the list selection in both themes', () => {
assert.match(src, /\.detail-header \{[^}]*background: var\(--selected-bg\);/);
assert.doesNotMatch(src, /\[data-theme="light"\] \.detail-header/);
});
// ── trace topbar layout ────────────────────────────────────────────────
test('the view selector sits over the side panel at the panel width', () => {