mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
78 lines
2.6 KiB
CSS
78 lines
2.6 KiB
CSS
/* CSS Custom Properties */
|
|
: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: #f2f4f7;
|
|
--bg-image-light: none;
|
|
--text-color-light: #1d1d1f;
|
|
--text-color-secondary-light: #6e6e73;
|
|
--accent-color-light: #0056b3;
|
|
--glass-bg-light: rgba(255, 255, 255, 0.95);
|
|
--glass-border-light: rgba(0, 0, 0, 0.05);
|
|
--shadow-color-light: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Dark Mode Palette */
|
|
--bg-color-dark: #121212;
|
|
--bg-image-dark: linear-gradient(120deg, #1a1a1a 0%, #121212 100%);
|
|
--text-color-dark: #f5f5f7;
|
|
--text-color-secondary-dark: #8e8e93;
|
|
--accent-color-dark: #1A6DBF;
|
|
--glass-bg-dark: rgba(30, 30, 30, 0.9);
|
|
--glass-border-dark: rgba(255, 255, 255, 0.1);
|
|
--shadow-color-dark: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Universal Variables */
|
|
--radius-2xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
--shadow-sm: 0 1px 2px var(--shadow-color);
|
|
--shadow-md: 0 4px 6px var(--shadow-color);
|
|
--transition-fluid: 0.3s ease;
|
|
|
|
/* 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: #f2f4f7;
|
|
--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);
|
|
|
|
-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;
|
|
} |