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 tool icons style

Browse Source
This commit is contained in:
Fine 2023-11-09 12:05:16 +08:00
parent 143e87d50b
commit 6f1e3dc3ae
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/theme.scss
View File

@ -31,6 +31,9 @@ html {
--sw-bg-color-overlay: #fff; --sw-bg-color-overlay: #fff;
--sw-border-color-light: #e4e7ed; --sw-border-color-light: #e4e7ed;
--popper-hover-bg: #eee; --popper-hover-bg: #eee;
--sw-icon-btn-bg: #eee;
--sw-icon-btn-color: #666;
--sw-icon-btn-border: #ccc;
} }
html.dark { html.dark {
@ -47,6 +50,9 @@ html.dark {
--sw-bg-color-overlay: #1d1e1f; --sw-bg-color-overlay: #1d1e1f;
--sw-border-color-light: #414243; --sw-border-color-light: #414243;
--popper-hover-bg: rgb(64, 158, 255, 0.1); --popper-hover-bg: rgb(64, 158, 255, 0.1);
--sw-icon-btn-bg: #222;
--sw-icon-btn-color: #ccc;
--sw-icon-btn-border: #999;
} }
.el-popper.is-light { .el-popper.is-light {
@ -58,6 +64,8 @@ html.dark {
--el-switch-off-color: #aaa; --el-switch-off-color: #aaa;
} }
$tool-icon-btn-bg: var(--sw-icon-btn-bg);
$tool-icon-btn-color: var(--sw-icon-btn-color);
$popper-hover-bg-color: var(--popper-hover-bg); $popper-hover-bg-color: var(--popper-hover-bg);
$box-shadow-color: var(--box-shadow-color); $box-shadow-color: var(--box-shadow-color);
$border-color-primary: var(--border-color-primary); $border-color-primary: var(--border-color-primary);

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

@ -766,12 +766,12 @@ limitations under the License. -->
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
text-align: center; text-align: center;
border: 1px solid $disabled-color; border: 1px solid var(--sw-icon-btn-border);
border-radius: 3px; border-radius: 3px;
margin-left: 6px; margin-left: 6px;
cursor: pointer; cursor: pointer;
background-color: #eee; background-color: var(--sw-icon-btn-bg);
color: #666; color: var(--sw-icon-btn-color);
font-size: $font-size-smaller; font-size: $font-size-smaller;
} }