Context
The rabbithole player has accumulated a lot of inline CSS and style manipulation in JavaScript that should be cleaned up when we separate rabbithole into its own project.
Current Issues
- Spotlight/flourish/glow effects set many individual style properties inline
- Need
!important overrides to fight CSS transitions (e.g., .musician-item has transition: all 0.4s)
- Transform, transition, boxShadow, etc. all manipulated via
element.style.*
Proposed Refactor
- Move spotlight/flourish/glow styles to CSS classes
- Use CSS custom properties for dynamic values (durations, intensities)
- Toggle classes in JS instead of setting individual style properties
- Consolidate and eliminate
!important overrides
- Clean separation of concerns - CSS handles presentation, JS handles state
When
When rabbithole becomes its own standalone project.
Context
The rabbithole player has accumulated a lot of inline CSS and style manipulation in JavaScript that should be cleaned up when we separate rabbithole into its own project.
Current Issues
!importantoverrides to fight CSS transitions (e.g.,.musician-itemhastransition: all 0.4s)element.style.*Proposed Refactor
!importantoverridesWhen
When rabbithole becomes its own standalone project.