Add frosted glass effect to queue control bar with 60% opacity#771
Add frosted glass effect to queue control bar with 60% opacity#771marcodejongh wants to merge 4 commits intomainfrom
Conversation
Uses the same backdrop-filter blur(5px) as the bottom nav bar. Card background is transparent to allow the blur to show through, while the swipe container uses 60% opacity (rgba/hsla) for the semi-transparent overlay, including grade tint colors. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv
The blur and semi-transparent background must be on the same element for the frosted glass effect to work (matching the bottom nav pattern). Also use background shorthand to fully override MUI Paper's default. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv
Grade tint colors are already light pastels (hsl at 88% lightness), making them near-invisible at 60% opacity. Keep them opaque so the grade color remains clearly visible. Frosted glass (60% white + blur) only applies when no grade tint is present. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv
Grade tint background now uses 85% opacity (hsla) so the backdrop blur shows through slightly, making it visually consistent with the frosted glass bottom nav bar below it. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Claude Review✅ Ready to merge - Minor issue noted below, but nothing blocking. packages/web/app/components/queue-control/queue-control-bar.tsx:283-285 - The string replacement Also, the PR description says 60% opacity but the code uses 0.85 (85%). Minor mismatch. |
2 participants
Uses the same backdrop-filter blur(5px) as the bottom nav bar.
Card background is transparent to allow the blur to show through,
while the swipe container uses 60% opacity (rgba/hsla) for the
semi-transparent overlay, including grade tint colors.
https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv