/* =========================================================== 会员功能样式（狐仙小赫会员） 包含：投喂页会员介绍卡 + 卡密兑换区、会员圆形徽章、会员背包 由 index.html 里 引入 =========================================================== */ /* ===== “投喂”标签页：会员介绍卡 + 卡密兑换区 ===== */ .feed-member-card{ display:flex; flex-direction:column; gap:10px; margin:0 4px 14px; padding:14px; background:rgba(28, 31, 43, 0.55); border:1px solid rgba(196, 50, 50, 0.18); border-radius:14px; } .feed-member-top{ display:flex; align-items:flex-start; gap:12px; } .feed-member-cover{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex-shrink:0; background:#13161f; border:1px solid rgba(196, 50, 50, 0.25); } .feed-member-info{ flex:1; min-width:0; } .feed-member-title{ font-size:0.98rem; font-weight:bold; color:var(--ui-text-main); margin-bottom:4px; } .feed-member-desc{ font-size:0.74rem; color:#8b8d9c; line-height:1.55; margin-bottom:8px; } .feed-member-status{ font-size:0.72rem; color:#c43232; margin-bottom:6px; } .feed-member-countdown{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:10px; background:rgba(196, 50, 50, 0.18); color:#e8a3a3; font-size:0.66rem; white-space:nowrap; width:fit-content; } .feed-redeem-box{ margin:0 4px; padding:14px; background:rgba(28, 31, 43, 0.55); border:1px solid rgba(196, 50, 50, 0.18); border-radius:14px; } .feed-redeem-label{ font-size:0.82rem; font-weight:600; color:var(--ui-text-main); margin-bottom:10px; } .feed-redeem-row{ display:flex; align-items:center; gap:8px; } .feed-redeem-row input{ flex:1; min-width:0; padding:10px 12px; border:1px solid rgba(196, 50, 50, 0.25); background:rgba(19, 22, 31, 0.6); border-radius:9px; font-size:0.84rem; color:var(--ui-text-main); outline:none; box-sizing:border-box; font-family:inherit; letter-spacing:0.5px; } .feed-redeem-row button{ flex-shrink:0; padding:10px 18px; border:none; border-radius:9px; background:#c43232; color:#fff; font-size:0.84rem; font-weight:600; cursor:pointer; } .feed-redeem-row button:active{ opacity:0.85; } .feed-redeem-msg{ margin-top:8px; font-size:0.7rem; min-height:1em; } /* ===== 会员圆形徽章：跟随作者等级徽章展示，环形流光动效 ===== 流光画在 ::before 这个独立的伪元素上（红色），只有它在转； 头像图片是普通的层，叠在上面，本身完全静止，不会跟着转。 */ .member-badge-ring{ position:relative; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; background:#13161f; } .member-badge-ring::before{ content:''; position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(from 0deg, rgba(255,56,56,0) 0%, rgba(255,56,56,0.95) 18%, rgba(255,222,222,1) 28%, rgba(255,56,56,0.95) 38%, rgba(255,56,56,0) 60%, rgba(255,56,56,0) 100%); box-shadow:0 0 6px rgba(255,56,56,0.6); animation:member-badge-ring-spin 2.4s linear infinite; z-index:0; } .member-badge-ring img{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:#13161f; } @keyframes member-badge-ring-spin{ to{ transform:rotate(360deg); } } /* ===== 会员背包 ===== */ #backpack-lock-icon{ font-size:0.62rem; margin-left:2px; } #me-subtab-backpack{ position:relative; min-height:140px; } .backpack-lock-overlay{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:absolute; inset:0; z-index:5; color:#c7c9d6; font-size:0.8rem; text-align:center; padding:20px; background:rgba(19, 22, 31, 0.4); border-radius:14px; } .backpack-content.backpack-locked{ filter:grayscale(1); opacity:0.5; pointer-events:none; user-select:none; } .backpack-section-title{ font-size:0.8rem; font-weight:600; color:#8b8d9c; margin:0 4px 8px; } .backpack-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:0 4px; } .backpack-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 10px; border-radius:12px; border:1px solid rgba(196, 50, 50, 0.18); background:rgba(28, 31, 43, 0.5); cursor:pointer; box-sizing:border-box; } .backpack-item img{ width:44px; height:44px; object-fit:contain; } .backpack-item.equipped{ border-color:#c43232; box-shadow:0 0 8px rgba(196, 50, 50, 0.5); } .backpack-item-badge{ position:absolute; top:2px; right:2px; font-size:0.5rem; line-height:1.4; background:#c43232; color:#fff; padding:1px 4px; border-radius:6px; } .backpack-item-label{ font-size:0.62rem; color:#c7c9d6; text-align:center; } .backpack-item.diy-empty{ border-style:dashed; color:#8b8d9c; align-items:center; justify-content:center; } .backpack-item.diy-empty .backpack-item-plus{ font-size:20px; line-height:1; color:#8b8d9c; } .backpack-hint{ margin:14px 4px 4px; font-size:0.66rem; color:#8b8d9c; line-height:1.6; } /* ===== 通用装饰叠加：头像框 / 评论气泡皮肤 ===== 由 window.applyAvatarFrameTo(imgEl, frameUrl) / window.applyBubbleSkinTo(bubbleEl, bubbleUrl) 使用， 供“我”页头像、别人主页头像、评论区头像与气泡统一调用（见 js/member.js 底部说明）。 */ .member-avatar-holder{ position:relative; display:inline-block; line-height:0; } .member-avatar-frame-overlay{ position:absolute; inset:-16%; width:132%; height:132%; pointer-events:none; display:none; object-fit:contain; } .member-bubble-skinned{ background-repeat:no-repeat; background-position:center; border-color:transparent !important; }