From 81a1af9365ddd303a1d83bcf91a33d41a0ac6573 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Wed, 17 Nov 2021 16:41:18 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F?= =?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 | 7 +++++-- .../src/assets/css/common/rightBoxCommon.scss | 3 +++ .../css/components/common/timePicker.scss | 4 ++-- .../components/page/dashboard/chartBox.scss | 14 ++++++++++++-- .../page/dashboard/explore/explore.scss | 2 +- .../page/dashboard/explore/promqlInput.scss | 18 +++++++++++++++++- .../src/assets/css/themes/theme-dark.scss | 3 ++- .../src/assets/css/themes/theme-light.scss | 2 ++ nezha-fronted/src/assets/stylus/main.scss | 14 -------------- .../src/components/page/dashboard/chartBox.vue | 6 +----- 10 files changed, 45 insertions(+), 28 deletions(-) diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 6a15e34bc..49e7900f8 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -37,11 +37,14 @@ left: unset !important; top: 30px; } - +.nz-icon-minus-medium { + color: $--color-text-regular; + cursor: pointer; +} .nz-icon-copy { padding: 0 4px; color: $--color-primary; - background-color: #FDF5E9; + background-color: $--background-color-copy; border-radius: $--border-radius-small; cursor: pointer; } diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss index 2a3a0c606..8e9bf19f3 100644 --- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss +++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss @@ -307,6 +307,9 @@ .el-form-item__content .el-autocomplete .el-input-group { vertical-align: unset; } +.el-cascader__dropdown { + background-color: $--background-color-empty !important; +} .right-box-select-top { margin-top: 0 !important; margin-bottom: 0 !important; diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss index 323632285..af5001291 100644 --- a/nezha-fronted/src/assets/css/components/common/timePicker.scss +++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss @@ -8,7 +8,7 @@ line-height: 40px; height: 40px; box-sizing: border-box; - border: 1px solid $--border-color-base; + border: 1px solid $--border-color-light; border-radius: $--border-radius-small; } .calendar.calendar--small { @@ -21,7 +21,7 @@ } .nz-dashboard-dropdown-bg { background: $--color-primary; - color: #fff; + color: #fff !important; } .calendar-dropdown-title { white-space: nowrap; diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss index 2e8af54d2..0b52b79e5 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss @@ -59,14 +59,17 @@ } .legend-title{ width: 108px; - margin-right: 10px; + margin:0 10px 0 0; text-align: left; - padding-left:10px; height: 32px; border-radius: $--border-radius-small; line-height: 32px; background: $--border-color-light; color: $--color-text-regular; + .legend-title__span { + display: inline-block; + padding-left: 10px; + } } /*metric样式--end*/ .label-center{ @@ -165,3 +168,10 @@ left: 0; z-index: 10; } +/* metric input */ +.metric-selector-input-box { + width: calc(100% - 160px) !important; + .input-box { + margin: 0 !important; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss index c149e600d..f68b61950 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss @@ -87,7 +87,7 @@ } .el-dropdown-link { span:nth-of-type(1) { - color: $--color-primary; + color: $--color-text-regular; padding-right: 10px; } span:nth-of-type(2) { diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss index 1e78d06d4..98b739c39 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss @@ -55,7 +55,19 @@ height: 300px; position: absolute; z-index: 2100; - background-color: #FFF; + background-color: $--background-color-empty; + width: 450px; + .el-cascader-menu__wrap { + height: 100%; + .el-scrollbar__view.el-cascader-menu__list { + .el-cascader-node { + padding: 0; + .el-cascader-node__label { + padding: 0; + } + } + } + } } .expr-title { @@ -103,6 +115,10 @@ .nz-cascade { padding: 0 10px 0 25px; position: relative; + overflow: hidden; + width: calc(100% - 50px); + text-overflow: ellipsis; + white-space: nowrap; } .nz-cascade .nz-icon-template2 { display: none; diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 787b1d00e..737af2eac 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -12,6 +12,8 @@ $--background-color-base: #18171D; $--background-color-1: #444440; // 背景色2 $--background-color-2: #000; +// 背景色 copy +$--background-color-copy: #454545; // 左侧菜单背景色 $--left-menu-background-color-base: #2D2E35; @@ -44,7 +46,6 @@ $--border-color-light-hover: lighten($--border-color-light, 10%); // 浅边框色focus $--border-color-light-focus: lighten($--border-color-light, 20%); - /* 5.提示色 */ // 正常绿色 $--color-success: #23BF9A; diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index faf6e5000..16a6a9aac 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -12,6 +12,8 @@ $--background-color-base: #F6F6F6; $--background-color-1: #EFEFEF; // 背景色2 $--background-color-2: #F9F9F9; +// 背景色 copy +$--background-color-copy: #fdf5e0; // 左侧菜单背景色 $--left-menu-background-color-base: #202F3F; diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index ff23bc061..651cea591 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -195,13 +195,6 @@ li { .nz-tab-item-active:first-letter{ text-transform: capitalize; } -.nz-tab-item-close { - color: rgba(245, 108, 108, 0.6); - cursor: pointer; -} -.nz-tab-item-close:hover { - color: rgba(245, 108, 108, 1); -} .nz-tab-error { font-weight: normal; } @@ -524,13 +517,6 @@ li { .el-scrollbar__wrap { overflow-x: hidden !important; } -.el-scrollbar__thumb { - background-color: #ccc; - cursor: default; -} -.el-scrollbar__thumb:hover { - background-color: #bbb; -} /*大中小三个尺寸，默认中*/ .el-scrollbar__bar.is-vertical { width: 8px; diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index c53fc3e62..48b16ee39 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -235,7 +235,7 @@ > - {{$t('dashboard.panel.chartForm.legend')}}  + {{$t('dashboard.panel.chartForm.legend')}} 
{{$t('dashboard.panel.chartForm.legendTip')}}
@@ -1739,8 +1739,4 @@ export default { .el-color-dropdown{ z-index: 2200!important; } - .chart-box-unit .el-scrollbar{ - height: 195px; - overflow-y: auto; - }