style: 主题样式调整

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;
 }

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;

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;

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;
+  }
+}

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) {

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;

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;

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;

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;

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -235,7 +235,7 @@
               ></promql-input>
               <el-row style="margin-top: 18px">
                 <el-col class="legend-title">
-                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
                   <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
                     <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
                     <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
@@ -1739,8 +1739,4 @@ export default {
   .el-color-dropdown{
     z-index: 2200!important;
   }
-  .chart-box-unit .el-scrollbar{
-    height: 195px;
-    overflow-y: auto;
-  }
 </style>