样式优化
This commit is contained in:
@@ -63,6 +63,13 @@
|
|||||||
--el-border-radius-base: var(--ls-radius-md);
|
--el-border-radius-base: var(--ls-radius-md);
|
||||||
--el-border-radius-round: 999px;
|
--el-border-radius-round: 999px;
|
||||||
--el-box-shadow-light: var(--ls-shadow);
|
--el-box-shadow-light: var(--ls-shadow);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loading 遮罩层颜色(避免 v-loading 出现白色遮罩闪动)
|
||||||
|
* Element Plus 内部会使用该变量作为 mask 背景色
|
||||||
|
*/
|
||||||
|
--el-mask-color: rgba(10, 12, 16, 0.55);
|
||||||
|
--el-mask-color-extra-light: rgba(10, 12, 16, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -249,6 +256,11 @@ select:-webkit-autofill:focus {
|
|||||||
-webkit-backdrop-filter: blur(25px) saturate(180%);
|
-webkit-backdrop-filter: blur(25px) saturate(180%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-popper__arrow::before {
|
||||||
|
background: rgba(15, 17, 26, 0.72) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.el-select-dropdown__item,
|
.el-select-dropdown__item,
|
||||||
.el-dropdown-menu__item {
|
.el-dropdown-menu__item {
|
||||||
color: rgba(226, 232, 240, 0.85) !important;
|
color: rgba(226, 232, 240, 0.85) !important;
|
||||||
@@ -264,6 +276,46 @@ select:-webkit-autofill:focus {
|
|||||||
color: var(--ls-accent-orange) !important;
|
color: var(--ls-accent-orange) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ====== Loading(全站 v-loading 去白底闪动)====== */
|
||||||
|
/**
|
||||||
|
* 适用场景:
|
||||||
|
* - el-row / el-table / el-card 等容器上 v-loading
|
||||||
|
* - ElLoading service 全屏 loading
|
||||||
|
*
|
||||||
|
* 目标:
|
||||||
|
* - 遮罩层使用深色玻璃拟态,不出现白色闪动
|
||||||
|
* - spinner 与文字使用主题色,观感统一
|
||||||
|
*/
|
||||||
|
.el-loading-mask {
|
||||||
|
background-color: var(--el-mask-color) !important;
|
||||||
|
backdrop-filter: blur(18px) saturate(160%);
|
||||||
|
-webkit-backdrop-filter: blur(18px) saturate(160%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-loading-spinner .el-loading-text {
|
||||||
|
color: rgba(226, 232, 240, 0.85) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-loading-spinner .path {
|
||||||
|
stroke: var(--ls-accent-orange) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-loading-spinner i {
|
||||||
|
color: var(--ls-accent-orange) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ====== Skeleton(避免骨架屏浅色块)====== */
|
||||||
|
.el-skeleton {
|
||||||
|
--el-skeleton-color: rgba(15, 17, 26, 0.40);
|
||||||
|
--el-skeleton-to-color: rgba(15, 17, 26, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-skeleton__item {
|
||||||
|
background: rgba(15, 17, 26, 0.45) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: var(--ls-radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
/* ====== 表格/分页(深色玻璃)====== */
|
/* ====== 表格/分页(深色玻璃)====== */
|
||||||
.el-table {
|
.el-table {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user