fix: 去掉顶部遮罩,页头与搜索框改为半透明

- 删除 scroll-fade 遮罩及创建逻辑
- 页头改为 blur 并降到 55% 透明度,搜索框降到 60%
- 背景图渐隐层从 80% 调到 65%,顶部区域保持背景原色
- 验证:fades=0,header alpha=0.55,search alpha=0.60
This commit is contained in:
2026-10-31 16:34:54 +08:00
parent 7a61acfa02
commit a2155a4c89
4 changed files with 21 additions and 40 deletions
+12 -20
View File
@@ -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;