mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyangandClaude Opus 4.6
df137c97f3
- Upgrade CSS variables with proper glass transparency, fixed gradient backgrounds, cubic-bezier(0.2, 0.8, 0.2, 1) fluid transitions, and enhanced shadow/border values matching the Liquid Glass touchstone - Add full backdrop-filter: blur(25px) saturate(180%) to glass-card, glass-input, glass-popover, and glass-backdrop CSS classes - Add lensing inner-glow hover effects and toast-in animation - Update all UI components (Button, Card, Input, Badge, Switch, SegmentedControl, ConfirmDialog, ModalBackdrop, ModalHeader, BackToTop, Navbar) for strict Liquid Glass compliance - Enforce rounded-2xl / rounded-full consistency across all components - Bump version to 4.6.0, update @vercel/analytics to ^2.0.1 Co-Authored-By: Claude Opus 4.6 <[email protected]>
26 lines
647 B
TypeScript
26 lines
647 B
TypeScript
/**
|
|
* Reusable modal backdrop component - Liquid Glass design
|
|
*/
|
|
|
|
interface ModalBackdropProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ModalBackdrop({ isOpen, onClose }: ModalBackdropProps) {
|
|
return (
|
|
<div
|
|
className={`
|
|
fixed inset-0 z-[9998]
|
|
bg-black/30
|
|
backdrop-blur-[8px]
|
|
[-webkit-backdrop-filter:blur(8px)]
|
|
transition-opacity duration-300
|
|
${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}
|
|
`}
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|