fix(web): 极窄屏备案号不再顶到按钮;mini 叶签两端改为渐变淡出
1) 备案号与自定义按钮只剩 1px 实测 320x640:备案号换行成两行、高 66px,占据距底 11..77;而搜索球/ 按钮组固定在 bottom:76px → 两者实测只剩 1px(视觉上已贴上)。 修法:≤380px 时把按钮上移到 bottom:88px,并收紧页脚 gap/padding (两行高度仍 66px)→ 实测净间隙 11px。≥390px 时备案号是单行 39px, 间隙本就充足,保持不变。 2) mini 顶部叶签被两侧按钮硬切 结构是 [‹按钮 34px][滚动行][›按钮 34px],滚动行 overflow-x:auto (内容 858px / 可视 294px),卡片直接在滚动行边缘被切断,没有任何过渡。 修法:给滚动行加 mask-image 两端各 24px 渐变淡出,并用 :has() 关联 翻页按钮的 disabled 状态 —— 已经在尽头的一侧不再淡出(两端都到头则 完全不遮罩),避免"到头了还在渐隐"的错觉。 实测:最左时 mask 为「左侧实心 + 右侧渐隐」,滚到最右变为 「左侧渐隐 + 右侧实心」。
This commit is contained in:
42
web/navi.css
42
web/navi.css
@ -532,6 +532,32 @@ html[data-theme] .minimal-headings-row {
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
|
||||
/* 滚动行两端用 mask 渐变淡出:此前卡片在滚动行边缘(紧贴两侧 ‹ › 按钮)
|
||||
被硬切,看起来像"被按钮截断"。用 :has() 关联翻页按钮的 disabled 状态,
|
||||
已经在尽头的一侧就不淡出,避免"尽头还在渐隐"的错觉。 */
|
||||
html[data-theme] .minimal-headings-row {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
|
||||
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
|
||||
}
|
||||
|
||||
/* 已到最左:左侧不淡出 */
|
||||
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]) .minimal-headings-row {
|
||||
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
|
||||
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
|
||||
}
|
||||
|
||||
/* 已到最右:右侧不淡出 */
|
||||
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
|
||||
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
|
||||
}
|
||||
|
||||
/* 两端都到尽头:完全不淡出 */
|
||||
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]):has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
html[data-theme] .minimal-headings-row .headings {
|
||||
flex-basis: 132px !important;
|
||||
min-height: 44px !important;
|
||||
@ -722,6 +748,22 @@ html[data-theme] .minimal-section-inner a.item {
|
||||
此时把两个按钮藏起来(visibility 不受 prefers-reduced-motion 影响,
|
||||
比 transform 更可靠),搜索栏即可用满宽度。 */
|
||||
@media (max-width: 380px) {
|
||||
/* 备案号在这里会换行成两行(实测 390px 高 39px、320px 高 66px),
|
||||
而按钮固定在 bottom:76px → 实测两者只剩 1px。把按钮上移并收紧凑页脚,
|
||||
保证仍有 ~20px 间隙。 */
|
||||
html[data-theme] .navi-search-bar {
|
||||
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
|
||||
}
|
||||
|
||||
html[data-theme] .navi-dock {
|
||||
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
|
||||
}
|
||||
|
||||
html[data-theme] .navi-footer {
|
||||
gap: 6px !important;
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
|
||||
html[data-theme] .navi-search-bar[data-state="open"] {
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user