mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-12 15:52:57 +00:00
feat: add color
This commit is contained in:
parent
f0810decd0
commit
13081abf81
@ -31,14 +31,14 @@
|
|||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--el-color-primary: #409eff;
|
--el-color-primary: #409eff;
|
||||||
--theme-background: #36383d;
|
--theme-background: #212224;
|
||||||
--font-color: #fafbfc;
|
--font-color: #fafbfc;
|
||||||
--disabled-color: #ccc;
|
--disabled-color: #ccc;
|
||||||
--el-text-color-regular: #fafbfc;
|
--el-text-color-regular: #fafbfc;
|
||||||
--dashboard-tool-bg: #000;
|
--dashboard-tool-bg: #000;
|
||||||
--text-color-placeholder: #ccc;
|
--text-color-placeholder: #ccc;
|
||||||
--border-color: #262629;
|
--border-color: #262629;
|
||||||
--border-color-primary: #666;
|
--border-color-primary: #4b4b52;
|
||||||
--layout-background: #000;
|
--layout-background: #000;
|
||||||
--el-switch-off: #999;
|
--el-switch-off: #999;
|
||||||
}
|
}
|
||||||
|
@ -302,15 +302,16 @@ limitations under the License. -->
|
|||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
outline: none;
|
outline: none;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
background-color: $theme-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-icons {
|
.tab-icons {
|
||||||
color: #333;
|
color: $font-color;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
|
@ -59,7 +59,6 @@ limitations under the License. -->
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.topology {
|
.topology {
|
||||||
// background-color: #333840;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: $font-size-smaller;
|
font-size: $font-size-smaller;
|
||||||
|
@ -61,7 +61,7 @@ limitations under the License. -->
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.chart-card {
|
.chart-card {
|
||||||
color: #333;
|
color: $font-color;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -141,7 +141,7 @@ limitations under the License. -->
|
|||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
font-size: $font-size-smaller;
|
font-size: $font-size-smaller;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-slow-i {
|
.chart-slow-i {
|
||||||
@ -171,7 +171,7 @@ limitations under the License. -->
|
|||||||
padding: 4px 10px 7px;
|
padding: 4px 10px 7px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
background-color: $theme-background;
|
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;
|
||||||
@ -188,12 +188,12 @@ limitations under the License. -->
|
|||||||
}
|
}
|
||||||
|
|
||||||
.operation-icon {
|
.operation-icon {
|
||||||
color: #333;
|
color: $font-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.operation {
|
.operation {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -734,7 +734,7 @@ limitations under the License. -->
|
|||||||
|
|
||||||
.operations-list {
|
.operations-list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: $theme-background;
|
background-color: $theme-background;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -322,7 +322,7 @@ limitations under the License. -->
|
|||||||
.operations-list {
|
.operations-list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
color: #333;
|
color: $font-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: $theme-background;
|
background-color: $theme-background;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -285,7 +285,7 @@ limitations under the License. -->
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid $disabled-color;
|
border: 1px solid $disabled-color;
|
||||||
background-color: #333;
|
background-color: $font-color;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: #eee 1px 2px 10px;
|
box-shadow: #eee 1px 2px 10px;
|
||||||
@ -297,8 +297,8 @@ limitations under the License. -->
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 250px;
|
left: 250px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
border: 6px solid #333;
|
border: 6px solid $font-color;
|
||||||
border-color: transparent transparent #333;
|
border-color: transparent transparent $font-color;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user