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

feat: 暗色样式

Browse source
This commit is contained in:
wangdan 2023-02-10 17:40:15 +08:00 • committed by wangdan-fit2cloud
parent 702b881ca1
commit 7c20fddd21
16 changed files with 134 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/app-layout/footer/index.vue
View file

@ -17,6 +17,7 @@
height: 45px;
background: #ffffff;
border-top: 1px solid #e4e7ed;
box-sizing: border-box;
a {
font-size: 14px;
color: #858585;

3
frontend/src/components/app-layout/menu/components/Collapse.vue
View file

@ -15,8 +15,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
<style scoped lang="scss">
.collapse {
height: 47px;
height: 48px;
border-top: 1px solid #e4e7ed;
box-sizing: border-box;
}
.collapse-icon {

8
frontend/src/components/app-layout/menu/index.scss
View file

@ -4,7 +4,7 @@
padding: 0 7px;
.el-menu-item {
border-radius: 4px !important;
background-color: $menu-item-backgroup-color;
background-color: var(--el-menu-item-bg-color);
margin: 6px 0;
height: 46px !important;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
@ -22,7 +22,7 @@
}
}
&.is-active {
background-color: #ffffff;
background-color: var(--el-menu-item-bg-color-active);;
border: 2px solid $primary-color;
&::before {
@ -51,7 +51,7 @@
}
}
.el-sub-menu__title {
background-color: $menu-item-backgroup-color;
background-color: var(--el-menu-item-bg-color);
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
height: 44px;
border-radius: 4px !important;
@ -77,7 +77,7 @@
.menu-popper {
.el-menu {
background-color: $menu-backgroup-color !important;
background-color: var(--el-menu-bg-color) !important;
padding: 4px 8px;
}
}

2
frontend/src/components/app-layout/menu/index.vue
View file

@ -102,7 +102,7 @@ onMounted(async () => {
display: flex;
flex-direction: column;
height: 100%;
background: url(@/assets/images/menu-bg.png) $menu-backgroup-color no-repeat top;
background: url(@/assets/images/menu-bg.png) var(--el-menu-bg-color) no-repeat top;
transition: all 0.3s ease;
.el-scrollbar {

4
frontend/src/components/router-button/index.vue
View file

@ -94,14 +94,14 @@ onMounted(() => {
.el-radio-button__original-radio:checked + .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
background-color: var(--panel-button-active);
box-shadow: 0 0 0 2px $primary-color !important;
}
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
background-color: var(--panel-button-active);
box-shadow: 0 0 0 2px $primary-color !important;
}
}

2
frontend/src/layout/layout-content.vue
View file

@ -131,6 +131,6 @@ const showBack = computed(() => {
.divider {
margin-top: 20px;
border: 0;
border-top: 1px solid #f2f2f2;
border-top: var(--panel-border);
}
</style>

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

@ -46,10 +46,10 @@ html.dark {
// --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: #141414;
--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-regular: #cfd3dc;
// --el-text-color-secondary: #a3a6ad;
// --el-text-color-placeholder: #8d9095;
// --el-text-color-disabled: #6c6e72;
@ -69,32 +69,63 @@ html.dark {
// --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-border-light: 1px solid #4c4c4d;
--panel-main-bg-color: #0d0d0d;
--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;
}
}
}
}
// .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 {
@ -103,7 +134,47 @@ html.dark {
::-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 {
@ -111,126 +182,10 @@ html.dark {
}
}
// dataVisualize-box
.dataVisualize-box {
.top-box,
.bottom-box {
box-shadow: var(--panel-box-shadow-light) !important;
}
.el-drawer .el-drawer__header span {
color: var(--el-menu-text-color);
}
// error-message
.not-container {
.not-detail {
h2 {
color: var(--el-text-color-primary) !important;
}
}
}
// el-table
.table-box {
.el-table {
.el-table__header th {
color: var(--el-text-color-regular) !important;
background-color: var(--el-bg-color) !important;
}
}
}
.el-table {
--el-table-border-color: #696969;
//fit2cloud-ui 自定义
--el-table-text-color: #cfcfcf;
// $table-header-bgColor: #f5f6f7 !default;
.fu-table-header th {
border-top: 1px solid var(--el-table-border-color);
font-weight: 500 !important;
color: var(--el-text-color-regular) !important;
background-color: var(--el-bg-color) !important;
}
}
// el-drawer :close-on-click-modal="false"
.el-drawer {
.el-drawer__header {
border-bottom: var(--panel-border-light) !important;
span {
color: var(--el-text-color-primary) !important;
}
}
.el-drawer__footer {
border-top: var(--panel-border-light) !important;
}
}
// el-dialog
.el-dialog {
.el-dialog__header {
border-bottom: var(--panel-border-light) !important;
}
}
// layout
.el-container {
.el-aside {
.menu {
background-color: var(--el-bg-color) !important;
border-right: var(--panel-border-light) !important;
.logo {
border-bottom: var(--panel-border-light) !important;
}
.el-menu,
.el-sub-menu,
.el-sub-menu__title {
background-color: var(--el-bg-color) !important;
}
}
}
.el-header {
.header {
background-color: var(--el-bg-color) !important;
border-bottom-color: var(--el-border-color-light) !important;
.header-ri {
.icon-style {
color: var(--el-text-color-regular) !important;
}
.username {
color: var(--el-text-color-regular) !important;
}
}
}
}
.el-main {
background-color: var(--panel-main-bg-color) !important;
.main-box {
background-color: var(--el-bg-color) !important;
}
}
.el-tabs {
background-color: var(--el-bg-color) !important;
}
.el-footer {
.footer {
background-color: var(--el-bg-color) !important;
border-top-color: var(--el-border-color-light) !important;
a {
color: var(--el-text-color-regular) !important;
}
}
}
}
// menu-popup
.el-menu--popup-container {
.el-menu {
background-color: var(--el-bg-color) !important;
}
}
// guide
#driver-highlighted-element-stage {
background-color: var(--el-color-info-light-5) !important;
span {
color: var(--el-menu-text-color);
}
}

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

@ -1,3 +1,11 @@
html {
// * menu
--el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
--el-menu-item-bg-color: rgba(255, 255, 255, 0.3);
--el-menu-item-bg-color-active: #ffffff;
--panel-border: 1px solid #f2f2f2;
--panel-button-active: #ffffff;
}
.el-notification {
z-index: 99999 !important;
}
@ -114,7 +122,7 @@
.el-drawer__header {
padding: 15px 20px 14px;
margin-bottom: 0;
border-bottom: 1px solid #ebeef5;
border-bottom: var(--panel-border);
span {
font-size: 17px;
color: #303133;
@ -122,7 +130,7 @@
}
.el-drawer__footer {
border-top: 1px solid #ebeef5;
border-top: var(--panel-border);
}
.el-select {
width: 100%;
@ -155,11 +163,14 @@
.row-box {
display: flex;
flex-flow: wrap;
.el-card {
min-width: 100%;
height: 100%;
margin-right: 20px;
border: 0;
}
.el-card {
min-width: 100%;
height: 100%;
margin-right: 20px;
border: 0;
}
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
}

1
frontend/src/styles/var.scss
View file

@ -1,5 +1,4 @@
$primary-color: #005eeb;
$menu-backgroup-color: rgba(0, 94, 235, 0.1);
$menu-item-backgroup-color: rgba(255, 255, 255, 0.3);
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (

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

@ -193,7 +193,7 @@ onMounted(() => {
.app-title {
font-weight: 500;
font-size: 16px;
color: #1f2329;
color: var(--el-text-color-regular);
}
.app-button {
float: right;

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

@ -173,7 +173,4 @@ onMounted(() => {
margin-top: 5px;
}
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
}
</style>

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

@ -49,10 +49,9 @@
margin-top: 10px;
}
}
}
.app-card:hover {
background-color: rgba(0, 94, 235, 0.03);
&:hover {
background-color: rgba(0, 94, 235, 0.03);
}
}
.table-button {
@ -63,11 +62,7 @@
.app-divider {
margin-top: 5px;
border: 0;
border-top: 1px solid #f2f2f2;
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
border-top: var(--panel-border);
}
.update-prompt {

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

@ -120,19 +120,14 @@ defineExpose({
.h-app-button {
margin-top: 10px;
}
&:hover {
background-color: rgba(0, 94, 235, 0.03);
}
}
.h-app-divider {
margin-top: 5px;
border: 0;
border-top: 1px solid #f2f2f2;
}
.h-app-card:hover {
background-color: rgba(0, 94, 235, 0.03);
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
border-top: var(--panel-border);
}
</style>

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

@ -579,12 +579,6 @@ onBeforeUnmount(() => {
</script>
<style lang="scss">
.el-form-item--small {
--font-size: 14px;
--el-form-label-font-size: var(--font-size);
margin-bottom: 8px;
}
.h-overview {
text-align: center;

4
frontend/src/views/host/terminal/index.vue
View file

@ -76,14 +76,14 @@ onUnmounted(() => {
.el-radio-button__original-radio:checked + .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
background-color: var(--panel-button-active);
box-shadow: 0 0 0 2px $primary-color !important;
}
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
background-color: var(--panel-button-active);
box-shadow: 0 0 0 2px $primary-color !important;
}
}

12
frontend/src/views/login/components/login-form.vue
View file

@ -357,17 +357,7 @@ onMounted(() => {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
border-bottom: 1px solid $menu-backgroup-color;
// --el-input-focus-border: $menu-backgroup-color;
// --el-input-transparent-border: 0 0 0 0px;
// --el-input-border-color: $menu-backgroup-color;
// --el-input-hover-border: 0px !important;
// --el-input-hover-border-color: $menu-backgroup-color;
// --el-input-focus-border-color: $menu-backgroup-color;
// --el-input-clear-hover-color: $menu-backgroup-color;
// box-shadow: 0 0 0 0px !important;
// --el-input-border: 0px;
border-top: 1px solid #f2f2f2;
}
}