| | |
| | | // base color
|
| | | $blue: #324157;
|
| | | $light-blue: #333c46;
|
| | | $red: #c03639;
|
| | | $pink: #e65d6e;
|
| | | $green: #30b08f;
|
| | | $tiffany: #4ab7bd;
|
| | | $yellow: #fec171;
|
| | | $panGreen: #30b08f;
|
| | |
|
| | | // 默认主题变量
|
| | | $menuText: #bfcbd9;
|
| | | $menuActiveText: #409eff;
|
| | | $menuBg: #304156;
|
| | | $menuHover: #263445;
|
| | |
|
| | | // 浅色主题theme-light
|
| | | $menuLightBg: #002fa7;
|
| | | $menuLightHover: #f0f1f5;
|
| | | $menuLightText: #fff;
|
| | | $menuLightActiveText: #002fa7;
|
| | |
|
| | | // 基础变量
|
| | | $base-sidebar-width: 200px;
|
| | | $sideBarWidth: 200px;
|
| | |
|
| | | // 菜单暗色变量
|
| | | $base-menu-color: #bfcbd9;
|
| | | $base-menu-color-active: #f4f4f5;
|
| | | $base-menu-background: #304156;
|
| | | $base-sub-menu-background: #1f2d3d;
|
| | | $base-sub-menu-hover: #fff;
|
| | |
|
| | | // 组件变量
|
| | | $--color-primary: #409eff;
|
| | | $--color-success: #67c23a;
|
| | | $--color-warning: #e6a23c;
|
| | | $--color-danger: #f56c6c;
|
| | | $--color-info: #909399;
|
| | |
|
| | | :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;
|
| | | }
|
| | |
|
| | | // CSS变量定义
|
| | | :root {
|
| | | /* 亮色模式变量 */
|
| | | --sidebar-bg: #{$menuBg};
|
| | | --sidebar-text: #{$menuText};
|
| | | --menu-hover: #{$menuHover};
|
| | |
|
| | | --navbar-bg: #ffffff;
|
| | | --navbar-text: #303133;
|
| | |
|
| | | /* splitpanes default-theme 变量 */
|
| | | --splitpanes-default-bg: #ffffff;
|
| | | }
|
| | |
|
| | | // 暗黑模式变量
|
| | | html.dark {
|
| | | /* 默认通用 */
|
| | | --el-bg-color: #141414;
|
| | | --el-bg-color-overlay: #1d1e1f;
|
| | | --el-text-color-primary: #ffffff;
|
| | | --el-text-color-regular: #d0d0d0;
|
| | | --el-border-color: #434343;
|
| | | --el-border-color-light: #434343;
|
| | |
|
| | | /* 侧边栏 */
|
| | | --sidebar-bg: #141414;
|
| | | --sidebar-text: #ffffff;
|
| | | --menu-hover: #2d2d2d;
|
| | | --menu-active-text: #{$menuActiveText};
|
| | |
|
| | | /* 顶部导航栏 */
|
| | | --navbar-bg: #141414;
|
| | | --navbar-text: #ffffff;
|
| | | --navbar-hover: #141414;
|
| | |
|
| | | /* 标签栏 */
|
| | | --tags-bg: #141414;
|
| | | --tags-item-bg: #1d1e1f;
|
| | | --tags-item-border: #303030;
|
| | | --tags-item-text: #d0d0d0;
|
| | | --tags-item-hover: #2d2d2d;
|
| | | --tags-close-hover: #64666a;
|
| | |
|
| | | /* splitpanes 组件暗黑模式变量 */
|
| | | --splitpanes-bg: #141414;
|
| | | --splitpanes-border: #303030;
|
| | | --splitpanes-splitter-bg: #1d1e1f;
|
| | | --splitpanes-splitter-hover-bg: #2d2d2d;
|
| | |
|
| | | /* blockquote 暗黑模式变量 */
|
| | | --blockquote-bg: #1d1e1f;
|
| | | --blockquote-border: #303030;
|
| | | --blockquote-text: #d0d0d0;
|
| | |
|
| | | /* Cron 时间表达式 模式变量 */
|
| | | --cron-border: #303030;
|
| | |
|
| | | /* splitpanes default-theme 暗黑模式变量 */
|
| | | --splitpanes-default-bg: #141414;
|
| | |
|
| | | /* 侧边栏菜单覆盖 */
|
| | | .sidebar-container {
|
| | | .el-menu-item,
|
| | | .menu-title {
|
| | | color: var(--el-text-color-regular);
|
| | | }
|
| | | & .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;
|
| | | }
|
| | | }
|
| | |
|
| | | /* 顶部栏栏菜单覆盖 */
|
| | | .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样式覆盖 */
|
| | | 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);
|
| | | }
|
| | | }
|
| | | // 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: rgba(13, 43, 79, 0.94); |
| | | --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: rgba(13, 43, 79, 0.94); |
| | | |
| | | --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); |
| | | } |
| | | } |