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

悄悄话全屏页四改：一屏一句竖滑沉浸式、逐字亮起、光晕随句变色、双击抱抱、全部抽屉 (v26100168)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 06:54:02 +00:00
parent a9581b64a1
commit e70e4cb91b
3 changed files with 198 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
mama-box.css
View File

@@ -3790,3 +3790,77 @@ a.skip:focus{left:16px;top:16px}
.td-row{gap:12px}
.td-row:active .td-li{background:#D5EEE1}
.td-li svg{width:22px;height:22px}
/* ===== 2026-10-02 悄悄话全屏页 · 四改：一屏一句竖滑沉浸式 ===== */
.whv-aura{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.whv-aura i{position:absolute;width:120vw;height:120vw;max-width:560px;max-height:560px;border-radius:50%;filter:blur(70px);opacity:.55;
transition:background-color 1.2s ease;animation:whvDrift 14s ease-in-out infinite alternate}
.whv-aura i:first-child{left:-35%;top:8%}
.whv-aura i:last-child{right:-40%;bottom:6%;animation-delay:-7s;opacity:.45}
@keyframes whvDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,-8%) scale(1.15)}}
.wh-page .whp-sky i.moon{opacity:.5}
.whv-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
background:linear-gradient(rgba(20,14,40,.55),transparent)}
.whv-bars{flex:1;display:flex;gap:3px;transition:opacity .3s}
.whv-bars.hide{opacity:0}
.whv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.whv-bars i.done{background:rgba(255,255,255,.7)}
.whv-bars i.on{background:linear-gradient(90deg,#FFD9A8,#FF9E8A);box-shadow:0 0 6px rgba(255,190,150,.8)}
.whv-all{margin-left:auto;height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}
.whv{position:absolute;inset:0;z-index:1;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.whv::-webkit-scrollbar{display:none}
.whv-s{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;
padding:70px 84px 130px 28px;box-sizing:border-box;user-select:none;-webkit-user-select:none}
.whv-in{width:100%}
.whv-cover,.whv-end{padding-right:28px}
.whv-cover{align-items:flex-start;padding-top:calc(64px + env(safe-area-inset-top))}
.whv-ct{margin-top:18px;font-size:34px;line-height:1.25;font-weight:900;letter-spacing:1px}
.whv-ct b{font-size:64px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;background:linear-gradient(120deg,#FFE2B8,#FF9E8A);-webkit-background-clip:text;background-clip:text;color:transparent}
.whv-ct.sm{font-size:28px}
.whv-cover .whp-sky2{height:200px;margin:14px -8px 0}
.whv-down{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:2px}
.whv-down i{width:18px;height:18px;border:solid rgba(255,255,255,.7);border-width:2px 2px 0 0;transform:rotate(-45deg);animation:whvUp 1.6s ease-in-out infinite}
@keyframes whvUp{0%,100%{transform:translateY(4px) rotate(-45deg);opacity:.4}50%{transform:translateY(-4px) rotate(-45deg);opacity:1}}
.whv-no{display:flex;align-items:baseline;gap:6px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;color:rgba(255,255,255,.45);letter-spacing:1px}
.whv-no b{font-size:22px;color:rgba(255,226,190,.9)}
.whv-no span{font-size:13px}
.whv-no em{margin-left:6px;font-style:normal;font-family:inherit;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:#FFD596;color:#5A3510;letter-spacing:0}
.whv-q{margin:18px 0 0;font-weight:900;line-height:1.35;letter-spacing:1px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.whv-q.xl{font-size:40px}.whv-q.l{font-size:32px}.whv-q.m{font-size:26px}
.whv-q span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px)}
.whv-s.on .whv-q span{animation:whvCh .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--c) * 55ms + 120ms)}
@keyframes whvCh{to{opacity:1;filter:blur(0);transform:none}}
.whv-s.mine .whv-q{background:linear-gradient(120deg,#FFF1D6,#FFC48A);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.whv-meta{margin-top:18px;font-size:13px;color:rgba(255,255,255,.6);opacity:0;transition:opacity .6s .5s}
.whv-tip{display:inline-block;margin-top:22px;font-size:11.5px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);opacity:0;transition:opacity .6s 1s}
.whv-s.on .whv-meta,.whv-s.on .whv-tip{opacity:1}
.whv-rail{position:absolute;right:16px;bottom:150px;display:flex;flex-direction:column;align-items:center;gap:6px}
.whv-hug.whp-hug{flex-direction:column;justify-content:center;width:58px;height:58px;padding:0;gap:0;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.whv-hug.whp-hug svg{width:26px;height:26px}
.whv-hug.whp-hug b{font-size:11.5px;line-height:1.1}
.whv-hug.whp-hug.on{box-shadow:0 6px 22px rgba(255,111,145,.5)}
.whv-hl,.whv-got small{font-size:11px;color:rgba(255,255,255,.55)}
.whv-got{display:flex;flex-direction:column;align-items:center;gap:2px;color:#FFD596}
.whv-got svg{width:30px;height:30px;fill:#FFD596;filter:drop-shadow(0 0 10px rgba(255,200,120,.8))}
.whv-got b{font-size:18px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif}
.whv-big{position:absolute;z-index:5;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;animation:whvBig .9s cubic-bezier(.2,.8,.2,1) forwards}
.whv-big svg{width:100%;height:100%;fill:#FF6F91;filter:drop-shadow(0 0 18px rgba(255,111,145,.8))}
@keyframes whvBig{0%{transform:scale(.2) rotate(-12deg);opacity:0}25%{transform:scale(1.15) rotate(6deg);opacity:1}55%{transform:scale(1)}100%{transform:translateY(-70px) scale(1.3);opacity:0}}
.whd{position:absolute;inset:0;z-index:6;background:rgba(10,6,24,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.whd.show{opacity:1;visibility:visible}
.whd-panel{position:absolute;left:0;right:0;bottom:0;max-height:72%;overflow-y:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
background:linear-gradient(#2A1F48,#1E1634);box-shadow:0 -10px 40px rgba(0,0,0,.4);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.whd.show .whd-panel{transform:none}
.whd-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.whd-head b{font-size:17px}
.whd-head span{font-size:12px;color:rgba(255,255,255,.5)}
.whd-x{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:13px}
.wh-page .whp-bar{z-index:2}
@media (prefers-reduced-motion:reduce){
.whv-aura i,.whv-down i{animation:none}
.whv-q span{opacity:1;filter:none;transform:none}
.whv-s.on .whv-q span{animation:none}
}
.whv-s.mine .whv-q{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFDDAE;text-shadow:0 0 22px rgba(255,190,120,.55)}
.whd-x{display:grid;place-items:center}
.whv-ct b{font-size:60px;margin-right:4px}