mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-16 10:44:44 +08:00
192 lines
6.1 KiB
SCSS
192 lines
6.1 KiB
SCSS
html.dark {
|
|
// --el-color-primary: #409eff;
|
|
// --el-color-primary-light-3: #3375b9;
|
|
// --el-color-primary-light-5: #2a598a;
|
|
// --el-color-primary-light-7: #213d5b;
|
|
// --el-color-primary-light-8: #1d3043;
|
|
// --el-color-primary-light-9: #18222c;
|
|
// --el-color-primary-dark-2: #66b1ff;
|
|
// --el-color-success: #67c23a;
|
|
// --el-color-success-light-3: #4e8e2f;
|
|
// --el-color-success-light-5: #3e6b27;
|
|
// --el-color-success-light-7: #2d481f;
|
|
// --el-color-success-light-8: #25371c;
|
|
// --el-color-success-light-9: #1c2518;
|
|
// --el-color-success-dark-2: #85ce61;
|
|
// --el-color-warning: #e6a23c;
|
|
// --el-color-warning-light-3: #a77730;
|
|
// --el-color-warning-light-5: #7d5b28;
|
|
// --el-color-warning-light-7: #533f20;
|
|
// --el-color-warning-light-8: #3e301c;
|
|
// --el-color-warning-light-9: #292218;
|
|
// --el-color-warning-dark-2: #ebb563;
|
|
// --el-color-danger: #f56c6c;
|
|
// --el-color-danger-light-3: #b25252;
|
|
// --el-color-danger-light-5: #854040;
|
|
// --el-color-danger-light-7: #582e2e;
|
|
// --el-color-danger-light-8: #412626;
|
|
// --el-color-danger-light-9: #2b1d1d;
|
|
// --el-color-danger-dark-2: #f78989;
|
|
// --el-color-error: #f56c6c;
|
|
// --el-color-error-light-3: #b25252;
|
|
// --el-color-error-light-5: #854040;
|
|
// --el-color-error-light-7: #582e2e;
|
|
// --el-color-error-light-8: #412626;
|
|
// --el-color-error-light-9: #2b1d1d;
|
|
// --el-color-error-dark-2: #f78989;
|
|
// --el-color-info: #909399;
|
|
// --el-color-info-light-3: #6b6d71;
|
|
// --el-color-info-light-5: #525457;
|
|
// --el-color-info-light-7: #393a3c;
|
|
// --el-color-info-light-8: #2d2d2f;
|
|
// --el-color-info-light-9: #202121;
|
|
// --el-color-info-dark-2: #a6a9ad;
|
|
// --el-box-shadow: 0 12px 32px 4px rgb(0 0 0 / 36%), 0 8px 20px rgb(0 0 0 / 72%);
|
|
// --el-box-shadow-light: 0 0 12px rgb(0 0 0 / 72%);
|
|
// --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 72%);
|
|
// --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 72%), 0 12px 32px #000000, 0 8px 16px -8px #000000;
|
|
// --el-bg-color-page: #0a0a0a;
|
|
--el-bg-color: rgb(36, 37, 37);
|
|
// --el-bg-color-overlay: #1d1e1f;
|
|
// --el-text-color-primary: #e5eaf3;
|
|
--el-text-color-regular: #cfd3dc;
|
|
// --el-text-color-secondary: #a3a6ad;
|
|
// --el-text-color-placeholder: #8d9095;
|
|
// --el-text-color-disabled: #6c6e72;
|
|
// --el-border-color-darker: #636466;
|
|
// --el-border-color-dark: #58585b;
|
|
// --el-border-color: #4c4d4f;
|
|
// --el-border-color-light: #414243;
|
|
// --el-border-color-lighter: #363637;
|
|
// --el-border-color-extra-light: #2b2b2c;
|
|
// --el-fill-color-darker: #424243;
|
|
// --el-fill-color-dark: #39393a;
|
|
// --el-fill-color: #303030;
|
|
// --el-fill-color-light: #262727;
|
|
// --el-fill-color-lighter: #1d1d1d;
|
|
// --el-fill-color-extra-light: #191919;
|
|
// --el-fill-color-blank: transparent;
|
|
// --el-mask-color: rgb(0 0 0 / 80%);
|
|
// --el-mask-color-extra-light: rgb(0 0 0 / 30%);
|
|
|
|
// * menu
|
|
--el-menu-bg-color: rgb(36, 37, 37) !important;
|
|
--el-menu-item-bg-color: rgb(36, 37, 37);
|
|
--el-menu-text-color: rgb(174, 166, 153);
|
|
--el-menu-item-bg-color-active: rgb(44, 45, 46);
|
|
|
|
// * panel-admin
|
|
--panel-border: 1px solid rgb(64, 67, 67);
|
|
--panel-main-bg-color: rgb(41, 43, 43);
|
|
--panel-button-active: rgb(44, 45, 46);
|
|
|
|
--panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
|
|
--panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
|
|
--panel-popup-color: #060708;
|
|
|
|
.el-card {
|
|
--el-card-border-color: rgb(64, 67, 67);
|
|
--el-card-bg-color: rgb(36, 37, 37);
|
|
color: rgb(174, 166, 153);
|
|
}
|
|
|
|
.el-table {
|
|
--el-table-bg-color: rgb(36, 37, 37);
|
|
--el-table-tr-bg-color: rgb(36, 37, 37);
|
|
--el-table-header-bg-color: rgb(36, 37, 37);
|
|
--el-table-border: var(--panel-border);
|
|
--el-table-border-color: rgb(64, 67, 67);
|
|
}
|
|
|
|
.el-alert--info {
|
|
--el-alert-bg-color: rgb(56, 59, 59);
|
|
}
|
|
|
|
.el-input {
|
|
--el-input-bg-color: rgb(47 48 48);
|
|
--el-input-border-color: rgb(64, 67, 67);
|
|
}
|
|
|
|
// * wangEditor
|
|
--w-e-textarea-bg-color: #1b1b1b;
|
|
--w-e-textarea-color: #eeeeee;
|
|
|
|
// * 以下为自定义暗黑模式内容
|
|
// login
|
|
// .login-container {
|
|
// background-color: var(--el-fill-color-extra-light) !important;
|
|
// .login-box {
|
|
// background-color: var(--el-mask-color) !important;
|
|
// .login-form {
|
|
// background-color: var(--el-bg-color) !important;
|
|
// box-shadow: var(--panel-login-shadow-light) !important;
|
|
// .logo-text {
|
|
// color: var(--el-text-color-primary) !important;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// scroll-bar
|
|
::-webkit-scrollbar {
|
|
background-color: var(--el-scrollbar-bg-color) !important;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--el-border-color-darker);
|
|
}
|
|
// menu
|
|
.menu-popper {
|
|
border: 1px solid #66686c;
|
|
.el-menu--popup-container {
|
|
border: none;
|
|
}
|
|
}
|
|
.el-menu {
|
|
.el-menu-item {
|
|
&:hover {
|
|
background-color: var(--el-menu-item-bg-color-active);
|
|
}
|
|
}
|
|
}
|
|
.collapse {
|
|
color: var(--el-menu-text-color);
|
|
border: var(--panel-border);
|
|
}
|
|
|
|
// layout
|
|
.el-container {
|
|
.el-main {
|
|
background-color: var(--panel-main-bg-color) !important;
|
|
}
|
|
.footer {
|
|
background-color: var(--panel-main-bg-color) !important;
|
|
border-top: var(--panel-border);
|
|
}
|
|
}
|
|
.el-descriptions__body {
|
|
background-color: rgb(36, 37, 37);
|
|
}
|
|
.system-label {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
|
|
.router_card_button {
|
|
.el-radio-button__inner {
|
|
background: none;
|
|
}
|
|
}
|
|
// content-box
|
|
.content-box {
|
|
.text {
|
|
color: var(--el-text-color-regular) !important;
|
|
}
|
|
}
|
|
|
|
.el-drawer .el-drawer__header span {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
span {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
}
|