mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-19 18:53: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]>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ label, error, className = '', ...props }, ref) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-[var(--text-color)] mb-2 tracking-[-0.01em]">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-3 md:px-5 md:py-3.5
|
|
text-base
|
|
bg-[var(--glass-bg)]
|
|
backdrop-blur-[12px] saturate-[160%]
|
|
[-webkit-backdrop-filter:blur(12px)_saturate(160%)]
|
|
border border-[var(--glass-border)]
|
|
rounded-[var(--radius-2xl)]
|
|
text-[var(--text-color)]
|
|
placeholder:text-[var(--text-color-secondary)]/60
|
|
focus:outline-none
|
|
focus:border-[var(--accent-color)]
|
|
focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-color)_18%,transparent),var(--shadow-md)]
|
|
transition-all duration-[0.35s]
|
|
[transition-timing-function:cubic-bezier(0.22,0.68,0,1)]
|
|
touch-manipulation
|
|
${error ? 'border-red-500 focus:border-red-500 focus:shadow-[0_0_0_3px_rgba(239,68,68,0.15)]' : ''}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-400 font-medium">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = 'Input';
|