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

feat(首页): 此刻卡换应用 logo / 树洞星夜版 / 孕期小知识带孕周并压缩 (v26100102)

Browse Source 
- 此刻：今日三项与动态的图标换成对应应用的 logo（取 App 表 logo，后台换即生效）；
  消消乐、盲盒用本站同风格 logo（assets/img/429ffcba0d6e.svg、b0087c3c012a.svg）
- 妈妈的树洞重做为星夜版：深夜天幕 + 剪影树 + 旋转发光的漩涡树洞；每条心事化成天上一颗星（位置按时间戳固定）；
  扔进去时字逐个被吸进漩涡、洞口爆亮、新星射上天空；整块比旧版更矮。心事仍只存本机，热线兜底不变
- 孕期小知识：标题改「孕 N 周 · 今日孕期小知识」，右侧「本周第 N 天」；今日卡与圆点收紧，四张小卡改一行横滑（点开看全文）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 02:10:13 +00:00
parent c414a7ff8f
commit 70c9786f15
5 changed files with 284 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
mama-box.css
View File

@@ -618,55 +618,95 @@ a.skip:focus{left:16px;top:16px}
.pt-grid.is-shown .pt-card:nth-child(4){transition-delay:.24s}
.pt-foot{margin-top:9px;font-size:11px;color:var(--muted);text-align:center}
/* ============ 妈妈的树洞（2026-09-30）============
浅薄荷→奶白的底，和上下暖色块拉开，读起来「安静」。右侧一棵 SVG 小树，
树干上的洞（#thHole）是纸团飞进去的落点。扔进去后：纸团飞入 → 洞口亮一下、树冠晃一下
→ 卡内出现「已收好」。不做任何回应文字（用户选定）。 */
.tree-hole{background-image:linear-gradient(160deg,#F1F8EE 0%,#FAFCF6 55%,#FFFDF9 100%)}
/* ============ 妈妈的树洞 · 星夜版（2026-10-01 重做）============
外层仍是统一的白块；里面一块深夜蓝小天幕 .th-night（高约 190px，比旧版矮）。
天幕层次（下→上）：渐变夜空 → 月亮光晕 → 星星（#thSky，每颗亮星 = 一条心事）→ 萤火虫 → 剪影树 + 漩涡树洞 → 输入条。
动效：星星各自眨眼；萤火虫游走；树冠轻晃；树洞漩涡一直慢转、光晕呼吸；
扔进去时字逐个被吸进漩涡（JS），洞口爆亮（.is-eat），新星从洞口射上天（JS）。 */
.th-head{display:flex;align-items:center;gap:8px}
.th-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.th-lock{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
color:#5E8A55;background:#E4F1DF;border-radius:999px;padding:3px 9px}
.th-stage{display:flex;align-items:flex-end;gap:6px;margin-top:6px}
.th-lead{flex:1;min-width:0;font-size:13px;line-height:1.7;color:#5C6B58;padding-bottom:10px}
.th-tree{flex:0 0 auto;width:104px;height:108px;overflow:visible}
.th-crown{transform-origin:60px 70px;animation:thSway 5s ease-in-out infinite}
@keyframes thSway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.th-lock{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
color:#6C6FA8;background:#EFEFFB;border-radius:999px;padding:3px 9px}
.th-night{position:relative;overflow:hidden;margin-top:10px;height:188px;border-radius:22px;isolation:isolate;
background:radial-gradient(120% 90% at 85% 100%,#4B3F7E 0%,rgba(75,63,126,0) 60%),
linear-gradient(170deg,#141632 0%,#1E2150 48%,#36306A 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 24px rgba(40,36,90,.22)}
.th-sky{position:absolute;inset:0;z-index:0}
.th-sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;
animation:thTw 3.2s ease-in-out infinite}
.th-sky i.me{width:5px;height:5px;background:#FFF1C9;opacity:1;
box-shadow:0 0 6px 2px rgba(255,214,140,.75),0 0 14px 4px rgba(255,190,120,.25)}
.th-sky i.me::before,.th-sky i.me::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,236,190,.7);
transform:translate(-50%,-50%);border-radius:2px}
.th-sky i.me::before{width:13px;height:1px}.th-sky i.me::after{width:1px;height:13px}
.th-sky i.me.is-new{animation:thBorn 1.4s var(--ease) both,thTw 3.2s 1.4s ease-in-out infinite}
@keyframes thTw{0%,100%{opacity:var(--o,.55);transform:scale(1)}50%{opacity:.15;transform:scale(.7)}}
@keyframes thBorn{0%{transform:scale(3.2);opacity:1;filter:brightness(2)}100%{transform:scale(1);filter:none}}
.th-moon{position:absolute;z-index:0;left:18px;top:14px;width:26px;height:26px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#FFF7DD,#F6DFA8);box-shadow:0 0 18px 6px rgba(255,226,160,.22)}
.th-moon::after{content:"";position:absolute;left:8px;top:-3px;width:24px;height:24px;border-radius:50%;background:#18193A}
.th-fly{position:absolute;z-index:1;width:4px;height:4px;border-radius:50%;background:#FFE7A0;
box-shadow:0 0 8px 3px rgba(255,220,120,.6);opacity:0;animation:thFly 7s ease-in-out infinite}
.th-fly.f1{left:52%;top:62%}.th-fly.f2{left:70%;top:40%;animation-delay:2.4s;animation-duration:8s}
.th-fly.f3{left:36%;top:46%;animation-delay:4.6s;animation-duration:9s}
@keyframes thFly{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}50%{transform:translate(16px,-14px)}
80%{opacity:.8}100%{opacity:0;transform:translate(-8px,-30px)}}
.th-lead{position:absolute;z-index:2;left:18px;top:52px;margin:0;font-size:13px;line-height:1.7;font-weight:700;color:#F3F0FF;
text-shadow:0 1px 8px rgba(10,10,40,.5)}
.th-lead em{font-style:normal;font-weight:500;font-size:11.5px;color:#BDB8E8}
.th-tree{position:absolute;z-index:1;right:-6px;bottom:44px;width:118px;height:128px;overflow:visible}
.th-crown{transform-origin:60px 74px;animation:thSway 6s ease-in-out infinite}
@keyframes thSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.th-halo{transform-origin:60px 102px;animation:thBreath 3s ease-in-out infinite}
@keyframes thBreath{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.th-vortex{transform-origin:60px 102px;animation:thSpin 4s linear infinite}
@keyframes thSpin{to{transform:rotate(360deg)}}
.th-tree.is-eat .th-halo{animation:thBurst .9s ease-out}
.th-tree.is-eat .th-vortex{animation-duration:.5s}
.th-tree.is-eat .th-crown{animation:thShake .7s ease-in-out}
@keyframes thBurst{0%{opacity:1;transform:scale(1)}35%{opacity:1;transform:scale(2.3)}100%{opacity:.55;transform:scale(.9)}}
@keyframes thShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
.th-tree.is-eat .th-hole{animation:thGlow .9s ease-out}
@keyframes thGlow{0%{fill:#7A5238}35%{fill:#F4C38F}100%{fill:#7A5238}}
.th-form{margin-top:4px;background:#fff;border:1px solid #E3EEDD;border-radius:16px;padding:10px 12px}
.th-form textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;
font:inherit;font-size:14px;line-height:1.6;color:var(--ink)}
.th-form textarea::placeholder{color:#A9B5A4}
.th-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.th-mine{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:#6F8A68}
.th-mine b{font-weight:800}
.th-send{margin-left:auto;border:0;border-radius:999px;padding:8px 18px;font:inherit;font-size:13.5px;font-weight:700;
color:#fff;background:linear-gradient(90deg,#7FB573,#98C98A);box-shadow:0 6px 14px rgba(110,160,95,.25)}
.th-send:disabled{opacity:.45;box-shadow:none}
.th-send:active{transform:scale(.96)}
.th-done{height:0;overflow:hidden;text-align:center;font-size:13px;font-weight:700;color:#5E8A55;
transition:height .3s var(--ease),margin .3s var(--ease)}
.th-done.is-on{height:22px;margin-top:10px;animation:ptIn .4s var(--ease)}
.th-done .th-sos{font-weight:500;color:var(--ink-2)}
.th-done.is-sos{height:auto}
.th-note{position:fixed;z-index:60;left:0;top:0;pointer-events:none;border-radius:10px;
background:#FFFDF6;box-shadow:0 6px 18px rgba(90,110,80,.25);padding:6px 9px;font-size:12px;color:var(--ink-2);
max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-list{list-style:none;margin:10px 0 0;padding:0}
.th-form{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;display:flex;align-items:flex-end;gap:8px;
padding:5px 5px 5px 14px;border-radius:20px;background:rgba(255,255,255,.1);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.th-form textarea{flex:1;min-width:0;display:block;border:0;outline:0;resize:none;background:transparent;
font:inherit;font-size:13.5px;line-height:20px;height:20px;max-height:60px;margin:6px 0;color:#fff;transition:height .25s var(--ease)}
.th-form textarea::placeholder{color:rgba(230,226,255,.55)}
.th-night.is-typing .th-form textarea{height:60px}
.th-night.is-typing .th-lead{opacity:0;transform:translateY(-6px)}
.th-lead{transition:opacity .25s,transform .25s}
.th-send{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;color:#3A2A12;
background:linear-gradient(135deg,#FFE3A1,#FFAE6E);box-shadow:0 0 14px rgba(255,190,110,.55);transition:transform .2s,opacity .2s}
.th-send:disabled{opacity:.35;box-shadow:none}
.th-send:not(:disabled){animation:thPing 2s ease-in-out infinite}
@keyframes thPing{0%,100%{box-shadow:0 0 10px rgba(255,190,110,.45)}50%{box-shadow:0 0 20px 3px rgba(255,190,110,.8)}}
.th-send:active{transform:scale(.9)}
.th-row{display:flex;align-items:center;gap:8px;margin-top:9px;min-height:20px}
.th-mine{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:#6C6FA8}
.th-mine b{font-weight:800;color:#4B3F9E}
.th-done{margin-left:auto;font-size:12px;font-weight:700;color:#7A6BD0;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.th-done.is-on{opacity:1;transform:none}
.th-done.is-sos{margin-left:0}
.th-done .th-sos{font-weight:500;color:var(--ink-2);margin-top:2px}
.th-row{flex-wrap:wrap}.th-done.is-sos{flex-basis:100%}
.th-ch{position:fixed;z-index:60;left:0;top:0;pointer-events:none;font-size:14px;font-weight:700;color:#FFF1C9;
text-shadow:0 0 8px rgba(255,200,120,.9)}
.th-shoot{position:fixed;z-index:60;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
background:#FFF4D2;box-shadow:0 0 10px 4px rgba(255,210,130,.8)}
.th-list{list-style:none;margin:8px 0 0;padding:0}
.th-list.hide{display:none}
.th-list li{position:relative;background:#fff;border-radius:14px;padding:9px 34px 9px 12px;margin-top:8px;
border:1px solid #EAF2E6}
.th-list time{display:block;font-size:11px;color:#8FA088}
.th-list li{position:relative;background:#F6F5FD;border-radius:14px;padding:9px 34px 9px 30px;margin-top:8px}
.th-list li::before{content:"";position:absolute;left:12px;top:15px;width:6px;height:6px;border-radius:50%;
background:#FFC978;box-shadow:0 0 6px 2px rgba(255,200,120,.6)}
.th-list time{display:block;font-size:11px;color:#9A97C2}
.th-list p{margin:3px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;word-break:break-all}
.th-list .th-del{position:absolute;right:8px;top:8px;border:0;background:none;padding:2px 4px;font-size:15px;color:#B9C4B4}
.th-list .th-empty{text-align:center;color:var(--muted);font-size:12px;background:none;border:0}
.th-help{margin-top:10px;font-size:11px;line-height:1.6;color:var(--muted)}
.th-help a{color:#5E8A55;font-weight:700}
.th-list .th-del{position:absolute;right:8px;top:8px;border:0;background:none;padding:2px 4px;font-size:15px;color:#B8B6D6}
.th-list .th-empty{text-align:center;color:var(--muted);font-size:12px;background:none;padding:6px}
.th-list .th-empty::before{display:none}
.th-help{margin:8px 0 0;font-size:10.5px;line-height:1.55;color:var(--muted)}
.th-help a{color:#6C6FA8;font-weight:700}
@media (prefers-reduced-motion:reduce){
.pt-float,.pt-day.is-today i,.th-crown{animation:none}
.pt-float,.pt-day.is-today i,.th-crown,.th-halo,.th-vortex,.th-fly,.th-sky i,.th-send{animation:none!important}
.pt-grid .pt-card{opacity:1;transform:none;transition:none}
}
@@ -2691,3 +2731,42 @@ a.skip:focus{left:16px;top:16px}
}
.bx-t .fb{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#fff 0,#FFE6DA 70%)}
.bx-keep,.bx-open{text-align:center}
/* 此刻卡 · 应用 logo（2026-10-01：图标换成对应应用自己的 logo；logo 自带圆角方底，外层底色去掉） */
.pl-stat .ps-ico.is-logo,.pl-row .pr-ico.is-logo{background:none!important}
.pl-stat .ps-ico img.logo{width:26px;height:26px;border-radius:8px;display:block;box-shadow:0 3px 8px rgba(120,70,50,.14)}
.pl-stat .ps-ico{width:26px;height:26px}
.pl-row .pr-ico img.logo{width:28px;height:28px;border-radius:9px;display:block;box-shadow:0 2px 6px rgba(120,70,50,.12)}
.pl-row .pr-ico{width:28px;height:28px}
/* 孕期小知识 · 压缩版（2026-10-01：标题前带孕周；今日卡、7 天圆点、四张小卡都收紧，四卡改一行横滑） */
.pt-head{margin-bottom:8px;align-items:center}
.pt-title{display:flex;align-items:center;gap:6px;font-size:15.5px}
.pt-wk{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;border-radius:8px;padding:2px 8px;
background:linear-gradient(135deg,#F4593C,#FF8A66);box-shadow:0 3px 8px rgba(244,89,60,.25);letter-spacing:0}
.pt-when{font-size:11px;padding:2px 8px}
.pt-today{padding:11px 14px 9px}
.pt-float{font-size:28px;top:8px}
.pt-body{min-height:0;padding-right:36px}
.pt-t{margin-top:6px;font-size:15px}
.pt-d{margin-top:3px;font-size:12.5px;line-height:1.6}
.pt-days{margin-top:8px;padding-top:7px}
.pt-day{gap:1px}
.pt-day i{width:22px;height:22px;line-height:22px;font-size:11px}
.pt-day span{font-size:9.5px}
.pt-grid{display:flex;gap:8px;margin:8px -26px 0;padding:0 26px 2px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pt-grid::-webkit-scrollbar{display:none}
.pt-card{flex:0 0 152px;scroll-snap-align:start;padding:9px 11px 10px;border-radius:14px;
display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center}
.pt-ico{width:24px;height:24px;border-radius:8px;font-size:14px}
.pt-card b{margin:0;font-size:12.5px}
.pt-card p{grid-column:1/-1;margin-top:5px;font-size:11.5px;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pt-grid .pt-card{transform:translateX(16px)}
.pt-grid.is-shown .pt-card{transform:none}
.pt-foot{margin-top:6px;font-size:10.5px}
.pt-card.is-open p{-webkit-line-clamp:unset;display:block}
.pt-grid{scroll-padding:0 26px}
.th-tree{bottom:50px}
.th-crown{filter:drop-shadow(0 -1px 0 rgba(170,160,255,.35)) drop-shadow(0 0 10px rgba(120,110,230,.25))}