github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 15:53:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(style): add scss variables (#291)

Browse Source
This commit is contained in:
Fine0830 2023-06-28 15:46:27 +08:00 committed by GitHub
parent 63db3fbc2e
commit 9ac1265e7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
85 changed files with 308 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/DateCalendar.vue
View File

@ -443,11 +443,11 @@ limitations under the License. -->
}); });
</script> </script>
<style scoped> <style lang="scss" scoped>
.calendar { .calendar {
float: left; float: left;
user-select: none; user-select: none;
color: #3d444f; color: $font-color;
} }
.calendar + .calendar { .calendar + .calendar {
@ -479,7 +479,7 @@ limitations under the License. -->
.calendar-head .calendar-year-select, .calendar-head .calendar-year-select,
.calendar-head .calendar-month-select { .calendar-head .calendar-month-select {
font-size: 12px; font-size: $font-size-smaller;
padding: 0 2px; padding: 0 2px;
position: relative; position: relative;
} }
@ -524,8 +524,8 @@ limitations under the License. -->
float: left; float: left;
} }
.calendar-week:before, .calendar-week::before,
.calendar-date:before { .calendar-date::before {
content: ""; content: "";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -539,27 +539,27 @@ limitations under the License. -->
} }
.calendar-date-out { .calendar-date-out {
color: #ccc; color: $disabled-color;
} }
.calendar-date:hover, .calendar-date:hover,
.calendar-date-on { .calendar-date-on {
color: #3f97e3; color: $font-color;
background-color: #f8f8f8; background-color: $theme-background;
} }
.calendar-date-selected, .calendar-date-selected,
.calendar-date-selected:hover { .calendar-date-selected:hover {
color: #fff; color: $text-color;
font-weight: bold; font-weight: bold;
border-radius: 14px; border-radius: 14px;
background: #3f97e3; background: $active-background;
} }
.calendar-date-disabled { .calendar-date-disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
color: #ccc !important; color: $disabled-color !important;
background: #fff !important; background: $theme-background !important;
} }
.calendar-foot { .calendar-foot {
@ -591,7 +591,7 @@ limitations under the License. -->
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background: #fff; background: $theme-background;
left: 0; left: 0;
top: 0; top: 0;
} }
@ -626,7 +626,7 @@ limitations under the License. -->
margin-top: -30px; margin-top: -30px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
background: #fff; background: $theme-background;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }

8
src/components/Graph.vue
View File

@ -232,7 +232,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.no-data { .no-data {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
@ -254,9 +254,9 @@ limitations under the License. -->
z-index: 9999999; z-index: 9999999;
box-shadow: #ddd 1px 2px 10px; box-shadow: #ddd 1px 2px 10px;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear; 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; border-radius: 4px;
color: rgb(51, 51, 51); color: rgb(51 51 51);
padding: 5px; padding: 5px;
} }
@ -266,7 +266,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

14
src/components/SelectSingle.vue
View File

