style: 修复侧栏分类圆角,顶部增加软虚化
- nav-card 补 12px 圆角与 overflow hidden - 搜索框 50% 透明 + blur(14px) - 新增 top-blur:blur(8px) + 上下 mask 渐隐,覆盖搜索与内容顶部,不出现硬线 - 验证:nav 圆角 12、搜索可点、虚化生效
This commit is contained in:
+32
-2
@@ -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);
|
||||
|
||||
@@ -223,6 +223,13 @@ export default function AppNext() {
|
||||
|
||||
const onScroll = () => setScrolled(body.scrollTop > 4)
|
||||
|
||||
// 顶部软虚化层:覆盖搜索区域与内容顶部,边缘用 mask 渐隐,避免硬分割线
|
||||
const blur = document.createElement('div')
|
||||
blur.className = 'top-blur'
|
||||
blur.setAttribute('aria-hidden', 'true')
|
||||
const appRoot = document.querySelector('.app')
|
||||
appRoot?.appendChild(blur)
|
||||
|
||||
const updateSticky = () => {
|
||||
const viewport = body.clientHeight
|
||||
const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
|
||||
@@ -246,6 +253,7 @@ export default function AppNext() {
|
||||
body.removeEventListener('scroll', updateSticky)
|
||||
window.removeEventListener('resize', updateSticky)
|
||||
observer.disconnect()
|
||||
blur.remove()
|
||||
body.id = ''
|
||||
body.style.overflowY = ''
|
||||
body.style.overflowX = ''
|
||||
|
||||
Reference in New Issue
Block a user