/* ============================================================ theme.css · 全局 + 蓝色主题变量 + 手机外框 + 视频舞台 + toast 复用自 docs/design/demo_v5.html（仅保留蓝色主题） ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* ============================================================ 主题皮肤（换肤） ------------------------------------------------------------ 主题以 驱动，变量定义在 :root 上， 主播手机(.phone)、观众手机(.audience-viewer)以及手机外部的 观众模拟(.audience-simulator)、主播模拟(.host-simulator)、 主题切换面板(.info-panel)等都共用同一组 token，整体统一换肤。 - 默认（无 data-theme 或 data-theme="blue"）= 蓝色主题； - 每套主题只覆盖这组 --brand-* 变量的值，不改任何结构； - 三个主色额外给出 `-rgb` 分量（"R, G, B"），供需要叠加 alpha 的地方用 rgba(var(--brand-N-rgb), a)，避免再写死颜色； - 新增主题 = 照抄一组，改这些值即可（见文件下方 [data-theme] 段）。 ============================================================ */ :root { --brand-1: #0052D9; --brand-2: #4A9EFF; --brand-3: #7EE8FF; --brand-1-rgb: 0, 82, 217; --brand-2-rgb: 74, 158, 255; --brand-3-rgb: 126, 232, 255; --brand-glow-1: rgba(74, 158, 255, 0.4); --brand-glow-2: rgba(126, 232, 255, 0.28); --brand-shadow: rgba(0, 82, 217, 0.4); --brand-shadow-soft: rgba(0, 82, 217, 0.35); --brand-dot-glow: rgba(126, 232, 255, 0.95); --brand-text-strong: #8ECFFF; --brand-text-soft: #CFE7FF; --brand-tag-text: #E8F1FF; --live-green: #07C160; /* 主播头像唯一图源：换头像只改这一处（含防缓存版本串）。 */ --anchor-avatar: url("../assets/anchor-avatar.jpg?v=1"); } /* 直播购物模式统一替换所有消费 --anchor-avatar 的主播头像位置。 */ html[data-live-mode="shopping"] { --anchor-avatar: url("../assets/shopping/shop-live-avatar.png?v=1"); } /* ---- 潮玩紫：深蓝 → 品牌紫 → 亮粉高光（复用 demo_v2 紫色主题） ---- */ [data-theme="purple"] { --brand-1: #0052D9; --brand-2: #7B4DFF; --brand-3: #FF5B7A; --brand-1-rgb: 0, 82, 217; --brand-2-rgb: 123, 77, 255; --brand-3-rgb: 255, 91, 122; --brand-glow-1: rgba(123, 77, 255, 0.35); --brand-glow-2: rgba(255, 91, 122, 0.25); --brand-shadow: rgba(123, 77, 255, 0.35); --brand-shadow-soft: rgba(123, 77, 255, 0.35); --brand-dot-glow: rgba(255, 91, 122, 0.9); --brand-text-strong: #C9B6FF; --brand-text-soft: #E0D0FF; --brand-tag-text: #E8EAFF; } /* 紫色主题下"开始直播"按钮：跳过深蓝锚点，改用 品牌紫 → 亮粉高光 渐变， 避免起点看起来太蓝（--brand-1 保留为深蓝是为了让头像/brand-chip 等仍能复用蓝色锚点）。 */ [data-theme="purple"] .start-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 92%, transparent) 0%, color-mix(in srgb, var(--brand-3) 80%, transparent) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 color-mix(in srgb, var(--brand-2) 40%, transparent), 0 8px 28px var(--brand-shadow); } html, body { background: #050508; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Source Han Sans SC', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; overflow: hidden; height: 100vh; user-select: none; } body { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #14141c 0%, #050508 70%); } /* 两个主播实例共用的 SVG paint server。保持在渲染树中，不能使用 display:none。 */ .shared-host-svg-defs { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ============ 手机外框 ============ */ .phone { position: relative; width: 390px; height: 844px; background: #0A0A0F; border-radius: 44px; overflow: hidden; box-shadow: 0 0 0 8px #1a1a22, 0 0 0 9px #2a2a34, 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 120px rgba(var(--brand-1-rgb), 0.05); } /* ============ 视频舞台（摄像头预览） ============ */ .video-stage { position: absolute; inset: 0 0 102px; border-radius: 0 0 18px 18px; background: radial-gradient(ellipse at 30% 20%, rgba(var(--brand-2-rgb), 0.15) 0%, transparent 40%), radial-gradient(ellipse at 70% 80%, rgba(var(--brand-1-rgb), 0.08) 0%, transparent 45%), linear-gradient(160deg, #1a2438 0%, #0e1524 40%, #050508 100%); overflow: hidden; transition: bottom 260ms ease, border-radius 260ms ease; } .preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; transition: transform 260ms ease; } /* 镜像态 */ .preview-video.mirrored { transform: scaleX(-1); } /* 顶部渐变压暗层：无论采集画面多亮，都能压住上方标题/修改封面文案，保证可读 */ .video-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0) 100%); } /* 底部渐变压暗层：压住底部功能栏（美化/翻转镜头/更多）与开始直播按钮区 */ .video-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.32) 38%, rgba(0, 0, 0, 0) 100%); } /* ============ 封面层（关闭摄像头时展示，画面切换为封面图片） ============ */ .pad-layer { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 35%, rgba(var(--brand-1-rgb), 0.18) 0%, transparent 55%), linear-gradient(160deg, #10131f 0%, #070912 100%); z-index: 5; overflow: hidden; } .pad-layer.active { display: flex; } /* 封面直接铺满背景（cover 由 JS 设置 background-image 时给出） */ .pad-cover-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 200px; line-height: 1; background-size: cover; background-position: center; pointer-events: none; } /* ============ 贴图层（可选中 / 拖动 / 缩放 / 删除） ============ */ .sticker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; } /* 贴图元素：以中心为锚点（left/top 即中心坐标），拖动直接改 left/top */ .sticker-item { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: move; touch-action: none; user-select: none; } .sticker-emoji { display: block; line-height: 1; font-size: 40px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); animation: stickerPop 320ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes stickerPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* 选中态：虚线包围框 */ .sticker-item.selected::before { content: ''; position: absolute; inset: -8px; border: 1px dashed var(--brand-2); border-radius: 8px; pointer-events: none; } /* 删除按钮（左上角） */ .sticker-del { position: absolute; top: -16px; left: -16px; width: 22px; height: 22px; border-radius: 50%; background: #FF3B47; color: #fff; display: none; align-items: center; justify-content: center; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: auto; } /* 缩放手柄（右下角） */ .sticker-resize { position: absolute; bottom: -16px; right: -16px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-2); display: none; align-items: center; justify-content: center; cursor: nwse-resize; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: auto; } .sticker-resize::before { content: '⤡'; color: #fff; font-size: 13px; line-height: 1; } .sticker-item.selected .sticker-del, .sticker-item.selected .sticker-resize { display: flex; } /* ============ 头像（品牌渐变环 + 直播红点脉冲） ============ */ .avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .avatar::before { content: attr(data-letter); width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #1a1a2e, #2a1a3e); background-image: var(--anchor-avatar); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: transparent; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 71, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(255, 59, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 71, 0); } } /* ============ 悬浮提示（品牌 chip · 屏幕正中） ============ */ .brand-chip { position: absolute; top: 50%; left: 50%; padding: 9px 16px 9px 14px; border-radius: 999px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 55%, rgba(10, 10, 16, 0.7)), color-mix(in srgb, var(--brand-2) 45%, rgba(10, 10, 16, 0.7)) 50%, color-mix(in srgb, var(--brand-3) 40%, rgba(10, 10, 16, 0.7))); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 8px 24px var(--brand-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; opacity: 0; transform: translate(-50%, -50%) scale(0.9); pointer-events: none; z-index: 60; overflow: hidden; white-space: nowrap; } .brand-chip::before { content: ''; position: absolute; inset: 0; border-radius: 999px; padding: 1px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .brand-chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); box-shadow: 0 0 8px var(--brand-dot-glow); flex-shrink: 0; animation: chipDotPulse 1.2s ease-in-out infinite; } @keyframes chipDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } .brand-chip.show { animation: chipShow 2400ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes chipShow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); } } /* ============ 左侧说明面板 ============ */ .info-panel { position: fixed; left: 32px; top: 50%; transform: translateY(-50%); width: 260px; padding: 24px; background: rgba(20, 20, 28, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; color: rgba(255, 255, 255, 0.7); font-size: 12px; line-height: 1.7; letter-spacing: 0.3px; } .info-panel h2 { font-size: 16px; color: #fff; font-weight: 400; margin-bottom: 4px; letter-spacing: 1px; } .info-panel .sub { font-size: 11px; color: rgba(255, 255, 255, 0.35); letter-spacing: 2px; margin-bottom: 20px; } /* ---- 主题皮肤切换器（色卡用固定渐变：每个色卡需预览各自主题色，而非取当前主题） ---- */ .theme-switcher-title { font-size: 12px; color: rgba(255, 255, 255, 0.85); letter-spacing: 1px; margin-bottom: 12px; } .theme-switcher { display: flex; flex-direction: column; gap: 8px; } .theme-swatch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 13px; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .theme-swatch:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .theme-swatch-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); transition: transform 180ms ease, box-shadow 180ms ease; } .theme-swatch-label { flex: 1; text-align: left; letter-spacing: 0.5px; } /* 当前主题：高亮描边 + 色卡放大发光 */ .theme-swatch.is-active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .theme-swatch.is-active .theme-swatch-dot { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.14); } .info-panel .tip { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 10px; color: rgba(255, 255, 255, 0.4); line-height: 1.6; } /* ============ 分阶段显隐（由 .phone[data-stage] 驱动） ============ */ /* 默认全部隐藏，按 stage 显示对应层 */ .prepare-header, .prepare-bottom, .live-top-bar, .live-bottom-bar, .countdown-layer { transition: opacity 300ms ease; } /* prepare：显示准备页元素，隐藏直播/倒计时 */ .phone[data-stage="prepare"] .live-top-bar, .phone[data-stage="prepare"] .live-bottom-bar, .phone[data-stage="prepare"] .countdown-layer { display: none; } /* countdown：隐藏准备页控件，显示倒计时（保留摄像头预览） */ .phone[data-stage="countdown"] .prepare-header, .phone[data-stage="countdown"] .prepare-bottom, .phone[data-stage="countdown"] .live-top-bar, .phone[data-stage="countdown"] .live-bottom-bar { display: none; } /* living：显示直播态元素，隐藏准备页/倒计时 */ .phone[data-stage="living"] .prepare-header, .phone[data-stage="living"] .prepare-bottom, .phone[data-stage="living"] .countdown-layer { display: none; } /* summary：统计页是独立阶段，明确移除其余三阶段控件，尤其是 z-index 较高的倒计时层。 */ .phone[data-stage="summary"] .prepare-header, .phone[data-stage="summary"] .prepare-bottom, .phone[data-stage="summary"] .live-top-bar, .phone[data-stage="summary"] .live-bottom-bar, .phone[data-stage="summary"] .countdown-layer { display: none; }