refactor(来信): 彻底删除内置来信屏及全部功能代码，来信整体由第三方 laixin 承接（v26092006）
「宝宝来信」功能已全部由第三方应用 laixin（mp.yizhezhe.com/laixin/）承接，
mama-box 只保留两个入口/提醒，二者逻辑一行未改：
· 底 tab「宝宝来信」#tabLetter → openLetterApp() 跳 laixin
· 首页提醒卡 #homeLetter + 底 tab 红点 #tabBadge → syncLaixinReminder()/applyLaixinReminder()
（读 /api/mp/public/laixin/unread）
删除的界面：#screen-letter（来信列表屏）、#detailLetter（来信详情）、
#detailCard（来信分享卡）、#fabWrite（写回信钮）、#modalReply（回信弹窗）。
删除的代码：LETTERS 数据与 stampLetters/renderLetters/filterLetters/buildThread/
renderLetterDetail/openLetter/curLetter/kidText/kidEl、本地延迟投递队列全套
（store/pending、deliverDue、deliverBabyReply、deliverVoiceLetter、语音信）、
syncLetterCounts、信箱头像换图 pickBabyAvatar、回信提交、applyRemoteLetters
（H5 从此不再请求 box_app 的 /mama-box/letters）、滑动 order 里的 letter、
go() 里 #fabWrite 的开关、state.{unread,letterFilter,curLetter,replyCount,babyAvatar}
以及随之无调用方的 fillBaby()。
保留（删前逐个 grep 确认仍有调用方）：babyWord()、backAt()（stampAiLogs 在用）、
el()（档案海报在用）、.segmented（档案页在用）、.letter-card（首页提醒卡在用）、
档案页「珍贵时刻」里仅以文案提及来信的装饰卡。
CSS：删掉来信专用规则块与随之失效的变量（--font-round 等）；净变化 -2396/+93 行。
This commit is contained in:
544
mama-box.css
544
mama-box.css
@@ -23,30 +23,9 @@
|
||||
--blue 是**调色板**里的颜色名，把叫 blue 的变量填成绿色，
|
||||
以后每个读到它的人都会被骗一次。--mom 是**语义**变量（谁的颜色），
|
||||
换色时只动它，调色板保持诚实。
|
||||
⚠️ #3F7551 的深浅不是随手挑的：它要当小字压在 .lt-msg.mom 的浅绿气泡上，
|
||||
实测对比度**起点 5.18 / 终点 4.73**（气泡是渐变，两头都得量，AA 全过）。
|
||||
顺带一提，被它换掉的那个蓝压在旧浅蓝底 #EFF5FC 上只有 3.48:1 ——
|
||||
本来就不达标，这次换色顺手把可读性一起修了。
|
||||
再往浅调会立刻掉到 3 点几，改这个值之前先量对比度。 */
|
||||
⚠️ 内置来信屏删除后，回信气泡那套浅绿底（原来的 --mom-bg-1/2）已一并下线；
|
||||
这个变量现在只剩 .sec-title.c-blue::before（绿色竖色条）一个消费者。 */
|
||||
--mom:#3F7551;
|
||||
/* 妈妈气泡的浅绿底（起 → 止）。做成渐变是用户要的那点「底纹」。
|
||||
⚠️ 用户此前**两次**否掉过图案型底纹（四种图案散铺 →「太碎了」；
|
||||
等距波点 →「小碎点看着还是太乱」）。所以这里只能是纯渐变，
|
||||
别再往上加点、加纹理、加 repeating-linear-gradient。
|
||||
⚠️ 和 --mom 是一组：改任意一个都得回来重量对比度。
|
||||
⚠️ 深的那头放在**下方**（渐变 160deg）。.lm-who 那行绿色小字坐在气泡顶部，
|
||||
让它待在浅的一头；正文 var(--ink-2) 走到 #E8F2EB 仍有 5.26。
|
||||
把两个值对调会把唯一一处贴边的对比度推到最紧。 */
|
||||
--mom-bg-1:#F6FBF7;
|
||||
--mom-bg-2:#E8F2EB;
|
||||
/* 宝宝气泡的暖底（起 → 止），和上面那组对称。
|
||||
⚠️ 起点 #FFF8F4 比换掉的那块纯色 #FFF4EF **更浅**，是有意的：
|
||||
.lm-who 在宝宝这边是 var(--brand)，压在 #FFF4EF 上只有 3.07:1，
|
||||
本来就没过 AA（11.5px 不算大字）。渐变要是从原色往深里走，
|
||||
那行字会掉到 2.9。现在浅头在上、字也在上，实测 3.15 —— 比原来还好一点。
|
||||
别把这两个值对调。 */
|
||||
--baby-bg-1:#FFF8F4;
|
||||
--baby-bg-2:#FFEDE3;
|
||||
--r-lg:24px;
|
||||
--r-md:18px;
|
||||
--r-sm:12px;
|
||||
@@ -87,17 +66,11 @@
|
||||
--wm-size:132px;
|
||||
--tabh:78px; /* 悬浮药丸 58px + 底部留白 14px + 余量 */
|
||||
--ease:cubic-bezier(.32,.72,0,1);
|
||||
/* 宝宝来信正文用的「圆体」——信是小朋友写的，圆一点更像那么回事。
|
||||
产物必须是单文件离线可用，所以不引 @font-face，只挑各平台自带的圆体：
|
||||
Yuanti SC = iOS/macOS 圆体-简，Hiragino Maru Gothic = 日文丸ゴ（含部分汉字），
|
||||
YouYuan/幼圆 = Windows 幼圆；都没有时退回默认无衬线，不会变形。 */
|
||||
--font-round:"Yuanti SC","YuanTi SC",YuanTi,"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro",
|
||||
YouYuan,"幼圆","STYuanti-SC-Regular","PingFang SC","Microsoft YaHei",sans-serif;
|
||||
/* 宝宝写的字：挑系统自带里最「歪歪扭扭」的手写/卡通体。
|
||||
翩翩体（HanziPen SC）是 iOS/macOS 自带的儿童手写体，笔画有粗细起伏、
|
||||
字面故意不方正，最像小朋友写的；手札体（Hannotate）次之；
|
||||
Windows 退到华文彩云/幼圆；一路兜底到圆体，绝不掉进宋体。
|
||||
另外 kidText() 会给每个字加一点随机旋转，没这些字体的机器也歪得起来。 */
|
||||
⚠️ 内置来信屏删除后，这个变量现在只剩首页 slogan（.hero-slogan）在用。 */
|
||||
--font-kid:"HanziPen SC","翩翩体-简","HanziPen TC","Hannotate SC","手札体-简",
|
||||
"Yuanti SC",YouYuan,"幼圆","Hiragino Maru Gothic ProN",
|
||||
"PingFang SC","Microsoft YaHei",sans-serif;
|
||||
@@ -277,7 +250,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
「字底 y=34 < 气泡顶 y=40」这条净空都是按这两个数算的。
|
||||
|
||||
字体走 --font-kid（翩翩体 / 手札体那套手写体）—— 用户要「不要那种规规矩矩的
|
||||
字体」。这里**故意复用**宝宝来信正文那个变量，而不是新写一套几乎一样的栈：
|
||||
字体」。这套字体栈全站共用一份（原先来信正文也用它），不新写几乎一样的第二套：
|
||||
两套栈只要有一套漏了某个平台，就会出现「同一台机器上两处手写体长得不一样」，
|
||||
而这种漂移没人会去对。手写体笔画细，白字压在橙色渐变上容易发虚，
|
||||
所以 font-weight 提到 700、opacity 给到 .92（比旧版 .88 实一点）。 */
|
||||
@@ -385,8 +358,8 @@ a.skip:focus{left:16px;top:16px}
|
||||
background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
||||
border-radius:20px;padding:0 12px 0 13.5px;box-shadow:0 10px 26px rgba(150,60,40,.16);
|
||||
}
|
||||
/* 没有未读、也没有新回信时整张收起来（pushLatestToHome 挂的类）。
|
||||
这个库里没有全局 .hide，都是逐个元素声明的，跟 .lthread.hide 那些一个路子。 */
|
||||
/* 没有未读时整张收起来（hideLetterCard() 挂的类）。
|
||||
这个库里没有全局 .hide，都是逐个元素声明的（.moment.hide / .rl-gift.hide 同一个路子）。 */
|
||||
.letter-card.hide{display:none}
|
||||
/* 信封外面包一层，只为了给「有新回信」的小红点一个定位参照 */
|
||||
.lc-envwrap{position:relative;flex:0 0 auto;line-height:0}
|
||||
@@ -896,7 +869,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
.unlock{text-align:center;font-size:12.5px;color:var(--muted);margin:16px 0 4px}
|
||||
.unlock a{color:var(--brand);font-weight:600}
|
||||
|
||||
/* ============ 通用页头（档案 / 来信） ============ */
|
||||
/* ============ 通用页头（档案） ============ */
|
||||
.page-hero{padding:calc(env(safe-area-inset-top) + 16px) 20px 62px;color:#fff;background:var(--grad);position:relative;overflow:hidden}
|
||||
.page-hero::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.09);top:-70px;right:-60px}
|
||||
.hero-info{display:flex;align-items:center;gap:14px;margin-top:20px;position:relative;z-index:2}
|
||||
@@ -916,8 +889,8 @@ a.skip:focus{left:16px;top:16px}
|
||||
background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:25px;line-height:1}
|
||||
|
||||
/* ---------- 档案页 hero（重排过一次） ----------
|
||||
.hero-info 是和来信页共用的，那边仍是「文字 + 右边信封」的横排；
|
||||
档案页现在是自上而下四层，所以只在这里把 flex 关掉，不动共用那条。 */
|
||||
.hero-info 是共用的（.page-hero 现在只有档案页在用）；
|
||||
档案页是自上而下四层，所以只在这里把 flex 关掉，不动共用那条。 */
|
||||
.ar-hero{display:block}
|
||||
/* 页面名。上一版是 .ar-eyebrow —— 13px、opacity .78 的一行小字，
|
||||
为了把字号让给孕周。方向没错，但让过头了：这行是整页唯一出现宝宝小名的地方，
|
||||
@@ -961,8 +934,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
只改一边白卡就会爬上去盖住「已陪伴 N 天」那行。 */
|
||||
#screen-archive .page-hero{padding-bottom:44px}
|
||||
#screen-archive .page-body{margin-top:-28px}
|
||||
/* 浮动信封改为扁平矢量（原本是 💌 emoji，各系统渲染不一致且偏写实） */
|
||||
.env-art{flex:0 0 auto;margin-left:auto;display:block;filter:drop-shadow(0 8px 14px rgba(150,50,30,.28));animation:float 5s ease-in-out infinite}
|
||||
|
||||
/* 自动归档卡 */
|
||||
.auto-card{background:#fff;border-radius:22px;padding:18px;box-shadow:var(--sh-lg)}
|
||||
@@ -1042,7 +1013,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
/* 三个分栏各自那行 sec-title 已删（和标签文字重复），
|
||||
它原本提供的下间距改由这里给，否则内容会贴着分段控件 */
|
||||
.segmented{position:relative;display:flex;background:#EFE7E0;border-radius:20px;padding:5px;margin:22px 0 16px}
|
||||
/* 来信页那支现在住在橘色头部里，配色见「来信」一节的 #letterSeg */
|
||||
.seg-thumb{position:absolute;top:5px;bottom:5px;left:5px;background:#fff;border-radius:16px;box-shadow:0 3px 10px rgba(150,100,80,.14);transition:transform .38s var(--ease),width .38s var(--ease);z-index:1}
|
||||
.seg-btn{position:relative;z-index:2;flex:1;text-align:center;padding:11px 4px;font-size:15px;font-weight:600;color:var(--ink-2);transition:color .25s,font-weight .2s;white-space:nowrap}
|
||||
.seg-btn.is-active{color:var(--ink);font-weight:800}
|
||||
@@ -1141,366 +1111,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
.al-bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#FF8A68,#F0563A);border-radius:4px}
|
||||
.al-meta{font-size:11.5px;color:var(--ink-2);margin-top:8px}
|
||||
|
||||
/* ============ 来信 ============ */
|
||||
/* 页顶那张 .feature-letter「最新」大卡已删（画的就是列表第一条），
|
||||
.fl-* / .badge-unread 一整套随之下线 */
|
||||
|
||||
/* 筛选标签搬进了橘色头部。
|
||||
左右 -2px 是为了抵消 .page-hero(20px) 和 .page-body(18px) 的内边距差，
|
||||
否则这排标签会比下面的信件列表往里缩 2px。
|
||||
z-index 用来压住 .page-hero::after 那个装饰大圆（伪元素排在内容之后绘制）。
|
||||
底色原来是白色半透明（照搬 .icon-btn.glass），但那是和白字同方向的，
|
||||
等于没有底 —— 四格里只有选中那格（白底红字）跳得出来。
|
||||
换成一层压暗的暖色，白字才立得住。 */
|
||||
#letterSeg{background:rgba(120,42,26,.18);margin:18px -2px 0;z-index:2}
|
||||
#letterSeg .seg-thumb{box-shadow:0 3px 10px rgba(150,60,40,.22)}
|
||||
#letterSeg .seg-btn{color:#fff;font-weight:700}
|
||||
#letterSeg .seg-btn.is-active{color:var(--brand);font-weight:800}
|
||||
/* 未读数原来只是一个小号红字，太轻了。做成真的红点徽标：
|
||||
红底白字的小胶囊，选中与否都是这一套 —— 红底压在橘衬和白衬上都够跳 */
|
||||
#letterSeg .seg-btn i{
|
||||
display:inline-block;min-width:16px;padding:0 4px;margin-left:3px;
|
||||
background:#FF3B30;color:#fff;font-size:11px;font-weight:800;
|
||||
line-height:16px;border-radius:8px;text-align:center;vertical-align:1px;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,.16)
|
||||
}
|
||||
/* 全读完了就别挂一个「0」在那儿。.seg-btn 是 flex:1，
|
||||
徽标显隐不会让四格宽度变化，滑块也不用重测 */
|
||||
#letterSeg .seg-btn i.zero{display:none}
|
||||
|
||||
/* .page-hero 的下内边距 + .page-body 的负上边距，本来是配合着让
|
||||
.feature-letter 半浮在橘色下沿的。卡片没了，头部自己收边，
|
||||
列表就从橘色下面老实开始。两个类都和档案页共用，只能定向覆盖 */
|
||||
/* 上内边距：搜索图标那条 .hero-top 删掉后空出 42px（高 32 + margin-top 10），
|
||||
全还回去等于白删，一点不还标题又贴着状态栏。补 18px，净收 24px。 */
|
||||
#screen-letter .page-hero{padding:calc(env(safe-area-inset-top) + 34px) 20px 16px}
|
||||
#screen-letter .page-body{margin-top:0}
|
||||
|
||||
/* ---------- 信封上盖（本批新增） ----------
|
||||
⚠️ 先说清楚，免得被当成「用户否过的东西又回来了」：
|
||||
被否掉的是 .lt-flap —— 列表里**每张信件卡**顶上那道折口
|
||||
（原话「来信的那个列表的那个信纸的那个还是不要这种的，有点丑」），
|
||||
那是 24 张卡各来一份、密度过头。这里是**整页头部一整只信封**，
|
||||
全页只此一处，而且是用户本批点名要的（「做成类似一个信封的那种感觉」）。
|
||||
两者只是名字像，别顺手一起删了。
|
||||
|
||||
形状和「为什么用 SVG 不用 clip-path」写在 index.html 那枚 <svg> 上面，
|
||||
这里只管尺寸和层级。三件事都是踩过的坑，别简化：
|
||||
|
||||
⚠️ width:100% 不能省，也**不能**换成 left:0;right:0 那种写法。
|
||||
SVG 是**替换元素**：绝对定位下 width 若为 auto，用的是它的固有宽度
|
||||
（没写 width 属性的 SVG 固有宽度是 300px），right 会被直接忽略。
|
||||
结果是盖子缩成左上角一块 300px 宽的三角，430px 的机器上右边空一截，
|
||||
而且**不报错**、jsdom 也量不出来 —— 只能靠这条 CSS 断言钉住。
|
||||
|
||||
⚠️ 高度用百分比，不能写死 px。这个头部约 212px 高
|
||||
（上内边距 34 + .hero-info 上外边距 20 + 文字块约 86
|
||||
+ #letterSeg 上外边距 18 + 标签条约 38 + 下内边距 16），
|
||||
72% ≈ 153px，尖端正好顶在 #letterSeg 的上沿。
|
||||
但刘海机上 env(safe-area-inset-top) 会再撑高约 47px，
|
||||
写死 153px 的话尖端就停在半空中、够不着那条封口了。
|
||||
|
||||
⚠️ 故意不写 z-index。.hero-info 和 #letterSeg 都是 z-index:2，
|
||||
文字和标签一直压在盖子上面。别顺手给它补一个 z-index：
|
||||
只要 ≥2 就会有一层半透明白蒙在标题上，白字压白纱，糊成一片。 */
|
||||
.env-flap{position:absolute;left:0;top:0;width:100%;height:72%;
|
||||
display:block;pointer-events:none}
|
||||
|
||||
.lgroup{margin-bottom:6px}
|
||||
.lgroup.hide{display:none}
|
||||
.lg-title{font-size:13px;font-weight:700;color:var(--muted);margin:16px 2px 10px}
|
||||
/* ============ 来信列表：一条 = 宝宝发来的一条消息 ============
|
||||
用户原话：「来信的那个列表的那个信纸的那个还是不要这种的，有点丑，
|
||||
给我更换成别的形式的。」上一版是信封信纸风（卡顶折口 + 左边一枚歪着贴的邮票 +
|
||||
摘要下面一条虚线横格）—— 三样装饰堆在一张 320 宽的小卡上，密度过头了，
|
||||
而且横格那条虚线横穿整卡，视觉上把每条卡又切成两半，一屏下来全是横线。
|
||||
这一版给了几个方案，用户选了**聊天气泡**：
|
||||
|
||||
[头像] ╭──────────────────╮
|
||||
│ 标题 [未读] │
|
||||
│ 摘要一行…… │
|
||||
│ 12月5日 · 孕24周 │
|
||||
╰──────────────────╯
|
||||
|
||||
为什么这个方向对：来信本来就是**宝宝在跟妈妈说话**，而下面 .lt-sub 里
|
||||
妈妈的回信、宝宝的再回复早就是气泡了（.lt-msg，从第二版起就是）。
|
||||
上一版等于一条会话里，第一句用信封画、后面几句用气泡画，两套语言。
|
||||
现在整条线索从上到下都是同一套。
|
||||
|
||||
⚠️ 装饰全撤了，但**信息一条没少**：
|
||||
邮票上的「12月 / 5」→ 挪进气泡底下的 .lt-meta（见 buildThread）
|
||||
折口、虚线横格 → 纯装饰，直接删
|
||||
改这块之前先确认要删的东西身上没挂着信息。 */
|
||||
.lthread{
|
||||
/* 三个尺寸放在 .lthread 上而不是 .lt-item 上，是因为下面 .lt-sub 也要读
|
||||
（回信气泡要和上面这条来信气泡左对齐，见 --sub-in）。
|
||||
.lt-sub 是 .lt-item 的**兄弟**，声明在 .lt-item 上它够不着。 */
|
||||
--ava:38px; /* 头像直径 */
|
||||
--gap:10px; /* 头像到气泡的间距 */
|
||||
--tail:6px; /* 气泡左上那个小尖角的长度 */
|
||||
/* 回信那串要缩进多少，才能和上面来信气泡的左缘对齐：
|
||||
竖虚线左缘在 --ava/2 − 1px 处（2px 宽，正好压在头像中线上）
|
||||
来信气泡左缘在 --ava + --gap 处
|
||||
两者之差 = --ava/2 + --gap − 1px = 19 + 10 − 1 = 28px
|
||||
⚠️ 别把它写死成 28px。头像一改，回信就整体错位，而且是那种
|
||||
「看着好像本来就这样」的错位，没人会发现。 */
|
||||
--sub-in:calc(var(--ava)/2 + var(--gap) - 1px);
|
||||
margin-bottom:12px}
|
||||
.lthread.hide{display:none}
|
||||
/* ⚠️ --bub 只能声明在 .lt-item 上，不能往上提到 .lthread：
|
||||
未读是 .lt-item.is-unread，只有声明在同一个元素上，那条覆盖才生效。
|
||||
而 .lt-item::before（尖角）和 .lt-body（气泡）都是它的后代，继承得到。
|
||||
⚠️ 本批把气泡从纯色改成渐变（用户要的「底纹」），于是变成**一对** ——
|
||||
--bub 是起点、--bub-2 是终点。这两个名字不能拆开理解：
|
||||
左上那个尖角（.lt-item::before）是 border 拼出来的三角，
|
||||
**只吃得下一种纯色**，它取的是 --bub。所以 --bub 必须始终是
|
||||
渐变里**贴着尖角那一头**的颜色（尖角在 top:11px 的左缘 ≈ 160deg 的起点）。
|
||||
要是哪天把渐变角度翻过来、或者只改 --bub 不改 --bub-2，
|
||||
屏幕上就会出现一个和气泡不同色的尖角 —— 看着像渲染坏了。 */
|
||||
.lt-item{
|
||||
--bub:#fff;
|
||||
--bub-2:#FFF6F0;
|
||||
position:relative; /* 尖角 ::before 靠它定位 */
|
||||
display:flex;gap:var(--gap);width:100%;
|
||||
/* ⚠️ flex-start，不是 center。气泡是变高的（标题可能换行、meta 可能多两段），
|
||||
center 会让头像跟着往下飘；聊天列表里头像永远咬在第一行。 */
|
||||
align-items:flex-start;
|
||||
/* 这一行本身**是透明的**：没有背景、没有内边距、没有投影。
|
||||
卡的那层壳整个搬进了 .lt-body。 */
|
||||
background:none;padding:0}
|
||||
.lt-item.hide{display:none}
|
||||
/* 气泡左上那个小尖角，指向头像。
|
||||
⚠️ 它画在 .lt-item 上而不是 .lt-body 上，这一条不能挪：
|
||||
.lt-body 带 .ripple → overflow:hidden，画在它身上的尖角会被自己裁掉，
|
||||
一个像素都露不出来。而 .lt-item 这一版正好把 .ripple 让了出来（见 buildThread），
|
||||
伪元素没人抢。
|
||||
⚠️ 三角形用 border 拼：宽高都是 0，只有右边框有颜色，于是右边框那块
|
||||
梯形塌成一个尖朝左的三角。颜色取 var(--bub)，未读那条自动跟着变。
|
||||
⚠️ left 算出来是 38+10−6 = 42px，尖端 42、底边 48 —— 底边正好贴着气泡左缘。
|
||||
**刻意不重叠**：.lt-body 是定位元素（.ripple 给的 position:relative），
|
||||
在同一个层叠上下文里画得比 ::before 晚，真重叠了是气泡盖住尖角。 */
|
||||
.lt-item::before{
|
||||
content:"";position:absolute;left:calc(var(--ava) + var(--gap) - var(--tail));
|
||||
top:11px;width:0;height:0;pointer-events:none;
|
||||
border:var(--tail) solid transparent;border-left:0;border-right-color:var(--bub)}
|
||||
|
||||
/* 左边那颗：宝宝的头像。
|
||||
⚠️ 里面原来是 js 的 babyFace() 画的一张 SVG 小脸，本批换成了一个「宝」字
|
||||
（或用户自己选的照片）。理由见 app.js 的 babyAvatarInner()。
|
||||
⚠️ 它现在是个 <button>（点一下换头像），不再是 <span>。
|
||||
全局 button 重置里有 text-align:left，这颗圆盘里的字必须居中 ——
|
||||
下面的 justify-content:center 管的是 flex 主轴，够了；
|
||||
但 padding 得显式清 0，UA 默认给 button 的内边距会把 38px 的圆挤变形。
|
||||
⚠️ flex:0 0 var(--ava) 里的 0 0 是不可省的：不写收缩因子，标题一长
|
||||
弹性布局就先去压这颗圆头像，圆会被压成椭圆 —— 而且是渐变的椭圆，很难看。 */
|
||||
.lt-ava{
|
||||
flex:0 0 var(--ava);height:var(--ava);border-radius:50%;padding:0;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
background:linear-gradient(155deg,#FFE6D6,#FFC9B2);
|
||||
color:#B75B38;
|
||||
/* overflow:hidden 是给自定义头像那张 <img> 用的：图是方的，
|
||||
靠这一层把它裁成圆。写在容器上而不是图上，是因为占位的「宝」字
|
||||
也该被同一个圆约束（字号一旦被改大，不至于溢出圆盘）。 */
|
||||
overflow:hidden;
|
||||
box-shadow:0 2px 5px rgba(198,104,78,.16);
|
||||
transition:transform .16s var(--ease)}
|
||||
/* 点下去缩一下。这颗圆是这一行里唯一没有涟漪的可点区域
|
||||
（涟漪归气泡，见上面 .lt-body），不给点按反馈的话，
|
||||
用户点了它、系统相册又要一会儿才弹出来，中间那段会以为没点上。 */
|
||||
.lt-ava:active{transform:scale(.9)}
|
||||
/* 占位的「宝」字。字号 17 是配 38px 圆盘量出来的：再大就顶到圆边，
|
||||
再小在满屏文字里显不出「这是个头像」。
|
||||
⚠️ line-height:1 不能省 —— 中文字体的默认行高会把字压得偏下半个像素，
|
||||
在圆盘里非常明显（看着像没对齐）。 */
|
||||
.lt-ava-txt{font-size:17px;font-weight:800;line-height:1;letter-spacing:0}
|
||||
/* 用户自己选的照片。object-fit:cover 而不是 contain：
|
||||
contain 会在圆盘里留出上下两条底色边，看着像图没加载完。 */
|
||||
.lt-ava-img{width:100%;height:100%;object-fit:cover;display:block}
|
||||
|
||||
/* 刚寄出的回信高亮两秒，让妈妈看清它落到列表哪一条了。
|
||||
⚠️ 这里原先还有一条 .lt-item.just-added（同一段动画）。全项目只有 .lthread
|
||||
会被加上 just-added（app.js 里那一处），.lt-item 上一次都没加过 ——
|
||||
和之前清掉的 .lt-week.reply 是同一类死规则。删了。 */
|
||||
.lthread.just-added{animation:justAdded 2.2s var(--ease)}
|
||||
@keyframes justAdded{
|
||||
/* ⚠️ 这圈光晕是「妈妈刚寄出的回信」的高亮，颜色必须跟着 --mom 走。
|
||||
本批把妈妈从蓝换成绿，这两行原来是 rgba(77,138,199,…)（旧蓝 #4D8AC7），
|
||||
漏改的话：气泡是绿的、闪的那圈是蓝的，只闪 2.2 秒，肉眼基本撞不上。
|
||||
值是 --mom #3F7551 的 rgb。
|
||||
⚠️ 这里只能手抄 rgb：keyframes 要的是带透明度的 rgba()，
|
||||
CSS 没法从 #3F7551 现算出 63,117,81，var(--mom) 塞不进去。
|
||||
所以 --mom 改值时**必须连这两行一起改**。
|
||||
smoke 两头都钉着：反向扫「旧蓝 77,138,199 不许剩」+
|
||||
正向钉「这两帧是 63,117,81」，改漏了会红。 */
|
||||
0%{transform:scale(.96);box-shadow:0 0 0 0 rgba(63,117,81,.45)}
|
||||
22%{transform:none;box-shadow:0 0 0 4px rgba(63,117,81,.28)}
|
||||
100%{transform:none;box-shadow:var(--sh)}
|
||||
}
|
||||
/* 气泡本体。.ripple 从 .lt-item 挪到了这里（理由见 buildThread 里那段），
|
||||
顺带把 position:relative 和 overflow:hidden 都带了过来 ——
|
||||
overflow:hidden 正好让涟漪跟着下面这个圆角走，不用另外裁。
|
||||
⚠️ 圆角写成 6/16/16/16：左上那个角**特意收小**，因为尖角就顶在那儿，
|
||||
左上要是也 16px，尖角底边就悬在圆弧外面，看着像根断了的刺。 */
|
||||
.lt-body{
|
||||
flex:1;min-width:0;
|
||||
background:linear-gradient(160deg,var(--bub) 0%,var(--bub-2) 100%);
|
||||
border-radius:6px 16px 16px 16px;
|
||||
padding:12px 13px;box-shadow:var(--sh)}
|
||||
/* ⚠️ .lt-h 是弹性行，标题右边还并排着一枚「未读」标签。
|
||||
在此之前 h4 **一条截断规则都没有**：标题短的时候看不出来，
|
||||
可一旦加长（这一版给两条标题加了「妈妈，」三个字），弹性项默认
|
||||
min-width:auto 会撑到内容全宽，把右边那枚标签直接顶出卡外 ——
|
||||
不是省略号，是标签整个消失。所以 .lt-h 和 h4 两处都要 min-width:0。
|
||||
量过的账（320 屏，改成气泡之后重算过一遍）：
|
||||
320 − 36（页边 18×2）− 38（头像）− 10（间距）− 26（气泡内边距 13×2）= 210px
|
||||
比上一版信封卡的 202px **宽了 8px** —— 头像比那枚 42px 的邮票窄，
|
||||
气泡内边距也比卡的 14px 小一点。所以上一版排得下的标题，这一版一定还排得下，
|
||||
不用回头重算 LETTERS 里那几条。
|
||||
⚠️ 上一句「最挤的一条是带『1 条新回复』≈65px，只剩 ~137px」是**上一版的账**，
|
||||
那枚汇总标签本批已经删掉了（见 app.js buildThread 里的说明）。
|
||||
现在标题右边最多只并排一枚「未读」≈ 2 字 × 10.5 + 内边 14 = 35px，
|
||||
加 8px 间距，标题可用 210 − 43 = **167px**，比之前松了 30px。
|
||||
别再照抄那个 137 —— 它只会让人以为标题行还紧，去砍不该砍的东西。 */
|
||||
.lt-h{display:flex;align-items:center;gap:8px;min-width:0}
|
||||
.lt-h h4{font-size:16px;font-weight:800;
|
||||
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
/* ⚠️ 这里原来还有一条 .lt-h h4.blue{color:var(--mom)}，本批**删掉了**。
|
||||
它是条死规则 —— 全项目搜遍，没有任何地方给列表里的 h4 加过 blue 这个 class
|
||||
（js/app.js 里连 'blue' 这个字符串都不存在）。
|
||||
留着它的坏处不是多几个字节，是**误导**：我自己这批就被它骗过一次，
|
||||
看见它就以为「列表里还有一类标题是绿色的（妈妈发的信）」，
|
||||
差点照着这个不存在的分支去做样式。实际上列表顶层每条都是宝宝写来的信，
|
||||
妈妈的回信是缩进挂在下面的 .lt-msg.mom 子气泡，那些**没有 h4 标题**。
|
||||
要给妈妈的条目做标题色，得先真的有那种条目，别再凭这条规则脑补。 */
|
||||
|
||||
/* ---- 标题下的手绘波浪线 ----
|
||||
和详情页大标题下那条 .dl-wave 是同一条 path、同一个颜色，成对出现：
|
||||
列表里看到的波浪线，点进去在详情页大标题下会再看到一条，视觉上接得上。
|
||||
⚠️ 只会长在宝宝的信上，而且**不是靠判断实现的，是靠结构**：
|
||||
波浪线跟着 .lt-h（标题行）走，而标题行只有顶层的宝宝来信才有。
|
||||
妈妈的回信是 .lt-sub 里的 .lt-msg.mom，压根没有 .lt-h。
|
||||
所以 js 里不需要任何 who === 'baby' 的分支 —— 别去加，加了是死代码。
|
||||
⚠️ 宽度 58px，比详情页那条（96px）短得多，是因为容器差着一倍多：
|
||||
详情页大标题是整屏宽，列表气泡 .lt-body 扣掉头像和内边距只剩 ~200px。
|
||||
照搬 96px 会占掉气泡近一半宽，喧宾夺主。
|
||||
⚠️ height 必须单独锁死。svg 带 preserveAspectRatio="none"，
|
||||
宽度一变高度会跟着缩放，线会随之变粗变细 —— 和 .dl-wave 那边同一个理由。 */
|
||||
.lt-wave{display:block;width:58px;height:6px;margin:5px 0 1px}
|
||||
/* ---- 未读 ----
|
||||
原来只有一颗 8px 圆点挂在标题右端。「全部」这一页是一屏白卡往下堆，
|
||||
那颗点又小又没字，卡本身还和已读的长得一模一样，从上往下扫就漏了。
|
||||
现在三件事一起说：整卡换暖底 + 左边一道竖条 + 一枚写着「未读」的标签。
|
||||
⚠️ 类名仍叫 .dot-unread（buildThread 里那处同名），它已经不是「点」了；
|
||||
改名得同时动 JS、CSS、smoke 三处，收益不抵风险，先留着。 */
|
||||
.dot-unread{
|
||||
margin-left:auto;flex:0 0 auto;
|
||||
background:var(--brand);color:#fff;
|
||||
font-size:10.5px;font-weight:800;line-height:1.55;
|
||||
padding:2px 7px;border-radius:8px;
|
||||
}
|
||||
/* ---- 未读 ----
|
||||
上一版是「暖底 + 左边一道 inset 竖条 + 标签」三件事。这一版竖条**去掉了**：
|
||||
气泡左缘上有个尖角顶着，一道 3.5px 的实心竖条压过去，尖角看起来就像
|
||||
从竖条上长出来的一根刺。改用聊天里更自然的两样 ——
|
||||
1. 气泡换更饱和的底色（--bub，尖角吃同一个变量，自动跟着变）
|
||||
2. 头像加一圈品牌色的环
|
||||
加上标题行那枚写着「未读」的标签，仍是三个信号，只是换了两个载体。
|
||||
|
||||
⚠️ #FFE7D8 比上一版的 #FFF2EA 深了一档，这是**可以**深的：
|
||||
上一版卡住不能再深的原因是左边那枚邮票（#FDECE6）会和卡底融掉，
|
||||
而邮票这一版已经不存在了。现在这块底色只需要跟正文
|
||||
var(--ink-2) 和标签的 var(--brand) 拉开对比，两者都还很富余。 */
|
||||
/* ⚠️ 未读也必须**成对**覆盖：只改 --bub 不改 --bub-2，未读气泡会从
|
||||
#FFE7D8 渐到已读那头的 #FFF6F0，越往下越像已读，等于把信号做没了。 */
|
||||
.lt-item.is-unread{--bub:#FFE7D8;--bub-2:#FFDCC8}
|
||||
/* ⚠️ 第二段那层是 .lt-ava 原本的投影，必须写进同一条 box-shadow ——
|
||||
box-shadow 是整条覆盖的，只写环会把投影顶掉，未读那颗头像反而比已读的还平。
|
||||
环写在扩散位（第三个 0 后面那个 2.5px），画在圆外面，不吃头像本身的尺寸。 */
|
||||
.lt-item.is-unread .lt-ava{
|
||||
box-shadow:0 0 0 2.5px rgba(244,89,60,.45),0 2px 5px rgba(198,104,78,.16)}
|
||||
/* 标题刻意**不**染成品牌色：气泡底色 + 头像环 + 标签三样已经说清楚了，
|
||||
再把标题标红，整条就从「有封新信」变成「出事了」，而且标题更难读。 */
|
||||
|
||||
/* 来信摘要只留一行，收尾的六点省略号由 clampLine() 补，理由见 .lm-txt 那段。
|
||||
⚠️ 这里原先还有 padding-bottom:7px + border-bottom:1px dashed —— 那是上一版
|
||||
模仿信纸横格画的一条虚线。用户点名说这套「有点丑」，而它正是最扎眼的一样：
|
||||
一条虚线横穿整卡、每卡一条，一屏扫下来全是横线。删掉，摘要和 .lt-meta
|
||||
之间靠 margin 分开就够了（气泡里本来就不需要再切一刀）。
|
||||
下边距顺势从 7 收回 6，和上边距对称。 */
|
||||
.lt-body p{font-size:13px;color:var(--ink-2);line-height:1.65;margin:6px 0;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.lt-meta{font-size:11.5px;color:var(--muted)}
|
||||
.star-txt{color:#E3A11B}
|
||||
.empty-tip{display:none;text-align:center;color:var(--muted);font-size:13.5px;padding:50px 0}
|
||||
.empty-tip.show{display:block}
|
||||
|
||||
/* ============ 会话式来信 ============
|
||||
一封来信 = 一个 .lthread：上面是宝宝的信（.lt-item），
|
||||
下面用一根虚线挂着妈妈的回信和宝宝的再回复（.lt-sub > .lt-msg）。
|
||||
这样「这条回信是回给哪封信的」在列表里就是自明的，不再另开一页。
|
||||
（.lthread 本体和它的三个尺寸变量声明在上面来信列表那段开头。）
|
||||
|
||||
⚠️ 上一版这里还有一条 .lthread.has-sub .lt-item{border-bottom-*-radius:9px}，
|
||||
作用是把主卡下缘收平、和下面那串连成一条。这一版删了：主卡已经不是
|
||||
通栏的卡，而是一颗右侧的气泡，而下面那根竖虚线是从**头像**底下垂下来的，
|
||||
两者根本不在一条竖线上 —— 收平气泡的下缘不会连上任何东西，
|
||||
只会让气泡少一个角，看着像没画完。 */
|
||||
.lt-sub{
|
||||
/* 竖虚线压在头像中线上：线宽 2px，左缘放在 --ava/2 − 1，中心正好是 --ava/2。
|
||||
于是「宝宝说了一句 → 底下挂着这轮对话」在视觉上是从这颗头像里长出来的。 */
|
||||
margin-left:calc(var(--ava)/2 - 1px);
|
||||
/* 缩进到和上面那只来信气泡的左缘齐平，推导见 .lthread 里 --sub-in 那段 */
|
||||
padding-left:var(--sub-in);
|
||||
border-left:2px dashed #EBDCD2}
|
||||
.lt-msg{
|
||||
display:block;width:100%;text-align:left;position:relative;
|
||||
border-radius:14px;padding:11px 13px;margin-top:8px;box-shadow:var(--sh);
|
||||
}
|
||||
/* 短横线把气泡接到左边那根虚线上。
|
||||
⚠️ 这两个值必须跟着 --sub-in 走，不能写死：left 正好回退整段缩进（贴到竖线上），
|
||||
宽度再短 2px，让横线在离气泡 2px 处收住 —— 顶死在气泡边上反而糊成一团。 */
|
||||
.lt-msg::before{content:"";position:absolute;
|
||||
left:calc(var(--sub-in) * -1);top:19px;
|
||||
width:calc(var(--sub-in) - 2px);height:2px;background:#EBDCD2}
|
||||
/* 回信气泡的底：本批从两块纯色换成渐变（用户要的那点「底纹」），
|
||||
妈妈那边同时从浅蓝改成浅绿。四个色标都在 :root，改之前先读那段。
|
||||
⚠️ 160deg 不是随手写的：它让浅的一头落在气泡**顶部**，
|
||||
而 .lm-who（妈妈绿 / 宝宝品牌橘）那行小字正好在顶部。
|
||||
改成 20deg 之类把深头翻上来，宝宝那行橘字会从 3.15 掉到 2.9。 */
|
||||
.lt-msg.mom{background:linear-gradient(160deg,var(--mom-bg-1) 0%,var(--mom-bg-2) 100%)}
|
||||
.lt-msg.baby{background:linear-gradient(160deg,var(--baby-bg-1) 0%,var(--baby-bg-2) 100%)}
|
||||
.lt-msg.is-new{box-shadow:0 0 0 2px rgba(244,89,60,.34),var(--sh)}
|
||||
.lm-who{font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:6px}
|
||||
.lt-msg.mom .lm-who{color:var(--mom)}
|
||||
.lt-msg.baby .lm-who{color:var(--brand)}
|
||||
.lm-when{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
|
||||
/* 妈妈的回信 / 宝宝的再回复：只留一行。
|
||||
⚠️ 不能再用 -webkit-line-clamp —— 它打的点是浏览器自己画的三点「…」，
|
||||
CSS 改不了那个字符（text-overflow 的自定义字符串值只有 Firefox 支持，
|
||||
webview 上一律不认）。要六点「……」只能自己截，见 js 里的 clampLine()。
|
||||
这里只负责「压成一行、超出就裁」。text-overflow 留着当兜底：
|
||||
万一量不到宽度（元素还没布局），至少是三点省略号，不会半个字硬断在边上。 */
|
||||
.lm-txt{font-size:13px;color:var(--ink-2);line-height:1.66;margin-top:5px;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
/* 「新回复」角标 —— 需求里的「小红点/新消息」提示 */
|
||||
.lt-new{background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:8px;line-height:1.55}
|
||||
/* 宝宝还在酝酿（回信要等 3~5 小时） */
|
||||
.lt-wait{font-size:11.5px;color:var(--muted);margin-top:9px;display:flex;align-items:center;gap:7px}
|
||||
.lt-wait::before{content:"";width:6px;height:6px;border-radius:50%;background:#D9C8BC;flex:0 0 auto;
|
||||
animation:newPulse 1.6s var(--ease) infinite}
|
||||
|
||||
.fab-write{
|
||||
position:absolute;right:18px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);z-index:55;
|
||||
background:var(--brand);color:#fff;font-size:15px;font-weight:700;
|
||||
padding:14px 22px;border-radius:26px;box-shadow:0 12px 26px rgba(244,89,60,.42);
|
||||
/* 图标 + 文字：和 .dl-btn.has-ico 同一套对齐 */
|
||||
display:flex;align-items:center;gap:7px;
|
||||
opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s var(--ease),visibility .3s var(--ease),transform .3s var(--ease);
|
||||
}
|
||||
.fab-write.show{opacity:1;visibility:visible;transform:none}
|
||||
/* 按钮里的线性图标：不参与 flex 收缩，否则文字长一点就把它压扁 */
|
||||
.btn-ico{flex:0 0 auto}
|
||||
|
||||
/* ============ 我的 ============ */
|
||||
.me-top{padding:calc(env(safe-area-inset-top) + 18px) 18px 26px;background:var(--grad);border-radius:0 0 32px 32px;color:#fff;position:relative;overflow:hidden}
|
||||
.me-top::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);top:-80px;right:-60px}
|
||||
@@ -1921,125 +1531,11 @@ a.skip:focus{left:16px;top:16px}
|
||||
.dt-star:active{transform:scale(1.3)}
|
||||
.detail-body{flex:1;overflow-y:auto;padding:22px 22px 40px}
|
||||
.detail-body::-webkit-scrollbar{display:none}
|
||||
/* ---- 一整封信（抬头 + 语音 + 正文，同一张卡）----
|
||||
整张卡就是一页白信纸：抬头和正文同底色、不分块。
|
||||
层次全靠字号阶梯（11.5 → 27 → 16）和留白拉开。
|
||||
在此之前试过「暖色抬头块 + 圆邮戳 + 齿孔撕口 + 大引号」，
|
||||
装饰太多，每一样都在跟正文抢注意力，全部撤掉了。 */
|
||||
.dl-letter{position:relative;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--sh-lg)}
|
||||
.dl-head{position:relative;padding:26px 24px 0}
|
||||
/* 抬头小字：孕周 · 日期。字距拉开当作「眉批」，和大标题形成疏密对比 */
|
||||
.dl-eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
|
||||
letter-spacing:1.1px;color:#B39C8E;margin:0}
|
||||
.dl-eyebrow i{width:3px;height:3px;border-radius:50%;background:#E2CDBE;flex:0 0 auto}
|
||||
/* 标题和正文一起用圆体，不然「小朋友的信」上下两截字形不搭。
|
||||
不再留右侧 padding —— 邮戳已经去掉，标题可以用满整行 */
|
||||
.dl-head h1{font-family:var(--font-round);font-size:27px;font-weight:800;line-height:1.34;
|
||||
margin:9px 0 0;letter-spacing:0;color:#33261F}
|
||||
/* 手绘波浪线：宽度按内容给个定值，preserveAspectRatio:none 会横向拉伸，
|
||||
所以高度单独锁死，免得线随宽度变粗 */
|
||||
.dl-wave{display:block;width:96px;height:9px;margin-top:11px}
|
||||
/* 语音条紧跟标题。信纸是纯白的，语音条得有个淡暖底才浮得起来 */
|
||||
.dl-head .voice-card{margin-top:18px;background:#FDF5F0;
|
||||
box-shadow:0 6px 16px rgba(178,122,98,.1)}
|
||||
|
||||
/* ---- 信纸正文 ----
|
||||
字号 17.5 → 16、行高 2.05 → 28px，都是往回收：原来一屏放不下几行，
|
||||
读起来一直在滚。 */
|
||||
.dl-body{position:relative;padding:20px 24px 26px}
|
||||
/* 极淡的横格纹。关键是把它画在每个 <p> 自己身上而不是整块 .dl-text 上：
|
||||
段间距（14px）不是行高的整数倍，画在外层的话，第二段起格线就和字错位了。
|
||||
逐段绘制，每段的格线都从自己的第一行重新起算，永远对得上。
|
||||
27→28px 那 1px 就是格线，压在每行文字的下缘。 */
|
||||
.dl-text p{position:relative;font-family:var(--font-kid);font-size:16px;line-height:28px;
|
||||
letter-spacing:.4px;color:#3A312C;margin:0 0 14px;
|
||||
background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#F4ECE4 27px,#F4ECE4 28px)}
|
||||
.dl-text p:last-child{margin-bottom:0}
|
||||
/* 落款靠右，走暖棕色的墨水调 —— 不用品牌红，免得像个可点的按钮。
|
||||
原来名字上面有条横杠、下面还坠一行孕周，两样都删了：
|
||||
孕周在页首的眉批里已经写过一次，落款只留一句话最像手写签名。 */
|
||||
.dl-sign{position:relative;margin-top:22px;display:flex;justify-content:flex-end}
|
||||
.ds-name{font-family:var(--font-kid);font-size:17px;font-weight:800;color:#7A6154;letter-spacing:.4px}
|
||||
/* 每个字单独一个小方块，带一点点随机的旋转和上下错位 ——
|
||||
没装翩翩体的机器（安卓 / Windows）也能有「小朋友写的」那种歪扭劲。
|
||||
标点由 kidText() 黏在前一个字里，所以不会出现「。」跑到行首。 */
|
||||
.kc{display:inline-block}
|
||||
|
||||
/* ---- 详情页里这封信下面的往来 ---- */
|
||||
.dl-thread:not(:empty){margin-top:28px}
|
||||
.dl-sec{font-size:13px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:9px;margin-bottom:13px}
|
||||
.dl-sec::after{content:"";flex:1;height:1px;background:var(--line)}
|
||||
/* 左侧一道竖色条，一眼分得清是妈妈写的还是宝宝回的 */
|
||||
.dl-msg{position:relative;border-radius:18px;padding:14px 15px 14px 18px;margin-bottom:11px;overflow:hidden}
|
||||
.dl-msg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
|
||||
/* ⚠️ 这两条底色必须和列表页的 .lt-msg.mom/.baby **同源**（同一组 :root 变量）。
|
||||
同一条回信在列表里是一块底、点进详情又是另一块底，是那种
|
||||
「说不出哪儿别扭」的不一致。以前是两处硬编码 #EFF5FC/#FFF4EF 各写一遍，
|
||||
本批一起换成变量，以后改一处就够。 */
|
||||
.dl-msg.mom{background:linear-gradient(160deg,var(--mom-bg-1) 0%,var(--mom-bg-2) 100%)}
|
||||
.dl-msg.mom::before{background:var(--mom)}
|
||||
.dl-msg.baby{background:linear-gradient(160deg,var(--baby-bg-1) 0%,var(--baby-bg-2) 100%)}
|
||||
.dl-msg.baby::before{background:#E8A98F}
|
||||
.dm-who{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:8px}
|
||||
.dl-msg.mom .dm-who{color:var(--mom)}
|
||||
.dl-msg.baby .dm-who{color:var(--brand)}
|
||||
.dm-when{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
|
||||
/* white-space:pre-wrap 保住妈妈手写回信里的换行 */
|
||||
.dm-txt{font-family:var(--font-round);font-size:15px;line-height:1.92;color:#3A312C;margin-top:8px;white-space:pre-wrap}
|
||||
/* 只有宝宝的回复用卡通手写体，妈妈那条保持圆体 —— 两边字形不一样，
|
||||
谁在说话不用看标签也认得出来 */
|
||||
.dl-msg.baby .dm-txt{font-family:var(--font-kid);font-size:16px;line-height:2}
|
||||
.dl-wait{font-size:12.5px;color:var(--muted);background:#F7F0EA;border-radius:16px;padding:13px 15px;line-height:1.75}
|
||||
|
||||
/* ---- 「肚子里的声音」----
|
||||
宝宝偶尔发的语音不是宝宝在说话，而是它在羊水里听到的世界：
|
||||
水声、心跳、外面爸爸妈妈的说话声。声音由 WebAudio 实时合成，
|
||||
所以单文件产物里不需要任何音频资源。 */
|
||||
.voice-card{background:linear-gradient(135deg,#FFF2EB,#FBE3D8);border-radius:20px;padding:16px;margin-top:24px}
|
||||
.vc-lead{font-size:13.5px;color:var(--ink-2);line-height:1.75}
|
||||
.vc-row{display:flex;align-items:center;gap:13px;margin-top:13px}
|
||||
.vc-play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;
|
||||
font-size:14px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(244,89,60,.34);transition:transform .16s}
|
||||
.vc-play:active{transform:scale(.93)}
|
||||
.vc-wave{flex:1;display:flex;align-items:center;gap:3px;height:30px}
|
||||
.vc-wave i{flex:1;background:rgba(244,89,60,.4);border-radius:2px;height:24%}
|
||||
.voice-card.playing .vc-wave i{animation:vcWave 1.15s var(--ease) infinite}
|
||||
.vc-wave i:nth-child(2n){animation-delay:.16s}
|
||||
.vc-wave i:nth-child(3n){animation-delay:.33s}
|
||||
.vc-wave i:nth-child(5n){animation-delay:.52s}
|
||||
@keyframes vcWave{0%,100%{height:24%}50%{height:100%}}
|
||||
.vc-note{font-size:11.5px;color:var(--muted);margin-top:11px;line-height:1.65}
|
||||
|
||||
.dl-actions{display:flex;gap:11px;margin-top:26px}
|
||||
.dl-btn{flex:1;text-align:center;padding:15px;border-radius:22px;font-size:15.5px;font-weight:700;transition:transform .16s}
|
||||
.dl-btn:active{transform:scale(.96)}
|
||||
/* 带图标的按钮转成 flex（.dl-btn 默认靠 text-align:center 居中，塞进 svg 后对不齐）。
|
||||
用显式的 .has-ico 而不是 :has(.btn-ico)，是为了不挑 webview 版本 */
|
||||
.dl-btn.has-ico{display:flex;align-items:center;justify-content:center;gap:7px}
|
||||
.dl-btn.ghost{background:#fff;color:var(--ink-2);box-shadow:var(--sh)}
|
||||
.dl-btn.main{background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(244,89,60,.34)}
|
||||
|
||||
/* 「生成图片」这颗。以前是只有图标的 52×52 方钮，现在带上了四个字。
|
||||
ico-txt = 不参与均分，宽度由内容自己撑（flex:0 0 auto），把剩下的全让给回信。
|
||||
为什么不让两颗平分：这两颗的分量不一样，回信是主操作，
|
||||
平分会让「生成图片」看起来和它一样重要。
|
||||
|
||||
320 屏上的宽度账（.detail-body 内宽 276，两颗之间 11）：
|
||||
#dlCard = padding 13×2 + 图标 17 + gap 7 + 「生成图片」4 字 ×15.5 ≈ 112
|
||||
#dlReply = padding 15×2 + 图标 17 + gap 7 + 「给小汤圆回信」6 字 ×15.5 ≈ 147
|
||||
112 + 147 + 11 = 270，富余 6px。
|
||||
padding 从 15 收到 13 就是为了这 6px —— 按 15 算总宽 274，只剩 2px，
|
||||
字体渲染差一点点就会挤到换行。
|
||||
⚠️ 富余量是留给默认小名的。小名用户能自己填，超了由下面 #dlReplyTxt 兜。 */
|
||||
.dl-btn.ico-txt{flex:0 0 auto;padding-left:13px;padding-right:13px;white-space:nowrap}
|
||||
/* 小名是用户自己填的，长度没有上限。
|
||||
min-width:0 让 flex 项允许被压缩，文字层自己省略号截断，
|
||||
否则按钮会被文字撑破、整排换行。
|
||||
⚠️ 这里只能用 CSS 的三点省略号，不是站内统一的六点 —— 见 clampLine() 那段注释，
|
||||
text-overflow 的自定义字符串只有 Firefox 认。按钮里的字短，退一步可以接受。 */
|
||||
#dlReply{flex:1;min-width:0}
|
||||
#dlReplyTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
/* 内容换成 SVG 之后要用 grid 居中，否则图标会贴着基线偏下 */
|
||||
.dt-plain{margin-left:auto;line-height:1;color:var(--ink-2);width:30px;height:30px;display:grid;place-items:center}
|
||||
.dt-plain:active{opacity:.5}
|
||||
.d-sec{display:flex;align-items:center;font-size:16.5px;font-weight:800;color:var(--ink);margin:26px 0 13px}
|
||||
@@ -2462,9 +1958,9 @@ a.skip:focus{left:16px;top:16px}
|
||||
.sheet-open 由 openSheet/closeSheet 和 .sheet 的 .show 成对切（js/app.js）。 */
|
||||
.phone.sheet-open .tabbar .fab{transform:rotate(135deg)}
|
||||
|
||||
/* ============ 通用弹窗（回信 / 孕期信息） ============
|
||||
/* ============ 通用弹窗（往期小结 / 企业微信 / 我的资料） ============
|
||||
z-index 要高于 detail(80)、search(85)、scrim(90)、sheet(95)，
|
||||
因为「给宝宝回信」是在来信详情页(detail)之上再叠一层输入框 */
|
||||
弹窗要能盖在这些层之上。 */
|
||||
.modal-scrim{
|
||||
position:absolute;inset:0;z-index:120;background:rgba(50,30,22,.46);backdrop-filter:blur(3px);
|
||||
opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
|
||||
@@ -2514,16 +2010,12 @@ a.skip:focus{left:16px;top:16px}
|
||||
|
||||
|
||||
/* 输入框：必须显式给 font-family，否则 textarea/input 会退回成系统等宽字体 */
|
||||
.modal-ta,.fld input{
|
||||
.fld input{
|
||||
font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
|
||||
border:1.5px solid #EBE1D9;border-radius:16px;width:100%;
|
||||
transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;
|
||||
}
|
||||
.modal-ta:focus,.fld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,89,60,.12)}
|
||||
.modal-ta{margin-top:14px;padding:14px 15px;line-height:1.75;resize:none;min-height:132px}
|
||||
.modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
||||
.mtag{font-size:12.5px;font-weight:600;color:#A5683F;background:#F6EADF;border-radius:14px;padding:7px 12px;transition:transform .16s}
|
||||
.mtag:active{transform:scale(.94)}
|
||||
.fld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,89,60,.12)}
|
||||
.fld{display:block;margin-top:14px}
|
||||
.fld>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
|
||||
.fld input{padding:13px 15px;min-height:50px} /* 统一输入框高度：iOS 的 date 控件原生偏矮，与文本框对齐 */
|
||||
@@ -2542,8 +2034,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
.pick:active{transform:scale(.96)}
|
||||
.pick.is-active{color:var(--brand);background:#FDECE7;box-shadow:inset 0 0 0 1.8px var(--brand)}
|
||||
.modal-foot{display:flex;align-items:center;gap:10px;margin-top:20px}
|
||||
.modal-count{font-size:12.5px;color:var(--ink-2);flex:0 0 auto;margin-right:2px}
|
||||
.modal-count b{color:var(--ink);font-weight:700}
|
||||
.modal-foot .dl-btn{padding:14px}
|
||||
|
||||
/* ---- 我的资料 · 换头像 ---- */
|
||||
@@ -2600,14 +2090,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
#appsGrid::-webkit-scrollbar-thumb{background:#E0CFC5;border-radius:2px}
|
||||
#appsGrid::-webkit-scrollbar-track{background:transparent}
|
||||
|
||||
/* 来信页空数据 · 未完善资料引导态（区别于普通"还没有内容"） */
|
||||
.empty-guide{padding:6px 0 2px}
|
||||
.empty-guide .eg-emoji{font-size:44px;line-height:1;margin-bottom:12px}
|
||||
.empty-guide .eg-t{font-size:15px;font-weight:700;color:var(--ink,#2B2320);margin-bottom:6px}
|
||||
.empty-guide .eg-s{font-size:12.5px;color:var(--muted,#A79C95);margin-bottom:18px;line-height:1.6}
|
||||
.empty-guide .eg-btn{display:inline-block;padding:11px 34px;border:none;border-radius:12px;background:#F4593C;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
|
||||
.empty-guide .eg-btn:active{transform:scale(.97)}
|
||||
|
||||
/* 预产期 date 输入的空值占位（原生 date 不支持 placeholder） */
|
||||
.fld-date .due-box{position:relative;display:block}
|
||||
/* 占位锚定输入框本身并垂直居中 —— 各内核 date 输入框高度不一，锚 label 底部会错位 */
|
||||
|
||||
Reference in New Issue
Block a user