mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-20 11:13: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]>
90 lines
2.4 KiB
CSS
90 lines
2.4 KiB
CSS
/* Transitions - Liquid Glass Design System v5 */
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
0% { opacity: 0; transform: scale(0.96) translateY(8px); }
|
|
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
|
|
@keyframes scale-out {
|
|
0% { opacity: 1; transform: scale(1) translateY(0); }
|
|
100% { opacity: 0; transform: scale(0.96) translateY(-8px); }
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(-8px) scale(0.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
from { opacity: 0; transform: translateY(16px) scale(0.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes sidebar-enter {
|
|
from { opacity: 0; transform: translateX(100%); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes sidebar-enter-left {
|
|
from { opacity: 0; transform: translateX(-100%); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
/* Utility animation classes */
|
|
.animate-fade-in {
|
|
animation: fade-in 0.35s cubic-bezier(0.22, 0.68, 0, 1);
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s cubic-bezier(0.22, 0.68, 0, 1);
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.3s cubic-bezier(0.22, 0.68, 0, 1);
|
|
}
|
|
|
|
.animate-toast-in {
|
|
animation: toast-in 0.4s cubic-bezier(0.22, 0.68, 0, 1);
|
|
}
|
|
|
|
/* Staggered children animation */
|
|
.stagger-children > * {
|
|
animation: fadeInUp 0.3s cubic-bezier(0.22, 0.68, 0, 1) backwards;
|
|
}
|
|
|
|
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
|
|
.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
|
|
.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
|
|
.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
|
|
.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
|
|
.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
|