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

今日脚印改版（撕页日历+小脚丫时间线+宝宝便签），消消乐卡压矮

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 16:22:55 +00:00
parent da995ae540
commit 3f115bd37f
3 changed files with 145 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
mama-box.css
View File

@@ -3076,3 +3076,92 @@ a.skip:focus{left:16px;top:16px}
.seg-b{text-align:center;white-space:nowrap}
.stp-b{width:48px;min-width:48px;display:grid;place-items:center;padding:0}
.stp-ctl input{width:0}
/* ================= 宝宝消消乐卡压矮（2026-10-01 用户：「高度可以降一降」）================= */
.gp-card{padding:11px 12px 11px 16px;border-radius:20px}
.gp-text{padding-top:10px}
.gp-name{font-size:18px}
.gp-sub{margin-top:3px;font-size:11.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gp-cta{margin-top:7px;padding:4px 12px;font-size:12px}
.gp-board{grid-template-columns:repeat(3,22px);gap:3px;padding:5px;border-radius:12px}
.gp-board i{width:22px;height:22px;border-radius:7px;font-size:13px}
.gp-card::before{width:120px;height:120px;bottom:-56px}
/* ================= 今日脚印 2026-10-01 改版（.fp2）=================
一张奶油色的「手账」：撕页日历 + 一左一右的小脚丫沿虚线往下走 + 宝宝写给妈妈的便签。
⚠️ 写在文件末尾，靠 .today-line.fp2 覆盖上面那套旧的时间轴列宽变量（--tl-*）布局。 */
.today-line.fp2{padding:16px 16px 16px;
background-color:#fff;
background-image:
radial-gradient(160px 110px at 100% 0%, rgba(255,214,190,.45), rgba(255,214,190,0) 70%),
radial-gradient(140px 120px at 0% 100%, rgba(255,226,236,.55), rgba(255,226,236,0) 70%),
linear-gradient(180deg,#FFFCF8,#FFF6EF)}
.today-line.fp2::before{display:none}
.fp-head{display:flex;align-items:center;gap:12px}
.fp-cal{position:relative;flex:0 0 56px;height:60px;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:0 6px 14px rgba(200,110,80,.16),inset 0 0 0 1px #F6E3DA;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
.fp-cal::before{content:"";position:absolute;left:0;right:0;top:0;height:17px;background:linear-gradient(135deg,#FF8E6E,#F4593C)}
.fc-ring{position:absolute;top:-3px;left:14px;right:14px;height:9px;
background:radial-gradient(circle,#fff 2.2px,transparent 2.6px) 0 50%/14px 9px repeat-x}
.fp-cal b{font-size:23px;font-weight:900;line-height:1;color:#3A2C27;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.fp-cal span{font-size:9.5px;font-weight:700;color:#A08C82;margin-top:3px;white-space:nowrap}
.fp-ht{flex:1;min-width:0}
.fp2 .tl-h-title{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
.fp-poem{margin-top:4px;font-size:12px;color:#A57F70;font-family:var(--font-kid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-all{flex:0 0 auto;align-self:flex-start;margin-top:4px;display:flex;align-items:center;gap:1px;font-size:12.5px;font-weight:700;color:var(--muted)}
.fp-all i{font-style:normal;font-size:15px;line-height:1}
/* 脚印行：左边一只小脚丫（交替左右、交替颜色），沿一条虚线往下；右边一张小卡 */
.fp2 .fp-steps{position:relative;margin-top:14px;padding:0}
.fp2 .fp-steps::before{content:"";position:absolute;left:13px;top:16px;bottom:16px;border-left:2px dashed #F3D6CA}
.fp2 .step{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px}
.fp2 .st-dot{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:#FFEDE6;color:#F4704F;box-shadow:0 0 0 3px #FFF8F3;z-index:1}
.fp2 .step:nth-child(odd) .st-dot svg{transform:scaleX(-1) rotate(-8deg)}
.fp2 .step:nth-child(even) .st-dot svg{transform:rotate(8deg) translateY(1px)}
.fp2 .step:nth-child(3n+2) .st-dot{background:#FDE8F0;color:#D9577A}
.fp2 .step:nth-child(3n) .st-dot{background:#FFF3D6;color:#E0A126}
.st-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.9);
box-shadow:0 3px 10px rgba(190,120,95,.08),inset 0 0 0 1px #F7EAE3}
.fp2 .st-txt{font-size:14.5px;font-weight:700;color:#3A2C27;white-space:normal;line-height:1.45}
.fp2 .st-txt b{font-size:17px;font-weight:900;color:var(--brand);margin:0 2px;font-variant-numeric:tabular-nums}
.st-meta{display:flex;align-items:center;gap:6px;min-width:0}
.fp2 .st-time{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#B09A8F}
.fp2 .st-from{margin:0;font-size:10.5px;font-weight:700;color:#C0704F;background:#FFF0E8;border-radius:99px;padding:1px 8px}
.fp2 .st-from:empty{display:none}
.st-det{font-size:11px;color:#B09A8F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 还没脚印：一行小脚丫走过来 + 引导语（童趣字体）+ 带 logo 的应用芯片 */
.fp2 .fp-guide{display:block;margin-top:14px;padding:14px 14px 16px;border-radius:18px;text-align:center;
background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px #F6E1D8;border:0}
.fp2 .fp-guide::before,.fp2 .fp-guide::after{display:none}
.fg-walk{display:flex;justify-content:center;align-items:flex-end;gap:12px;height:30px;color:#F6B39D}
.fg-walk i{display:block;line-height:0}
.fg-walk i:nth-child(odd){transform:translateY(-8px) scaleX(-1) rotate(-12deg)}
.fg-walk i:nth-child(even){transform:rotate(12deg)}
.fg-walk .fw0{opacity:.3}.fg-walk .fw1{opacity:.45}.fg-walk .fw2{opacity:.6}.fg-walk .fw3{opacity:.8}.fg-walk .fw4{color:var(--brand);animation:fpStep 1.6s ease-in-out infinite}
@keyframes fpStep{0%,100%{transform:rotate(12deg)}50%{transform:rotate(12deg) translateY(-3px) scale(1.12)}}
.fp2 .tl-guide-t{display:block;margin-top:10px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:1.55;color:#4A3530}
.fp2 .tl-guide-s{display:block;margin-top:4px;font-size:12px;color:#A08C82}
.fp2 .tl-guide-apps{justify-content:center;gap:7px;margin-top:12px}
.fp2 .tl-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 5px;border-radius:99px;border:0;
font-size:12.5px;font-weight:700;color:#4A3530;background:#fff;box-shadow:0 2px 8px rgba(190,110,85,.14),inset 0 0 0 1px #F6E1D8}
.fp2 .tl-chip img{width:20px;height:20px;border-radius:6px;object-fit:cover}
.fp2 .tl-chip.is-plain{padding-left:11px}
@media (prefers-reduced-motion:reduce){.fg-walk .fw4{animation:none}}
/* 宝宝的便签：信纸横线 + 胶带 + 落款 */
.fp2 .fp-note{position:relative;display:block;width:100%;margin-top:14px;padding:16px 16px 12px;text-align:left;border-radius:6px 18px 18px 18px;
overflow:visible;background:#FFFDF7;box-shadow:0 8px 20px rgba(200,120,90,.14),inset 0 0 0 1px #F5E4DA}
.fp2 .fp-note::after{content:"";position:absolute;left:50%;top:-8px;width:64px;height:16px;margin-left:-32px;transform:rotate(-3deg);
background:rgba(255,190,160,.55);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.fn-top{display:flex;align-items:center;gap:7px}
.fp2 .ab-badge{flex:0 0 auto;margin:0;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:900;color:#fff;
background:linear-gradient(135deg,#FF8E6E,#F4593C);letter-spacing:.5px}
.fp2 .ab-tag{margin:0;font-size:12.5px;font-weight:800;color:#C0573C;opacity:1}
.fp2 .ab-say{display:block;margin-top:8px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:30px;color:#4A3530;
background-image:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(232,180,160,.38) 29px,rgba(232,180,160,.38) 30px)}
.fn-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.fn-sign{font-family:var(--font-kid);font-size:13px;color:#C0704F}
.fn-foot em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--brand)}
.today-line.fp2.no-ai .fp-note{display:none}