130 lines
3.5 KiB
CSS
130 lines
3.5 KiB
CSS
:root {
|
|
/* 浅色模式变量 */
|
|
/* 主色 */
|
|
--primary-color: #165DFF;
|
|
--primary-light: #E8F0FF;
|
|
--primary-dark: #0E42D2;
|
|
|
|
/* 辅助色 */
|
|
--success-color: #00B42A;
|
|
--warning-color: #FF7D00;
|
|
--error-color: #F53F3F;
|
|
--info-color: #86909C;
|
|
|
|
/* 中性色 */
|
|
--text-dark: #1D2129;
|
|
--text-primary: #1D2129;
|
|
--text-medium: #4E5969;
|
|
--text-light: #86909C;
|
|
--border-color: #C9CDD4;
|
|
--bg-light: #F7F8FA;
|
|
--bg-medium: #F2F3F5;
|
|
--bg-white: #FFFFFF;
|
|
|
|
/* 运行时布局变量默认值，避免首次渲染闪动 */
|
|
--sidebar-width: 280px;
|
|
--tree-toggle-width: 81px;
|
|
|
|
/* 布局 */
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
|
|
/* 圆角 */
|
|
--border-radius-sm: 4px;
|
|
--border-radius-md: 8px;
|
|
--border-radius-lg: 12px;
|
|
|
|
/* 间距 */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
}
|
|
|
|
/* 深色模式变量 */
|
|
.dark-mode {
|
|
/* 主色 */
|
|
--primary-color: #4080FF;
|
|
--primary-light: rgba(64, 128, 255, 0.2);
|
|
--primary-dark: #6699FF;
|
|
|
|
/* 辅助色 */
|
|
--success-color: #33D17A;
|
|
--warning-color: #FF9800;
|
|
--error-color: #FF5252;
|
|
--info-color: #9E9E9E;
|
|
|
|
/* 中性色 */
|
|
--text-dark: #F5F5F5;
|
|
--text-primary: #F5F5F5;
|
|
--text-medium: #DCDCDC;
|
|
--text-light: #A9A9A9;
|
|
--border-color: #333333;
|
|
--bg-light: #121212;
|
|
--bg-medium: #1E1E1E;
|
|
--bg-white: #1E1E1E;
|
|
|
|
/* 输入框和下拉列表 */
|
|
--input-bg: #2D2D2D;
|
|
--input-border: #333333;
|
|
--input-text: #DCDCDC;
|
|
--input-placeholder: #A9A9A9;
|
|
--select-bg: #2D2D2D;
|
|
--select-border: #333333;
|
|
--select-text: #DCDCDC;
|
|
--select-option-bg: #2D2D2D;
|
|
--select-option-hover: #3A3A3A;
|
|
|
|
/* 布局 */
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
|
|
/* Element Plus 组件级变量 — 消除 !important 覆盖 */
|
|
--el-color-primary: var(--primary-color);
|
|
--el-color-primary-light-9: var(--primary-light);
|
|
--el-fill-color-blank: var(--bg-white);
|
|
--el-fill-color-light: var(--select-option-hover);
|
|
--el-bg-color-overlay: var(--select-option-bg);
|
|
--el-text-color-primary: var(--text-dark);
|
|
--el-text-color-regular: var(--text-medium);
|
|
--el-text-color-secondary: var(--text-light);
|
|
--el-text-color-placeholder: var(--input-placeholder);
|
|
--el-border-color: var(--border-color);
|
|
--el-border-color-light: var(--border-color);
|
|
--el-mask-color: rgba(16, 18, 22, 0.72);
|
|
|
|
--el-input-bg-color: var(--input-bg);
|
|
--el-input-text-color: var(--input-text);
|
|
--el-input-border-color: var(--input-border);
|
|
--el-input-placeholder-color: var(--input-placeholder);
|
|
|
|
--el-card-bg-color: var(--bg-white);
|
|
--el-card-border-color: var(--border-color);
|
|
|
|
--el-dialog-bg-color: var(--bg-white);
|
|
|
|
--el-menu-bg-color: var(--bg-white);
|
|
--el-menu-text-color: var(--text-medium);
|
|
--el-menu-hover-bg-color: var(--bg-medium);
|
|
--el-menu-hover-text-color: var(--primary-color);
|
|
--el-menu-active-color: var(--primary-color);
|
|
|
|
--el-switch-on-color: #3a7afe;
|
|
--el-switch-off-color: #3a3a3a;
|
|
|
|
--el-dropdown-menu-bg-color: var(--bg-white);
|
|
--el-dropdown-menuItem-hover-fill: var(--select-option-hover);
|
|
|
|
--el-messagebox-title-color: var(--text-dark);
|
|
--el-messagebox-content-color: var(--text-dark);
|
|
|
|
--el-loading-fill-color: rgba(16, 18, 22, 0.72);
|
|
|
|
--hover-overlay: rgba(255, 255, 255, 0.08);
|
|
--selected-overlay: rgba(64, 128, 255, 0.2);
|
|
--loading-overlay: rgba(11, 17, 26, 0.72);
|
|
}
|