From 2e26ed922cde43b346a4498d846169a779ede0fc Mon Sep 17 00:00:00 2001 From: Fine Date: Wed, 28 Jun 2023 15:14:42 +0800 Subject: [PATCH] style: add disabled color --- src/components/DateCalendar.vue | 4 ++-- src/components/TimePicker.vue | 3 +-- src/styles/lib.scss | 4 ++-- src/styles/light.scss | 3 +-- src/styles/variables.scss | 20 ------------------- src/views/Settings.vue | 2 +- src/views/components/ConditionTags.vue | 2 +- src/views/components/style.scss | 2 +- .../configuration/widget/metric/Index.vue | 4 ++-- src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/graphs/Table.vue | 10 +++++----- src/views/dashboard/panel/Tool.vue | 2 +- .../dashboard/related/demand-log/Header.vue | 2 +- src/views/dashboard/related/ebpf/Content.vue | 2 +- src/views/dashboard/related/log/Header.vue | 2 +- .../components/ProcessTopology.vue | 2 +- .../network-profiling/components/TimeLine.vue | 2 +- .../profile/components/Stack/Container.vue | 6 +++--- .../components/ProfilingPanel.vue | 2 +- .../related/topology/components/Graph.vue | 4 ++-- .../topology/components/PodTopology.vue | 4 ++-- .../trace/components/Table/TableItem.vue | 2 +- 22 files changed, 32 insertions(+), 54 deletions(-) delete mode 100644 src/styles/variables.scss diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 099e2c75..416b5f91 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -539,7 +539,7 @@ limitations under the License. --> } .calendar-date-out { - color: #ccc; + color: $disabled-color; } .calendar-date:hover, @@ -558,7 +558,7 @@ limitations under the License. --> .calendar-date-disabled { cursor: not-allowed !important; - color: #ccc !important; + color: $disabled-color !important; background: $theme-background !important; } diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index 239f5bca..44304c9a 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -356,7 +356,7 @@ limitations under the License. --> text-align: center; color: $text-color; border-radius: 50%; - background: #ccc + background: $disabled-color url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==") no-repeat 50% 50%; } @@ -400,7 +400,6 @@ limitations under the License. --> background-color: #ebebe4; border-color: #e5e5e5; box-shadow: none; - box-shadow: none; } .datepicker-popup { diff --git a/src/styles/lib.scss b/src/styles/lib.scss index 9ea6b3d2..fe989fcf 100644 --- a/src/styles/lib.scss +++ b/src/styles/lib.scss @@ -189,12 +189,12 @@ .scroll_bar_style::-webkit-scrollbar-track { background-color: #eee; border-radius: 3px; - box-shadow: inset 0 0 6px #ccc; + box-shadow: inset 0 0 6px $disabled-color; } .scroll_bar_style::-webkit-scrollbar-thumb { border-radius: 3px; - box-shadow: inset 0 0 6px #ccc; + box-shadow: inset 0 0 6px $disabled-color; background-color: #aaa; } diff --git a/src/styles/light.scss b/src/styles/light.scss index b21536b7..5ccbbe54 100644 --- a/src/styles/light.scss +++ b/src/styles/light.scss @@ -17,8 +17,7 @@ $font-color: #3d444f; $text-color: #fff; -$font-color-black: #000; -$font-color-grey: #ccc; +$disabled-color: #ccc; $active-color: #409eff; $theme-background: #fff; $active-background: #409eff; diff --git a/src/styles/variables.scss b/src/styles/variables.scss deleted file mode 100644 index d11bc6cb..00000000 --- a/src/styles/variables.scss +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -$font-color: #3d444f; -$active-color: #409eff; -$theme-background: #fff; diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 70c3b50b..00beb5e1 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -169,7 +169,7 @@ limitations under the License. --> outline: 0; width: 50px; border-radius: 3px; - border: 1px solid #ccc; + border: 1px solid $disabled-color; text-align: center; height: 25px; } diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue index 3b1b4e86..83893b13 100644 --- a/src/views/components/ConditionTags.vue +++ b/src/views/components/ConditionTags.vue @@ -262,7 +262,7 @@ limitations under the License. --> color: $font-color; input { - border: 1px solid #ccc; + border: 1px solid $disabled-color; } .selected { diff --git a/src/views/components/style.scss b/src/views/components/style.scss index bfdb5017..179e9fb1 100644 --- a/src/views/components/style.scss +++ b/src/views/components/style.scss @@ -90,7 +90,7 @@ line-height: 20px; text-align: center; display: inline-block; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $disabled-color; overflow: hidden; } } diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index b8f55781..5882f67e 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -611,14 +611,14 @@ limitations under the License. --> span { display: inline-block; padding: 2px 10px; - border: 1px solid #ccc; + border: 1px solid $disabled-color; background-color: $theme-background; border-right: 0; cursor: pointer; } span:nth-last-child(1) { - border-right: 1px solid #ccc; + border-right: 1px solid $disabled-color; } } diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index f0f2aec1..7089f015 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -282,7 +282,7 @@ limitations under the License. --> diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue index 801fbd06..fe816de4 100644 --- a/src/views/dashboard/related/log/Header.vue +++ b/src/views/dashboard/related/log/Header.vue @@ -397,7 +397,7 @@ limitations under the License. --> width: 30%; border-style: unset; outline: 0; - border: 1px solid #ccc; + border: 1px solid $disabled-color; height: 30px; padding: 0 5px; } diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 40a157a1..b8afe084 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -523,7 +523,7 @@ limitations under the License. --> .switch-icon-edit { cursor: pointer; transition: all 0.5ms linear; - border: 1px solid #ccc; + border: 1px solid $disabled-color; color: #666; display: inline-block; padding: 5px; diff --git a/src/views/dashboard/related/network-profiling/components/TimeLine.vue b/src/views/dashboard/related/network-profiling/components/TimeLine.vue index fbaf3024..e645439c 100644 --- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue +++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue @@ -141,7 +141,7 @@ limitations under the License. --> .switch-icon-edit { cursor: pointer; transition: all 0.5ms linear; - border: 1px solid #ccc; + border: 1px solid $disabled-color; color: #666; display: inline-block; padding: 5px; diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue index f03f123c..01c0005d 100644 --- a/src/views/dashboard/related/profile/components/Stack/Container.vue +++ b/src/views/dashboard/related/profile/components/Stack/Container.vue @@ -75,7 +75,7 @@ limitations under the License. --> } diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 52053498..22fc4078 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -666,8 +666,8 @@ limitations under the License. --> overflow: auto; padding: 0 15px; border-radius: 3px; - color: #ccc; - border: 1px solid #ccc; + color: $disabled-color; + border: 1px solid $disabled-color; background-color: $theme-background; box-shadow: #eee 1px 2px 10px; transition: all 0.5ms linear; diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index a1e0f9cf..114570c4 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -279,7 +279,7 @@ limitations under the License. --> overflow: auto; padding: 10px 15px; border-radius: 3px; - color: #ccc; + color: $disabled-color; transition: all 0.5ms linear; z-index: 99; text-align: left; @@ -306,7 +306,7 @@ limitations under the License. --> } .label { - color: #ccc; + color: $disabled-color; display: inline-block; margin-right: 5px; } diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index dcd0b05e..0ce19ad1 100644 --- a/src/views/dashboard/related/trace/components/Table/TableItem.vue +++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue @@ -284,7 +284,7 @@ limitations under the License. --> width: 100px; padding: 10px; border-radius: 5px; - border: 1px solid #ccc; + border: 1px solid $disabled-color; background-color: #333; color: $text-color; text-align: center;