@ -86,17 +86,17 @@ limitations under the License. -->
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
border: 1px solid #ddd; border: 1px solid #ddd;
background: #fff; background: $theme-background;
border-radius: 3px; border-radius: 3px;
color: #000; color: #000;
font-size: 12px; font-size: $font-size-smaller;
height: 24px; height: 24px;
.selected { .selected {
padding: 0 3px; padding: 0 3px;
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
color: #409eff; color: $active-color;
background-color: #fafafa; background-color: #fafafa;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
text-align: center; text-align: center;
@ -126,7 +126,7 @@ limitations under the License. -->
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 0; top: 0;
font-size: 14px; font-size: $font-size-normal;
display: none; display: none;
color: #aaa; color: #aaa;
cursor: pointer; cursor: pointer;
@ -137,8 +137,8 @@ limitations under the License. -->
position: absolute; position: absolute;
top: 26px; top: 26px;
left: 0; left: 0;
background: #fff; background-color: $theme-background;
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; border: 1px solid #ddd;
width: 100%; width: 100%;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
@ -164,7 +164,7 @@ limitations under the License. -->
padding: 7px 15px; padding: 7px 15px;
&.select-disabled { &.select-disabled {
color: #409eff; color: $active-color;
cursor: not-allowed; cursor: not-allowed;
} }

29
src/components/TimePicker.vue
View File

@ -302,7 +302,7 @@ limitations under the License. -->
transform: scaleY(0.8); transform: scaleY(0.8);
} }
to { 100% {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
@ -314,7 +314,7 @@ limitations under the License. -->
transform: scaleY(1); transform: scaleY(1);
} }
to { 100% {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
} }
@ -343,7 +343,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
} }
.datepicker-close:before { .datepicker-close::before {
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -354,14 +354,14 @@ limitations under the License. -->
margin-left: -8px; margin-left: -8px;
margin-top: -8px; margin-top: -8px;
text-align: center; text-align: center;
color: #fff; color: $text-color;
border-radius: 50%; border-radius: 50%;
background: #ccc background: $disabled-color
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==") url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
no-repeat 50% 50%; no-repeat 50% 50%;
} }
.datepicker__clearable:hover:before { .datepicker__clearable:hover::before {
display: none; display: none;
} }
@ -369,7 +369,7 @@ limitations under the License. -->
display: block; display: block;
} }
.datepicker-close:hover:before { .datepicker-close:hover::before {
background-color: #afafaf; background-color: #afafaf;
} }
@ -385,7 +385,7 @@ limitations under the License. -->
padding: 0 5px; padding: 0 5px;
width: 100%; width: 100%;
user-select: none; user-select: none;
font-family: "Monaco"; font-family: Monaco;
letter-spacing: -0.7px; letter-spacing: -0.7px;
} }
@ -399,7 +399,6 @@ limitations under the License. -->
cursor: not-allowed; cursor: not-allowed;
background-color: #ebebe4; background-color: #ebebe4;
border-color: #e5e5e5; border-color: #e5e5e5;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -409,9 +408,9 @@ limitations under the License. -->
transition: all 200ms ease; transition: all 200ms ease;
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
font-size: 12px; font-size: $font-size-smaller;
background: #fff; background: $theme-background;
box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2); box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
margin-top: 2px; margin-top: 2px;
outline: 0; outline: 0;
padding: 5px; padding: 5px;
@ -457,7 +456,7 @@ limitations under the License. -->
border: 0; border: 0;
background-color: transparent; background-color: transparent;
line-height: 34px; line-height: 34px;
font-size: 12px; font-size: $font-size-smaller;
color: #666; color: #666;
text-align: left; text-align: left;
outline: none; outline: none;
@ -497,7 +496,7 @@ limitations under the License. -->
.datepicker-btn { .datepicker-btn {
padding: 5px 10px; padding: 5px 10px;
background: #3f97e3; background: #3f97e3;
color: #fff; color: $text-color;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -525,7 +524,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
margin: 10px 0 0 5px; margin: 10px 0 0 5px;
padding: 5px 15px; padding: 5px 15px;
color: #ffffff; color: $text-color;
} }
.datepicker__buttons .datepicker__button-select { .datepicker__buttons .datepicker__button-select {

4
src/layout/components/NavBar.vue
View File

@ -108,7 +108,7 @@ limitations under the License. -->
background-color: #fafbfc; background-color: #fafbfc;
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid #dfe4e8;
color: #222; color: #222;
font-size: 12px; font-size: $font-size-smaller;
} }
.nav-bar.dark { .nav-bar.dark {
@ -118,7 +118,7 @@ limitations under the License. -->
} }
.title { .title {
font-size: 14px; font-size: $font-size-normal;
font-weight: 500; font-weight: 500;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;

6
src/layout/components/SideBar.vue
View File

@ -132,12 +132,12 @@ limitations under the License. -->
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 220px; width: 220px;
font-size: 14px; font-size: $font-size-normal;
} }
.logo-icon-collapse { .logo-icon-collapse {
width: 65px; width: 65px;
margin: 5px 0 10px 0; margin: 5px 0 10px;
text-align: center; text-align: center;
} }
@ -169,7 +169,7 @@ limitations under the License. -->
.version { .version {
color: #eee; color: #eee;
font-size: 12px; font-size: $font-size-smaller;
cursor: pointer; cursor: pointer;
padding-left: 23px; padding-left: 23px;
margin-bottom: 10px; margin-bottom: 10px;

6
src/styles/lib.scss
View File

@ -189,12 +189,12 @@
.scroll_bar_style::-webkit-scrollbar-track { .scroll_bar_style::-webkit-scrollbar-track {
background-color: #eee; background-color: #eee;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px $disabled-color;
} }
.scroll_bar_style::-webkit-scrollbar-thumb { .scroll_bar_style::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px $disabled-color;
background-color: #aaa; background-color: #aaa;
} }
@ -220,7 +220,7 @@
padding: 8px; padding: 8px;
color: #eee; color: #eee;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: $font-size-smaller;
} }
.d3-tip { .d3-tip {
background: #252a2f; background: #252a2f;

25
src/styles/light.scss Normal file
View File

@ -0,0 +1,25 @@
/**
* 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;
$disabled-color: #ccc;
$active-color: #409eff;
$theme-background: #fff;
$active-background: #409eff;
$font-size-smaller: 12px;
$font-size-normal: 14px;

14
src/styles/reset.scss
View File

@ -18,8 +18,8 @@
body { body {
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: $font-size-normal;
color: #3d444f; color: $font-color;
font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif; font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
text-size-adjust: 100%; text-size-adjust: 100%;
@ -81,7 +81,7 @@ h4 {
} }
h5 { h5 {
font-size: 14px; font-size: $font-size-normal;
} }
h6 { h6 {
@ -153,7 +153,7 @@ pre {
} }
.el-switch__label * { .el-switch__label * {
font-size: 12px; font-size: $font-size-smaller;
} }
.el-drawer__header { .el-drawer__header {
@ -173,9 +173,9 @@ pre {
div.vis-tooltip { div.vis-tooltip {
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
background-color: #fff !important; background-color: $theme-background !important;
white-space: normal !important; white-space: normal !important;
font-size: 12px !important; font-size: $font-size-smaller !important;
} }
.vis-item { .vis-item {
@ -187,7 +187,7 @@ div.vis-tooltip {
background-color: #e66; background-color: #e66;
opacity: 0.8; opacity: 0.8;
border-color: #e66; border-color: #e66;
color: #fff !important; color: $text-color !important;
} }
.vis-item.Normal { .vis-item.Normal {

2
src/views/Alarm.vue
View File

@ -30,6 +30,6 @@ limitations under the License. -->
.alarm { .alarm {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
} }
</style> </style>

2
src/views/Event.vue
View File

@ -31,6 +31,6 @@ limitations under the License. -->
.event { .event {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
} }
</style> </style>

4
src/views/Settings.vue
View File

@ -146,7 +146,7 @@ limitations under the License. -->
.auto-select { .auto-select {
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $theme-background;
padding: 1px; padding: 1px;
input { input {
@ -169,7 +169,7 @@ limitations under the License. -->
outline: 0; outline: 0;
width: 50px; width: 50px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ccc; border: 1px solid $disabled-color;
text-align: center; text-align: center;
height: 25px; height: 25px;
} }

4
src/views/alarm/Content.vue
View File

@ -142,12 +142,12 @@ limitations under the License. -->
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../components/style.scss"; @import url("../components/style.scss");
.tips { .tips {
width: 100%; width: 100%;
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
font-size: 14px; font-size: $font-size-normal;
} }
</style> </style>

2
src/views/alarm/Header.vue
View File

@ -98,7 +98,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alarm-tool { .alarm-tool {
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #c1c5ca41; border-bottom: 1px solid #c1c5ca41;
background-color: #f0f2f5; background-color: #f0f2f5;
padding: 10px; padding: 10px;

12
src/views/components/ConditionTags.vue
View File

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

2
src/views/components/style.scss
View File

@ -90,7 +90,7 @@
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
overflow: hidden; overflow: hidden;
} }
} }

10
src/views/dashboard/List.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="layer" label="Layer" width="120" /> <el-table-column prop="layer" label="Layer" width="160" />
<el-table-column prop="entity" label="Entity" width="200" /> <el-table-column prop="entity" label="Entity" width="200" />
<el-table-column prop="isRoot" label="Root" width="60"> <el-table-column prop="isRoot" label="Root" width="60">
<template #default="scope"> <template #default="scope">
@ -480,8 +480,8 @@ limitations under the License. -->
.table { .table {
padding: 20px 10px; padding: 20px 10px;
background-color: #fff; background-color: $theme-background;
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -490,7 +490,7 @@ limitations under the License. -->
.toggle-selection { .toggle-selection {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: $theme-background;
} }
.pagination { .pagination {
@ -514,7 +514,7 @@ limitations under the License. -->
} }
.name { .name {
color: #409eff; color: $active-color;
} }
.reload { .reload {

8
src/views/dashboard/Widget.vue
View File

@ -185,12 +185,12 @@ limitations under the License. -->
.content { .content {
min-width: 100px; min-width: 100px;
border: 1px solid #eee; border: 1px solid #eee;
background-color: #fff; background-color: $theme-background;
position: relative; position: relative;
} }
.widget-chart { .widget-chart {
background: #fff; background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
@ -198,7 +198,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
text-align: center; text-align: center;
line-height: 400px; line-height: 400px;
} }
@ -208,7 +208,7 @@ limitations under the License. -->
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
background-color: aliceblue; background-color: aliceblue;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }

4
src/views/dashboard/components/WidgetLink.vue
View File

@ -154,13 +154,13 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.link { .link {
color: #409eff; color: $active-color;
cursor: pointer; cursor: pointer;
} }
.link-content { .link-content {
height: 300px; height: 300px;
font-size: 12px; font-size: $font-size-smaller;
overflow: auto; overflow: auto;
padding-bottom: 50px; padding-bottom: 50px;
} }

2
src/views/dashboard/configuration/ContinuousProfiling.vue
View File

@ -95,7 +95,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.item { .item {

2
src/views/dashboard/configuration/Event.vue
View File

@ -72,6 +72,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/Text.vue
View File

@ -155,6 +155,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/ThirdPartyApp.vue
View File

@ -84,6 +84,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/TimeRange.vue
View File

@ -151,6 +151,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/Topology.vue
View File

@ -67,7 +67,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.label { .label {

8
src/views/dashboard/configuration/Widget.vue
View File

@ -202,7 +202,7 @@ limitations under the License. -->
position: relative; position: relative;
min-width: 1280px; min-width: 1280px;
border: 1px solid #eee; border: 1px solid #eee;
background-color: #fff; background-color: $theme-background;
} }
.header { .header {
@ -210,7 +210,7 @@ limitations under the License. -->
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
background-color: aliceblue; background-color: aliceblue;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -240,7 +240,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
text-align: center; text-align: center;
line-height: 400px; line-height: 400px;
} }
@ -253,7 +253,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.collapse { .collapse {

2
src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
View File

@ -125,7 +125,7 @@ limitations under the License. -->
} }
.title { .title {
font-size: 12px; font-size: $font-size-smaller;
display: inline-flex; display: inline-flex;
height: 32px; height: 32px;
line-height: 34px; line-height: 34px;

14
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -611,20 +611,20 @@ limitations under the License. -->
span { span {
display: inline-block; display: inline-block;
padding: 2px 10px; padding: 2px 10px;
border: 1px solid #ccc; border: 1px solid $disabled-color;
background-color: #fff; background-color: $theme-background;
border-right: 0; border-right: 0;
cursor: pointer; cursor: pointer;
} }
span:nth-last-child(1) { span:nth-last-child(1) {
border-right: 1px solid #ccc; border-right: 1px solid $disabled-color;
} }
} }
span.active { span.active {
background-color: #409eff; background-color: $active-color;
color: #fff; color: $theme-background;
} }
.expression-param { .expression-param {
@ -640,7 +640,7 @@ limitations under the License. -->
min-height: 26px; min-height: 26px;
&:focus { &:focus {
border-color: #409eff; border-color: $active-color;
} }
} }
@ -651,6 +651,6 @@ limitations under the License. -->
.link { .link {
cursor: pointer; cursor: pointer;
color: #409eff; color: $active-color;
} }
</style> </style>

2
src/views/dashboard/configuration/widget/metric/Standard.vue
View File

@ -187,7 +187,7 @@ limitations under the License. -->
.label { .label {
width: 150px; width: 150px;
display: inline-block; display: inline-block;
font-size: 12px; font-size: $font-size-smaller;
} }
.close { .close {

6
src/views/dashboard/controls/ContinuousProfiling.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -74,7 +74,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -86,7 +86,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/DemandLog.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.log-wrapper { .log-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -68,7 +68,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -81,7 +81,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Ebpf.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -67,7 +67,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Event.vue
View File

@ -65,7 +65,7 @@ limitations under the License. -->
.event-wrapper { .event-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -92,7 +92,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Log.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.log-wrapper { .log-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -76,7 +76,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -89,7 +89,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/NetworkProfiling.vue
View File

@ -54,7 +54,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -66,7 +66,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -78,7 +78,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Profile.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -67,7 +67,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

12
src/views/dashboard/controls/Tab.vue
View File

@ -282,7 +282,7 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs { .tabs {
height: 40px; height: 40px;
color: #ccc; color: $disabled-color;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
@ -326,10 +326,10 @@ limitations under the License. -->
} }
span.active { span.active {
border-bottom: 1px solid #409eff; border-bottom: 1px solid $active-color;
.tab-name { .tab-name {
color: #409eff; color: $active-color;
} }
} }
} }
@ -359,7 +359,7 @@ limitations under the License. -->
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: #fff; background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
} }
@ -374,13 +374,13 @@ limitations under the License. -->
} }
.vue-grid-item.active { .vue-grid-item.active {
border: 1px solid #409eff; border: 1px solid $active-color;
} }
.no-data-tips { .no-data-tips {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: $font-size-normal;
padding-top: 30px; padding-top: 30px;
color: #888; color: #888;
} }

6
src/views/dashboard/controls/TaskTimeline.vue
View File

@ -54,7 +54,7 @@ limitations under the License. -->
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -66,7 +66,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -78,7 +78,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

4
src/views/dashboard/controls/Text.vue
View File

@ -78,7 +78,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text { .text {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -111,7 +111,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/ThirdPartyApp.vue
View File

@ -70,7 +70,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text { .text {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -102,13 +102,13 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
.tips { .tips {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

4
src/views/dashboard/controls/TimeRange.vue
View File

@ -141,7 +141,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.time-range { .time-range {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -175,7 +175,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Topology.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
// background-color: #333840; // background-color: #333840;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -81,13 +81,13 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

6
src/views/dashboard/controls/Trace.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.trace-wrapper { .trace-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -75,7 +75,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1200px; min-width: 1200px;
} }
@ -88,7 +88,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Widget.vue
View File

@ -269,7 +269,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.widget { .widget {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
} }
@ -293,7 +293,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
@ -305,7 +305,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

2
src/views/dashboard/graphs/Card.vue
View File

@ -73,7 +73,7 @@ limitations under the License. -->
color: #666; color: #666;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: $font-size-normal;
} }
.unit { .unit {

4
src/views/dashboard/graphs/EndpointList.vue
View File

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

4
src/views/dashboard/graphs/ServiceList.vue
View File

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

10
src/views/dashboard/graphs/Table.vue
View File

@ -76,14 +76,14 @@ limitations under the License. -->
} }
.row { .row {
border-left: 1px solid #ccc; border-left: 1px solid $disabled-color;
height: 20px; height: 20px;
width: 100%; width: 100%;
div { div {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border-right: 1px solid #ccc; border-right: 1px solid $disabled-color;
text-align: center; text-align: center;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
@ -91,11 +91,11 @@ limitations under the License. -->
} }
div:last-child { div:last-child {
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
} }
div:nth-last-child(2) { div:nth-last-child(2) {
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
} }
} }
@ -105,7 +105,7 @@ limitations under the License. -->
.row:first-child { .row:first-child {
div { div {
border-top: 1px solid #ccc; border-top: 1px solid $disabled-color;
background: #eee; background: #eee;
} }
} }

10
src/views/dashboard/graphs/TopList.vue
View File

@ -140,7 +140,7 @@ limitations under the License. -->
} }
.progress-bar { .progress-bar {
font-size: 12px; font-size: $font-size-smaller;
color: #333; color: #333;
} }
@ -159,7 +159,7 @@ limitations under the License. -->
} }
.calls { .calls {
font-size: 12px; font-size: $font-size-smaller;
padding: 0 5px; padding: 0 5px;
display: inline-block; display: inline-block;
background-color: #40454e; background-color: #40454e;
@ -172,7 +172,7 @@ limitations under the License. -->
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
color: #333; color: #333;
background-color: #fff; background-color: $theme-background;
will-change: opacity, background-color; will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s; transition: opacity 0.3s, background-color 0.3s;
} }
@ -197,10 +197,10 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 12px; font-size: $font-size-smaller;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

3
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

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

6
src/views/dashboard/graphs/components/Legend.vue
View File

@ -118,7 +118,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
table { table {
font-size: 12px; font-size: $font-size-smaller;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
border: none; border: none;
@ -136,7 +136,7 @@ limitations under the License. -->
top: 0; top: 0;
z-index: 1; z-index: 1;
width: 25vw; width: 25vw;
background: #fff; background: $theme-background;
text-align: left; text-align: left;
} }
@ -158,7 +158,7 @@ limitations under the License. -->
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-align: left; text-align: left;
background: #fff; background-color: $theme-background;
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;

1
src/views/dashboard/graphs/style.scss
View File

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

8
src/views/dashboard/panel/Layout.vue
View File

@ -85,19 +85,19 @@ limitations under the License. -->
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: #fff; background-color: $theme-background;
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
} }
.vue-grid-item.active { .vue-grid-item.active {
border: 1px solid #409eff; border: 1px solid $active-color;
} }
.no-data-tips { .no-data-tips {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: $font-size-normal;
padding-top: 30px; padding-top: 30px;
color: #888; color: #888;
} }

6
src/views/dashboard/panel/Tool.vue
View File

@ -750,7 +750,7 @@ limitations under the License. -->
} }
.label { .label {
font-size: 12px; font-size: $font-size-smaller;
display: inline-block; display: inline-block;
padding: 4px 2px; padding: 4px 2px;
} }
@ -768,13 +768,13 @@ limitations under the License. -->
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
text-align: center; text-align: center;
border: 1px solid #ccc; border: 1px solid $disabled-color;
border-radius: 3px; border-radius: 3px;
margin-left: 6px; margin-left: 6px;
cursor: pointer; cursor: pointer;
background-color: #eee; background-color: #eee;
color: #666; color: #666;
font-size: 12px; font-size: $font-size-smaller;
} }
.selectors { .selectors {

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

@ -137,7 +137,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
font-size: 12px; font-size: $font-size-smaller;
font-weight: bold; font-weight: bold;
} }
@ -163,7 +163,7 @@ limitations under the License. -->
.link { .link {
cursor: pointer; cursor: pointer;
color: #409eff; color: $active-color;
text-decoration: underline; text-decoration: underline;
} }
</style> </style>

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

@ -221,12 +221,12 @@ limitations under the License. -->
height: 100px; height: 100px;
&:focus { &:focus {
border-color: #409eff; border-color: $active-color;
} }
} }
.item-title { .item-title {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: $font-size-normal;
} }
</style> </style>

6
src/views/dashboard/related/demand-log/Header.vue
View File

@ -353,7 +353,7 @@ limitations under the License. -->
width: 30%; width: 30%;
border-style: unset; border-style: unset;
outline: 0; outline: 0;
border: 1px solid #ccc; border: 1px solid $disabled-color;
height: 30px; height: 30px;
padding: 0 5px; padding: 0 5px;
} }
@ -371,9 +371,9 @@ limitations under the License. -->
padding: 0 3px; padding: 0 3px;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
color: #3d444f; color: $font-color;
border: 1px dashed #aaa; border: 1px dashed #aaa;
font-size: 12px; font-size: $font-size-smaller;
margin: 0 2px; margin: 0 2px;
} }

2
src/views/dashboard/related/ebpf/Content.vue
View File

@ -52,7 +52,7 @@ limitations under the License. -->
.schedules { .schedules {
height: 90px; height: 90px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
padding-right: 10px; padding-right: 10px;
} }
</style> </style>

2
src/views/dashboard/related/ebpf/Header.vue
View File

@ -89,7 +89,7 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.header { .header {
padding: 5px 20px 5px 10px; padding: 5px 20px 5px 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
justify-content: space-between; justify-content: space-between;
} }

4
src/views/dashboard/related/ebpf/components/NewTask.vue
View File

@ -140,12 +140,12 @@ limitations under the License. -->
} }
.date { .date {
font-size: 12px; font-size: $font-size-smaller;
} }
.label { .label {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: $font-size-normal;
} }
.profile-input { .profile-input {

14
src/views/dashboard/related/ebpf/components/TaskList.vue
View File

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

4
src/views/dashboard/related/event/Header.vue
View File

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

6
src/views/dashboard/related/log/Header.vue
View File

@ -397,7 +397,7 @@ limitations under the License. -->
width: 30%; width: 30%;
border-style: unset; border-style: unset;
outline: 0; outline: 0;
border: 1px solid #ccc; border: 1px solid $disabled-color;
height: 30px; height: 30px;
padding: 0 5px; padding: 0 5px;
} }
@ -415,9 +415,9 @@ limitations under the License. -->
padding: 0 3px; padding: 0 3px;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
color: #3d444f; color: $font-color;
border: 1px dashed #aaa; border: 1px dashed #aaa;
font-size: 12px; font-size: $font-size-smaller;
margin: 0 2px; margin: 0 2px;
} }

4
src/views/dashboard/related/log/LogTable/Index.vue
View File

@ -72,7 +72,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.log { .log {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
width: 100%; width: 100%;
@ -84,7 +84,7 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgb(0 0 0 / 10%);
.traceId { .traceId {
width: 390px; width: 390px;

2
src/views/dashboard/related/log/LogTable/LogDetail.vue
View File

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

4
src/views/dashboard/related/network-profiling/components/NewConditions.vue
View File

@ -66,12 +66,12 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.date { .date {
font-size: 12px; font-size: $font-size-smaller;
} }
.label { .label {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: $font-size-normal;
} }
.profile-input { .profile-input {

4
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -523,7 +523,7 @@ limitations under the License. -->
.switch-icon-edit { .switch-icon-edit {
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
border: 1px solid #ccc; border: 1px solid $disabled-color;
color: #666; color: #666;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -570,6 +570,6 @@ limitations under the License. -->
padding: 5px; padding: 5px;
border: 1px solid #000; border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/related/network-profiling/components/Settings.vue
View File

@ -66,7 +66,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.label { .label {
font-size: 12px; font-size: $font-size-smaller;
margin-top: 10px; margin-top: 10px;
} }

2
src/views/dashboard/related/network-profiling/components/TimeLine.vue
View File

@ -141,7 +141,7 @@ limitations under the License. -->
.switch-icon-edit { .switch-icon-edit {
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
border: 1px solid #ccc; border: 1px solid $disabled-color;
color: #666; color: #666;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;

2
src/views/dashboard/related/profile/Header.vue
View File

@ -118,7 +118,7 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }

4
src/views/dashboard/related/profile/components/NewTask.vue
View File

@ -163,12 +163,12 @@ limitations under the License. -->
} }
.date { .date {
font-size: 12px; font-size: $font-size-smaller;
} }
.label { .label {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: $font-size-normal;
} }
.profile-input { .profile-input {

16
src/views/dashboard/related/profile/components/SegmentList.vue
View File

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

10
src/views/dashboard/related/profile/components/Stack/Container.vue
View File

@ -75,19 +75,19 @@ limitations under the License. -->
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./profile.scss"; @import url("./profile.scss");
.dragger { .dragger {
float: right; float: right;
} }
.profile { .profile {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
.profile-set-btn { .profile-set-btn {
font-size: 12px; font-size: $font-size-smaller;
border: 1px solid #ccc; border: 1px solid $disabled-color;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
width: 57px; width: 57px;
@ -107,7 +107,7 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgb(0 0 0 / 10%);
} }
.profile-header div { .profile-header div {

16
src/views/dashboard/related/profile/components/TaskList.vue
View File

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

2
src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
View File

@ -77,7 +77,7 @@ limitations under the License. -->
.schedules { .schedules {
height: 90px; height: 90px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
padding-right: 10px; padding-right: 10px;
} }
</style> </style>

21
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -20,7 +20,7 @@ limitations under the License. -->
element-loading-background="rgba(0, 0, 0, 0)" element-loading-background="rgba(0, 0, 0, 0)"
:style="`height: ${height}px`" :style="`height: ${height}px`"
> >
<svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent"> <svg class="svg-topology" :width="width - 100" :height="height" @click="svgEvent">
<g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`"> <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g <g
class="topo-node" class="topo-node"
@ -631,6 +631,7 @@ limitations under the License. -->
.svg-topology { .svg-topology {
cursor: move; cursor: move;
background-color: $theme-background;
} }
.legend { .legend {
@ -665,9 +666,9 @@ limitations under the License. -->
overflow: auto; overflow: auto;
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
color: #ccc; color: $disabled-color;
border: 1px solid #ccc; border: 1px solid $disabled-color;
background-color: #fff; background-color: $theme-background;
box-shadow: #eee 1px 2px 10px; box-shadow: #eee 1px 2px 10px;
transition: all 0.5ms linear; transition: all 0.5ms linear;
@ -686,7 +687,7 @@ limitations under the License. -->
position: absolute; position: absolute;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: $theme-background;
border-radius: 5px; border-radius: 5px;
padding: 10px 0; padding: 10px 0;
border: 1px solid #999; border: 1px solid #999;
@ -701,7 +702,7 @@ limitations under the License. -->
} }
span:hover { span:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
@ -715,8 +716,8 @@ limitations under the License. -->
.switch-icon { .switch-icon {
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
background: rgba(0, 0, 0, 0.3); background: rgb(0 0 0 / 30%);
color: #fff; color: $text-color;
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
@ -736,7 +737,7 @@ limitations under the License. -->
} }
.topo-text { .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; fill: #ddd;
font-size: 11px; font-size: 11px;
opacity: 0.8; opacity: 0.8;
@ -762,6 +763,6 @@ limitations under the License. -->
padding: 5px; padding: 5px;
border: 1px solid #000; border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/related/topology/components/Metrics.vue
View File

@ -149,7 +149,7 @@ limitations under the License. -->
.label { .label {
width: 150px; width: 150px;
display: inline-block; display: inline-block;
font-size: 12px; font-size: $font-size-smaller;
} }
.close { .close {

8
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -279,7 +279,7 @@ limitations under the License. -->
overflow: auto; overflow: auto;
padding: 10px 15px; padding: 10px 15px;
border-radius: 3px; border-radius: 3px;
color: #ccc; color: $disabled-color;
transition: all 0.5ms linear; transition: all 0.5ms linear;
z-index: 99; z-index: 99;
text-align: left; text-align: left;
@ -306,7 +306,7 @@ limitations under the License. -->
} }
.label { .label {
color: #ccc; color: $disabled-color;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -316,7 +316,7 @@ limitations under the License. -->
padding: 10px 0; padding: 10px 0;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: $theme-background;
border-radius: 3px; border-radius: 3px;
span { span {
@ -329,7 +329,7 @@ limitations under the License. -->
} }
span:hover { span:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }

2
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -458,7 +458,7 @@ limitations under the License. -->
} }
.label { .label {
font-size: 12px; font-size: $font-size-smaller;
margin-top: 10px; margin-top: 10px;
} }

10
src/views/dashboard/related/trace/Detail.vue
View File

@ -171,20 +171,20 @@ limitations under the License. -->
} }
.trace-detail-wrapper { .trace-detail-wrapper {
font-size: 12px; font-size: $font-size-smaller;
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
width: 100%; width: 100%;
height: 95px; height: 95px;
.grey { .grey {
color: #fff; color: $text-color;
background-color: #448dfe; background-color: #448dfe;
} }
.ghost { .ghost {
cursor: pointer; 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 { .trace-detail-ids {
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0%);
outline: 0; outline: 0;
border-style: unset; border-style: unset;
color: inherit; color: inherit;
@ -209,7 +209,7 @@ limitations under the License. -->
.tag { .tag {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
padding: 0px 7px; padding: 0 7px;
background-color: #40454e; background-color: #40454e;
color: #eee; color: #eee;
} }

4
src/views/dashboard/related/trace/Index.vue
View File

@ -43,14 +43,14 @@ limitations under the License. -->
.trace-wrapper { .trace-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1200px; min-width: 1200px;
} }

2
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -245,7 +245,7 @@ limitations under the License. -->
} }
.popup-btn { .popup-btn {
color: #fff; color: $text-color;
margin-top: 40px; margin-top: 40px;
width: 100%; width: 100%;
text-align: center; text-align: center;

6
src/views/dashboard/related/trace/components/Table/TableContainer.vue
View File

@ -147,10 +147,10 @@ limitations under the License. -->
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./table.scss"; @import url("./table.scss");
.trace { .trace {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
@ -165,7 +165,7 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgb(0 0 0 / 10%);
} }
.trace-header div { .trace-header div {

26
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -252,7 +252,7 @@ limitations under the License. -->
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./table.scss"; @import url("./table.scss");
.event-tag { .event-tag {
width: 12px; width: 12px;
@ -267,7 +267,7 @@ limitations under the License. -->
color: #448dfe; color: #448dfe;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.04); background: rgb(0 0 0 / 4%);
} }
} }
@ -276,7 +276,7 @@ limitations under the License. -->
position: relative; position: relative;
} }
.profiled:before { .profiled::before {
content: attr(data-text); content: attr(data-text);
position: absolute; position: absolute;
top: 30px; top: 30px;
@ -284,26 +284,26 @@ limitations under the License. -->
width: 100px; width: 100px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid $disabled-color;
background-color: #333; background-color: #333;
color: #fff; color: $text-color;
text-align: center; text-align: center;
box-shadow: #eee 1px 2px 10px; box-shadow: #eee 1px 2px 10px;
display: none; display: none;
} }
.profiled:after { .profiled::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 250px; left: 250px;
top: 20px; top: 20px;
border: 6px solid #333; border: 6px solid #333;
border-color: transparent transparent #333 transparent; border-color: transparent transparent #333;
display: none; display: none;
} }
.profiled:hover:before, .profiled:hover::before,
.profiled:hover:after { .profiled:hover::after {
display: block; display: block;
z-index: 999; z-index: 999;
} }
@ -320,11 +320,11 @@ limitations under the License. -->
} }
.trace-item.selected { .trace-item.selected {
background: rgba(0, 0, 0, 0.04); background: rgb(0 0 0 / 4%);
} }
.trace-item:not(.level0):hover { .trace-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04); background: rgb(0 0 0 / 4%);
} }
.trace-item > div { .trace-item > div {
@ -351,7 +351,7 @@ limitations under the License. -->
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
background: rgb(63, 177, 227); background: rgb(63 177 227);
position: relative; position: relative;
margin-top: 11px; margin-top: 11px;
border: none; border: none;
@ -359,7 +359,7 @@ limitations under the License. -->
.inner-progress_bar { .inner-progress_bar {
position: absolute; position: absolute;
background: rgb(110, 64, 170); background: rgb(110 64 170);
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
left: 0; left: 0;

11
vite.config.ts
View File

@ -27,6 +27,7 @@ import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
const OUTPUT_DIR = "dist"; const OUTPUT_DIR = "dist";
const pathSrc = path.resolve(__dirname, "./src");
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => { export default ({ mode }: ConfigEnv): UserConfig => {
const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd()); const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
@ -54,11 +55,19 @@ export default ({ mode }: ConfigEnv): UserConfig => {
resolve: { resolve: {
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"], extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": pathSrc,
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js", "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
}, },
preserveSymlinks: true, preserveSymlinks: true,
}, },
css: {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: `@import "@/styles/light.scss";`,
},
},
},
server: { server: {
host: true, host: true,
port: 3000, port: 3000,