till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 20:19:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(shared-ui): improve toggle active state styling

Browse source 
- Add glow effect (box-shadow) when toggle is active
- Add hover brightness effect for active state
- Add proper dark mode support for active state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-11-29 13:23:22 +01:00
parent 95bba8ef6e
commit c1644039f3
1 changed files with 21 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/shared-ui/src/settings/SettingsToggle.svelte
View file

@ -173,8 +173,15 @@
}
.settings-toggle__switch--on {
background-color: hsl(var(--primary));
background: hsl(var(--primary));
border-color: hsl(var(--primary));
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}
:global(.dark) .settings-toggle__switch--on {
background: hsl(var(--primary));
border-color: hsl(var(--primary));
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
}
.settings-toggle__thumb {
@ -195,6 +202,19 @@
transform: translateX(1.25rem);
}
.settings-toggle__switch:hover:not(:disabled) {
border-color: rgba(0, 0, 0, 0.2);
}
:global(.dark) .settings-toggle__switch:hover:not(:disabled) {
border-color: rgba(255, 255, 255, 0.25);
}
.settings-toggle__switch--on:hover:not(:disabled) {
filter: brightness(1.1);
border-color: hsl(var(--primary));
}
.settings-toggle__switch:focus-visible {
outline: 2px solid hsl(var(--primary) / 0.4);
outline-offset: 2px;