/* p3.56:液态玻璃导航 Dock(liquid-nav)——底部 tab 栏重做的全部新样式, 集中在这一层。只有开关开着且风格一时 header.php 才输出 dock markup (class tab-bar--dock / nav-pill--dock)并加载这个文件;开关关着时这 些选择器一个都命中不了,旧版 .tab-bar/.nav-pill 样式(components.css) 原样工作。 液态玻璃 ≠ 普通玻璃拟态:五层光学材质叠加(Apple 官方描述)—— ① 半透明暖白底 + backdrop blur(身后内容透出柔化;macOS Tahoe 的白 偏暖,不是纯白); ② 折射 lensing:身后内容像透镜一样在边缘弯曲——SVG feDisplacementMap 作 backdrop-filter,只有 Chromium 支持,Safari/Firefox 见下面的 渐进增强说明; ③ 色散:边缘红/蓝极轻微分离的彩色镜边( inset 投影模拟,3-4% alpha, 零运行时成本); ④ 高光:顶部亮底部暗的定向高光(::before 渐变)+ 顶部/左上更亮的 fresnel 边缘(::after)+ 细高光描边(inset box-shadow 亮线); ⑤ 阴影分层:近身小投影 + 远处大柔和投影,和背景分出深度。 */ /* ==================== ① 悬浮 dock 容器 ==================== */ /* 从贴底通栏变成悬浮 dock:四周留空气、26px 柔和大圆角(参考 macOS Tahoe 的圆角打磨)、浮起投影。位置/弹性布局沿用 components.css 的 .tab-bar 基座,这里只覆盖"外形"部分。 */ .tab-bar--dock { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 26px; padding: 8px; /* 把 paint/layout 边界锁在 dock 自己身上:backdrop blur(+Chromium 的 折射滤镜)是滚动时每帧都要重算的贵操作,隔离后浏览器的无效化区域 不会外溢到整页。不用 contain:strict——它含 size 遏制,会把靠内容 撑高度的 dock 压塌,layout paint 是这套需求的安全上限。 */ contain: layout paint; /* ① 暖白半透明底 + 模糊 */ background: rgb(255 252 248 / .6); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); /* ③④⑤:高光描边(顶亮底暗)+ 极淡色散边 + 分层投影,一次给齐 */ border: 1px solid rgb(255 255 255 / .45); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .08), inset 1.5px 0 0 rgb(255 80 60 / .035), inset -1.5px 0 0 rgb(0 100 255 / .035), 0 2px 8px rgb(0 0 0 / .08), 0 12px 32px rgb(0 0 0 / .16); } /* ④ 定向高光:顶部亮 → 底部微暗,玻璃的"厚度来自光线方向" */ .tab-bar--dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .26), rgb(255 255 255 / .06) 34%, transparent 55%, rgb(0 0 0 / .03)); } /* ④ fresnel 边缘:一圈更亮的 rim,光源方向(顶部偏左)再亮一档 */ .tab-bar--dock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 100% at 18% 0%, rgb(255 255 255 / .32), transparent 52%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); } /* ---- 深色:暖调深底(和暖白同一个思路,不是纯灰黑) ---- */ :root[data-theme="dark"] .tab-bar--dock { background: rgb(30 27 24 / .55); border-color: rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(0 0 0 / .3), inset 1.5px 0 0 rgb(255 120 90 / .03), inset -1.5px 0 0 rgb(80 140 255 / .03), 0 2px 8px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .45); } :root[data-theme="dark"] .tab-bar--dock::before { background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03) 34%, transparent 55%, rgb(0 0 0 / .12)); } :root[data-theme="dark"] .tab-bar--dock::after { background: radial-gradient(120% 100% at 18% 0%, rgb(255 255 255 / .12), transparent 52%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); } /* ---- ② 折射层:渐进增强 ---- liquid-nav.js 特性探测(设 backdropFilter='url(#x)' 看浏览器认不认) 通过才给 加 ask-lg-refract——目前只有 Chromium 认。Safari/ Firefox 拿不到这个类,停在"①④⑤ 高质量 blur + 手绘高光 + 暖白"这 层,没有真折射但不塌成廉价玻璃,这就是设计好的兜底,不是残缺。 */ html.ask-lg-refract .tab-bar--dock { backdrop-filter: url(#ask-lg-refract) blur(24px) saturate(180%); /* -webkit- 前缀那条不带 url,Chrome 两条都认时后写的标准属性生效 */ } /* ---- 模糊本身都不支持时的保底(极老浏览器):接近不透明的暖实底 ---- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tab-bar--dock { background: rgb(255 252 248 / .94); } :root[data-theme="dark"] .tab-bar--dock { background: rgb(30 27 24 / .94); } } /* ---- 和透明玻璃模式(p3.30② data-glass-mode)联动:开关开着时整站玻璃 都更"趋近无色",dock 跟着再透一档,不自己另搞一套 ---- */ html[data-glass-mode="on"] .tab-bar--dock { background: rgb(255 252 248 / .38); backdrop-filter: blur(34px) saturate(220%); -webkit-backdrop-filter: blur(34px) saturate(220%); } html.ask-lg-refract[data-glass-mode="on"] .tab-bar--dock { backdrop-filter: url(#ask-lg-refract) blur(34px) saturate(220%); } :root[data-theme="dark"][data-glass-mode="on"] .tab-bar--dock, html[data-theme="dark"][data-glass-mode="on"] .tab-bar--dock { background: rgb(30 27 24 / .4); } /* dock 浮起来之后整体变高还离开了底边,正文底部的预留空间跟着涨, 不然页脚版权行会钻进 dock 底下。tab-bar 是 body 直接子元素,:has 只在 dock 模式命中,旧版贴底栏的 56px(components.css)不动。 */ body:has(> .tab-bar--dock) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* ==================== ③ 滑动选中框(玻璃药丸) ==================== */ /* 位置/尺寸全部由 liquid-nav.js 量好写成 transform/width/height;没有 当前项(自定义导航不做高亮判断,既有边界)时 opacity 收 0,不摆一个 空药丸在第一位上。 */ .tab-bar__pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 18px; /* 比 dock 本体更亮一档的玻璃 + 一层 tint 浅洗——读得出"选中"又不会 变成一块实色按钮 */ background: color-mix(in srgb, var(--tint) 12%, rgb(255 255 255 / .34)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 6px rgb(0 0 0 / .08); opacity: 0; pointer-events: none; transition: transform 340ms var(--ease-spring), width 340ms var(--ease-spring), height 340ms var(--ease-spring), opacity 160ms var(--ease); } .tab-bar__pill.is-on { opacity: 1; } :root[data-theme="dark"] .tab-bar__pill { background: color-mix(in srgb, var(--tint) 22%, rgb(255 255 255 / .1)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 2px 6px rgb(0 0 0 / .25); } /* 图标/文字要画在药丸上面 */ .tab-bar--dock .tab-bar__item { position: relative; z-index: 1; border-radius: 18px; } /* ---- Lucide 图标:currentColor 描边,颜色/粗细全走 CSS ---- */ .tab-bar--dock .tab-bar__icon svg { width: 22px; height: 22px; display: block; /* Lucide 默认 stroke-width=2 在 22px 下偏粗,收到 1.8 更贴 iOS 线性 图标的精致度;表现属性优先级低于 CSS,这条盖得住 svg 标签上的 stroke-width="2"。 */ stroke-width: 1.8; transition: stroke-width 200ms var(--ease), transform 300ms var(--ease-spring); } /* 选中微交互:描边微微加粗 + 轻轻上浮 1px,和 tint 变色、药丸滑动三 路信号一起到位,克制但有"被点中"的确认感。 */ .tab-bar--dock .tab-bar__item.is-active .tab-bar__icon svg { stroke-width: 2.2; transform: translateY(-1px); } .tab-bar--dock .tab-bar__item:active .tab-bar__icon svg { transform: scale(.86); } .tab-bar--dock .tab-bar__item.is-active:active .tab-bar__icon svg { transform: translateY(-1px) scale(.86); } /* ==================== 桌面顶部胶囊:同款滑动选中框 ==================== */ /* nav-pill 本体不动(本来就是悬浮玻璃胶囊),只把"当前项静态背景"换成 会滑动的药丸——旧规则 .nav-pill a.active 的静态背景在这里撤掉,颜色 突出(tint+加粗)保留。 */ .nav-pill--dock { position: relative; } .nav-pill--dock a { position: relative; z-index: 1; } .nav-pill--dock a.active { background: none; } .nav-pill__pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; /* 和旧版 .nav-pill a.active 的 rgb(120 120 128 / .16) 同一个色,视觉 零跳变,只是从"静态烙在某个 a 上"变成"一个会滑动的实体"。 */ background: rgb(120 120 128 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); opacity: 0; pointer-events: none; transition: transform 300ms var(--ease-spring), width 300ms var(--ease-spring), opacity 160ms var(--ease); } .nav-pill__pill.is-on { opacity: 1; } :root[data-theme="dark"] .nav-pill__pill { box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); } /* ==================== reduced-motion:滑动/微交互全降级 ==================== */ @media (prefers-reduced-motion: reduce) { .tab-bar__pill, .nav-pill__pill { /* 不滑了,直接切;留一个极短的透明度淡入免得硬闪 */ transition: opacity 160ms var(--ease); } .tab-bar--dock .tab-bar__icon svg { transition: none; } }