refactor: 对原本的过长style.css进行拆分

assets/styles/_variables.css

@@ -0,0 +1,147 @@
+/* ============================================
+   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;
+}