// base color
|
$blue: #324157;
|
$light-blue: #333c46;
|
$red: #c03639;
|
$pink: #e65d6e;
|
$green: #30b08f;
|
$tiffany: #4ab7bd;
|
$yellow: #fec171;
|
$panGreen: #30b08f;
|
|
// menu palette - 使用主题色
|
$menuText: #5a6478;
|
$menuActiveText: #ffffff;
|
$menuBg: #f8fafb;
|
$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
|
|
// light theme - 使用主题色
|
$menuLightBg: #f8fafb;
|
$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
|
$menuLightText: #3d4858;
|
$menuLightActiveText: #ffffff;
|
|
// layout
|
$base-sidebar-width: 216px;
|
$base-sidebar-collapsed-width: 72px;
|
$sideBarWidth: 216px;
|
|
// sidebar - 优化后的侧边栏配色
|
$base-menu-color: #5a6478;
|
$base-menu-color-active: #0d9488;
|
$base-menu-background: #f8fafb;
|
$base-sub-menu-background: #f0f5f4;
|
$base-sub-menu-hover: #ffffff;
|
|
// component - 优化后的主题色
|
$--color-primary: #0d9488;
|
$--color-success: #67c23a;
|
$--color-warning: #d89b41;
|
$--color-danger: #d25b52;
|
$--color-info: #7d8797;
|
|
:export {
|
menuText: $menuText;
|
menuActiveText: $menuActiveText;
|
menuBg: $menuBg;
|
menuHover: $menuHover;
|
menuLightBg: $menuLightBg;
|
menuLightHover: $menuLightHover;
|
menuLightText: $menuLightText;
|
menuLightActiveText: $menuLightActiveText;
|
sideBarWidth: $sideBarWidth;
|
blue: $blue;
|
lightBlue: $light-blue;
|
red: $red;
|
pink: $pink;
|
green: $green;
|
tiffany: $tiffany;
|
yellow: $yellow;
|
panGreen: $panGreen;
|
colorPrimary: $--color-primary;
|
colorSuccess: $--color-success;
|
colorWarning: $--color-warning;
|
colorDanger: $--color-danger;
|
colorInfo: $--color-info;
|
}
|
|
:root {
|
--sidebar-width: 216px;
|
--sidebar-collapsed-width: 72px;
|
--topbar-height: 64px;
|
--tagsbar-height: 40px;
|
--content-gap: 16px;
|
--content-radius: 16px;
|
--layout-header-z: 20;
|
|
--el-color-primary: #2563eb;
|
--el-color-primary-rgb: 37, 99, 235;
|
--el-color-success: #14b8a6;
|
--el-color-warning: #f59e0b;
|
--el-color-danger: #ef4444;
|
|
--sidebar-bg: linear-gradient(180deg, #0e2a4f 0%, #123e69 55%, #0e2a4f 100%);
|
--sidebar-text: rgba(234, 242, 255, 0.82);
|
--sidebar-muted: rgba(234, 242, 255, 0.82);
|
--menu-hover: rgba(147, 197, 253, 0.2);
|
--menu-active-bg: linear-gradient(135deg, #2f80ff 0%, #38bdf8 100%);
|
--menu-active-text: #f8fbff;
|
--menu-surface: linear-gradient(180deg, rgba(13, 43, 79, 0.97) 0%, rgba(8, 28, 52, 0.94) 100%);
|
--menu-active-glow: 0 8px 18px rgba(56, 139, 255, 0.28);
|
|
--app-bg: #f3f7fc;
|
--app-bg-accent: #eef5ff;
|
--surface-base: rgba(255, 255, 255, 0.92);
|
--surface-soft: rgba(255, 255, 255, 0.88);
|
--surface-muted: #f5f9ff;
|
--surface-border: rgba(148, 163, 184, 0.18);
|
--surface-border-strong: rgba(96, 165, 250, 0.34);
|
--text-primary: #1e293b;
|
--text-secondary: #334155;
|
--text-tertiary: #64748b;
|
--shadow-sm: 0 12px 32px rgba(15, 23, 42, 0.06);
|
--shadow-md: 0 20px 42px rgba(15, 23, 42, 0.1);
|
--shadow-menu: 0 16px 36px rgba(8, 27, 58, 0.26);
|
--radius-lg: 20px;
|
--radius-md: 16px;
|
--radius-sm: 12px;
|
--radius-xs: 10px;
|
|
--navbar-bg: rgba(255, 255, 255, 0.86);
|
--navbar-text: #1f3658;
|
--navbar-hover: rgba(37, 99, 235, 0.08);
|
|
--tags-bg: transparent;
|
--tags-item-bg: rgba(255, 255, 255, 0.9);
|
--tags-item-border: rgba(148, 163, 184, 0.22);
|
--tags-item-text: #334155;
|
--tags-item-hover: #f4f8ff;
|
--tags-close-hover: rgba(37, 99, 235, 0.16);
|
|
--accent-primary: #2563eb;
|
--accent-light: #3b82f6;
|
--accent-lighter: #60a5fa;
|
|
--panel-mask: rgba(255, 255, 255, 0.88);
|
--panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
|
--splitpanes-default-bg: #f3f7fc;
|
}
|
|
html.dark {
|
--el-bg-color: #f8fbff;
|
--el-bg-color-overlay: #f3f7fd;
|
--el-text-color-primary: #1e293b;
|
--el-text-color-regular: #475569;
|
--el-border-color: rgba(148, 163, 184, 0.2);
|
--el-border-color-light: rgba(148, 163, 184, 0.18);
|
|
--sidebar-bg: linear-gradient(180deg, #0e2a4f 0%, #123e69 55%, #0e2a4f 100%);
|
--sidebar-text: rgba(234, 242, 255, 0.82);
|
--sidebar-muted: rgba(234, 242, 255, 0.82);
|
--menu-hover: rgba(147, 197, 253, 0.2);
|
--menu-active-bg: linear-gradient(135deg, #2f80ff 0%, #38bdf8 100%);
|
--menu-active-text: #f8fbff;
|
--menu-surface: linear-gradient(180deg, rgba(13, 43, 79, 0.97) 0%, rgba(8, 28, 52, 0.94) 100%);
|
|
--text-primary: #1e293b;
|
--text-secondary: #334155;
|
--text-tertiary: #64748b;
|
--accent-primary: #2563eb;
|
--accent-light: #3b82f6;
|
|
--navbar-bg: rgba(255, 255, 255, 0.86);
|
--navbar-text: #1f3658;
|
--navbar-hover: rgba(37, 99, 235, 0.08);
|
|
--tags-bg: transparent;
|
--tags-item-bg: rgba(255, 255, 255, 0.9);
|
--tags-item-border: rgba(148, 163, 184, 0.22);
|
--tags-item-text: #334155;
|
--tags-item-hover: #f4f8ff;
|
--tags-close-hover: rgba(37, 99, 235, 0.16);
|
|
--splitpanes-bg: #f3f7fc;
|
--splitpanes-border: rgba(148, 163, 184, 0.22);
|
--splitpanes-splitter-bg: #e7eef8;
|
--splitpanes-splitter-hover-bg: #d9e6f7;
|
|
--blockquote-bg: #f3f7ff;
|
--blockquote-border: rgba(59, 130, 246, 0.36);
|
--blockquote-text: #334155;
|
--cron-border: rgba(148, 163, 184, 0.22);
|
--splitpanes-default-bg: #f3f7fc;
|
|
.sidebar-container {
|
.el-menu-item,
|
.menu-title {
|
color: var(--sidebar-text);
|
}
|
|
.el-menu-item.is-active,
|
.el-menu-item.is-active .menu-title {
|
color: var(--menu-active-text) !important;
|
}
|
|
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
& .theme-dark .el-sub-menu .el-menu-item {
|
background-color: var(--el-bg-color) !important;
|
}
|
|
& .theme-dark .el-sub-menu .el-menu-item.is-active {
|
background-color: var(--menu-active-bg) !important;
|
}
|
}
|
|
.el-menu--horizontal {
|
.el-menu-item {
|
&:not(.is-disabled) {
|
&:hover,
|
&:focus {
|
background-color: var(--navbar-hover) !important;
|
}
|
}
|
}
|
}
|
|
.splitpanes {
|
background-color: var(--splitpanes-bg);
|
|
.splitpanes__pane {
|
background-color: var(--splitpanes-bg);
|
border-color: var(--splitpanes-border);
|
}
|
|
.splitpanes__splitter {
|
background-color: var(--splitpanes-splitter-bg);
|
border-color: var(--splitpanes-border);
|
|
&:hover {
|
background-color: var(--splitpanes-splitter-hover-bg);
|
}
|
|
&:before,
|
&:after {
|
background-color: var(--splitpanes-border);
|
}
|
}
|
}
|
|
.el-table {
|
--el-table-header-bg-color: var(--el-bg-color-overlay) !important;
|
--el-table-header-text-color: var(--el-text-color-regular) !important;
|
--el-table-border-color: var(--el-border-color-light) !important;
|
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
|
|
.el-table__header-wrapper,
|
.el-table__fixed-header-wrapper {
|
th {
|
background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
|
color: var(--el-text-color-regular, #515a6e);
|
}
|
}
|
}
|
|
.el-tree {
|
.el-tree-node.is-current > .el-tree-node__content {
|
background-color: var(--el-bg-color-overlay) !important;
|
color: var(--el-color-primary);
|
}
|
|
.el-tree-node__content:hover {
|
background-color: var(--el-bg-color-overlay);
|
}
|
}
|
|
.el-dropdown-menu__item:not(.is-disabled):focus,
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
background-color: var(--navbar-hover) !important;
|
}
|
|
blockquote {
|
background-color: var(--blockquote-bg) !important;
|
border-left-color: var(--blockquote-border) !important;
|
color: var(--blockquote-text) !important;
|
}
|
|
.popup-result .title {
|
background: var(--cron-border);
|
}
|
}
|
