mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33: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]>
178 lines
3.3 KiB
CSS
178 lines
3.3 KiB
CSS
/* Base Styles - Liquid Glass Design System v5 */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Global Pointer Cursor for Interactive Elements */
|
|
button,
|
|
[role="button"],
|
|
[type="button"],
|
|
[type="submit"],
|
|
[type="reset"],
|
|
a[href],
|
|
label[for],
|
|
select,
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
/* Focus Styles */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--accent-color);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-2xl);
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
outline: 2px solid var(--accent-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[class*="rounded-full"]:focus-visible {
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* Scrollbar Styles */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--text-color) 15%, transparent);
|
|
border-radius: var(--radius-full);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--accent-color) 50%, transparent);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.search-history-dropdown::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.search-history-dropdown::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.search-history-dropdown::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--text-color) 15%, transparent);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* Utilities */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.scrollbar-hide,
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar,
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Performance Optimizations */
|
|
nav:where(.sticky, .fixed),
|
|
.sticky,
|
|
.fixed {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
[class*="grid"]>a {
|
|
animation: fadeInUp 0.25s cubic-bezier(0.22, 0.68, 0, 1);
|
|
}
|
|
|
|
@supports (content-visibility: auto) {
|
|
img {
|
|
content-visibility: auto;
|
|
}
|
|
}
|
|
|
|
img {
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
body.scrolling * {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.glass-card,
|
|
nav {
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
[class*="badge"],
|
|
[class*="Badge"] {
|
|
contain: layout style;
|
|
}
|
|
|
|
.search-history-dropdown {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* TV Mode Styles */
|
|
body.tv-mode [data-focusable]:focus {
|
|
outline: 3px solid var(--accent-color);
|
|
outline-offset: 4px;
|
|
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 20%, transparent);
|
|
transform: scale(1.03);
|
|
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
|
}
|
|
|
|
body.tv-mode {
|
|
font-size: 18px;
|
|
}
|
|
|
|
body.tv-mode [data-focusable] {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
}
|
|
|
|
body.tv-mode [class*="grid"] {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
body.tv-mode [class*="gap-3"] {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
body.tv-mode [class*="gap-4"] {
|
|
gap: 1.5rem;
|
|
}
|