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

婴儿房封面换写实版（3D 婴儿房 cover ?v=20261001g，1125 原尺寸 JPG）；底色 白天 #DCE5EC / 夜间 #2C3350，图左右下沿羽化防草地接缝，夜间玻璃条改深蓝 (v26100129)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 12:31:47 +00:00
parent f0428fea99
commit eb1c1b51f1
5 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
mama-box.css
View File

@@ -604,10 +604,13 @@ 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:340px;overflow:hidden;background:#FFECD8}
.ny-peek{position:relative;margin:16px -26px 0;height:340px;overflow:hidden;background:#DCE5EC}
.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}
display:flex;align-items:center;justify-content:center;background:#DCE5EC}
.nyp-layer img{display:block;width:88%;max-width:420px;height:auto;margin-top:-40px}
/* 写实版（2026-10-01g）底部是草地渐隐、不是纯色 → 图左右和下沿各羽化一截，免得草地在图边被齐刷刷切断、露出接缝 */
.nyp-layer img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 82%,transparent);
-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 82%,transparent);mask-composite:intersect}
.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;
@@ -624,9 +627,9 @@ a.skip:focus{left:16px;top:16px}
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-bar{background:rgba(58,47,79,.78)}
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #2C3350 */
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#2C3350}
.ny-peek.is-night .nyp-bar{background:rgba(30,36,60,.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}