/* ========================================================================== FlowingHue 网页版 · 移动端壳层（v260908_1）把 ≤880px 的界面改为与微信小程序 flowinghue-miniprogram v1.3.x 一致：顶栏（汉堡 + FlowingHue 品牌名）底部液态玻璃按钮组（今天 / 返回｜下载 / 视图 / 搜索）侧边抽屉（系列 + 关注 + 页脚备案）日视图 = 整屏诞生色 + 左右滑换日 + 上滑看配色屏（4 色块 + 白底配色名）沉静模式（首进 20s / 后进 40s）+ 首次箭头引导本文件只作用于移动端；桌面端保持原有布局不变。单位换算基准：小程序 750rpx = 375px，即 1rpx = 0.5px v1.4.0：① 底部玻璃【完整】对齐小程序 v1.3.13 —— 玻璃底色改由当天诞生色派生（见 mobile_*.js 的 glassVarsFor）；外描边浅底 0.14 → 0.03；底部暗带 0.10 → 0.05；新增第 4 层「柔光晕」 --foot-glow；外层「今天」字号 15 → 16px（= 32rpx）。**原 1.3.4 的全部内容，未单独发版** ② 右组新增「下载图片」（仅日视图），并去掉组内 1rpx 分隔线（.mp-fsep 规则已删）。 ③ 底部玻璃补「材质两层」（2026-09-20）：竖向厚度渐变 + 斜向镜面微光，见下方 :root 的 --glass-depth / --glass-sheer（与 style_260909_2.css 同值）。同日两轮：第二轮 135deg → 105deg（**方向理解反了**）；第三轮定为仰角 75°（165deg）。 ========================================================================== */ /* 玻璃「材质」两层（来源 = aave.com/design/building-glass-for-the-web 调参面板的 Depth / Curvature 与 Specular Angle）。与颜色正交，叠在任何 tint 之上。 ⚠️ 必须与 style_260909_2.css 的 :root 保持同值（两份 CSS 全站同时加载，同值才不打架）。 ★ 2026-09-20 第九轮：--glass-depth **改为按档派生**（mobile_*.js 的 glassVarsFor() 运行时写到 html 行内样式）；下面这份 = **深底档兜底值**。浅底档的玻璃本已比页面深，下半再压 0.055 会让底缘成为画面最深的东西（蘑菇真机「底部的阴影太黑了」）⇒ 浅底档 0.028、深底档 0.055。 ⚠️ 改这里要同时改 mobile_260909_14.js 的 GLASS_DEPTH_DEEP / GLASS_DEPTH_LIGHT（三处同值）。 ⚠️【角度换算】仰角 = 光源相对水平面的夹角；CSS 渐变角度 = 90deg + 仰角。 45° 仰角 = 135deg（对角斜切）；75° 仰角 = 165deg（近垂直、仍留 15° 偏斜）。 2026-09-20 两轮：第二轮 135deg → 105deg（**基准理解反了**，方向偏「贴水平」）；第三轮改为 **165deg = 仰角 75°**（蘑菇原意：接近垂直但不完全垂直）。 */ :root { --glass-depth: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.012) 38%, rgba(0,0,0,0.055) 100%); --glass-sheer: linear-gradient(165deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.028) 32%, rgba(255,255,255,0) 56%); } /* 桌面端：壳层完全隐藏（不加 !important，避免与后续媒体查询打架） .mp-mo-prev = 月概述两行预览（桌面/移动共用，全局可见，下方 .mo-modal 提供全文弹窗）； .mo-modal = 月概述全文弹窗（由 mobile_260909_2.js 的 openMoModal 动态创建） ⚠️ v1.3.1：这份"桌面端兜底隐藏"清单必须覆盖**所有**由 JS append 到的移动端专属节点。它们的 display:none 原本只写在下方 @media (max-width: 880px) 块内 —— 一旦视口跨过 880px （典型：iPad 横竖屏旋转、桌面浏览器拉宽），媒体查询整块失效，这些节点就会裸奔： · #mpDp（.mp-dp，日式滚轮日期选择器）→ 在页脚下方摊成一整列「取消确定 1月 2月 … 1日 2日 …」 · .mp-subpage（抽屉二级页）→ 全屏 flex 面板直接插进文档流所以 .mp-dp / .mp-subpage 也补进这个全局清单（媒体查询内同名规则位置更靠后，仍可正常覆写）。 */ .mp-topbar, .mp-footbar, .mp-drawer, .mp-sheet, .mp-quiet-wrap, .mp-shield, .mp-dp, .mp-subpage { display: none; } /* ================= 月概述预览块（桌面/移动共用） ================= 桌面端 app.js 一直渲染了 .mp-mo-prev（之前被上面全局兜底 .mp-mo-prev{display:none} 藏了），现在桌面端也要走"2 行预览 + 更多 → 弹窗"路径，所以提到全局显示。 .mo-body 默认 display:none（弹窗看全文）；点击 .month-overview 区触发弹窗。 */ .mo-body { display: none; } .mp-mo-prev { display: block; position: relative; overflow: hidden; } /* 桌面端默认：.mo-preview 仅作字体容器，内部

各自 clamp；移动端在 @media 块内覆写为两行截断 */ .mo-preview { font-size: 14px; line-height: 1.95; font-weight: 300; letter-spacing: 0.03em; color: var(--text-soft); } html[data-lang="en"] .mo-preview { letter-spacing: 0.012em; } .mo-preview p { display: block; margin: 0; } /* 第 1 段 line-clamp:1 = 第一行；段间距保留原文分段感 */ .mo-preview .mo-p1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; margin-bottom: 0.5em; } /* 第 2 段不 clamp，由 adaptMoMore 截到恰好 1 行；white-space:nowrap 防换行 */ .mo-preview .mo-p2 { white-space: nowrap; } .mo-preview .mo-p2 .mo-t { display: inline; } /* 渐隐遮罩 + 「更多」：盖在第二行右端，从透明过渡到背景色（小程序同款）。移动端背景是纯 var(--bg)，渐隐无缝；桌面端背景为渐变图，末端纯色会与页面略有差（此前用户说「黑色遮罩问题不用改了」，故保持小程序同款） */ /* 桌面端不渲染 .mo-fade（小程序渐隐遮罩仅移动端用）；移动端 media 块内 display:flex 重新启用 */ .mo-fade { position: absolute; right: 0; bottom: 0; height: 1.95em; width: 92px; display: none; align-items: flex-end; justify-content: flex-end; background: linear-gradient(90deg, rgba(15,15,18,0) 0%, var(--bg) 62%, var(--bg) 100%); pointer-events: none; } /* desktop more: inline + underline; mobile resets underline in media block */ .mo-more { display: inline; margin-left: 8px; font-size: 15px; line-height: 1.95; letter-spacing: 0.08em; color: var(--text); text-decoration: underline; text-decoration-color: rgba(244, 240, 232, 0.5); text-decoration-thickness: 1px; text-underline-offset: 4px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } html[data-lang="en"] .mo-more { letter-spacing: 0.04em; margin-left: 6px; } /* ================= 月概述全文弹窗（桌面/移动共用） ================= 触发：点击 .month-overview 区 → mobile_260909_2.js 的 openMoModal 创建。 */ body.mo-modal-open { overflow: hidden; } .mo-modal { display: none; position: fixed; inset: 0; z-index: 700; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .mo-modal.is-on { display: flex; animation: moFadeIn .28s var(--ease); } .mo-modal-ov { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mo-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 74vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 22px 26px; box-sizing: border-box; animation: moPopIn .34s var(--ease); } @keyframes moFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes moPopIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .mo-modal-head { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 18px; } /* 关闭按钮：与小程序 .mo-modal-close 完全一致 —— 透明底 + 18px（36rpx）的 X，按下才有 rgba(255,255,255,.1) 反馈。按钮本体留 30px 隐形热区（肉眼只看到 X，与小程序同形） */ .mo-modal-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 0; padding: 0; background-color: transparent; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCA4TDQwIDQwIiBzdHJva2U9IiNmNGYwZTgiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTggNDBMNDAgOCIgc3Ryb2tlPSIjZjRmMGU4IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease); } .mo-modal-close:active { background-color: rgba(255, 255, 255, 0.1); } .mo-modal-lead { width: 100%; margin-top: 12px; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; color: var(--text); } html[data-lang="en"] .mo-modal-lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; letter-spacing: 0.01em; } .mo-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .mo-modal-p { margin: 0 0 1.1em; font-size: 15px; line-height: 1.95; font-weight: 300; letter-spacing: 0.03em; color: var(--text-soft); } .mo-modal-p:last-child { margin-bottom: 0; } html[data-lang="en"] .mo-modal-p { letter-spacing: 0.012em; } @media (max-width: 880px) { /* ===== 视口单位：优先 dvh（避免 iOS 地址栏伸缩跳动） ===== */ :root { --vh-full: 100vh; } @supports (height: 100dvh) { :root { --vh-full: 100dvh; } } /* 月视图横向滑动起手的前几 px，iOS 会把页面当成竖向滚动做橡皮筋/地址栏下沉，表现为「内容先往下弹一下再弹回」。关掉竖向 overscroll 即可消除该抖动。 */ html, body { overscroll-behavior-y: none; } /* ================= 基础：隐藏桌面端头部 / 页脚 ================= */ html, body { -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: none; } /* 移动端页面背景压成纯 --bg，与顶栏(.mp-topbar)/横滑遮罩(.mp-mshade)同一色 —— 满足「整体一个背景」 */ html, body { background: var(--bg); } .app-head { display: none !important; } /* 顶部品牌栏 + 工具栏 */ .foot { display: none !important; } /* 页脚（内容移入抽屉） */ #tooltip { display: none !important; } /* 悬停 tooltip 在触屏无意义 */ #paletteOverlay { display: none !important; } /* 配色改为日视图内整屏，不再用全屏浮层 */ #morph { display: none !important; } .ambient { display: none; } /* 氛围光斑改由 .mp-day 自己画 */ .stage { overflow: visible; } .view { padding-left: 18px; padding-right: 18px; } /* 去掉系统默认矩形点按高亮；按钮点按反馈改由 .mp-fbtn::after 等自定义遮罩提供（形状随按钮） */ .mp-ham, .mp-fseg, .mp-ditem, .mp-sheet-item, .mp-sheet-cancel, .mp-drawer-ov, .mp-sheet-ov, .mp-lang { -webkit-tap-highlight-color: transparent; } /* 日视图：整屏固定，纵向轨道自己滚；页面本身不滚 */ html.mp-day, html.mp-day body { overflow: hidden; height: 100%; } html.mp-day #viewDay.active { position: fixed; inset: 0; padding: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* 月 / 年视图：页面正常滚动，给上下固定条留出安全距离 */ #viewMonth.active, #viewYear.active { padding-top: calc(env(safe-area-inset-top) + 72px); padding-bottom: calc(3vh + env(safe-area-inset-bottom) + 92px); } #viewMonth.active { padding-left: 16px; padding-right: 16px; } html.mp-month .mp-topbar, html.mp-year .mp-topbar { background: var(--bg); } /* ================= 顶栏：汉堡 + 品牌名 ================= */ .mp-topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 620; padding: env(safe-area-inset-top) 10px 0; /* 水平 10px 比下方 #viewMonth 的 16px 小 6px，抵消 ☰ svg 的内白边（约 5px），让 ☰ 视觉左边缘 ≈ 15px，与下方「九月」汉字左边缘 (16px) 对齐。蘑菇 17:46「顶栏左边距还是比下面大」反馈后的收敛。 */ height: calc(env(safe-area-inset-top) + 52px); align-items: center; box-sizing: border-box; background: transparent; pointer-events: none; transition: opacity .45s var(--ease), background .45s var(--ease); } .mp-topbar .mp-ham { pointer-events: auto; width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: rgb(var(--mp-ink, 255,255,255)); cursor: pointer; transition: opacity .2s var(--ease); } .mp-topbar .mp-ham:active { opacity: .6; } .mp-topbar .mp-ham svg { width: 22px; height: 22px; display: block; } .mp-topbar .mp-brand { margin-left: 10px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 23px; letter-spacing: .04em; line-height: 1; color: rgb(var(--mp-ink, 255,255,255)); white-space: nowrap; transition: color .5s var(--ease); } /* 语言切换按钮：右上角，沿用桌面 .lang-switch 圆角胶囊视觉，但跟随诞生色反色。外层 .mp-lang-wrap 作为布局容器（margin-left:auto 推到右上角），不充当定位锚点：移动端按钮仅 ~46px，若让 .mp-lang-drop 相对 wrap 锚定，108px 面板会向左溢出屏幕。因此面板改为相对固定定位的 .mp-topbar 锚定，自然落在顶栏 22px 内边距处（v260908_5） */ .mp-topbar .mp-lang-wrap { position: relative; /* drop 定位锚点；面板 right:0 相对 wrap 右缘 = 顶栏 22px 内边距处 */ margin-left: auto; display: flex; align-items: center; pointer-events: none; } .mp-topbar .mp-lang { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; height: 32px; /* 与左侧汉堡 icon 同高对齐 */ font-family: 'Noto Serif SC', serif; font-size: 11px; letter-spacing: .08em; padding: 0 10px; border-radius: 20px; border: 1px solid rgba(var(--mp-ink, 255,255,255), .35); background: none; color: rgba(var(--mp-ink, 255,255,255), .85); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .18s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } .mp-topbar .mp-lang:active { opacity: .6; } /* ---- 语言选择弹窗：视觉对齐桌面 .lang-dropdown（固定深色玻璃，不随诞色反色） ---- */ .mp-topbar .mp-lang-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 108px; padding: 8px; background: #141E21; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .mp-topbar .mp-lang-drop.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mp-topbar .mp-lang-drop .mp-lang-opt { display: block; width: 100%; font-family: 'Noto Serif SC', serif; font-size: 12px; letter-spacing: .08em; line-height: 1.5; color: var(--text-soft); background: transparent; border: 0; padding: 9px 18px; border-radius: 9px; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease), color .2s var(--ease); } .mp-topbar .mp-lang-drop .mp-lang-opt:hover, .mp-topbar .mp-lang-drop .mp-lang-opt:active { background: rgba(255,255,255,0.08); color: var(--text); } .mp-topbar .mp-lang-drop .mp-lang-opt.is-active { color: var(--text); font-weight: 600; background: rgba(255,255,255,0.06); } /* ================= 底部液态玻璃按钮组 ================= */ .mp-footbar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(3vh + env(safe-area-inset-bottom)); z-index: 620; padding: 0 22px; align-items: center; justify-content: space-between; box-sizing: border-box; pointer-events: none; transition: opacity .32s var(--ease), transform .32s var(--ease); } /* 日视图配色屏：淡出隐藏，把整屏留给色卡 */ .mp-footbar.is-hidden { opacity: 0; transform: translateY(24px); pointer-events: none; } .mp-fgroup { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; } .mp-fgroup:empty { display: none; } .mp-fgroup-right { margin-left: auto; } /* 底部玻璃（v1.3.4 完整对齐小程序 v1.3.13）。**四层**结构自上而下 = 外描边 → 顶部锐利湿边（硬）→ 上缘柔光晕（润）→ 底部锐利湿边（暗带 / 极弱白线）。 ⚠️ 2026-09-18：曾试「下缘也是亮高光 + 反向柔光晕」（对齐 iOS Liquid Glass）—— 观感反而更差，**整条已撤回**，别再重走。唯一保留的结论：iOS 两侧没有亮 rim。 ⚠️ 层结构必须与小程序逐层一致：少一层 glow 就退回「只有一条硬边」的塑料感。 ⚠️ 这里所有 var 的兜底值 = 【深底档】（= 默认态），真实值全部由 JS 按当天诞生色现算（mobile_*.js 的 glassVarsFor / setGlass）⇒ 改参数必须同时改 JS，否则首帧会闪一下旧色。 ★ 2026-09-20 补：box-shadow 之下还压着 background 的**材质两层** （--glass-sheer 斜向微光 / --glass-depth 竖向厚度）。四层阴影负责「边怎么立起来」，材质两层负责「玻璃怎么折光」—— 缺任一半都还是塑料片。 */ .mp-fbtn { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; padding: 0 17px; box-sizing: border-box; border: 0; border-radius: 24px; color: var(--foot-ink, #fff); /* 底层 tint = --foot-glass（诞色派生），上面压「材质两层」：sheer（斜向微光）压 depth（竖向厚度）。 ⚠️ 这两层与 tint 正交 ⇒ 调色只动 --foot-*（JS），调材质只动 --glass-*（本文件 :root）。 */ background: var(--glass-sheer), var(--glass-depth), var(--foot-glass, rgba(166,170,171,0.34)); box-shadow: 0 0 0 .5px var(--foot-edge, rgba(255,255,255,0.16)), inset 0 .75px 0 var(--foot-hi, rgba(255,255,255,0.42)), inset 0 1px 2px var(--foot-glow, rgba(255,255,255,0.18)), inset 0 -.75px 0 var(--foot-lo, rgba(255,255,255,0.08)); -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5); font-family: 'Noto Serif SC', serif; /* 16px = 小程序 32rpx @375（2026-09-17 蘑菇「30rpx 改32」后同步；字距 2px = 4rpx） */ font-size: 16px; font-weight: 700; letter-spacing: 2px; line-height: 48px; cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease), transform .2s var(--ease); } .mp-fbtn.is-circle { width: 48px; padding: 0; border-radius: 50%; } .mp-fbtn svg { width: 22px; height: 22px; display: block; } /* 点按遮罩：跟随按钮形状（pill / circle），避免系统矩形高亮 */ .mp-fbtn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--foot-hover, rgba(166,170,171,0.55)); opacity: 0; transition: opacity .18s var(--ease); pointer-events: none; } .mp-fbtn:active { transform: scale(.96); } .mp-fbtn:active::after { opacity: .5; } /* 右组：一块连续玻璃里装三个图标按钮（v1.4.0 由两个扩到三个） */ .mp-fgroup-right { display: inline-flex; align-items: stretch; /* gap: 0 —— 三个图标在玻璃面上「无缝」相邻，这是小程序 .foot-group-seg 的原样（那边 750rpx 下就是 88rpx 挨着 88rpx，没有 gap）。 ⚠️ 必须显式写 0：.mp-fgroup 上的 `gap: 6px` 会继承到本元素（两个类同时挂在一个节点上），不重置的话三个图标会各隔 6px，看着像玻璃里塞了三颗独立胶囊。原来那 6px 是给 .mp-fsep 分隔线留的两侧留白，v1.4.0 去掉分隔线后一并归零。 */ gap: 0; padding: 0 5px; border-radius: 24px; overflow: hidden; /* 与 .mp-fbtn 同一套高光（改动要同步，见上方注释）；材质两层同样与 .mp-fbtn 逐层一致 */ background: var(--glass-sheer), var(--glass-depth), var(--foot-glass, rgba(166,170,171,0.34)); box-shadow: 0 0 0 .5px var(--foot-edge, rgba(255,255,255,0.16)), inset 0 .75px 0 var(--foot-hi, rgba(255,255,255,0.42)), inset 0 1px 2px var(--foot-glow, rgba(255,255,255,0.18)), inset 0 -.75px 0 var(--foot-lo, rgba(255,255,255,0.08)); -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5); pointer-events: auto; } .mp-fseg { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--foot-ink, #fff); cursor: pointer; transition: background .18s var(--ease); } .mp-fseg svg { width: 22px; height: 22px; display: block; } .mp-fseg:active { background: var(--foot-hover, rgba(166,170,171,0.55)); } /* 下载图片按钮【只在日视图存在】：月 / 年视图下没有「某一天」的诞生色，下载无意义。等价于小程序的 `wx:if="{{view === 'day'}}"` —— 那边是整块不渲染，这边是纯 CSS 隐藏。 mp-day / mp-month / mp-year 由 mobile_*.js 的 onViewChange() 维护，所以不需要额外 JS toggle。 ⚠️ 网页端的胶囊圆角由**容器** .mp-fgroup-right{overflow:hidden} 统一裁切， **不存在**小程序那个「首元素被隐掉、挂在首元素上的显式首尾类要跟着挪」的坑。 ⚠️ v1.4.0 已删除原 .mp-fsep 分隔线规则：小程序 v1.4.0 的右组是无缝三连（那边的 .foot-btn-sep 也已是死代码）。对齐后两端一致，别再往回加。 */ html:not(.mp-day) .mp-download { display: none; } /* ================= 日视图：横向三帧 swiper（v260908_5，对齐小程序） ================= 结构：.mp-daywrap > .mp-dayswiper > .mp-dayframe × 3（上一天 / 当前 / 下一天）每帧 100vw；swiper 整体 translate3d 平移：-100vw 显示当前帧（中帧） .is-x-drag = 跟手拖动（过渡 0s）；移除后 0.46s 平滑翻页 / 回弹 */ .mp-daywrap { position: absolute; inset: 0; overflow: hidden; } .mp-dayswiper { position: absolute; top: 0; left: 0; width: 300vw; height: 100%; display: flex; flex-direction: row; will-change: transform; transform: translate3d(-100vw, 0, 0); transition: transform .46s var(--ease); } .mp-dayswiper.is-x-drag { transition-duration: 0s; } .mp-dayframe { position: relative; flex: 0 0 100vw; width: 100vw; height: 100%; overflow: hidden; } /* ================= 日视图：纵向整屏轨道 ================= */ .mp-day { position: absolute; inset: 0; overflow: hidden; } .mp-track { display: flex; flex-direction: column; align-items: stretch; will-change: transform; transform: translate3d(0, calc(var(--mp-s, 0) * -1 * var(--vh-full)), 0); transition: transform .42s var(--ease); } .mp-track.is-dragging { transition-duration: 0s; } .mp-screen { position: relative; flex: 0 0 var(--vh-full); height: var(--vh-full); width: 100%; overflow: hidden; box-sizing: border-box; } /* 屏 1：主屏（日期 / 色名 / 描述 / hex） */ .mp-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: calc(env(safe-area-inset-top) + 52px); background: var(--birth); } .mp-hero-center { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 28px; box-sizing: border-box; text-align: center; /* 弹性限高：内容总高不超屏时照常居中（flex-basis auto，max-height 不生效）；超屏时本容器被压到 calc(100% - 88px)，内部唯一可收缩项 .day-desc 被压缩 → 内部滚动，保证日期/色名/hex 完整可见，且 hex 最低位置落在底部按钮上方约 12px。（88px = 按钮 48 + 3vh≈25 + 上下留白余量；只影响溢出页，不超屏的页面不受影响） min-height:0 是 flex 子项允许收缩的前提。 */ flex: 0 1 auto; min-height: 0; max-height: calc(100% - 88px); transform: translateY(calc(-41px + var(--mp-hero-shift, 0px))); color: rgb(var(--ink-rgb)); transition: opacity .9s var(--ease); } .mp-hero .day-date { font-family: 'Cormorant Garamond', 'Noto Serif SC', serif; font-size: 32px; opacity: .9; letter-spacing: .06em; white-space: nowrap; margin-bottom: 10px; } /* v1.4.0：JS 侧 mpDateHtml() 已改为**单层**包裹（原先 i18n 已吐 span、这边又包一次 ⇒ 双层嵌套、em 相乘）。下面两个数值是等价补偿：1.5² = 2.25、.72² = .5184 —— 渲染尺寸与改前逐像素相同（已实测校验）。 ⚠️ 别再按「1.5em / .72em」的错觉去改：名义值就是实际值，所见即所得。 */ .mp-hero .day-date .dd-num { font-size: 2.25em; font-style: italic; font-family: 'Cormorant Garamond', serif; } /* 英文档的字母月份（Sep / Jan / May…）：历史上一直比日期小一档，「小月大日」的观感予以保留。 1.5em × 32px = 48px（日期仍 2.25em = 72px）。中文两个 dd-num 都是数字，不受影响。 ⚠️ 类名由 mobile_*.js 的 mpDateHtml() 只挂在**纯字母**那个 dd-num 上。 */ .mp-hero .day-date .dd-num.dd-mon { font-size: 1.5em; } /* margin 用 px 而非 em：原双层时是「外层 0.3em(6.912px) + 内层 0.3em(4.97664px)」两次叠加 = 11.88864px，单层后必须一次给足，否则「数字 ↔ 月/日」的间距会缩掉 58%。 */ .mp-hero .day-date .dd-char { font-style: italic; font-size: .5184em; margin: 0 11.8886px; } .mp-hero .day-cn { font-family: 'Noto Serif SC', serif; font-weight: 500; letter-spacing: .08em; line-height: 1.25; margin-bottom: 10px; /* 中文长色名必须一行放下（最长 6 字：5月9日「长尾小鹦鹉绿」）。中文全宽 1em + 字距 .08em ⇒ 每字实占 1.08em（实测比值 1.08，与推算一致）； 6 字 @52px = 336.97px，而 393px 屏的可用宽只有 100vw-56px = 337px —— 差 0.03px 就折行，375px 屏必折。故按字数等比缩字号：n = --cn-n（mpHeroHtml 按帧注入的色名字数），/1.1 是在 1.08 之上再留 ~2% 余量。 5 字及以下在常见屏宽算出来都 > 52px ⇒ min() 取 52px，外观零变化。 */ font-size: min(52px, calc((100vw - 56px) / var(--cn-n, 5) / 1.1)); white-space: nowrap; } /* 英文档复位：Cormorant 的多词色名（Electric Ultramarine…）允许折行，不受上面的 min()/nowrap 影响 */ html.mp-on[data-lang="en"] .mp-hero .day-cn { font-family: 'Cormorant Garamond', serif; font-size: 46px; letter-spacing: .02em; white-space: normal; } .mp-hero .day-en { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; opacity: .8; margin-bottom: 8px; } .mp-hero .day-jp { font-size: 15px; opacity: .8; letter-spacing: .14em; } .mp-hero .day-sep { width: 147px; height: 1px; background: rgb(var(--ink-rgb)); opacity: .2; margin: 8px 0; } .mp-hero .day-lang { font-size: 14px; opacity: .8; letter-spacing: .05em; } .mp-hero .day-desc { font-family: 'Noto Serif SC', serif; font-size: 14px; line-height: 1.95; opacity: .85; letter-spacing: .03em; max-width: 330px; margin-top: 1em; text-align: justify; white-space: pre-line; /* 唯一可收缩项：屏内放不下时被压缩、内部上下滚动（配合 .mp-hero-center 的限高） */ flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* 滚动条：默认完全隐藏，滚动中才显形（.is-scrolling 由 JS 挂/摘）。注意 scrollbar-color 一旦设为可见色，Chrome/Firefox 会用它替代 ::-webkit-scrollbar 伪元素样式导致 thumb 常驻，所以默认必须是 transparent。 iOS Safari 的 overflow 滚动条由系统绘制（滚动时自动出现），不受这里影响。 */ scrollbar-width: thin; scrollbar-color: transparent transparent; } /* 英文版介绍区行距过松：Cormorant 细高衬线体 + 1.95 行高显空，单独收紧到 1.6（可调，建议 1.5~1.7） */ html.mp-on[data-lang="en"] .mp-hero .day-desc { line-height: 1.6; } .mp-hero .day-desc.is-scrolling { scrollbar-color: rgba(var(--ink-rgb), .35) transparent; } .mp-hero .day-desc::-webkit-scrollbar { width: 3px; } .mp-hero .day-desc::-webkit-scrollbar-track { background: transparent; } .mp-hero .day-desc::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; } .mp-hero .day-desc.is-scrolling::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), .35); } .mp-hero .day-desc .hex-link { border-bottom: 1px solid rgba(var(--ink-rgb), .45); padding-bottom: 1px; } .mp-hero .day-hex { display: inline-block; font-family: 'Noto Serif SC', serif; font-size: 13px; letter-spacing: .1em; margin-top: 34px; padding: 0; color: rgba(var(--ink-rgb), .9); border: 0; /* v260908_5：去掉桌面 .day-hex 的 1px solid 四边椭圆胶囊（之前仅覆盖 border-bottom，top/left/right 仍 solid + border-radius:999px 导致呈"带顶帽椭圆"） */ border-bottom: 1px dashed rgba(var(--ink-rgb), .45); border-radius: 0; /* v260908_5：去掉桌面 border-radius:999px 的胶囊圆角，只留虚线下划线 */ cursor: pointer; } /* 屏 2-4：配色（4 色块 40/17/17/17 + 白底 9%） */ .mp-pal { background: #fff; } .mp-sw { position: absolute; left: 0; right: 0; overflow: hidden; box-sizing: border-box; } .mp-hex { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: rgb(var(--ink-rgb)); font-family: 'Noto Serif SC', serif; font-size: 12px; font-weight: 400; letter-spacing: .1em; line-height: 1.2; opacity: .92; } .mp-nb { background: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(env(safe-area-inset-bottom) + 10px); pointer-events: none; } .mp-nb-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 14px; box-sizing: border-box; } .mp-nb-cn { font-family: 'Noto Serif SC', serif; font-size: 17px; font-weight: 500; letter-spacing: .1em; line-height: 1.15; color: #1d1d21; } .mp-nb-sub { font-family: 'Noto Serif SC', serif; font-size: 11px; font-weight: 400; letter-spacing: .4em; line-height: 1.4; color: rgba(29,29,33,.55); } /* 横滑换日时新内容滑入 */ .mp-slide-in-left { animation: mpSlideL .42s var(--ease); } .mp-slide-in-right { animation: mpSlideR .42s var(--ease); } @keyframes mpSlideL { from { opacity: .35; transform: translateX(6%); } to { opacity: 1; transform: none; } } @keyframes mpSlideR { from { opacity: .35; transform: translateX(-6%); } to { opacity: 1; transform: none; } } /* ================= 抽屉 ================= */ .mp-drawer { display: none; position: fixed; inset: 0; z-index: 900; } .mp-drawer.is-open { display: flex; } .mp-drawer-ov { position: absolute; inset: 0; background: rgba(6,6,9,.6); animation: mpFade .3s var(--ease); } .mp-drawer-panel { position: relative; z-index: 1; width: 74%; max-width: 300px; height: 100%; background: rgba(235,235,245,.28); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 30px 0 80px rgba(0,0,0,.35); display: flex; flex-direction: column; animation: mpDrawerIn .42s var(--ease); padding-top: env(safe-area-inset-top); } @keyframes mpFade { from { opacity: 0 } to { opacity: 1 } } @keyframes mpDrawerIn { from { transform: translateX(-100%) } to { transform: translateX(0) } } .mp-dh { padding: 22px 24px 24px; border-bottom: 1px solid var(--line); } .mp-dh-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 23px; color: var(--text); letter-spacing: .04em; line-height: 1.1; } .mp-dh-cn { font-family: 'Noto Serif SC', serif; font-size: 18px; color: var(--text); letter-spacing: .08em; margin-left: 7px; } .mp-dh-note { margin-top: 10px; font-size: 12px; color: var(--text-faint); letter-spacing: .4em; } .mp-dbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 24px; box-sizing: border-box; } .mp-dsec { margin-bottom: 26px; } .mp-dsec-label { font-size: 11px; color: var(--text-faint); letter-spacing: .4em; margin-bottom: 12px; } .mp-ditem { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; padding: 15px 2px; border-bottom: 1px solid var(--line); font-family: 'Noto Serif SC', serif; font-size: 14px; color: var(--text); letter-spacing: .08em; text-align: left; cursor: pointer; } .mp-ditem:active { opacity: .55; } .mp-ditem .mp-darrow { font-size: 22px; color: var(--text-faint); opacity: .7; } /* 抽屉文字 / 分割线沿用页面主题 var(--text)/var(--text-faint)/var(--text-ghost)/var(--line) 与小程序抽屉一致：浅玻璃面板叠在深色页面上是中等灰底，浅色暖白文字对比度好 */ /* ================= 移动端二级子页面（抽屉选项进入，替代桌面弹窗） ================= */ .mp-subpage { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; background: radial-gradient(circle at 16% 16%, rgba(var(--page-accent-rgb), 0.16), transparent 28%), radial-gradient(circle at 82% 18%, rgba(var(--page-accent-rgb), 0.12), transparent 30%), radial-gradient(circle at 50% 100%, rgba(var(--page-accent-rgb), 0.14), transparent 42%), linear-gradient(180deg, #121217 0%, #0f1014 52%, #0b0c10 100%); background-color: var(--bg); transform: translateX(100%); transition: transform .34s var(--ease); will-change: transform; } .mp-subpage.is-on { transform: translateX(0); } .mp-subpage-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mp-subpage-amb::before, .mp-subpage-amb::after { content: ''; position: absolute; width: 75vw; height: 75vw; border-radius: 50%; filter: blur(150px); opacity: 0.18; transition: background 1.6s var(--ease); } .mp-subpage-amb::before { top: -28vw; left: -18vw; background: radial-gradient(circle, var(--ambient-a, rgba(var(--page-accent-rgb), 0.35)), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; } .mp-subpage-amb::after { bottom: -32vw; right: -22vw; background: radial-gradient(circle, var(--ambient-b, rgba(var(--page-accent-rgb), 0.25)), transparent 70%); animation: drift2 30s ease-in-out infinite alternate; } .mp-subpage-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: linear-gradient(to bottom, rgba(15,15,18,.9), rgba(15,15,18,0)); } .mp-sp-back { flex: none; width: 34px; height: 32px; margin-left: -4px; border: 0; background: none; padding: 0; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; } .mp-sp-back:active { opacity: .55; } .mp-sp-back .chev { width: 9px; height: 9px; box-sizing: border-box; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(1px,-1px); } .mp-sp-title { flex: 1; font-family: 'Noto Serif SC', serif; font-size: 17px; letter-spacing: .08em; color: var(--text); } .mp-subpage-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 22px calc(28px + env(safe-area-inset-bottom)); } .mp-subpage-body.is-center { display: flex; flex-direction: column; justify-content: center; } .mp-sp-h2 { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 500; letter-spacing: .06em; color: var(--text); margin: 8px 0 18px; } .mp-sp-prose { font-size: 15px; line-height: 1.95; color: var(--text); font-weight: 300; letter-spacing: .02em; } .mp-sp-prose p { margin: 0 0 14px; } .mp-sp-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-faint); opacity: .7; } .mp-sp-sign { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--text-faint); letter-spacing: .2em; text-align: right; } .mp-sp-sign .sign-name { color: var(--text-soft); } .mp-sp-card { width: 80.75%; margin: 0 auto 20px; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.04); } .mp-sp-card img { width: 100%; display: block; } .mp-sp-actions { display: grid; grid-template-columns: max-content; justify-content: center; gap: 12px; } .mp-sp-btn { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: var(--text); font-family: 'Noto Serif SC', serif; font-size: 14px; letter-spacing: .12em; padding: 0 16px; height: 48px; border-radius: 999px; cursor: pointer; } .mp-sp-btn:active { opacity: .6; } .mp-sp-mailicon { width: 72px; height: 72px; margin: 8px auto 16px; color: var(--text-soft); } .mp-sp-mailicon svg { width: 100%; height: 100%; display: block; } .mp-sp-mailtext { text-align: center; color: var(--text-soft); font-size: 15px; margin-bottom: 6px; } .mp-sp-mailaddr { text-align: center; color: var(--text); font-size: 18px; letter-spacing: .04em; margin-bottom: 24px; } .mp-dfoot { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .mp-dfoot-brand { font-size: 12px; color: var(--text-ghost); letter-spacing: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .mp-dfoot-ver { font-size: 11px; color: var(--text-ghost); letter-spacing: .1em; } .mp-dfoot-beian { margin-top: 12px; } .mp-dfoot-beian a { color: var(--text-ghost); text-decoration: none; letter-spacing: .04em; white-space: nowrap; } /* ================= 视图切换底部弹层 ================= */ .mp-sheet { display: none; position: fixed; inset: 0; z-index: 880; align-items: flex-end; } .mp-sheet.is-open { display: flex; } .mp-sheet-ov { position: absolute; inset: 0; background: rgba(6,6,9,.5); } .mp-sheet-box { position: relative; z-index: 1; width: 100%; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(24,24,29,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 20px 20px 0 0; animation: mpSheetIn .28s var(--ease); } @keyframes mpSheetIn { from { transform: translateY(100%) } to { transform: translateY(0) } } .mp-sheet-item { position: relative; /* 容纳绝对定位的勾 */ width: 100%; background: none; border: 0; padding: 16px 22px; font-family: 'Noto Serif SC', serif; font-size: 16px; color: var(--text); letter-spacing: .1em; text-align: center; cursor: pointer; /* 文字严格居中（不再 flex），让 3 行字中心都对齐按钮中线；勾 absolute 飘在第一行字尾 */ } .mp-sheet-item + .mp-sheet-item { border-top: 1px solid var(--line); } .mp-sheet-item:active { opacity: .6; } /* 选中的勾：从按钮中线向右偏移（半字宽+间距）= 跟在"日视图"字尾，与月/年字中心对齐（v260908_5）估算：16px 字号 + 0.1em letter-spacing → "日视图" ≈ 51px，半字宽 ≈ 26px；+ 8px 间距 = 34px */ .mp-sheet-item .mp-tick { position: absolute; left: 50%; margin-left: 34px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-faint); } .mp-sheet-cancel { width: 100%; background: none; border: 0; margin-top: 8px; padding: 14px 6px; font-family: 'Noto Serif SC', serif; font-size: 15px; color: var(--text-faint); letter-spacing: .1em; cursor: pointer; border-top: 1px solid var(--line); } /* ================= 日期选择：移动端 iOS picker ================= */ /* 桌面 #dpPanel 在移动端隐藏（桌面逻辑不依赖其可见性，节点保留以免 desktop 报错） */ #dpPanel { display: none !important; } .mp-dp { display: none; position: fixed; inset: 0; z-index: 870; } .mp-dp.is-open { display: flex; align-items: flex-end; } .mp-dp-ov { position: absolute; inset: 0; background: rgba(6,6,9,.5); animation: mpFade .3s var(--ease); } .mp-dp-sheet { position: relative; z-index: 1; width: 100%; background: rgba(24,24,29,.94); border-radius: 14px 14px 0 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); color: var(--text); animation: mpSheetIn .28s var(--ease); box-sizing: border-box; box-shadow: 0 -8px 28px rgba(0,0,0,.32); } .mp-dp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 12px; border-bottom: 1px solid var(--line); } .mp-dp-head button { background: none; border: 0; padding: 4px 6px; font-family: 'Noto Serif SC', serif; font-size: 16px; letter-spacing: .04em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .18s var(--ease); } .mp-dp-head button:active { opacity: .5; } .mp-dp-cancel { color: var(--text-faint); } .mp-dp-ok { color: #fff; font-weight: 600; } .mp-dp-body { position: relative; display: flex; height: 252px; padding: 0 18px; box-sizing: border-box; } .mp-dp-col { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mp-dp-col::-webkit-scrollbar { display: none; } .mp-dp-col > div { height: 48px; line-height: 48px; text-align: center; font-family: 'Noto Serif SC', serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,.32); scroll-snap-align: center; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease); } /* 首尾滚动占位（v260908_5 修复选不准）：高 = 视口半高 - 半项 = 126-24 = 102，使第 1 项与末项都能滚到中央 rail；不吸附、不可点、不染色 */ .mp-dp-col > div.mp-dp-pad { height: 102px; line-height: 102px; color: transparent; cursor: default; scroll-snap-align: none; pointer-events: none; } .mp-dp-col > div.is-mid { color: #fff; font-weight: 600; font-size: 20px; } /* 上下两条浅线，标识当前选中行 */ .mp-dp-rail { position: absolute; left: 18px; right: 18px; top: 50%; height: 48px; margin-top: -24px; pointer-events: none; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); } /* ================= 沉静模式 ================= */ .mp-quiet-wrap { display: block; position: fixed; inset: 0; z-index: 600; pointer-events: none; opacity: 0; transition: opacity 1.05s var(--ease); } .mp-quiet-wrap.is-on { opacity: 1; } .mp-quiet-canvas { position: absolute; inset: -48px; width: calc(100% + 96px); height: calc(100% + 96px); /* blur 30px→12px（对齐小程序 .quiet-canvas）：模糊半径越大越把光斑按区域平均掉，明暗层次被抹平 → 看不出光斑。同时去掉 scale(1.2)（额外放大同样削弱对比）；边缘由 inset:-48px 的物理超采兜底，blur(12px) 的外溢发生在屏幕外。 */ filter: blur(12px); } .mp-quiet-dither { position: absolute; inset: 0; width: 100%; height: 100%; } html.mp-quiet .mp-topbar, html.mp-quiet .mp-footbar, html.mp-quiet .mp-hero-center { opacity: 0; } html.mp-quiet .mp-hero-center { transition: opacity 1.05s var(--ease); } .mp-shield { display: none; position: fixed; inset: 0; z-index: 700; background: transparent; } html.mp-quiet .mp-shield { display: block; } /* ================= 社交弹窗在移动端收窄 ================= */ .modal-card { width: calc(100% - 36px); max-width: 420px; } .modal-card-social { padding: 26px 20px 20px; } .social-card { width: 100%; } /* ================= 月视图横滑三帧（与日视图同款跟手） ================= */ /* 全屏遮罩：仅在横滑期间挂载。z 低于 topbar/footbar (620)，但高于 .stage。月网格需纵向滚动，所以每帧独立 overflow-y:auto，避免与 body 滚动冲突。 */ .mp-mshade { position: fixed; inset: 0; z-index: 615; overflow: hidden; background: var(--bg); touch-action: none; } .mp-mrail { display: flex; width: 300vw; height: 100%; will-change: transform; transition: transform .46s cubic-bezier(.4,0,.2,1); } .mp-mrail.is-x-drag { transition-duration: 0s; } /* 帧顶部留白对齐真实月视图：#viewMonth 自身即滚动容器（class="view" id="viewMonth"），其 .active 态 padding-top = calc(safe-area + 72px)，即真实顶部留白只有 72px（并无外层 .view 再叠 16px）。之前给 .mp-mfr 多垫 16px → 遮罩比真实页高 16px；月份未溢出/未滚动时 mid.scrollTop 被浏览器钳到 0 无法补偿 → 横滑/翻月起手整页下移 16px。现 .mp-mfr 仅补 safe-area（避让刘海），72px 由 .month-head 承担，遮罩盒模型与真实视图一致（= safe-area+72）。 */ .mp-mfr { width: 100vw; height: 100%; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: env(safe-area-inset-top, 0px) 16px 0; touch-action: pan-y; } .mp-mfr .month-head { padding-top: 72px; padding-bottom: 4px; } .mp-mfr .month-grid { padding-bottom: 96px; } /* 底部留出 footbar 高度 */ .mp-mfr .mcell { /* 复用 .mcell 默认样式，此处仅加点击反馈 */ -webkit-tap-highlight-color: transparent; } /* ================= 月视图概述：两行预览 + 「更多」→ 全文弹窗（对齐小程序 v1.3.x） ================= */ .month-overview { margin: 0 -16px 22px; /* 抵消 #viewMonth 的 16px 内边距，保持通栏 */ padding: 12px 16px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mo-lead { margin-bottom: 10px; font-size: 16px; line-height: 1.45; } html[data-lang="en"] .mo-lead { font-size: 16px; } /* 年视图（对齐小程序 v1.3.x 两行结构）：标题样式同 .mo-lead 移动端覆盖 */ .year-title { margin: 0 0 10px; font-size: 16px; line-height: 1.45; } .year-sub { font-size: 15px; line-height: 1.85; } /* 移动端正文略收紧，金句感更突出 */ /* 小程序同款（移动端）：.mo-preview 两行截断 + .mo-fade 渐隐「更多」；.mo-body/.mp-mo-prev/.mo-modal-* 沿用全局段。桌面端默认（全局段）是内联「更多」带下划线，此处覆盖为小程序无下划线 + 渐隐。 */ .mo-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 3.9em; /* 固定两行高度，避免字体 swap 位置跳动 */ } .mo-fade { display: flex; align-items: flex-end; justify-content: flex-end; background: linear-gradient(90deg, rgba(15,15,18,0) 0%, var(--bg) 62%, var(--bg) 100%); } .mo-more { text-decoration: none; } }