Circuit-Forge/turnstone
5
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases 6 Packages Wiki Activity Actions

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

Browse source 
- 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
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/views/SettingsView.vue
View file

@ -27,7 +27,7 @@
:class="[ :class="[
'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left', 'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left',
prefs.entry_point_style === opt.value 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' : 'border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
]" ]"
> >
@ -112,7 +112,7 @@
:class="[ :class="[
'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left', 'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left',
prefs.tech_level === opt.value 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' : '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'" :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> </button>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">