1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-27 17:26:03 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 黑色主题修改样式

Browse source
This commit is contained in:
wangdan 2023-02-17 16:39:54 +08:00 • committed by wangdan-fit2cloud
parent 46f32570b9
commit cfb882c734
7 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
frontend/src/styles/element-dark.scss
View file

@ -1,24 +1,25 @@
html.dark {
--el-border-color-lighter: rgb(64, 67, 67);
--el-fill-color-blank: rgb(49, 51, 51);
--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: #cfd3dc;
--el-fill-color-light: rgb(49, 51, 51);
--el-border-color: rgb(64, 67, 67);
--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: rgb(64, 67, 67);
--el-border-color-light: #1d2023;
// * menu
--el-menu-bg-color: #111417 !important;
--el-menu-item-bg-color: rgba(0, 11, 21, 1);
--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 rgb(64, 67, 67);
--panel-main-bg-color: rgb(41, 43, 43);
--panel-button-active: rgb(44, 45, 46);
--panel-border: 1px solid #303438;
--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%);
@ -30,13 +31,16 @@ html.dark {
--el-tag-border-color: rgb(64, 67, 67);
}
.el-tag.el-tag--light {
--el-tag-bg-color: rgb(49, 51, 51);
--el-tag-border-color: rgb(64, 67, 67);
--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-card {
--el-card-border-color: rgb(64, 67, 67);
--el-card-bg-color: rgba(0, 11, 21, 1);
color: rgb(174, 166, 153);
--el-card-bg-color: #111417;
color: #ffffff;
border: none !important;
}
.el-table {
@ -56,7 +60,7 @@ html.dark {
.el-input {
--el-input-bg-color: rgb(47 48 48);
--el-input-border-color: rgb(64, 67, 67);
--el-input-border-color: #303438;
}
.el-pagination {
@ -107,8 +111,11 @@ html.dark {
}
.el-menu {
.el-menu-item {
&:hover {
background: rgba(37, 39, 44, 1);
}
&.is-active {
background: #005eeb;
background: var(--el-color-primary);
color: #ffffff;
&:hover {
.el-icon {
@ -140,9 +147,6 @@ html.dark {
border-top: var(--panel-border);
}
}
.el-descriptions__body {
background-color: rgba(0, 11, 21, 1);
}
.system-label {
color: var(--el-menu-text-color);
}
@ -151,6 +155,10 @@ html.dark {
.el-radio-button__inner {
background: none;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #ffffff;
box-shadow: none !important;
}
}
// content-box
.content-box {
@ -170,18 +178,18 @@ html.dark {
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}
.el-radio-button__inner {
background: rgb(49, 51, 51);
background: #1d2023;
}
.el-button--primary.is-plain.is-disabled {
background: rgb(49, 51, 51);
border-color: rgb(64, 67, 67);
background: #1d2023;
border-color: #303438;
}
.el-button--primary.is-plain {
background: rgb(49, 51, 51);
border-color: rgb(64, 67, 67);
background: #1d2023;
border-color: #303438;
}
.el-button.is-disabled {
border-color: rgb(64, 67, 67);
border-color: #303438;
}
.el-popper.is-dark {
color: rgb(171 173 173);
@ -198,7 +206,9 @@ html.dark {
transition: background-color 1000s ease-out 0.5s;
}
.el-avatar {
--el-avatar-bg-color: var(--el-bg-color) !important;
--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);
@ -238,4 +248,12 @@ html.dark {
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.8);
}
.h-app-card {
.h-app-content {
.h-app-title {
color: #f2f8ff;
}
}
}
}

2
frontend/src/styles/element.scss
View file

@ -1,5 +1,7 @@
html {
--el-box-shadow-light: 0px 0px 4px rgba(0, 94, 235, 0.1) !important;
--el-text-color-regular: #646a73 !important;
// * menu
--el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
--el-menu-item-bg-color: rgba(255, 255, 255, 0.3);

2
frontend/src/views/app-store/apps/index.vue
View file

@ -218,7 +218,7 @@ onMounted(() => {
.desc {
font-size: 14px;
color: #646a73;
color: var(--el-text-color-regular);
}
}

2
frontend/src/views/app-store/detail/index.vue
View file

@ -162,7 +162,7 @@ onMounted(() => {
margin-top: 10px;
span {
font-size: 14px;
color: #646a73;
color: var(--el-text-color-regular);
}
}

2
frontend/src/views/app-store/index.scss
View file

@ -40,7 +40,7 @@
.description {
margin-top: 10px;
font-size: 14px;
color: #646a73;
color: var(--el-text-color-regular);
}
}
.d-button {

4
frontend/src/views/home/app/index.vue
View file

@ -33,6 +33,7 @@
</el-button>
</el-col>
</el-row>
<div class="h-app-divider" />
</div>
</el-scrollbar>
</div>
@ -108,13 +109,14 @@ defineExpose({
.h-app-title {
font-weight: 500;
font-size: 15px;
color: #1f2329;
}
.h-app-desc {
span {
font-weight: 400;
font-size: 12px;
color: #646a73;
color: var(--el-text-color-regular);
}
}
}

2
frontend/src/views/home/index.vue
View file

@ -584,7 +584,7 @@ onBeforeUnmount(() => {
span:first-child {
font-size: 14px;
color: #646a73;
color: var(--el-text-color-regular);
}
.count {