/** * safe-area-compat.css —— 真机顶部安全区（状态栏 / 灵动岛 / 刘海）适配 * * v1.7.3 (2026-08-24)：一起看书新增全屏阅读后，将阅读设置面板与目录面板 * 一并下移到真实顶部安全区之后，保证沉浸态保留的设置入口与面板均可点击。 * * v1.7.0 (2026-07-28)：安卓 APK 全屏安全区统一改为优先读取 * --safe-area-inset-*（Capacitor SystemBars 按 WindowInsets 实测注入），浏览器 * env(safe-area-inset-*) 仅作兜底。修复小米 K70 / HyperOS WebView 在全屏或 * edge-to-edge 下 env() 错误返回 0，导致人设页及其他全屏顶栏与挖孔区重叠。 * * 背景（用户反馈）： * iPhone（含 15 Pro Max 等灵动岛机型）无论是否「添加到主屏幕」，只要满足 * * 且页面本身是铺满真实视口的单页应用壳（本项目 #app 用 100dvh 铺满、body/html * 不产生页面级滚动），Safari 就可能把网页内容延伸到真机状态栏 / 灵动岛背后 * （最典型：地址栏因交互收起、或以「添加到主屏幕」独立/全屏方式启动时）， * 此时 env(safe-area-inset-top) 变为约 47~62px。 * * 最初版本仅在（由 index.html 头部脚本依据 * navigator.standalone / display-mode 判定的「独立启动态」）下生效，但用户实测 * 反馈：直接在 Safari 标签页里操作（未添加到主屏幕）也会出现同样的重叠 —— * 例如「世界书 → 新建世界书」弹层顶部被状态栏/灵动岛盖住，关闭按钮完全点不到。 * 说明该重叠并不只发生在「独立启动态」，普通标签页同样可能触发。 * * 问题： * 主页面（#chat-page / #wechat-page / #phone-page / #twitter-page / #settings-page …） * 顶部都有一个 .status-bar，已用 max(12px, env(safe-area-inset-top)) 预留安全区， * 所以不受影响。但「铺满 #app 的全屏浮层 / 子屏」(AO3、游乐场、一起听歌、一起看书、 * 电影院、情侣空间各子页、推特详情/私信浮层、日历全屏面板等) 自身没有 .status-bar， * 它们的顶部功能栏 / 返回按钮直接贴在 top:0，可能被真机状态栏 / 灵动岛完全盖住、 * 无法点击。 * * 方案： * 直接、无条件地给这些全屏浮层的顶部栏补上 env(safe-area-inset-top) 的顶部内边距 * （或 top 偏移），不再要求先命中： * padding-top: calc(基础值 + env(safe-area-inset-top, 0px)); * 在没有刘海/灵动岛、或浏览器未把内容延伸到状态栏背后的机型/场景下， * env(safe-area-inset-top) 恒为 0，calc() 结果与原基础值完全相同，观感零变化、 * 零副作用；只有在真的存在「内容延伸到系统状态栏背后」这种物理重叠风险时， * 才会自动补足对应像素，是纯 CSS、不依赖 JS 时序的兜底方案。 * * 安全性 / 适配范围： * - 仅作用于「确实贴在屏幕最顶部、且无 .status-bar 兜底」的全屏浮层顶栏， * 不动主页面、居中弹窗、底部上拉面板、好友手机内部页（它们各自已被 .status-bar * 或父壳的 env() 安全区覆盖），避免把不在顶部的元素错误下移； * - 适配机型/内核：iPhone(Safari/Chrome/Edge/夸克/搜狗/雨见/via 等) 标签页与 * 独立/全屏启动态、以及华为/小米/OPPO/魅族/vivo/三星等 Android 机型（含以 * 独立应用安装时的 display-mode: standalone）；不支持 env() 的旧内核浏览器 * 直接按第二参数兜底为 0px，同样不受影响。 * * 加载顺序：本文件在所有模块样式之后；规则统一带 !important，即使个别浮层样式 * 是按需(懒)加载、晚于本文件注入，也能稳定覆盖其顶栏内边距。 * * 注：判定脚本仍保留在 index.html 中（其他模块 * 或未来功能可能仍需要区分独立启动态），但本文件不再依赖该 class 作为生效前提。 */ /* ------------------------------------------------------------------ */ /* 通用：安全区变量桥（浏览器 env() ∪ 安卓 APK 原生注入） */ /* */ /* love咪安卓包（E:\lovemi-android，Capacitor 8 壳）在 Android 15+ 强制 */ /* 全面屏(edge-to-edge)模式下，由 SystemBars 插件把真机状态栏/挖孔/手势条 */ /* 的实际像素以内联样式注入到的 --safe-area-inset-* 变量上： */ /* - WebView ≥ 140 且 viewport-fit=cover：insets 透传，env() 与变量同值；*/ /* - 其余情况：原生给 WebView 容器加 padding，变量注入 0（不会双重计算）。*/ /* 但部分国产 ROM 的 WebView 灰度版本存在「透传生效而 env() 仍为 0」的 */ /* 已知兼容问题（Chromium issue 40699457 关联），只信 env() 会漏防。 */ /* */ /* 这里在 :root 上把同名变量默认定义为 env()： */ /* - 浏览器（Safari/Via/Chrome/Edge/搜狗/雨见/夸克等）：变量 = env()， */ /* 行为与直接写 env() 完全一致； */ /* - APK：原生注入的内联样式优先级高于本条 :root 规则，变量 = 真机实测值。*/ /* 各模块在关键规则上采用「env() 单独声明兜底 + var() 双声明」写法： */ /* padding-top: calc(基础 + env(safe-area-inset-top, 0px)); */ /* padding-top: calc(基础 + var(--safe-area-inset-top, 0px)); */ /* 不支持 CSS 变量的老内核自动落在第一行，行为不变。 */ /* ------------------------------------------------------------------ */ :root { --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); } /* ------------------------------------------------------------------ */ /* 通用：全屏浮层顶栏统一补顶部安全区（不依赖独立/全屏启动态判定） */ /* ------------------------------------------------------------------ */ /* AO3 专区（.ao3-root 铺满 #app，无 status-bar） */ .ao3-root .ao3-root__header { padding-top: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 一起听歌（.lt-overlay 铺满 #app） */ .lt-overlay .lt-topbar { padding-top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 一起看书（#rt-overlay-root 铺满 #app） ⚠ 2026-07-04 用户实测反馈（iPhone14 Pro / Safari）：此前只处理了「阅读器」视图的 .rt-topbar，但「书架」视图（添加书籍格子页）的顶栏 .rt-shelf-head （标题 + 右上角关闭键）同样贴在 #rt-overlay-root 物理顶部，被灵动岛 / 状态栏盖住导致返回（关闭）键点不到。一并补齐同结构的： - .rt-shelf-head 书架页顶栏（原 padding: 10px 14px 8px） - .rt-invite-head 「邀请共读」面板头（.rt-invite-panel 为 inset:0 铺满阅读器、盖住 .rt-topbar，面板自己的返回键贴顶，原 padding: 10px 12px） - .rt-toc-panel / .rt-settings-panel / .rt-theme-picker 目录、阅读设置与旧配色面板（top:52px 是按原顶栏高度定位的；顶栏补安全区增高后需同步下移，避免面板顶部按钮被增高的顶栏 / 灵动岛压住） */ #rt-overlay-root .rt-topbar { padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } #rt-overlay-root .rt-shelf-head { padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } #rt-overlay-root .rt-invite-head { padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } #rt-overlay-root .rt-toc-panel, #rt-overlay-root .rt-settings-panel, #rt-overlay-root .rt-theme-picker { top: calc(52px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 游乐场（#sub-screen-game-hub）右上角关闭按钮：绝对定位 top，需整体下移 */ #sub-screen-game-hub .sub-screen-game-hub__close { top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* love咪放映厅（.lmc-cinema 铺满 #app） */ .lmc-cinema-topbar { padding-top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 购物·商品详情全屏面板（盖住 #shopping-page 的 status-bar） */ #shopping-page .shopping-product-detail-panel .shopping-detail-toolbar { padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* ------------------------------------------------------------------ */ /* 推特（#twitter-page 内的全屏浮层；列表态头栏在 .status-bar 之下，无需处理） */ /* ------------------------------------------------------------------ */ /* 推文详情页（.twitter-detail-page: position:absolute; inset:0; 盖住状态栏） */ #twitter-page .twitter-detail-page .twitter-detail-header { padding-top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 私信会话浮层（.twitter-dm-root: position:absolute; inset:0 铺满 #twitter-page）。会话头 .twitter-dm-chat-header / 多选顶栏 .twitter-dm-multiselect-topbar 二者择一可见，都贴在浮层物理顶部，需补安全区。 ⚠ 上一版只挂 [data-dm-chat-overlay="on"] 单一 hook：该属性由 setChatOverlayActive() 设置，但 renderChatView() 重入（切到别的 Tab 再切回消息）时不会恢复，导致属性可能为 off / 缺失而规则不命中。改用 [data-dm-page="chat"] 作主 hook（openConversation 设置后一直保留、只在回列表时清除，最稳定），并叠加页面 class 与原 overlay 属性作三重保险。（已同步在 twitter-dm.js 的 renderChatView 开头补 setChatOverlayActive(true) 兜底。） */ .twitter-dm-root[data-dm-page="chat"] .twitter-dm-chat-header, .twitter-dm-root[data-dm-page="chat"] .twitter-dm-multiselect-topbar, .twitter-dm-root[data-dm-chat-overlay="on"] .twitter-dm-chat-header, .twitter-dm-root[data-dm-chat-overlay="on"] .twitter-dm-multiselect-topbar, #twitter-page.twitter-page--dm-chat-overlay .twitter-dm-chat-header, #twitter-page.twitter-page--dm-chat-overlay .twitter-dm-multiselect-topbar { padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* ------------------------------------------------------------------ */ /* 情侣空间（各子浮层均铺满 #app，无 status-bar） */ /* ------------------------------------------------------------------ */ /* 情侣空间主页（排除已自带安全区的 --private 私密态头栏） */ .couple-space-overlay .couple-space-header:not(.couple-space-header--private) { padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 情侣空间·票务须知浮层 */ .couple-ticketing-notice-overlay .couple-ticketing-notice-header { padding-top: calc(22px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 情侣空间·纪念日 */ .cs-anniv-overlay .cs-anniv-header { padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 情侣空间·恋爱日记（普通头栏 + 封面上悬浮头栏） */ .cs-lj-overlay .cs-lj-header { padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } .cs-lj-overlay .cs-lj-header--over-cover { padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 情侣空间·经期记录 */ .couple-period-overlay .couple-period-topbar { padding-top: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* 情侣空间·甜蜜日记（封面态绝对顶栏 + 内页头栏） */ .cs-sd-overlay .cs-sd-topbar { padding-top: calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } .cs-sd-overlay .cs-sd-page-topbar { padding-top: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* ------------------------------------------------------------------ */ /* 子屏日历：仅「全屏型」面板（闹钟编辑 / 来电）；普通底部上拉面板不处理 */ /* ------------------------------------------------------------------ */ .ssc-overlay.ssc-overlay--full .ssc-sheet-header { padding-top: calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; } /* ------------------------------------------------------------------ */ /* IF 线板块（#love-mi-if-line-root.if-line-root 铺满 #app，无 status-bar） */ /* */ /* .if-line-topbar 由 sub-screen-if-line.js 通过