mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-20 11:13: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]>
81 lines
2.7 KiB
CSS
81 lines
2.7 KiB
CSS
/* CSS Custom Properties - Liquid Glass Design System */
|
|
:root {
|
|
--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
|
|
|
|
/* Light Mode Palette */
|
|
--bg-color-light: #f0f2f5;
|
|
--bg-image-light: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
|
|
--text-color-light: #1d1d1f;
|
|
--text-color-secondary-light: #6e6e73;
|
|
--accent-color-light: #007aff;
|
|
--glass-bg-light: rgba(242, 242, 247, 0.8);
|
|
--glass-border-light: rgba(255, 255, 255, 0.5);
|
|
--shadow-color-light: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Dark Mode Palette */
|
|
--bg-color-dark: #121212;
|
|
--bg-image-dark: linear-gradient(120deg, #272B30 0%, #121212 100%);
|
|
--text-color-dark: #f5f5f7;
|
|
--text-color-secondary-dark: #8e8e93;
|
|
--accent-color-dark: #0a84ff;
|
|
--glass-bg-dark: rgba(28, 28, 30, 0.75);
|
|
--glass-border-dark: rgba(60, 60, 60, 0.7);
|
|
--shadow-color-dark: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Universal Variables */
|
|
--radius-2xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
--shadow-sm: 0 2px 4px var(--shadow-color);
|
|
--shadow-md: 0 4px 12px var(--shadow-color);
|
|
--transition-fluid: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
|
|
/* Active Theme Variables (default: light) */
|
|
--bg-color: var(--bg-color-light);
|
|
--bg-image: var(--bg-image-light);
|
|
--text-color: var(--text-color-light);
|
|
--text-color-secondary: var(--text-color-secondary-light);
|
|
--accent-color: var(--accent-color-light);
|
|
--glass-bg: var(--glass-bg-light);
|
|
--glass-border: var(--glass-border-light);
|
|
--shadow-color: var(--shadow-color-light);
|
|
|
|
--background: #f0f2f5;
|
|
--foreground: #1d1d1f;
|
|
}
|
|
|
|
body {
|
|
--bg-color: var(--bg-color-light);
|
|
--bg-image: var(--bg-image-light);
|
|
--text-color: var(--text-color-light);
|
|
--text-color-secondary: var(--text-color-secondary-light);
|
|
--accent-color: var(--accent-color-light);
|
|
--glass-bg: var(--glass-bg-light);
|
|
--glass-border: var(--glass-border-light);
|
|
--shadow-color: var(--shadow-color-light);
|
|
|
|
background-color: var(--bg-color);
|
|
background-image: var(--bg-image);
|
|
background-attachment: fixed;
|
|
color: var(--text-color);
|
|
font-family: var(--font-family-system);
|
|
transition: background 0.3s ease;
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
body.dark,
|
|
.dark body {
|
|
--bg-color: var(--bg-color-dark);
|
|
--bg-image: var(--bg-image-dark);
|
|
--text-color: var(--text-color-dark);
|
|
--text-color-secondary: var(--text-color-secondary-dark);
|
|
--accent-color: var(--accent-color-dark);
|
|
--glass-bg: var(--glass-bg-dark);
|
|
--glass-border: var(--glass-border-dark);
|
|
--shadow-color: var(--shadow-color-dark);
|
|
|
|
--background: #121212;
|
|
--foreground: #f5f5f7;
|
|
}
|