zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化基础样式和黑夜模式样式

This commit is contained in:
sc 2021-12-02 16:47:19 +08:00
parent 5f084925c7
commit 2105ab3da7
2 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/style/fix.scss
View File

@ -32,7 +32,6 @@
.el-table th.is-sortable:hover {background: #eee;} .el-table th.is-sortable:hover {background: #eee;}
.el-table .el-table__body-wrapper {background: #f6f8f9;} .el-table .el-table__body-wrapper {background: #f6f8f9;}
.el-col .el-card {margin-bottom: 15px;} .el-col .el-card {margin-bottom: 15px;}
.el-icon {font-size: inherit;}
.el-main {flex-basis: 100%;} .el-main {flex-basis: 100%;}
.el-main > .scTable .el-table--border {border: 0;} .el-main > .scTable .el-table--border {border: 0;}
@ -43,7 +42,7 @@
.el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;} .el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {background: var(--el-color-primary-light-5);border-color: var(--el-color-primary-light-5);} .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {background: var(--el-color-primary-light-5);border-color: var(--el-color-primary-light-5);}
.el-button--primary.is-plain {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-6);color: var(--el-color-primary);} .el-button--primary.is-plain {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-6);color: var(--el-color-primary);}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background-color: var(--el-color-primary);border-color: var(--el-color-primary);} .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background-color: var(--el-color-primary);border-color: var(--el-color-primary);color: #fff;}
.el-button--primary.is-plain:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);} .el-button--primary.is-plain:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);}
.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary-light-4);} .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary-light-4);}
.el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;} .el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}

43
src/style/theme/dark.scss
View File

