xRangerDEandClaude Opus 4.7
9115819bb0
The bulk-action bar (the purple-tinted row that appears between the VOD filter and the grid when 1+ VOD checkbox is ticked) was 100% inline-styled in HTML, which meant: - No animation when it appears — it just popped into existence - No reusable styling for similar action surfaces later - Layout debugging meant editing HTML, not CSS Extracted to a proper .vod-bulk-bar class, plus .vod-bulk-count for the "N selected" label and a .vod-bulk-spacer for the flex push. The CSS rule also picks up a 4px soft purple shadow + a slightly richer gradient background that matches the rest of the purple surfaces in the app. Animation: vod-bulk-bar-slide @keyframes fires every time the JS flips display:none -> display:flex, because @keyframes restart on each display change. 220ms, cubic-bezier(0.16, 1, 0.3, 1) for a quick spring landing, 10px translateY-from + opacity 0->1. The appear feels intentional now instead of jarring. Disappear (display:flex -> none) still snaps because CSS cannot transition through display:none — adding that would require a class-toggle refactor and an explicit timer to defer the actual removal. Not worth the complexity for the polish-grade improvement this is going for. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>