style: update

src/components/DateCalendar.vue

@@ -443,11 +443,11 @@ limitations under the License. -->
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .calendar {
     float: left;
     user-select: none;
-    color: #3d444f;
+    color: $font-color;
   }
 
   .calendar + .calendar {
@@ -524,8 +524,8 @@ limitations under the License. -->
     float: left;
   }
 
-  .calendar-week:before,
+  .calendar-week::before,
-  .calendar-date:before {
+  .calendar-date::before {
     content: "";
     display: inline-block;
     height: 100%;

src/components/Graph.vue

@@ -254,9 +254,9 @@ limitations under the License. -->
     z-index: 9999999;
     box-shadow: #ddd 1px 2px 10px;
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     border-radius: 4px;
-    color: rgb(51, 51, 51);
+    color: rgb(51 51 51);
     padding: 5px;
   }
 
@@ -266,7 +266,7 @@ limitations under the License. -->
     cursor: pointer;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/components/SelectSingle.vue

@@ -96,7 +96,7 @@ limitations under the License. -->
       padding: 0 3px;
       border-radius: 3px;
       margin: 3px;
-      color: #409eff;
+      color: $active-color;
       background-color: #fafafa;
       border: 1px solid #e8e8e8;
       text-align: center;
@@ -138,7 +138,7 @@ limitations under the License. -->
     top: 26px;
     left: 0;
     background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     border: 1px solid #ddd;
     width: 100%;
     border-radius: 0 0 3px 3px;
@@ -164,7 +164,7 @@ limitations under the License. -->
     padding: 7px 15px;
 
     &.select-disabled {
-      color: #409eff;
+      color: $active-color;
       cursor: not-allowed;
     }
 

src/styles/reset.scss

@@ -19,7 +19,7 @@ body {
   margin: 0;
   line-height: 1.5;
   font-size: 14px;
-  color: #3d444f;
+  color: $font-color;
   font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
   text-rendering: optimizelegibility;
   text-size-adjust: 100%;

src/views/components/ConditionTags.vue

@@ -222,7 +222,7 @@ limitations under the License. -->
     overflow: hidden;
     border: 1px dashed #aaa;
     font-size: 12px;
-    margin: 3px 2px 0 2px;
+    margin: 3px 2px 0;
   }
 
   .trace-new-tag {
@@ -246,7 +246,7 @@ limitations under the License. -->
     margin-top: 10px;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
     }
   }
 
@@ -259,14 +259,14 @@ limitations under the License. -->
   }
 
   .light {
-    color: #3d444f;
+    color: $font-color;
 
     input {
       border: 1px solid #ccc;
     }
 
     .selected {
-      color: #3d444f;
+      color: $font-color;
     }
   }
 

src/views/dashboard/List.vue

@@ -514,7 +514,7 @@ limitations under the License. -->
   }
 
   .name {
-    color: #409eff;
+    color: $active-color;
   }
 
   .reload {

src/views/dashboard/components/WidgetLink.vue

@@ -154,7 +154,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .link {
-    color: #409eff;
+    color: $active-color;
     cursor: pointer;
   }
 

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -623,7 +623,7 @@ limitations under the License. -->
   }
 
   span.active {
-    background-color: #409eff;
+    background-color: $active-color;
     color: #fff;
   }
 
@@ -640,7 +640,7 @@ limitations under the License. -->
     min-height: 26px;
 
     &:focus {
-      border-color: #409eff;
+      border-color: $active-color;
     }
   }
 
@@ -651,6 +651,6 @@ limitations under the License. -->
 
   .link {
     cursor: pointer;
-    color: #409eff;
+    color: $active-color;
   }
 </style>

src/views/dashboard/controls/ContinuousProfiling.vue

@@ -86,7 +86,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/DemandLog.vue

@@ -81,7 +81,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Ebpf.vue

@@ -79,7 +79,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Event.vue

@@ -92,7 +92,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Log.vue

@@ -89,7 +89,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/NetworkProfiling.vue

@@ -78,7 +78,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Profile.vue

@@ -79,7 +79,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Tab.vue

@@ -326,10 +326,10 @@ limitations under the License. -->
     }
 
     span.active {
-      border-bottom: 1px solid #409eff;
+      border-bottom: 1px solid $active-color;
 
       .tab-name {
-        color: #409eff;
+        color: $active-color;
       }
     }
   }
