mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-17 01: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]>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
/**
|
|
* Reusable modal header component - Liquid Glass design
|
|
*/
|
|
|
|
interface ModalHeaderProps {
|
|
title: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ModalHeader({ title, onClose }: ModalHeaderProps) {
|
|
return (
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-xl font-semibold text-[var(--text-color)]">
|
|
{title}
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="
|
|
w-8 h-8 flex items-center justify-center
|
|
rounded-[var(--radius-full)]
|
|
bg-[var(--glass-bg)]
|
|
border border-[var(--glass-border)]
|
|
text-[var(--text-color)]
|
|
hover:bg-[color-mix(in_srgb,var(--accent-color)_10%,transparent)]
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
"
|
|
aria-label="关闭"
|
|
>
|
|
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M18 6L6 18M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|