148 lines
3.9 KiB
CSS
148 lines
3.9 KiB
CSS
/* ============================================
|
|
CSS Variables & Theme System
|
|
============================================ */
|
|
|
|
/* 主题颜色变量 - Apple Design System */
|
|
:root {
|
|
/* 深色主题 (iOS Dark Mode Inspired) */
|
|
--bg-color: #000000;
|
|
/* Pure Black background */
|
|
--sidebar-bg: #1c1c1e;
|
|
/* System Gray 6 */
|
|
--secondary-bg: #2c2c2e;
|
|
/* System Gray 5 */
|
|
|
|
/* 卡片背景 - 仪表盘卡片 */
|
|
--card-bg-gradient-1: #1c1c1e;
|
|
--card-bg-gradient-2: #1c1c1e;
|
|
|
|
/* 站点卡片 - 提升亮度以区分层级 (Optimize: Use System Gray 5 for cards on black bg) */
|
|
--site-card-bg-gradient-1: #2c2c2e;
|
|
--site-card-bg-gradient-2: #2c2c2e;
|
|
--site-card-hover-bg: #3a3a3c;
|
|
/* System Gray 4 for hover */
|
|
|
|
/* 文字颜色 */
|
|
--text-color: #ffffff;
|
|
--text-muted: #8e8e93;
|
|
/* System Gray */
|
|
--text-bright: #ffffff;
|
|
|
|
/* 边框与阴影 */
|
|
--border-color: rgba(255, 255, 255, 0.12);
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
|
|
/* 功能色 */
|
|
--highlight-bg: rgba(118, 148, 185, 0.3);
|
|
/* Restore original Highlight */
|
|
--scrollbar-color: rgba(255, 255, 255, 0.2);
|
|
--scrollbar-hover-color: rgba(255, 255, 255, 0.3);
|
|
|
|
/* 恢复原有强调色 (Restore Original Accent) */
|
|
--accent-color: #7694b9;
|
|
--accent-hover: #6684a9;
|
|
--accent-rgb: 118, 148, 185;
|
|
|
|
--nav-item-color: #98989d;
|
|
--success-color: #30d158;
|
|
--error-color: #ff453a;
|
|
--white-color: #ffffff;
|
|
|
|
/* 恢复原有渐变 (Restore Original Gradient) */
|
|
--gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
|
|
--gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);
|
|
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed-width: 60px;
|
|
--app-height: 100vh;
|
|
|
|
/* Spacing System */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
|
|
--page-max-width: 1300px;
|
|
|
|
/* UI Tuning - Apple Style (Kept) */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions - Kept iOS Spring */
|
|
--transition-fast: 0.2s ease;
|
|
--transition-normal: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
--transition-slow: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
|
|
--transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
|
--card-bg-rgb: 28, 28, 30;
|
|
}
|
|
|
|
/* 浅色主题 - 恢复原有配色 (Restored Morandi/Warm) */
|
|
html.theme-preload,
|
|
body.light-theme {
|
|
--bg-color: #e0e0d8;
|
|
--sidebar-bg: #f0f0eb;
|
|
--secondary-bg: #e6e6e1;
|
|
/* Slightly darker than sidebar for hover state */
|
|
--card-bg-gradient-1: #f0f0eb;
|
|
--card-bg-gradient-2: #e9e9e4;
|
|
--site-card-bg-gradient-1: #ffffff;
|
|
--site-card-bg-gradient-2: #f4f5f0;
|
|
--site-card-hover-bg: linear-gradient(145deg, #fafaf8, #eef0eb);
|
|
|
|
--text-color: #333333;
|
|
--text-muted: #666666;
|
|
--text-bright: #000000;
|
|
|
|
--border-color: rgba(0, 0, 0, 0.08);
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
|
|
--highlight-bg: rgba(118, 148, 185, 0.15);
|
|
--scrollbar-color: rgba(0, 0, 0, 0.1);
|
|
--scrollbar-hover-color: rgba(0, 0, 0, 0.2);
|
|
|
|
--accent-color: #7694b9;
|
|
--accent-hover: #6684a9;
|
|
--accent-rgb: 118, 148, 185;
|
|
|
|
--nav-item-color: #666666;
|
|
--success-color: #4caf50;
|
|
--error-color: #f44336;
|
|
--white-color: #ffffff;
|
|
|
|
/* Restore original gradients */
|
|
--gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
|
|
--gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);
|
|
|
|
--card-bg-rgb: 240, 240, 235;
|
|
}
|
|
|
|
/* 预加载主题 - 在JS完全加载前显示正确的主题 */
|
|
html.theme-preload body {
|
|
background-color: #e0e0d8;
|
|
color: #333333;
|
|
}
|
|
|
|
/* 预加载侧边栏状态 - 在JS完全加载前显示正确的侧边栏宽度 */
|
|
html.sidebar-collapsed-preload .sidebar {
|
|
width: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
html.sidebar-collapsed-preload main.content {
|
|
margin-left: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
/* 控制页面预加载状态 */
|
|
html.preload .layout {
|
|
opacity: 0;
|
|
}
|
|
|
|
html.preload * {
|
|
transition: none !important;
|
|
}
|