feat: standardize input styling with tier system, add depth and admin features
- Define 4 input tier CSS classes (input-standard, input-search, input-embedded, input-danger) in globals.css, migrating ~50 inputs across ~28 component files to use them - Add subtle border and inset shadow to solid input tiers for resting-state visibility - Fix focus ring clipping in settings panel scroll container - Fix phantom Tailwind tokens (border-border-primary, placeholder-txt-muted) - Add admin user management panel, storage management, and account deletion utilities
This commit is contained in:
@@ -203,6 +203,33 @@
|
||||
.glass-pill-mine:hover {
|
||||
background: rgba(134, 239, 172, 0.16);
|
||||
}
|
||||
|
||||
/* ── Input Tiers ── */
|
||||
.input-standard {
|
||||
@apply bg-surface-input rounded px-3 py-2 text-sm text-txt-primary
|
||||
placeholder:text-txt-tertiary outline-none
|
||||
border border-white/[0.06] shadow-input
|
||||
focus:ring-2 focus:ring-accent-primary focus:border-accent-primary/30
|
||||
transition-colors;
|
||||
}
|
||||
.input-search {
|
||||
@apply bg-surface-input rounded px-3 py-1.5 text-sm text-txt-primary
|
||||
placeholder:text-txt-tertiary outline-none
|
||||
border border-white/[0.06] shadow-input
|
||||
focus:ring-1 focus:ring-accent-primary focus:border-accent-primary/30
|
||||
transition-colors;
|
||||
}
|
||||
.input-embedded {
|
||||
@apply bg-transparent text-txt-primary
|
||||
placeholder:text-txt-tertiary/60 outline-none;
|
||||
}
|
||||
.input-danger {
|
||||
@apply bg-surface-input rounded px-3 py-2 text-sm text-txt-primary
|
||||
placeholder:text-txt-tertiary outline-none
|
||||
border border-white/[0.06] shadow-input
|
||||
focus:ring-2 focus:ring-accent-rose focus:border-accent-rose/30
|
||||
transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility: fall back to solid surfaces when transparency is reduced */
|
||||
|
||||
Reference in New Issue
Block a user