style: 修复侧栏分类圆角,顶部增加软虚化

- nav-card 补 12px 圆角与 overflow hidden
- 搜索框 50% 透明 + blur(14px)
- 新增 top-blur:blur(8px) + 上下 mask 渐隐,覆盖搜索与内容顶部,不出现硬线
- 验证:nav 圆角 12、搜索可点、虚化生效
This commit is contained in:
2026-10-31 17:03:20 +08:00
parent 2a344ae534
commit 762de4a4e1
4 changed files with 48 additions and 3 deletions
+32 -2
View File
@@ -151,8 +151,33 @@
/* 搜索框半透明,顶部区域透出背景 */
.search-row > *:first-child {
background-color: color-mix(in srgb, var(--su-bg-card) 60%, transparent);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--su-bg-card) 50%, transparent);
backdrop-filter: blur(14px);
}
/* 搜索区域软虚化:上下都用 mask 渐隐,不出现横向分割线 */
.top-blur {
position: fixed;
top: 60px;
right: 0;
left: 0;
z-index: 4;
height: 120px;
pointer-events: none;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--su-bg-page) 22%, transparent) 0%,
transparent 80%
);
backdrop-filter: blur(8px);
mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 62%, transparent 100%);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 28%,
#000 62%,
transparent 100%
);
}
/* ---------- 两栏骨架 ---------- */
@@ -1339,6 +1364,11 @@ a.entry-href:hover {
backdrop-filter: blur(14px) saturate(1.15);
}
.sidebar-home .nav-card {
overflow: hidden;
border-radius: var(--su-radius-md);
}
.sidebar-divider {
margin: var(--su-space-2) 0;
border-top: 1px dashed var(--su-border-strong);