/** * iOS 原生 UI 主题（覆盖层） * 目标：不改 DOM/JS 逻辑，仅通过 CSS 覆盖将 H5 页面外观调整为 iOS 原生风格（含浅色/深色随系统切换）。 * 使用方式：在页面 上添加 class="ios"，并在 style.css 之后引入本文件。 */ /* ===== iOS Design Tokens (scoped) ===== */ html.ios { /* Accent */ --primary-color: #007aff; --primary-light: #4da3ff; --primary-dark: #0051a8; --primary-glow: rgba(0, 122, 255, 0.18); /* Backgrounds */ --bg-primary: #f2f2f7; /* iOS grouped background */ --bg-secondary: rgba(255, 255, 255, 0.82); /* translucent bar */ --bg-tertiary: #ffffff; --bg-card: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04); /* Text */ --text-primary: #000000; --text-secondary: rgba(60, 60, 67, 0.6); --text-muted: rgba(60, 60, 67, 0.38); /* Status */ --success-color: #34c759; --warning-color: #ff9f0a; --danger-color: #ff3b30; --info-color: #007aff; /* Bubbles */ --bubble-self: #007aff; --bubble-other: #e5e5ea; } @media (prefers-color-scheme: dark) { html.ios { --primary-color: #0a84ff; --primary-light: #5ac8fa; --primary-dark: #0060df; --primary-glow: rgba(10, 132, 255, 0.24); --bg-primary: #000000; --bg-secondary: rgba(28, 28, 30, 0.72); --bg-tertiary: #1c1c1e; --bg-card: #1c1c1e; --bg-hover: rgba(255, 255, 255, 0.06); --text-primary: #ffffff; --text-secondary: rgba(235, 235, 245, 0.6); --text-muted: rgba(235, 235, 245, 0.38); --success-color: #30d158; --warning-color: #ff9f0a; --danger-color: #ff453a; --info-color: #0a84ff; --bubble-self: #0a84ff; --bubble-other: #2c2c2e; } } /* ===== Global resets / typography tweaks ===== */ html.ios, html.ios body { background: var(--bg-primary); color: var(--text-primary); } html.ios body::before { /* 关闭暗色主题的背景光晕 */ content: none; } html.ios a { color: var(--primary-color); } /* iOS-like focus ring (subtle) */ html.ios :focus-visible { outline: 2px solid rgba(0, 122, 255, 0.35); outline-offset: 2px; } /* Visually-hidden helper (for SEO/accessibility without影响布局) */ html.ios .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ===== Cards / surfaces ===== */ html.ios .guest-tip, html.ios .desktop-download-panel, html.ios .desktop-download-card, html.ios .feature-item, html.ios .toast, html.ios .ws-status { border-color: rgba(60, 60, 67, 0.15); } /* ===== Buttons ===== */ html.ios .btn-primary { background: var(--primary-color); color: #fff; box-shadow: none; } html.ios .btn-primary:hover { transform: none; filter: brightness(0.96); } html.ios .btn-secondary { background: var(--bg-tertiary); color: var(--primary-color); border: 1px solid rgba(60, 60, 67, 0.2); } html.ios .btn-secondary:hover { background: var(--bg-hover); border-color: rgba(60, 60, 67, 0.22); transform: none; } html.ios .btn-send { background: var(--primary-color); color: #fff; box-shadow: none; } html.ios .btn-send:disabled { background: rgba(120, 120, 128, 0.12); color: var(--text-muted); } /* 下载横幅按钮：原样式用 text-primary（浅色=黑）会导致蓝底黑字对比不足 注意：invite.html 也复用了 .btn-download（灰底按钮），所以这里必须限定范围。 */ html.ios #download-banner .btn-download, html.ios .download-banner .btn-download { color: #ffffff !important; } html.ios #download-banner .btn-download:hover, html.ios .download-banner .btn-download:hover { color: #ffffff !important; } /* ===== Profile header ===== */ html.ios .header-bg { background: linear-gradient( 180deg, rgba(0, 122, 255, 0.18) 0%, rgba(0, 122, 255, 0.06) 50%, transparent 100% ); opacity: 1; border-radius: 0 0 24px 24px; } @media (prefers-color-scheme: dark) { html.ios .header-bg { background: linear-gradient( 180deg, rgba(10, 132, 255, 0.22) 0%, rgba(10, 132, 255, 0.08) 55%, transparent 100% ); } } html.ios .display-name { -webkit-text-fill-color: initial; background: none; color: var(--text-primary); } /* ===== Chat ===== */ html.ios .chat-header, html.ios .chat-input-area { background: var(--bg-secondary); border-color: rgba(60, 60, 67, 0.15); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } html.ios .message-item.self .message-bubble { background: var(--bubble-self); color: #fff; box-shadow: none; } html.ios .message-item.other .message-bubble { background: var(--bubble-other); color: var(--text-primary); } html.ios .message-item.other .message-link { color: var(--primary-color); } html.ios .message-item.self .message-link { color: rgba(255, 255, 255, 0.95); } html.ios .input-wrapper { background: rgba(118, 118, 128, 0.12); border: 1px solid rgba(60, 60, 67, 0.15); } html.ios .input-wrapper:focus-within { border-color: rgba(0, 122, 255, 0.35); background: rgba(118, 118, 128, 0.14); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12); } /* 游客限制提示里的“解锁无限”链接：原样式背景/字体是旧主题色，iOS 浅色下容易撞色 */ html.ios .guest-limit-tip .download-link { background: rgba(0, 122, 255, 0.12); color: var(--primary-color); border-radius: 10px; } html.ios .action-btn { background: rgba(118, 118, 128, 0.12); border: 1px solid rgba(60, 60, 67, 0.12); } html.ios .action-btn:hover { background: rgba(118, 118, 128, 0.18); border-color: rgba(60, 60, 67, 0.16); } html.ios .download-tip { background: rgba(0, 122, 255, 0.12); border: 1px solid rgba(0, 122, 255, 0.18); color: var(--primary-color); } html.ios .toast { background: rgba(255, 255, 255, 0.88); color: var(--text-primary); border: 1px solid rgba(60, 60, 67, 0.16); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } @media (prefers-color-scheme: dark) { html.ios .toast { background: rgba(28, 28, 30, 0.92); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); } }