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

style: update css

Browse Source
This commit is contained in:
Fine 2023-06-28 15:07:29 +08:00
parent b6c4a7dd89
commit e1f1d0d21f
28 changed files with 93 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/DateCalendar.vue
View File

@ -544,22 +544,22 @@ limitations under the License. -->
.calendar-date:hover,
.calendar-date-on {
color: #3f97e3;
background-color: #f8f8f8;
color: $font-color;
background-color: $theme-background;
}
.calendar-date-selected,
.calendar-date-selected:hover {
color: #fff;
color: $text-color;
font-weight: bold;
border-radius: 14px;
background: #3f97e3;
background: $active-background;
}
.calendar-date-disabled {
cursor: not-allowed !important;
color: #ccc !important;
background: #fff !important;
background: $theme-background !important;
}
.calendar-foot {
@ -591,7 +591,7 @@ limitations under the License. -->
width: 100%;
height: 100%;
position: absolute;
background: #fff;
background: $theme-background;
left: 0;
top: 0;
}
@ -626,7 +626,7 @@ limitations under the License. -->
margin-top: -30px;
height: 30px;
line-height: 30px;
background: #fff;
background: $theme-background;
text-align: center;
font-weight: bold;
}

4
src/components/SelectSingle.vue
View File

@ -86,7 +86,7 @@ limitations under the License. -->
position: relative;
justify-content: space-between;
border: 1px solid #ddd;
background: #fff;
background: $theme-background;
border-radius: 3px;
color: #000;
font-size: 12px;
@ -137,7 +137,7 @@ limitations under the License. -->
position: absolute;
top: 26px;
left: 0;
background: #fff;
background-color: $theme-background;
box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
border: 1px solid #ddd;
width: 100%;

24
src/components/TimePicker.vue
View File

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

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

@ -0,0 +1,24 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$font-color: #3d444f;
$text-color: #fff;
$font-color-black: #000;
$font-color-grey: #ccc;
$active-color: #409eff;
$theme-background: #fff;
$active-background: #409eff;

4
src/styles/reset.scss
View File

@ -173,7 +173,7 @@ pre {
div.vis-tooltip {
max-width: 600px;
overflow: hidden;
background-color: #fff !important;
background-color: $theme-background !important;
white-space: normal !important;
font-size: 12px !important;
}
@ -187,7 +187,7 @@ div.vis-tooltip {
background-color: #e66;
opacity: 0.8;
border-color: #e66;
color: #fff !important;
color: $text-color !important;
}
.vis-item.Normal {

1
src/types/components.d.ts vendored
View File

@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']

2
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 {

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

@ -480,7 +480,7 @@ limitations under the License. -->
.table {
padding: 20px 10px;
background-color: #fff;
background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
border-radius: 5px;
width: 100%;
@ -490,7 +490,7 @@ limitations under the License. -->
.toggle-selection {
margin-top: 20px;
background-color: #fff;
background-color: $theme-background;
}
.pagination {

4
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;

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 {

4
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 {
@ -253,7 +253,7 @@ limitations under the License. -->
padding: 10px;
text-align: right;
width: 100%;
background-color: #fff;
background-color: $theme-background;
}
.collapse {

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

@ -612,7 +612,7 @@ limitations under the License. -->
display: inline-block;
padding: 2px 10px;
border: 1px solid #ccc;
background-color: #fff;
background-color: $theme-background;
border-right: 0;
cursor: pointer;
}
@ -624,7 +624,7 @@ limitations under the License. -->
span.active {
background-color: $active-color;
color: #fff;
color: $theme-background;
}
.expression-param {

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

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

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

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

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

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

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

@ -85,7 +85,7 @@ limitations under the License. -->
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #fff;
background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px;
}

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

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

11
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 {
@ -667,7 +668,7 @@ limitations under the License. -->
border-radius: 3px;
color: #ccc;
border: 1px solid #ccc;
background-color: #fff;
background-color: $theme-background;
box-shadow: #eee 1px 2px 10px;
transition: all 0.5ms linear;
@ -686,7 +687,7 @@ limitations under the License. -->
position: absolute;
color: #333;
cursor: pointer;
background-color: #fff;
background-color: $theme-background;
border-radius: 5px;
padding: 10px 0;
border: 1px solid #999;
@ -716,7 +717,7 @@ limitations under the License. -->
cursor: pointer;
transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%);
color: #fff;
color: $text-color;
display: inline-block;
padding: 2px 4px;
border-radius: 3px;
@ -762,6 +763,6 @@ limitations under the License. -->
padding: 5px;
border: 1px solid #000;
border-radius: 3px;
background-color: #fff;
background-color: $theme-background;
}
</style>

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

@ -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 {

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

@ -178,13 +178,13 @@ limitations under the License. -->
height: 95px;
.grey {
color: #fff;
color: $text-color;
background-color: #448dfe;
}
.ghost {
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
background: rgb(0 0 0 / 30%);
}
}
@ -193,7 +193,7 @@ limitations under the License. -->
}
.trace-detail-ids {
background-color: rgba(0, 0, 0, 0);
background-color: rgb(0 0 0 / 0%);
outline: 0;
border-style: unset;
color: inherit;
@ -209,7 +209,7 @@ limitations under the License. -->
.tag {
display: inline-block;
border-radius: 4px;
padding: 0px 7px;
padding: 0 7px;
background-color: #40454e;
color: #eee;
}

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;

24
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;
@ -286,24 +286,24 @@ limitations under the License. -->
border-radius: 5px;
border: 1px solid #ccc;
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;

2
vite.config.ts
View File

@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: `@import "@/styles/variables.scss";`,
additionalData: `@import "@/styles/light.scss";`,
},
},
},