73 lines
6.9 KiB
CSS
73 lines
6.9 KiB
CSS
/* 11-02 首页「孕妈广场」效果稿 V3 · 话题弹幕流（只在 ?gcv=3 时加载，全部限定在 #gcHome.gv3） */
|
||
#gcHome.gv3{position:relative;z-index:0;margin:16px -26px 0;border-radius:26px;padding:16px 26px 14px;background:linear-gradient(180deg,#fff 0%,#FFFAF6 100%);box-shadow:0 10px 26px -18px rgba(214,120,110,.35);overflow:hidden}
|
||
#gcHome.gv3 button{font:inherit;-webkit-tap-highlight-color:transparent}
|
||
#gcHome.gv3 .v3-head{display:flex;align-items:center;gap:8px}
|
||
#gcHome.gv3 .v3-title{flex:none;margin:0;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E}
|
||
#gcHome.gv3 .v3-title span{background:linear-gradient(transparent 58%,#FFD0DC 58%,#FFD0DC 92%,transparent 92%);padding:0 3px}
|
||
#gcHome.gv3 .v3-live{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:11px;color:#A48C86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
|
||
#gcHome.gv3 .v3-live i{flex:none;width:6px;height:6px;border-radius:50%;background:#4CC38A;box-shadow:0 0 0 3px rgba(76,195,138,.18)}
|
||
#gcHome.gv3 .v3-more{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 4px 0 10px;border:0;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);font-size:12px;font-weight:800;color:#fff;box-shadow:0 4px 10px rgba(242,98,126,.28)}
|
||
#gcHome.gv3 .v3-more i{font-style:normal;font-size:15px;line-height:1;padding:0 4px 1px 1px}
|
||
|
||
#gcHome.gv3 .v3-cat{display:flex;margin:12px 0 0;padding:2px;border-radius:99px;background:rgba(240,222,214,.6)}
|
||
#gcHome.gv3 .v3-cat button{flex:1;min-width:0;height:28px;padding:0 4px;border:0;border-radius:99px;background:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;color:#9A7F78;white-space:nowrap;transition:background .2s,color .2s}
|
||
#gcHome.gv3 .v3-cat button.on{background:#fff;color:#D9466A;box-shadow:0 1px 4px rgba(190,110,120,.18)}
|
||
|
||
/* 此刻最热 */
|
||
#gcHome.gv3 .v3-hot{display:block;width:100%;margin:12px 0 0;padding:0;border:0;background:none;text-align:left}
|
||
#gcHome.gv3 .v3-hot-in{display:flex;align-items:center;gap:11px;padding:8px 10px 8px 8px;border-radius:18px;background:linear-gradient(120deg,#FFF3EC,#FFEFF2);box-shadow:inset 0 0 0 1px rgba(244,89,60,.08);transition:opacity .3s,transform .3s}
|
||
#gcHome.gv3 .v3-hot.out .v3-hot-in{opacity:0;transform:translateY(4px)}
|
||
#gcHome.gv3 .v3-hot:active .v3-hot-in{transform:scale(.98)}
|
||
#gcHome.gv3 .v3-ph{flex:none;width:60px;height:72px;border-radius:13px;object-fit:cover;background:#F0E2DA;display:grid;place-items:center;font-size:26px;font-weight:900}
|
||
#gcHome.gv3 .v3-hb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||
#gcHome.gv3 .v3-hk{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#C2705A;letter-spacing:.3px;white-space:nowrap}
|
||
#gcHome.gv3 .v3-hk em{font-style:normal;height:16px;padding:0 5px;border-radius:5px;background:linear-gradient(135deg,#FF7A45,#F4433C);color:#fff;font-size:11px;line-height:16px}
|
||
#gcHome.gv3 .v3-hk i{width:5px;height:5px;border-radius:50%;margin-left:4px;opacity:.8}
|
||
#gcHome.gv3 .v3-hk i+*{color:#A48C86}
|
||
#gcHome.gv3 .v3-hn{font-size:14px;font-weight:900;line-height:1.35;color:#2F2424;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
|
||
#gcHome.gv3 .v3-hm{display:flex;align-items:center;gap:6px;font-size:11px;color:#9A817B;font-variant-numeric:tabular-nums}
|
||
#gcHome.gv3 .v3-avs{display:flex}
|
||
#gcHome.gv3 .v3-avs img{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3}
|
||
#gcHome.gv3 .v3-avs img:first-child{margin-left:0}
|
||
#gcHome.gv3 .v3-go{flex:none;font-size:18px;color:#E7A796;line-height:1}
|
||
|
||
/* 弹幕区：三行，左右渐隐；整块外扩到卡片边缘 */
|
||
#gcHome.gv3 .v3-dm{position:relative;margin:12px -26px 0;padding:2px 0;display:flex;flex-direction:column;gap:8px;overflow:hidden;overscroll-behavior-x:contain;touch-action:pan-y;
|
||
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);transition:opacity .26s}
|
||
#gcHome.gv3 .v3-dm.swap{opacity:0}
|
||
#gcHome.gv3 .v3-row{overflow:hidden;height:32px}
|
||
#gcHome.gv3 .v3-track{display:flex;width:max-content;animation:v3Flow 60s linear infinite;will-change:transform}
|
||
#gcHome.gv3 .v3-track.rev{animation-name:v3FlowR}
|
||
#gcHome.gv3 .v3-row:nth-child(2) .v3-track{padding-left:40px}
|
||
#gcHome.gv3 .v3-dm.hold .v3-track{animation-play-state:paused}
|
||
@keyframes v3Flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
|
||
@keyframes v3FlowR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
|
||
#gcHome.gv3 .v3-grp{display:flex;flex:none}
|
||
#gcHome.gv3 .v3-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;margin-right:10px;padding:0 11px 0 4px;border:0;border-radius:99px;
|
||
background:linear-gradient(90deg,#fff 30%,var(--c1));box-shadow:inset 0 0 0 1px rgba(0,0,0,.035),0 2px 6px -3px rgba(180,120,110,.25);color:#5A4743}
|
||
#gcHome.gv3 .v3-row:nth-child(2) .v3-chip{background:#fff}
|
||
#gcHome.gv3 .v3-chip:active{transform:scale(.96)}
|
||
#gcHome.gv3 .v3-chip img{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover;background:#FFE3D3}
|
||
#gcHome.gv3 .v3-chip span{min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
#gcHome.gv3 .v3-chip em{flex:none;font-style:normal;font-size:11px;font-weight:800;color:#F4593C}
|
||
#gcHome.gv3 .v3-chip i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--cc);opacity:.65}
|
||
|
||
/* 投稿入口：细长一条 */
|
||
#gcHome.gv3 .v3-post{display:flex;align-items:center;gap:7px;width:100%;height:38px;margin:14px 0 0;padding:0 8px 0 6px;border:1px dashed #F5BFAE;border-radius:99px;background:#FFF8F4;text-align:left}
|
||
#gcHome.gv3 .v3-post:active{background:#FFEFE7}
|
||
#gcHome.gv3 .v3-post b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FF8A5B,#F4593C);color:#fff}
|
||
#gcHome.gv3 .v3-post b svg{width:14px;height:14px}
|
||
#gcHome.gv3 .v3-post span{flex:none;font-size:12.5px;font-weight:800;color:#6B4A40}
|
||
#gcHome.gv3 .v3-post em{flex:1;min-width:0;font-style:normal;font-size:11px;font-weight:700;color:#E2553A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
|
||
#gcHome.gv3 .v3-post em::before{content:"·";margin-right:5px;color:#D9B3A6}
|
||
#gcHome.gv3 .v3-post i{flex:none;font-style:normal;font-size:16px;color:#E7A796}
|
||
#gcHome.gv3 .v3-tag{display:block;margin:8px 0 0;text-align:right;font-size:11px;color:#C9BDB9}
|
||
|
||
@media (prefers-reduced-motion: reduce){
|
||
#gcHome.gv3 .v3-track{animation:none!important}
|
||
#gcHome.gv3 .v3-row{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
|
||
#gcHome.gv3 .v3-row::-webkit-scrollbar{display:none}
|
||
#gcHome.gv3 .v3-dm{touch-action:auto}
|
||
#gcHome.gv3 .v3-hot-in,#gcHome.gv3 .v3-dm{transition:none}
|
||
}
|