/* ============================================================ 手机端底部功能栏（v1.3.108） ------------------------------------------------------------ 视觉照搬「LiquidBottomTabs」参考稿：悬浮胶囊面板 + 磨砂玻璃 + 中间滑动的指示器胶囊 + 图标/文字双层。 关键参数（与参考稿一致）： 面板高度 64px / 圆角 32px / 指示器内缩 5px、圆角 999px 容器色 rgba(250,250,250,.62) / 模糊 18px + 饱和度 180% 投影 0 4px 24px rgba(0,0,0,.10) + 内描边 0.5px 高光 ⚠️ 本文件必须在 site-chrome.css 与 mobile-app-v2.css 之后引入： theme_head 输出的 `html:not(.site-light) body .mobile-tabbar{background:...}` 特异性不低，靠「后加载 + 同特异性 + !important」才压得住。 ============================================================ */ :root { --dock-h: 64px; /* 胶囊高度 */ --dock-gap: 12px; /* 胶囊左右外边距 */ --dock-bottom: 10px; /* 距屏幕底（安全区另加） */ --dock-radius: 32px; --dock-tint: rgba(250, 250, 250, .62); --dock-line: rgba(255, 255, 255, .72); --dock-shadow: 0 4px 24px rgba(15, 23, 42, .13), 0 1px 3px rgba(15, 23, 42, .06); --dock-ind: rgba(15, 23, 42, .075); --dock-text: #5b6478; --dock-accent: #2b6de8; --dock-blur: 18px; } /* ---------- 桌面端：一律不显示 ---------- */ .mobile-tabbar { display: none; } @media screen and (max-width: 768px) { /* ---------- 外层：只做定位，背景全部透明 ---------- ⚠️ v1.3.111 实测：主题 / theme_head 用 0,2~0,3 特异性 + !important 给 .mobile-tabbar 上了不透明的深色或纯白底（首页要 0,3,2 才压得住， 产品页连 0,3,2 都压不住）。所以「外壳透明」的最终保障不是这里， 而是 footer-chrome.html / user/footer.html 里 nav 的**内联** !important。 下面这条只是同特异性下的兜底，别把模板内联删掉。 */ html body .mobile-tabbar, html:not(.site-light) body .mobile-tabbar, html.site-light body .mobile-tabbar { display: block !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 1200; height: auto !important; padding: 0 var(--dock-gap) calc(var(--dock-bottom) + env(safe-area-inset-bottom)) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; /* 只让胶囊本体可点，别挡住正文手势 */ overflow: visible !important; } /* ---------- 胶囊面板 ---------- */ html body .mobile-tabbar .mobile-tabbar-list, html:not(.site-light) body .mobile-tabbar .mobile-tabbar-list, html.site-light body .mobile-tabbar .mobile-tabbar-list { position: relative; display: flex !important; align-items: stretch !important; justify-content: space-between !important; height: var(--dock-h) !important; margin: 0 !important; padding: 5px !important; gap: 0 !important; border-radius: var(--dock-radius) !important; background: var(--dock-tint) !important; -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(180%) brightness(1.03) !important; backdrop-filter: blur(var(--dock-blur)) saturate(180%) brightness(1.03) !important; border: 0 !important; box-shadow: var(--dock-shadow), inset 0 0 0 0.5px var(--dock-line), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 6px rgba(255, 255, 255, .25) !important; pointer-events: auto; overflow: hidden; } /* ---------- 滑动指示器 ---------- 没有激活项（帮助中心、排行榜等不属于 5 个 Tab 的页面）时服务端不输出 --tab-i，指示器直接隐藏，避免错误地停在「首页」上。 */ .mobile-tabbar .dock-indicator { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 999px; background: var(--dock-ind); transform: translateX(calc(var(--tab-i, 0) * 100%)); transition: transform .42s cubic-bezier(.34, 1.32, .52, 1); pointer-events: none; z-index: 0; opacity: 0; } .mobile-tabbar[style*="--tab-i"] .dock-indicator { opacity: 1; } /* ---------- 单个 Tab ---------- ⚠️ theme_head 深色模式输出了 `html:not(.site-light) body .mobile-tabbar .mobile-tabbar-item{color:#94a3b8!important}`（特异性 0,3,2）。 这里必须带同样的 html 前缀把类数堆到 3，否则浅色胶囊上会配到灰蓝字。 */ html body .mobile-tabbar .mobile-tabbar-item, html:not(.site-light) body .mobile-tabbar .mobile-tabbar-item, html.site-light body .mobile-tabbar .mobile-tabbar-item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; border-radius: 999px; color: var(--dock-text) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1; text-decoration: none !important; -webkit-tap-highlight-color: transparent; transition: color .22s ease, transform .22s cubic-bezier(.34, 1.32, .52, 1); } .mobile-tabbar .mobile-tabbar-item i { font-size: 19px !important; line-height: 1 !important; margin: 0 !important; color: inherit !important; transition: transform .22s cubic-bezier(.34, 1.32, .52, 1); } .mobile-tabbar .mobile-tabbar-item span { font-size: 10.5px !important; line-height: 1 !important; white-space: nowrap; letter-spacing: .2px; } /* 激活项颜色：theme_head 有一条 0,4,2 的 .active 上色规则，这里同权重要后写 */ html body .mobile-tabbar .mobile-tabbar-item.active, html:not(.site-light) body .mobile-tabbar .mobile-tabbar-item.active, html.site-light body .mobile-tabbar .mobile-tabbar-item.active, .mobile-tabbar .mobile-tabbar-item:active { color: var(--dock-accent) !important; transform: none !important; /* 参考稿的位移交给指示器，Tab 本身不缩放 */ } .mobile-tabbar .mobile-tabbar-item.active i { transform: translateY(-1px) scale(1.06); } .mobile-tabbar .mobile-tabbar-item.active span { font-weight: 700 !important; } /* site-chrome.css 给 body 留了 60px 底边距（给原来贴底的 Tab 条）。 现在 Dock 是悬浮胶囊，这 60px 会变成一块空白，改由上面那几条 padding-bottom 负责。 */ html body { padding-bottom: 0 !important; -webkit-tap-highlight-color: transparent; } /* ---------- 首页（深空银河深色底）专用变体 ---------- 浅色磨砂胶囊叠在 #0a1120 上会变成「半透明灰」，灰字直接糊掉。 首页明确是深底（body.nk-home），这里换成深色玻璃 + 浅色字。 ⚠️ 不用 html:not(.site-light) 判断：登录页背景是浅色的，但整站默认 mode=dark， 那条选择器会误判成深色。 */ html body.nk-home .mobile-tabbar .mobile-tabbar-list { background: rgba(17, 25, 42, .72) !important; box-shadow: 0 8px 28px rgba(2, 8, 23, .55), inset 0 0 0 0.5px rgba(148, 163, 184, .22), inset 0 1px 0 rgba(255, 255, 255, .10) !important; } html body.nk-home .mobile-tabbar .mobile-tabbar-item { color: #93a3b8 !important; } html body.nk-home .mobile-tabbar .mobile-tabbar-item.active { color: #7cb0ff !important; } html body.nk-home .mobile-tabbar .dock-indicator { background: rgba(124, 176, 255, .16) !important; } /* ---------- 页面底部让位：胶囊高 64 + 下距 10 + 呼吸 12 + 安全区 ---------- ⚠️ mobile-app-v2.css 里有 `body:not(.nk-home) .page-content{padding-bottom:74px!important}` （特异性 0,2,1）。这里必须多带一个 html 元素选择器（0,2,2）才压得住， 否则 74 < 96，最后一行内容仍会被胶囊压住。 */ html body:not(.nk-home) .page-content, html body:not(.nk-home) #main-container, html body:not(.nk-home) #main-container .content, html body.nk-home .page-content { padding-bottom: calc(var(--dock-h) + var(--dock-bottom) + 22px + env(safe-area-inset-bottom)) !important; } /* 认证页整屏铺底，底部同样要让位，否则「立即登录」会被胶囊压住 */ body.glass-login .auth-page { padding-bottom: calc(var(--dock-h) + var(--dock-bottom) + 18px + env(safe-area-inset-bottom)) !important; min-height: 100vh !important; box-sizing: border-box; } /* 首页原本靠 body 的 padding-bottom 让位，这里统一由上面的规则接管 */ body.nk-home { padding-bottom: 0 !important; } } /* 老内核（部分安卓 WebView / 旧 X5）不支持 backdrop-filter： 半透明面板叠复杂背景会糊成一片，退回更实的底色保证可读。 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media screen and (max-width: 768px) { html body .mobile-tabbar .mobile-tabbar-list { background: rgba(252, 252, 253, .96) !important; } html body.nk-home .mobile-tabbar .mobile-tabbar-list { background: rgba(17, 25, 42, .96) !important; } } } /* 超小屏（≤360）：胶囊收窄一点，字号再降一档 */ @media screen and (max-width: 360px) { :root { --dock-gap: 10px; --dock-h: 60px; } .mobile-tabbar .mobile-tabbar-item i { font-size: 18px !important; } .mobile-tabbar .mobile-tabbar-item span { font-size: 10px !important; } }