208 lines
7.2 KiB
SCSS
208 lines
7.2 KiB
SCSS
// 浅色模式
|
|
:root {
|
|
--color-bg: #ffffff;
|
|
--color-bg-secondary: #ffffff;
|
|
--color-bg-tertiary: #f0f0f0; //正确
|
|
--color-bg-quaternary: rgba(0, 0, 0, 11%);
|
|
--color-bg-quinary: #f7f7f7;
|
|
--color-text: #36404F;
|
|
// 标题文字颜色
|
|
--color-text-title-header: #262626;
|
|
--color-text-secondary: #4f4f4f;
|
|
--color-border-default: #e0e0e0;
|
|
--color-accent: #222222;
|
|
--color-accent-secondary: #315ab4;
|
|
// 鼠标悬浮背景色
|
|
--color-bg-hover: #f0f0f0;
|
|
// 鼠标悬浮字体颜色
|
|
--color-text-hover: #222222;
|
|
// 分割线颜色
|
|
--color-border: #D8D8d8;
|
|
// 内容区鼠标悬浮颜色
|
|
--color-bg-content-hover: #f0f0f0;
|
|
//列表背景颜色
|
|
--color-bg-list: #E1E1E1;
|
|
// 详情卡文字内容
|
|
--color-text-detail: #4f4f4f;
|
|
// 详情卡背景颜色
|
|
--color-bg-detail: #f7f7f7;
|
|
// 任务栏背景颜色
|
|
--color-bg-taskbar: #ffffff;
|
|
// 详情列表背景颜色
|
|
--color-bg-detail-list: rgba(230, 230, 230, 0.6) ;//#E6E6E6 60%
|
|
// 详情列表运行后背景颜色
|
|
--color-bg-detail-list-run: #e6e6e6; //运行后背景色#e6e6e6 100%
|
|
// 旋转图标背景颜色
|
|
--color-bg-icon-rotate: #a7a7a7;
|
|
// 智能体列表背景颜色
|
|
--color-agent-list-bg: #ededed; //背景色#fbfcff
|
|
// 智能体边框颜色
|
|
--color-agent-list-border: #E0E0E070; //边框#FFFFFF60 60%
|
|
//智能体鼠标悬浮颜色
|
|
--color-agent-list-hover-bg: #f7f7f7; //hover背景色#FFFFFF 100%
|
|
// 智能体鼠标悬浮边框颜色
|
|
--color-agent-list-hover-border: #e0e0e0; //hover边框#E0E0E0 100%
|
|
//智能体鼠标悬浮阴影
|
|
--color-agent-list-hover-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); //hover阴影 #FFFFFF 100%
|
|
//任务框下拉阴影
|
|
--color-task-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.2);
|
|
// 卡片边框颜色
|
|
--color-card-border: #ececec;
|
|
// 卡片鼠标悬浮边框颜色
|
|
--color-card-border-hover: #ececec;
|
|
// 任务大纲卡片颜色
|
|
--color-card-bg-task: #ededed;
|
|
// 任务大纲卡片悬浮颜色
|
|
--color-card-bg-task-hover: #f7f7f7;
|
|
// 任务大纲卡片悬浮阴影效果
|
|
--color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
|
|
// 卡片阴影效果
|
|
--color-card-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.17);
|
|
// 任务大纲边框颜色
|
|
--color-card-border-task: #E0E0E0; //边框颜色#FFFFFF60
|
|
// 执行结果卡片颜色
|
|
--color-card-bg-result: #ececec;
|
|
// 执行结果边框颜色
|
|
--color-card-border-result: #ececec;
|
|
// 执行结果卡片悬浮颜色
|
|
--color-card-bg-result-hover: #ededed;
|
|
// 头部背景颜色
|
|
--color-header-bg: #ffffff;
|
|
// 头部字体颜色
|
|
--color-text-title: #2a3342;
|
|
//结果卡背景颜色
|
|
--color-bg-result: #eaedee;
|
|
// 任务字体背景颜色
|
|
--color-text-task: #36404F;
|
|
// 指示灯背景颜色
|
|
--color-bg-indicator: #f7f7f7;
|
|
// 三个卡片背景颜色
|
|
--color-bg-three: #fbfcff;
|
|
// 三个卡片边框颜色
|
|
--color-card-border-three: #FFFFFF60;
|
|
// 流程卡片背景颜色
|
|
--color-bg-flow: #f0f0f0;
|
|
// 三个卡片阴影
|
|
--color-card-shadow-three: 0px 0px 5px 0px rgba(0, 0, 0, 0.17);
|
|
// 头部阴影
|
|
--color-header-shadow: 0px 0px 5px 0px rgba(161, 161, 161, 0.5);
|
|
// 执行结果详情背景颜色
|
|
--color-bg-result-detail: #f7f7f7;
|
|
// 智能体库字体颜色
|
|
--color-text-agent-list: #636364;
|
|
// 智能体库字体悬浮颜色
|
|
--color-text-agent-list-hover: #222222;
|
|
// 任务栏字体颜色
|
|
--color-text-taskbar: #222222;
|
|
// 智能体卡片被选中后背景颜色
|
|
--color-agent-list-selected-bg: #f7f7f7; //选中后背景色#171b22 100%
|
|
// 结果卡片运行前颜色
|
|
--color-text-result-detail: rgba(0,0,0,0.6);
|
|
// 结果卡片运行后颜色
|
|
--color-text-result-detail-run: #000;
|
|
}
|
|
|
|
// 深色模式
|
|
html.dark {
|
|
--color-bg: #131A27;
|
|
--color-bg-secondary: rgba(5, 5, 5, 0.4);
|
|
--color-bg-tertiary: #20222A;
|
|
--color-bg-quaternary: #24252A;
|
|
--color-bg-quinary: #29303c;
|
|
--color-text: #fff;
|
|
// 标题文字颜色
|
|
--color-text-title-header: #ffffff;
|
|
--color-text-secondary: #C9C9C9;
|
|
--color-border-default: #494B51;
|
|
--color-accent: #00F3FF;
|
|
--color-accent-secondary: #315ab4;
|
|
// 鼠标悬浮背景色
|
|
--color-bg-hover: #1c1e25;
|
|
// 鼠标悬浮字体颜色
|
|
--color-text-hover: #00f3ff;
|
|
// 分割线颜色
|
|
--color-border: #494B51;
|
|
// 内容区鼠标悬浮颜色
|
|
--color-bg-content-hover: #171b22;
|
|
// 列表背景颜色
|
|
--color-bg-list: #171B22;
|
|
// 详情卡文字内容
|
|
--color-text-detail: #ffffff;
|
|
// 详情卡背景颜色
|
|
--color-bg-detail: #20222a;
|
|
// 任务栏背景颜色
|
|
--color-bg-taskbar: #20222a;
|
|
// 详情列表背景颜色
|
|
--color-bg-detail-list: #050505; //运行后背景色#18191f 60%
|
|
//详情列表运行后背景颜色
|
|
--color-bg-detail-list-run: #050505;
|
|
// 旋转图标背景颜色
|
|
--color-bg-icon-rotate: #151619;
|
|
// 智能体列表背景颜色
|
|
--color-agent-list-bg: #1d222b; //背景色#181b20 100%
|
|
// 智能体边框颜色
|
|
--color-agent-list-border: rgba(8,8,8,0.6);
|
|
//智能体鼠标悬浮颜色
|
|
--color-agent-list-hover-bg: rgba(23,27,34,1); //hover背景色#171b22 100%
|
|
// 智能体鼠标悬浮边框颜色
|
|
--color-agent-list-hover-border: rgba(8,8,8,1); //hover边框#080808 100%
|
|
//智能体鼠标悬浮阴影
|
|
--color-agent-list-hover-shadow: 0 2 4 #00000050; //hover阴影 0 2 4 #00000050
|
|
//任务框下拉阴影
|
|
--color-task-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.2);
|
|
// 卡片边框颜色
|
|
--color-card-border: #1a1a1a;
|
|
// 卡片鼠标悬浮边框颜色
|
|
--color-card-border-hover: #151515;
|
|
// 任务大纲卡片颜色
|
|
--color-card-bg-task: #20222a;
|
|
// 任务大纲卡片悬浮颜色
|
|
--color-card-bg-task-hover: #171b22;
|
|
// 任务大纲边框颜色
|
|
--color-card-border-task: #151515;
|
|
// 执行结果卡片颜色
|
|
--color-card-bg-result: #1a1a1a;
|
|
// 执行结果边框颜色
|
|
--color-card-border-result: #151515;
|
|
// 执行结果卡片悬浮颜色
|
|
--color-card-bg-result-hover: #171b22;
|
|
// 头部背景颜色
|
|
--color-header-bg: #050505;
|
|
// 标题头部字体颜色
|
|
--color-text-title: #2c72e7;
|
|
// 卡片阴影效果
|
|
--color-card-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.17);
|
|
// 任务大纲卡片悬浮阴影效果
|
|
--color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
|
|
// 结果卡背景颜色
|
|
--color-bg-result: #0d1119;
|
|
// 任务字体背景颜色
|
|
--color-text-task: #d7d7d7;
|
|
// 指示灯背景颜色
|
|
--color-bg-indicator: #17181a;
|
|
// 三个卡片背景颜色
|
|
--color-bg-three: #29303c;
|
|
// 三个卡片边框颜色
|
|
--color-card-border-three: #393d42;
|
|
// 流程卡片背景颜色
|
|
--color-bg-flow: #1C222a;
|
|
// 三个卡片阴影
|
|
--color-card-shadow-three: 0px 0px 6px 0px rgba(0, 0, 0, 0.8);
|
|
// 头部阴影
|
|
--color-header-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
|
|
// 执行结果详情背景颜色
|
|
--color-bg-result-detail: #24252a;
|
|
// 智能体库字体颜色
|
|
--color-text-agent-list: #969696;
|
|
// 智能体库字体悬浮颜色
|
|
--color-text-agent-list-hover: #b8b8b8;
|
|
// 任务栏字体颜色
|
|
--color-text-taskbar: #ffffff;
|
|
// 智能体卡片被选中后背景颜色
|
|
--color-agent-list-selected-bg: #20222a; //选中后背景色#171b22 100%
|
|
// 结果卡片运行前颜色
|
|
--color-text-result-detail: #6c6e72;
|
|
// 结果卡片运行后颜色
|
|
--color-text-result-detail-run: #fff;
|
|
}
|