mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-15 00:33:44 +08:00
488 lines
10 KiB
CSS
488 lines
10 KiB
CSS
@import "tailwindcss";
|
|
|
|
: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 */
|
|
--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);
|
|
color: var(--text-color);
|
|
font-family: var(--font-family-system);
|
|
transition: background 0.3s ease;
|
|
|
|
/* Optimize scrolling performance */
|
|
will-change: scroll-position;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
/* Optimize font rendering */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html {
|
|
/* Enable smooth scrolling with performance optimization */
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--glass-bg) 80%, 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) 60%, transparent);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* Hide scrollbar utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@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(-5px); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateY(10px);
|
|
}
|
|
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.9) translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.4s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin-slow 3s linear infinite;
|
|
}
|
|
|
|
.animate-spin-reverse {
|
|
animation: spin-reverse 2s linear infinite;
|
|
}
|
|
|
|
.animate-bounce-subtle {
|
|
animation: bounce-subtle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
.animate-scale-out {
|
|
animation: scale-out 0.2s ease-out forwards;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-gradient-x {
|
|
background-size: 200% 200%;
|
|
animation: gradient-x 3s ease infinite;
|
|
}
|
|
|
|
/* Liquid Glass Components */
|
|
.glass-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(25px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(180%);
|
|
border-radius: var(--radius-2xl);
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid var(--glass-border);
|
|
transition: transform var(--transition-fluid), box-shadow 0.2s ease;
|
|
|
|
/* Use GPU acceleration for smooth animations */
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.glass-card:hover {
|
|
transform: translateY(-5px) scale(1.02) translateZ(0);
|
|
box-shadow: 0 8px 24px var(--shadow-color);
|
|
}
|
|
|
|
/* Optimize fixed/sticky elements for scrolling */
|
|
nav:where(.sticky, .fixed),
|
|
.sticky,
|
|
.fixed {
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
|
|
.glass-input {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(10px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(150%);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-2xl);
|
|
color: var(--text-color);
|
|
transition: all var(--transition-fluid);
|
|
}
|
|
|
|
.glass-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
|
|
}
|
|
|
|
.glass-button {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-2xl);
|
|
padding: 0.75rem 1.25rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.glass-button:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 4px 8px var(--shadow-color);
|
|
}
|
|
|
|
.glass-button:active {
|
|
transform: translateY(0) scale(0.98);
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.glass-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
/* Animations for History Components */
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.95);
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
/* Custom Video Player Styles */
|
|
.spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 5px solid color-mix(in srgb, var(--glass-bg) 50%, transparent);
|
|
border-top-color: var(--accent-color);
|
|
border-radius: var(--radius-full);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.btn-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.5rem;
|
|
height: 2.5rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: var(--radius-2xl);
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-icon:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.slider-track {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: var(--radius-full);
|
|
cursor: pointer;
|
|
overflow: visible;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.slider-track.h-1 {
|
|
height: 4px;
|
|
}
|
|
|
|
.slider-range {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background-color: var(--accent-color);
|
|
border-radius: var(--radius-full);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slider-thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: white;
|
|
border-radius: var(--radius-full);
|
|
transform: translate(-50%, -50%);
|
|
cursor: grab;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slider-track.h-1 .slider-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.slider-track:hover .slider-thumb {
|
|
transform: translate(-50%, -50%) scale(1.2);
|
|
}
|
|
|
|
.slider-thumb:active,
|
|
.slider-track:active .slider-thumb {
|
|
transform: translate(-50%, -50%) scale(1.3);
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Hide scrollbar utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
|
|
|
|
|
|
|