180 lines
16 KiB
CSS
180 lines
16 KiB
CSS
/* 星空页 · 妈妈们的留言（2026-11-07，js/wh-cm.js）
|
||
二改：从「整页上滑盖住星空」改成半屏面板 —— 最高 68%，上面始终露出星空；深靛紫玻璃，跟星空一个色系 */
|
||
|
||
/* 三改（11-07）：去掉「看看大家说了啥」入口 → 抽屉平时在底部露一截（--wpk 由 wh-cm.js 写），「说一句」和流星内容卡往上让 */
|
||
.wh-page .whp-left{display:none}
|
||
.wh-page .whp-bar{bottom:var(--wpk,58px);padding-bottom:12px}
|
||
.wh-page .wsc{bottom:calc(var(--wpk,58px) + 104px)}
|
||
/* 原来的「全部」抽屉不用了 */
|
||
.wh-page .whd{display:none}
|
||
|
||
/* 半屏面板 */
|
||
.wcs{position:absolute;inset:0;z-index:8;background:rgba(10,6,24,0);pointer-events:none;transition:background .3s}
|
||
.wcs.show{pointer-events:auto;background:rgba(10,6,24,.32)}
|
||
.wcs-p{position:absolute;left:0;right:0;bottom:0;height:58px;max-height:76%;pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;border-radius:22px 22px 0 0;color:#F4ECFF;
|
||
background:linear-gradient(#2A1F48,#1E1634);box-shadow:0 -10px 40px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1)}
|
||
.wh-page.show .wcs-p{transform:none}
|
||
.wcs-hd{flex:none;padding:8px 0 6px;touch-action:none}
|
||
.wcs-grab{display:block;width:38px;height:4px;margin:0 auto 8px;border-radius:2px;background:rgba(255,255,255,.28)}
|
||
.wcs-tt{display:flex;align-items:baseline;gap:8px;padding:0 16px 0 18px}
|
||
.wcs-tt b{font-size:16px;font-weight:800;letter-spacing:.5px}
|
||
.wcs-tt span{font-size:12px;color:rgba(232,222,255,.5)}
|
||
.wcs-up{margin-left:auto;font-style:normal;font-size:12px;color:#FFD9B8;animation:wcmUp 1.6s ease-in-out infinite}
|
||
@keyframes wcmUp{50%{transform:translateY(-3px)}}
|
||
.wcs.show .wcs-up{display:none}
|
||
.wcs:not(.show) .wcs-rule,.wcs:not(.show) .wcm-tb{opacity:0}
|
||
.wcs-x{display:none!important}
|
||
.wcs.show .wcs-x{display:grid!important;margin-left:auto;align-self:center;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
|
||
.wcm-tb{display:flex;align-items:center;gap:6px;margin:10px 14px 2px 18px}
|
||
.wcm-tb button{flex:none}
|
||
.wcm-tb button{height:26px;padding:0 12px;border-radius:99px;border:0;background:rgba(255,255,255,.07);color:rgba(232,222,255,.62);font:inherit;font-size:12.5px}
|
||
.wcm-tb button.on{background:linear-gradient(135deg,rgba(255,214,170,.92),rgba(255,170,160,.92));color:#3A2312;font-weight:800}
|
||
/* 重点：被赞 N 次就变成星星 */
|
||
.wcs-rule{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:9px 12px;border-radius:14px;font-size:13px;color:#FFF3E2;
|
||
background:linear-gradient(110deg,rgba(255,200,150,.22),rgba(150,110,255,.22));box-shadow:inset 0 0 0 1px rgba(255,214,170,.3),0 0 18px rgba(255,200,150,.12)}
|
||
.wcs-rule svg{flex:none;width:18px;height:18px;fill:#FFD9A0;filter:drop-shadow(0 0 4px rgba(255,214,160,.9));animation:wstTw 2.2s ease-in-out infinite}
|
||
.wcs-rule b{font-size:16px;color:#FFD08A;margin:0 1px}
|
||
@keyframes wstTw{50%{transform:scale(.8) rotate(20deg);opacity:.7}}
|
||
.wcs-ls{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 12px 14px}
|
||
.wcm-e{margin:24px 0;text-align:center;font-size:12.5px;color:rgba(232,222,255,.45)}
|
||
.wcm-it{display:flex;gap:10px;margin-top:8px;padding:12px 10px 10px 12px;border-radius:16px;
|
||
background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
|
||
.wcm-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:#3A2F5E;box-shadow:0 0 0 1.5px rgba(255,220,180,.35)}
|
||
.wcm-bd{flex:1;min-width:0}
|
||
.wcm-nm{display:flex;align-items:baseline;gap:6px;margin:0;font-size:12px;color:rgba(232,222,255,.45)}
|
||
.wcm-nm b{font-size:12.5px;font-weight:700;color:#FFD9B8;max-width:9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.wcm-tx{margin:4px 0 0;font-size:14px;line-height:1.6;color:#F2ECFA;word-break:break-word}
|
||
.wcm-st{margin:4px 0 0;font-size:11.5px;color:#FFC07A}
|
||
.wcm-rp{margin-top:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
|
||
.wcm-rp p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(242,236,250,.78)}
|
||
.wcm-rp p+p{margin-top:4px}
|
||
.wcm-rp b{font-weight:700;color:#C9B8FF}
|
||
.wcm-rp p.me b:first-child{color:#FFD9B8}
|
||
.wcm-re{margin-top:6px;padding:2px 0;border:0;background:none;font:inherit;font-size:12px;color:rgba(232,222,255,.5)}
|
||
.wcm-star{display:flex;width:fit-content;align-items:center;gap:4px;margin:6px 0 0;padding:2px 8px 2px 6px;border-radius:99px;font-size:11px;font-weight:700;color:#FFE2B8;
|
||
background:linear-gradient(135deg,rgba(122,79,214,.55),rgba(90,59,170,.35));box-shadow:0 0 10px rgba(255,214,170,.25)}
|
||
.wcm-star svg{width:10px;height:10px;fill:currentColor}
|
||
.wcm-lk{flex:none;align-self:flex-start;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:32px;padding:2px 0;border:0;background:none;font:inherit;color:rgba(232,222,255,.5)}
|
||
.wcm-lk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s}
|
||
.wcm-lk span{font-size:11px}
|
||
.wcm-lk.on{color:#FF8FA6}.wcm-lk.on svg{fill:currentColor;transform:scale(1.12)}
|
||
.wcm-lk.me{opacity:.7}
|
||
.wcm-lk.pop svg{animation:wcmPop .45s ease}
|
||
@keyframes wcmPop{40%{transform:scale(1.45)}100%{transform:scale(1.12)}}
|
||
.wcm-more{display:block;margin:14px auto 0;height:34px;padding:0 22px;border-radius:99px;border:1px solid rgba(255,220,180,.35);background:rgba(255,255,255,.05);color:#FFD9B8;font:inherit;font-size:13px}
|
||
.wcm-more[hidden]{display:none}
|
||
/* 底部输入框：发新留言 / 回复某一楼 */
|
||
.wcs-in{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);background:#1E1634}
|
||
.wcs-to{flex:none;max-width:7em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:#FFD9B8}
|
||
.wcs-to[hidden]{display:none}
|
||
.wcs-in input{flex:1;min-width:0;height:36px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.09);color:#fff;font:inherit;font-size:14px;outline:none}
|
||
.wcs-in input::placeholder{color:rgba(232,222,255,.4)}
|
||
.wcs-in button{flex:none;height:34px;padding:0 14px;border:0;border-radius:99px;background:linear-gradient(135deg,#FFD6AA,#FFAAA0);color:#3A2312;font:inherit;font-size:13.5px;font-weight:800}
|
||
.wcs-in button:disabled{opacity:.5}
|
||
|
||
/* 星星点完会再冒出来（app.js reborn） */
|
||
.wsk-st.born i{animation:wskBorn 1.4s ease-out both}
|
||
@keyframes wskBorn{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:none}}
|
||
|
||
/* 背景小星被点到：闪一下（app.js 把一颗亮星挪过去） */
|
||
.wsk-deco i.pk{animation:wskPk .6s ease-out}
|
||
@keyframes wskPk{50%{transform:scale(2.4);opacity:1}}
|
||
|
||
/* 自己的留言：还差几个赞 + 找人帮我点赞 */
|
||
.wcm-mf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0;font-size:11.5px;color:rgba(232,222,255,.62)}
|
||
p.wcm-mf{display:block;color:#FFC07A}
|
||
.wcm-pg{position:relative;width:54px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
|
||
.wcm-pg i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#FFD6AA,#FF9FB0)}
|
||
.wcm-share{flex-basis:100%;text-align:center;height:32px;margin-top:2px;border:0;border-radius:99px;font:inherit;font-size:13px;font-weight:800;color:#3A2312;
|
||
background:linear-gradient(135deg,#FFE0B5,#FFAAA0);box-shadow:0 4px 16px -4px rgba(255,170,150,.6)}
|
||
.wcm-share:active{transform:scale(.97)}
|
||
.wcm-it.hl{animation:wcmHl 2.4s ease}
|
||
@keyframes wcmHl{0%,60%{box-shadow:inset 0 0 0 1.5px #FFD9A0,0 0 22px rgba(255,214,160,.45)}}
|
||
|
||
/* 转发引导 */
|
||
.wsh-g{position:absolute;inset:0;z-index:20;background:rgba(8,5,20,.72);animation:wshIn .25s ease}
|
||
@keyframes wshIn{from{opacity:0}}
|
||
/* 11-07 用户：箭头要指到小程序右上角胶囊的「···」（胶囊在页面顶上、右边 7px 起宽 87px，「···」在它左半边）→ 箭头尖顶到页面最上沿、对准右边 ~70px；用户实测还指在关闭键上，再往左 30px */
|
||
.wsh-arrow{position:absolute;right:78px;top:calc(2px + env(safe-area-inset-top));width:46px;height:84px;
|
||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 84' fill='none' stroke='%23FFD9A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 80C6 52 18 24 33 6' stroke-dasharray='6 6'/%3E%3Cpath d='M22 10.5L33 4l-1 13'/%3E%3C/svg%3E") center/contain no-repeat;animation:wshA 1.2s ease-in-out infinite}
|
||
@keyframes wshA{50%{transform:translateY(-6px)}}
|
||
.wsh-c{position:absolute;left:28px;right:28px;top:120px;padding:22px 20px 18px;border-radius:22px;text-align:center;color:#F4ECFF;
|
||
background:linear-gradient(#2E2350,#1F1738);box-shadow:inset 0 0 0 1px rgba(255,214,170,.25),0 20px 50px rgba(0,0,0,.5)}
|
||
.wsh-c b{font-size:18px;color:#FFD9A0}
|
||
.wsh-c p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:rgba(232,222,255,.8)}
|
||
.wsh-c p.q{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff}
|
||
.wsh-c p.s{font-size:12.5px;color:#FFC9A0}
|
||
.wsh-c button{margin-top:14px;height:38px;padding:0 34px;border:0;border-radius:99px;font:inherit;font-size:14px;font-weight:800;color:#3A2312;background:linear-gradient(135deg,#FFE0B5,#FFAAA0)}
|
||
|
||
/* 变成星星的特效：一颗星从底下升上去，炸开碎星，亮出那句话 */
|
||
.wst-fx{position:absolute;inset:0;z-index:21;background:radial-gradient(60% 40% at 50% 34%,rgba(120,80,200,.35),rgba(8,5,20,.78));animation:wshIn .4s ease;overflow:hidden}
|
||
.wst-fx.out{opacity:0;transition:opacity .5s}
|
||
.wst-star,.wst-ring,.wst-sp{position:absolute;left:50%;top:30%}
|
||
.wst-star{width:64px;height:64px;margin:-32px 0 0 -32px;
|
||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFF6E4'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
filter:drop-shadow(0 0 10px #FFD9A0) drop-shadow(0 0 26px rgba(255,200,140,.8));animation:wstUp 1.3s cubic-bezier(.3,.7,.3,1) both,wstGlow 1.8s 1.3s ease-in-out infinite}
|
||
@keyframes wstUp{0%{transform:translateY(60vh) scale(.3);opacity:0}20%{opacity:1}80%{transform:translateY(-6px) scale(1.15)}100%{transform:none}}
|
||
@keyframes wstGlow{50%{transform:scale(1.18) rotate(12deg)}}
|
||
.wst-ring{width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,220,170,.9);opacity:0;animation:wstRing 1s 1.2s ease-out both}
|
||
@keyframes wstRing{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(12)}}
|
||
.wst-sp{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFE7C2;box-shadow:0 0 8px #FFD9A0;opacity:0;animation:wstSp 1s ease-out both}
|
||
@keyframes wstSp{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.4)}}
|
||
.wst-tx{position:absolute;left:30px;right:30px;top:calc(30% + 60px);text-align:center;animation:wstTx .6s 1.4s ease-out both}
|
||
@keyframes wstTx{from{opacity:0;transform:translateY(14px)}}
|
||
.wst-tx b{display:block;font-size:22px;font-weight:900;letter-spacing:1px;color:#FFE2B0;text-shadow:0 0 18px rgba(255,200,140,.7)}
|
||
.wst-tx p{margin:12px 0 0;font-size:15px;line-height:1.65;color:#fff}
|
||
.wst-tx span{display:block;margin-top:10px;font-size:12.5px;color:rgba(232,222,255,.65)}
|
||
@media (prefers-reduced-motion:reduce){.wst-star,.wst-sp,.wst-ring,.wst-tx,.wcs-up,.wsh-arrow{animation:none!important}.wst-sp{display:none}}
|
||
|
||
/* 「说一句」弹窗 · 星空版（wh-cm.js fillModal 给 #modalWhisper 加 .wh-star） */
|
||
#modalWhisper.wh-star{background:linear-gradient(170deg,#33265A 0%,#221A40 55%,#1B1533 100%);color:#F4ECFF;box-shadow:0 -14px 50px rgba(20,10,50,.6),inset 0 1px 0 rgba(255,255,255,.12);overflow-x:hidden}
|
||
.wms-sky{display:none}
|
||
#modalWhisper.wh-star .wms-sky{display:block;position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;opacity:.9;
|
||
background:
|
||
radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 46% 14%,#FFE7C2,transparent),
|
||
radial-gradient(1px 1px at 63% 40%,#fff,transparent),radial-gradient(2px 2px at 78% 18%,#FFE7C2,transparent),radial-gradient(1px 1px at 90% 52%,#fff,transparent),
|
||
radial-gradient(1px 1px at 36% 84%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 76%,#fff,transparent),
|
||
radial-gradient(80% 100% at 85% 0%,rgba(255,180,150,.18),transparent 70%)}
|
||
#modalWhisper.wh-star .modal-head,#modalWhisper.wh-star>*{position:relative}
|
||
#modalWhisper.wh-star .modal-head h3{color:#FFF1DE;font-size:21px;letter-spacing:.5px;text-shadow:0 0 16px rgba(255,200,150,.35)}
|
||
#modalWhisper.wh-star .modal-x{background:rgba(255,255,255,.1);color:#E8DEFF}
|
||
#modalWhisper.wh-star .wh-m-topic{margin-top:6px;color:#FFC9A0}
|
||
#modalWhisper.wh-star .wh-m-topic span{color:rgba(232,222,255,.55)}
|
||
#modalWhisper.wh-star .wh-m-lead{display:flex;gap:6px;margin-top:12px}
|
||
.wms{flex:1;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;text-align:left}
|
||
.wms.hi{font-size:16px;font-weight:800;line-height:1.45;color:#FFF3E2;
|
||
background:linear-gradient(120deg,rgba(255,200,150,.32),rgba(150,110,255,.3));box-shadow:inset 0 0 0 1.5px rgba(255,214,170,.55),0 0 26px rgba(255,200,150,.25)}
|
||
.wms.hi svg{flex:none;width:38px;height:38px;fill:#FFE2B0;filter:drop-shadow(0 0 6px #FFD9A0) drop-shadow(0 0 16px rgba(255,200,140,.7));animation:wstTw 2.2s ease-in-out infinite}
|
||
.wms.hi b{font-size:24px;color:#FFD08A;margin:0 2px;text-shadow:0 0 12px rgba(255,200,140,.6)}
|
||
#modalWhisper.wh-star .wh-ta{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}
|
||
#modalWhisper.wh-star .wh-ta::placeholder{color:rgba(232,222,255,.4)}
|
||
#modalWhisper.wh-star .wh-ta:focus{border-color:rgba(255,214,170,.6);box-shadow:0 0 0 3px rgba(255,214,170,.12)}
|
||
#modalWhisper.wh-star .wh-cnt{color:rgba(232,222,255,.4)}
|
||
#modalWhisper.wh-star .wh-m-sub{color:rgba(232,222,255,.6);font-weight:600}
|
||
#modalWhisper.wh-star .wh-pre{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(242,236,250,.85)}
|
||
#modalWhisper.wh-star .wh-pre.on{background:rgba(255,214,170,.18);border-color:rgba(255,214,170,.6);color:#FFE2B8}
|
||
#modalWhisper.wh-star .dl-btn.main{background:linear-gradient(135deg,#FFE0B5,#FFAAA0);color:#3A2312;box-shadow:0 10px 26px -8px rgba(255,170,150,.7)}
|
||
#modalWhisper.wh-star .wh-left{color:rgba(232,222,255,.5)}
|
||
|
||
/* 11-07 用户：「本周话题 · 对未来宝宝说的话」字大一点，和上面 23px 的标题协调（原 10.5 / 13.5px） */
|
||
.wh-page .wsk-topic{gap:10px;margin-top:12px;padding:6px 18px 6px 6px}
|
||
.wh-page .wsk-topic em{padding:3px 11px;font-size:13px}
|
||
.wh-page .wsk-topic b{font-size:18px;letter-spacing:1px}
|
||
|
||
/* 11-07：自己的留言/回复在审核中 → 名字后标「审核中」（只有自己看得到） */
|
||
.wcm-pend{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-style:normal;font-size:11px;font-weight:700;line-height:17px;vertical-align:1px;color:#FFD9A0;background:rgba(255,200,140,.14);border:1px solid rgba(255,210,160,.3)}
|
||
/* 「妈妈们的留言」后面的小头像 */
|
||
.wcm-nm .wcm-pend{margin-left:0}
|
||
.wcs-avs{display:inline-flex;align-self:center;margin-left:-2px}
|
||
.wcs-avs:empty{display:none}
|
||
.wcs-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #3A2C57;background:#4A3A6A}
|
||
.wcs-avs img+img{margin-left:-7px}
|
||
.wcs-avs img{transition:transform .26s ease,opacity .26s ease}.wcs-avs img.out{transform:scale(.4);opacity:0}.wcs-avs img.nw{animation:wavIn .45s cubic-bezier(.3,1.6,.5,1)}
|
||
@keyframes wavIn{from{transform:scale(.3);opacity:0}}
|
||
|
||
/* 11-07 规则横幅并进排序那一行 → 右边小胶囊 */
|
||
.wcm-tb .wcs-rule{flex:0 1 auto;min-width:0;margin:0 0 0 auto;padding:0 10px 0 8px;height:26px;gap:4px;border-radius:99px;font-size:11.5px;white-space:nowrap}
|
||
.wcm-tb .wcs-rule span{overflow:hidden;text-overflow:ellipsis}
|
||
.wcm-tb .wcs-rule svg{width:13px;height:13px}
|
||
.wcm-tb .wcs-rule b{font-size:13px}
|