样式优化

This commit is contained in:
2025-12-27 16:52:40 +08:00
parent 464386efe0
commit c027363e67
@@ -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;