mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-29 05:50:50 +00:00
191 lines
7.9 KiB
SCSS
191 lines
7.9 KiB
SCSS
/* 深色模式样式
|
||
------------------------------- */
|
||
[data-theme='dark'] {
|
||
--prev-bg-menuBar: #191919 !important;
|
||
--prev-bg-menuBarColor: #dadada !important;
|
||
--prev-bg-topBar: #191919 !important;
|
||
--prev-bg-topBarColor: #dadada !important;
|
||
--prev-bg-columnsMenuBar: #191919 !important;
|
||
--prev-bg-columnsMenuBarColor: #dadada !important;
|
||
/* 换肤（setLocalTheme）会按主题行内写入浅色 hover 底（#e5eeff/#ecf8f3 等），深色下需压制 */
|
||
--prev-bg-menu-hover-ba-color: rgba(255, 255, 255, 0.1) !important;
|
||
--prev-bg-main-color: #1f1f1f !important;
|
||
--prev-bg-color: rgba(0, 0, 0, 0.3) !important;
|
||
--prev-bg-white: #191919 !important;
|
||
--prev-color-text-black: #ffffff !important;
|
||
--prev-color-text-primary: #dadada !important;
|
||
--prev-color-text-regular: #dadada !important;
|
||
--prev-color-text-secondary: #a3a3a3 !important;
|
||
--prev-color-hover: rgba(0, 0, 0, 0.3) !important;
|
||
--prev-color-seting-main: #505050 !important;
|
||
--prev-color-seting-aside: #3c3c3c !important;
|
||
--prev-color-seting-header: #303030 !important;
|
||
--prev-border-color-hover: #616161 !important;
|
||
--prev-border-color-base: #333333 !important;
|
||
--prev-border-color-light: #333333 !important;
|
||
--prev-border-color-lighter: #333333 !important;
|
||
--prev-border-color-extra-light: #333333 !important;
|
||
|
||
/* 主色浅色阶暗色档：与 app.scss 浅色档同算法（color-mix），混色底由白色换成暗底
|
||
#141414（Element Plus 官方深色变量同款底色）。表头（app.scss 的
|
||
--el-table-header-bg-color）、选中行、标签浅底等引用方自动跟随；
|
||
行内主色换肤时 color-mix 同样自动重算，无需 JS 参与 */
|
||
--prev-color-primary-light-1: color-mix(in srgb, var(--prev-color-primary) 90%, #141414);
|
||
--prev-color-primary-light-2: color-mix(in srgb, var(--prev-color-primary) 80%, #141414);
|
||
--prev-color-primary-light-3: color-mix(in srgb, var(--prev-color-primary) 70%, #141414);
|
||
--prev-color-primary-light-4: color-mix(in srgb, var(--prev-color-primary) 60%, #141414);
|
||
--prev-color-primary-light-5: color-mix(in srgb, var(--prev-color-primary) 50%, #141414);
|
||
--prev-color-primary-light-6: color-mix(in srgb, var(--prev-color-primary) 40%, #141414);
|
||
--prev-color-primary-light-7: color-mix(in srgb, var(--prev-color-primary) 30%, #141414);
|
||
--prev-color-primary-light-8: color-mix(in srgb, var(--prev-color-primary) 20%, #141414);
|
||
--prev-color-primary-light-9: color-mix(in srgb, var(--prev-color-primary) 10%, #141414);
|
||
|
||
// menu
|
||
.layout-aside {
|
||
border-right: 1px solid var(--prev-border-color-lighter) !important;
|
||
}
|
||
|
||
// drawer
|
||
.el-drawer {
|
||
border-left: 1px solid var(--prev-border-color-lighter) !important;
|
||
}
|
||
|
||
// button
|
||
.el-button--default {
|
||
background: var(--prev-bg-white);
|
||
color: var(--prev-color-text-primary);
|
||
border-color: var(--prev-border-color-lighter);
|
||
&:hover,
|
||
&:focus {
|
||
color: var(--prev-color-primary) !important;
|
||
background: var(--prev-color-primary-light-8) !important;
|
||
border-color: var(--prev-color-primary-light-6) !important;
|
||
}
|
||
&:focus {
|
||
border-color: var(--prev-color-primary-light-1) !important;
|
||
}
|
||
&:active {
|
||
border-color: var(--prev-color-primary-light-6) !important;
|
||
}
|
||
}
|
||
|
||
// tag
|
||
.el-tag.el-tag--info {
|
||
background-color: var(--prev-bg-white) !important;
|
||
border-color: var(--prev-border-color-light) !important;
|
||
color: var(--prev-color-text-regular) !important;
|
||
}
|
||
|
||
// table：暗色下 --prev-bg-color 为半透明（rgba(0,0,0,0.3)），悬浮行需不透明，
|
||
// 否则 sticky 固定列会透出底层滚动单元格文字（rgba(0,0,0,0.3) 叠加 #191919 的实色等效值）
|
||
.el-table {
|
||
--el-table-row-hover-bg-color: #121212;
|
||
}
|
||
|
||
// switch
|
||
.el-switch:not(.is-checked) {
|
||
.el-switch__core {
|
||
border-color: var(--prev-border-color-base) !important;
|
||
background-color: var(--prev-border-color-base) !important;
|
||
}
|
||
}
|
||
|
||
// TimePicker
|
||
.el-time-spinner__item.active:not(.disabled) {
|
||
color: var(--prev-color-primary) !important;
|
||
}
|
||
|
||
// date
|
||
.el-date-table td.in-range div,
|
||
.el-date-table td.in-range div:hover,
|
||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||
.el-date-table td.selected div,
|
||
.el-month-table td.in-range div,
|
||
.el-month-table td.in-range div:hover {
|
||
background-color: var(--prev-bg-color) !important;
|
||
}
|
||
|
||
// transfer
|
||
.el-transfer-panel,
|
||
.el-transfer-panel .el-transfer-panel__header {
|
||
background-color: var(--prev-bg-color) !important;
|
||
}
|
||
|
||
// loading
|
||
.el-loading-mask {
|
||
background-color: var(--prev-bg-color) !important;
|
||
}
|
||
|
||
// dropdown
|
||
.el-dropdown-menu__item:focus,
|
||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||
background-color: var(--prev-color-hover) !important;
|
||
}
|
||
|
||
// dialog
|
||
.el-dialog,
|
||
.el-calendar {
|
||
border: 1px solid var(--prev-border-color-lighter);
|
||
}
|
||
|
||
// 底部固定提交卡：浅色为白色毛玻璃，深色换黑色毛玻璃（style.scss 同规则带 !important，
|
||
// 此处块内选择器特异性更高，可覆盖）
|
||
.fixed-card {
|
||
background-color: rgba(25, 25, 25, 0.6) !important;
|
||
}
|
||
|
||
// AI 对话工作台：会话面板底改不透明层次色。
|
||
// 浅色档 --prev-bg-color 是实色，深色档是 rgba(0,0,0,0.3) 半透明，
|
||
// 面板用半透明底会随下垫内容/页面底色变化产生观感分层
|
||
.conversation-panel {
|
||
background-color: #202020;
|
||
}
|
||
|
||
// form-create 上传占位框（elm-frame/elm-upload 组件默认 #fff 底 + #c0ccda 边）
|
||
._fc-frame ._fc-upload-btn,
|
||
._fc-frame ._fc-files,
|
||
._fc-upload ._fc-upload-btn,
|
||
._fc-upload ._fc-files {
|
||
background-color: var(--prev-bg-white) !important;
|
||
border-color: var(--prev-border-color-base) !important;
|
||
}
|
||
}
|
||
|
||
/* Element Plus 官方深色变量重桥接
|
||
------------------------------- */
|
||
/* main.js 引入的官方 dark/css-vars.css 挂在 html.dark（特异性 0,1,1）上，会：
|
||
1. 把主色系接管为 EP 默认蓝 #409eff，与项目主色（默认 #0256FF）漂移；
|
||
2. 把 --el-bg-color 系接管为 #141414 体系，与本项目 #191919 深色体系并存两种黑。
|
||
此处以同特异性 html[data-theme='dark'] 重桥接回 --prev-* 体系（本文件后于官方
|
||
文件加载，同特异性按源顺序胜出）；未列出的官方深色值（语义色 light 阶、遮罩、
|
||
阴影、fill-color/-lighter 等）保持官方值兜底 */
|
||
html[data-theme='dark'] {
|
||
/* 背景体系：统一回 #191919（卡片/弹层/表格行底/输入框内底） */
|
||
--el-bg-color: var(--prev-bg-white);
|
||
--el-bg-color-overlay: var(--prev-bg-white);
|
||
--el-fill-color-blank: var(--prev-bg-white);
|
||
--el-fill-color-light: var(--prev-color-hover);
|
||
|
||
/* 文本体系 */
|
||
--el-text-color-primary: var(--prev-color-text-primary);
|
||
--el-text-color-regular: var(--prev-color-text-regular);
|
||
--el-text-color-secondary: var(--prev-color-text-secondary);
|
||
--el-text-color-placeholder: var(--prev-color-text-placeholder);
|
||
|
||
/* 边框体系 */
|
||
--el-border-color: var(--prev-border-color-base);
|
||
--el-border-color-light: var(--prev-border-color-light);
|
||
--el-border-color-lighter: var(--prev-border-color-lighter);
|
||
--el-border-color-extra-light: var(--prev-border-color-extra-light);
|
||
|
||
/* 主色系：浅色阶向暗底 #141414 混色（同 EP 官方深色算法），保持项目主色不漂移 */
|
||
--el-color-primary: var(--prev-color-primary);
|
||
--el-color-primary-light-3: color-mix(in srgb, var(--prev-color-primary) 70%, #141414);
|
||
--el-color-primary-light-5: color-mix(in srgb, var(--prev-color-primary) 50%, #141414);
|
||
--el-color-primary-light-7: color-mix(in srgb, var(--prev-color-primary) 30%, #141414);
|
||
--el-color-primary-light-8: color-mix(in srgb, var(--prev-color-primary) 20%, #141414);
|
||
--el-color-primary-light-9: color-mix(in srgb, var(--prev-color-primary) 10%, #141414);
|
||
--el-color-primary-dark-2: color-mix(in srgb, var(--prev-color-primary) 80%, #000000);
|
||
}
|