@@ -374,7 +374,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item.active {
-    border: 1px solid #409eff;
+    border: 1px solid $active-color;
   }
 
   .no-data-tips {

src/views/dashboard/controls/TaskTimeline.vue

@@ -78,7 +78,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Text.vue

@@ -111,7 +111,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/ThirdPartyApp.vue

@@ -102,7 +102,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/TimeRange.vue

@@ -175,7 +175,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Topology.vue

@@ -81,7 +81,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/controls/Trace.vue

@@ -88,7 +88,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/graphs/EndpointList.vue

@@ -241,4 +241,8 @@ limitations under the License. -->
   .tips {
     color: rgb(255 0 0 / 50%);
   }
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -335,4 +335,8 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   @import url("./style.scss");
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/graphs/TopList.vue

@@ -200,7 +200,7 @@ limitations under the License. -->
     font-size: 12px;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/graphs/components/ColumnGraph.vue

@@ -42,7 +42,7 @@ limitations under the License. -->
           <el-popover placement="left" :width="400" trigger="click">
             <template #reference>
               <span class="trend">
-                <Icon iconName="timeline" size="middle" style="color: #409eff" />
+                <Icon iconName="timeline" size="middle" />
               </span>
             </template>
             <div class="view-line">
@@ -159,6 +159,7 @@ limitations under the License. -->
     display: inline-block;
     height: 100%;
     cursor: pointer;
+    color: $active-color;
   }
 
   .value {

src/views/dashboard/graphs/style.scss

@@ -35,7 +35,6 @@
 
 .link {
   cursor: pointer;
-  color: #409eff;
   display: inline-block;
   width: 100%;
   text-decoration: underline;

src/views/dashboard/panel/Layout.vue

@@ -86,12 +86,12 @@ limitations under the License. -->
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }
 
   .vue-grid-item.active {
-    border: 1px solid #409eff;
+    border: 1px solid $active-color;
   }
 
   .no-data-tips {

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -163,7 +163,7 @@ limitations under the License. -->
 
   .link {
     cursor: pointer;
-    color: #409eff;
+    color: $active-color;
     text-decoration: underline;
   }
 </style>

src/views/dashboard/related/continuous-profiling/components/Policy.vue

@@ -221,7 +221,7 @@ limitations under the License. -->
     height: 100px;
 
     &:focus {
-      border-color: #409eff;
+      border-color: $active-color;
     }
   }
 

src/views/dashboard/related/demand-log/Header.vue

@@ -371,7 +371,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
     width: 300px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .item span {
@@ -89,7 +89,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -117,20 +117,20 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
   }
 
   .profile-btn {
-    color: #3d444f;
+    color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
     font-size: 12px;

src/views/dashboard/related/event/Header.vue

@@ -226,7 +226,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;

src/views/dashboard/related/log/Header.vue

@@ -415,7 +415,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;

src/views/dashboard/related/log/LogTable/LogDetail.vue

@@ -72,7 +72,7 @@ limitations under the License. -->
     min-height: 500px;
     border: none;
     outline: none;
-    color: #3d444f;
+    color: $font-color;
     overflow: auto;
   }
 </style>

src/views/dashboard/related/profile/components/SegmentList.vue

@@ -82,7 +82,7 @@ limitations under the License. -->
     .profile-t-wrapper {
       overflow: auto;
       flex-grow: 1;
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      border-right: 1px solid rgb(0 0 0 / 10%);
     }
 
     .profile-t-loading {
@@ -110,13 +110,13 @@ limitations under the License. -->
 
     .profile-tr {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
+        background-color: rgb(0 0 0 / 4%);
       }
     }
 
     .profile-td {
       padding: 5px 10px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+      border-bottom: 1px solid rgb(0 0 0 / 7%);
 
       &.selected {
         background-color: #ededed;
@@ -126,8 +126,8 @@ limitations under the License. -->
     .profile-t-tool {
       padding: 5px 10px;
       font-weight: bold;
-      border-right: 1px solid rgba(0, 0, 0, 0.07);
+      border-right: 1px solid rgb(0 0 0 / 7%);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+      border-bottom: 1px solid rgb(0 0 0 / 7%);
       background: #f3f4f9;
     }
 
@@ -136,7 +136,7 @@ limitations under the License. -->
     }
 
     .profile-btn {
-      color: #3d444f;
+      color: $font-color;
       padding: 1px 3px;
       border-radius: 2px;
       font-size: 12px;
@@ -144,6 +144,6 @@ limitations under the License. -->
   }
 
   .profile-segment {
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
+    border-top: 1px solid rgb(0 0 0 / 7%);
   }
 </style>

src/views/dashboard/related/profile/components/TaskList.vue

@@ -168,7 +168,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -183,7 +183,7 @@ limitations under the License. -->
   .profile-t-wrapper {
     overflow: auto;
     flex-grow: 1;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .profile-t {
@@ -196,19 +196,19 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-segment {
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
+    border-top: 1px solid rgb(0 0 0 / 7%);
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
   }
 
@@ -217,7 +217,7 @@ limitations under the License. -->
   }
 
   .profile-btn {
-    color: #3d444f;
+    color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
     font-size: 12px;

src/views/dashboard/related/topology/components/Graph.vue

@@ -701,7 +701,7 @@ limitations under the License. -->
       }
 
       span:hover {
-        color: #409eff;
+        color: $active-color;
         background-color: #eee;
       }
     }
@@ -715,7 +715,7 @@ limitations under the License. -->
     .switch-icon {
       cursor: pointer;
       transition: all 0.5ms linear;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgb(0 0 0 / 30%);
       color: #fff;
       display: inline-block;
       padding: 2px 4px;
@@ -736,7 +736,7 @@ limitations under the License. -->
     }
 
     .topo-text {
-      font-family: "Lato", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
+      font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
       fill: #ddd;
       font-size: 11px;
       opacity: 0.8;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -329,7 +329,7 @@ limitations under the License. -->
     }
 
     span:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }