| | |
|---|
| | | $yellow: #fec171; |
|---|
| | | $panGreen: #30b08f; |
|---|
| | | |
|---|
| | | // menu palette |
|---|
| | | $menuText: #677287; |
|---|
| | | $menuActiveText: #1f7a72; |
|---|
| | | $menuBg: #f4f7f4; |
|---|
| | | $menuHover: #e7eeea; |
|---|
| | | // menu palette - 使用主题色 |
|---|
| | | $menuText: #5a6478; |
|---|
| | | $menuActiveText: #ffffff; |
|---|
| | | $menuBg: #f8fafb; |
|---|
| | | $menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08); |
|---|
| | | |
|---|
| | | // light theme |
|---|
| | | $menuLightBg: #f4f7f4; |
|---|
| | | $menuLightHover: #e7eeea; |
|---|
| | | $menuLightText: #3b4658; |
|---|
| | | $menuLightActiveText: #1f7a72; |
|---|
| | | // light theme - 使用主题色 |
|---|
| | | $menuLightBg: #f8fafb; |
|---|
| | | $menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08); |
|---|
| | | $menuLightText: #3d4858; |
|---|
| | | $menuLightActiveText: #ffffff; |
|---|
| | | |
|---|
| | | // layout |
|---|
| | | $base-sidebar-width: 200px; |
|---|
| | | $sideBarWidth: 200px; |
|---|
| | | $base-sidebar-width: 216px; |
|---|
| | | $sideBarWidth: 216px; |
|---|
| | | |
|---|
| | | // sidebar |
|---|
| | | $base-menu-color: #677287; |
|---|
| | | $base-menu-color-active: #1f7a72; |
|---|
| | | $base-menu-background: #f4f7f4; |
|---|
| | | $base-sub-menu-background: #eef3ef; |
|---|
| | | // 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: #1f7a72; |
|---|
| | | // component - 优化后的主题色 |
|---|
| | | $--color-primary: #0d9488; |
|---|
| | | $--color-success: #67c23a; |
|---|
| | | $--color-warning: #d89b41; |
|---|
| | | $--color-danger: #d25b52; |
|---|
| | |
|---|
| | | :root { |
|---|
| | | --sidebar-bg: #{$menuBg}; |
|---|
| | | --sidebar-text: #{$menuText}; |
|---|
| | | --sidebar-muted: #93a0b1; |
|---|
| | | --menu-hover: #{$menuHover}; |
|---|
| | | --menu-active-bg: #dfe9e4; |
|---|
| | | --menu-surface: rgba(255, 255, 255, 0.72); |
|---|
| | | --sidebar-muted: #5a6478; |
|---|
| | | --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08); |
|---|
| | | --menu-active-bg: var(--el-color-primary, #0d9488); |
|---|
| | | --menu-active-text: #ffffff; |
|---|
| | | --menu-surface: #f8fafb; |
|---|
| | | |
|---|
| | | --app-bg: #eef2ee; |
|---|
| | | --app-bg-accent: #dfe8e2; |
|---|
| | | --app-bg: #f0f4f3; |
|---|
| | | --app-bg-accent: #e0ebe9; |
|---|
| | | --surface-base: #ffffff; |
|---|
| | | --surface-soft: #f7faf8; |
|---|
| | | --surface-muted: #eff4f1; |
|---|
| | | --surface-border: #d8e1db; |
|---|
| | | --surface-border-strong: #c9d5ce; |
|---|
| | | --text-primary: #21313f; |
|---|
| | | --text-secondary: #5f6d7e; |
|---|
| | | --text-tertiary: #8a98a8; |
|---|
| | | --shadow-sm: 0 10px 30px rgba(31, 49, 38, 0.06); |
|---|
| | | --shadow-md: 0 18px 50px rgba(31, 49, 38, 0.1); |
|---|
| | | --radius-lg: 24px; |
|---|
| | | --radius-md: 18px; |
|---|
| | | --radius-sm: 12px; |
|---|
| | | --surface-soft: #f7faf9; |
|---|
| | | --surface-muted: #eef3f2; |
|---|
| | | --surface-border: #d5e0de; |
|---|
| | | --surface-border-strong: #c5d5d2; |
|---|
| | | --text-primary: #1e293b; |
|---|
| | | --text-secondary: #4a5568; |
|---|
| | | --text-tertiary: #718096; |
|---|
| | | --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06); |
|---|
| | | --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1); |
|---|
| | | --shadow-menu: 0 2px 8px rgba(0, 0, 0, 0.05); |
|---|
| | | --radius-lg: 20px; |
|---|
| | | --radius-md: 14px; |
|---|
| | | --radius-sm: 10px; |
|---|
| | | --radius-xs: 6px; |
|---|
| | | |
|---|
| | | --navbar-bg: rgba(255, 255, 255, 0.78); |
|---|
| | | --navbar-text: #21313f; |
|---|
| | | --navbar-hover: rgba(31, 122, 114, 0.08); |
|---|
| | | --navbar-bg: rgba(255, 255, 255, 0.85); |
|---|
| | | --navbar-text: #1e293b; |
|---|
| | | --navbar-hover: rgba(13, 148, 136, 0.08); |
|---|
| | | |
|---|
| | | --tags-bg: transparent; |
|---|
| | | --tags-item-bg: rgba(255, 255, 255, 0.74); |
|---|
| | | --tags-item-border: rgba(201, 213, 206, 0.88); |
|---|
| | | --tags-item-text: #5f6d7e; |
|---|
| | | --tags-item-hover: rgba(31, 122, 114, 0.08); |
|---|
| | | --tags-close-hover: rgba(31, 122, 114, 0.18); |
|---|
| | | --tags-item-bg: rgba(255, 255, 255, 0.8); |
|---|
| | | --tags-item-border: rgba(197, 213, 210, 0.9); |
|---|
| | | --tags-item-text: #4a5568; |
|---|
| | | --tags-item-hover: rgba(13, 148, 136, 0.1); |
|---|
| | | --tags-close-hover: rgba(13, 148, 136, 0.2); |
|---|
| | | |
|---|
| | | --accent-primary: #0d9488; |
|---|
| | | --accent-light: #14b8a6; |
|---|
| | | --accent-lighter: #5eead4; |
|---|
| | | |
|---|
| | | --splitpanes-default-bg: #ffffff; |
|---|
| | | } |
|---|
| | |
|---|
| | | --el-border-color: #434343; |
|---|
| | | --el-border-color-light: #434343; |
|---|
| | | |
|---|
| | | --sidebar-bg: #141414; |
|---|
| | | --sidebar-text: #ffffff; |
|---|
| | | --menu-hover: #2d2d2d; |
|---|
| | | --menu-active-text: #{$menuActiveText}; |
|---|
| | | --sidebar-bg: #1a1a1a; |
|---|
| | | --sidebar-text: #d0d0d0; |
|---|
| | | --sidebar-muted: #888888; |
|---|
| | | --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.12); |
|---|
| | | --menu-active-bg: var(--el-color-primary, #0d9488); |
|---|
| | | --menu-active-text: #ffffff; |
|---|
| | | --menu-surface: #1a1a1a; |
|---|
| | | |
|---|
| | | --text-primary: #ffffff; |
|---|
| | | --text-secondary: #d0d0d0; |
|---|
| | | --text-tertiary: #888888; |
|---|
| | | --accent-primary: var(--el-color-primary, #0d9488); |
|---|
| | | --accent-light: var(--el-color-primary-light-3, #14b8a6); |
|---|
| | | |
|---|
| | | --navbar-bg: #141414; |
|---|
| | | --navbar-text: #ffffff; |
|---|
| | |
|---|
| | | .sidebar-container { |
|---|
| | | .el-menu-item, |
|---|
| | | .menu-title { |
|---|
| | | color: var(--el-text-color-regular); |
|---|
| | | 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 { |
|---|
