278 lines
10 KiB
CSS
278 lines
10 KiB
CSS
/* CSS Variables - Elegant Dark/Light Theme */
|
|
:root {
|
|
/* Colors - Dark Theme (Default) - Material Design inspired */
|
|
/* Background layers - using deep grays, not pure black */
|
|
--color-bg-primary: #121212; /* 主背景 - 深灰黑 */
|
|
--color-bg-secondary: #1e1e1e; /* 次级背景 - 中灰黑 */
|
|
--color-bg-tertiary: #2d2d2d; /* 三级背景 - 浅灰黑 */
|
|
--color-bg-elevated: #252525; /* 浮层背景 */
|
|
--color-bg-subtle: #1a1a1a; /* 微妙背景 */
|
|
|
|
/* Text colors - softer whites for better readability */
|
|
--color-text-primary: #e0e0e0; /* 主文字 - 柔白 */
|
|
--color-text-secondary: #9e9e9e; /* 次要文字 - 中灰 */
|
|
--color-text-muted: #757575; /* 弱化文字 - 深灰 */
|
|
--color-text-inverse: #121212; /* 反色文字 */
|
|
|
|
/* Border colors - subtle separation */
|
|
--color-border: #333333; /* 边框 - 深灰 */
|
|
--color-border-light: #2a2a2a; /* 浅色边框 */
|
|
--color-border-focus: #404040; /* 聚焦边框 */
|
|
|
|
/* Scrollbar colors - Light gray for night mode */
|
|
--color-scrollbar: #666666; /* 滚动条 - 亮灰色 */
|
|
--color-scrollbar-hover: #888888; /* 滚动条悬停 - 更亮的灰色 */
|
|
|
|
/* Accent color - elegant blue-purple */
|
|
--color-accent: #8b9cf7; /* 强调色 - 柔和蓝紫 */
|
|
--color-accent-hover: #9dabff; /* 悬停 */
|
|
--color-accent-active: #7a8be6; /* 激活 */
|
|
--color-accent-light: rgba(139, 156, 247, 0.1); /* 浅色强调 */
|
|
--color-accent-ultra-light: rgba(139, 156, 247, 0.05); /* 极浅强调 */
|
|
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
/* Danger colors */
|
|
--color-danger: #ef4444;
|
|
--color-danger-light: rgba(239, 68, 68, 0.1);
|
|
--color-danger-dark: #dc2626;
|
|
|
|
/* Accent variations */
|
|
--color-accent-dark: #6d7de6;
|
|
|
|
/* Gradient backgrounds */
|
|
--gradient-primary: linear-gradient(135deg, #6d8cff 0%, #8da7ff 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(109, 140, 255, 0.05) 0%, transparent 100%);
|
|
|
|
/* Spacing - Compact but comfortable */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 6px;
|
|
--spacing-md: 12px;
|
|
--spacing-lg: 18px;
|
|
--spacing-xl: 24px;
|
|
--spacing-2xl: 32px;
|
|
--spacing-3xl: 40px;
|
|
|
|
/* Border Radius - Softer, more refined */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Shadows - Subtle and layered for depth */
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25);
|
|
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.3);
|
|
--shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.35);
|
|
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Transitions - Smooth and elegant */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--transition-smooth: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
|
|
/* Z-index layers */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
|
|
/* Font Families */
|
|
--font-ui: "Microsoft YaHei UI", "微软雅黑 UI", "Segoe UI", sans-serif; /* UI 元素字体 */
|
|
--font-body: "Microsoft YaHei", "微软雅黑", "Segoe UI", sans-serif; /* 正文字体 */
|
|
--font-code: "Consolas", "Monaco", "Courier New", monospace; /* 代码字体 */
|
|
}
|
|
|
|
/* Global theme transition */
|
|
*, *::before, *::after {
|
|
transition: background-color var(--transition-normal),
|
|
border-color var(--transition-normal),
|
|
color var(--transition-normal),
|
|
box-shadow var(--transition-normal);
|
|
}
|
|
|
|
/* Light Theme - Soft and natural day mode */
|
|
[data-theme='light'] {
|
|
/* Background layers - warm whites, not harsh white */
|
|
--color-bg-primary: #fafafa; /* 主背景 - 暖白 */
|
|
--color-bg-secondary: #ffffff; /* 次级背景 - 纯白 */
|
|
--color-bg-tertiary: #f5f5f5; /* 三级背景 - 浅灰 */
|
|
--color-bg-elevated: #ffffff; /* 浮层背景 */
|
|
--color-bg-subtle: #f0f0f0; /* 微妙背景 */
|
|
|
|
/* Text colors - soft grays for comfortable reading */
|
|
--color-text-primary: #2c2c2c; /* 主文字 - 深灰 */
|
|
--color-text-secondary: #666666; /* 次要文字 - 中灰 */
|
|
--color-text-muted: #999999; /* 弱化文字 - 浅灰 */
|
|
--color-text-inverse: #ffffff; /* 反色文字 */
|
|
|
|
/* Border colors - subtle separation */
|
|
--color-border: #e0e0e0; /* 边框 - 浅灰 */
|
|
--color-border-light: #ebebeb; /* 浅色边框 */
|
|
--color-border-focus: #d0d0d0; /* 聚焦边框 */
|
|
|
|
/* Scrollbar colors - Slightly darker for day mode */
|
|
--color-scrollbar: #999999; /* 滚动条 - 中灰色 */
|
|
--color-scrollbar-hover: #777777; /* 滚动条悬停 - 深灰色 */
|
|
|
|
/* Accent color - consistent with dark theme */
|
|
--color-accent: #7a8be6; /* 强调色 */
|
|
--color-accent-hover: #6a7bd6; /* 悬停 */
|
|
--color-accent-active: #5a6bc6; /* 激活 */
|
|
--color-accent-light: rgba(122, 139, 230, 0.08); /* 浅色强调 */
|
|
--color-accent-ultra-light: rgba(122, 139, 230, 0.04); /* 极浅强调 */
|
|
|
|
--gradient-primary: linear-gradient(135deg, #5b7fff 0%, #7c9cff 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(91, 127, 255, 0.03) 0%, transparent 100%);
|
|
|
|
/* Danger colors - Light theme */
|
|
--color-danger: #ef4444;
|
|
--color-danger-light: rgba(239, 68, 68, 0.08);
|
|
--color-danger-dark: #dc2626;
|
|
|
|
/* Accent variations - Light theme */
|
|
--color-accent-dark: #6a7bd6;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
|
|
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.07), 0 6px 12px rgba(0, 0, 0, 0.05);
|
|
--shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06);
|
|
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
/* ==================== Color Themes ==================== */
|
|
|
|
/* 方案一：仿纸暖黄（最经典护眼）*/
|
|
[data-color-theme='paper'] {
|
|
--color-bg-primary: #F5ECD7;
|
|
--color-bg-secondary: #F0EBE3;
|
|
--color-bg-tertiary: #FBF8F2;
|
|
--color-bg-elevated: #FFFFFF;
|
|
--color-bg-subtle: #EDE4D0; /* 比主背景略深 */
|
|
|
|
--color-text-primary: #3E3A35;
|
|
--color-text-secondary: #5A5650;
|
|
--color-text-muted: #8B8580;
|
|
--color-text-inverse: #F5ECD7;
|
|
|
|
--color-border: #D9D0C1;
|
|
--color-border-light: #E5DDD0;
|
|
--color-border-focus: #C9C0B1;
|
|
|
|
--color-accent: #8B9A6B;
|
|
--color-accent-hover: #7A895A;
|
|
--color-accent-active: #697849;
|
|
--color-accent-light: rgba(139, 154, 107, 0.15);
|
|
--color-accent-ultra-light: rgba(139, 154, 107, 0.08);
|
|
|
|
--color-scrollbar: #B8B0A0;
|
|
--color-scrollbar-hover: #9A9282;
|
|
|
|
--gradient-primary: linear-gradient(135deg, #8B9A6B 0%, #A68B5B 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(139, 154, 107, 0.08) 0%, transparent 100%);
|
|
}
|
|
|
|
/* 方案二：现代清爽（极浅灰白）*/
|
|
[data-color-theme='modern'] {
|
|
--color-bg-primary: #F8F8F8;
|
|
--color-bg-secondary: #F2F2F2;
|
|
--color-bg-tertiary: #FFFFFF;
|
|
--color-bg-elevated: #FFFFFF;
|
|
--color-bg-subtle: #F0F0F0; /* 比主背景略深 */
|
|
|
|
--color-text-primary: #2C2C2C;
|
|
--color-text-secondary: #5A5A5A;
|
|
--color-text-muted: #999999;
|
|
--color-text-inverse: #F8F8F8;
|
|
|
|
--color-border: #E0E0E0;
|
|
--color-border-light: #EBEBEB;
|
|
--color-border-focus: #D0D0D0;
|
|
|
|
--color-accent: #4A9FB0;
|
|
--color-accent-hover: #3A8FA0;
|
|
--color-accent-active: #2A7F90;
|
|
--color-accent-light: rgba(74, 159, 176, 0.12);
|
|
--color-accent-ultra-light: rgba(74, 159, 176, 0.06);
|
|
|
|
--color-scrollbar: #BBBBBB;
|
|
--color-scrollbar-hover: #999999;
|
|
|
|
--gradient-primary: linear-gradient(135deg, #4A9FB0 0%, #5B8FB0 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(74, 159, 176, 0.05) 0%, transparent 100%);
|
|
}
|
|
|
|
/* 方案三：夜间暗色（黑底灰字）*/
|
|
[data-color-theme='dark'] {
|
|
--color-bg-primary: #1E1E1E;
|
|
--color-bg-secondary: #252526;
|
|
--color-bg-tertiary: #2D2D30;
|
|
--color-bg-elevated: #333336;
|
|
--color-bg-subtle: #252526; /* 比主背景略亮 */
|
|
|
|
--color-text-primary: #BDBBB6;
|
|
--color-text-secondary: #9E9E9E;
|
|
--color-text-muted: #757575;
|
|
--color-text-inverse: #1E1E1E;
|
|
|
|
--color-border: #3E3E40;
|
|
--color-border-light: #333335;
|
|
--color-border-focus: #4E4E50;
|
|
|
|
--color-accent: #D4A76A;
|
|
--color-accent-hover: #C4975A;
|
|
--color-accent-active: #B4874A;
|
|
--color-accent-light: rgba(212, 167, 106, 0.15);
|
|
--color-accent-ultra-light: rgba(212, 167, 106, 0.08);
|
|
|
|
--color-scrollbar: #666666;
|
|
--color-scrollbar-hover: #888888;
|
|
|
|
--gradient-primary: linear-gradient(135deg, #D4A76A 0%, #6A8CA8 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(212, 167, 106, 0.05) 0%, transparent 100%);
|
|
}
|
|
|
|
/* 方案四：豆沙绿（自然疗愈）*/
|
|
[data-color-theme='green'] {
|
|
--color-bg-primary: #DCE5D9;
|
|
--color-bg-secondary: #E8EFE6;
|
|
--color-bg-tertiary: #F4F9F2;
|
|
--color-bg-elevated: #FFFFFF;
|
|
--color-bg-subtle: #D0D9CD; /* 比主背景略深 */
|
|
|
|
--color-text-primary: #2B3330;
|
|
--color-text-secondary: #4A5550;
|
|
--color-text-muted: #7A8580;
|
|
--color-text-inverse: #DCE5D9;
|
|
|
|
--color-border: #C0CFBB;
|
|
--color-border-light: #D0DFCB;
|
|
--color-border-focus: #B0BFAB;
|
|
|
|
--color-accent: #7D9B7A;
|
|
--color-accent-hover: #6D8B6A;
|
|
--color-accent-active: #5D7B5A;
|
|
--color-accent-light: rgba(125, 155, 122, 0.15);
|
|
--color-accent-ultra-light: rgba(125, 155, 122, 0.08);
|
|
|
|
--color-scrollbar: #A0B09D;
|
|
--color-scrollbar-hover: #889885;
|
|
|
|
--gradient-primary: linear-gradient(135deg, #7D9B7A 0%, #6E8B6B 100%);
|
|
--gradient-subtle: linear-gradient(180deg, rgba(125, 155, 122, 0.08) 0%, transparent 100%);
|
|
}
|