/* ============================================================================ 设计令牌(单一可信源)。所有窗口(备稿 index / 输出 output / 投放 cast / 遥控 remote) 都在自身 HTML 里最先加载本文件 → 组件只用 var(--语义令牌),永不写字面色。 两层:primitive 色板 + semantic 语义;主题 = 只重映射 semantic 一处(:root.theme-feishu)。 护栏:npm run lint:tokens —— 令牌定义区(本文件 + -- 行)之外禁止有色字面。 ============================================================================ */ :root { /* ---- 原始色板 primitive ---- */ --coral-700: #b1542f; --coral-600: #c55c3b; --coral-500: #d97757; --coral-400: #e4835c; --coral-300: #e8875f; --blue-600: #245bdb; --blue-500: #3370ff; --blue-400: #4e83fd; --blue-300: #7aa5ff; /* ---- 语义 · 强调色(摄影棚=珊瑚;.theme-feishu 换蓝。组件只用这些)---- */ --accent: var(--coral-500); --accent-strong: var(--coral-600); --accent-ink: var(--coral-700); /* 强调色当文字(浅底) */ --accent-weak: rgba(217, 119, 87, 0.1); /* 强调色淡底 */ --accent-line: rgba(217, 119, 87, 0.4); /* 强调色描边 */ --accent-glow: rgba(217, 119, 87, 0.5); /* 强调色光晕(按钮阴影) */ --on-accent: #fff; /* 强调色在深色 HUD 上:文字亮一档、淡底/描边更浓 */ --accent-ondark: var(--coral-300); --accent-ondark-weak: rgba(217, 119, 87, 0.14); --accent-ondark-line: rgba(217, 119, 87, 0.42); --focus: var(--accent); /* 提词舞台焦点标记:随 app 主题翻(飞书→蓝,v1.3 ① 主题贯穿输出屏); 预览与输出必须同色 → appTheme 会同步进输出/投放窗 */ --tp-accent: var(--coral-500); /* 飞书品牌色:飞书来源稿的入口图标恒用它(=品牌标识,不是 app 强调色,两主题都蓝)*/ --feishu-brand: var(--blue-500); /* ---- 语义 · 备稿面/字/线(摄影棚暖色;.theme-feishu 换冷色)---- */ --desk: #f1eee7; --desk-deep: #e9e5da; --panel: #f7f5ef; --side: #efebe1; --paper: #ffffff; --ink: #211f1b; --ink-2: #57534a; --ink-3: #a39e92; --hair: rgba(30, 25, 15, 0.07); --hair-2: #ddd9ce; /* 实体描边:段控/键帽/幽灵钮(比 --hair 重一档) */ /* ---- 语义 · 状态色(语义固定,别拿来当交互强调色)---- */ --mint: #2aae68; --mint-deep: #1e8f53; --mint-bg: rgba(42, 174, 104, 0.1); --red: #e8584a; --amber: #e9b93c; /* ---- 主 CTA(上镜大钮):摄影棚=亮面黑药丸;飞书=蓝 ---- */ --primary-bg: linear-gradient(180deg, #403d38, #181613); --primary-fg: #f7f5ef; --primary-shadow: 0 8px 20px -6px rgba(20, 15, 5, 0.45); /* ---- 语义 · HUD 深色(上镜,两主题都深,不随主题变;只 accent 随主题)---- */ --hud-bg: #0c0b09; --hud-surface: #17140f; --hud-surface-2: #1b1814; --hud-surface-3: #242019; --hud-popover: #1f1b16; --hud-line: #241f19; --hud-line-2: #2c2823; --hud-line-3: #34302a; --hud-text-0: #f5f3ec; --hud-text-1: #edebe4; --hud-text-2: #a8a59c; --hud-text-3: #6d6a62; --hud-text-4: #57544c; --hud-ok: #4fc487; --hud-scrim: rgba(18, 15, 12, 0.84); /* 舞台上的深色浮签底(待命带/角标) */ --hud-scrim-red: rgba(30, 10, 8, 0.82); /* 告警遮罩底 */ /* ---- 语义 · 场记板(稿头数据板,0714 #4):深底白字的桌面道具,面色随主题冷暖 ---- */ --slate-bg: #1b1814; --slate-bg-2: #262119; --slate-text: #f5f3ec; --slate-dim: #a8a59c; --slate-line: rgba(245, 243, 236, 0.12); /* ---- 语义 · 状态色扩展变体(--mint/--red/--amber 的淡底/描边/光晕/深色面文字;语义固定,别当交互色)---- */ --mint-bg-strong: rgba(42, 174, 104, 0.16); --hud-ok-line: rgba(79, 196, 135, 0.28); --amber-ink: #8a6d16; --amber-bg: #f7ebd2; --amber-line: rgba(233, 185, 60, 0.38); --red-bg: rgba(232, 88, 74, 0.1); --red-line: rgba(232, 88, 74, 0.42); --red-glow: rgba(232, 88, 74, 0.55); --red-ondark: #f0b4ab; --red-ondark-weak: #c99a92; /* 提词舞台强调线(章节分隔渐隐):随 --tp-accent 一起翻主题(① 主题贯穿输出屏)*/ --tp-accent-line: rgba(217, 119, 87, 0.55); /* 飞书品牌淡底(来源稿行 hover;恒蓝,不随 app 主题)*/ --feishu-brand-weak: rgba(51, 112, 255, 0.12); /* 画布暖色颗粒(仅摄影棚;飞书主题移除)*/ --grain: rgba(60, 50, 30, 0.015); --serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif; /* —— 动效系统:统一缓动与时长令牌 —— */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* 出场/移动:后段舒缓 */ --ease-io: cubic-bezier(0.6, 0, 0.35, 1); /* 状态切换 */ --dur-1: 0.12s; /* 微交互:hover / 按下 */ --dur-2: 0.2s; /* 小元素:开关 / 角标 */ --dur-3: 0.34s; /* 面板 / 转场 */ --dur-morph: 0.44s; /* 一镜到底:纸张渐黑成屏幕 */ } /* 挂在 :root(documentElement):主题预染脚本在 里同步执行,那一刻 body 还不存在。 (0720 首帧闪摄影棚根治:主题类必须在任何渲染发生前就位) */ :root.theme-feishu { --accent: var(--blue-500); --accent-strong: var(--blue-600); --accent-ink: var(--blue-500); --accent-weak: rgba(51, 112, 255, 0.1); --accent-line: rgba(51, 112, 255, 0.4); --accent-glow: rgba(51, 112, 255, 0.5); --accent-ondark: var(--blue-300); --accent-ondark-weak: rgba(51, 112, 255, 0.16); --accent-ondark-line: rgba(51, 112, 255, 0.55); --tp-accent: var(--blue-500); --tp-accent-line: rgba(51, 112, 255, 0.5); --desk: #f4f5f7; --desk-deep: #eaecef; --panel: #ffffff; --side: #f7f8fa; --paper: #ffffff; --ink: #1f2329; --ink-2: #51565d; --ink-3: #8f959e; --hair: #e4e6eb; --hair-2: #d5d8dd; --mint: #34c724; --mint-deep: #2ea121; --mint-bg: rgba(52, 199, 36, 0.1); --primary-bg: #3370ff; --primary-fg: #fff; --primary-shadow: 0 6px 18px -7px rgba(51, 112, 255, 0.5); --slate-bg: #1e232b; --slate-bg-2: #29303a; --slate-text: #f2f4f7; --slate-dim: #9aa3af; --slate-line: rgba(240, 244, 250, 0.12); } /* ============ 提词舞台(监看台与输出屏共用,双窗等比渲染) ============ */ /* 边界纪律:道具感只属于"棚",不属于"镜头"——此处零装饰。 */ .stage { position: relative; overflow: hidden; container-type: size; /* 排版不变量护栏(0717 #6):禁止客户端放大舞台文字(飞书/微信内嵌浏览器的字体缩放)—— cqw 字号 + cqw 边距 + 同字体 = 每行字数与主持人屏逐字一致,这条不变量不容第三方注水 */ -webkit-text-size-adjust: none; text-size-adjust: none; background: var(--stage-bg); --stage-bg: #000000; --fs: 5.4; --lh: 1.85; --margin: 9cqw; --focus: 38%; --ink: #f2f0ea; --ink-dim: #6d6a62; } .stage.light { --stage-bg: #f7f5ef; --ink: #17150f; --ink-dim: #b5b0a4; } /* 文稿阅读区纸色随 app 主题(摄影棚暖纸 / 飞书白),不用固定暖纸 */ .stage.reading { background: var(--panel); /* 舞台局部 --ink 会遮蔽 app 墨色令牌;阅读态显式继承 body 上的主题墨色 */ --ink: inherit; } .prompt-content { position: relative; will-change: transform; transform: translate3d(0, 0, 0); } .prompt-content p { margin: 0; padding: 0.12em var(--margin); font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-size: calc(var(--fs) * 1cqw); line-height: var(--lh); font-weight: 500; color: var(--ink); white-space: pre-wrap; word-break: break-word; } /* ===== 文稿阅读态(#3):飞书式舒适阅读排版,固定字号,与 cqw 提词镜像解耦 ===== 文稿区不再是上镜的 1:1 镜子;它的职责是「舒服地读 + 定位」。换行与上镜不同没关系—— 位置交接走 readingLocus(段落 + 段内比例),不依赖逐字一致的换行。 */ .stage.reading .prompt-content p { font-size: 18px; line-height: 1.9; padding: 0.3em 46px; font-weight: 400; max-width: none; } /* 章节标记(#3):安静的导航标签,明显低于正文墨色 + 珊瑚小点 → 一眼是「章节分隔」, 不是正文标题、更不像「小标题没删干净」。正文才是主角。 */ .stage.reading .prompt-content .prompt-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.4; padding: 1.15em 46px 0.3em; letter-spacing: 0.06em; } .stage.reading .prompt-content .prompt-heading::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .stage.reading .prompt-content .prompt-heading:first-child { padding-top: 0.2em; } .stage.reading .prompt-content p:first-child, .stage.reading .prompt-content .prompt-heading:first-child { padding-top: 0.1em; } /* 焦点线指示:两缘小三角(镜像后依然对称) */ .stage::before, .stage::after { content: ''; position: absolute; top: var(--focus); width: 0; height: 0; border-top: 0.9cqw solid transparent; border-bottom: 0.9cqw solid transparent; z-index: 3; transform: translateY(-50%); } .stage::before { left: 0; border-left: 1.2cqw solid var(--tp-accent); } .stage::after { right: 0; border-right: 1.2cqw solid var(--tp-accent); } /* 章节交界图形提示(#5):滚过一个珊瑚菱形+两侧渐隐线,非文字,提醒主持人新段落开始 */ .prompt-content .prompt-divider { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; /* em 必须与正文同源(0717 #2 取证):不设 font-size 时 em=页面默认字号(固定 px), 手机小屏与主持人大屏的分隔符高度就不成比例 → 全文总高差 ≈ 每个分隔符一行, 视口/焦点在章节后逐渐错开。舞台内一切竖向尺寸只准来自 cqw 或正文 em。 */ font-size: calc(var(--fs) * 1cqw); padding: 0.55em var(--margin); } .prompt-content .prompt-divider::before, .prompt-content .prompt-divider::after { content: ''; flex: 0 0 9cqw; height: 0.16cqw; background: linear-gradient(90deg, transparent, var(--tp-accent-line)); } .prompt-content .prompt-divider::after { background: linear-gradient(90deg, var(--tp-accent-line), transparent); } .prompt-content .prompt-divider .pd-dot { width: 0.9cqw; height: 0.9cqw; background: var(--tp-accent); transform: rotate(45deg); flex-shrink: 0; } /* 结束标记:与正文同管线滚动,滚到底进入焦点线 → 主持人明确知道「念完了」 */ .prompt-content .prompt-end { text-align: center; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-size: calc(var(--fs) * 0.62 * 1cqw); line-height: var(--lh); letter-spacing: 0.6em; padding: 0.5em var(--margin) 0; color: var(--ink-dim); } /* 镜像 / 倒置:分光镜的两根轴,可叠加。 预览(监看台)与输出屏应用同一变换 → 编导所见严格等于主持人所见。 */ .stage.mirrored { transform: scaleX(-1); } .stage.flipped { transform: scaleY(-1); } .stage.mirrored.flipped { transform: scale(-1, -1); }