From 9009b715ae0acd4ee9750194ec493498544f9ea8 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Tue, 23 Nov 2021 18:16:11 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=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 | 23 ++++++++++ .../src/assets/css/common/rightBoxCommon.scss | 7 --- .../common/rightBox/alertRuleBox.scss | 36 ++++++++++----- .../common/rightBox/alertSilenceBox.scss | 28 ++++++------ .../common/v-selectpagenew/selectpage.scss | 44 ++++++++++++------- .../common/rightBox/alertRuleBox.vue | 4 +- 6 files changed, 93 insertions(+), 49 deletions(-) diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index d7f89853e..ccad976e2 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -244,3 +244,26 @@ td .nz-icon-gear:before{ color: $--nz-icon-color; } } +.el-time-panel { + background-color: $--background-color-empty; + .el-time-panel__footer { + border: 1px solid $--border-color-light; + } +} +//.editor-core { +// p { +// color: $--color-text-regular; +// } +//} +//.ql-toolbar.ql-snow,.ql-container.ql-snow { +// border: 1px solid $--border-color-light; +// .ql-header { +// color: $--color-text-primary; +// } +// .ql-stroke { +// stroke: $--color-text-primary; +// } +// .ql-picker-options { +// background-color: $--background-color-empty; +// } +//} diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss index 3001161eb..4ee0dee5b 100644 --- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss +++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss @@ -119,13 +119,6 @@ .el-form-item { margin-bottom: 16px; - .el-form-item__label{ - padding-bottom: 6px; - font-size: 14px; - line-height: 16px; - color: #666; - } - .el-input__inner:hover { border-color: $--border-color-light-hover; } diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss index 448e65ac9..d45f7b479 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss @@ -17,6 +17,11 @@ width: 100%; } } + .alert-box-duration.half-form-item { + .el-form-item__content { + line-height: 31px !important; + } + } .right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{ width: 100%; } @@ -25,6 +30,8 @@ } .el-input-group__prepend{ position: relative; + background: $--border-color-light; + border: $--border-color-light; .hide-icon{ width: 38px; .el-input__inner{ @@ -33,6 +40,10 @@ } } } + .el-input-group__append { + background: $--border-color-light; + border: $--border-color-light; + } .alert-rule-split-title{ background: $--background-color-base; font-size: 14px; @@ -44,21 +55,22 @@ margin-bottom: 10px; height: 24px; } - .el-form-item__content .el-input-group{ + .el-form-item__content .el-input-group.el-input-group--prepend { vertical-align: middle; - } - .severity-item{ - color: $--color-text-secondary; - font-size: 12px; - max-width: 120px; - overflow: hidden; - } - .text-ellipsis{ - overflow:hidden; - text-overflow:ellipsis; - white-space:nowrap + width: 100%; } .query-row .metric-selector-input-box { width: calc(100% - 120px); } } +.severity-item{ + color: $--color-text-secondary; + font-size: 12px; + max-width: 120px; + overflow: hidden; +} +.text-ellipsis{ + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss index dde785655..c0025baa8 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss @@ -1,13 +1,14 @@ .range-time { - /deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group { - width: 100% + .el-radio-button--small .el-radio-button__inner,.el-radio-group { + width: 100%; + background-color: $--background-color-empty; } - /deep/ .el-radio-button { + .el-radio-button { width: 14.2% } - /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini { + .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini { width: 100%; } @@ -19,14 +20,15 @@ width: 48%; flex: 1; position: relative; - /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{ + .el-date-editor.el-input,.el-date-editor.el-input__inner{ width: 100%; } - /deep/ .el-input__inner{ + .el-input__inner{ text-align: center; } .datepicker-title{ position: absolute; + color: $--color-text-regular; left: 15px; z-index: 1; } @@ -34,10 +36,10 @@ } } .matchers{ - /deep/ .el-input__prefix{ + .el-input__prefix{ left: 0; } - /deep/ .el-form-item__error{ + .el-form-item__error{ left: 126px; padding-top: 5px; } @@ -55,7 +57,7 @@ font-weight: 400; text-align: center; } - /deep/ .matchers-type-title.el-select--small .el-input__inner{ + .matchers-type-title.el-select--small .el-input__inner{ background:$--border-color-light; font-family: ArialMT; font-size: 14px; @@ -70,19 +72,19 @@ } } } -/deep/ .silence-matchers-value{ +.silence-matchers-value{ width: calc(100% - 100px); } -/deep/ .silence-matchers-key{ +.silence-matchers-key{ width: 100%; } .silence-matchers-regex{ margin-left: 10px; } -/deep/ .param-box-row-key{ +.param-box-row-key{ width: 36%; } -/deep/ .param-box-row-value{ +.param-box-row-value{ width: 50%; } .module-add-label{ diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss index d2900c7c4..ccc186077 100644 --- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss +++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss @@ -1,4 +1,4 @@ -.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input{ +.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{ background: $--input-background-color !important; } .sp-search,.sp-result-area,.sp-pagination { @@ -32,46 +32,60 @@ } } .sp-search-input { - background-color: $--select-page-background-color !important; - border: 1px solid $--border-color-light !important; - color: $--color-text-regular !important; + background-color: $--select-page-background-color; + border: 1px solid $--border-color-light; + color: $--color-text-regular; } .sp-base.sp-inputs,.sp-base.sp-input { - border: 1px solid $--border-color-light !important; + border: 1px solid $--border-color-light; } .sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus { - border: 1px solid $--border-color-light-hover !important; + border: 1px solid $--border-color-light-hover; } .v-dropdown-container.v-dropdown-no-border { - border: 1px solid $--border-color-light !important; + border: 1px solid $--border-color-light; } div.sp-result-area table.sp-table tbody tr.sp-over td { - background-color: $--select-page-hover-background-color !important; - color: $--button-light-hover-color !important; + background-color: $--select-page-hover-background-color; + color: $--button-light-hover-color; cursor: pointer; } div.sp-result-area table.sp-table tbody tr.sp-selected td { - color: $--select-page-focus-color !important; + color: $--select-page-focus-color; cursor: default; } div.sp-pagination ul li a:hover { - color: $--color-text-regular !important; + color: $--color-text-regular; } div.v-selectpage div.sp-input-container div.sp-input { - color: $--color-text-regular !important; + color: $--color-text-regular; } div.v-selectpage div.sp-input-container.sp-open div.sp-input { border: 1px solid #aaa; border-radius: 2px; - color: $--color-text-regular !important; + color: $--color-text-regular; } .sp-button { .sp-caret { - color: $--color-text-regular !important; + color: $--color-text-regular; } } .sp-button.open { .sp-caret { - color: $--color-text-regular !important; + color: $--color-text-regular; } } +.el-picker-panel__footer { + border-top: 1px solid $--border-color-light; + span { + color: $--color-text-regular; + } + .el-button--text { + span { + color: $--color-primary; + } + } +} +.el-date-picker__time-header,.el-date-table th { + border-bottom: 1px solid $--border-color-light; +} diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue index 3bd619992..98e049c4d 100644 --- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue @@ -87,7 +87,7 @@ -