From 94bafceb132d4d2f6916fbe4b58c287321ee02ab Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Tue, 16 Nov 2021 18:15:34 +0800 Subject: [PATCH] =?UTF-8?q?style:=202fa=E9=AA=8C=E8=AF=81=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E8=89=B2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common.scss | 3 ++ .../src/assets/css/common/button.scss | 35 +++++++++---------- .../src/assets/css/common/rightBoxCommon.scss | 18 +++++----- .../src/assets/css/common/tableCommon.scss | 6 ++-- .../css/components/common/elementSet.scss | 2 +- .../css/components/page/config/profile.scss | 6 +++- .../page/config/profileChangePin.scss | 6 ++-- .../src/assets/css/themes/theme-dark.scss | 20 +++++------ .../src/assets/css/themes/theme-light.scss | 20 +++++------ 9 files changed, 61 insertions(+), 55 deletions(-) diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 22ca6891a..a1f375acd 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -211,3 +211,6 @@ td .nz-icon-gear:before{ .el-tree { background-color: $--background-color-empty !important; } +.el-table::before { + background-color: $--border-color-light !important; +} diff --git a/nezha-fronted/src/assets/css/common/button.scss b/nezha-fronted/src/assets/css/common/button.scss index b7f98161e..d5b78e72f 100644 --- a/nezha-fronted/src/assets/css/common/button.scss +++ b/nezha-fronted/src/assets/css/common/button.scss @@ -62,9 +62,8 @@ padding: 0 5px; } .nz-btn.nz-btn-style-light-new { - background-color: $--button-gray-background-color; - border: 1px solid $--button-gray-border-color; - color: $--button-gray-color; + border: 1px solid $--button-light-border-color; + color: $--button-light-color; } .nz-btn.nz-btn-style-normal { /* 新版橙色按钮 */ background: $--button-primary-background-color; @@ -77,9 +76,9 @@ border: 1px solid $--color-danger; } .nz-btn.nz-btn-style-gray { /* 灰色按钮 */ - background: $--button-gray-background-color; - border: 1px solid $--button-gray-border-color; - color: $--button-gray-color; + background: $--button-light-background-color; + border: 1px solid $--button-light-border-color; + color: $--button-light-color; letter-spacing: 0; } .nz-btn-style-light-new:hover { @@ -98,15 +97,15 @@ border: 1px solid #F38b73; } .nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 灰色按钮hover */ - border: 1px solid $--button-gray-hover-border-color; - background: $--button-gray-hover-background-color; - color: $--button-gray-hover-color; + border: 1px solid $--button-light-hover-border-color; + background: $--button-light-hover-background-color; + color: $--button-light-hover-color; letter-spacing: 0; } .nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */ - border: 1px solid $--button-gray-hover-border-color; - background: $--button-gray-hover-background-color; - color: $--button-gray-hover-color; + border: 1px solid $--button-light-hover-border-color; + background: $--button-light-hover-background-color; + color: $--button-light-hover-color; letter-spacing: 0; } .nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */ @@ -120,15 +119,15 @@ border-color: #Eb6D51; } .nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 灰色按钮active*/ - background: $--button-gray-active-background-color; - border: 1px solid $--button-gray-active-border-color; - color: $--button-gray-active-color; + background: $--button-light-active-background-color; + border: 1px solid $--button-light-active-border-color; + color: $--button-light-active-color; letter-spacing: 0; } .nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/ - background: $--button-gray-active-background-color; - border: 1px solid $--button-gray-active-border-color; - color: $--button-gray-active-color; + background: $--button-light-active-background-color; + border: 1px solid $--button-light-active-border-color; + color: $--button-light-active-color; letter-spacing: 0; } diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss index 9adf63b63..c92e893cb 100644 --- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss +++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss @@ -233,19 +233,19 @@ background-color: $--button-primary-active-background-color; } .footer__btn--light { - background-color: $--button-gray-background-color; - border: 1px solid $--button-gray-border-color; - color: $--button-gray-color; + background-color: $--button-light-hover-background-color; + border: 1px solid $--button-light-border-color; + color: $--button-light-color; } .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { - background-color: $--background-color-empty; - border-color: $--color-primary-light-5; - color: $--color-primary; + background-color: $--button-light-hover-background-color; + border: 1px solid $--button-primary-hover-background-color; + color: $--button-primary-background-color; } .footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) { - background-color: $--button-gray-active-background-color; - border: 1px solid $--button-gray-active-border-color; - color: $--button-gray-active-color; + background-color: $--button-light-active-background-color; + border: 1px solid $--button-light-active-border-color; + color: $--button-light-active-color; } .footer__btn--disabled { opacity: .6; diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss index b0d5fd9df..747d9090e 100644 --- a/nezha-fronted/src/assets/css/common/tableCommon.scss +++ b/nezha-fronted/src/assets/css/common/tableCommon.scss @@ -78,7 +78,7 @@ outline: none; border-radius: $--button-border-radius; background-color: $--button-icon-background-color; - transition: background-color linear .1s; + transition: background-color linear .2s, color linear .1s; color: $--button-icon-color; i { @@ -272,7 +272,7 @@ cursor: pointer; border-radius: $--button-border-radius; outline: none; - transition: background-color linear .1s; + transition: background-color linear .2s, color linear .1s; } .table-operation-item.table-operation-item--disable{ border: 1px solid $--border-color-base; @@ -417,7 +417,7 @@ border-right: none; transform: translateX(1px); box-sizing: border-box; - transition: border-color linear .2s; + transition: background-color linear .2s, color linear .1s; span { font-size: 14px; diff --git a/nezha-fronted/src/assets/css/components/common/elementSet.scss b/nezha-fronted/src/assets/css/components/common/elementSet.scss index 6b6bd5fbd..e07574db5 100644 --- a/nezha-fronted/src/assets/css/components/common/elementSet.scss +++ b/nezha-fronted/src/assets/css/components/common/elementSet.scss @@ -34,7 +34,7 @@ margin-top: 12px; width: 100%; height: 300px; - border: 1px solid $--button-gray-border-color !important; + border: 1px solid $--button-light-border-color !important; } .custom-labels i { color: #04b330; diff --git a/nezha-fronted/src/assets/css/components/page/config/profile.scss b/nezha-fronted/src/assets/css/components/page/config/profile.scss index ba9811a6d..c250edb0e 100644 --- a/nezha-fronted/src/assets/css/components/page/config/profile.scss +++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss @@ -92,7 +92,7 @@ } } .profile-left__btn { - border: 1px solid $--button-gray-border-color; + border: 1px solid $--button-light-border-color; border-radius: 4px; background: $--background-color-empty; min-width: 132px; @@ -223,6 +223,9 @@ } } } +.el-dialog { + background-color: $--background-color-empty; +} .login-dialog-title{ background-color: $--background-color-base; font-size: 14px; @@ -269,6 +272,7 @@ .qrCode-content{ padding: 4px; margin-left: 10px; + background-color: #fff; } .qrCode-text{ width: 60%; diff --git a/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss b/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss index 679c4be34..55fa51b75 100644 --- a/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss +++ b/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss @@ -43,9 +43,9 @@ } .footer__btn--light { - background-color: $--button-gray-background-color; - border: 1px solid $--button-gray-border-color; - color: $--button-gray-color; + background-color: $--button-light-hover-background-color; + border: 1px solid $--button-light-border-color; + color: $--button-light-color; } .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 0dfb832d7..d168aa19f 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -99,16 +99,16 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色 $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%); $--button-primary-active-background-color: mix(#000, $--color-primary, 10%); -// button-gray用于普通按钮 -$--button-gray-color: $--color-text-regular; // 灰色按钮字色 -$--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色 -$--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色 -$--button-gray-background-color: $--background-color-empty; // 灰色按钮背景色 -$--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色 -$--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色 -$--button-gray-border-color: $--border-color-light; // 灰色按钮边框色 -$--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色 -$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色 +// button-light用于普通按钮 +$--button-light-color: $--color-text-regular; // 灰色按钮字色 +$--button-light-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色 +$--button-light-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色 +$--button-light-background-color: $--background-color-empty; // 灰色按钮背景色 +$--button-light-hover-background-color: $--background-color-base; // 灰色按钮hover背景色 +$--button-light-active-background-color: $--background-color-base; // 灰色按钮focus背景色 +$--button-light-border-color: $--border-color-light; // 灰色按钮边框色 +$--button-light-hover-border-color: $--button-light-hover-color; // 灰色按钮hover边框色 +$--button-light-active-border-color: $--button-light-active-color; // 灰色按钮focus边框色 // button-icon用于单图标按钮 $--button-icon-color: $--color-text-regular; // 字色 diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index 2a64db7f4..25da292fa 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -98,16 +98,16 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色 $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%); $--button-primary-active-background-color: mix(#000, $--color-primary, 10%); -// button-gray用于普通按钮 -$--button-gray-color: $--color-text-regular; // 灰色按钮字色 -$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色 -$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色 -$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色 -$--button-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 -$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色 -$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色 -$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色 -$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色 +// button-light用于普通按钮 +$--button-light-color: $--color-text-regular; // 灰色按钮字色 +$--button-light-hover-color: $--button-light-color; // 灰色按钮hover字色 +$--button-light-active-color: $--color-primary; // 灰色按钮focus字色 +$--button-light-background-color: $--background-color-base; // 灰色按钮背景色 +$--button-light-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 +$--button-light-active-background-color: $--button-light-hover-background-color; // 灰色按钮focus背景色 +$--button-light-border-color: $--border-color-base; // 灰色按钮边框色 +$--button-light-hover-border-color: $--button-light-border-color; // 灰色按钮hover边框色 +$--button-light-active-border-color: $--button-light-active-color; // 灰色按钮focus边框色 // button-icon用于单图标按钮 $--button-icon-color: $--color-text-regular; // 字色