#wechatAppUI.show { transform: translateX(0); } #wechatAppUI * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #wechatAppUI .page { display: none; width: 100%; height: 100%; min-height: 0; position: absolute; top: 0; left: 0; background-color: transparent; animation: wcFadeIn 0.3s ease; } #wechatAppUI .page.active { display: flex; flex-direction: column; } #wechatAppUI #page-chat-room, #wechatAppUI #page-wc-login, #wechatAppUI #page-wc-register, #wechatAppUI #page-wc-transfer, #wechatAppUI #page-wechat-settings, #wechatAppUI #page-wechat-storage, #wechatAppUI #page-wechat-change-pwd, #wechatAppUI #page-wechat-change-pay-pwd, #wechatAppUI #page-wechat-personalize, #wechatAppUI #page-wechat-chat-manage, #wechatAppUI #page-family-cards, #wechatAppUI #page-wallet-settings, #wechatAppUI #wc-page-emoji-groups, #wechatAppUI #wc-page-emoji-detail { background-color: var(--bg-color); } @keyframes wcFadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* 微信返回主屏幕的悬浮条 */ .wechat-home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 130px; height: 5px; background-color: #000; border-radius: 10px; z-index: 9999; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; } .wechat-home-indicator:active { opacity: 0.8; } #wechatAppUI #page-chat-list { overflow-y: auto; overflow-x: hidden; } #wechatAppUI .list-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px 20px; padding-top: 45px; } /* 修复顶部重合 */ #wechatAppUI .list-header .title { color: var(--tg-blue); font-size: 24px; font-weight: 800; letter-spacing: -0.5px; } #wechatAppUI .list-header .more-btn svg { width: 24px; height: 24px; fill: #000; cursor: pointer; } #wechatAppUI .wc-contact-add-btn { width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,0.72); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); background: rgba(255,255,255,0.58); box-shadow: 0 5px 18px rgba(20,30,45,0.09), inset 0 1px 0 rgba(255,255,255,0.8); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); cursor: pointer; flex: 0 0 42px; } #wechatAppUI .wc-contact-add-btn:active { transform: scale(0.94); background: rgba(235,238,243,0.72); } #wechatAppUI .wc-contact-add-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .search-container { padding: 0 16px 16px 16px; } #wechatAppUI .search-bar { position: relative; bottom: auto; left: auto; transform: none; width: 100%; background-color: var(--search-bg); border-radius: 20px; height: 40px; display: flex; align-items: center; padding: 0 14px; color: #8E8E93; font-size: 16px; font-weight: 600; } /* 修复搜索框跑偏 */ #wechatAppUI .search-bar svg { width: 20px; height: 20px; stroke: #8E8E93; margin-right: 10px; } #wechatAppUI .chat-list { padding-bottom: 120px; } #wechatAppUI .chat-item { display: flex; padding: 10px 16px; align-items: center; cursor: pointer; } #wechatAppUI .chat-item:active { background-color: #f9f9f9; } #wechatAppUI .list-avatar { width: 56px; height: 56px; border-radius: 50%; background-color: #E5E5EA; color: #8E8E93; display: flex; justify-content: center; align-items: center; margin-right: 14px; flex-shrink: 0; } #wechatAppUI .list-avatar svg { width: 32px; height: 32px; fill: currentColor; } #wechatAppUI .list-avatar.orange { background-color: var(--orange); color: #fff; font-size: 22px; font-weight: 700; } #wechatAppUI .chat-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } #wechatAppUI .chat-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } #wechatAppUI .chat-name { font-size: 17px; font-weight: 700; color: var(--text-main); } #wechatAppUI .chat-meta { display: flex; align-items: center; gap: 4px; } #wechatAppUI .check-icon { width: 18px; height: 18px; stroke: var(--check-green); } #wechatAppUI .chat-time { font-size: 13px; color: #8E8E93; font-weight: 600; } #wechatAppUI .chat-row-bottom { font-size: 15px; color: var(--text-sub); font-weight: 600; } #wechatAppUI .fab-container { position: absolute; right: 16px; bottom: 90px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 10; } #wechatAppUI .fab-small { width: 44px; height: 44px; background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); cursor: pointer; color: #000; } #wechatAppUI .fab-small svg { width: 24px; height: 24px; } #wechatAppUI .fab-large { width: 56px; height: 56px; background-color: var(--tg-blue); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 14px rgba(51, 144, 236, 0.4); cursor: pointer; color: #fff; } #wechatAppUI .fab-large svg { width: 28px; height: 28px; } #wechatAppUI .wc-add-friend-fab { padding: 0; border: 0; font: inherit; } #wechatAppUI .wc-add-friend-fab:active { transform: scale(0.94); } #wechatAppUI .bottom-nav-wrapper { display: block; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 340px; z-index: 100; } /* 修复底部胶囊挤压 */ #wechatAppUI .bottom-nav { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 28px; padding: 4px 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.6); border: 1px solid rgba(230, 230, 230, 0.4); } #wechatAppUI .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8E8E93; font-size: 11px; font-weight: 700; flex: 1; padding: 4px 0 3px 0; border-radius: 20px; transition: all 0.2s; cursor: pointer; } #wechatAppUI .nav-item.active { color: var(--tg-blue); background-color: #EAF4FF; } #wechatAppUI .nav-icon-wrapper { display: flex; justify-content: center; align-items: center; height: 26px; } #wechatAppUI .nav-item svg { width: 26px; height: 26px; fill: currentColor; } #wechatAppUI .nav-item span { line-height: 1; margin-top: 0px; } #wechatAppUI .chat-header-container { position: absolute; top: 45px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; z-index: 100; pointer-events: none; } /* 修复顶部重合 */ #wechatAppUI .frosted-glass { background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(230, 230, 230, 0.6); box-shadow: 0 4px 20px rgba(0,0,0,0.06); pointer-events: auto; } #wechatAppUI .room-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s; } #wechatAppUI .room-icon-btn:active { background-color: rgba(230, 230, 230, 0.8); } #wechatAppUI .room-icon-btn svg { width: 22px; height: 22px; stroke: #000; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .room-icon-btn.fill-icon svg { fill: #000; stroke: none; } #wechatAppUI .room-info-capsule { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 4px 12px 4px 4px; margin: 0 12px; min-width: 0; } #wechatAppUI .room-info-capsule .avatar { width: 34px; height: 34px; border-radius: 50%; background-color: var(--orange); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 700; margin-right: 10px; flex-shrink: 0; } #wechatAppUI .room-info-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; } #wechatAppUI .room-info-text .name { font-size: 15px; font-weight: 800; line-height: 1.2; } #wechatAppUI .room-info-text .sub { font-size: 11px; color: var(--text-sub); font-weight: 600; line-height: 1.2; margin-top: 2px; } #wechatAppUI .room-info-text .sub.wc-api-typing::after { content: '...'; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: wc-api-typing-dots 1s ease-in-out infinite; } #wechatAppUI .chat-msg-row .msg.wc-contact-api-typing::after { content: '...'; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: wc-api-typing-dots 1s ease-in-out infinite; } @keyframes wc-api-typing-dots { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } #wechatAppUI .dropdown-menu { position: absolute; top: 95px; right: 16px; width: 220px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04); padding: 8px 0; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transform-origin: top right; transition: all 0.2s cubic-bezier(0.1, 0.8, 0.2, 1); pointer-events: auto; } /* 修复顶部重合 */ #wechatAppUI .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #wechatAppUI .menu-item { display: flex; align-items: center; padding: 12px 16px; gap: 14px; cursor: pointer; transition: background-color 0.2s; } #wechatAppUI .menu-item:active { background-color: #F1F1F4; } #wechatAppUI .menu-item svg { width: 22px; height: 22px; stroke: #000; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .menu-item span { font-size: 16px; font-weight: 600; color: #000; } #wechatAppUI .chat-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; padding-top: 100px; padding-bottom: 100px; display: flex; flex-direction: column; } /* 修复顶部重合 */ #wechatAppUI .sys-badge { background-color: rgba(0, 0, 0, 0.15); color: #ffffff; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 14px; align-self: center; margin-bottom: 20px; } #wechatAppUI .wc-center-timestamp { text-align: center; font-size: 12px; color: #8e8e93; margin: 16px 0; font-weight: 500; align-self: center; } #wechatAppUI .message-row { display: flex; align-items: flex-start; margin-bottom: 14px; max-width: 100%; position: relative; } #wechatAppUI .message-row.received { align-self: flex-start; padding-right: 15%; } #wechatAppUI .message-row.sent { align-self: flex-end; flex-direction: row-reverse; padding-left: 15%; } #wechatAppUI .msg-avatar { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #E5E5EA; background-size: cover; background-position: center; flex-shrink: 0; position: relative; margin: 0 8px; } #wechatAppUI .msg-avatar::after { content: ''; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 2; } #wechatAppUI .wc-msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; } #wechatAppUI .wc-cot-bubble { background: #ffffff; border-radius: 20px; padding: 12px 16px; margin-bottom: 16px; margin-left: 56px; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.06); cursor: pointer; max-width: 260px; color: #666; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; transition: all 0.2s ease; } #wechatAppUI .wc-cot-bubble:active { opacity: 0.8; } /* 气泡左下方延伸出的小尾巴 */ #wechatAppUI .wc-cot-bubble::before { content: ''; position: absolute; bottom: -6px; left: 10px; width: 16px; height: 16px; background: #ffffff; border-bottom-right-radius: 16px; transform: rotate(30deg) skewX(-10deg); z-index: -1; } /* 悬浮在头像正上方的小圆点 */ #wechatAppUI .wc-cot-bubble::after { content: ''; position: absolute; bottom: -16px; left: -12px; width: 10px; height: 10px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } #wechatAppUI .wc-cot-bubble-content { display: flex; align-items: flex-start; gap: 6px; } #wechatAppUI .wc-cot-text { flex: 1; } #wechatAppUI .message-row.group-top, #wechatAppUI .message-row.group-mid { margin-bottom: 20px; } #wechatAppUI .message-bubble { padding: 8px 14px; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 1; margin-bottom: 18px; min-height: 36px; max-width: 100%; } #wechatAppUI .msg-text { font-size: 16px; color: #000; line-height: 1.4; word-break: break-word; } #wechatAppUI .msg-meta { font-size: 11px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; gap: 2px; position: absolute; bottom: -18px; white-space: nowrap; } #wechatAppUI .message-bubble.received { background-color: #F2F2F7; border-radius: 18px; color: #000; } #wechatAppUI .message-bubble.received.group-top { border-radius: 18px; } #wechatAppUI .message-bubble.received.group-mid { border-radius: 18px; } #wechatAppUI .message-bubble.received.group-bottom { border-radius: 18px; } #wechatAppUI .message-bubble.received .msg-text { color: #000; } #wechatAppUI .message-bubble.received .msg-meta { left: 4px; color: #8E8E93; } #wechatAppUI .message-bubble.received.tail::before { display: none; } #wechatAppUI .message-bubble.sent { background-color: #000000; border-radius: 18px; color: #fff; } #wechatAppUI .message-bubble.sent.group-top { border-radius: 18px; } #wechatAppUI .message-bubble.sent.group-mid { border-radius: 18px; } #wechatAppUI .message-bubble.sent.group-bottom { border-radius: 18px; } #wechatAppUI .message-bubble.sent .msg-text { color: #fff; } #wechatAppUI .message-bubble.sent .msg-meta { right: 4px; color: rgba(0,0,0,0.4); } #wechatAppUI .msg-meta.sent svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .message-bubble.sent.tail::before { display: none; } #wechatAppUI .message-bubble.wc-link-message-bubble { width: min(270px, 100%); padding: 0; gap: 8px; background: transparent !important; box-shadow: none; } #wechatAppUI .wc-link-message-caption { max-width: 100%; padding: 8px 12px; border-radius: 18px; background: #000; color: #fff; } #wechatAppUI .message-bubble.received .wc-link-message-caption { background: #F2F2F7; color: #000; } #wechatAppUI .bubble-share { width: 250px; background-color: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } #wechatAppUI .share-content { padding: 12px; display: flex; gap: 10px; } #wechatAppUI .share-text-area { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } #wechatAppUI .share-title { font-size: 15px; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; margin-bottom: 4px; } #wechatAppUI .share-desc { font-size: 12px; color: #999; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #wechatAppUI .share-summary { margin-top: 5px; font-size: 12px; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; } #wechatAppUI .share-comments { margin-top: 5px; font-size: 11px; color: #8b8b8b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } #wechatAppUI .share-thumb { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background-color: #f0f0f0; } #wechatAppUI .share-footer { padding: 4px 12px 8px 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #999; border-top: 0.5px solid #f5f5f5; } #wechatAppUI .share-app-icon { width: 12px; height: 12px; border-radius: 2px; } #wechatAppUI .message-bubble.wc-file-message-bubble { width: min(270px, 100%); padding: 0; background: transparent !important; box-shadow: none; } #wechatAppUI .message-bubble.wc-image-message-bubble { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; } #wechatAppUI .message-bubble.wc-image-message-bubble::before { display: none !important; } #wechatAppUI .wc-chat-file-card { width: 100%; min-height: 98px; padding: 13px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 11px; row-gap: 9px; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color: #161616; } #wechatAppUI .wc-chat-file-icon { width: 44px; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; align-self: center; color: #fff; background: #737C8C; font-size: 10px; font-weight: 800; letter-spacing: 0; } #wechatAppUI .wc-chat-file-icon.wc-chat-file-docx { background: #2B72D6; } #wechatAppUI .wc-chat-file-icon.wc-chat-file-txt { background: #64748B; } #wechatAppUI .wc-chat-file-copy { min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 5px; } #wechatAppUI .wc-chat-file-name { overflow: hidden; color: #202124; font-size: 15px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } #wechatAppUI .wc-chat-file-meta { color: #8E8E93; font-size: 12px; line-height: 1.25; } #wechatAppUI .wc-chat-file-preview { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; padding-top: 9px; border-top: 1px solid #F0F0F0; color: #757575; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; } /* 微信语音消息样式 */ #wechatAppUI .wc-voice-container { display: flex; flex-direction: column; min-width: 140px; } #wechatAppUI .wc-voice-content { display: flex; align-items: center; gap: 6px; padding: 4px 0; } /* 控制语音气泡内部头像的左右位置 */ #wechatAppUI .message-bubble.received .wc-voice-content { flex-direction: row-reverse; } #wechatAppUI .message-bubble.received .wc-voice-avatar-wrap { margin-right: 0; margin-left: 6px; } #wechatAppUI .message-bubble.sent .wc-voice-content { flex-direction: row; } #wechatAppUI .message-bubble.sent .wc-voice-avatar-wrap { margin-right: 6px; margin-left: 0; } #wechatAppUI .wc-voice-play { width: 14px; height: 14px; color: #000; opacity: 0.6; flex-shrink: 0; } #wechatAppUI .message-bubble.sent .wc-voice-play { color: #fff; opacity: 0.8; } #wechatAppUI .wc-voice-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #000; } #wechatAppUI .message-bubble.sent .wc-voice-dot { background-color: #fff; } #wechatAppUI .wc-voice-avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; } #wechatAppUI .wc-voice-avatar { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; background-color: #E5E5EA; display: flex; justify-content: center; align-items: center; overflow: hidden; } #wechatAppUI .wc-voice-mic-badge { position: absolute; bottom: -2px; right: -4px; width: 16px; height: 16px; background: transparent; display: flex; justify-content: center; align-items: center; box-shadow: none; } #wechatAppUI .wc-voice-mic-badge svg { width: 12px; height: 12px; stroke: #8e8e93; fill: none; stroke-width: 2.5; filter: drop-shadow(0.5px 0.5px 0px #fff) drop-shadow(-0.5px -0.5px 0px #fff) drop-shadow(0.5px -0.5px 0px #fff) drop-shadow(-0.5px 0.5px 0px #fff); } #wechatAppUI .wc-voice-waves { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1; justify-content: flex-start; } @keyframes wcVoiceWaveAnim { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.2); } } #wechatAppUI .wc-voice-wave { width: 2px; background-color: #000; border-radius: 1px; opacity: 0.4; animation: wcVoiceWaveAnim 1s ease-in-out infinite; transform-origin: center; } #wechatAppUI .message-bubble.sent .wc-voice-wave { background-color: #fff; opacity: 0.6; } #wechatAppUI .wc-voice-duration { font-size: 13px; color: #8E8E93; font-weight: 500; flex-shrink: 0; } #wechatAppUI .message-bubble.sent .wc-voice-duration { color: rgba(255,255,255,0.8); } #wechatAppUI .wc-voice-text { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.1); font-size: 16px; color: #000; word-break: break-word; } #wechatAppUI .message-bubble.sent .wc-voice-text { border-top-color: rgba(255,255,255,0.2); color: #fff; } #wechatAppUI .wc-voice-container.show-text .wc-voice-text { display: block; } /* iMessage 风格思考气泡 */ #wechatAppUI .wc-thinking-dots { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; padding: 0 4px; } #wechatAppUI .wc-thinking-dots span { width: 6px; height: 6px; background-color: #8e8e93; border-radius: 50%; animation: wc-thinking-bounce 1.4s infinite ease-in-out both; } #wechatAppUI .wc-thinking-dots span:nth-child(1) { animation-delay: -0.32s; } #wechatAppUI .wc-thinking-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes wc-thinking-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } #wechatAppUI .footer-capsule { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); left: 16px; right: 16px; height: 52px; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(230, 230, 230, 0.6); border-radius: 26px; display: flex; align-items: center; padding: 0 6px 0 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); z-index: 100; gap: 12px; } #wechatAppUI .footer-capsule .tool-icon { width: 26px; height: 26px; color: var(--text-sub); cursor: pointer; flex-shrink: 0; } #wechatAppUI .footer-capsule input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 16px; font-weight: 600; color: var(--text-main); } #wechatAppUI .footer-capsule input::placeholder { color: var(--text-sub); } #wechatAppUI .room-send-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--tg-blue); display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 8px rgba(51, 144, 236, 0.3); transition: transform 0.1s; } #wechatAppUI .room-send-btn:active { transform: scale(0.9); } #wechatAppUI .room-send-btn svg { width: 20px; height: 20px; fill: currentColor; margin-right: 2px; margin-top: 1px; } /* 微信功能面板样式 */ #wechatAppUI .wc-function-panel { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 16px 16px 0 0; border-top: 1px solid rgba(230, 230, 230, 0.6); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); height: 300px; overflow-y: auto; display: flex; flex-direction: column; padding: 20px 16px calc(36px + env(safe-area-inset-bottom, 20px)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); z-index: 90; -webkit-overflow-scrolling: touch; } #wechatAppUI .wc-function-panel.show { transform: translateY(0); } #wechatAppUI .wc-function-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 14px; padding-bottom: 20px; } #wechatAppUI .wc-function-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: transform 0.1s; } #wechatAppUI .wc-function-item:active { transform: scale(0.9); } #wechatAppUI .wc-function-icon { width: 60px; height: 60px; background-color: transparent; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-function-icon svg { width: 28px; height: 28px; stroke: #333; } #wechatAppUI .wc-function-text { font-size: 11px; color: #8e8e93; text-align: center; } /* 微信表情面板样式 */ #wechatAppUI .wc-emoji-panel { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 16px 16px 0 0; border-top: 1px solid rgba(230, 230, 230, 0.6); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); height: 280px; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 15px); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); z-index: 90; } #wechatAppUI .wc-emoji-panel.show { transform: translateY(0); } #wechatAppUI .wc-emoji-panel-header { display: flex; flex-direction: column; padding: 14px 16px 10px 16px; min-height: 36px; justify-content: center; } #wechatAppUI .wc-capsule-group { display: flex; background: rgba(0, 0, 0, 0.06); border-radius: 999px; padding: 2px; margin: 0 auto; width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #wechatAppUI .wc-capsule-group::-webkit-scrollbar { display: none; } #wechatAppUI .wc-capsule-item { flex-shrink: 0; padding: 3px 16px; font-size: 12px; color: #666; border-radius: 999px; cursor: pointer; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); text-align: center; user-select: none; -webkit-user-select: none; font-weight: bold; display: flex; align-items: center; justify-content: center; } #wechatAppUI .wc-capsule-item.active { background: #ffffff; color: #333; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } #wechatAppUI .wc-search-trigger { padding: 3px 14px; gap: 4px; } #wechatAppUI .wc-search-trigger svg { width: 14px; height: 14px; stroke: #666; stroke-width: 2.5; flex-shrink: 0; } #wechatAppUI .wc-search-view { display: none; align-items: center; gap: 12px; width: 100%; } #wechatAppUI .wc-search-view.show { display: flex; } #wechatAppUI .wc-search-box { flex: 1; background: rgba(0, 0, 0, 0.06); border-radius: 20px; padding: 6px 14px; display: flex; align-items: center; gap: 8px; } #wechatAppUI .wc-search-box svg { width: 16px; height: 16px; stroke: #888; } #wechatAppUI .wc-search-box input { border: none; background: transparent; outline: none; font-size: 14px; color: #333; width: 100%; font-weight: bold; } #wechatAppUI .wc-search-box input::placeholder { color: #888; font-weight: bold; } #wechatAppUI .wc-cancel-btn { font-size: 14px; color: #576b95; cursor: pointer; font-weight: bold; white-space: nowrap; } #wechatAppUI .wc-panel-content { flex: 1; display: flex; justify-content: center; align-items: center; color: #888; font-size: 15px; letter-spacing: 0.5px; font-weight: bold; } #wechatAppUI .modal-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } #wechatAppUI .modal-wrapper.show { opacity: 1; visibility: visible; } #wechatAppUI .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(28, 28, 30, 0.85); } #wechatAppUI .theme-header { position: absolute; top: 45px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 44px; } /* 修复顶部重合 */ #wechatAppUI .theme-back { position: absolute; left: 20px; color: #fff; cursor: pointer; display: flex; align-items: center; } #wechatAppUI .theme-back svg { width: 28px; height: 28px; stroke: currentColor; } #wechatAppUI .theme-title { color: #fff; font-size: 17px; font-weight: 700; transition: all 0.3s; } #wechatAppUI .theme-capsule { position: absolute; top: 95px; left: 50%; transform: translateX(-50%); background: #ffffff; border-radius: 40px; display: flex; align-items: center; padding: 10px 24px 10px 12px; gap: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); transition: all 0.3s; z-index: 10; white-space: nowrap; } /* 修复顶部重合 */ #wechatAppUI .theme-capsule-icon { width: 44px; height: 44px; background: #8E8E93; border-radius: 16px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } #wechatAppUI .theme-capsule-icon svg { width: 24px; height: 24px; fill: #ffffff; transition: all 0.3s; } #wechatAppUI .theme-capsule-text { font-size: 18px; font-weight: 800; color: #000; } #wechatAppUI .theme-cards-container { position: absolute; bottom: 0; left: 0; right: 0; height: 68%; display: flex; flex-direction: column; align-items: center; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.1, 0.8, 0.2, 1); } #wechatAppUI .modal-wrapper.show .theme-cards-container { transform: translateY(0); } #wechatAppUI .theme-card-bg { position: absolute; top: 0; left: 10%; right: 10%; height: 40px; background: #E5E5EA; border-radius: 24px; } #wechatAppUI .theme-card-main { position: absolute; top: 16px; left: 4%; right: 4%; bottom: 24px; background: #ffffff; border-radius: 32px; padding: 16px 20px; display: flex; flex-direction: column; overflow: hidden; } #wechatAppUI .modal-drag-bar { width: 60px; height: 6px; background: #D1D1D6; border-radius: 3px; margin: 0 auto 16px auto; flex-shrink: 0; } #wechatAppUI .view-container { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; } #wechatAppUI .view-container::-webkit-scrollbar { display: none; } #wechatAppUI #theme-menu-view { display: flex; } #wechatAppUI .modal-item { display: flex; align-items: center; background: #F2F2F7; padding: 16px; border-radius: 20px; gap: 16px; cursor: pointer; flex-shrink: 0; } #wechatAppUI .modal-item:active { background: #E5E5EA; } #wechatAppUI .modal-item-icon { width: 36px; height: 36px; background: #A1A1AA; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #fff; flex-shrink: 0; } #wechatAppUI .modal-item-icon svg { width: 22px; height: 22px; fill: currentColor; } #wechatAppUI .modal-item-text { flex: 1; font-size: 17px; font-weight: 700; color: #000; } #wechatAppUI .modal-item-dot { width: 14px; height: 14px; background: #A1A1AA; border-radius: 50%; } #wechatAppUI .modal-item-arrow { width: 20px; height: 20px; flex-shrink: 0; } /* 新增：限制箭头大小并防止压缩 */ #wechatAppUI .custom-toggle { position: relative; width: 52px; height: 30px; background: #A1A1AA; border-radius: 15px; cursor: pointer; transition: background 0.3s; flex-shrink: 0; } #wechatAppUI .custom-toggle.active { background: #333333; } #wechatAppUI .custom-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform 0.3s; display: flex; justify-content: center; align-items: center; } #wechatAppUI .custom-toggle.active .thumb { transform: translateX(22px); } #wechatAppUI .custom-toggle .thumb svg { width: 14px; height: 14px; fill: #A1A1AA; transition: fill 0.3s; } #wechatAppUI .custom-toggle.active .thumb svg { fill: #333333; } #wechatAppUI #theme-preset-view { display: none; } #wechatAppUI .preset-item-wrapper { position: relative; border-radius: 20px; background: #E5E5EA; flex-shrink: 0; overflow: hidden; } #wechatAppUI .preset-item-content { position: relative; z-index: 2; display: flex; align-items: center; background: #F2F2F7; padding: 14px; border-radius: 20px; gap: 14px; transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.2, 1); } #wechatAppUI .preset-icon { width: 52px; height: 52px; background: #fff; border-radius: 14px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } #wechatAppUI .preset-icon svg { width: 30px; height: 30px; fill: #8E8E93; } #wechatAppUI .preset-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } #wechatAppUI .preset-title { font-size: 16px; font-weight: 800; color: #000; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .preset-author { font-size: 12px; color: #8E8E93; font-weight: 600; } #wechatAppUI .preset-item-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding-right: 14px; gap: 8px; z-index: 1; } #wechatAppUI .action-capsule { padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; } #wechatAppUI .action-capsule:active { opacity: 0.8; } #wechatAppUI .action-capsule.edit { background: #3390EC; } #wechatAppUI .action-capsule.delete { background: #FF3B30; } #wechatAppUI #theme-custom-view { display: none; flex-direction: column; height: 100%; } #wechatAppUI .custom-textarea-wrapper { flex: 1; background: #F2F2F7; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; } #wechatAppUI .custom-textarea-wrapper textarea { flex: 1; background: transparent; border: none; outline: none; resize: none; font-size: 15px; font-family: monospace; color: #333; line-height: 1.5; } #wechatAppUI .custom-textarea-wrapper textarea::placeholder { color: #A1A1AA; } #wechatAppUI .custom-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; flex-shrink: 0; } #wechatAppUI .btn-primary { background: var(--tg-blue); color: #fff; border: none; border-radius: 20px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; } #wechatAppUI .btn-primary:active { opacity: 0.8; } #wechatAppUI .btn-secondary { background: #E5E5EA; color: #000; border: none; border-radius: 20px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; } #wechatAppUI .btn-secondary:active { background: #D1D1D6; } #wechatAppUI .wc-custom-preview { position: absolute; top: 95px; left: 50%; transform: translateX(-50%); width: 85%; height: 140px; background: #ffffff; border-radius: 24px; padding: 16px; display: none; flex-direction: column; justify-content: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 10; overflow: hidden; } #wechatAppUI .wc-custom-preview .message-row { margin-bottom: 0 !important; } #wechatAppUI .wc-custom-preview .message-bubble { margin-bottom: 0 !important; } #wechatAppUI .wc-font-item.active-font { background: var(--tg-blue) !important; } #wechatAppUI .wc-font-item.active-font .modal-item-text { color: #fff !important; } #wechatAppUI .wc-font-item.active-font svg { stroke: #fff !important; } #wechatAppUI .wc-frame-grid-item { aspect-ratio: 1; background: #F2F2F7; border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s; } #wechatAppUI .wc-frame-grid-item:active { transform: scale(0.95); } #wechatAppUI .wc-frame-grid-img { width: 80%; height: 80%; background-size: contain; background-position: center; background-repeat: no-repeat; } /* 微信聊天壁纸库样式 */ #wechatAppUI .wc-bg-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px 16px; gap: 16px; } #wechatAppUI .wc-bg-carousel::-webkit-scrollbar { display: none; } #wechatAppUI .wc-bg-card { flex: 0 0 140px; height: 260px; border-radius: 16px; scroll-snap-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; cursor: pointer; } #wechatAppUI .wc-bg-card:active { transform: scale(0.96); } #wechatAppUI .wc-bg-add-box { flex: 0 0 140px; height: 260px; border-radius: 16px; border: 2px dashed #c7c7cc; display: flex; flex-direction: column; justify-content: center; align-items: center; scroll-snap-align: center; cursor: pointer; background: transparent; gap: 10px; transition: background 0.2s; } #wechatAppUI .wc-bg-add-box:active { background: rgba(0,0,0,0.05); } #wechatAppUI .wc-bg-add-box svg { width: 32px; height: 32px; stroke: #8e8e93; } #wechatAppUI .wc-bg-add-box span { font-size: 14px; color: #8e8e93; font-weight: 600; } #wechatAppUI .wc-bg-img { width: 100%; height: 100%; background-size: cover; background-position: center; } #wechatAppUI .wc-bg-delete-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: rgba(255,59,48,0.85); backdrop-filter: blur(4px); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; z-index: 10; } #wechatAppUI .wc-bg-delete-btn svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.5; } #wechatAppUI .wc-bg-selected-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid var(--tg-blue); border-radius: 16px; pointer-events: none; display: none; box-sizing: border-box; } #wechatAppUI .wc-bg-card.selected .wc-bg-selected-border { display: block; } #wechatAppUI .wc-bg-card.selected::after { content: '使用中'; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(51, 144, 236, 0.95); color: #fff; text-align: center; font-size: 12px; padding: 6px 0; font-weight: bold; } /* 微信联系人页面样式 */ #wechatAppUI .wc-top-tabs { display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--ios-separator); position: relative; overflow-x: auto; scrollbar-width: none; gap: 24px; } #wechatAppUI .wc-top-tabs::-webkit-scrollbar { display: none; } #wechatAppUI .wc-tab-item { font-size: 15px; font-weight: 500; color: var(--text-sub); padding: 10px 0 6px 0; cursor: pointer; position: relative; transition: color 0.2s; white-space: nowrap; } #wechatAppUI .wc-tab-item.active { color: var(--tg-blue); font-weight: 600; } #wechatAppUI .wc-tab-item.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--tg-blue); border-radius: 0; } #wechatAppUI .wc-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 120px; } #wechatAppUI .wc-scroll-area::-webkit-scrollbar { display: none; } #wechatAppUI .wc-status-hint { font-size: 12px; color: var(--text-sub); padding: 0 20px; margin-top: 8px; margin-bottom: 0px; display: flex; align-items: center; gap: 6px; } #wechatAppUI .wc-list-group { border-radius: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; overflow: hidden; } #wechatAppUI .wc-swipe-wrapper { position: relative; background-color: transparent; } #wechatAppUI .wc-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; width: 100%; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } #wechatAppUI .wc-swipe-wrapper.swiping .wc-swipe-actions, #wechatAppUI .wc-swipe-wrapper.swiped .wc-swipe-actions { opacity: 1; visibility: visible; pointer-events: auto; } #wechatAppUI .wc-swipe-btn { width: 80px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; background-color: #3390EC; } #wechatAppUI .wc-character-card { background-color: transparent; display: flex; align-items: center; padding-left: 20px; padding-right: 20px; position: relative; z-index: 2; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-bottom: none !important; box-shadow: none !important; } #wechatAppUI .wc-character-card:active { background-color: var(--surface-color); } #wechatAppUI .wc-character-card .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #e5e5ea; margin-right: 14px; flex-shrink: 0; background-size: cover; background-position: center; } #wechatAppUI .wc-character-card .info-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 0; min-height: 64px; } #wechatAppUI .wc-character-card .name { font-size: 17px; font-weight: 600; color: var(--text-main); margin-bottom: 2px; } #wechatAppUI .wc-character-card .desc { font-size: 14px; color: var(--text-sub); } #wechatAppUI .wc-character-card.wc-search-match { animation: wcContactMatch 1.6s ease; } #wechatAppUI .wc-add-friend-panel { position: absolute; inset: 0; z-index: 950; display: flex; align-items: flex-end; background: rgba(0,0,0,0.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.24s ease, visibility 0.24s; } #wechatAppUI .wc-add-friend-panel.show { opacity: 1; visibility: visible; pointer-events: auto; } #wechatAppUI.wc-add-friend-open > .bottom-nav-wrapper { opacity: 0; visibility: hidden; pointer-events: none; } #wechatAppUI .wc-add-friend-drawer { width: 100%; max-height: calc(100% - 64px); min-height: 72%; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px 20px 0 0; background: rgba(242, 242, 247, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32,0.72,0,1); } #wechatAppUI .wc-add-friend-panel.show .wc-add-friend-drawer { transform: translateY(0); } #wechatAppUI .wc-add-friend-header { min-height: 66px; padding: 10px 18px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #wechatAppUI .wc-add-friend-handle { width: 36px; height: 5px; flex: 0 0 5px; margin-bottom: 11px; border-radius: 3px; background: #d1d1d6; } #wechatAppUI .wc-add-friend-header h2 { margin: 0; text-align: center; font-size: 19px; line-height: 1.2; font-weight: 750; color: #1c1c1e; letter-spacing: 0; } #wechatAppUI .wc-add-friend-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 34px; } #wechatAppUI .wc-add-friend-search { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(0,0,0,0.08); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 16px; } #wechatAppUI .wc-add-friend-search > svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: #8e8e93; stroke-width: 2; stroke-linecap: round; } #wechatAppUI .wc-add-friend-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #1c1c1e; font: inherit; font-size: 16px; } #wechatAppUI .wc-add-friend-search input::placeholder { color: #8e8e93; } #wechatAppUI .wc-add-friend-actions { margin-top: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #wechatAppUI .wc-add-friend-action { width: 100%; min-height: 76px; padding: 11px 14px; border: 0; display: flex; align-items: center; gap: 13px; background: transparent; color: #1c1c1e; text-align: left; cursor: pointer; } #wechatAppUI .wc-add-friend-action + .wc-add-friend-action { border-top: 0.5px solid rgba(60,60,67,0.16); } #wechatAppUI .wc-add-friend-action:active { background: rgba(0,0,0,0.05); } #wechatAppUI .wc-add-friend-action-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; } #wechatAppUI .wc-add-friend-action:nth-child(1) .wc-add-friend-action-icon { background: linear-gradient(180deg, #4bb0ff 0%, #007aff 100%); border: 1px solid rgba(0, 0, 0, 0.04); } #wechatAppUI .wc-add-friend-action:nth-child(2) .wc-add-friend-action-icon { background: linear-gradient(180deg, #4cd964 0%, #28b84d 100%); border: 1px solid rgba(0, 0, 0, 0.04); } #wechatAppUI .wc-add-friend-action-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-add-friend-action:nth-child(2) .wc-add-friend-action-icon svg { stroke: none; } #wechatAppUI #User-Profile-Focus--Streamline-Core { stroke: none; } #wechatAppUI #User-Profile-Focus--Streamline-Core path { fill: currentColor; } #wechatAppUI .wc-add-friend-action-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } #wechatAppUI .wc-add-friend-action-copy strong { font-size: 16px; line-height: 1.25; font-weight: 500; } #wechatAppUI .wc-add-friend-action-copy small { color: #8e8e93; font-size: 12px; line-height: 1.3; } #wechatAppUI .wc-add-friend-chevron { width: 18px; height: 18px; flex: 0 0 18px; stroke: #b6a8ae; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes wcContactMatch { 0%, 100% { background: var(--bg-color); } 20%, 72% { background: rgba(255, 214, 232, 0.78); } } #wechatAppUI .wc-action-sheet-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #wechatAppUI .wc-action-sheet-overlay.show { opacity: 1; pointer-events: auto; } #wechatAppUI .wc-action-sheet { transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } #wechatAppUI .wc-action-sheet-overlay.show .wc-action-sheet { transform: translateY(0); } #wechatAppUI .wc-sheet-group { background: rgba(242, 242, 247, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; margin-bottom: 8px; overflow: hidden; max-height: 400px; overflow-y: auto; } #wechatAppUI .wc-sheet-title { padding: 12px; text-align: center; font-size: 13px; color: var(--text-sub); border-bottom: 0.5px solid rgba(0,0,0,0.1); } #wechatAppUI .wc-sheet-btn { padding: 16px; text-align: center; font-size: 20px; color: var(--tg-blue); background: transparent; border-bottom: 0.5px solid rgba(0,0,0,0.1); cursor: pointer; } #wechatAppUI .wc-sheet-btn:last-child { border-bottom: none; } #wechatAppUI .wc-sheet-btn:active { background: rgba(0,0,0,0.05); } #wechatAppUI .wc-sheet-cancel { background: #fff; border-radius: 14px; padding: 16px; text-align: center; font-size: 20px; font-weight: 600; color: var(--tg-blue); cursor: pointer; } /* User 面具抽屉 (半屏 Drawer) 样式 */ #wechatAppUI .wc-user-drawer-overlay { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: flex-end; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; } #wechatAppUI .wc-user-drawer-overlay.show { opacity: 1; visibility: visible; } #wechatAppUI .wc-user-drawer { width: 100%; max-height: 80%; min-height: 40%; display: flex; flex-direction: column; background: #F2F2F7; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: env(safe-area-inset-bottom, 20px); } #wechatAppUI .wc-user-drawer-overlay.show .wc-user-drawer { transform: translateY(0); } #wechatAppUI .wc-user-drawer-header { padding: 12px 16px 16px; display: flex; flex-direction: column; align-items: center; border-bottom: 0.5px solid rgba(0,0,0,0.1); flex-shrink: 0; } #wechatAppUI .wc-user-drawer-handle { width: 36px; height: 5px; background: #D1D1D6; border-radius: 3px; margin-bottom: 12px; } #wechatAppUI .wc-user-drawer-title { font-size: 17px; font-weight: 700; color: #000; } #wechatAppUI .wc-user-drawer-body { flex: 1; overflow-y: auto; padding: 16px; } #wechatAppUI .wc-user-drawer-item { display: flex; align-items: center; padding: 12px 16px; background: #fff; border-radius: 16px; margin-bottom: 12px; cursor: pointer; transition: transform 0.1s, background-color 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } #wechatAppUI .wc-user-drawer-item:last-child { margin-bottom: 0; } #wechatAppUI .wc-user-drawer-item:active { background: #E5E5EA; transform: scale(0.98); } #wechatAppUI .wc-user-drawer-avatar { width: 44px; height: 44px; border-radius: 50%; background-color: #E5E5EA; margin-right: 14px; flex-shrink: 0; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #8E8E93; font-size: 18px; } #wechatAppUI .wc-user-drawer-name { font-size: 17px; color: #000; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 微信表情包管理专属样式 */ #wechatAppUI .scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } #wechatAppUI .scroll-area::-webkit-scrollbar { display: none; } #wechatAppUI .wc-browser-header { padding: 45px 16px 10px 16px; background-color: #fdfdfd; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; flex-shrink: 0; } #wechatAppUI .wc-browser-controls { display: flex; gap: 10px; align-items: center; color: #c7c7cc; cursor: pointer; padding: 4px 0; } #wechatAppUI .wc-browser-controls:active { opacity: 0.6; } #wechatAppUI .wc-control-btn { display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-browser-address-bar { flex: 1; margin: 0 16px; height: 28px; background-color: #f5f5f5; border: 1px solid #ebebeb; border-radius: 2px; display: flex; align-items: center; color: #b0b0b0; font-size: 14px; font-weight: 500; letter-spacing: 1px; overflow: hidden; } #wechatAppUI .wc-browser-search-icon-box { width: 32px; height: 100%; background-color: #ffffff; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } #wechatAppUI .wc-browser-address-text { flex: 1; text-align: center; padding-right: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-browser-actions { display: flex; align-items: center; } #wechatAppUI .wc-action-btn-plus { font-size: 26px; color: #b0b0b0; cursor: pointer; line-height: 1; font-weight: 300; } #wechatAppUI .wc-action-btn-plus:active { color: #000; } #wechatAppUI .wc-emoji-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 16px; } #wechatAppUI .wc-emoji-group-card { display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s; } #wechatAppUI .wc-emoji-group-card:active { transform: scale(0.96); } #wechatAppUI .wc-window-card { background-color: #ffffff; border: 1.5px solid #e6e6e6; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.03); } #wechatAppUI .wc-window-header { height: 24px; border-bottom: 1.5px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; background-color: #fffcfd; } #wechatAppUI .wc-window-count { font-size: 12px; font-weight: 700; color: #8e8e93; font-family: monospace; } #wechatAppUI .wc-window-dots { display: flex; gap: 4px; align-items: center; } #wechatAppUI .wc-window-dot { width: 7px; height: 7px; border-radius: 50%; } #wechatAppUI .wc-window-dot:nth-child(1) { background-color: #d1d1d6; } #wechatAppUI .wc-window-dot:nth-child(2) { background-color: #a1a1aa; } #wechatAppUI .wc-window-dot:nth-child(3) { background-color: #636366; } #wechatAppUI .wc-window-body { padding: 6px; aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background-color: #ffffff; } #wechatAppUI .wc-preview-cell { background-color: #f2f2f7; border-radius: 6px; background-size: contain; background-position: center; background-repeat: no-repeat; } #wechatAppUI .wc-preview-mini-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; } #wechatAppUI .wc-preview-mini-cell { background-color: #f2f2f7; border-radius: 3px; background-size: contain; background-position: center; background-repeat: no-repeat; } #wechatAppUI .wc-create-group-body { display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; aspect-ratio: 1; } #wechatAppUI .wc-create-group-body svg { width: 40px; height: 40px; stroke: #c7c7cc; stroke-width: 2; fill: none; } #wechatAppUI .wc-group-info { padding: 8px 4px 0; display: flex; justify-content: center; } #wechatAppUI .wc-group-name { font-size: 14px; font-weight: 600; color: #000; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-detail-header { display: flex; padding: 20px 16px; gap: 16px; border-bottom: 1px solid rgba(0,0,0,0.05); } #wechatAppUI .wc-detail-cover { width: 90px; height: 90px; background-color: #f2f2f7; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 4px; flex-shrink: 0; } #wechatAppUI .wc-detail-cover-img { width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 6px; } #wechatAppUI .wc-detail-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } #wechatAppUI .wc-detail-title { font-size: 18px; font-weight: 700; color: #000; margin-bottom: 12px; line-height: 1.3; } #wechatAppUI .wc-detail-actions { display: flex; gap: 8px; } #wechatAppUI .wc-action-btn { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; color: #fff; } #wechatAppUI .wc-btn-dark { background-color: #4c5154; } #wechatAppUI .wc-btn-gray { background-color: #f2f2f7; color: #000; } #wechatAppUI .wc-action-btn:active { opacity: 0.8; } #wechatAppUI .wc-detail-emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; padding: 20px 16px 100px; justify-items: center; } #wechatAppUI .wc-detail-emoji-item { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; width: 70px; } #wechatAppUI .wc-emoji-img-box { width: 70px; height: 70px; flex-shrink: 0; background-color: #f8f9fa; border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 4px; transition: transform 0.1s; box-sizing: border-box; } #wechatAppUI .wc-detail-emoji-item:active .wc-emoji-img-box { transform: scale(0.9); } #wechatAppUI .wc-emoji-img-box img { width: 100%; height: 100%; object-fit: contain; } #wechatAppUI .wc-emoji-desc { font-size: 11px; color: #8e8e93; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-emoji-checkbox { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c7c7cc; background: #fff; display: none; justify-content: center; align-items: center; z-index: 5; } #wechatAppUI .wc-manage-mode .wc-emoji-checkbox { display: flex; } #wechatAppUI .wc-manage-mode .wc-emoji-img-box { pointer-events: none; } #wechatAppUI .wc-detail-emoji-item.selected .wc-emoji-checkbox { background: #007aff; border-color: #007aff; } #wechatAppUI .wc-detail-emoji-item.selected .wc-emoji-checkbox::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } #wechatAppUI .wc-bottom-action-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(150px); width: auto; background: transparent; border: none; padding: 0; display: flex; gap: 16px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 100; } #wechatAppUI .wc-bottom-action-bar.show { transform: translateX(-50%) translateY(0); } #wechatAppUI .wc-bottom-btn { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 12px 24px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.1s, opacity 0.2s; } #wechatAppUI .wc-bottom-btn:active { transform: scale(0.95); } #wechatAppUI .wc-bottom-btn.disabled { opacity: 0.5; pointer-events: none; } #wechatAppUI .wc-bottom-btn.danger { color: #ff3b30; } #wechatAppUI .wc-bottom-btn.primary { color: #007aff; } /* 聊天室表情包网格项样式 */ .wc-chat-emoji-item { width: 60px; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform 0.1s; gap: 4px; } .wc-chat-emoji-item:active { transform: scale(0.9); } .wc-chat-emoji-img-wrap { width: 60px; height: 60px; background: #f8f9fa; border-radius: 12px; padding: 4px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .wc-chat-emoji-img-wrap img { width: 100%; height: 100%; object-fit: contain; } .wc-chat-emoji-desc { font-size: 11px; color: #8e8e93; text-align: center; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all; line-height: 1.2; } #wechatAppUI .wc-select-list-item { padding: 12px 0; border-bottom: 0.5px solid rgba(0,0,0,0.1); font-size: 16px; color: #000; text-align: center; cursor: pointer; } #wechatAppUI .wc-select-list-item:last-child { border-bottom: none; } #wechatAppUI .wc-select-list-item:active { background: rgba(0,0,0,0.05); } /* 微信表情包 iOS 风格卡片 */ #wechatAppUI .wc-detail-card { background-color: #ffffff; border-radius: 16px; margin: 16px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); } /* 微信朋友圈专属样式 */ #page-moments { overflow-y: auto; overflow-x: hidden; background-color: transparent; } #page-moments::-webkit-scrollbar { display: none; } #page-moments .profile-section { background-color: transparent; padding-bottom: 16px; } #page-moments .cover-photo { height: 220px; background-color: #4a4a4a; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } #page-moments .profile-top-row { display: flex; justify-content: flex-end; padding: 12px 16px; position: relative; height: 60px; } #page-moments .profile-avatar-wrapper { position: absolute; top: -44px; left: 14px; width: 90px; height: 90px; border-radius: 50%; background-color: #d1d1d1; padding: 3px; z-index: 10; } #page-moments .profile-avatar-inner { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #ffffff; background-color: #f7f9f9; overflow: hidden; display: flex; align-items: center; justify-content: center; } #page-moments .profile-avatar-badge { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; background-color: #0095f6; border: 3px solid #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; z-index: 11; } #page-moments .profile-actions { display: flex; gap: 8px; } #page-moments .btn { padding: 6px 16px; border-radius: 9999px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; } #page-moments .btn-edit { background-color: #ffffff; border: 1px solid #cfd9de; color: #0f1419; } #page-moments .btn-follow { background-color: #0f1419; border: 1px solid #0f1419; color: #ffffff; } #page-moments .profile-info { padding: 0 16px; } #page-moments .profile-name { font-size: 20px; font-weight: 800; color: #0f1419; margin-bottom: 2px; } #page-moments .profile-handle { font-size: 15px; color: #8E8E93; margin-bottom: 12px; } #page-moments .profile-bio { font-size: 15px; line-height: 1.4; color: #0f1419; } #page-moments .feed-list { padding-bottom: 120px; background-color: transparent; } #page-moments .post { display: flex; padding: 16px; } #page-moments .post-avatar { width: 44px; height: 44px; border-radius: 8px; background-color: #e1e1e1; margin-right: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } #page-moments .post-content { flex: 1; min-width: 0; } #page-moments .post-name { color: #576b95; font-size: 16px; font-weight: 600; margin-bottom: 4px; } #page-moments .post-text { font-size: 15px; line-height: 1.5; margin-bottom: 10px; word-wrap: break-word; color: #000; } #page-moments .post-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; max-width: 80%; } #page-moments .post-image { aspect-ratio: 1 / 1; background-color: #e9ecef; border-radius: 4px; display: flex; align-items: center; justify-content: center; } #page-moments .post-footer { display: flex; justify-content: space-between; align-items: center; position: relative; } #page-moments .post-time { color: #888888; font-size: 13px; } #page-moments .action-btn { width: 34px; height: 22px; background-color: #f2f2f7; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #576b95; cursor: pointer; position: relative; z-index: 11; } #page-moments .action-btn:active { background-color: #e5e5ea; } #page-moments .action-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; flex-shrink: 0; } /* 朋友圈弹出菜单样式 */ #page-moments .moments-action-menu { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); background-color: #4c5154; border-radius: 6px; display: flex; align-items: center; overflow: hidden; width: 0; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease; z-index: 10; } #page-moments .moments-action-menu.show { width: 260px; opacity: 1; } #page-moments .moments-action-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 0; cursor: pointer; white-space: nowrap; } #page-moments .moments-action-item:active { background-color: #3a3f42; } #page-moments .moments-action-item:not(:last-child) { position: relative; } #page-moments .moments-action-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background-color: #3a3f42; } #page-moments .moments-action-item svg { width: 14px; height: 14px; fill: currentColor; } #page-moments .interaction-area { margin-top: 10px; background-color: #f0f2f5; border-radius: 6px; padding: 8px 10px; font-size: 14px; position: relative; } #page-moments .interaction-area::before { content: ''; position: absolute; top: -5px; left: 12px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #f0f2f5; } #page-moments .likes { color: #576b95; font-weight: 500; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } #page-moments .comments { border-top: 1px solid rgba(0,0,0,0.05); padding-top: 4px; } #page-moments .comment-item { margin-bottom: 4px; line-height: 1.4; color: #000; } #page-moments .comment-name { color: #576b95; font-weight: 600; } /* 微信“我的”页面专属样式 */ #page-profile { background-color: transparent; overflow-y: auto; overflow-x: hidden; padding-bottom: 100px; } #page-profile::-webkit-scrollbar { display: none; } #page-add-friend-detail { background-color: var(--bg-color); z-index: 900; } #wechatAppUI .wc-profile-header { padding: 16px 20px 12px 20px; padding-top: 45px; display: flex; align-items: center; } #wechatAppUI .wc-profile-title { font-size: 24px; font-weight: 800; color: var(--tg-blue); letter-spacing: -0.5px; display: flex; align-items: center; gap: 4px; cursor: pointer; } #wechatAppUI .wc-profile-title svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; } #wechatAppUI .wc-profile-section { padding: 10px 20px 30px 20px; } #wechatAppUI .wc-profile-main { display: flex; align-items: center; margin-bottom: 16px; } #wechatAppUI .wc-avatar-wrapper { width: 86px; height: 86px; border-radius: 50%; border: 3px solid #e5e5ea; padding: 3px; margin-right: 16px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } #wechatAppUI .wc-avatar-inner { width: 100%; height: 100%; border-radius: 50%; background-color: #e5e5ea; } #wechatAppUI .wc-profile-info-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; } #wechatAppUI .wc-profile-name { font-size: 20px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; } #wechatAppUI .wc-profile-id { font-size: 15px; color: var(--text-sub); font-weight: 400; } #wechatAppUI .wc-profile-qr { display: flex; align-items: center; gap: 10px; color: var(--text-sub); cursor: pointer; padding-left: 10px; } #wechatAppUI .wc-profile-qr svg.qr-icon { width: 16px; height: 16px; fill: currentColor; } #wechatAppUI .wc-profile-bio { font-size: 15px; color: var(--text-sub); line-height: 1.6; letter-spacing: 0.5px; } #wechatAppUI .wc-bio-line1 { margin-bottom: 4px; } #wechatAppUI .wc-list-group { padding: 0 20px; } #wechatAppUI .wc-list-item { display: flex; align-items: center; padding: 18px 0; background-color: transparent; cursor: pointer; transition: opacity 0.2s; } #wechatAppUI .wc-list-item:active { opacity: 0.5; } #wechatAppUI .wc-item-icon { width: 24px; height: 24px; margin-right: 16px; display: flex; justify-content: center; align-items: center; color: var(--text-main); } #wechatAppUI .wc-item-icon svg { width: 24px; height: 24px; fill: currentColor; } #wechatAppUI .wc-item-text { flex: 1; font-size: 16px; color: var(--text-main); font-weight: 400; } #wechatAppUI .wc-chevron-right { width: 8px; height: 14px; stroke: #c7c7cc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* 微信朋友圈编辑弹窗样式 */ .wc-moments-edit-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .wc-moments-edit-overlay.show { opacity: 1; pointer-events: auto; } .wc-moments-edit-card { width: 280px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .wc-moments-edit-overlay.show .wc-moments-edit-card { transform: scale(1); } .wc-moments-edit-card .edit-header { padding: 16px; text-align: center; font-size: 16px; font-weight: 600; border-bottom: none; color: #000; } .wc-moments-edit-card .edit-bg-preview { height: 120px; background: #ccc; position: relative; cursor: pointer; background-size: cover; background-position: center; } .wc-moments-edit-card .edit-avatar-wrapper { position: relative; width: 70px; height: 70px; margin: -35px auto 10px; z-index: 2; } .wc-moments-edit-card .edit-avatar-preview { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: #eee; cursor: pointer; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; overflow: hidden; } .wc-moments-edit-card .edit-cam-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; pointer-events: none; } .wc-moments-edit-card .edit-cam-icon.small { width: 24px; height: 24px; } .wc-moments-edit-card .edit-cam-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .wc-moments-edit-card .edit-form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; } .wc-moments-edit-card input, .wc-moments-edit-card textarea { width: 100%; background: rgba(0,0,0,0.05); border: none; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; color: #000; font-family: inherit; } .wc-moments-edit-card textarea { resize: none; height: 60px; } .wc-moments-edit-card .edit-actions { display: flex; gap: 12px; padding: 0 16px 16px; border-top: none; } .wc-moments-edit-card .edit-actions button { flex: 1; padding: 12px 0; border-radius: 20px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff; transition: transform 0.2s, opacity 0.2s; } .wc-moments-edit-card .edit-actions button:active { transform: scale(0.96); opacity: 0.8; } .wc-moments-edit-card .edit-actions button.cancel { background: #ff3b30; } .wc-moments-edit-card .edit-actions button.save { background: #007aff; } /* 关联表情包复古弹窗 */ .wc-bind-emoji-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .wc-bind-emoji-overlay.show { opacity: 1; visibility: visible; } .wc-bind-emoji-window { width: 90%; max-width: 380px; background-color: #f9f9f9; border: 2px solid #e5e5e5; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wc-bind-emoji-overlay.show .wc-bind-emoji-window { transform: scale(1); } .wc-bind-emoji-header { display: flex; align-items: center; padding: 10px 12px; background-color: #ffffff; border-bottom: 2px solid #f0f0f0; } .wc-bind-emoji-controls { display: flex; gap: 8px; margin-right: 16px; color: #b0b0b0; } .wc-bind-emoji-controls svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; cursor: pointer; } .wc-bind-emoji-address-bar { flex: 1; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 4px 8px; color: #888; font-size: 13px; font-weight: 500; } .wc-bind-emoji-address-bar svg { width: 14px; height: 14px; margin-right: 6px; stroke: currentColor; stroke-width: 2; fill: none; } .wc-bind-emoji-content { padding: 20px 16px; background-color: #f9f9f9; height: 320px; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .wc-bind-emoji-content::-webkit-scrollbar { width: 6px; } .wc-bind-emoji-content::-webkit-scrollbar-track { background: transparent; } .wc-bind-emoji-content::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; } /* 修改网格布局，增加上下间距 */ .wc-bind-emoji-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 16px; padding-bottom: 10px; } /* 新增 wrapper 样式 */ .wc-bind-emoji-item-wrapper { display: flex; flex-direction: column; align-items: center; cursor: pointer; } /* 卡片固定大小，去除内部的 name */ .wc-bind-emoji-card { width: 100%; aspect-ratio: 1 / 1; background-color: #ffffff; border: 1px solid #eaeaea; position: relative; display: flex; flex-direction: column; padding: 6px; box-shadow: 6px 6px 0px #ebebeb; transition: all 0.2s ease; } .wc-bind-emoji-item-wrapper:active .wc-bind-emoji-card { transform: translate(-2px, -2px); box-shadow: 8px 8px 0px #e0e0e0; } .wc-bind-emoji-card.selected { border-color: #007aff; box-shadow: 6px 6px 0px rgba(0, 122, 255, 0.2); } /* 4宫格预览区 */ .wc-bind-emoji-preview { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; height: 100%; } .wc-bind-emoji-preview.grid-4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; } .wc-bind-emoji-preview-cell { background-color: #f2f2f7; border-radius: 4px; background-size: contain; background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; } .wc-bind-emoji-preview-cell.empty { background-color: transparent; } /* 名字移到外面 */ .wc-bind-emoji-name { font-size: 12px; color: #333; font-weight: 600; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 12px; } .wc-bind-emoji-indicator { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 4px; background: #fff; display: flex; justify-content: center; align-items: center; transition: all 0.2s; z-index: 2; } .wc-bind-emoji-card.selected .wc-bind-emoji-indicator { background: #007aff; border-color: #007aff; } .wc-bind-emoji-indicator svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: all 0.2s; } .wc-bind-emoji-card.selected .wc-bind-emoji-indicator svg { opacity: 1; transform: scale(1); } .wc-bind-emoji-footer { display: flex; align-items: center; justify-content: center; padding: 12px; background-color: #ffffff; border-top: 2px solid #f0f0f0; } .wc-bind-emoji-actions { display: flex; gap: 16px; width: 100%; } .wc-bind-emoji-btn { flex: 1; padding: 10px 0; font-size: 14px; border-radius: 6px; cursor: pointer; font-weight: 600; border: none; text-align: center; transition: opacity 0.2s; } .wc-bind-emoji-btn:active { opacity: 0.8; } .wc-bind-emoji-btn.cancel { background-color: #f0f0f0; color: #666; } .wc-bind-emoji-btn.save { background-color: #000; color: #fff; } /* 微信表情包批量导入弹窗 */ .wc-batch-import-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .wc-batch-import-overlay.show { opacity: 1; pointer-events: auto; } .wc-batch-import-card { width: 320px; height: 420px; background-color: #ffffff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .wc-batch-import-overlay.show .wc-batch-import-card { transform: scale(1); } .wc-batch-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background-color: #fff; border-bottom: 1px solid #f0f0f0; } .wc-batch-header-left { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #111; letter-spacing: 0.5px; } .wc-batch-header-right select { padding: 6px 28px 6px 12px; border: 1px solid #e5e5e5; border-radius: 6px; font-size: 13px; font-weight: 600; color: #555; appearance: none; background: url('data:image/svg+xml;utf8,') no-repeat right 8px center; background-color: #fff; outline: none; cursor: pointer; max-width: 120px; } .wc-batch-body { flex: 1; background-color: #ffffff; padding: 16px 24px; display: flex; flex-direction: column; } .wc-batch-body textarea { flex: 1; width: 100%; box-sizing: border-box; border: none; background-color: transparent; padding: 0; resize: none; outline: none; font-size: 15px; line-height: 1.6; color: #333; font-weight: 500; } .wc-batch-body textarea::placeholder { color: #b0b0b0; } .wc-batch-footer { padding: 12px 20px 20px 20px; background-color: #ffffff; display: flex; gap: 10px; align-items: center; } .wc-batch-btn-sec { flex: 1; background-color: #f2f2f7; color: #333; border: none; border-radius: 8px; padding: 12px 0; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 4px; transition: background-color 0.2s; } .wc-batch-btn-sec:active { background-color: #e5e5ea; } .wc-batch-btn-pri { flex: 1.2; background-color: #8ab4f8; color: #fff; border: none; border-radius: 8px; padding: 12px 0; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; } .wc-batch-btn-pri:active { background-color: #739ce0; } /* 微信登录与注册页样式 */ #wechatAppUI .wc-auth-nav-bar { height: 89px; display: flex; align-items: center; padding: 45px 16px 0 16px; } /* ========================================== 转账与 Apple Pay 页面样式 ========================================== */ #wechatAppUI .wc-transfer-nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 45px 20px 10px 20px; } #wechatAppUI .wc-transfer-nav-btn { color: #007AFF; font-size: 17px; cursor: pointer; } #wechatAppUI .wc-transfer-nav-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-transfer-container { padding: 20px; display: flex; flex-direction: column; align-items: center; margin-top: 20px; } #wechatAppUI .wc-transfer-avatar { width: 72px; height: 72px; border-radius: 50%; background-color: #E5E5EA; background-size: cover; background-position: center; margin-bottom: 16px; display: flex; justify-content: center; align-items: center; color: #8e8e93; font-size: 28px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } #wechatAppUI .wc-transfer-name { font-size: 22px; font-weight: 600; margin-bottom: 4px; color: #000; } #wechatAppUI .wc-transfer-account { font-size: 15px; color: #8E8E93; margin-bottom: 40px; } #wechatAppUI .wc-transfer-amount-wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; width: 100%; } #wechatAppUI .wc-transfer-currency { font-size: 48px; font-weight: 300; margin-right: 8px; color: #000; } #wechatAppUI .wc-transfer-amount-input { font-size: 72px; font-weight: 200; border: none; outline: none; background: transparent; color: #000; width: 160px; padding: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } #wechatAppUI .wc-transfer-amount-input::placeholder { color: #C7C7CC; } #wechatAppUI .wc-transfer-note-input { background: #F2F2F7; border: none; border-radius: 20px; padding: 14px 20px; font-size: 16px; width: 100%; outline: none; text-align: center; color: #000; margin-bottom: 30px; } #wechatAppUI .wc-transfer-note-input::placeholder { color: #8E8E93; } /* 免密支付开关 */ #wechatAppUI .wc-settings-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #333; background: #fff; padding: 12px 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; width: 100%; } #wechatAppUI .wc-settings-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #007AFF; pointer-events: none; } #wechatAppUI .wc-transfer-next-btn { position: absolute; bottom: 40px; left: 20px; right: 20px; height: 54px; border-radius: 14px; background: #000; color: #fff; font-size: 17px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; opacity: 0.3; pointer-events: none; } #wechatAppUI .wc-transfer-next-btn.active { opacity: 1; pointer-events: auto; } #wechatAppUI .wc-transfer-next-btn.active:active { transform: scale(0.96); } /* Apple Pay 弹窗 */ #wechatAppUI .wc-ap-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: flex-end; } #wechatAppUI .wc-ap-overlay.show { opacity: 1; pointer-events: auto; } #wechatAppUI .wc-ap-sheet { background: #f9f9f9; border-radius: 32px 32px 0 0; padding: 20px 20px 40px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); min-height: 520px; display: flex; flex-direction: column; } #wechatAppUI .wc-ap-overlay.show .wc-ap-sheet { transform: translateY(0); } #wechatAppUI .wc-ap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } #wechatAppUI .wc-ap-close-btn { width: 32px; height: 32px; background: #e5e5ea; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } #wechatAppUI .wc-ap-close-btn svg { width: 14px; height: 14px; stroke: #000; stroke-width: 2.5; stroke-linecap: round; } #wechatAppUI .wc-ap-logo { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: #000; } #wechatAppUI .wc-ap-payee-info { text-align: center; margin-bottom: 24px; } #wechatAppUI .wc-ap-payee-name { font-size: 15px; color: #666; margin-bottom: 4px; } #wechatAppUI .wc-ap-payee-amount { font-size: 44px; font-weight: 600; color: #000; letter-spacing: -1px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } /* 卡片层叠 */ #wechatAppUI .wc-ap-cards-container { position: relative; height: 140px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; perspective: 1000px; } #wechatAppUI .wc-ap-card { position: absolute; width: 220px; height: 135px; border-radius: 12px; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden; cursor: pointer; } #wechatAppUI .wc-ap-card::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: wcMetalSweep 5s infinite; pointer-events: none; } #wechatAppUI .wc-ap-card.card-center { transform: translateX(0) scale(1); z-index: 3; opacity: 1; } #wechatAppUI .wc-ap-card.card-left { transform: translateX(-85px) scale(0.85); z-index: 1; opacity: 0.6; } #wechatAppUI .wc-ap-card.card-right { transform: translateX(85px) scale(0.85); z-index: 2; opacity: 0.6; } #wechatAppUI .wc-ap-card.card-hidden { transform: translateX(0) scale(0.5); z-index: 0; opacity: 0; pointer-events: none; } #wechatAppUI .wc-ap-card .card-number { font-size: 14px; font-family: monospace; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; } #wechatAppUI .wc-ap-change-method { background: #e5e5ea; color: #000; border: none; border-radius: 20px; padding: 10px 20px; font-size: 14px; font-weight: 500; margin: 0 auto; display: block; cursor: pointer; transition: background 0.2s; } #wechatAppUI .wc-ap-change-method:active { background: #d1d1d6; } #wechatAppUI .wc-ap-payment-details { margin-top: 20px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } #wechatAppUI .wc-ap-detail-label { font-size: 15px; color: #8E8E93; } #wechatAppUI .wc-ap-detail-value { font-size: 15px; font-weight: 500; color: #000; display: flex; align-items: center; gap: 8px; } #wechatAppUI .wc-ap-confirm-area { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 20px; cursor: pointer; } #wechatAppUI .wc-ap-confirm-icon { width: 32px; height: 32px; border-radius: 50%; background: #007AFF; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-ap-confirm-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; } #wechatAppUI .wc-ap-confirm-text { font-size: 17px; font-weight: 500; color: #000; } /* 密码键盘 */ #wechatAppUI .wc-pwd-title { font-size: 17px; font-weight: 500; margin-bottom: 20px; margin-top: 10px; color: #000; } #wechatAppUI .wc-pwd-dots { display: flex; gap: 16px; margin-bottom: 40px; } #wechatAppUI .wc-pwd-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; background: transparent; transition: background 0.1s; } #wechatAppUI .wc-pwd-dot.filled { background: #000; } #wechatAppUI .wc-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; width: 100%; max-width: 280px; } #wechatAppUI .wc-key-btn { width: 70px; height: 70px; border-radius: 50%; background: #e5e5ea; border: none; font-size: 28px; font-weight: 400; color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } #wechatAppUI .wc-key-btn:active { background: #d1d1d6; } #wechatAppUI .wc-key-btn.empty { background: transparent; pointer-events: none; } /* 成功动画 */ #wechatAppUI .wc-success-icon { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #000; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } #wechatAppUI .wc-success-icon svg { width: 30px; height: 30px; stroke: #000; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; } #wechatAppUI .wc-success-icon.animate svg { animation: wcDrawCheck 0.4s ease forwards; } #wechatAppUI .wc-success-text { font-size: 17px; font-weight: 600; color: #000; } @keyframes wcDrawCheck { to { stroke-dashoffset: 0; } } @keyframes wcShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } /* 支付设置页面样式 */ #wechatAppUI .wc-wallet-settings-content { padding: 20px 16px; flex: 1; overflow-y: auto; } #wechatAppUI .wc-ws-group { background: #fff; border-radius: 12px; margin-bottom: 20px; overflow: hidden; } #wechatAppUI .wc-ws-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #fff; cursor: pointer; position: relative; } #wechatAppUI .wc-ws-item:active { background: #f2f2f7; } #wechatAppUI .wc-ws-item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 0; height: 0.5px; background: rgba(0,0,0,0.1); } #wechatAppUI .wc-ws-text { font-size: 16px; color: #000; } #wechatAppUI .wc-ws-chevron { width: 8px; height: 13px; stroke: #c7c7cc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* iOS 风格 Toggle 开关 */ #wechatAppUI .wc-ws-toggle { width: 50px; height: 30px; background: #e5e5ea; border-radius: 15px; position: relative; transition: background 0.3s; } #wechatAppUI .wc-ws-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.3s; } #wechatAppUI .wc-ws-toggle.active { background: #34c759; } #wechatAppUI .wc-ws-toggle.active::after { transform: translateX(20px); } #wechatAppUI .wc-auth-nav-back { color: var(--tg-blue); display: flex; align-items: center; cursor: pointer; font-size: 17px; font-weight: 500; } #wechatAppUI .wc-auth-nav-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-right: 2px; } #wechatAppUI .wc-auth-content { flex: 1; padding: 20px 24px; overflow-y: auto; } #wechatAppUI .wc-auth-content::-webkit-scrollbar { display: none; } #wechatAppUI .wc-auth-logo-container { display: flex; justify-content: center; margin-bottom: 24px; } #wechatAppUI .wc-auth-logo-icon { width: 72px; height: 72px; background-color: var(--tg-blue); border-radius: 18px; display: flex; justify-content: center; align-items: center; color: #fff; } #wechatAppUI .wc-auth-logo-icon svg { width: 40px; height: 40px; fill: currentColor; } #wechatAppUI .wc-auth-header-title { font-size: 28px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; text-align: center; letter-spacing: -0.5px; } #wechatAppUI .wc-auth-header-subtitle { font-size: 15px; color: var(--text-sub); margin-bottom: 32px; text-align: center; line-height: 1.4; } #wechatAppUI .wc-auth-form-group { margin-bottom: 16px; } #wechatAppUI .wc-auth-form-input-wrapper { background-color: var(--surface-color); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; border: 1.5px solid transparent; transition: all 0.2s; } #wechatAppUI .wc-auth-form-input-wrapper:focus-within { border-color: var(--tg-blue); background-color: #fff; box-shadow: 0 2px 10px rgba(51, 144, 236, 0.1); } #wechatAppUI .wc-auth-form-input-wrapper svg { width: 20px; height: 20px; stroke: #A1A1AA; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: 12px; transition: stroke 0.2s; } #wechatAppUI .wc-auth-form-input-wrapper:focus-within svg { stroke: var(--tg-blue); } #wechatAppUI .wc-auth-form-input { border: none; background: transparent; outline: none; font-size: 16px; color: var(--text-main); width: 100%; font-weight: 500; } #wechatAppUI .wc-auth-form-input::placeholder { color: #A1A1AA; font-weight: 400; } #wechatAppUI .wc-auth-pwd-toggle { cursor: pointer; padding: 0 4px; display: flex; align-items: center; justify-content: center; } #wechatAppUI .wc-auth-pwd-toggle svg { margin-right: 0; stroke: #A1A1AA; transition: stroke 0.2s; } #wechatAppUI .wc-auth-pwd-toggle:active svg { stroke: var(--tg-blue); } #wechatAppUI .wc-auth-btn-primary { background-color: var(--tg-blue); color: #fff; border: none; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; width: 100%; cursor: pointer; margin-top: 16px; transition: transform 0.1s, opacity 0.2s; box-shadow: 0 4px 14px rgba(51, 144, 236, 0.3); } #wechatAppUI .wc-auth-btn-primary:active { transform: scale(0.98); opacity: 0.9; } #wechatAppUI .wc-auth-switch-link { text-align: center; margin-top: 24px; font-size: 15px; color: var(--text-sub); } #wechatAppUI .wc-auth-switch-link span { color: var(--tg-blue); font-weight: 600; cursor: pointer; } #wechatAppUI .wc-auth-avatar-upload-container { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; } #wechatAppUI .wc-auth-avatar-upload { width: 84px; height: 84px; background-color: var(--surface-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; border: 2px dashed #D1D1D6; transition: all 0.2s; } #wechatAppUI .wc-auth-avatar-upload:active { transform: scale(0.95); } #wechatAppUI .wc-auth-cam-icon { width: 32px; height: 32px; stroke: #A1A1AA; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-auth-avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background-color: var(--tg-blue); border-radius: 50%; border: 2px solid var(--bg-color); display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-auth-avatar-badge svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-auth-avatar-label { font-size: 14px; color: var(--text-sub); font-weight: 600; } /* 微信聊天记录搜索页样式 */ #wechatAppUI .wc-chat-search-result-item { display: flex; padding: 12px 16px; cursor: pointer; background: #ffffff; position: relative; } #wechatAppUI .wc-chat-search-result-item::after { content: ''; position: absolute; bottom: 0; left: 68px; right: 0; height: 0.5px; background-color: rgba(0,0,0,0.05); } #wechatAppUI .wc-chat-search-result-item:active { background: #f2f2f7; } #wechatAppUI .wc-chat-search-avatar { width: 40px; height: 40px; border-radius: 4px; background-color: #e5e5ea; background-size: cover; background-position: center; margin-right: 12px; flex-shrink: 0; } #wechatAppUI .wc-chat-search-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } #wechatAppUI .wc-chat-search-name-time { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } #wechatAppUI .wc-chat-search-name { font-size: 16px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-chat-search-time { font-size: 12px; color: #8e8e93; } #wechatAppUI .wc-chat-search-text { font-size: 14px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-chat-search-highlight { color: var(--tg-blue); font-weight: 600; } /* 聊天设置全新 iOS 风格页面 */ #wechatAppUI .wc-settings-page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFFFF; z-index: 2000; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; } #wechatAppUI .wc-settings-page.show { transform: translateY(0); } #wechatAppUI .wc-settings-navbar { display: flex; align-items: center; justify-content: space-between; height: 89px; padding: 45px 16px 0 16px; background-color: #FFFFFF; position: sticky; top: 0; z-index: 100; } #wechatAppUI .wc-settings-nav-btn-left { width: 60px; cursor: pointer; display: flex; align-items: center; color: #000; } #wechatAppUI .wc-settings-nav-btn-left svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } #wechatAppUI .wc-settings-nav-title { font-size: 17px; font-weight: 600; text-align: center; flex: 1; } #wechatAppUI .wc-settings-nav-save { width: 60px; display: flex; justify-content: flex-end; } #wechatAppUI .wc-settings-save-btn { background-color: #F2F2F7; color: #000; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 16px; cursor: pointer; } #wechatAppUI .wc-settings-content { flex: 1; overflow-y: auto; padding-bottom: 40px; } #wechatAppUI .wc-settings-avatar-showcase { display: flex; flex-direction: column; align-items: center; padding: 20px 0 30px; } #wechatAppUI .wc-settings-avatars-row { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 20px; } #wechatAppUI .wc-settings-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; } #wechatAppUI .wc-settings-avatar-circle { width: 76px; height: 76px; border-radius: 50%; background-color: #E5E5EA; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; } #wechatAppUI .wc-settings-avatar-name { font-size: 16px; font-weight: 600; color: #000; } #wechatAppUI .wc-settings-status-banner { background-color: #F8F8F9; padding: 10px 24px; border-radius: 20px; font-size: 13px; color: #8E8E93; font-weight: 500; display: flex; align-items: center; gap: 6px; } #wechatAppUI .wc-settings-list { padding: 0 20px; } #wechatAppUI .wc-settings-group-header { font-size: 18px; font-weight: 700; color: #000; padding: 24px 20px 8px; display: flex; align-items: center; gap: 8px; } #wechatAppUI .wc-settings-group-header::before { content: ''; display: block; width: 4px; height: 14px; background-color: #000; border-radius: 2px; } #wechatAppUI .wc-settings-list-item { display: flex; align-items: center; padding: 16px 0; border-bottom: 0.5px solid #E5E5EA; background-color: #FFFFFF; cursor: pointer; } #wechatAppUI .wc-settings-list-item:last-child { border-bottom: none; } #wechatAppUI .wc-settings-item-icon { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; margin-right: 16px; flex-shrink: 0; background-color: #000; border-radius: 8px; color: #FFF; } #wechatAppUI .wc-settings-item-icon svg { width: 18px; height: 18px; } #wechatAppUI .wc-settings-item-icon svg.fill-icon { fill: currentColor; stroke: none; } #wechatAppUI .wc-settings-item-icon svg.stroke-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-settings-item-content { flex: 1; display: flex; flex-direction: column; gap: 4px; } #wechatAppUI .wc-settings-item-title { font-size: 16px; font-weight: 500; color: #000; } #wechatAppUI .wc-settings-item-subtitle { font-size: 12px; color: #8E8E93; } #wechatAppUI .wc-settings-item-right { display: flex; align-items: center; gap: 8px; padding-left: 16px; } #wechatAppUI .wc-ios-switch { width: 51px; height: 31px; background-color: #E5E5EA; border-radius: 15.5px; position: relative; transition: background-color 0.3s; cursor: pointer; } #wechatAppUI .wc-ios-switch.active { background-color: #34C759; } #wechatAppUI .wc-ios-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background-color: #FFF; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16), 0 3px 1px rgba(0,0,0,0.1); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } #wechatAppUI .wc-ios-switch.active::after { transform: translateX(20px); } #wechatAppUI .wc-settings-soft-input { background-color: #F2F2F7; border: none; border-radius: 8px; padding: 6px 8px; font-size: 15px; color: #007AFF; font-weight: 600; text-align: center; width: 60px; outline: none; font-family: inherit; } #wechatAppUI .wc-settings-input-group { display: flex; align-items: center; gap: 6px; } #wechatAppUI .wc-settings-input-separator { color: #8E8E93; font-size: 14px; } #wechatAppUI .wc-settings-chevron { width: 8px; height: 13px; stroke: #C7C7CC; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* 微信气泡长按菜单与高亮特写 */ #wechatAppUI .wc-bubble-menu-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; background: rgba(0,0,0,0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity 0.2s; opacity: 0; } #wechatAppUI .wc-bubble-menu-overlay.show { display: block; opacity: 1; } /* 气泡高亮特写 */ #wechatAppUI .message-row.highlighted-bubble { z-index: 1001; position: relative; transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.2, 1); transform: scale(1.03); } /* 整体菜单容器 */ #wechatAppUI .wc-bubble-menu-container { position: absolute; display: flex; flex-direction: column; gap: 10px; z-index: 1002; transform-origin: bottom right; animation: wcMenuPop 0.2s cubic-bezier(0.1, 0.8, 0.2, 1); } @keyframes wcMenuPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Emoji 悬浮胶囊 (无阴影无描边) */ #wechatAppUI .wc-bubble-emojis-capsule { position: relative; background: #fff; border-radius: 30px; display: flex; padding: 6px 10px 6px 14px; align-items: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); width: 260px; box-sizing: border-box; } #wechatAppUI .wc-bubble-emojis-scroll-area { display: flex; gap: 10px; align-items: center; flex: 1; overflow: hidden; scrollbar-width: none; } #wechatAppUI .wc-bubble-emojis-scroll-area::-webkit-scrollbar { display: none; } #wechatAppUI .wc-bubble-menu-emoji { font-size: 20px; cursor: pointer; transition: transform 0.1s; flex-shrink: 0; text-align: center; } #wechatAppUI .wc-bubble-menu-emoji:active { transform: scale(1.2); } #wechatAppUI .wc-bubble-menu-more { width: 24px; height: 24px; background: #c7c7cc; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; margin-left: 4px; } #wechatAppUI .wc-bubble-menu-more svg { width: 14px; height: 14px; } #wechatAppUI .extra-emoji { display: none; } #wechatAppUI .wc-bubble-menu-more.collapse-btn { display: none; } /* Emoji 胶囊展开状态 */ #wechatAppUI .wc-bubble-emojis-capsule.expanded { border-radius: 16px; height: 200px; align-items: flex-start; padding: 16px; } #wechatAppUI .wc-bubble-emojis-capsule.expanded .wc-bubble-emojis-scroll-area { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 8px; overflow-y: auto; width: 100%; height: 100%; padding-bottom: 30px; align-content: start; } #wechatAppUI .wc-bubble-emojis-capsule.expanded .extra-emoji { display: block; } #wechatAppUI .wc-bubble-emojis-capsule.expanded #wcBubbleMenuExpandBtn { display: none; } #wechatAppUI .wc-bubble-emojis-capsule.expanded .collapse-btn { display: flex; position: absolute; bottom: 12px; right: 12px; z-index: 10; } /* 展开时隐藏操作菜单 */ #wechatAppUI .wc-bubble-menu-container.emoji-expanded .wc-bubble-action-menu { display: none; } /* Emoji 胶囊尾巴 (一大一小圆点，无阴影无描边) */ #wechatAppUI .wc-bubble-emojis-tail-1 { position: absolute; bottom: -6px; right: 24px; width: 14px; height: 14px; background: #fff; border-radius: 50%; z-index: -1; } #wechatAppUI .wc-bubble-emojis-tail-2 { position: absolute; bottom: -14px; right: 16px; width: 8px; height: 8px; background: #fff; border-radius: 50%; z-index: -1; } /* 固定操作菜单 (无阴影无描边) */ #wechatAppUI .wc-bubble-action-menu { background: #fff; border-radius: 16px; display: flex; flex-direction: column; width: 150px; overflow: hidden; margin-left: 20px; } #wechatAppUI .wc-bubble-menu-item { padding: 10px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #000; cursor: pointer; } #wechatAppUI .wc-bubble-menu-item:active { background: #f2f2f7; } #wechatAppUI .wc-bubble-menu-item svg { width: 18px; height: 18px; stroke: #000; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 气泡上的反应 */ #wechatAppUI .wc-bubble-reactions { position: absolute; top: -10px; display: flex; gap: 2px; background: #fff; border-radius: 12px; padding: 2px 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #f2f2f7; z-index: 2; } #wechatAppUI .message-bubble.received .wc-bubble-reactions { right: -10px; left: auto; } #wechatAppUI .message-bubble.sent .wc-bubble-reactions { left: -10px; right: auto; } #wechatAppUI .wc-bubble-reaction { font-size: 14px; } /* 引用预览区 (半透明固定大小悬浮胶囊) */ #wechatAppUI .wc-reply-preview { position: absolute; bottom: calc(100% + 10px); left: 0; width: 100%; height: 52px; box-sizing: border-box; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(230, 230, 230, 0.6); border-radius: 26px; padding: 0 16px; display: none; align-items: center; gap: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } #wechatAppUI .wc-reply-preview.show { display: flex; } #wechatAppUI .wc-reply-preview-content { flex: 1; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid var(--tg-blue); padding-left: 10px; overflow: hidden; height: 34px; } #wechatAppUI .wc-reply-preview-name { font-size: 13px; color: var(--tg-blue); font-weight: 600; margin-bottom: 2px; line-height: 1.2; } #wechatAppUI .wc-reply-preview-text { font-size: 13px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } #wechatAppUI .wc-reply-preview-close { width: 26px; height: 26px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #8e8e93; background: rgba(0,0,0,0.08); border-radius: 50%; flex-shrink: 0; } #wechatAppUI .wc-reply-preview-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; } /* 气泡内的引用 */ #wechatAppUI .wc-bubble-reply { background: rgba(128, 128, 128, 0.15); border-radius: 6px; padding: 6px 10px; font-size: 13px; display: flex; flex-direction: column; cursor: pointer; width: 100%; box-sizing: border-box; max-width: 100%; overflow: hidden; } #wechatAppUI .wc-bubble-reply-name { font-weight: 600; opacity: 0.75; margin-bottom: 2px; font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-bubble-reply-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; max-width: 100%; width: 100%; } /* 微信多选模式样式 */ #wechatAppUI .wc-chat-multi-header { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); height: 44px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; padding: 0 20px; gap: 20px; z-index: 150; border-radius: 22px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); width: max-content; } #wechatAppUI .wc-chat-multi-header .cancel-btn { font-size: 15px; color: var(--text-sub); cursor: pointer; font-weight: 600; } #wechatAppUI .wc-chat-multi-header .title { font-size: 15px; font-weight: 700; color: var(--tg-blue); } #wechatAppUI .wc-chat-multi-footer { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); height: 56px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; padding: 0 30px; gap: 40px; z-index: 150; border-radius: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05); width: max-content; } #wechatAppUI .wc-chat-multi-footer .action-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: #000; cursor: pointer; } #wechatAppUI .wc-chat-multi-footer .action-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; } #wechatAppUI .wc-chat-multi-footer .action-btn.delete { color: #ff3b30; } /* 多选模式下的气泡位移和勾选框 */ #wechatAppUI .chat-area.multi-select-mode .message-row { cursor: pointer; transition: transform 0.3s ease; } #wechatAppUI .chat-area.multi-select-mode .message-row.received { transform: translateX(36px); } #wechatAppUI .chat-area.multi-select-mode .message-row.sent { transform: translateX(-36px); } #wechatAppUI .wc-msg-checkbox { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 1px solid #c7c7cc; background: transparent; display: none; justify-content: center; align-items: center; transition: all 0.2s; z-index: 10; } #wechatAppUI .chat-area.multi-select-mode .wc-msg-checkbox { display: flex; } #wechatAppUI .message-row.received .wc-msg-checkbox { left: -36px; } #wechatAppUI .message-row.sent .wc-msg-checkbox { right: -36px; } #wechatAppUI .message-row.selected .wc-msg-checkbox { background: var(--tg-blue); border-color: var(--tg-blue); } #wechatAppUI .message-row.selected .wc-msg-checkbox::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } /* 禁用多选模式下的长按和头像点击 */ #wechatAppUI .chat-area.multi-select-mode .message-bubble { pointer-events: none; } #wechatAppUI .chat-area.multi-select-mode .msg-avatar { pointer-events: none; } /* ========================================= 发布朋友圈 Modal (纯白通栏风格) ========================================= */ #wechatAppUI .wc-compose-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); z-index: 2000; display: flex; flex-direction: column; } #wechatAppUI .wc-compose-modal.show { transform: translateY(0); } #wechatAppUI .wc-compose-nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; padding-top: 45px; /* 固定 45px 避开状态栏，与项目其他页面保持一致 */ background: #ffffff; z-index: 10; } #wechatAppUI .wc-compose-nav-btn { font-size: 16px; cursor: pointer; transition: opacity 0.2s; } #wechatAppUI .wc-compose-nav-btn:active { opacity: 0.5; } #wechatAppUI .wc-compose-nav-btn.cancel { color: #007aff; font-weight: 500; } #wechatAppUI .wc-compose-nav-btn.post { background: #007aff; color: #fff; padding: 6px 16px; border-radius: 16px; font-weight: 600; font-size: 14px; } #wechatAppUI .wc-compose-nav-btn.post.disabled { opacity: 0.4; pointer-events: none; } #wechatAppUI .wc-compose-nav-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-compose-content { flex: 1; overflow-y: auto; padding-bottom: 40px; } #wechatAppUI .wc-compose-top-section { background: #ffffff; padding: 16px; } #wechatAppUI .wc-compose-text-input { width: 100%; border: none; outline: none; font-size: 17px; line-height: 1.5; resize: none; min-height: 100px; font-family: inherit; color: #000; padding: 0; background: transparent; } #wechatAppUI .wc-compose-text-input::placeholder { color: #c7c7cc; } #wechatAppUI .wc-compose-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } #wechatAppUI .wc-compose-image-add-btn { aspect-ratio: 1; background: #f2f2f7; border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.2s; } #wechatAppUI .wc-compose-image-add-btn:active { background: #e5e5ea; } #wechatAppUI .wc-compose-image-add-btn svg { width: 32px; height: 32px; stroke: #8e8e93; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-compose-options-list { margin-top: 20px; background: #ffffff; border-top: 0.5px solid rgba(0,0,0,0.05); } #wechatAppUI .wc-compose-option-item { display: flex; align-items: center; padding: 16px; border-bottom: 0.5px solid rgba(0,0,0,0.05); cursor: pointer; transition: background-color 0.2s; } #wechatAppUI .wc-compose-option-item:active { background-color: #f2f2f7; } #wechatAppUI .wc-compose-option-icon { width: 24px; height: 24px; margin-right: 14px; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-compose-option-icon svg { width: 100%; height: 100%; } #wechatAppUI .wc-compose-option-text { flex: 1; font-size: 16px; color: #000; } #wechatAppUI .wc-compose-option-value { font-size: 15px; color: #8e8e93; margin-right: 8px; } #wechatAppUI .wc-compose-option-chevron { width: 16px; height: 16px; stroke: #c7c7cc; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 朋友圈发布图片预览样式 */ #wechatAppUI .wc-compose-image-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f2f2f7; } #wechatAppUI .wc-compose-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; } #wechatAppUI .wc-compose-image-delete { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 2; } #wechatAppUI .wc-compose-image-delete svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ========================================== 全新 iOS Wallet 浅色风格页面 (金属质感) ========================================== */ #wechatAppUI #page-wallet { z-index: 10; background-color: #ffffff; overflow-y: auto; overflow-x: hidden; padding-bottom: 100px; } #wechatAppUI #page-wallet::-webkit-scrollbar { display: none; } #wechatAppUI .wc-wallet-nav { display: flex; justify-content: space-between; align-items: center; padding: 45px 20px 10px 20px; position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #wechatAppUI .wc-wallet-btn-circle { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } #wechatAppUI .wc-wallet-btn-circle:active { background: rgba(255, 255, 255, 0.9); } #wechatAppUI .wc-wallet-btn-circle svg { width: 18px; height: 18px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-wallet-btn-circle svg[fill="currentColor"] { stroke: none; fill: #000; } #wechatAppUI .wc-wallet-nav-title { font-size: 17px; font-weight: 600; color: #000; opacity: 0; transition: opacity 0.3s; } #wechatAppUI .wc-wallet-cards-wrapper { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 10px; } #wechatAppUI .wc-wallet-cards-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; padding: 10px 0; gap: 16px; scrollbar-width: none; } #wechatAppUI .wc-wallet-cards-scroll::-webkit-scrollbar { display: none; } #wechatAppUI .wc-wallet-cards-scroll::before, #wechatAppUI .wc-wallet-cards-scroll::after { content: ''; flex: 0 0 max(4px, calc(50% - 167.5px - 8px)); } #wechatAppUI .wc-apple-card { flex: 0 0 calc(100vw - 40px); max-width: 335px; aspect-ratio: 1.586 / 1; border-radius: 18px; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; scroll-snap-align: center; } #wechatAppUI .wc-apple-card::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: wcMetalSweep 5s infinite; pointer-events: none; } @keyframes wcMetalSweep { 0% { left: -150%; } 20% { left: 200%; } 100% { left: 200%; } } #wechatAppUI .wc-cash-card { background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 40%, #3a3a3c 60%, #1c1c1e 100%); } #wechatAppUI .wc-cash-card .wc-card-logo, #wechatAppUI .wc-cash-card .wc-card-balance-amount { color: #fff; } #wechatAppUI .wc-cash-card .wc-card-logo svg { fill: #fff; } #wechatAppUI .wc-cash-card .wc-card-balance-label, #wechatAppUI .wc-cash-card .wc-card-number { color: rgba(255,255,255,0.7); } #wechatAppUI .wc-cash-card .wc-card-network { color: rgba(255,255,255,0.9); } #wechatAppUI .wc-family-card { background: linear-gradient(135deg, #3D4D6B 0%, #101C37 40%, #7B8AA0 60%, #101C37 100%); border-color: rgba(228, 232, 235, 0.2); } #wechatAppUI .wc-family-card .wc-card-logo, #wechatAppUI .wc-family-card .wc-card-balance-amount { color: #E4E8EB; } #wechatAppUI .wc-family-card .wc-card-logo svg { fill: #E4E8EB; } #wechatAppUI .wc-family-card .wc-card-balance-label, #wechatAppUI .wc-family-card .wc-card-number { color: #BCC4CE; } #wechatAppUI .wc-family-card .wc-card-network { color: #7B8AA0; } #wechatAppUI .wc-card-logo { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.5px; position: relative; z-index: 2; } #wechatAppUI .wc-card-logo svg { width: 20px; height: 20px; } #wechatAppUI .wc-card-balance-area { text-align: center; margin-top: 10px; position: relative; z-index: 2; } #wechatAppUI .wc-card-balance-label { font-size: 13px; font-weight: 500; margin-bottom: 4px; } #wechatAppUI .wc-card-balance-amount { font-size: 38px; font-weight: 600; letter-spacing: -1px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } #wechatAppUI .wc-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 2; } #wechatAppUI .wc-card-network { font-size: 14px; font-weight: 700; font-style: italic; } #wechatAppUI .wc-card-number { font-size: 15px; font-family: monospace; letter-spacing: 2px; } #wechatAppUI .wc-wallet-pagination { display: flex; gap: 8px; margin-top: 10px; } #wechatAppUI .wc-wallet-pagination .wc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: all 0.3s; } #wechatAppUI .wc-wallet-pagination .wc-dot.active { background: #000; width: 16px; border-radius: 3px; } #wechatAppUI .wc-wallet-actions { display: flex; justify-content: space-between; padding: 0 24px; margin-top: 28px; width: 100%; } #wechatAppUI .wc-action-btn-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; flex: 1; } #wechatAppUI .wc-action-btn-wrapper:active .wc-action-circle { background: #E5E5EA; transform: scale(0.92); } #wechatAppUI .wc-action-circle { width: 58px; height: 56px; border-radius: 16px; background: #F2F2F7; display: flex; justify-content: center; align-items: center; transition: all 0.2s cubic-bezier(0.1, 0.8, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); } #wechatAppUI .wc-action-circle svg { width: 24px; height: 24px; } #wechatAppUI .wc-action-circle svg:not([fill="none"]) { fill: #1C1C1E; } #wechatAppUI .wc-action-circle svg path:not([fill]) { stroke: #1C1C1E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-action-label { font-size: 13px; color: #1C1C1E; font-weight: 600; letter-spacing: 0.5px; } #wechatAppUI .wc-transactions-panel { flex: 1; background: #ffffff; padding: 30px 20px 20px 20px; } #wechatAppUI .wc-tx-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } #wechatAppUI .wc-tx-title { font-size: 20px; font-weight: 700; color: #000; } /* 强制黑色确保显示 */ #wechatAppUI .wc-tx-more { font-size: 15px; color: var(--tg-blue); cursor: pointer; } #wechatAppUI .wc-tx-list { display: flex; flex-direction: column; } #wechatAppUI .wc-tx-item { display: flex; align-items: center; padding: 16px 0; position: relative; cursor: pointer; } #wechatAppUI .wc-tx-item:active { opacity: 0.6; } #wechatAppUI .wc-tx-item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 52px; right: 0; height: 0.5px; background: var(--ios-separator); } #wechatAppUI .wc-tx-icon { width: 40px; height: 40px; border-radius: 50%; background: #f2f2f7; display: flex; justify-content: center; align-items: center; margin-right: 12px; color: #000; } #wechatAppUI .wc-tx-info { flex: 1; } #wechatAppUI .wc-tx-name { font-size: 16px; font-weight: 600; color: #000000; margin-bottom: 4px; } /* 强制黑色，防止白底白字 */ #wechatAppUI .wc-tx-status { font-size: 13px; color: #8e8e93; } /* 强制灰色 */ #wechatAppUI .wc-tx-amount-area { text-align: right; } #wechatAppUI .wc-tx-amount { font-size: 16px; font-weight: 600; color: #ff3b30; margin-bottom: 4px; } /* 支出为红色 */ #wechatAppUI .wc-tx-amount.wc-income { color: #34c759; } /* 收入为绿色 */ #wechatAppUI .wc-tx-date { font-size: 13px; color: #8e8e93; } /* 强制灰色 */ /* ========================================== 聊天气泡内：黑白灰转账卡片样式 (融合版) ========================================== */ #wechatAppUI .wc-cny-icon { width: 18px; height: 18px; fill: currentColor; } #wechatAppUI .wc-check-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-return-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-wp-logo { width: 14px; height: 14px; fill: currentColor; } #wechatAppUI .wc-transfer-card { width: 230px; overflow: hidden; display: flex; flex-direction: column; border-radius: 6px; /* 小圆角 */ text-align: left; } #wechatAppUI .wc-transfer-top { padding: 12px 14px; display: flex; align-items: center; gap: 12px; } #wechatAppUI .wc-transfer-icon-box { width: 36px; height: 36px; background-color: #FFFFFF; border-radius: 50%; /* 圆形包裹 */ display: flex; justify-content: center; align-items: center; flex-shrink: 0; } #wechatAppUI .wc-transfer-info { display: flex; flex-direction: column; gap: 2px; } #wechatAppUI .wc-transfer-amount { font-size: 17px; font-weight: 500; color: #FFFFFF; line-height: 1.2; } #wechatAppUI .wc-transfer-desc { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } #wechatAppUI .wc-transfer-bottom { padding: 6px 14px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; } /* 状态：未收款 (深灰顶 + 浅灰底) */ #wechatAppUI .wc-transfer-card.pending { background-color: #3A3A3C; cursor: pointer; } #wechatAppUI .wc-transfer-card.pending:active { opacity: 0.8; } #wechatAppUI .wc-transfer-card.pending .wc-transfer-icon-box { color: #3A3A3C; /* SVG 颜色与背景同色 */ } #wechatAppUI .wc-transfer-card.pending .wc-transfer-desc { color: rgba(255, 255, 255, 0.7); } #wechatAppUI .wc-transfer-card.pending .wc-transfer-bottom { background-color: #2C2C2E; color: #8E8E93; } /* 状态：已收款 / 已退还 / 已过期 (纯灰质感) */ #wechatAppUI .wc-transfer-card.received, #wechatAppUI .wc-transfer-card.rejected, #wechatAppUI .wc-transfer-card.expired { background-color: #8E8E93; } #wechatAppUI .wc-transfer-card.received .wc-transfer-icon-box, #wechatAppUI .wc-transfer-card.rejected .wc-transfer-icon-box, #wechatAppUI .wc-transfer-card.expired .wc-transfer-icon-box { color: #8E8E93; } #wechatAppUI .wc-transfer-card.received .wc-transfer-desc, #wechatAppUI .wc-transfer-card.rejected .wc-transfer-desc, #wechatAppUI .wc-transfer-card.expired .wc-transfer-desc { color: rgba(255, 255, 255, 0.8); } #wechatAppUI .wc-transfer-card.received .wc-transfer-bottom, #wechatAppUI .wc-transfer-card.rejected .wc-transfer-bottom, #wechatAppUI .wc-transfer-card.expired .wc-transfer-bottom { background-color: #8E8E93; border-top: 0.5px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); } /* 去除转账卡片外部的气泡背景和尾巴 */ #wechatAppUI .message-bubble.transfer-bubble { background-color: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; } #wechatAppUI .message-bubble.transfer-bubble::before { display: none !important; } /* ========================================= 亲属卡气泡排版 (极简排版，无光泽) ========================================= */ #wechatAppUI .wc-family-card-bubble { width: 240px; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; position: relative; transition: transform 0.1s; background-color: #1C1C1E; color: #ffffff; border: 0.5px solid rgba(255,255,255,0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: left; } #wechatAppUI .wc-family-card-bubble:active { transform: scale(0.97); } #wechatAppUI .wc-family-card-bubble .pay-top { display: flex; align-items: center; gap: 12px; } #wechatAppUI .wc-family-card-bubble .pay-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-family-card-bubble .pay-icon svg { width: 100%; height: 100%; fill: currentColor; } #wechatAppUI .wc-family-card-bubble .pay-info { display: flex; flex-direction: column; gap: 2px; } #wechatAppUI .wc-family-card-bubble .pay-amount { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; display: flex; align-items: baseline; color: #ffffff; line-height: 1.2; } #wechatAppUI .wc-family-card-bubble .pay-amount span { font-size: 18px; margin-right: 2px; font-weight: 500; } #wechatAppUI .wc-family-card-bubble .pay-status { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); } #wechatAppUI .wc-family-card-bubble .pay-bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); } #wechatAppUI .wc-family-card-bubble .pay-brand { font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: 0.5px; } /* ========================================== 微信转账详情居中弹窗样式 ========================================== */ #wechatAppUI .wc-transfer-detail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } #wechatAppUI .wc-transfer-detail-overlay.show { opacity: 1; visibility: visible; } #wechatAppUI .wc-td-card { width: 320px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #wechatAppUI .wc-transfer-detail-overlay.show .wc-td-card { transform: scale(1); } #wechatAppUI .wc-td-header { padding: 16px 16px 0; display: flex; justify-content: flex-start; } #wechatAppUI .wc-td-close { cursor: pointer; color: #8E8E93; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: rgba(0,0,0,0.05); transition: background-color 0.2s; } #wechatAppUI .wc-td-close:active { background-color: rgba(0,0,0,0.1); } #wechatAppUI .wc-td-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-td-content { display: flex; flex-direction: column; align-items: center; padding: 10px 24px 24px; } #wechatAppUI .wc-td-icon { width: 56px; height: 56px; border-radius: 50%; background-color: #FF9500; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; transition: all 0.3s; } #wechatAppUI .wc-td-icon svg { width: 30px; height: 30px; } #wechatAppUI .wc-td-status { font-size: 16px; color: #000; margin-bottom: 8px; font-weight: 600; } #wechatAppUI .wc-td-amount { font-size: 44px; font-weight: 500; margin-bottom: 12px; display: flex; align-items: baseline; letter-spacing: -0.5px; } #wechatAppUI .wc-td-amount span { font-size: 28px; margin-right: 4px; font-weight: 400; } #wechatAppUI .wc-td-note { color: #8E8E93; font-size: 14px; text-align: center; margin-bottom: 28px; line-height: 1.4; padding: 0 10px; } #wechatAppUI .wc-td-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 24px; } #wechatAppUI .wc-td-btn { width: 100%; padding: 12px 0; border-radius: 10px; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; border: none; outline: none; transition: opacity 0.2s, transform 0.1s; } #wechatAppUI .wc-td-btn:active { opacity: 0.8; transform: scale(0.98); } #wechatAppUI .wc-td-btn.primary { background-color: #07C160; color: #fff; } #wechatAppUI .wc-td-btn.reject { background-color: #F2F2F7; color: #FF3B30; } #wechatAppUI .wc-td-info-list { width: 100%; border-top: 0.5px solid rgba(0,0,0,0.08); padding-top: 16px; } #wechatAppUI .wc-td-info-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; } #wechatAppUI .wc-td-info-label { color: #8E8E93; } #wechatAppUI .wc-td-info-value { color: #000; font-weight: 500; } /* ========================================== 底部抽屉弹窗 (Bottom Sheet) ========================================== */ #wechatAppUI .bottom-sheet-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 3000; display: none; flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity 0.3s; } #wechatAppUI .bottom-sheet-overlay.show { display: flex; opacity: 1; } #wechatAppUI .bottom-sheet { width: 100%; background-color: #F9F9F9; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; padding-bottom: 40px; min-height: 400px; } #wechatAppUI .bottom-sheet-overlay.show .bottom-sheet { transform: translateY(0); } #wechatAppUI .sheet-header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; } #wechatAppUI .sheet-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 800; color: #000; } #wechatAppUI .circle-btn { width: 32px; height: 32px; border-radius: 50%; background-color: #EAEAEA; display: flex; justify-content: center; align-items: center; cursor: pointer; } #wechatAppUI .back-btn svg { width: 20px; height: 20px; stroke: #7A7A7D; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; } #wechatAppUI .download-btn svg { width: 16px; height: 16px; stroke: #7A7A7D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; } #wechatAppUI .sheet-header-right { display: flex; gap: 8px; align-items: center; } #wechatAppUI .pill-btn { padding: 6px 14px; border-radius: 16px; background-color: #EAEAEA; font-size: 14px; font-weight: 800; color: #7A7A7D; cursor: pointer; } #wechatAppUI .pill-btn:active, #wechatAppUI .circle-btn:active { opacity: 0.7; } #wechatAppUI .pill-btn.is-busy { opacity: 0.45; pointer-events: none; } #wechatAppUI .wc-image-drawing { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #ececef 0%, #e1e1e6 100%); } #wechatAppUI .wc-image-drawing-shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.62) 48%, transparent 80%); animation: wcImageDrawingSweep 1.45s ease-in-out infinite; } #wechatAppUI .wc-image-drawing-label { position: relative; z-index: 1; color: #6e6e73; font-size: 15px; font-weight: 650; letter-spacing: 0.02em; } #wechatAppUI .wc-image-drawing-dots::after { content: ''; animation: wcImageDrawingDots 1.2s steps(4, end) infinite; } @keyframes wcImageDrawingSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes wcImageDrawingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } #wechatAppUI .flip-container { width: 280px; height: 280px; margin: 30px auto; perspective: 1000px; } #wechatAppUI .flipper { width: 100%; height: 100%; position: relative; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; } #wechatAppUI .flipper.flipped { transform: rotateY(180deg); } #wechatAppUI .flip-container .front, #wechatAppUI .flip-container .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; backface-visibility: hidden; border-radius: 20px; overflow: hidden; } #wechatAppUI .flip-container .front { background-color: #E5E5EA; display: flex; justify-content: center; align-items: center; cursor: pointer; background-size: cover; background-position: center; } #wechatAppUI .flip-container .front img { width: 100%; height: 100%; object-fit: cover; } #wechatAppUI .placeholder-desc-text { padding: 20px; font-size: 15px; color: #333; line-height: 1.5; text-align: center; width: 100%; height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; } #wechatAppUI .flip-container .back { background-color: #fff; transform: rotateY(180deg); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 15px; color: #333; line-height: 1.5; border: 1px solid #E5E5EA; cursor: pointer; } #wechatAppUI .back-text-content { flex: 1; display: flex; align-items: center; overflow-y: auto; width: 100%; } /* 提示词编辑抽屉 */ #wechatAppUI .wc-prompt-drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); display: none; align-items: flex-end; z-index: 2500; opacity: 0; transition: opacity 0.3s; } #wechatAppUI .wc-prompt-drawer-overlay.show { opacity: 1; } #wechatAppUI .wc-prompt-drawer-container { width: 100%; display: flex; flex-direction: column; align-items: center; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } #wechatAppUI .wc-prompt-drawer-overlay.show .wc-prompt-drawer-container { transform: translateY(0); } #wechatAppUI .wc-prompt-drawer-bg-card { width: 90%; height: 12px; background: #E5E5EA; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); } #wechatAppUI .wc-prompt-drawer-content { width: 100%; height: 75vh; background: #F2F2F7; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 20px); box-sizing: border-box; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); } #wechatAppUI .wc-prompt-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #F2F2F7; border-radius: 16px 16px 0 0; flex-shrink: 0; } #wechatAppUI .wc-prompt-header-left, #wechatAppUI .wc-prompt-header-right { display: flex; align-items: center; gap: 8px; flex: 1; } #wechatAppUI .wc-prompt-header-right { justify-content: flex-end; } #wechatAppUI .wc-prompt-header-center { flex: 1; text-align: center; } #wechatAppUI .wc-prompt-pill-btn { font-size: 16px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: #E5E5EA; cursor: pointer; user-select: none; transition: background-color 0.2s; } #wechatAppUI .wc-prompt-pill-btn:active { background: #D1D1D6; } #wechatAppUI .wc-prompt-pill-btn.cancel { color: #8E8E93; } #wechatAppUI .wc-prompt-pill-btn.create { color: #8E8E93; } #wechatAppUI .wc-prompt-circle-btn { width: 30px; height: 30px; border-radius: 50%; background: #E5E5EA; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.2s; } #wechatAppUI .wc-prompt-circle-btn:active { background: #D1D1D6; } #wechatAppUI .wc-prompt-circle-btn svg { width: 18px; height: 18px; fill: #8E8E93; } #wechatAppUI .wc-prompt-drawer-title { font-size: 18px; font-weight: 800; color: #000; } #wechatAppUI .wc-prompt-drawer-body { flex: 1; padding: 0 16px 16px 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } #wechatAppUI .wc-prompt-input-group { background: #fff; border-radius: 16px; overflow: hidden; } #wechatAppUI .wc-prompt-input-row { padding: 16px; } #wechatAppUI .wc-prompt-input-row input { width: 100%; border: none; outline: none; font-size: 17px; font-weight: 600; color: #000; background: transparent; } #wechatAppUI .wc-prompt-variables-container { display: flex; justify-content: center; gap: 10px; margin-top: 4px; margin-bottom: 4px; } #wechatAppUI .wc-prompt-var-pill { padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 700; background: #7A7A7D; color: #fff; cursor: pointer; transition: transform 0.1s, background 0.2s; } #wechatAppUI .wc-prompt-var-pill:active { background: #636366; transform: scale(0.95); } #wechatAppUI .wc-prompt-textarea-row { padding: 16px; height: 250px; display: flex; } #wechatAppUI .wc-prompt-textarea-row textarea { width: 100%; height: 100%; border: none; outline: none; font-size: 16px; color: #000; background: transparent; resize: none; font-family: inherit; line-height: 1.5; } #wechatAppUI .wc-prompt-input-row input::placeholder, #wechatAppUI .wc-prompt-textarea-row textarea::placeholder { color: #C7C7CC; font-weight: 500; } /* 提示词教程弹窗 */ #wechatAppUI .wc-prompt-tutorial-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 3000; opacity: 0; transition: opacity 0.3s; } #wechatAppUI .wc-prompt-tutorial-overlay.show { opacity: 1; } #wechatAppUI .wc-prompt-tutorial-card { background: #fff; width: 85%; max-width: 340px; max-height: 80vh; overflow-y: auto; border-radius: 20px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; gap: 16px; } #wechatAppUI .wc-prompt-tutorial-overlay.show .wc-prompt-tutorial-card { transform: scale(1); } #wechatAppUI .wc-prompt-tutorial-title { font-size: 20px; font-weight: 800; text-align: center; color: #000; margin-bottom: 8px; } #wechatAppUI .wc-prompt-tutorial-content { font-size: 14px; color: #333; line-height: 1.6; } #wechatAppUI .wc-prompt-tutorial-content h4 { margin: 16px 0 8px 0; color: #000; font-size: 15px; } #wechatAppUI .wc-prompt-tutorial-content h4:first-child { margin-top: 0; } #wechatAppUI .wc-prompt-tutorial-content p { margin-top: 0; margin-bottom: 12px; } #wechatAppUI .wc-prompt-tutorial-content code { background: #F2F2F7; padding: 2px 6px; border-radius: 6px; color: #007aff; font-weight: 600; font-family: monospace; } #wechatAppUI .wc-prompt-tutorial-btn { background: #007aff; color: #fff; border: none; border-radius: 14px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; text-align: center; margin-top: 8px; } #wechatAppUI .wc-prompt-tutorial-btn:active { opacity: 0.8; } /* 微信消息编辑弹窗 (iOS 清透感 280px 均衡版) */ #wechatAppUI .wc-edit-msg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 3500; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-edit-msg-overlay.show { display: flex; opacity: 1; } #wechatAppUI .wc-edit-msg-panel { width: 280px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border-radius: 28px; border: 0.5px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); padding: 20px; transform: scale(0.9) translateY(10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box; } #wechatAppUI .wc-edit-msg-overlay.show .wc-edit-msg-panel { transform: scale(1) translateY(0); } #wechatAppUI .wc-edit-msg-header { font-size: 17px; font-weight: 700; text-align: center; color: #000; margin-bottom: 16px; } #wechatAppUI .wc-edit-msg-panel textarea { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.04); border: 0.5px solid rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 12px; height: 90px; font-size: 16px; font-family: inherit; color: #000; resize: none; outline: none; line-height: 1.4; margin-bottom: 16px; } #wechatAppUI .wc-edit-msg-panel textarea::placeholder { color: rgba(0,0,0,0.3); } #wechatAppUI .wc-edit-msg-actions { display: flex; gap: 12px; } #wechatAppUI .wc-edit-msg-btn { flex: 1; padding: 12px 0; border-radius: 14px; border: none; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-edit-msg-btn:active { transform: scale(0.96); } #wechatAppUI .wc-edit-msg-btn.cancel { background: rgba(0, 0, 0, 0.06); color: #000; } #wechatAppUI .wc-edit-msg-btn.cancel:active { background: rgba(0, 0, 0, 0.1); } #wechatAppUI .wc-edit-msg-btn.save { background: var(--tg-blue); color: #fff; box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35); } /* 微信语音发送弹窗 (iOS 清透感 280px 均衡版 + 现代条形频谱) */ #wechatAppUI .wc-voice-msg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 3500; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-voice-msg-overlay.show { display: flex; opacity: 1; } #wechatAppUI .wc-voice-msg-panel { width: 280px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border-radius: 28px; border: 0.5px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); padding: 20px; transform: scale(0.9) translateY(10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box; } #wechatAppUI .wc-voice-msg-overlay.show .wc-voice-msg-panel { transform: scale(1) translateY(0); } #wechatAppUI .wc-voice-msg-header { font-size: 17px; font-weight: 700; text-align: center; color: #000; margin-bottom: 12px; } #wechatAppUI .wc-voice-wave-container { height: 50px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; position: relative; } #wechatAppUI .wc-spectrum-bars { display: flex; align-items: center; gap: 4px; } #wechatAppUI .wc-spectrum-bar { width: 4px; background: var(--tg-blue); border-radius: 2px; animation: wc-spectrum-bounce 1s ease-in-out infinite; } #wechatAppUI .wc-spectrum-bar:nth-child(1) { height: 12px; animation-delay: 0.0s; } #wechatAppUI .wc-spectrum-bar:nth-child(2) { height: 24px; animation-delay: 0.2s; } #wechatAppUI .wc-spectrum-bar:nth-child(3) { height: 36px; animation-delay: 0.4s; } #wechatAppUI .wc-spectrum-bar:nth-child(4) { height: 24px; animation-delay: 0.2s; } #wechatAppUI .wc-spectrum-bar:nth-child(5) { height: 12px; animation-delay: 0.0s; } @keyframes wc-spectrum-bounce { 0%, 100% { transform: scaleY(0.6); opacity: 0.6; } 50% { transform: scaleY(1.2); opacity: 1; } } #wechatAppUI .wc-voice-msg-panel textarea { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.04); border: 0.5px solid rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 12px; height: 80px; font-size: 15px; font-family: inherit; color: #000; resize: none; outline: none; line-height: 1.4; margin-bottom: 16px; } #wechatAppUI .wc-voice-msg-panel textarea::placeholder { color: rgba(0,0,0,0.3); } #wechatAppUI .wc-voice-msg-actions { display: flex; gap: 12px; } #wechatAppUI .wc-voice-msg-btn { flex: 1; padding: 12px 0; border-radius: 14px; border: none; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-voice-msg-btn:active { transform: scale(0.96); } #wechatAppUI .wc-voice-msg-btn.cancel { background: rgba(0, 0, 0, 0.06); color: #000; } #wechatAppUI .wc-voice-msg-btn.cancel:active { background: rgba(0, 0, 0, 0.1); } #wechatAppUI .wc-voice-msg-btn.save { background: var(--tg-blue); color: #fff; box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35); } /* 亲属卡弹窗 (iOS 系统标准磨砂) */ #wechatAppUI .wc-fc-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 3500; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-fc-modal-overlay.show { display: flex; opacity: 1; } #wechatAppUI .wc-fc-modal { width: 320px; border-radius: 28px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; background: rgba(249, 249, 249, 0.92); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 10px 40px rgba(0,0,0,0.08), inset 0 0 0 0.5px rgba(255,255,255,0.8); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #wechatAppUI .wc-fc-modal-overlay.show .wc-fc-modal { transform: scale(1); } #wechatAppUI .wc-fc-segment-control { display: flex; position: relative; z-index: 1; border-radius: 20px; padding: 3px; background: rgba(118, 118, 128, 0.12); } #wechatAppUI .wc-fc-segment-btn { flex: 1; text-align: center; font-size: 15px; font-weight: 600; padding: 8px 0; cursor: pointer; z-index: 2; transition: color 0.2s; border-radius: 16px; color: rgba(0,0,0,0.5); } #wechatAppUI .wc-fc-segment-btn.active { color: #000; } #wechatAppUI .wc-fc-segment-slider { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 16px; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); z-index: 1; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04); } #wechatAppUI .wc-fc-amount-area { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } #wechatAppUI .wc-fc-currency { font-size: 32px; font-weight: 600; color: #000; } #wechatAppUI .wc-fc-amount-input { width: 140px; font-size: 48px; font-weight: 500; border: none; background: transparent; outline: none; color: #000; padding: 0; } #wechatAppUI .wc-fc-amount-input::placeholder { color: rgba(0,0,0,0.2); } #wechatAppUI .wc-fc-note-area { display: flex; flex-direction: column; gap: 8px; } #wechatAppUI .wc-fc-note-input { width: 100%; border: none; outline: none; font-size: 15px; color: #000; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; text-align: center; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); } #wechatAppUI .wc-fc-note-input::placeholder { color: rgba(0,0,0,0.3); } #wechatAppUI .wc-fc-action-area { display: flex; gap: 12px; margin-top: 4px; } #wechatAppUI .wc-fc-btn { flex: 1; padding: 14px 0; border: none; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 20px; transition: transform 0.1s, opacity 0.2s; } #wechatAppUI .wc-fc-btn:active { transform: scale(0.96); } #wechatAppUI .wc-fc-btn-cancel { color: #000; background: rgba(0, 0, 0, 0.06); } #wechatAppUI .wc-fc-btn-confirm { color: #fff; background: #007aff; box-shadow: 0 6px 16px rgba(0, 122, 255, 0.3); } /* ========================================== 音乐邀请卡片：Live Activity 实时活动风格 ========================================== */ #wechatAppUI .wc-music-invite-card-live { width: 260px; background: #1C1C1E; border-radius: 24px; padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); cursor: pointer; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; } #wechatAppUI .wc-music-invite-card-live:active { transform: scale(0.96); } #wechatAppUI .wc-music-invite-card-live .live-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #FFFFFF; } #wechatAppUI .wc-music-invite-card-live .live-badge { display: flex; align-items: center; gap: 6px; color: #FA243C; } #wechatAppUI .wc-music-invite-card-live .live-dot { width: 8px; height: 8px; background: #FA243C; border-radius: 50%; /* 修复卡顿：改用透明度动画，避免 box-shadow 引发重绘 */ animation: wcMusicPulse 2s ease-in-out infinite; will-change: opacity; } @keyframes wcMusicPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } #wechatAppUI .wc-music-invite-card-live .live-body { display: flex; align-items: center; gap: 14px; } #wechatAppUI .wc-music-invite-card-live .live-cover { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #333; } #wechatAppUI .wc-music-invite-card-live .live-info { flex: 1; overflow: hidden; } #wechatAppUI .wc-music-invite-card-live .live-title { font-size: 16px; font-weight: 700; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } #wechatAppUI .wc-music-invite-card-live .live-artist { font-size: 14px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .wc-music-invite-card-live .live-waveform { display: flex; align-items: center; gap: 3px; height: 20px; } #wechatAppUI .wc-music-invite-card-live .live-waveform span { width: 3px; background: #FA243C; border-radius: 2px; animation: wcMusicWave 1s ease-in-out infinite; /* 修复卡顿：开启 GPU 硬件加速，固定底部缩放 */ transform-origin: bottom; will-change: transform; transform: translateZ(0); } #wechatAppUI .wc-music-invite-card-live .live-waveform span:nth-child(1) { height: 10px; animation-delay: 0s; } #wechatAppUI .wc-music-invite-card-live .live-waveform span:nth-child(2) { height: 20px; animation-delay: 0.2s; } #wechatAppUI .wc-music-invite-card-live .live-waveform span:nth-child(3) { height: 14px; animation-delay: 0.4s; } @keyframes wcMusicWave { 0%, 100% { transform: scaleY(0.5) translateZ(0); } 50% { transform: scaleY(1) translateZ(0); } } /* 移除了 .rejected 的 opacity 属性，使其保持原样不透明 */ /* ========================================== 接收音乐邀请弹窗 (双头像连线风格) ========================================== */ #wechatAppUI .wc-receive-music-invite-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 4000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-receive-music-invite-overlay.show { opacity: 1; } #wechatAppUI .wc-rmi-modal { width: 280px; background: #2C2C2E; border-radius: 24px; padding: 40px 20px 30px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #wechatAppUI .wc-receive-music-invite-overlay.show .wc-rmi-modal { transform: scale(1); } #wechatAppUI .wc-rmi-avatars { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; position: relative; width: 100%; } #wechatAppUI .wc-rmi-avatar-box { width: 70px; height: 70px; border-radius: 50%; background: #fff; padding: 2px; position: relative; z-index: 2; } #wechatAppUI .wc-rmi-avatar-box img, #wechatAppUI .wc-rmi-avatar-box svg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } #wechatAppUI .wc-rmi-title { font-size: 18px; font-weight: 600; color: #FFF; margin-bottom: 8px; } #wechatAppUI .wc-rmi-subtitle { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 40px; } #wechatAppUI .wc-rmi-actions { display: flex; gap: 40px; } #wechatAppUI .wc-rmi-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.1s; } #wechatAppUI .wc-rmi-btn:active { transform: scale(0.9); } #wechatAppUI .wc-rmi-btn.reject { background: #555555; } #wechatAppUI .wc-rmi-btn.accept { background: #FA243C; } #wechatAppUI .wc-rmi-btn svg { width: 30px; height: 30px; stroke: #FFF; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ========================================== 一起听歌详情弹窗 (极致清透白) ========================================== */ #wechatAppUI .wc-music-live-detail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 4000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-music-live-detail-overlay.show { opacity: 1; } #wechatAppUI .wc-ml-modal { width: 320px; background: rgba(250, 250, 252, 0.6); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 24px 48px rgba(0,0,0,0.12); border-radius: 32px; padding: 30px 20px 20px; display: flex; flex-direction: column; align-items: center; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box; position: relative; } #wechatAppUI .wc-music-live-detail-overlay.show .wc-ml-modal { transform: scale(1); } #wechatAppUI .ml-leave-btn { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(142, 142, 147, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; } #wechatAppUI .ml-leave-btn svg { width: 16px; height: 16px; } #wechatAppUI .ml-avatars-section { display: flex; justify-content: center; gap: 16px; width: 100%; margin-bottom: 16px; } #wechatAppUI .ml-person { display: flex; flex-direction: column; align-items: center; } #wechatAppUI .ml-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12); margin-bottom: 10px; } #wechatAppUI .ml-person-name { font-size: 16px; font-weight: 700; color: #333; } #wechatAppUI .ml-status-text { font-size: 13px; color: #8E8E93; font-weight: 500; text-align: center; margin-bottom: 24px; } #wechatAppUI .ml-player-card { width: 100%; border-radius: 24px; padding: 16px; box-sizing: border-box; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; position: relative; } #wechatAppUI .ml-mini-wave { position: absolute; right: 16px; top: 16px; display: flex; gap: 2px; align-items: center; height: 16px; } #wechatAppUI .ml-mini-wave span { width: 2px; background: #8E8E93; border-radius: 1px; animation: mlWave 1s infinite ease-in-out; } #wechatAppUI .ml-mini-wave span:nth-child(2) { animation-delay: 0.2s; } #wechatAppUI .ml-mini-wave span:nth-child(3) { animation-delay: 0.4s; } @keyframes mlWave { 0%, 100% { height: 4px; } 50% { height: 16px; } } #wechatAppUI .ml-song-info { text-align: center; margin-bottom: 12px; padding: 0 20px; } #wechatAppUI .ml-song-title { font-size: 17px; font-weight: 800; color: #000; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .ml-song-artist { font-size: 13px; color: #8E8E93; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wechatAppUI .ml-progress-area { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #wechatAppUI .ml-time-text { font-size: 11px; color: #8E8E93; font-weight: 600; font-variant-numeric: tabular-nums; } #wechatAppUI .ml-progress-bar { flex: 1; height: 5px; background: rgba(0,0,0,0.1); border-radius: 3px; position: relative; } #wechatAppUI .ml-progress-fill { width: 0%; height: 100%; background: #333; border-radius: 3px; } #wechatAppUI .ml-controls-area { display: flex; justify-content: space-between; align-items: center; padding: 0 5px; } #wechatAppUI .ml-main-ctrls { display: flex; align-items: center; gap: 24px; } #wechatAppUI .ml-ctrl-icon { fill: currentColor; cursor: pointer; transition: opacity 0.2s; } #wechatAppUI .ml-ctrl-icon:active { opacity: 0.5; } #wechatAppUI .ml-ctrl-icon.side { width: 22px; height: 22px; color: #8E8E93; } #wechatAppUI .ml-ctrl-icon.skip { width: 32px; height: 32px; color: #000; } #wechatAppUI .ml-ctrl-playpause { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #000; } #wechatAppUI .ml-ctrl-playpause svg { width: 100%; height: 100%; fill: currentColor; } @keyframes mlWaitingFade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } #wechatAppUI .ml-waiting-dots { animation: mlWaitingFade 1.5s infinite ease-in-out; } /* ========================================== 微信收藏页面样式 ========================================== */ #page-favorites { background-color: #FFFFFF; z-index: 1000; display: none; flex-direction: column; } #page-favorites.active { display: flex; } #wechatAppUI .wc-fav-header { display: flex; justify-content: space-between; align-items: center; padding: 45px 16px 10px 16px; background-color: #FFFFFF; } #wechatAppUI .wc-fav-back { width: 32px; height: 32px; display: flex; align-items: center; cursor: pointer; } #wechatAppUI .wc-fav-back svg { width: 24px; height: 24px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-fav-title { font-size: 17px; font-weight: 600; color: #000; display: flex; align-items: center; gap: 4px; } #wechatAppUI .wc-fav-title svg { width: 16px; height: 16px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-fav-actions { display: flex; gap: 16px; align-items: center; } #wechatAppUI .wc-fav-actions svg { width: 22px; height: 22px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-fav-search-container { padding: 10px 16px; background-color: #FFFFFF; } #wechatAppUI .wc-fav-search-bar { display: flex; align-items: center; background: #F2F2F7; border-radius: 8px; padding: 8px 12px; height: 36px; } #wechatAppUI .wc-fav-search-bar svg { width: 16px; height: 16px; stroke: #8e8e93; stroke-width: 2; fill: none; margin-right: 8px; } #wechatAppUI .wc-fav-search-bar input { border: none; background: transparent; outline: none; font-size: 15px; color: #000; width: 100%; } #wechatAppUI .wc-fav-search-bar input::placeholder { color: #8e8e93; } #wechatAppUI .wc-fav-tabs { display: flex; padding: 0 16px; background-color: #FFFFFF; border-bottom: 0.5px solid rgba(0,0,0,0.05); overflow-x: auto; scrollbar-width: none; } #wechatAppUI .wc-fav-tabs::-webkit-scrollbar { display: none; } #wechatAppUI .wc-fav-tab { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: #8e8e93; padding: 12px 0; cursor: pointer; position: relative; white-space: nowrap; } #wechatAppUI .wc-fav-tab.active { color: #000; } #wechatAppUI .wc-fav-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background-color: #007aff; border-radius: 2px; } #wechatAppUI .wc-fav-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } #wechatAppUI .wc-fav-item-wrapper { position: relative; width: 100%; display: flex; align-items: center; cursor: pointer; user-select: none; overflow: hidden; } #wechatAppUI .wc-fav-checkbox { position: absolute; left: 2px; top: 50%; transform: translateY(-50%) scale(0.6); width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c7c7cc; background: transparent; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s, border-color 0.2s; z-index: 5; } #wechatAppUI .wc-fav-list.edit-mode .wc-fav-checkbox { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; } #wechatAppUI .wc-fav-item-wrapper.selected .wc-fav-checkbox { background: #007aff; border-color: #007aff; } #wechatAppUI .wc-fav-item-wrapper.selected .wc-fav-checkbox::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } #wechatAppUI .wc-fav-card { flex: 1; width: 100%; background: #F9F9F9; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } #wechatAppUI .wc-fav-card:active { background: #F2F2F7; } #wechatAppUI .wc-fav-list.edit-mode .wc-fav-card { transform: translateX(36px); width: calc(100% - 36px); flex: none; } #wechatAppUI .wc-fav-card-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } #wechatAppUI .wc-fav-text { font-size: 16px; color: #000; line-height: 1.5; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } #wechatAppUI .wc-fav-thumb { width: 60px; height: 60px; border-radius: 6px; background-color: #e5e5ea; background-size: cover; background-position: center; flex-shrink: 0; } #wechatAppUI .wc-fav-card-footer { font-size: 12px; color: #8e8e93; font-weight: 500; } /* ========================================== Token 查询弹窗 (iOS 清透感设计) ========================================== */ #wechatAppUI .wc-token-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 4000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } #wechatAppUI .wc-token-modal-overlay.show { opacity: 1; visibility: visible; } #wechatAppUI .wc-token-modal { width: 310px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 28px; padding: 24px 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8); transform: scale(0.9) translateY(10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; box-sizing: border-box; } #wechatAppUI .wc-token-modal-overlay.show .wc-token-modal { transform: scale(1) translateY(0); } #wechatAppUI .wc-token-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } #wechatAppUI .wc-token-title { font-size: 18px; font-weight: 700; color: #000; letter-spacing: -0.5px; } #wechatAppUI .wc-token-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; justify-content: center; align-items: center; cursor: pointer; color: #8E8E93; transition: background 0.2s; } #wechatAppUI .wc-token-close:active { background: rgba(0,0,0,0.12); } #wechatAppUI .wc-token-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-token-chart-container { position: relative; width: 180px; height: 180px; margin: 0 auto 24px; display: flex; justify-content: center; align-items: center; } #wechatAppUI .wc-token-chart-center { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #wechatAppUI .wc-token-total-num { font-size: 28px; font-weight: 800; color: #000; font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.5px; line-height: 1; } #wechatAppUI .wc-token-total-label { font-size: 11px; color: #8E8E93; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } #wechatAppUI .wc-token-list { width: 100%; background: rgba(0,0,0,0.03); border-radius: 16px; padding: 4px 16px; box-sizing: border-box; } #wechatAppUI .wc-token-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 0.5px solid rgba(0,0,0,0.05); } #wechatAppUI .wc-token-list-item:last-child { border-bottom: none; } #wechatAppUI .wc-token-item-left { display: flex; align-items: center; gap: 10px; color: #333; font-weight: 600; font-size: 14px; } #wechatAppUI .wc-token-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); } #wechatAppUI .wc-token-item-right { font-weight: 700; color: #000; font-family: -apple-system, BlinkMacSystemFont, monospace; font-size: 15px; } /* ========================================== 图2风格：微信系统设置页面 (#page-wechat-settings) ========================================== */ #wechatAppUI #page-wechat-settings { background-color: #ffffff !important; } #wechatAppUI .wc-set-v2-header { display: flex; justify-content: space-between; align-items: center; padding: 45px 16px 12px 16px; background-color: #ffffff; position: sticky; top: 0; z-index: 10; border-bottom: none; } #wechatAppUI .wc-set-v2-back { width: 32px; height: 32px; display: flex; align-items: center; cursor: pointer; color: #000; } #wechatAppUI .wc-set-v2-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-set-v2-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-set-v2-content { flex: 1; overflow-y: auto; padding: 12px 16px 40px; background-color: #ffffff; } #wechatAppUI .wc-set-v2-group-title { font-size: 13px; color: #8E8E93; margin: 18px 12px 8px; font-weight: 500; } #wechatAppUI .wc-set-v2-card { background: #FFFFFF; border-radius: 16px; overflow: hidden; border: 1px solid #F0F0F3; box-shadow: 0 2px 10px rgba(0,0,0,0.02); } #wechatAppUI .wc-set-v2-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; position: relative; } #wechatAppUI .wc-set-v2-row:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 52px; right: 16px; height: 0.5px; background: rgba(0, 0, 0, 0.05); } #wechatAppUI .wc-set-v2-row.clickable { cursor: pointer; } #wechatAppUI .wc-set-v2-row.clickable:active { background-color: #F8F8F9; } #wechatAppUI .wc-set-v2-row-left { display: flex; align-items: center; gap: 14px; } #wechatAppUI .wc-set-v2-icon-wrap { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #1C1C1E; flex-shrink: 0; } #wechatAppUI .wc-set-v2-icon-wrap svg { width: 22px; height: 22px; } #wechatAppUI .wc-set-v2-label { font-size: 15px; color: #000; font-weight: 400; } #wechatAppUI .wc-set-v2-row-right { display: flex; align-items: center; gap: 6px; } #wechatAppUI .wc-set-v2-user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #E5E5EA; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #8E8E93; font-weight: 600; } #wechatAppUI .wc-set-v2-arrow { width: 8px; height: 13px; stroke: #C7C7CC; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* 个人详细资料居中弹窗 */ #wechatAppUI .wc-profile-detail-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 2100; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-profile-detail-overlay.show { display: flex; opacity: 1; } #wechatAppUI .wc-profile-detail-card { width: 300px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #wechatAppUI .wc-profile-detail-overlay.show .wc-profile-detail-card { transform: scale(1); } #wechatAppUI .wc-pd-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 0.5px solid rgba(0,0,0,0.06); } #wechatAppUI .wc-pd-title { font-size: 16px; font-weight: 600; color: #000; } #wechatAppUI .wc-pd-close { width: 26px; height: 26px; border-radius: 50%; background: #F2F2F7; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #8E8E93; } #wechatAppUI .wc-pd-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-pd-body { padding: 20px 16px 24px; display: flex; flex-direction: column; align-items: center; } #wechatAppUI .wc-pd-avatar-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; } #wechatAppUI .wc-pd-avatar { width: 64px; height: 64px; border-radius: 50%; background-color: #E5E5EA; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #8E8E93; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } #wechatAppUI .wc-pd-name { font-size: 18px; font-weight: 600; color: #000; } #wechatAppUI .wc-pd-list { width: 100%; background: #F8F8FA; border-radius: 12px; padding: 4px 16px; box-sizing: border-box; } #wechatAppUI .wc-pd-item { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; } #wechatAppUI .wc-pd-item:not(:last-child) { border-bottom: 0.5px solid rgba(0,0,0,0.05); } #wechatAppUI .wc-pd-label { color: #8E8E93; } #wechatAppUI .wc-pd-value { color: #000; font-weight: 500; } /* ========================================== 图1风格：微信存储空间页面 (#page-wechat-storage 纯白底色) ========================================== */ #wechatAppUI #page-wechat-storage { background-color: #ffffff !important; } #wechatAppUI .wc-st-header { display: flex; justify-content: space-between; align-items: center; padding: 45px 16px 12px 16px; background-color: #ffffff; position: sticky; top: 0; z-index: 10; border-bottom: none; } #wechatAppUI .wc-st-back { width: 32px; height: 32px; display: flex; align-items: center; cursor: pointer; color: #000; } #wechatAppUI .wc-st-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-st-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-st-content { flex: 1; overflow-y: auto; padding: 14px 16px 40px; background-color: #ffffff; } #wechatAppUI .wc-st-bar-wrapper { padding: 4px 0 16px; } #wechatAppUI .wc-st-bar-track { height: 14px; border-radius: 4px; overflow: hidden; display: flex; background-color: #E5E5EA; margin-bottom: 12px; } #wechatAppUI .wc-st-bar-seg.green { background-color: #07C160; } #wechatAppUI .wc-st-bar-seg.yellow { background-color: #FFB800; } #wechatAppUI .wc-st-bar-seg.blue { background-color: #007AFF; } #wechatAppUI .wc-st-bar-seg.purple { background-color: #AF52DE; } #wechatAppUI .wc-st-bar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; font-size: 12px; color: #666; } #wechatAppUI .wc-st-legend-item { display: flex; align-items: center; gap: 6px; } #wechatAppUI .wc-st-dot { width: 9px; height: 9px; border-radius: 2px; } #wechatAppUI .wc-st-dot.green { background-color: #07C160; } #wechatAppUI .wc-st-dot.yellow { background-color: #FFB800; } #wechatAppUI .wc-st-dot.blue { background-color: #007AFF; } #wechatAppUI .wc-st-dot.purple { background-color: #AF52DE; } /* ========================================== 数据备份与恢复页面 (方形卡片上下排布) ========================================== */ #wechatAppUI #page-wechat-chat-manage { background-color: #ffffff !important; } #wechatAppUI .wc-backup-header { display: flex; justify-content: space-between; align-items: center; padding: 45px 16px 12px 16px; background-color: #ffffff; position: sticky; top: 0; z-index: 10; border-bottom: none; } #wechatAppUI .wc-backup-back { width: 32px; height: 32px; display: flex; align-items: center; cursor: pointer; color: #000; } #wechatAppUI .wc-backup-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-backup-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-backup-content { flex: 1; overflow-y: auto; padding: 20px 16px 40px; display: flex; flex-direction: column; align-items: center; background: #ffffff; } /* 正方形卡片 (适当减小宽度、上下居中排列) */ #wechatAppUI .wc-backup-card.square { width: 220px; aspect-ratio: 1 / 1; background: #FFFFFF; border-radius: 28px; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-bottom: 24px; border: 1px solid #F0F0F4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-sizing: border-box; } #wechatAppUI .wc-backup-card.square:active { transform: scale(0.96); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); } #wechatAppUI .wc-backup-card-icon { width: 68px; height: 68px; border-radius: 22px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-bottom: 16px; } #wechatAppUI .wc-backup-card-icon.export { background: rgba(0, 122, 255, 0.12); color: #007AFF; } #wechatAppUI .wc-backup-card-icon.import { background: rgba(52, 199, 89, 0.12); color: #34C759; } #wechatAppUI .wc-backup-card-icon svg { width: 36px; height: 36px; } #wechatAppUI .wc-backup-card-bottom-info { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } #wechatAppUI .wc-backup-card-title { font-size: 17px; font-weight: 700; color: #1C1C1E; } #wechatAppUI .wc-backup-card-desc { font-size: 12px; color: #8E8E93; line-height: 1.4; padding: 0 4px; } #wechatAppUI .wc-backup-footer-hint { margin-top: 16px; font-size: 12px; color: #8E8E93; text-align: center; font-weight: 500; } #wechatAppUI .wc-st-hero { margin: 12px 0 20px 4px; } #wechatAppUI .wc-st-hero-label { font-size: 13px; color: #333; font-weight: 600; margin-bottom: 6px; } #wechatAppUI .wc-st-hero-num { font-size: 34px; font-weight: 800; color: #000; letter-spacing: -0.5px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } #wechatAppUI .wc-st-hero-sub { font-size: 13px; color: #8E8E93; margin-top: 4px; } #wechatAppUI .wc-st-card { background: #FFFFFF; border-radius: 14px; padding: 18px 16px; margin-bottom: 12px; border: 1px solid #F0F0F3; box-shadow: 0 2px 8px rgba(0,0,0,0.02); } #wechatAppUI .wc-st-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } #wechatAppUI .wc-st-card-title { font-size: 15px; font-weight: 600; color: #000; margin-bottom: 4px; } #wechatAppUI .wc-st-card-size { font-size: 22px; font-weight: 800; color: #000; font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.5px; } #wechatAppUI .wc-st-btn-clean { border: none; border-radius: 6px; padding: 6px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } #wechatAppUI .wc-st-btn-clean:active { opacity: 0.8; } #wechatAppUI .wc-st-btn-clean.primary { background-color: #07C160; color: #FFFFFF; } #wechatAppUI .wc-st-btn-clean.secondary { background-color: #F2F2F7; color: #000000; } #wechatAppUI .wc-st-card-detail { font-size: 13px; color: #666; margin-bottom: 6px; } #wechatAppUI .wc-st-card-desc { font-size: 12px; color: #8E8E93; line-height: 1.5; } #wechatAppUI .wc-st-footer-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 8px 0; } #wechatAppUI .wc-st-fr-title { font-size: 13px; font-weight: 600; color: #000; margin-bottom: 4px; } #wechatAppUI .wc-st-fr-title span { font-weight: 700; } #wechatAppUI .wc-st-fr-desc { font-size: 11px; color: #8E8E93; line-height: 1.4; max-width: 250px; } #wechatAppUI .wc-st-fr-btn { color: #576b95; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px; } #wechatAppUI .wc-user-drawer-item.current-account { border: 1.5px solid rgba(52, 199, 89, 0.4); background: #FAFAFC; } /* ========================================== 设置新密码页面样式 (100% 还原图片风格) ========================================== */ #wechatAppUI #page-wechat-change-pwd { background-color: #ffffff !important; } #wechatAppUI .wc-pwd-v2-header { padding: 45px 16px 8px; display: flex; align-items: center; } #wechatAppUI .wc-pwd-v2-back { width: 32px; height: 32px; display: flex; align-items: center; cursor: pointer; color: #000; } #wechatAppUI .wc-pwd-v2-back svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-pwd-v2-content { padding: 24px 20px 40px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: #ffffff; } #wechatAppUI .wc-pwd-v2-main-title { font-size: 32px; font-weight: 800; color: #2C2C2E; margin: 0 0 32px 0; letter-spacing: -0.5px; } #wechatAppUI .wc-pwd-v2-form-card { background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 12px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02); } #wechatAppUI .wc-pwd-v2-input-row { display: flex; align-items: center; padding: 18px 16px; position: relative; } #wechatAppUI .wc-pwd-v2-input-row:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 0.5px; background: rgba(0, 0, 0, 0.06); } #wechatAppUI .wc-pwd-v2-input-label { width: 90px; font-size: 16px; color: #1C1C1E; font-weight: 700; flex-shrink: 0; } #wechatAppUI .wc-pwd-v2-input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #000; padding: 0; } #wechatAppUI .wc-pwd-v2-input::placeholder { color: #C7C7CC; } #wechatAppUI .wc-pwd-v2-rules-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; padding-left: 2px; } #wechatAppUI .wc-pwd-v2-rule-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8E8E93; } #wechatAppUI .wc-pwd-v2-rule-icon { width: 18px; height: 18px; border-radius: 50%; background-color: #8E8E93; display: flex; justify-content: center; align-items: center; color: #fff; flex-shrink: 0; } #wechatAppUI .wc-pwd-v2-rule-icon svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-pwd-v2-rule-item.passed .wc-pwd-v2-rule-icon { background-color: #34C759; } #wechatAppUI .wc-pwd-v2-rule-item.passed span { color: #1C1C1E; } #wechatAppUI .wc-pwd-v2-submit-btn { width: 100%; height: 50px; border-radius: 8px; border: none; background-color: #BDBDBD; color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: not-allowed; transition: all 0.2s; } #wechatAppUI .wc-pwd-v2-submit-btn.active { background-color: #07C160; cursor: pointer; box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3); } #wechatAppUI .wc-pwd-v2-submit-btn.active:active { transform: scale(0.98); opacity: 0.9; } #wechatAppUI .wc-pwd-v2-footer-hint { font-size: 13px; color: #8E8E93; text-align: center; margin-top: 16px; } /* ========================================== 个性化设置页面样式 (图片同款壁纸卡片 + 半抽屉预设库) ========================================== */ #wechatAppUI #page-wechat-personalize { background-color: #ffffff !important; } #wechatAppUI .wc-ps-content { flex: 1; overflow-y: auto; padding: 14px 16px 40px; background: #ffffff; } /* 壁纸头部与操作按钮 */ #wechatAppUI .wc-wp-header-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 4px 12px; } #wechatAppUI .wc-wp-title { font-size: 22px; font-weight: 800; color: #1C1C1E; letter-spacing: -0.5px; } #wechatAppUI .wc-wp-actions { display: flex; align-items: center; gap: 16px; } #wechatAppUI .wc-wp-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; } #wechatAppUI .wc-wp-btn:active { transform: scale(0.9); } /* 壁纸卡片主体 (灰底圆角矩形 + 左下角胶囊) */ #wechatAppUI .wc-ps-wallpaper-mockup { width: 100%; height: 170px; border-radius: 18px; background-color: #D4D4D8; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } #wechatAppUI .wc-ps-mockup-badge { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 12px; } /* 自定义 CSS 区域 */ #wechatAppUI .wc-ps-section-title { font-size: 13px; color: #8E8E93; font-weight: 600; margin: 18px 8px 8px; } #wechatAppUI .wc-ps-card { background: #FFFFFF; border-radius: 14px; padding: 16px; border: 1px solid #F0F0F3; box-shadow: 0 2px 8px rgba(0,0,0,0.02); margin-bottom: 16px; } #wechatAppUI .wc-ps-textarea { width: 100%; height: 130px; border: none; outline: none; background: #F8F8FA; border-radius: 8px; padding: 12px; font-family: monospace; font-size: 13px; color: #333; resize: none; box-sizing: border-box; line-height: 1.4; } #wechatAppUI .wc-ps-btn-group { display: flex; gap: 12px; } #wechatAppUI .wc-ps-btn { flex: 1; padding: 12px 0; border-radius: 10px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; } #wechatAppUI .wc-ps-btn:active { opacity: 0.8; transform: scale(0.98); } #wechatAppUI .wc-ps-btn.primary { background: #007aff; color: #fff; } #wechatAppUI .wc-ps-btn.secondary { background: #F2F2F7; color: #000; } /* 预设库半抽屉弹窗 (Bottom Drawer) */ #wechatAppUI .wc-preset-drawer { width: 100%; max-height: 75%; min-height: 38%; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: env(safe-area-inset-bottom, 20px); box-shadow: 0 -10px 30px rgba(0,0,0,0.1); } #wechatAppUI .wc-user-drawer-overlay.show .wc-preset-drawer { transform: translateY(0); } #wechatAppUI .wc-preset-drawer-header { padding: 12px 16px 14px; display: flex; flex-direction: column; align-items: center; border-bottom: none solid rgba(0,0,0,0.06); flex-shrink: 0; } #wechatAppUI .wc-preset-drawer-handle { width: 36px; height: 5px; background: #D1D1D6; border-radius: 3px; margin-bottom: 12px; } #wechatAppUI .wc-preset-drawer-title { font-size: 17px; font-weight: 700; color: #000; } #wechatAppUI .wc-preset-drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } #wechatAppUI .wc-empty-preset-hint { text-align: center; color: #8E8E93; font-size: 14px; font-weight: 500; padding: 48px 0; } #wechatAppUI .wc-preset-drawer-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #F8F8FA; border-radius: 12px; } #wechatAppUI .wc-preset-drawer-info { flex: 1; cursor: pointer; } #wechatAppUI .wc-preset-drawer-name { font-size: 15px; font-weight: 600; color: #000; margin-bottom: 2px; } #wechatAppUI .wc-preset-drawer-author { font-size: 12px; color: #8E8E93; } #wechatAppUI .wc-preset-drawer-actions { display: flex; gap: 8px; } #wechatAppUI .wc-preset-btn { border: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; } #wechatAppUI .wc-preset-btn.apply { background: #007aff; color: #fff; } #wechatAppUI .wc-preset-btn.delete { background: #E5E5EA; color: #ff3b30; } /* ========================================== 好友专属动态与朋友圈详情页样式 (相册专属排版) ========================================== */ #wechatAppUI #page-contact-profile { background-color: #ffffff !important; overflow: hidden; position: relative; } /* 顶部通透悬浮导航栏 */ #wechatAppUI .wc-cp-header-bar { position: absolute; top: 0; left: 0; right: 0; height: 88px; padding: 45px 16px 0 16px; display: flex; justify-content: space-between; align-items: center; z-index: 100; pointer-events: none; } #wechatAppUI .wc-cp-header-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; color: #ffffff; cursor: pointer; pointer-events: auto; transition: transform 0.15s; } #wechatAppUI .wc-cp-header-btn:active { transform: scale(0.9); } #wechatAppUI .wc-cp-header-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #wechatAppUI .wc-cp-header-btn svg[fill="currentColor"] { stroke: none; fill: #ffffff; } /* 整体滚动区 */ #wechatAppUI .wc-cp-scroll-container { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; padding-bottom: 80px; } #wechatAppUI .wc-cp-scroll-container::-webkit-scrollbar { display: none; } /* 封面区域 */ #wechatAppUI .wc-cp-cover-area { width: 100%; height: 320px; background-color: #2c2c2e; background-size: cover; background-position: center; position: relative; cursor: pointer; } #wechatAppUI .wc-cp-name-on-cover { position: absolute; right: 106px; bottom: 18px; font-size: 20px; font-weight: 700; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wechatAppUI .wc-cp-avatar-box { position: absolute; right: 16px; bottom: -28px; width: 78px; height: 78px; border-radius: 16px; background: #ffffff; padding: 2px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 10; } #wechatAppUI .wc-cp-avatar { width: 100%; height: 100%; border-radius: 14px; background-color: #E5E5EA; background-size: cover; background-position: center; } /* 微信号标签栏 */ #wechatAppUI .wc-cp-sub-bar { display: flex; justify-content: flex-end; padding: 36px 16px 16px; font-size: 14px; color: #8E8E93; font-weight: 500; } /* 相册列表瀑布流 */ #wechatAppUI .wc-cp-album-feed { padding: 10px 16px; display: flex; flex-direction: column; gap: 24px; } #wechatAppUI .wc-cp-timeline-item { display: flex; align-items: flex-start; gap: 16px; } #wechatAppUI .wc-cp-timeline-left { width: 56px; flex-shrink: 0; display: flex; align-items: baseline; gap: 2px; } #wechatAppUI .wc-cp-date-day { font-size: 24px; font-weight: 800; color: #000000; line-height: 1; } #wechatAppUI .wc-cp-date-month { font-size: 12px; font-weight: 700; color: #000000; } #wechatAppUI .wc-cp-timeline-right { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } #wechatAppUI .wc-cp-post-media-grid { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } #wechatAppUI .wc-cp-post-media-grid::-webkit-scrollbar { display: none; } #wechatAppUI .wc-cp-post-media-item { width: 84px; height: 84px; border-radius: 8px; background-size: cover; background-position: center; background-color: #f2f2f7; flex-shrink: 0; } #wechatAppUI .wc-cp-post-bubble-text { background-color: #F7F7F9; border-radius: 8px; padding: 10px 12px; font-size: 15px; color: #1C1C1E; line-height: 1.4; word-break: break-word; font-weight: 500; } /* ========================================== 位置地图选择弹窗与聊天卡片样式 ========================================== */ #wechatAppUI .wc-loc-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 3500; display: none; justify-content: center; align-items: flex-end; opacity: 0; transition: opacity 0.3s ease; } #wechatAppUI .wc-loc-modal-overlay.show { display: flex; opacity: 1; } #wechatAppUI .wc-loc-modal { width: 100%; height: 85%; max-height: 640px; background: #ffffff; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.15); } #wechatAppUI .wc-loc-modal-overlay.show .wc-loc-modal { transform: translateY(0); } #wechatAppUI .wc-loc-header { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 0.5px solid #E5E5EA; flex-shrink: 0; } #wechatAppUI .wc-loc-btn-cancel { font-size: 16px; color: #007aff; cursor: pointer; } #wechatAppUI .wc-loc-title { font-size: 17px; font-weight: 600; color: #000; } #wechatAppUI .wc-loc-btn-send { font-size: 14px; font-weight: 600; background: #007aff; color: #fff; padding: 6px 14px; border-radius: 16px; cursor: pointer; border: none; } #wechatAppUI .wc-loc-btn-send:active { opacity: 0.8; } #wechatAppUI .wc-loc-search-bar { padding: 10px 16px; background: #ffffff; border-bottom: 0.5px solid #f0f0f0; display: flex; gap: 8px; align-items: center; } #wechatAppUI .wc-loc-search-input-wrap { flex: 1; display: flex; align-items: center; background: #f2f2f7; border-radius: 10px; padding: 6px 10px; gap: 6px; } #wechatAppUI .wc-loc-search-input-wrap svg { width: 16px; height: 16px; stroke: #8e8e93; flex-shrink: 0; } #wechatAppUI .wc-loc-search-input { border: none; outline: none; background: transparent; font-size: 14px; width: 100%; color: #000; } #wechatAppUI .wc-loc-search-btn { padding: 6px 14px; border-radius: 10px; background: #e5e5ea; color: #000; font-size: 13px; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; } #wechatAppUI .wc-loc-map-preview { height: 180px; width: 100%; position: relative; background: #e5e5ea; flex-shrink: 0; overflow: hidden; } #wechatAppUI .wc-loc-map-img { width: 100%; height: 100%; object-fit: cover; } #wechatAppUI .wc-loc-map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); pointer-events: none; z-index: 10; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); } #wechatAppUI .wc-loc-map-pin svg { width: 36px; height: 36px; fill: #ff3b30; } #wechatAppUI .wc-loc-results-list { flex: 1; overflow-y: auto; background: #ffffff; } #wechatAppUI .wc-loc-item { padding: 12px 16px; border-bottom: 0.5px solid #f5f5f5; cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; } #wechatAppUI .wc-loc-item:active, #wechatAppUI .wc-loc-item.selected { background: #f9f9fb; } #wechatAppUI .wc-loc-item-title { font-size: 15px; font-weight: 600; color: #1c1c1e; } #wechatAppUI .wc-loc-item-address { font-size: 12px; color: #8e8e93; line-height: 1.3; } #wechatAppUI .wc-loc-item.selected::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 8px; height: 14px; border: solid #07c160; border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(45deg); } /* 聊天气泡内位置卡片 */ #wechatAppUI .wc-location-card-bubble { width: 240px; border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08); cursor: pointer; display: flex; flex-direction: column; text-align: left; } #wechatAppUI .wc-location-card-bubble:active { opacity: 0.9; } #wechatAppUI .wc-loc-card-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } #wechatAppUI .wc-loc-card-title { font-size: 15px; font-weight: 700; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } #wechatAppUI .wc-loc-card-address { font-size: 11px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } #wechatAppUI .wc-loc-card-map-wrap { height: 110px; width: 100%; position: relative; background: #e5e5ea; overflow: hidden; } #wechatAppUI .wc-loc-card-map-img { width: 100%; height: 100%; object-fit: cover; } #wechatAppUI .wc-loc-card-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); } #wechatAppUI .wc-loc-card-pin svg { width: 28px; height: 28px; fill: #ff3b30; } /* 微信会话列表未读红点角标 */ #wechatAppUI .wc-chat-unread-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; background-color: #ff3b30; color: #ffffff; font-size: 11px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-sizing: border-box; line-height: 1; z-index: 10; } /* 顶部消息通知横幅条 (iOS 灵动岛通知条风格) */ .wc-global-top-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-150%); width: calc(100% - 32px); max-width: 380px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05); border: 0.5px solid rgba(0, 0, 0, 0.08); z-index: 999999; cursor: pointer; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease; opacity: 0; pointer-events: none; overflow: hidden; } .wc-global-top-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .wc-global-top-banner:active { transform: translateX(-50%) scale(0.98); } .wc-banner-inner { display: flex; align-items: center; padding: 12px 14px; gap: 12px; } .wc-banner-avatar { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e5e5ea; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .wc-banner-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wc-banner-header { display: flex; justify-content: space-between; align-items: center; } .wc-banner-name { font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc-banner-time { font-size: 11px; color: #8e8e93; flex-shrink: 0; } .wc-banner-text { font-size: 13px; color: #3c3c43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }