From e1f1d0d21ffa62acb9d0fcb22a701fff46bf1ecf Mon Sep 17 00:00:00 2001 From: Fine Date: Wed, 28 Jun 2023 15:07:29 +0800 Subject: [PATCH] style: update css --- src/components/DateCalendar.vue | 14 +++++------ src/components/SelectSingle.vue | 4 ++-- src/components/TimePicker.vue | 24 +++++++++---------- src/styles/light.scss | 24 +++++++++++++++++++ src/styles/reset.scss | 4 ++-- src/types/components.d.ts | 1 - src/views/Settings.vue | 2 +- src/views/dashboard/List.vue | 4 ++-- src/views/dashboard/Widget.vue | 4 ++-- .../configuration/ContinuousProfiling.vue | 2 +- src/views/dashboard/configuration/Event.vue | 2 +- src/views/dashboard/configuration/Text.vue | 2 +- .../dashboard/configuration/ThirdPartyApp.vue | 2 +- .../dashboard/configuration/TimeRange.vue | 2 +- .../dashboard/configuration/Topology.vue | 2 +- src/views/dashboard/configuration/Widget.vue | 4 ++-- .../configuration/widget/metric/Index.vue | 4 ++-- src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/graphs/TopList.vue | 2 +- .../dashboard/graphs/components/Legend.vue | 4 ++-- src/views/dashboard/panel/Layout.vue | 2 +- .../components/ProcessTopology.vue | 2 +- .../related/topology/components/Graph.vue | 11 +++++---- .../topology/components/PodTopology.vue | 2 +- src/views/dashboard/related/trace/Detail.vue | 8 +++---- .../trace/components/D3Graph/SpanDetail.vue | 2 +- .../trace/components/Table/TableItem.vue | 24 +++++++++---------- vite.config.ts | 2 +- 28 files changed, 93 insertions(+), 69 deletions(-) create mode 100644 src/styles/light.scss diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 15b26d96..099e2c75 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -544,22 +544,22 @@ limitations under the License. --> .calendar-date:hover, .calendar-date-on { - color: #3f97e3; - background-color: #f8f8f8; + color: $font-color; + background-color: $theme-background; } .calendar-date-selected, .calendar-date-selected:hover { - color: #fff; + color: $text-color; font-weight: bold; border-radius: 14px; - background: #3f97e3; + background: $active-background; } .calendar-date-disabled { cursor: not-allowed !important; color: #ccc !important; - background: #fff !important; + background: $theme-background !important; } .calendar-foot { @@ -591,7 +591,7 @@ limitations under the License. --> width: 100%; height: 100%; position: absolute; - background: #fff; + background: $theme-background; left: 0; top: 0; } @@ -626,7 +626,7 @@ limitations under the License. --> margin-top: -30px; height: 30px; line-height: 30px; - background: #fff; + background: $theme-background; text-align: center; font-weight: bold; } diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue index 501cb0b7..64a07288 100644 --- a/src/components/SelectSingle.vue +++ b/src/components/SelectSingle.vue @@ -86,7 +86,7 @@ limitations under the License. --> position: relative; justify-content: space-between; border: 1px solid #ddd; - background: #fff; + background: $theme-background; border-radius: 3px; color: #000; font-size: 12px; @@ -137,7 +137,7 @@ limitations under the License. --> position: absolute; top: 26px; left: 0; - background: #fff; + background-color: $theme-background; box-shadow: 0 1px 6px rgb(99 99 99 / 20%); border: 1px solid #ddd; width: 100%; diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index a69d3af9..239f5bca 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -302,7 +302,7 @@ limitations under the License. --> transform: scaleY(0.8); } - to { + 100% { opacity: 1; transform: scaleY(1); } @@ -314,7 +314,7 @@ limitations under the License. --> transform: scaleY(1); } - to { + 100% { opacity: 0; transform: scaleY(0.8); } @@ -343,7 +343,7 @@ limitations under the License. --> cursor: pointer; } - .datepicker-close:before { + .datepicker-close::before { display: block; content: ""; position: absolute; @@ -354,14 +354,14 @@ limitations under the License. --> margin-left: -8px; margin-top: -8px; text-align: center; - color: #fff; + color: $text-color; border-radius: 50%; background: #ccc url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==") no-repeat 50% 50%; } - .datepicker__clearable:hover:before { + .datepicker__clearable:hover::before { display: none; } @@ -369,7 +369,7 @@ limitations under the License. --> display: block; } - .datepicker-close:hover:before { + .datepicker-close:hover::before { background-color: #afafaf; } @@ -385,7 +385,7 @@ limitations under the License. --> padding: 0 5px; width: 100%; user-select: none; - font-family: "Monaco"; + font-family: Monaco; letter-spacing: -0.7px; } @@ -399,7 +399,7 @@ limitations under the License. --> cursor: not-allowed; background-color: #ebebe4; border-color: #e5e5e5; - -webkit-box-shadow: none; + box-shadow: none; box-shadow: none; } @@ -410,8 +410,8 @@ limitations under the License. --> opacity: 1; transform: scaleY(1); font-size: 12px; - background: #fff; - box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2); + background: $theme-background; + box-shadow: 0 1px 6px rgb(99 99 99 / 20%); margin-top: 2px; outline: 0; padding: 5px; @@ -497,7 +497,7 @@ limitations under the License. --> .datepicker-btn { padding: 5px 10px; background: #3f97e3; - color: #fff; + color: $text-color; border-radius: 2px; display: inline-block; cursor: pointer; @@ -525,7 +525,7 @@ limitations under the License. --> cursor: pointer; margin: 10px 0 0 5px; padding: 5px 15px; - color: #ffffff; + color: $text-color; } .datepicker__buttons .datepicker__button-select { diff --git a/src/styles/light.scss b/src/styles/light.scss new file mode 100644 index 00000000..b21536b7 --- /dev/null +++ b/src/styles/light.scss @@ -0,0 +1,24 @@ +/** + * 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; +$text-color: #fff; +$font-color-black: #000; +$font-color-grey: #ccc; +$active-color: #409eff; +$theme-background: #fff; +$active-background: #409eff; diff --git a/src/styles/reset.scss b/src/styles/reset.scss index ba1bc0dc..1144d04f 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -173,7 +173,7 @@ pre { div.vis-tooltip { max-width: 600px; overflow: hidden; - background-color: #fff !important; + background-color: $theme-background !important; white-space: normal !important; font-size: 12px !important; } @@ -187,7 +187,7 @@ div.vis-tooltip { background-color: #e66; opacity: 0.8; border-color: #e66; - color: #fff !important; + color: $text-color !important; } .vis-item.Normal { diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 05ec63bd..fa07aadd 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -22,7 +22,6 @@ declare module '@vue/runtime-core' { ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] - ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopover: typeof import('element-plus/es')['ElPopover'] ElProgress: typeof import('element-plus/es')['ElProgress'] ElRadio: typeof import('element-plus/es')['ElRadio'] diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 0ff46106..70c3b50b 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -146,7 +146,7 @@ limitations under the License. --> .auto-select { border-radius: 3px; - background-color: #fff; + background-color: $theme-background; padding: 1px; input { diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 888597a0..89f9eac0 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -480,7 +480,7 @@ limitations under the License. --> .table { padding: 20px 10px; - background-color: #fff; + background-color: $theme-background; box-shadow: 0 1px 4px 0 #00000029; border-radius: 5px; width: 100%; @@ -490,7 +490,7 @@ limitations under the License. --> .toggle-selection { margin-top: 20px; - background-color: #fff; + background-color: $theme-background; } .pagination { diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue index 44ee041f..9c151c1a 100644 --- a/src/views/dashboard/Widget.vue +++ b/src/views/dashboard/Widget.vue @@ -185,12 +185,12 @@ limitations under the License. --> .content { min-width: 100px; border: 1px solid #eee; - background-color: #fff; + background-color: $theme-background; position: relative; } .widget-chart { - background: #fff; + background-color: $theme-background; box-shadow: 0 1px 4px 0 #00000029; border-radius: 3px; padding: 5px; diff --git a/src/views/dashboard/configuration/ContinuousProfiling.vue b/src/views/dashboard/configuration/ContinuousProfiling.vue index 77b77846..7b8b9c60 100644 --- a/src/views/dashboard/configuration/ContinuousProfiling.vue +++ b/src/views/dashboard/configuration/ContinuousProfiling.vue @@ -95,7 +95,7 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } .item { diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue index 002deb09..23fe8d16 100644 --- a/src/views/dashboard/configuration/Event.vue +++ b/src/views/dashboard/configuration/Event.vue @@ -72,6 +72,6 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue index 35ea7c11..f70cc1be 100644 --- a/src/views/dashboard/configuration/Text.vue +++ b/src/views/dashboard/configuration/Text.vue @@ -155,6 +155,6 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue index da700dc2..cbfe9314 100644 --- a/src/views/dashboard/configuration/ThirdPartyApp.vue +++ b/src/views/dashboard/configuration/ThirdPartyApp.vue @@ -84,6 +84,6 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue index 07a595a8..d1eed12a 100644 --- a/src/views/dashboard/configuration/TimeRange.vue +++ b/src/views/dashboard/configuration/TimeRange.vue @@ -151,6 +151,6 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue index 663f7b86..374e5938 100644 --- a/src/views/dashboard/configuration/Topology.vue +++ b/src/views/dashboard/configuration/Topology.vue @@ -67,7 +67,7 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } .label { diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index 63c3f4f3..2f4f1261 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -202,7 +202,7 @@ limitations under the License. --> position: relative; min-width: 1280px; border: 1px solid #eee; - background-color: #fff; + background-color: $theme-background; } .header { @@ -253,7 +253,7 @@ limitations under the License. --> padding: 10px; text-align: right; width: 100%; - background-color: #fff; + background-color: $theme-background; } .collapse { diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index c66032f2..b8f55781 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -612,7 +612,7 @@ limitations under the License. --> display: inline-block; padding: 2px 10px; border: 1px solid #ccc; - background-color: #fff; + background-color: $theme-background; border-right: 0; cursor: pointer; } @@ -624,7 +624,7 @@ limitations under the License. --> span.active { background-color: $active-color; - color: #fff; + color: $theme-background; } .expression-param { diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 30f7857e..f0f2aec1 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -359,7 +359,7 @@ limitations under the License. --> } .vue-grid-item:not(.vue-grid-placeholder) { - background: #fff; + background: $theme-background; box-shadow: 0 1px 4px 0 #00000029; border-radius: 3px; } diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue index 25eebe06..02fd7aab 100644 --- a/src/views/dashboard/graphs/TopList.vue +++ b/src/views/dashboard/graphs/TopList.vue @@ -172,7 +172,7 @@ limitations under the License. --> border-radius: 4px; border: 1px solid #ddd; color: #333; - background-color: #fff; + background-color: $theme-background; will-change: opacity, background-color; transition: opacity 0.3s, background-color 0.3s; } diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue index 65903bcf..da4ae83f 100644 --- a/src/views/dashboard/graphs/components/Legend.vue +++ b/src/views/dashboard/graphs/components/Legend.vue @@ -136,7 +136,7 @@ limitations under the License. --> top: 0; z-index: 1; width: 25vw; - background: #fff; + background: $theme-background; text-align: left; } @@ -158,7 +158,7 @@ limitations under the License. --> font-weight: bold; font-style: normal; text-align: left; - background: #fff; + background-color: $theme-background; position: sticky; left: 0; z-index: 1; diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index d9358669..45e9d285 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -85,7 +85,7 @@ limitations under the License. --> } .vue-grid-item:not(.vue-grid-placeholder) { - background: #fff; + background-color: $theme-background; box-shadow: 0 1px 4px 0 #00000029; border-radius: 3px; } diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 427cb923..40a157a1 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -570,6 +570,6 @@ limitations under the License. --> padding: 5px; border: 1px solid #000; border-radius: 3px; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 689ac204..52053498 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -20,7 +20,7 @@ limitations under the License. --> element-loading-background="rgba(0, 0, 0, 0)" :style="`height: ${height}px`" > - + .svg-topology { cursor: move; + background-color: $theme-background; } .legend { @@ -667,7 +668,7 @@ limitations under the License. --> border-radius: 3px; color: #ccc; border: 1px solid #ccc; - background-color: #fff; + background-color: $theme-background; box-shadow: #eee 1px 2px 10px; transition: all 0.5ms linear; @@ -686,7 +687,7 @@ limitations under the License. --> position: absolute; color: #333; cursor: pointer; - background-color: #fff; + background-color: $theme-background; border-radius: 5px; padding: 10px 0; border: 1px solid #999; @@ -716,7 +717,7 @@ limitations under the License. --> cursor: pointer; transition: all 0.5ms linear; background: rgb(0 0 0 / 30%); - color: #fff; + color: $text-color; display: inline-block; padding: 2px 4px; border-radius: 3px; @@ -762,6 +763,6 @@ limitations under the License. --> padding: 5px; border: 1px solid #000; border-radius: 3px; - background-color: #fff; + background-color: $theme-background; } diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 59e4b2fb..a1e0f9cf 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -316,7 +316,7 @@ limitations under the License. --> padding: 10px 0; color: #333; cursor: pointer; - background-color: #fff; + background-color: $theme-background; border-radius: 3px; span { diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue index cdaf111c..4c3dec28 100644 --- a/src/views/dashboard/related/trace/Detail.vue +++ b/src/views/dashboard/related/trace/Detail.vue @@ -178,13 +178,13 @@ limitations under the License. --> height: 95px; .grey { - color: #fff; + color: $text-color; background-color: #448dfe; } .ghost { cursor: pointer; - background: rgba(0, 0, 0, 0.3); + background: rgb(0 0 0 / 30%); } } @@ -193,7 +193,7 @@ limitations under the License. --> } .trace-detail-ids { - background-color: rgba(0, 0, 0, 0); + background-color: rgb(0 0 0 / 0%); outline: 0; border-style: unset; color: inherit; @@ -209,7 +209,7 @@ limitations under the License. --> .tag { display: inline-block; border-radius: 4px; - padding: 0px 7px; + padding: 0 7px; background-color: #40454e; color: #eee; } diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue index 83bce1bf..5de26a5d 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue @@ -245,7 +245,7 @@ limitations under the License. --> } .popup-btn { - color: #fff; + color: $text-color; margin-top: 40px; width: 100%; text-align: center; diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index fcc3e89e..dcd0b05e 100644 --- a/src/views/dashboard/related/trace/components/Table/TableItem.vue +++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue @@ -252,7 +252,7 @@ limitations under the License. --> });