77 lines
3.3 KiB
CSS
77 lines
3.3 KiB
CSS
/* 甘特图组件主题变量 */
|
||
|
||
/* 明亮主题 */
|
||
:root {
|
||
/* 背景色 - 原始的浅色设计 */
|
||
--gantt-bg-primary: #ffffff; /* 最浅背景 - body主体 */
|
||
--gantt-bg-secondary: #f5f7fa; /* Header背景 - 浅色 */
|
||
--gantt-bg-tertiary: #f9f9f9; /* 三级背景 - 父任务 */
|
||
--gantt-bg-hover: rgba(225, 228, 231, 0.2); /* 悬停背景 - 普通任务，增加透明度 */
|
||
--gantt-bg-hover-parent: rgba(245, 247, 250, 0.8); /* 悬停背景 - 父任务，稍高透明度 */
|
||
--gantt-bg-toolbar: #f8f9fa; /* 工具栏背景 - 中性浅色 */
|
||
|
||
/* 文字颜色 */
|
||
--gantt-text-primary: #333333;
|
||
--gantt-text-secondary: #8d9095;
|
||
--gantt-text-muted: #909399;
|
||
--gantt-text-white: #ffffff;
|
||
--gantt-text-header: #333333; /* Header文字颜色 - 明亮模式下Header为浅色背景，使用深色文字 */
|
||
|
||
/* 边框颜色 */
|
||
--gantt-border-light: #ebeef5;
|
||
--gantt-border-medium: #dcdfe6; /* Header边框 - 与浅色Header搭配 */
|
||
--gantt-border-dark: #c0c4cc;
|
||
--gantt-border-color: #dcdfe6; /* 通用边框色，与按钮边框一致 */
|
||
|
||
/* 强调色 */
|
||
--gantt-primary: #409eff;
|
||
--gantt-primary-light: #ecf5ff;
|
||
--gantt-success: #67c23a;
|
||
--gantt-warning: #e6a23c;
|
||
--gantt-warning-light: #f5dab1;
|
||
--gantt-danger: #f56c6c;
|
||
--gantt-danger-light: #fab6b6; /* 里程碑边框浅红色 */
|
||
|
||
/* 滚动条 */
|
||
--gantt-scrollbar-thumb: #c1c1c1;
|
||
--gantt-scrollbar-thumb-hover: #a8a8a8;
|
||
}
|
||
|
||
/* 暗黑主题 */
|
||
.gantt-root[data-theme='dark'] {
|
||
/* 背景色 - 大幅提升亮度，接近中性灰 */
|
||
--gantt-bg-primary: #6b6b6b; /* Body主体 - 明显更亮，接近中性灰 */
|
||
--gantt-bg-secondary: #4b4b4b; /* Header背景 - 中等亮度，保持层次 */
|
||
--gantt-bg-tertiary: #7b7b7b; /* 三级背景 - 父任务，最亮的背景 */
|
||
--gantt-bg-hover: rgba(180, 180, 180, 0.35); /* 悬停背景 - 明亮的悬停效果 */
|
||
--gantt-bg-hover-parent: rgba(140, 140, 140, 0.8); /* 悬停背景 - 父任务 */
|
||
--gantt-bg-toolbar: #5b5b5b; /* 工具栏背景 - 与Body背景保持协调 */
|
||
|
||
/* 文字颜色 - 最大化对比度，确保清晰可读 */
|
||
--gantt-text-primary: #ffffff; /* 主要文字纯白 */
|
||
--gantt-text-secondary: #f8f8f8; /* 次要文字接近纯白 */
|
||
--gantt-text-muted: #e0e0e0; /* 弱化文字保持高可读性 */
|
||
--gantt-text-white: #ffffff; /* 纯白 */
|
||
--gantt-text-parent: #ffffff; /* 父任务文字纯白 */
|
||
--gantt-text-header: #ffffff; /* Header文字纯白 */
|
||
|
||
/* 边框颜色 - 高对比度分界线 */
|
||
--gantt-border-light: #888888; /* body内边框 - 高可见性 */
|
||
--gantt-border-medium: #666666; /* header边框 - 中等对比 */
|
||
--gantt-border-dark: #999999; /* 强调边框 - 最清晰 */
|
||
--gantt-border-color: #808080; /* 通用边框色，高可见性 */
|
||
|
||
/* 强调色 - 鲜艳醒目，在亮灰背景上突出 */
|
||
--gantt-primary: #3399ff; /* 鲜艳的蓝色，在亮灰背景上突出 */
|
||
--gantt-primary-light: #4d6699; /* 深蓝背景 */
|
||
--gantt-success: #66cc33; /* 鲜艳的绿色 */
|
||
--gantt-warning: #ff9933; /* 鲜艳的橙色 */
|
||
--gantt-warning-light: #cc7722; /* 深橙背景 */
|
||
--gantt-danger: #ff4444; /* 鲜艳的红色 */
|
||
--gantt-danger-light: #cc3333; /* 深红背景，里程碑边框 */
|
||
|
||
/* 滚动条 - 高可见性 */
|
||
--gantt-scrollbar-thumb: #888888; /* 明亮的滚动条 */
|
||
--gantt-scrollbar-thumb-hover: #999999; /* 悬停时更亮 */
|
||
}
|