github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +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
85 changed files with 308 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Alarm.vue
View File

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

2
src/views/Event.vue
View File

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

4
src/views/Settings.vue
View File

@@ -146,7 +146,7 @@ limitations under the License. -->
.auto-select {
border-radius: 3px;
background-color: #fff;
background-color: $theme-background;
padding: 1px;
input {
@@ -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;
}

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

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

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

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

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

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

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

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

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

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

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

@@ -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;
@@ -198,7 +198,7 @@ limitations under the License. -->
}
.no-data {
font-size: 14px;
font-size: $font-size-normal;
text-align: center;
line-height: 400px;
}
@@ -208,7 +208,7 @@ limitations under the License. -->
line-height: 25px;
text-align: center;
background-color: aliceblue;
font-size: 12px;
font-size: $font-size-smaller;
position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 {
@@ -210,7 +210,7 @@ limitations under the License. -->
line-height: 25px;
text-align: center;
background-color: aliceblue;
font-size: 12px;
font-size: $font-size-smaller;
position: relative;
}
@@ -240,7 +240,7 @@ limitations under the License. -->
}
.no-data {
font-size: 14px;
font-size: $font-size-normal;
text-align: center;
line-height: 400px;
}
@@ -253,7 +253,7 @@ limitations under the License. -->
padding: 10px;
text-align: right;
width: 100%;
background-color: #fff;
background-color: $theme-background;
}
.collapse {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -282,7 +282,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.tabs {
height: 40px;
color: #ccc;
color: $disabled-color;
width: 100%;
overflow-x: auto;
white-space: nowrap;
@@ -326,10 +326,10 @@ limitations under the License. -->
}
span.active {
border-bottom: 1px solid #409eff;
border-bottom: 1px solid $active-color;
.tab-name {
color: #409eff;
color: $active-color;
}
}
}
@@ -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;
}
@@ -374,13 +374,13 @@ limitations under the License. -->
}
.vue-grid-item.active {
border: 1px solid #409eff;
border: 1px solid $active-color;
}
.no-data-tips {
width: 100%;
text-align: center;
font-size: 14px;
font-size: $font-size-normal;
padding-top: 30px;
color: #888;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -140,7 +140,7 @@ limitations under the License. -->
}
.progress-bar {
font-size: 12px;
font-size: $font-size-smaller;
color: #333;
}
@@ -159,7 +159,7 @@ limitations under the License. -->
}
.calls {
font-size: 12px;
font-size: $font-size-smaller;
padding: 0 5px;
display: inline-block;
background-color: #40454e;
@@ -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;
}
@@ -197,10 +197,10 @@ limitations under the License. -->
cursor: pointer;
position: relative;
text-align: center;
font-size: 12px;
font-size: $font-size-smaller;
&:hover {
color: #409eff;
color: $active-color;
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">
<template #reference>
<span class="trend">
<Icon iconName="timeline" size="middle" style="color: #409eff" />
<Icon iconName="timeline" size="middle" />
</span>
</template>
<div class="view-line">
@@ -159,6 +159,7 @@ limitations under the License. -->
display: inline-block;
height: 100%;
cursor: pointer;
color: $active-color;
}
.value {

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

@@ -118,7 +118,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
table {
font-size: 12px;
font-size: $font-size-smaller;
white-space: nowrap;
margin: 0;
border: none;
@@ -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;

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

@@ -35,7 +35,6 @@
.link {
cursor: pointer;
color: #409eff;
display: inline-block;
width: 100%;
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) {
background: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px;
}
.vue-grid-item.active {
border: 1px solid #409eff;
border: 1px solid $active-color;
}
.no-data-tips {
width: 100%;
text-align: center;
font-size: 14px;
font-size: $font-size-normal;
padding-top: 30px;
color: #888;
}

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

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

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

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

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

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

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

@@ -353,7 +353,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;
}
@@ -371,9 +371,9 @@ limitations under the License. -->
padding: 0 3px;
border-radius: 3px;
overflow: hidden;
color: #3d444f;
color: $font-color;
border: 1px dashed #aaa;
font-size: 12px;
font-size: $font-size-smaller;
margin: 0 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -66,12 +66,12 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.date {
font-size: 12px;
font-size: $font-size-smaller;
}
.label {
margin-top: 10px;
font-size: 14px;
font-size: $font-size-normal;
}
.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 {
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid #ccc;
border: 1px solid $disabled-color;
color: #666;
display: inline-block;
padding: 5px;
@@ -570,6 +570,6 @@ limitations under the License. -->
padding: 5px;
border: 1px solid #000;
border-radius: 3px;
background-color: #fff;
background-color: $theme-background;
}
</style>

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

@@ -66,7 +66,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.label {
font-size: 12px;
font-size: $font-size-smaller;
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 {
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid #ccc;
border: 1px solid $disabled-color;
color: #666;
display: inline-block;
padding: 5px;

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

@@ -118,7 +118,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.header {
padding: 10px;
font-size: 12px;
font-size: $font-size-smaller;
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 {
font-size: 12px;
font-size: $font-size-smaller;
}
.label {
margin-top: 10px;
font-size: 14px;
font-size: $font-size-normal;
}
.profile-input {

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

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

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

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

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

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

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

@@ -77,7 +77,7 @@ limitations under the License. -->
.schedules {
height: 90px;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid $disabled-color;
padding-right: 10px;
}
</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)"
: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="topo-node"
@@ -631,6 +631,7 @@ limitations under the License. -->
.svg-topology {
cursor: move;
background-color: $theme-background;
}
.legend {
@@ -665,9 +666,9 @@ limitations under the License. -->
overflow: auto;
padding: 0 15px;
border-radius: 3px;
color: #ccc;
border: 1px solid #ccc;
background-color: #fff;
color: $disabled-color;
border: 1px solid $disabled-color;
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;
@@ -701,7 +702,7 @@ limitations under the License. -->
}
span:hover {
color: #409eff;
color: $active-color;
background-color: #eee;
}
}
@@ -715,8 +716,8 @@ limitations under the License. -->
.switch-icon {
cursor: pointer;
transition: all 0.5ms linear;
background: rgba(0, 0, 0, 0.3);
color: #fff;
background: rgb(0 0 0 / 30%);
color: $text-color;
display: inline-block;
padding: 2px 4px;
border-radius: 3px;
@@ -736,7 +737,7 @@ limitations under the License. -->
}
.topo-text {
font-family: "Lato", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
fill: #ddd;
font-size: 11px;
opacity: 0.8;
@@ -762,6 +763,6 @@ limitations under the License. -->
padding: 5px;
border: 1px solid #000;
border-radius: 3px;
background-color: #fff;
background-color: $theme-background;
}
</style>

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

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

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

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

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

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

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

@@ -171,20 +171,20 @@ limitations under the License. -->
}
.trace-detail-wrapper {
font-size: 12px;
font-size: $font-size-smaller;
padding: 5px 10px;
border-bottom: 1px solid #eee;
width: 100%;
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;
}

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

@@ -43,14 +43,14 @@ limitations under the License. -->
.trace-wrapper {
width: 100%;
height: 100%;
font-size: 12px;
font-size: $font-size-smaller;
position: relative;
overflow: auto;
}
.header {
padding: 10px;
font-size: 12px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
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 {
color: #fff;
color: $text-color;
margin-top: 40px;
width: 100%;
text-align: center;

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

@@ -147,10 +147,10 @@ limitations under the License. -->
}
</script>
<style lang="scss" scoped>
@import "./table.scss";
@import url("./table.scss");
.trace {
font-size: 12px;
font-size: $font-size-smaller;
height: 100%;
overflow: auto;
width: 100%;
@@ -165,7 +165,7 @@ limitations under the License. -->
user-select: none;
border-left: 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 {

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

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