/* =================================================================== 外观增强（appearance-plus） 与 styles.css / 13-theme.js 解耦：本文件在 styles.css 之后加载，只做"叠加"。 覆盖范围：毛玻璃气泡、背景亮度自适应、夜间模式、字号/行距/字体、 视觉小说场景模式、打字中气泡、消息悬停工具条、顶栏头像、背景图库、 以及注入到「外观」弹窗里的控件样式。 =================================================================== */ /* ============ 1. 毛玻璃气泡（设了自定义背景时，气泡浮在背景上更通透）============ */ body.has-chat-bg .msg .bubble { background: rgba(255, 255, 255, .60); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 3px 14px rgba(20, 30, 25, .12); } body.has-chat-bg .msg.assistant .bubble::before { border-right-color: rgba(255, 255, 255, .60); } body.has-chat-bg .msg.user .bubble { background: rgba(200, 236, 214, .52); } body.has-chat-bg .msg.user .bubble::after { border-left-color: rgba(200, 236, 214, .52); } /* 群聊发言人名条在背景上更清楚 */ body.has-chat-bg .speaker-name { text-shadow: 0 1px 2px rgba(255, 255, 255, .5); } /* ============ 2. 背景亮度自适应（背景偏暗时用深色半透明气泡 + 浅字）============ */ /* 仅作用于「半透明气泡」主题：背景暗时气泡半透明、能透出暗底，故正文用浅字才合理。 wechat 主题的气泡是不透明纯白 / 纯绿（优先级更高，盖掉本层半透明），背景图根本透不进气泡内； 若此时仍把气泡内正文改成浅色，浅字会印在不透明白气泡上彻底看不清（=「正文发灰看不见」的真正根因）。 因此下面这组「暗背景→浅字 / 深气泡」规则统一排除 wechat：wechat 下气泡内正文永远跟随主题深色。 注：日期分割线 .dayline 在气泡之外、直接压在背景图上，所有主题都需浅字，故不排除。 */ :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .msg .bubble { background: rgba(26, 28, 32, .46); color: #eef1f4; box-shadow: 0 3px 16px rgba(0, 0, 0, .28); } :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .bubble-content { color: #eef1f4; } :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .msg.user .bubble-content { color: #eef7f1; } :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .msg.assistant .bubble::before { border-right-color: rgba(26, 28, 32, .46); } :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .msg.user .bubble { background: rgba(34, 70, 52, .5); } :root:not([data-theme="wechat"]) body.has-chat-bg.chat-bg-dark .msg.user .bubble::after { border-left-color: rgba(34, 70, 52, .5); } body.has-chat-bg.chat-bg-dark .dayline { color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* ============ 2b. 微信主题 + 自定义背景：只去掉聊天区那块不透明大底板（气泡保持微信原样）============ */ /* 微信主题把 .messages 背景写成不透明 #ededed（权重 0,3,0 盖过 has-chat-bg 的 transparent）， 这就是"后面那块大白/灰板"。用 (0,4,1) 在有背景图时把聊天画布整体透明，让背景图铺满。 注意：刻意不碰 .bubble —— 保留微信主题原本的白色/绿色气泡（用户要的"文本框"样式）。 */ :root[data-theme="wechat"] body.has-chat-bg .app, :root[data-theme="wechat"] body.has-chat-bg .chat, :root[data-theme="wechat"] body.has-chat-bg .messages { background: transparent; } :root[data-theme="wechat"] body.has-chat-bg .messages::before { display: none; } /* ============ 2c. 防"聊天背景"启动闪白(FOUC) ============ */ /* 首屏脚本检测到背景启用即给 加 .preload-chat-bg：立刻透明化聊天画布 + 中性深色兜底， 背景图层就位后即被盖住；app JS 跑 applyChatBackground 后会移除该类，交还正常级联。 */ :root.preload-chat-bg { background: #201d18 !important; } :root.preload-chat-bg body, :root.preload-chat-bg .app, :root.preload-chat-bg .chat, :root.preload-chat-bg .messages { background: transparent !important; } :root.preload-chat-bg .messages::before { display: none !important; } /* ============ 2d. 对话引号着色（微信主题下把强制黑的引号改成醒目深蓝，更突出好读）============ */ :root[data-theme="wechat"] .msg .bubble-content .rp-dia, :root[data-theme="wechat"] .msg .bubble-content .rp-quote { color: #2856a6; font-weight: 600; } /* ============ 2e. 「世界状态条」(#worldStateBar) 已停用 ============ */ /* 它的「时间/日期/天气/地点 + 📮推进剧情 + 全局变量」与底部「超级发送框」重复，已停用。 隐藏改由 JS 统一负责：renderWorldStateBar（10-libraries.js）开头即给它加 .hidden、清空内容后 return， 于是「停止渲染」与「隐藏」是同一处事实源，不再用这条 !important 与 JS 分叉（避免「幽灵逻辑」）。 附带好处：保留 .hidden 让 updateRightDock 的 hasWorld 判定为假，右侧 dock 不会被这条空条撑开。 */ /* ============ 2f. 「我的人设 · 作者视角」面板：身份卡头部 + 定位说明（与角色卡资料面板观感统一）============ */ .up-idcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--wechat-line); border-radius: var(--r-md); background: var(--surface-2); } .up-idcard .up-avatar-prev { width: 56px; height: 56px; flex: 0 0 auto; cursor: pointer; } .up-idmeta { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .up-idname { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.2; } .up-idbadge { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--jade-ink); background: var(--jade-softer); border: 1px solid var(--jade-line); border-radius: var(--r-pill); padding: 2px 10px; } .up-intro { font-size: 12.5px; line-height: 1.65; color: var(--muted); background: var(--surface-2); border: 1px solid var(--wechat-line); border-radius: var(--r-sm); padding: 9px 11px; margin: 0 0 12px; } .up-intro b { color: var(--jade-ink); } /* ============ 3. 夜间 / 深色模式（:root[data-mode="dark"] 覆盖中性色 token；与主题配色叠加）============ */ :root[data-mode="dark"] { --wechat-bg: #15171b; --chat-canvas: #15171b; --wechat-panel: #1d2024; --wechat-line: #34383f; --sidebar: #16181c; --canvas: #0e0f12; --surface: #21242a; --surface-2: #262a31; --surface-3: #2d323a; --text: #e7e9ec; --muted: #9aa1a9; --quiet: #6c727a; --bubble-ai: #24272d; --bubble-me: #2e5a44; } :root[data-mode="dark"] body { background: var(--canvas); } :root[data-mode="dark"] .messages { background: var(--wechat-bg); } /* 主要硬编码浅色面的兜底覆盖（styles.css 里写死 #fff/#444 的地方）*/ :root[data-mode="dark"] .chat-tool-btn { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .chat-tool-btn:hover { background: #1f3a30; color: #7fe6b6; border-color: rgba(15,138,95,.5); } :root[data-mode="dark"] .quick-btn, :root[data-mode="dark"] .composer-quick .protagonist-me-btn { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .quick-btn:hover, :root[data-mode="dark"] .composer-quick .protagonist-me-btn:hover { background: var(--surface-3); } :root[data-mode="dark"] .modal { background: var(--surface); color: var(--text); } :root[data-mode="dark"] .modal-head, :root[data-mode="dark"] .modal-actions { background: var(--surface); } :root[data-mode="dark"] .seg-toggle { background: var(--surface-3); } :root[data-mode="dark"] .seg.active { background: var(--surface); color: var(--text); } :root[data-mode="dark"] .composer-row { background: var(--surface); border-color: var(--wechat-line); } :root[data-mode="dark"] textarea, :root[data-mode="dark"] input, :root[data-mode="dark"] select { background: var(--surface-2); color: var(--text); } :root[data-mode="dark"] .bubble-content { color: #dde1e5; } :root[data-mode="dark"] .msg.user .bubble-content { color: #eaf3ee; } :root[data-mode="dark"] .msg.assistant .bubble::before { border-right-color: var(--bubble-ai); } :root[data-mode="dark"] .profile-text { background: var(--surface-2); color: var(--muted); } :root[data-mode="dark"] .conv-item { border-color: var(--wechat-line); } :root[data-mode="dark"] .conv-item:hover { background: var(--surface-2); } :root[data-mode="dark"] .bubble-content .md-code { background: rgba(255,255,255,.10); } :root[data-mode="dark"] .bubble a { color: #7ab8ff; border-bottom-color: rgba(122,184,255,.35); } :root[data-mode="dark"] svg { } /* 图标用 currentColor，已随 --text 变浅 */ /* 夜间模式下，"无背景"时也给一点层次：消息区径向高光取消 */ :root[data-mode="dark"] .messages { background-image: none; } /* ============ 4. 字号 / 行距 / 字体（CSS 变量驱动，控件在外观弹窗）============ */ :root { --chat-font-scale: 1; --chat-line-height: 1.8; } .bubble-content { font-size: calc(17.5px * var(--chat-font-scale)); line-height: var(--chat-line-height); font-family: var(--chat-font, var(--serif)); } /* ============ 5. 视觉小说 · 场景模式（聚焦最新一条，做成 galgame 对话框）============ */ body.scene-mode .messages .msg:not(:last-child) { opacity: .38; transition: opacity .3s ease; } body.scene-mode .messages:hover .msg:not(:last-child) { opacity: .7; } body.scene-mode .messages .msg:last-child .bubble { font-size: 1.02em; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 10px 34px rgba(20, 30, 25, .22); border-radius: 12px; } body.scene-mode.has-chat-bg.chat-bg-dark .messages .msg:last-child .bubble { background: rgba(20, 22, 26, .6); } :root[data-mode="dark"] body.scene-mode .messages .msg:last-child .bubble { background: rgba(28, 31, 36, .82); } /* 场景模式下立绘更醒目 */ body.scene-mode .sprite-figure.has-img { filter: drop-shadow(0 18px 40px rgba(0,0,0,.4)); } /* ============ 6. "对方正在输入" 打字气泡 ============ */ #typingPill { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 25; display: none; align-items: center; gap: 9px; padding: 7px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--wechat-line); box-shadow: var(--shadow-md); font-size: 12.5px; color: var(--muted); pointer-events: none; animation: typingPillIn .25s ease; } @keyframes typingPillIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } body.is-generating #typingPill { display: inline-flex; } .typing-dots { display: inline-flex; gap: 4px; } .typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--wechat-green); animation: typingBlink 1.25s infinite both; } .typing-dots i:nth-child(2) { animation-delay: .18s; } .typing-dots i:nth-child(3) { animation-delay: .36s; } @keyframes typingBlink { 0%, 75%, 100% { opacity: .3; transform: translateY(0); } 38% { opacity: 1; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } } @media (max-width: 760px) { #typingPill { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } } /* ============ 7. 消息悬停工具条（更精致：默认淡出，悬停聚拢浮现）============ */ .msg .msg-actions { transition: opacity .16s ease, transform .16s ease; } .msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; } .msg .msg-actions button:hover { color: var(--jade-ink); } /* ============ 8. 顶栏角色头像 + 在线 / 输入中状态 ============ */ .ct-avatar-wrap { position: relative; flex: 0 0 auto; width: 36px; height: 36px; margin-right: 10px; } .ct-avatar-wrap.hidden { display: none; } .ct-avatar-wrap .ct-avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 1px 4px rgba(0,0,0,.16); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; } .ct-avatar-wrap .ct-status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #36c07a; border: 2px solid var(--wechat-panel); } .ct-avatar-wrap.is-typing .ct-status { background: var(--warn); animation: ctPulse 1s infinite; } @keyframes ctPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,130,31,.5); } 50% { box-shadow: 0 0 0 4px rgba(201,130,31,0); } } /* ============ 9. 背景图库（弹窗内一键换背景：含纯 CSS 渐变 + 精选直链）============ */ .chatbg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; } .chatbg-gallery .gal-item { position: relative; height: 56px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid var(--wechat-line); background-size: cover; background-position: center; transition: transform .12s ease, box-shadow .12s ease; } .chatbg-gallery .gal-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .chatbg-gallery .gal-item .gal-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 5px; font-size: 10px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============ 10. 注入到「外观」弹窗的控件区（用自有类名，避开被隐藏的 .ctx-hint）============ */ .ap-section { border-top: 1px dashed var(--wechat-line); margin-top: 14px; padding-top: 12px; } .ap-title { font-weight: 700; font-size: 13.5px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } .ap-hint { font-size: 12px; color: var(--muted); margin: 0 0 9px; line-height: 1.55; } .ap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .ap-row > label.ap-label { font-size: 12px; color: var(--muted); min-width: 52px; } .ap-btn { height: 32px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--wechat-line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12.5px; white-space: nowrap; } .ap-btn:hover { border-color: var(--jade-ring); color: var(--jade-ink); background: var(--surface-2); } .ap-btn.primary { background: var(--wechat-green); color: #fff; border-color: transparent; } .ap-btn.primary:hover { background: var(--wechat-green-dark); color: #fff; } .ap-range { flex: 1 1 120px; min-width: 100px; height: 24px; accent-color: var(--wechat-green); } .ap-val { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--jade-ink); min-width: 42px; text-align: right; } .ap-select { height: 32px; border: 1px solid var(--wechat-line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 8px; font-size: 12.5px; } .ap-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; } .ap-switch input { width: auto; height: auto; accent-color: var(--wechat-green); } /* ============ 变量注入可视化（变量快捷面板）============ */ .var-inject-note { font-size: 11.5px; line-height: 1.6; color: var(--muted); background: var(--surface-2); border: 1px solid var(--wechat-line); border-radius: 8px; padding: 7px 9px; margin: 2px 0 8px; } .var-inject-note b { color: var(--jade-ink); } .var-inject-note code { background: rgba(15,138,95,.12); color: var(--jade-ink); padding: 0 4px; border-radius: 4px; font-size: 11px; } .var-inject-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .var-inject-hint { font-size: 11px; color: var(--quiet); } .var-inject-preview { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; background: var(--surface-3); border: 1px solid var(--wechat-line); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; color: var(--text); } .var-inject-preview.hidden { display: none; } /* ============ 角色介绍：可编辑的挂载变量 ============ */ .ri-var-note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 2px 0 8px; } .ri-var-note b { color: var(--jade-ink); } .ri-var-bank { border: 1px solid var(--wechat-line); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: var(--surface-2); } .ri-var-bank-head { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .ri-var-row { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) auto; gap: 6px; align-items: center; margin-bottom: 5px; } .ri-var-row .ri-var-noteinput { grid-column: 1 / -1; } .ri-var-name, .ri-var-value, .ri-var-noteinput { height: 30px; border: 1px solid var(--wechat-line); border-radius: 7px; padding: 0 8px; font-size: 12.5px; background: var(--surface); color: var(--text); min-width: 0; } .ri-var-row .check { margin: 0; } .ri-var-del { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 7px; color: var(--muted); background: transparent; border: 1px solid transparent; display: grid; place-items: center; cursor: pointer; } .ri-var-del:hover { color: var(--danger); background: rgba(224,87,76,.1); } .ri-var-del svg { width: 15px; height: 15px; } .ri-var-add { height: 28px; padding: 0 12px; border-radius: 7px; border: 1px dashed var(--wechat-line); background: transparent; color: var(--jade-ink); font-size: 12px; cursor: pointer; } .ri-var-add:hover { border-color: var(--jade-ring); background: var(--surface-3); } /* ============ API 面板：参数提示（用自有类名，避开被隐藏的 .ctx-hint / settings p）============ */ .param-tip { font-size: 12px; line-height: 1.6; color: var(--muted); background: var(--surface-2); border: 1px solid var(--wechat-line); border-radius: 8px; padding: 7px 10px; margin: -2px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .param-tip b { color: var(--jade-ink); } .param-tip-btn { flex: 0 0 auto; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--jade-ring); background: var(--wechat-green); color: #fff; font-size: 12px; cursor: pointer; } .param-tip-btn:hover { background: var(--wechat-green-dark); } /* ============ 聊天图片加载失败兜底 ============ */ .bubble-img-failed { display: inline-block; font-size: 12.5px; padding: 6px 10px; border: 1px dashed var(--wechat-line); border-radius: 8px; background: var(--surface-2); color: var(--muted); } .bubble-img-failed a { color: var(--jade-ink); text-decoration: none; } .bubble-img-failed a:hover { text-decoration: underline; } /* ============ 音乐播放器：AI 自动选歌「停用」状态 ============ */ .bgm-player .bgm-power.bgm-power-off { color: #ff6b6b; } .bgm-player .bgm-power.bgm-power-off::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; } .bgm-player .bgm-power { position: relative; } .bgm-player.bgm-autopick-off .bgm-disc { filter: grayscale(.65) opacity(.85); } /* ============ 手机端·背景上气泡可读性增强（第九十五批）============ */ /* 截图反映：设了较亮 / 较花的自定义聊天背景时，半透明气泡上的正文对比偏弱。 仅窄屏：把浅色半透明气泡的底色不透明度从 .60/.52 提到 .80/.78，保证正文 ≥ AA 对比； 暗背景(.chat-bg-dark)分支特异性更高、仍是深底浅字，不受影响；wechat 主题气泡更高优先级保持不透明，也不受影响。 */ @media (max-width: 760px) { body.has-chat-bg .msg .bubble { background: rgba(255, 255, 255, .80); box-shadow: 0 3px 14px rgba(20, 30, 25, .16); } body.has-chat-bg .msg.assistant .bubble::before { border-right-color: rgba(255, 255, 255, .80); } body.has-chat-bg .msg.user .bubble { background: rgba(200, 236, 214, .78); } body.has-chat-bg .msg.user .bubble::after { border-left-color: rgba(200, 236, 214, .78); } }