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

feat: add border color

Browse Source
This commit is contained in:
Fine 2023-11-07 16:56:07 +08:00
parent 9e73f52dcf
commit 01a1cedb07
20 changed files with 38 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/AppMain.vue
View File

@ -24,7 +24,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.app-main {
height: calc(100% - 40px);
background: #f7f9fa;
background: $layout-background;
overflow: auto;
}
</style>

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

@ -52,15 +52,7 @@ limitations under the License. -->
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span>
<span class="ml-5">
<el-switch
v-model="theme"
active-text="D"
inactive-text="H"
size="small"
inactive-color="#999"
inline-prompt
@change="changeTheme"
/>
<el-switch v-model="theme" active-text="D" inactive-text="H" size="small" inline-prompt @change="changeTheme" />
</span>
<span class="version ml-5 cp">
<el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
@ -97,6 +89,7 @@ limitations under the License. -->
const pageTitle = ref<string>("");
const theme = ref<boolean>(false);
changeTheme();
resetDuration();
getVersion();
getNavPaths();
@ -317,12 +310,6 @@ limitations under the License. -->
font-size: $font-size-smaller;
}
.nav-bar.dark {
background-color: $theme-background;
border-bottom: 1px solid #252a2f;
color: $theme-background;
}
.title {
font-size: $font-size-normal;
font-weight: 500;

20
src/styles/theme.scss
View File

@ -23,26 +23,36 @@
--el-text-color-regular: #606266;
--dashboard-tool-bg: rgb(240 242 245);
--text-color-placeholder: #666;
--border-color: #dfe4e8;
--border-color: #dcdfe6;
--layout-background: #f7f9fa;
--el-switch-off: #999;
}
.dark {
--el-color-primary: #409eff;
--theme-background: #000;
--theme-background: #36383d;
--font-color: #fafbfc;
--disabled-color: #ccc;
--el-text-color-regular: #fafbfc;
--dashboard-tool-bg: #212224;
--dashboard-tool-bg: #000;
--text-color-placeholder: #ccc;
--border-color: #222;
--border-color: #262629;
--layout-background: #000;
--el-switch-off: #999;
}
.el-switch {
--el-switch-on-color: var(--el-color-primary);
--el-switch-off-color: var(--el-switch-off);
}
.el-breadcrumb__separator {
--el-text-color-placeholder: var(--text-color-placeholder);
}
$layout-background: var(--layout-background);
$border-color: var(--border-color);
$dashboard-tool-bg: var(--dashboard-tool-bg);
$dashboard-tool-bg-color: var(--dashboard-tool-bg);
$font-color: var(--font-color);
$text-color: var(--theme-background);
$disabled-color: var(--disabled-color);

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

@ -630,7 +630,7 @@ limitations under the License. -->
.expression-param {
display: inline-block;
width: 400px;
border: 1px solid #dcdfe6;
border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 3px;

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

@ -75,7 +75,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -95,6 +95,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

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

@ -69,7 +69,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}

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

@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {

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

@ -80,7 +80,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}

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

@ -77,7 +77,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}

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

@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

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

@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {

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

@ -354,7 +354,7 @@ limitations under the License. -->
}
.vue-grid-layout {
background: #f7f9fa;
background: $layout-background;
height: auto !important;
}

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

@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

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

@ -76,7 +76,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1200px;
}

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

@ -80,7 +80,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.vue-grid-layout {
background: #f7f9fa;
background: $layout-background;
height: auto !important;
}

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

@ -122,8 +122,6 @@ limitations under the License. -->
inactive-text="V"
size="small"
inline-prompt
active-color="#409eff"
inactive-color="#999"
@change="changeMode"
/>
</div>
@ -739,7 +737,7 @@ limitations under the License. -->
.dashboard-tool {
text-align: right;
padding: 3px 5px 5px;
background: $dashboard-tool-bg;
background: $dashboard-tool-bg-color;
border-bottom: 1px solid $border-color;
justify-content: space-between;
}

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

@ -212,7 +212,7 @@ limitations under the License. -->
}
#uri-param {
border: 1px solid #dcdfe6;
border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 4px;

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

@ -90,7 +90,7 @@ limitations under the License. -->
.header {
padding: 5px 20px 5px 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
justify-content: space-between;
}

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

@ -119,7 +119,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.name {

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

@ -51,7 +51,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1200px;
}