mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-22 04:03:42 +08:00
kuekhaoyangandClaude Opus 4.6
5782da19c6
Comprehensive UI overhaul across the Liquid Glass design system: - Refined color palette with deeper dark mode tones and better contrast - Updated glass morphism effects with improved blur and saturation values - Polished Button, Card, Badge, Input, Switch, SegmentedControl components - Improved VideoCard with poster zoom effect, gradient overlay, and better badge layout - Refined Navbar with tighter spacing and better icon button hover states - Enhanced sidebar toggle buttons (rounded-full, better sizing) - Split PlayerSettings into PlayerSettings + DanmakuSettings (150-line limit) - Fixed broken rgba(var(--accent-color-rgb)) references with color-mix() - Added new CSS variables: --radius-xs/sm/md/lg, --shadow-lg, --transition-spring/snappy - Added staggered children animation and sidebar enter keyframes - Better scrollbar styling and focus states Co-Authored-By: Claude Opus 4.6 <[email protected]>
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
hover?: boolean;
|
|
blur?: boolean;
|
|
onClick?: () => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function Card({ children, className = '', hover = true, blur = true, onClick, style }: CardProps) {
|
|
const hoverStyles = hover
|
|
? "hover:translate-y-[-3px] hover:shadow-[var(--shadow-lg)] hover:z-10 cursor-pointer"
|
|
: "";
|
|
|
|
const blurClasses = blur
|
|
? "bg-[var(--glass-bg)] backdrop-blur-[20px] saturate-[180%] [-webkit-backdrop-filter:blur(20px)_saturate(180%)]"
|
|
: "bg-[var(--bg-color)]/90";
|
|
|
|
const baseClasses = `
|
|
${blurClasses}
|
|
rounded-[var(--radius-2xl)]
|
|
shadow-[var(--shadow-md)]
|
|
border
|
|
border-[var(--glass-border)]
|
|
p-4 md:p-6
|
|
relative
|
|
transition-all duration-[0.35s] [transition-timing-function:cubic-bezier(0.22,0.68,0,1)]
|
|
${hoverStyles}
|
|
${className}
|
|
`;
|
|
|
|
if (onClick) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`${baseClasses} text-left w-full`}
|
|
style={style}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={baseClasses} style={style}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|