mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-02-01 14:38:07 +08:00
335 lines
9.1 KiB
SCSS
335 lines
9.1 KiB
SCSS
html.dark {
|
|
--el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
|
|
--el-border-color-lighter: #1d2023;
|
|
--el-fill-color-blank: #111417;
|
|
--el-bg-color: rgba(0, 11, 21, 1);
|
|
// --el-text-color-primary: #999999;
|
|
--el-text-color-regular: #bbbfc4 !important;
|
|
--el-fill-color-light: #111417;
|
|
--el-border-color: #303438;
|
|
--el-bg-color-overlay: rgba(0, 11, 21, 1);
|
|
--el-border-color-light: #1d2023;
|
|
// * menu
|
|
--el-menu-bg-color: #111417 !important;
|
|
--el-menu-item-bg-color: #111417;
|
|
--el-menu-text-color: #ffffff;
|
|
--el-menu-item-bg-color-active: rgb(44, 45, 46);
|
|
|
|
// * panel-admin
|
|
--panel-text-color: rgb(174, 166, 153);
|
|
--panel-border: 1px solid #1d2023;
|
|
--panel-border-color: #394c5e;
|
|
--panel-main-bg-color: rgba(12, 12, 12, 1);
|
|
--panel-button-active: var(--el-color-primary);
|
|
|
|
--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;
|
|
--panel-alert-bg: #2f3030;
|
|
--panel-path-bg: #2f3030;
|
|
--panel-button-disabled: #5a5a5a;
|
|
|
|
.el-tag.el-tag--info {
|
|
--el-tag-bg-color: rgb(49, 51, 51);
|
|
--el-tag-border-color: rgb(64, 67, 67);
|
|
}
|
|
.el-tag.el-tag--light {
|
|
--el-tag-bg-color: #111417;
|
|
--el-tag-border-color: var(--el-color-primary);
|
|
}
|
|
.el-tag.el-tag--success {
|
|
--el-tag-border-color: var(--el-color-success);
|
|
}
|
|
.el-tag.el-tag--danger {
|
|
--el-tag-border-color: var(--el-color-danger);
|
|
}
|
|
.el-card {
|
|
--el-card-bg-color: #111417;
|
|
color: #ffffff;
|
|
border: 1px solid var(--el-card-border-color) !important;
|
|
}
|
|
|
|
.el-table {
|
|
--el-table-bg-color: rgba(0, 11, 21, 1);
|
|
--el-table-tr-bg-color: rgba(0, 11, 21, 1);
|
|
--el-table-header-bg-color: rgba(0, 11, 21, 1);
|
|
--el-table-border: var(--panel-border);
|
|
--el-table-border-color: rgb(64, 67, 67);
|
|
}
|
|
.el-message-box {
|
|
--el-messagebox-title-color: var(--el-menu-text-color);
|
|
border: 1px solid var(--panel-border-color);
|
|
}
|
|
|
|
.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: #303438;
|
|
}
|
|
|
|
.el-pagination {
|
|
--el-pagination-button-color: #999999;
|
|
}
|
|
|
|
.el-popover {
|
|
--el-popover-title-text-color: #999999;
|
|
border: 1px solid var(--panel-border-color);
|
|
}
|
|
|
|
// * wangEditor
|
|
--w-e-textarea-bg-color: #1b1b1b;
|
|
--w-e-textarea-color: #eeeeee;
|
|
|
|
.md-editor-dark {
|
|
--md-bk-color: #111417;
|
|
}
|
|
|
|
// * 以下为自定义暗黑模式内容
|
|
// login
|
|
.login-container {
|
|
.login-form {
|
|
input:-webkit-autofill {
|
|
box-shadow: 0 0 0 1000px #f1f4f9 inset;
|
|
-webkit-text-fill-color: #333333;
|
|
-webkit-transition: background-color 1000s ease-out 0.5s;
|
|
transition: background-color 1000s ease-out 0.5s;
|
|
}
|
|
.el-input__wrapper {
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
|
}
|
|
.el-input__inner {
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
|
|
// scroll-bar
|
|
::-webkit-scrollbar {
|
|
background-color: var(--el-scrollbar-bg-color) !important;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--el-border-color-darker);
|
|
}
|
|
// sidebar
|
|
.sidebar-container-popper {
|
|
border: 1px solid #66686c;
|
|
.el-menu--popup-container {
|
|
border: none;
|
|
}
|
|
}
|
|
.sidebar-container {
|
|
border-right: 1px solid var(--el-border-color-light);
|
|
}
|
|
.el-menu {
|
|
.el-menu-item {
|
|
&:hover {
|
|
background: rgba(37, 39, 44, 1);
|
|
}
|
|
&.is-active {
|
|
background: var(--el-color-primary);
|
|
color: #ffffff;
|
|
&:hover {
|
|
.el-icon {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
span {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
&::before {
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.el-sub-menu {
|
|
.el-sub-menu__title {
|
|
&:hover {
|
|
background: rgba(37, 39, 44, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menu-collapse {
|
|
color: var(--el-menu-text-color);
|
|
border: var(--panel-border);
|
|
}
|
|
|
|
// layout
|
|
.app-wrapper {
|
|
.main-container {
|
|
background-color: var(--panel-main-bg-color) !important;
|
|
}
|
|
.app-footer {
|
|
background-color: var(--panel-main-bg-color) !important;
|
|
border-top: var(--panel-border);
|
|
}
|
|
.mobile-header {
|
|
background-color: var(--panel-main-bg-color) !important;
|
|
border-bottom: var(--panel-border);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.system-label {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
|
|
.router_card_button {
|
|
.el-radio-button__inner {
|
|
background: none !important;
|
|
}
|
|
.el-radio-button__original-radio:checked + .el-radio-button__inner {
|
|
color: #ffffff;
|
|
background-color: var(--panel-button-active) !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
// content-box
|
|
.content-box {
|
|
.text {
|
|
color: var(--el-text-color-regular) !important;
|
|
}
|
|
}
|
|
|
|
.el-drawer .el-drawer__header span {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
.el-drawer {
|
|
border-left: 0.5px solid var(--panel-border-color);
|
|
}
|
|
|
|
.el-input__wrapper {
|
|
background-color: var(--el-disabled-bg-color);
|
|
}
|
|
.el-input.is-disabled .el-input__wrapper {
|
|
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
|
|
}
|
|
.el-radio-button__inner {
|
|
background: #1d2023;
|
|
}
|
|
.el-button--primary.is-plain.is-disabled {
|
|
background: #1d2023;
|
|
border-color: #303438;
|
|
}
|
|
.el-button--primary.is-plain {
|
|
background: #1d2023;
|
|
border-color: #303438;
|
|
}
|
|
.el-button.is-link.is-disabled {
|
|
color: var(--panel-button-disabled) !important;
|
|
}
|
|
.el-button.is-disabled {
|
|
border-color: #303438;
|
|
color: var(--panel-button-disabled);
|
|
}
|
|
.el-popper.is-dark {
|
|
color: rgb(171 173 173);
|
|
}
|
|
.path {
|
|
border: var(--panel-border);
|
|
.split {
|
|
color: #666666;
|
|
}
|
|
}
|
|
input:-webkit-autofill {
|
|
box-shadow: 0 0 0 1000px #323232 inset;
|
|
-webkit-text-fill-color: #cfd3dc;
|
|
transition: background-color 1000s ease-out 0.5s;
|
|
}
|
|
.el-avatar {
|
|
--el-avatar-bg-color: #111417 !important;
|
|
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
|
|
border: 0.5px solid #1f2022;
|
|
}
|
|
.el-page-header__content {
|
|
color: rgb(174, 166, 153);
|
|
}
|
|
.el-dialog {
|
|
.el-dialog__header {
|
|
border-bottom: var(--panel-border);
|
|
color: #999999;
|
|
.el-dialog__title {
|
|
color: var(--el-menu-text-color);
|
|
}
|
|
}
|
|
border: 1px solid var(--panel-border-color);
|
|
}
|
|
.el-tabs__item {
|
|
color: #999999;
|
|
}
|
|
.el-tabs__item.is-active {
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
.el-descriptions__title {
|
|
color: #999999;
|
|
}
|
|
.el-descriptions__content.el-descriptions__cell.is-bordered-content {
|
|
color: #999999;
|
|
}
|
|
.terminal-tabs {
|
|
background: none !important;
|
|
.el-tabs__header {
|
|
background: #000000;
|
|
}
|
|
}
|
|
.el-pager {
|
|
li {
|
|
color: #999999;
|
|
&.is-active {
|
|
color: var(--el-pagination-hover-color);
|
|
}
|
|
}
|
|
}
|
|
.el-loading-mask {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.h-app-card {
|
|
.h-app-content {
|
|
.h-app-title {
|
|
color: #f2f8ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.infinite-list .infinite-list-item {
|
|
background: #212426;
|
|
&:hover {
|
|
background: #212426;
|
|
}
|
|
}
|
|
|
|
.el-alert--warning.is-light {
|
|
background-color: rgb(56, 59, 59);
|
|
color: var(--el-color-warning);
|
|
}
|
|
.el-dropdown-menu__item.is-disabled {
|
|
color: var(--panel-button-disabled);
|
|
}
|
|
.el-date-editor .el-range-separator {
|
|
color: var(--panel-button-disabled);
|
|
}
|
|
|
|
.el-input-group__append {
|
|
border-left: 0;
|
|
&:hover {
|
|
color: var(--el-color-primary);
|
|
background-color: var(--el-color-primary-light-9) !important;
|
|
}
|
|
background-color: #212426 !important;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset,
|
|
-1px 0 0 0 var(--el-input-border-color) inset;
|
|
}
|
|
|
|
.el-collapse-item__header {
|
|
color: #ffffff;
|
|
}
|
|
}
|