v4.1.2 — Premium Bento Design System v2.0
v4.1.2 — Premium Bento Design System v2.0
Diamond top quality UI/UX
- Inter typography (400/500/600/700/800/900) + JetBrains Mono for code
- Modern card layout with layered shadows (sm / md / lg / glow)
- Pill-style tabs instead of underline tabs — pill nav with active state shadow
- Premium stat-cards with hover lift, accent stripe on hover, animated stagger entrance
- Gradient primary buttons (#6366f1 → #8b5cf6) with glow shadow + hover lift
- Color-coded status pills with bordered translucent backgrounds (success / error / warning / info)
- Modern tables with rounded corners, hover row highlight
- Loading shimmer animations on .loading-bar
- Refined empty-state with dashed border + soft background
- Smooth animations — bentoFadeIn / bentoSlideIn / bentoStaggerIn (cubic-bezier(0.4, 0, 0.2, 1))
- Improved scrollbars — pill style, theme-aware
Premium banners
- Donate footer — gradient text headline, animated CTA buttons (Buy Me a Coffee + PayPal) with glow shadows
- Prereq banner — gradient accent stripe, clear hierarchy, premium CTA button
- First-run intro banner — gradient text headline, numbered circular step counters (1, 2, 3), dismiss button with rotate animation
Refined dark mode
- Deeper blacks (#0a0a0f, #16161f) with vibrant accents (#818cf8, #a78bfa, #f472b6)
- Glassmorphism preserved
- All shadows re-tuned for dark surfaces
Compatibility
- Home Assistant 2024.1.0 or newer
- Light + dark + auto theme via prefers-color-scheme
- Mobile responsive (640px / 480px breakpoints)
- prefers-reduced-motion support
Plus everything from v4.1.1:
- Per-tool first-run intro banner with scope + 3 quick-start steps
- Universal donate footer injector with deep shadow DOM walker
- panel_custom auto-init wrapper
- Inline prereq banner for missing dependencies