fix: 去掉顶部遮罩,页头与搜索框改为半透明
- 删除 scroll-fade 遮罩及创建逻辑 - 页头改为 blur 并降到 55% 透明度,搜索框降到 60% - 背景图渐隐层从 80% 调到 65%,顶部区域保持背景原色 - 验证:fades=0,header alpha=0.55,search alpha=0.60
This commit is contained in:
+12
-20
@@ -27,7 +27,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 80%;
|
||||
height: 65%;
|
||||
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
|
||||
}
|
||||
|
||||
@@ -149,6 +149,17 @@
|
||||
box-shadow: var(--su-shadow-card);
|
||||
}
|
||||
|
||||
/* 搜索框半透明,顶部区域透出背景 */
|
||||
.search-row > *:first-child {
|
||||
background-color: color-mix(in srgb, var(--su-bg-card) 60%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 首页页头更透明,让背景图透出来 */
|
||||
.app > header {
|
||||
background-color: color-mix(in srgb, var(--su-bg-page) 55%, transparent);
|
||||
}
|
||||
|
||||
/* ---------- 两栏骨架 ---------- */
|
||||
|
||||
.content {
|
||||
@@ -1319,25 +1330,6 @@ a.entry-href:hover {
|
||||
}
|
||||
|
||||
/* 侧栏到内容区共用一条滚动虚化遮罩,同一水平高度 */
|
||||
.scroll-fade {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
height: 64px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--su-bg-page) 45%, transparent) 0%,
|
||||
color-mix(in srgb, var(--su-bg-page) 20%, transparent) 55%,
|
||||
transparent 100%
|
||||
);
|
||||
backdrop-filter: blur(14px) saturate(1.1);
|
||||
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
|
||||
}
|
||||
|
||||
.scroll-fade.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-fade.is-visible {
|
||||
opacity: 1;
|
||||
|
||||
@@ -221,22 +221,6 @@ export default function AppNext() {
|
||||
|
||||
const onScroll = () => setScrolled(body.scrollTop > 4)
|
||||
|
||||
// 独立渐隐层:固定在滚动区顶部,不随侧栏 transform 移动
|
||||
const fade = document.createElement('div')
|
||||
fade.className = 'scroll-fade'
|
||||
fade.setAttribute('aria-hidden', 'true')
|
||||
document.body.appendChild(fade)
|
||||
|
||||
const updateFade = () => {
|
||||
if (!(sider instanceof HTMLElement)) return
|
||||
const siderRect = sider.getBoundingClientRect()
|
||||
const contentRect = content.getBoundingClientRect()
|
||||
fade.style.left = `${siderRect.left}px`
|
||||
fade.style.width = `${Math.max(0, contentRect.right - siderRect.left)}px`
|
||||
fade.style.top = `${body.getBoundingClientRect().top}px`
|
||||
fade.classList.toggle('is-visible', body.scrollTop > 4 && siderRect.width > 0)
|
||||
}
|
||||
|
||||
const updateSticky = () => {
|
||||
const viewport = body.clientHeight
|
||||
const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
|
||||
@@ -244,7 +228,6 @@ export default function AppNext() {
|
||||
if (sider instanceof HTMLElement) {
|
||||
sider.style.transform = offset > 0 ? `translateY(${offset}px)` : ''
|
||||
}
|
||||
updateFade()
|
||||
}
|
||||
|
||||
body.addEventListener('scroll', onScroll, { passive: true })
|
||||
@@ -261,7 +244,6 @@ export default function AppNext() {
|
||||
body.removeEventListener('scroll', updateSticky)
|
||||
window.removeEventListener('resize', updateSticky)
|
||||
observer.disconnect()
|
||||
fade.remove()
|
||||
body.id = ''
|
||||
body.style.overflowY = ''
|
||||
body.style.overflowX = ''
|
||||
@@ -618,7 +600,7 @@ export default function AppNext() {
|
||||
siderWidth={240}
|
||||
gap={20}
|
||||
headerHeight={60}
|
||||
headerVariant="solid"
|
||||
headerVariant="blur"
|
||||
siderBordered={false}
|
||||
contentPadding="none"
|
||||
contentOffset={88}
|
||||
|
||||
Reference in New Issue
Block a user