底部导航改暖色毛玻璃,对齐孕期档案 v7 (v26100206)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-03 01:00:30 +00:00
parent f5f597ed1d
commit fd538eb6fb
3 changed files with 18 additions and 2 deletions

View File

@@ -4252,3 +4252,19 @@ a.skip:focus{left:16px;top:16px}
/* 2026-10-03 用户:消消乐 banner 左右留白太大 → 和上面「豆豆今天想说」卡片对齐(距屏幕边 16px) */
.game-promo{padding-left:16px;padding-right:16px}
/* ================= 底部导航 · 暖色毛玻璃(2026-10-03)=================
用户:「按孕期档案(chengzhang-dangan/v7)底部 Tab 的毛玻璃风格改」。对照它的 .anc .ain:
rgba(255,255,255,.55) + blur(18px) saturate(170%) + 内描白边 + 顶部 1px 高光 + 暖色投影;下方淡出层减弱到 .55,让内容透上来可「磨」。
· 父级 .tabbar 去掉 filter(filter 会让子元素 backdrop-filter 失效);玻璃放在 ::before(仍带 mask 缺口),
投影挪到不带 mask 的 ::after 上用 box-shadow(外投影只画在盒子外面,不会透进玻璃里)。
· 选中态仍按 2026-10-01 用户要求不加背景胶囊。 */
.tabbar{filter:none}
.tabbar::before{background:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff}
.tabbar::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
box-shadow:0 14px 34px rgba(200,100,70,.2),0 2px 6px rgba(200,100,70,.06)}
.tab-fade{background:linear-gradient(180deg,rgba(255,240,232,0),rgba(255,240,232,.55))}
.tab-fab .fab{box-shadow:0 6px 14px rgba(244,89,60,.32),inset 0 1px 0 rgba(255,255,255,.3)}
@media (prefers-reduced-transparency:reduce){.tabbar::before{background:#FFF9F5}}