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:29:56 +00:00
parent 49cc7973d2
commit 5da526fc5c
3 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
mama-box.css
View File

@@ -3207,3 +3207,40 @@ a.skip:focus{left:16px;top:16px}
.gift2 .sb-faces i:nth-child(n+4){display:none}
.gift2 .sb-row .pill-free{padding:5px 10px}
.gift2 .unlock a{white-space:nowrap}
/* 今日脚印 · 无记录时的两条示例（.is-demo） */
.fp-demo-t{display:flex;align-items:center;gap:6px;margin:14px 0 -4px;font-size:12.5px;font-weight:700;color:#A57F70}
.fp-demo-t i{font-style:normal;color:#F4A08A}
.fp-demo-t em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:800;color:#C0704F;background:#FFF0E8;border-radius:6px;padding:2px 7px}
.fp2 .fp-steps.is-demo .step{opacity:.72}
.fp2 .fp-steps.is-demo .st-card{position:relative;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px #F6DDD2;border:0;
background-image:repeating-linear-gradient(135deg,rgba(255,236,226,.5) 0 6px,transparent 6px 12px)}
.st-demo{position:absolute;right:8px;top:8px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#F4A08A;border-radius:6px;padding:1px 6px}
.fp2 .fp-steps.is-demo + .fp-guide{margin-top:10px}
/* ================= 底部导航 2026-10-01 改版 =================
白色磨砂药丸 + 选中项一颗暖色胶囊托底（图标+字一起包住，带一点弹跳）；
中间「记一下」升起成一颗带白圈的大圆钮，白圈和药丸同色 → 看着像从药丸里鼓出来的；圆钮外一圈呼吸光环。 */
.tabbar{left:16px;right:16px;height:62px;border-radius:31px;padding:0 6px;
background:rgba(255,255,255,.94);
box-shadow:0 12px 32px rgba(170,90,60,.18),0 2px 6px rgba(170,90,60,.08),inset 0 0 0 1px rgba(255,220,205,.6)}
.tab{gap:2px;color:#B4A79F;z-index:0}
.tab::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:62px;height:50px;margin:-25px 0 0 -31px;border-radius:20px;
background:linear-gradient(160deg,#FFF0E8,#FFE0D3);box-shadow:inset 0 0 0 1px rgba(255,190,165,.45);
opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.tab.is-active::before{opacity:1;transform:scale(1)}
.tab.is-active{color:#F4593C}
.tab.is-active .t-ico{transform:translateY(-1px);animation:tabPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes tabPop{0%{transform:scale(.7)}100%{transform:translateY(-1px) scale(1)}}
.tab.is-active .t-txt{font-weight:800}
.tab-fab::before{display:none}
.tab-fab{justify-content:flex-end;padding-bottom:8px}
.tab-fab .fab{position:absolute;left:50%;top:-22px;width:52px;height:52px;margin-left:-26px;
border:4px solid #fff;box-sizing:content-box;background:#fff;
box-shadow:0 -4px 10px rgba(170,90,60,.08),0 8px 18px rgba(244,89,60,.38)}
.tab-fab .fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(244,89,60,.45);
animation:fabHalo 2.4s ease-out infinite;pointer-events:none}
@keyframes fabHalo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.tab-fab .t-txt{font-weight:800;color:#F4593C}
.t-badge{top:6px;left:calc(50% + 9px);border-color:#fff;box-shadow:0 0 0 2px rgba(255,59,48,.18)}
@media (prefers-reduced-motion:reduce){.tab-fab .fab::after,.tab.is-active .t-ico{animation:none}}