diff --git a/web/navi.css b/web/navi.css index c0c5e95..4c81cc0 100644 --- a/web/navi.css +++ b/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; }