/* ========================================== 学习力教练工作系统 - 设计系统 · CSS 变量 主题切换：通过 切换配色主题 仅切换配色，不改布局（结构变量保持不变） ========================================== */ /* ========================================== 默认主题（山大红） + 结构变量 ========================================== */ :root { /* 主色调 */ --color-primary: #003366; --color-primary-light: #E0F2FE; --color-primary-dark: #002244; /* 强调色（山大红 #9C0C13） */ --color-accent: #9C0C13; --color-accent-light: #FEF2F2; --color-accent-dark: #7E0A10; /* 点缀色 */ --color-gold: #D4AF37; --color-gold-light: #FEF3C7; /* 成功 / 警告 / 错误 / 信息 */ --color-success: #10B981; --color-success-light: #D1FAE5; --color-warning: #F59E0B; --color-warning-light: #FEF3C7; --color-error: #EF4444; --color-error-light: #FEE2E2; --color-info: #3B82F6; --color-info-light: #EFF6FF; /* 中性色 */ --color-text-primary: #1F2937; --color-text-secondary: #6B7280; --color-text-muted: #9CA3AF; --color-bg-primary: #FFFFFF; --color-bg-secondary: #F8FAFC; --color-bg-tertiary: #F3F4F6; --color-border: #E5E7EB; --color-border-light: #F3F4F6; --color-border-subtle: #EEF0F3; --color-border-strong: #D1D5DB; /* 顶栏（山大红 #9C0C13） */ --header-bg: linear-gradient(to bottom, #A81119 0%, #861016 100%); --header-border: #7A0E14; --header-shadow: 0 2px 10px rgba(122, 14, 20, 0.28); /* Logo / 头像（顶栏内的点缀块） */ --logo-bg: linear-gradient(135deg, #F7F0DF 0%, #D4AF37 100%); --logo-fg: #9C0C13; --avatar-bg: linear-gradient(135deg, #F7F0DF 0%, #D4AF37 100%); --avatar-fg: #9C0C13; /* 侧边栏 */ --sidebar-bg: #F7F0DF; --sidebar-border: #E5D5B8; --sidebar-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(180,160,120,0.04) 7px, rgba(180,160,120,0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(180,155,110,0.03) 40px, rgba(180,155,110,0.03) 41px), repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(175,150,105,0.02) 80px, rgba(175,150,105,0.02) 81px); --sidebar-divider: rgba(180, 160, 120, 0.15); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(160, 130, 80, 0.12), rgba(160, 130, 80, 0.08)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(160, 130, 80, 0.18), rgba(160, 130, 80, 0.12)); --sidebar-section-header-border: #B8956A; --sidebar-section-header-border-hover: #9B7A50; --sidebar-section-title: #6B5D4E; --sidebar-section-icon: #8B7765; --sidebar-item-hover: rgba(180, 160, 120, 0.10); --sidebar-item-active-bg: rgba(0, 51, 102, 0.08); --sidebar-footer-title: #8B7D6B; /* 二级菜单 */ --submenu-bg: #FFFFFF; --submenu-border: #E5E7EB; --submenu-item-hover: #F3F4F6; --submenu-item-active-bg: #EEF2FF; /* 字体 */ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 间距 */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; /* 圆角 */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* 卡片悬浮阴影（多层，营造高级悬浮感） */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px -1px rgba(16, 24, 40, 0.06); --shadow-card-hover: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.06); --shadow-popover: 0 8px 24px -4px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06); /* 焦点环 / 内容区背景（随主题，见各主题块覆盖） */ --ring-focus: rgba(0, 51, 102, 0.22); --content-bg: linear-gradient(180deg, #FBFCFE 0%, #F5F7FA 100%); /* 布局尺寸 */ --header-height: 56px; --sidebar-width: 240px; --sidebar-right-width: 320px; /* 过渡 */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; } /* ========================================== 海洋蓝主题 ========================================== */ :root[data-theme="ocean"] { --color-primary: #0C4A6E; --color-primary-light: #E0F2FE; --color-primary-dark: #0A3D5C; --color-accent: #0F766E; --color-accent-light: #CCFBF1; --color-accent-dark: #115E59; --color-gold: #F59E0B; --color-gold-light: #FEF3C7; --header-bg: linear-gradient(to bottom, #0C4A6E 0%, #075985 100%); --header-border: #0A3D5C; --header-shadow: 0 2px 10px rgba(7, 89, 133, 0.28); --logo-bg: linear-gradient(135deg, #E0F2FE 0%, #7DD3FC 100%); --logo-fg: #0C4A6E; --avatar-bg: linear-gradient(135deg, #E0F2FE 0%, #7DD3FC 100%); --avatar-fg: #0C4A6E; --sidebar-bg: #EFF5FA; --sidebar-border: #D7E5F0; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(120,165,205,0.04) 7px, rgba(120,165,205,0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(120,165,205,0.03) 40px, rgba(120,165,205,0.03) 41px); --sidebar-divider: rgba(120, 165, 205, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(90, 140, 185, 0.12), rgba(90, 140, 185, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(90, 140, 185, 0.18), rgba(90, 140, 185, 0.12)); --sidebar-section-header-border: #6E9CC0; --sidebar-section-header-border-hover: #5B87AD; --sidebar-section-title: #3A5A78; --sidebar-section-icon: #6E8AA3; --sidebar-item-hover: rgba(90, 140, 185, 0.10); --sidebar-item-active-bg: rgba(12, 74, 110, 0.10); --sidebar-footer-title: #5B7A99; --ring-focus: rgba(12, 74, 110, 0.22); --content-bg: linear-gradient(180deg, #F6FAFD 0%, #EEF4F9 100%); } /* ========================================== 竹墨绿主题 ========================================== */ :root[data-theme="forest"] { --color-primary: #166534; --color-primary-light: #DCFCE7; --color-primary-dark: #14532D; --color-accent: #B45309; --color-accent-light: #FEF3C7; --color-accent-dark: #92400E; --color-gold: #D97706; --color-gold-light: #FEF3C7; --header-bg: linear-gradient(to bottom, #166534 0%, #14532D 100%); --header-border: #0F3D20; --header-shadow: 0 2px 10px rgba(20, 83, 45, 0.28); --logo-bg: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%); --logo-fg: #166534; --avatar-bg: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%); --avatar-fg: #166534; --sidebar-bg: #F1F6F1; --sidebar-border: #DCE8DD; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(120,160,130,0.04) 7px, rgba(120,160,130,0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(120,160,130,0.03) 40px, rgba(120,160,130,0.03) 41px); --sidebar-divider: rgba(120, 160, 130, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(80, 140, 95, 0.12), rgba(80, 140, 95, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(80, 140, 95, 0.18), rgba(80, 140, 95, 0.12)); --sidebar-section-header-border: #6FA07C; --sidebar-section-header-border-hover: #5C8A68; --sidebar-section-title: #3F5B47; --sidebar-section-icon: #6E8A76; --sidebar-item-hover: rgba(80, 140, 95, 0.10); --sidebar-item-active-bg: rgba(22, 101, 52, 0.10); --sidebar-footer-title: #5B7A66; --ring-focus: rgba(22, 101, 52, 0.20); --content-bg: linear-gradient(180deg, #F5FAF6 0%, #EDF4EF 100%); } /* ========================================== 罗兰紫主题 ========================================== */ :root[data-theme="royal"] { --color-primary: #7C3AED; --color-primary-light: #EDE9FE; --color-primary-dark: #6D28D9; --color-accent: #DB2777; --color-accent-light: #FCE7F3; --color-accent-dark: #BE185D; --color-gold: #F59E0B; --color-gold-light: #FEF3C7; --header-bg: linear-gradient(to bottom, #6D28D9 0%, #5B21B6 100%); --header-border: #4C1D95; --header-shadow: 0 2px 10px rgba(76, 29, 149, 0.28); --logo-bg: linear-gradient(135deg, #EDE9FE 0%, #C4B5FD 100%); --logo-fg: #6D28D9; --avatar-bg: linear-gradient(135deg, #EDE9FE 0%, #C4B5FD 100%); --avatar-fg: #6D28D9; --sidebar-bg: #F6F3FB; --sidebar-border: #E7E0F4; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(150,125,205,0.04) 7px, rgba(150,125,205,0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(150,125,205,0.03) 40px, rgba(150,125,205,0.03) 41px); --sidebar-divider: rgba(150, 125, 205, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(140, 110, 205, 0.12), rgba(140, 110, 205, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(140, 110, 205, 0.18), rgba(140, 110, 205, 0.12)); --sidebar-section-header-border: #9C82D8; --sidebar-section-header-border-hover: #8870C4; --sidebar-section-title: #5B4B75; --sidebar-section-icon: #7E6B9E; --sidebar-item-hover: rgba(140, 110, 205, 0.10); --sidebar-item-active-bg: rgba(124, 58, 237, 0.10); --sidebar-footer-title: #6E5B8F; --ring-focus: rgba(124, 58, 237, 0.20); --content-bg: linear-gradient(180deg, #F9F7FC 0%, #F1EDF8 100%); } /* ========================================== 琥珀橙主题 ========================================== */ :root[data-theme="amber"] { --color-primary: #C2410C; --color-primary-light: #FFEDD5; --color-primary-dark: #9A3412; --color-accent: #0F766E; --color-accent-light: #CCFBF1; --color-accent-dark: #115E59; --color-gold: #EAB308; --color-gold-light: #FEF9C3; --header-bg: linear-gradient(to bottom, #EA580C 0%, #C2410C 100%); --header-border: #9A3412; --header-shadow: 0 2px 10px rgba(154, 52, 18, 0.28); --logo-bg: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%); --logo-fg: #C2410C; --avatar-bg: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%); --avatar-fg: #C2410C; --sidebar-bg: #FBF5EE; --sidebar-border: #F0E2D2; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(205,160,110,0.04) 7px, rgba(205,160,110,0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(205,160,110,0.03) 40px, rgba(205,160,110,0.03) 41px); --sidebar-divider: rgba(205, 160, 110, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(200, 140, 90, 0.12), rgba(200, 140, 90, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(200, 140, 90, 0.18), rgba(200, 140, 90, 0.12)); --sidebar-section-header-border: #C99A6E; --sidebar-section-header-border-hover: #B5855A; --sidebar-section-title: #7A5B3F; --sidebar-section-icon: #9E7D5E; --sidebar-item-hover: rgba(200, 140, 90, 0.10); --sidebar-item-active-bg: rgba(194, 65, 12, 0.10); --sidebar-footer-title: #8A6B4F; --ring-focus: rgba(194, 65, 12, 0.20); --content-bg: linear-gradient(180deg, #FDF9F4 0%, #F8F1E8 100%); } /* ========================================== 石墨科技蓝主题（Stripe / Linear 现代 SaaS 质感） ========================================== */ :root[data-theme="graphite"] { --color-primary: #2563EB; --color-primary-light: #EFF6FF; --color-primary-dark: #1D4ED8; --color-accent: #0EA5E9; --color-accent-light: #E0F2FE; --color-accent-dark: #0284C7; --color-gold: #F59E0B; --color-gold-light: #FEF3C7; --header-bg: linear-gradient(to bottom, #1E293B 0%, #0F172A 100%); --header-border: #0B1120; --header-shadow: 0 2px 10px rgba(15, 23, 42, 0.35); --logo-bg: linear-gradient(135deg, #EFF6FF 0%, #93C5FD 100%); --logo-fg: #1D4ED8; --avatar-bg: linear-gradient(135deg, #EFF6FF 0%, #93C5FD 100%); --avatar-fg: #1D4ED8; --sidebar-bg: #F8FAFC; --sidebar-border: #E2E8F0; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(100, 116, 139, 0.04) 7px, rgba(100, 116, 139, 0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(100, 116, 139, 0.03) 40px, rgba(100, 116, 139, 0.03) 41px); --sidebar-divider: rgba(100, 116, 139, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(100, 116, 139, 0.12), rgba(100, 116, 139, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(100, 116, 139, 0.18), rgba(100, 116, 139, 0.12)); --sidebar-section-header-border: #94A3B8; --sidebar-section-header-border-hover: #7C8BA1; --sidebar-section-title: #475569; --sidebar-section-icon: #64748B; --sidebar-item-hover: rgba(100, 116, 139, 0.10); --sidebar-item-active-bg: rgba(37, 99, 235, 0.10); --sidebar-footer-title: #64748B; --ring-focus: rgba(37, 99, 235, 0.22); --content-bg: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%); } /* ========================================== 金融藏青主题（摩根 / 高盛 / 麦肯锡 沉稳质感） ========================================== */ :root[data-theme="navy"] { --color-primary: #1E3A5F; --color-primary-light: #E8EEF5; --color-primary-dark: #14273F; --color-accent: #C9A227; --color-accent-light: #FAF3DC; --color-accent-dark: #A8871E; --color-gold: #C9A227; --color-gold-light: #FAF3DC; --header-bg: linear-gradient(to bottom, #1E3A5F 0%, #14273F 100%); --header-border: #0F1F33; --header-shadow: 0 2px 10px rgba(15, 31, 51, 0.35); --logo-bg: linear-gradient(135deg, #FAF3DC 0%, #C9A227 100%); --logo-fg: #1E3A5F; --avatar-bg: linear-gradient(135deg, #FAF3DC 0%, #C9A227 100%); --avatar-fg: #1E3A5F; --sidebar-bg: #F7F6F2; --sidebar-border: #E7E2D5; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(160, 140, 90, 0.04) 7px, rgba(160, 140, 90, 0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(160, 140, 90, 0.03) 40px, rgba(160, 140, 90, 0.03) 41px); --sidebar-divider: rgba(160, 140, 90, 0.18); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(150, 130, 85, 0.12), rgba(150, 130, 85, 0.07)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(150, 130, 85, 0.18), rgba(150, 130, 85, 0.12)); --sidebar-section-header-border: #B8A979; --sidebar-section-header-border-hover: #A2925F; --sidebar-section-title: #5F5642; --sidebar-section-icon: #8B8066; --sidebar-item-hover: rgba(150, 130, 85, 0.10); --sidebar-item-active-bg: rgba(30, 58, 95, 0.08); --sidebar-footer-title: #7A6F57; --ring-focus: rgba(30, 58, 95, 0.22); --content-bg: linear-gradient(180deg, #FAFAF7 0%, #F2F1EC 100%); } /* ========================================== 极简石墨黑主题（Apple / 高端设计质感） ========================================== */ :root[data-theme="mono"] { --color-primary: #111827; --color-primary-light: #F3F4F6; --color-primary-dark: #0B0F19; --color-accent: #4B5563; --color-accent-light: #F3F4F6; --color-accent-dark: #374151; --color-gold: #A16207; --color-gold-light: #FEF3C7; --header-bg: linear-gradient(to bottom, #18181B 0%, #09090B 100%); --header-border: #000000; --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.40); --logo-bg: linear-gradient(135deg, #F4F4F5 0%, #D4D4D8 100%); --logo-fg: #111827; --avatar-bg: linear-gradient(135deg, #F4F4F5 0%, #D4D4D8 100%); --avatar-fg: #111827; --sidebar-bg: #FFFFFF; --sidebar-border: #E5E7EB; --sidebar-lines: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(120, 120, 130, 0.04) 7px, rgba(120, 120, 130, 0.04) 8px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(120, 120, 130, 0.03) 40px, rgba(120, 120, 130, 0.03) 41px); --sidebar-divider: rgba(120, 120, 130, 0.16); --sidebar-section-header-bg: linear-gradient(to bottom, rgba(120, 120, 130, 0.10), rgba(120, 120, 130, 0.06)); --sidebar-section-header-bg-hover: linear-gradient(to bottom, rgba(120, 120, 130, 0.16), rgba(120, 120, 130, 0.10)); --sidebar-section-header-border: #9CA3AF; --sidebar-section-header-border-hover: #6B7280; --sidebar-section-title: #4B5563; --sidebar-section-icon: #6B7280; --sidebar-item-hover: rgba(120, 120, 130, 0.08); --sidebar-item-active-bg: rgba(17, 24, 39, 0.06); --sidebar-footer-title: #6B7280; --ring-focus: rgba(17, 24, 39, 0.22); --content-bg: linear-gradient(180deg, #FCFCFD 0%, #F5F5F6 100%); }