mirror/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-25 19:49:14 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat: 修改部分暗黑模式样式

Browse Source
This commit is contained in:
wangdan 2023-02-13 18:47:00 +08:00 committed by wangdan-fit2cloud
parent 205d406761
commit 493fb57dff
6 changed files with 65 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/styles/common.scss
View File

@ -106,7 +106,7 @@
}
.inline-block {
display: inline-block;
display: inline-block;
}
.form-button {
@ -269,3 +269,5 @@
}
}
}

100
frontend/src/styles/element-dark.scss
View File

@ -1,74 +1,11 @@
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-fill-color-blank: rgb(49, 51, 51);
--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%);
--el-fill-color-light: rgb(49, 51, 51);
--el-border-color: rgb(64, 67, 67);
--el-bg-color-overlay: rgb(36, 37, 37);
--el-border-color-light: rgb(64, 67, 67);
// * menu
--el-menu-bg-color: rgb(36, 37, 37) !important;
--el-menu-item-bg-color: rgb(36, 37, 37);
@ -83,7 +20,8 @@ html.dark {
--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;
.el-card {
--el-card-border-color: rgb(64, 67, 67);
--el-card-bg-color: rgb(36, 37, 37);
@ -188,4 +126,28 @@ html.dark {
span {
color: var(--el-menu-text-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: rgb(49, 51, 51);
}
.el-button--primary.is-plain.is-disabled {
background: rgb(49, 51, 51);
border-color: rgb(64, 67, 67);
}
.el-button.is-disabled {
border-color: rgb(64, 67, 67);
}
.el-popper.is-dark {
color: rgb(171 173 173);
}
.path {
border: var(--panel-border);
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #323232 inset;
-webkit-text-fill-color: #cfd3dc;
transition: background-color 1000s ease-out 0.5s;
}
}

6
frontend/src/styles/element.scss
View File

@ -5,7 +5,11 @@ html {
--el-menu-item-bg-color-active: #ffffff;
--panel-border: 1px solid #f2f2f2;
--panel-button-active: #ffffff;
--panel-alert-bg: #e2e4ec;
--panel-path-bg: #ffffff;
}
.el-notification {
z-index: 99999 !important;
}
@ -172,5 +176,5 @@ html {
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
--el-avatar-bg-color: #ffffff !important;
}

2
frontend/src/styles/index.scss
View File

@ -1,6 +1,6 @@
@use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
@use './element-dark.scss';
@use './element.scss' as *;
@use './element.scss';
@use './reset.scss';

2
frontend/src/views/host/file-management/index.vue
View File

@ -492,7 +492,7 @@ onMounted(() => {
<style scoped lang="scss">
.path {
border: 1px solid #ebeef5;
background-color: #ffffff;
background-color: var(--panel-path-bg);
height: 30px;
border-radius: 2px !important;

28
frontend/src/views/setting/backup-account/index.vue
View File

@ -62,7 +62,12 @@
{{ dateFormatSimple(s3Data.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-alert
v-else
center
style="height: 167px; background-color: var(--panel-alert-bg)"
:closable="false"
>
<el-button
size="large"
round
@ -104,7 +109,12 @@
{{ dateFormatSimple(ossData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-alert
v-else
center
style="height: 167px; background-color: var(--panel-alert-bg)"
:closable="false"
>
<el-button
size="large"
round
@ -148,7 +158,12 @@
{{ dateFormatSimple(minioData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-alert
v-else
center
style="height: 167px; background-color: var(--panel-alert-bg)"
:closable="false"
>
<el-button
size="large"
round
@ -194,7 +209,12 @@
{{ dateFormatSimple(sftpData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-alert
v-else
center
style="height: 167px; background-color: var(--panel-alert-bg)"
:closable="false"
>
<el-button
size="large"
round