fix: settings page CSS — selected card bg and toggle switch thumb

- Replace bg-accent/10 with bg-accent-muted on selected radio cards
  (opacity modifiers on CSS variable colors are silently dropped by
  UnoCSS, causing full-opacity solid blue backgrounds)
- Add explicit left-0.5 to toggle switch thumb and set off-state to
  translate-x-0 — without an explicit left the browser auto-placed the
  thumb 18px inside the track, causing 14px overflow when translated on
This commit is contained in:
pyr0ball 2026-06-02 11:54:35 -07:00
parent 92d7c21530
commit 25c33ea273

View file

@ -27,7 +27,7 @@
:class="[
'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left',
prefs.entry_point_style === opt.value
? 'border-accent bg-accent/10 text-accent'
? 'border-accent bg-accent-muted text-accent'
: 'border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
]"
>
@ -112,7 +112,7 @@
:class="[
'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left',
prefs.tech_level === opt.value
? 'border-accent bg-accent/10 text-accent'
? 'border-accent bg-accent-muted text-accent'
: 'border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
]"
>
@ -146,7 +146,7 @@
]"
:title="rule.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'"
>
<span :class="['absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform', rule.enabled ? 'translate-x-4' : 'translate-x-0.5']"></span>
<span :class="['absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform', rule.enabled ? 'translate-x-4' : 'translate-x-0']"></span>
</button>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">