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

style(首页): 婴儿房空隙减字放大——去掉小标签和毛玻璃横条，只留大标题+一句短话+居中大按钮，空隙加高到 380 (v26100115)

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

37
mama-box.css
View File

@@ -564,32 +564,29 @@ 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:300px;overflow:hidden;background:#FFECD8}
.ny-peek{position:relative;margin:16px -26px 0;height:380px;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:-64px}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-10px}
.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-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)}}
/* 文字只有两行：大标题 + 一句短话。白色描边光晕保证压在房间上也读得清 */
.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)}}
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #5A5890 */
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#5A5890}
.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}
.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}
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
/* ============ 孕期小知识（2026-09-30）============