jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(首页): 此刻减到三行（她们在做合成一句、删今天别忘了、动态压成一行小字）；婴儿房空隙恢复 v26100114 版式（用户澄清：要改的是此刻） (v26100117)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 09:10:01 +00:00
parent fcabec28dd
commit b83faa77c2
3 changed files with 62 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
mama-box.css
View File

@@ -564,29 +564,32 @@ a.skip:focus{left:16px;top:16px}
这一块**故意没有底色、没有圆角卡片**：它是页面上开的缝，里面是铺在整页背后的房间。
.nyp-layer 的 height / transform 由 JS 按 .screen 可视区每帧写入（见 app.js nurseryInit），这里别再给它写 top/transform。
::after = 上下模块压在房间上的阴影，要盖在图层之上、按钮之下。 */
.ny-peek{position:relative;margin:16px -26px 0;height:380px;overflow:hidden;background:#FFECD8}
.ny-peek{position:relative;margin:16px -26px 0;height:300px;overflow:hidden;background:#FFECD8}
.nyp-layer{position:absolute;left:0;top:0;width:100%;height:812px;will-change:transform;
display:flex;align-items:center;justify-content:center;background:#FFECD8}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-10px}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-64px}
.ny-peek::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
box-shadow:inset 0 16px 18px -14px rgba(120,70,50,.28),inset 0 -16px 18px -14px rgba(120,70,50,.28)}
/* 文字只有两行：大标题 + 一句短话。白色描边光晕保证压在房间上也读得清 */
.nyp-head{position:absolute;left:26px;top:22px;z-index:2;display:flex;flex-direction:column;gap:4px;
text-shadow:0 0 10px rgba(255,236,216,.95),0 0 3px rgba(255,236,216,.95)}
.nyp-head b{font-size:22px;font-weight:900;color:#5A3E37;letter-spacing:.5px}
.nyp-head span{font-size:14px;font-weight:700;color:#8A6C63}
.nyp-head em{font-style:normal;color:#E0708A;font-weight:900;font-size:16px}
.nyp-btn{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;
border:0;border-radius:999px;padding:12px 30px;font:inherit;font-size:16px;font-weight:900;letter-spacing:1px;color:#fff;
background:linear-gradient(135deg,#F48FA6,#E0708A);box-shadow:0 8px 20px rgba(224,112,138,.45);text-shadow:0 1px 2px rgba(160,50,80,.25);animation:nypBreath 2.8s ease-in-out infinite}
.nyp-btn:active{transform:translateX(-50%) scale(.96)}
@keyframes nypBreath{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
.nyp-chip{position:absolute;left:26px;top:16px;z-index:2;font-size:11px;font-weight:800;color:#E0708A;letter-spacing:.3px;
background:rgba(255,255,255,.86);border-radius:999px;padding:3px 10px;box-shadow:0 2px 8px rgba(224,112,138,.15)}
.nyp-bar{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;
padding:10px 10px 10px 14px;border-radius:18px;background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(160,90,90,.16)}
.nyp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nyp-txt b{font-size:15px;font-weight:900;color:#5A3E37;letter-spacing:.3px}
.nyp-txt span{font-size:11.5px;color:#8A6C63;line-height:1.4}
.nyp-txt span em{font-style:normal;color:#E0708A;font-weight:900}
.nyp-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:0;border-radius:999px;padding:8px 14px;font:inherit;
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.32);
animation:nypNudge 2.8s ease-in-out infinite}
.nyp-btn:active{transform:scale(.96)}
@keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}}
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #5A5890 */
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#5A5890}
.ny-peek.is-night .nyp-head{text-shadow:0 0 10px rgba(60,55,110,.95),0 0 3px rgba(60,55,110,.95)}
.ny-peek.is-night .nyp-head b{color:#FFF3F5}
.ny-peek.is-night .nyp-head span{color:#E6D6EA}
.ny-peek.is-night .nyp-head em{color:#FFB3C3}
.ny-peek.is-night .nyp-bar{background:rgba(58,47,79,.78)}
.ny-peek.is-night .nyp-txt b{color:#FFF3F5}
.ny-peek.is-night .nyp-txt span{color:#D9C5D0}
.ny-peek.is-night .nyp-txt span em{color:#FFB3C3}
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
/* ============ 孕期小知识（2026-09-30）============
@@ -2415,18 +2418,17 @@ a.skip:focus{left:16px;top:16px}
.pl-live i{position:relative;width:5px;height:5px;border-radius:50%;background:#fff}
.pl-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #fff;animation:plPing 1.6s ease-out infinite}
@keyframes plPing{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.pl-title{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.35}
.pl-title b{font-size:15px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
.pl-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.35}
.pl-title b{font-size:16px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
.pl-feed.hide{display:none}
.pl-feed{position:relative;margin-top:8px;height:40px;overflow:hidden;border-radius:12px;background:#fff;
.pl-feed{position:relative;margin-top:8px;height:26px;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.pl-track{will-change:transform}
.pl-track.is-move{transition:transform .55s var(--ease)}
.pl-row{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px}
.pl-row .pr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.pl-row .pr-who{font-size:10px;color:var(--muted)}
.pl-row .pr-do{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row{display:flex;align-items:center;gap:6px;height:26px;font-size:12px;white-space:nowrap}
.pl-row .pr-who{flex:0 0 auto;color:var(--muted)}
.pl-row .pr-do{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.pl-row .pr-do em{font-style:normal;color:var(--brand)}
/* =====================================================================
@@ -2647,36 +2649,21 @@ a.skip:focus{left:16px;top:16px}
/* 此刻 · 同孕周（A+B 改版，2026-10-01）：人物头像表现「人」，不用应用 logo，和上面工具卡（色块 + logo）拉开。 */
.pl-row .pr-ava,.pp-avs i{flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;background:#FFE3D3}
.pl-row .pr-ava{width:26px;height:26px}
.pl-row .pr-ava{width:18px;height:18px}
.pr-ava svg,.pp-avs svg{display:block;width:100%;height:100%}
.pp-avs{flex:0 0 auto;display:flex}
.pp-avs:empty{display:none}
.pp-avs i{width:22px;height:22px;margin-left:-7px;border:1.5px solid #FFF6F0}
.pp-avs i:first-child{margin-left:0}
.pp-doing.hide,.pl-todo.hide{display:none}
.pp-doing{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.pp-do{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.pp-doing.hide{display:none}
.pp-doing{display:flex;flex-direction:column;margin-top:10px}
.pp-do{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2)}
.pp-dt{flex:0 0 auto;white-space:nowrap}
.pp-dt b{font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.pp-bar{flex:1;min-width:24px;position:relative;height:5px;border-radius:99px;background:#F3E3DA;overflow:hidden}
.pp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#FFC2A8,#FF8A66);
transition:width 1.2s var(--ease)}
.pp-do.k-weight .pp-bar i{background:linear-gradient(90deg,#CBB9FF,#9F8CF0)}
.pp-me{flex:0 0 auto;font:inherit;font-size:11px;font-weight:700;border:0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.pp-dt b{font-size:15px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.pp-me{flex:0 0 auto;font:inherit;font-size:12px;font-weight:800;border:0;border-radius:999px;padding:4px 11px;white-space:nowrap}
.pp-me.todo{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C)}
.pp-me.todo:active{transform:scale(.95)}
.pp-me.ok{color:#4E8A43;background:#EAF5E6}
.pl-todo{display:flex;align-items:flex-start;gap:7px;margin-top:9px}
.tdo-h{flex:0 0 auto;font-size:11px;font-weight:800;color:#C2593F;line-height:22px}
.tdo-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.tdo-chip{display:inline-flex;align-items:center;gap:4px;border:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink);
background:#fff;border-radius:999px;padding:3px 8px 3px 4px;white-space:nowrap}
.tdo-chip:active{transform:scale(.95)}
.tdo-chip b{color:var(--brand)}
.tdo-chip i{font-style:normal;opacity:.4}
.tdo-ico{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#5B8FD6}
.tdo-ico svg{width:10px;height:10px}
.tdo-chip.hot .tdo-ico{background:linear-gradient(135deg,#FFB547,#FF7A5C)}
/* 孕期小知识 · 压缩版（2026-10-01：标题前带孕周；今日卡、7 天圆点、四张小卡都收紧，四卡改一行横滑） */
.pt-head{margin-bottom:8px;align-items:center}