gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1594 feat: 增加business的light和dark色

Browse Source
This commit is contained in:
chenjinsong
2024-04-07 16:02:41 +08:00
parent f1a91429ec
commit d7606f411c
3 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/assets/css/common/table-common.scss
View File

@@ -140,84 +140,72 @@
color: var(--el-text-color-regular);
margin-right: 4px;
}
}
.top-tool-btn:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
&:disabled {
cursor: not-allowed;
opacity: 0.66;
}
}
.top-tool-btn.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: var(--el-text-color-regular);
}
.top-tool-btn:hover:not(.cn-btn-disabled) {
border: 1px solid $border-color;
background-color: var(--cn-bg-color-light);
}
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-active-background-color;
border: 1px solid $border-color;
i {
&.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: var(--el-text-color-regular);
}
}
.top-tool-btn--create {
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important; // 涉及到表格样式，后续修改
color: $color-white;
i {
color: $color-white;
&:hover:not(.cn-btn-disabled) {
border: 1px solid $border-color;
background-color: var(--el-fill-color);
}
}
&:focus:not(.cn-btn-disabled), &.is-focus {
background-color: var(--el-fill-color-darker);
border: 1px solid $border-color;
.top-tool-btn--create:hover {
background-color: #57B8D9 !important;
border-color: #2E88A6 !important;
color: $color-white;
i {
color: $color-white;
i {
color: var(--el-text-color-regular);
}
}
}
.top-tool-btn--create:focus {
background-color: #31A5CD !important;
border-color: #2E88A6 !important;
color: $color-white !important;
i {
color: $color-white !important;
}
}
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important;
color: $color-white;
i {
&.top-tool-btn--create {
background-color: var(--el-color-business);
border-color: var(--el-color-business-dark-2); // 涉及到表格样式，后续修改
color: $color-white;
i {
color: $color-white;
}
&:hover {
background-color: var(--el-color-business-light-2);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
&:focus {
background-color: var(--el-color-business-dark-1);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
&:disabled {
opacity: 0.66;
background-color: var(--el-color-business);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
}
}
.btn-customize {
color: #2E88A6;
color: var(--el-color-business-dark-2);
font-size: 12px;
.icon-gear {
color: #2E88A6;
color: var(--el-color-business-dark-2);
width: 12px;
height: 12px;
margin-right: 2px;

1
src/assets/css/components/views/charts2/domainNameResolution.scss
View File

@@ -17,7 +17,6 @@
align-items: center;
margin-bottom: 15px;
margin-right: 10px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: var(--el-text-color-regular);
line-height: 20px;

18
src/assets/css/main.scss
View File

@@ -1,4 +1,5 @@
@use 'sass:map';
@use 'sass:math';
@use './common.scss';
/* 主题 */
@@ -50,6 +51,23 @@
:root {
// 为新增的业务色设置css变量
@include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
// 生成 business 的 light 色值
@for $i from 1 through 9 {
@include var.set-css-var-value(('color', 'business', 'light', $i), mix(
css-var.$color-white,
map.get(css-var.$colors, 'business', 'base'),
math.percentage(math.div($i, 10))
));
}
// 生成 business 的 dark2色值
@for $i from 1 through 2 {
@include var.set-css-var-value(('color', 'business', 'dark', $i), mix(
css-var.$color-black,
map.get(css-var.$colors, 'business', 'base'),
math.percentage(math.div($i, 10))
));
}
--cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
--cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
--cn-color-critical: #D84C4C; // critical 严重等级分布