@ -18,7 +18,10 @@
--el-text-color-regular: #d0d0d0; --el-text-color-regular: #d0d0d0;
--el-disabled-border-base: #434343; --el-disabled-border-base: #434343;
--el-disabled-fill-base: #383838; --el-disabled-fill-base: #383838;
--el-background-color-base: #3f3f3f; --el-disabled-border-color: #434343;
--el-disabled-bg-color: #2b2b2b;
--el-disabled-text-color: #5c5c5c;
--el-bg-color-base: #3f3f3f;
--el-datepicker-inner-border-color: #434343; --el-datepicker-inner-border-color: #434343;
--el-datepicker-inrange-background-color: #383838; --el-datepicker-inrange-background-color: #383838;
--el-datepicker-inrange-hover-background-color: #434343; --el-datepicker-inrange-hover-background-color: #434343;
@ -26,6 +29,7 @@
--el-dropdown-menuItem-hover-color: #fff; --el-dropdown-menuItem-hover-color: #fff;
--el-datepicker-border-color: #434343; --el-datepicker-border-color: #434343;
--el-svg-monochrome-grey: #434343; --el-svg-monochrome-grey: #434343;
--el-button-disabled-font-color: #5c5c5c;
/* APP背景 */ /* APP背景 */
#app {background: $--background;color: $--text-color;} #app {background: $--background;color: $--text-color;}
@ -53,7 +57,7 @@
--el-radio-font-color: #d0d0d0; --el-radio-font-color: #d0d0d0;
} }
.el-radio-button { .el-radio-button {
--el-radio-button-checked-font-color: #fff; --el-radio-button-checked-text-color: #fff;
} }
.el-checkbox { .el-checkbox {
--el-checkbox-font-color: #d0d0d0; --el-checkbox-font-color: #d0d0d0;
@ -78,16 +82,16 @@
--el-button-default-background-color: none; --el-button-default-background-color: none;
} }
.el-dialog { .el-dialog {
--el-dialog-background-color: #2b2b2b; --el-dialog-bg-color: #2b2b2b;
} }
.el-drawer { .el-drawer {
--el-drawer-background-color: #2b2b2b; --el-drawer-bg-color: #2b2b2b;
} }
.el-table { .el-table {
--el-table-font-color: #d0d0d0; --el-table-font-color: #d0d0d0;
--el-table-header-background-color: #2b2b2b; --el-table-header-bg-color: #2b2b2b;
--el-table-current-row-background-color: #3f3f3f; --el-table-current-row-bg-color: #3f3f3f;
--el-table-row-hover-background-color: #373737; --el-table-row-hover-bg-color: #373737;
--el-table-border-color: #434343; --el-table-border-color: #434343;
} }
.el-descriptions { .el-descriptions {
@ -97,15 +101,19 @@
--el-skeleton-color: #434343; --el-skeleton-color: #434343;
} }
.el-collapse { .el-collapse {
--el-collapse-header-background-color: none; --el-collapse-header-bg-color: none;
--el-collapse-content-background-color: none; --el-collapse-content-bg-color: none;
} }
.el-calendar { .el-calendar {
--el-calendar-selected-background-color: #222225; --el-calendar-selected-bg-color: #222225;
} }
.el-dropdown__popper { .el-dropdown__popper {
--el-dropdown-menuItem-hover-fill: #222225; --el-dropdown-menuItem-hover-fill: #222225;
} }
.el-date-range-picker {
--el-datepicker-inrange-bg-color: #383838;
--el-datepicker-inrange-hover-bg-color: #383838;
}
/* 布局 */ /* 布局 */
.adminui-header {background: $--card-background;border-bottom: 1px solid $--border-color;} .adminui-header {background: $--card-background;border-bottom: 1px solid $--border-color;}
@ -194,9 +202,10 @@
.el-button--default.is-plain {border-color: var(--el-button-border-color);} .el-button--default.is-plain {border-color: var(--el-button-border-color);}
.el-button--default.is-plain:hover,.el-button--default.is-plain:focus {background: none;border-color: var(--el-border-color-hover);} .el-button--default.is-plain:hover,.el-button--default.is-plain:focus {background: none;border-color: var(--el-border-color-hover);}
.el-button--default.is-plain:active {background: #383838;} .el-button--default.is-plain:active {background: #383838;}
.el-button--primary {color: #fff;}
.el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);} .el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);}
.el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;} .el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;}
.el-button--primary.is-plain {border-color: var(--el-color-primary);} .el-button--primary.is-plain {border-color: var(--el-color-primary);color: var(--el-color-primary);}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background: none;border-color: var(--el-color-primary);color: var(--el-color-primary-light-2);} .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background: none;border-color: var(--el-color-primary);color: var(--el-color-primary-light-2);}
.el-button--primary.is-plain:active {background: #383838;} .el-button--primary.is-plain:active {background: #383838;}
.el-button.is-disabled, .el-button.is-disabled:hover {background: #383838;border-color: $--border-color;color: var(--el-button-disabled-font-color);} .el-button.is-disabled, .el-button.is-disabled:hover {background: #383838;border-color: $--border-color;color: var(--el-button-disabled-font-color);}
@ -208,7 +217,7 @@
.el-descriptions__body {background: none;} .el-descriptions__body {background: none;}
.el-alert--info.is-light {background: $--card-background;} .el-alert--info.is-light {background: #383838;}
.el-alert--success.is-light {background: #273a1d;} .el-alert--success.is-light {background: #273a1d;}
.el-alert--warning.is-light {background: #3e2e15;} .el-alert--warning.is-light {background: #3e2e15;}
.el-alert--error.is-light {background: #3a2323;} .el-alert--error.is-light {background: #3a2323;}
@ -220,6 +229,13 @@
.el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {color: #fff;} .el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {color: #fff;}
.el-step .el-step__icon {background: $--card-background;}
.el-popper.is-light {background: $--card-background;}
.el-popper.is-light .el-popper__arrow::before {background: $--card-background;}
.el-color-picker__trigger {border-color: $--border-color;}
.el-empty__image svg { .el-empty__image svg {
#Rectangle-Copy {fill: #111;} #Rectangle-Copy {fill: #111;}
#Rectangle-Copy-10 {fill: #555;} #Rectangle-Copy-10 {fill: #555;}
@ -234,4 +250,7 @@
} }
.sc-title {color: #d0d0d0;border-color: $--border-color;} .sc-title {color: #d0d0d0;border-color: $--border-color;}
.sc-upload-uploader {border-color: $--border-color;}
.setting-column .setting-column__title {border-color: $--border-color;}
.setting-column .setting-column__bottom {border-color: $--border-color;}
} }