样式优化
This commit is contained in:
@@ -63,6 +63,13 @@
|
||||
--el-border-radius-base: var(--ls-radius-md);
|
||||
--el-border-radius-round: 999px;
|
||||
--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%);
|
||||
}
|
||||
|
||||
.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-dropdown-menu__item {
|
||||
color: rgba(226, 232, 240, 0.85) !important;
|
||||
@@ -264,6 +276,46 @@ select:-webkit-autofill:focus {
|
||||
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 {
|
||||
background: transparent !important;
|
||||
|
||||
Reference in New Issue
Block a user