mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-17 09:43:43 +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]>
87 lines
1.9 KiB
CSS
87 lines
1.9 KiB
CSS
/* Effects - Liquid Glass Design System v5 */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin-reverse {
|
|
from { transform: rotate(360deg); }
|
|
to { transform: rotate(0deg); }
|
|
}
|
|
|
|
@keyframes bounce-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) translateX(10px);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-x {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 20%, transparent); }
|
|
50% { box-shadow: 0 0 20px color-mix(in srgb, var(--accent-color) 40%, transparent); }
|
|
}
|
|
|
|
/* Lensing inner-glow effect for interactive elements */
|
|
.glass-glow:hover {
|
|
box-shadow:
|
|
var(--shadow-lg),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.glass-glow:focus-visible {
|
|
box-shadow:
|
|
0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Hover lift effect */
|
|
.hover-lift {
|
|
transition: transform var(--transition-fluid), box-shadow var(--transition-fluid);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Subtle scale on hover */
|
|
.hover-scale {
|
|
transition: transform var(--transition-snappy);
|
|
}
|
|
|
|
.hover-scale:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.hover-scale:active {
|
|
transform: scale(0.97);
|
|
}
|