/* ========================================================================== * LeafHub 全局风格令牌系统 (M2.0) * * 用法： * — 全局默认风格 * * — OpenNovel 局部覆盖 * * 后续所有页面/组件 UI 必须读取这里的 CSS variables，禁止硬编码颜色。 * * 主题分类： * leaf-default 新叶子（当前默认明亮）— 免费 * leaf-dark 叶墨（当前暗黑） — 免费 * stream-yellow 云溪黄（生日风格一） — 生日礼物 / 商城购买 * sky-blue 天穹蓝（生日风格二） — 生日礼物 / 商城购买 * nebula 星宿深空 — 商城购买 * service-basic Basic 风格 — Basic 服务赠送 * service-plus Plus 风格 — Plus 服务赠送 * service-pro Pro 浮岚轻 — Pro 服务赠送 * service-max-red Max 中国红 — Max 服务赠送/单买 * service-max-aurora Max 极光绯（已实现） — Max 服务赠送/单买 * ========================================================================== */ /* ----------------- 默认 (leaf-default) ----------------- */ :root, :root[data-style="leaf-default"] { /* 表面 */ --color-bg-primary: #F2F0E9; --color-bg-secondary: #FFFFFF; --color-bg-elevated: rgba(255, 255, 255, 0.65); --color-bg-overlay: rgba(0, 0, 0, 0.4); /* 文本 */ --color-text-primary: #2B2826; --color-text-secondary: #6B6663; --color-text-muted: #9A938E; --color-text-inverse: #FFFFFF; /* 主色 / 强调 */ --color-accent: #8C3F35; --color-accent-hover: #6F3128; --color-accent-soft: rgba(140, 63, 53, 0.10); /* 卡片 */ --color-card-bg: rgba(255, 255, 255, 0.92); --color-card-border: rgba(0, 0, 0, 0.05); --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.05); --shadow-card-hover: 0 18px 48px -12px rgba(0, 0, 0, 0.10); --radius-card: 12px; --radius-button: 8px; /* 气泡（DM / 篝火 / 海龟汤等对话场景） */ --color-bubble-self-bg: #8C3F35; --color-bubble-self-text: #FFFFFF; --color-bubble-other-bg: #FFFFFF; --color-bubble-other-text: #2B2826; --color-bubble-system-bg: rgba(0, 0, 0, 0.04); --color-bubble-system-text: #6B6663; /* 阅读器 */ --color-reader-bg: #F5F1E8; --color-reader-text: #2B2826; --color-reader-paper: #FFFEF8; /* 状态色 */ --color-success: #2F855A; --color-warning: #B7791F; --color-danger: #C53030; --color-info: #2B6CB0; /* 字体 */ --font-display: 'Noto Serif SC', 'Songti SC', serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* 动效 */ --motion-duration-fast: 150ms; --motion-duration-base: 220ms; --motion-duration-slow: 380ms; --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } /* ----------------- 叶墨 (leaf-dark) ----------------- */ :root[data-style="leaf-dark"] { --color-bg-primary: #14110F; --color-bg-secondary: #1F1B18; --color-bg-elevated: rgba(40, 35, 32, 0.78); --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-text-primary: #F2EDE5; --color-text-secondary: #BFB7AC; --color-text-muted: #8A8278; --color-text-inverse: #14110F; --color-accent: #E07B6B; --color-accent-hover: #F2937F; --color-accent-soft: rgba(224, 123, 107, 0.16); --color-card-bg: rgba(40, 35, 32, 0.86); --color-card-border: rgba(255, 255, 255, 0.06); --shadow-card: 0 14px 40px -14px rgba(0, 0, 0, 0.60); --shadow-card-hover: 0 22px 60px -16px rgba(0, 0, 0, 0.80); --color-bubble-self-bg: #E07B6B; --color-bubble-self-text: #14110F; --color-bubble-other-bg: #2A2522; --color-bubble-other-text: #F2EDE5; --color-bubble-system-bg: rgba(255, 255, 255, 0.05); --color-bubble-system-text: #BFB7AC; --color-reader-bg: #1B1714; --color-reader-text: #E8E1D4; --color-reader-paper: #221D19; color-scheme: dark; } /* ----------------- 云溪黄 (stream-yellow / 生日风格一) ----------------- */ :root[data-style="stream-yellow"] { --color-bg-primary: #FAF3D8; --color-bg-secondary: #FFF9E3; --color-bg-elevated: rgba(255, 252, 232, 0.78); --color-text-primary: #5C4A1F; --color-text-secondary: #8A7641; --color-text-muted: #B8A573; --color-accent: #D4A017; --color-accent-hover: #B88810; --color-accent-soft: rgba(212, 160, 23, 0.14); --color-card-bg: rgba(255, 252, 232, 0.92); --color-card-border: rgba(212, 160, 23, 0.18); --color-bubble-self-bg: #D4A017; --color-bubble-self-text: #FFFEF6; --color-bubble-other-bg: #FFFEF6; --color-bubble-other-text: #5C4A1F; --color-reader-bg: #FAF3D8; --color-reader-paper: #FFFEF6; } /* ----------------- 天穹蓝 (sky-blue / 生日风格二) ----------------- */ :root[data-style="sky-blue"] { --color-bg-primary: #E5F0F7; --color-bg-secondary: #F4FAFC; --color-bg-elevated: rgba(240, 248, 252, 0.78); --color-text-primary: #1F3A55; --color-text-secondary: #46638A; --color-text-muted: #7B98B8; --color-accent: #2A7AB8; --color-accent-hover: #1F5E94; --color-accent-soft: rgba(42, 122, 184, 0.14); --color-card-bg: rgba(244, 250, 252, 0.94); --color-card-border: rgba(42, 122, 184, 0.16); --color-bubble-self-bg: #2A7AB8; --color-bubble-self-text: #FFFFFF; --color-bubble-other-bg: #FFFFFF; --color-bubble-other-text: #1F3A55; --color-reader-bg: #EAF1F7; --color-reader-paper: #FFFFFF; } /* ----------------- 星宿深空 (nebula) ----------------- */ :root[data-style="nebula"] { --color-bg-primary: #0A0E1F; --color-bg-secondary: #131932; --color-bg-elevated: rgba(20, 26, 56, 0.84); --color-text-primary: #E8E6F2; --color-text-secondary: #ADA8C8; --color-text-muted: #7C7796; --color-accent: #9C7BFF; --color-accent-hover: #B69BFF; --color-accent-soft: rgba(156, 123, 255, 0.16); --color-card-bg: rgba(20, 26, 56, 0.88); --color-card-border: rgba(156, 123, 255, 0.20); --shadow-card: 0 14px 40px -14px rgba(0, 0, 0, 0.70); --color-bubble-self-bg: #9C7BFF; --color-bubble-self-text: #0A0E1F; --color-bubble-other-bg: #1A2148; --color-bubble-other-text: #E8E6F2; --color-reader-bg: #0E1226; --color-reader-paper: #161D38; color-scheme: dark; } /* ----------------- 服务等级风格 ----------------- */ /* 各档主题加上明显的底色/文本变量，让切换有视觉区分 */ /* Basic · 星际探索者：翡翠绿 emerald */ :root[data-style="service-basic"] { --color-bg-primary: #ECFDF5; --color-bg-secondary: #FFFFFF; --color-text-primary: #1E3A2B; --color-text-secondary: #4D6F5C; --color-card-bg: rgba(255, 255, 255, 0.92); --color-card-border: rgba(16, 185, 129, 0.16); --color-accent: #10B981; --color-accent-hover: #059669; --color-accent-soft: rgba(16, 185, 129, 0.14); --color-bubble-self-bg: #10B981; --color-bubble-self-text: #FFFFFF; } /* Plus · 星轨折射者：星紫 violet */ :root[data-style="service-plus"] { --color-bg-primary: #F5F3FF; --color-bg-secondary: #FFFFFF; --color-text-primary: #2E1065; --color-text-secondary: #5B21B6; --color-card-bg: rgba(255, 255, 255, 0.92); --color-card-border: rgba(124, 58, 237, 0.16); --color-accent: #7C3AED; --color-accent-hover: #6D28D9; --color-accent-soft: rgba(124, 58, 237, 0.14); --color-bubble-self-bg: #7C3AED; --color-bubble-self-text: #FFFFFF; } /* Pro · 深空造物主：暗金 amber */ :root[data-style="service-pro"] { --color-bg-primary: #FFFBEB; --color-bg-secondary: #FFFFFF; --color-text-primary: #451A03; --color-text-secondary: #7C2D12; --color-card-bg: rgba(255, 252, 235, 0.92); --color-card-border: rgba(180, 83, 9, 0.18); --color-accent: #B45309; --color-accent-hover: #92400E; --color-accent-soft: rgba(180, 83, 9, 0.14); --color-bubble-self-bg: linear-gradient(135deg, #B45309 0%, #CA8A04 100%); --color-bubble-self-text: #FFFFFF; } /* Max · 超维主宰（极光绯）：fuchsia / violet / cyan 三色渐变 */ :root[data-style="service-max-aurora"] { --color-bg-primary: #FAF5FF; --color-bg-secondary: #FFFFFF; --color-text-primary: #2B0F4E; --color-text-secondary: #6B21A8; --color-card-bg: rgba(255, 255, 255, 0.85); --color-card-border: rgba(162, 28, 175, 0.18); --color-accent: #A21CAF; --color-accent-hover: #86198F; --color-accent-soft: rgba(162, 28, 175, 0.14); --color-bubble-self-bg: linear-gradient(135deg, #C026D3 0%, #7C3AED 50%, #06B6D4 100%); --color-bubble-self-text: #FFFFFF; } /* Max · 极光绯全屏装饰渐变（让 body 自带极光感） */ :root[data-style="service-max-aurora"] body { background-image: radial-gradient(circle at 15% 20%, rgba(192, 38, 211, 0.10), transparent 45%), radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.10), transparent 50%), radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.06), transparent 60%) !important; background-attachment: fixed; } /* Max · 中国红 */ :root[data-style="service-max-red"] { --color-bg-primary: #FEF2F2; --color-bg-secondary: #FFFFFF; --color-text-primary: #450A0A; --color-text-secondary: #7F1D1D; --color-card-bg: rgba(255, 255, 255, 0.92); --color-card-border: rgba(200, 38, 44, 0.18); --color-accent: #C8262C; --color-accent-hover: #A11C22; --color-accent-soft: rgba(200, 38, 44, 0.14); --color-bubble-self-bg: #C8262C; --color-bubble-self-text: #FFFFFF; } /* ========================================================================== * M2.1 全局视觉应用层（v2 强制接管 body） * 任何 :root[data-style="..."] 状态下，body 的 bg/color 都被主题接管 * 不再依赖 JS 给 body 加 class（避免 JS 没跑/被缓存的情况） * ========================================================================== */ :root[data-style] body { background-color: var(--color-bg-primary) !important; color: var(--color-text-primary) !important; transition: background-color .4s ease, color .4s ease; } /* ---------------------------------------------------------------------- * 深色主题策略（v4 · 按页精准）： * - body 由前面的 :root[data-style] body 规则统一接管 bg/color * - 其余子元素 **只针对各页面独有的 class** 写覆盖，绝不动 Tailwind 通用类 * 防止"index 看起来好好的，结果被覆没"的回潮 * ---------------------------------------------------------------------- */ /* ============== OpenNovel 专属（body.lh-page-opennovel / novelplatform / literature） ============== */ /* 主页面包装容器（opennovel 主区） */ :root[data-style="leaf-dark"] body.lh-page-opennovel .min-h-screen.bg-\[\#F2F0E9\], :root[data-style="nebula"] body.lh-page-opennovel .min-h-screen.bg-\[\#F2F0E9\] { background-color: var(--color-bg-primary) !important; color: var(--color-text-primary) !important; } /* 阅读器全屏容器（实际用 bg-[#F9F8F6]，不是 #F2F0E9） */ :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\], :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] { background-color: var(--color-bg-primary) !important; color: var(--color-text-primary) !important; } /* 阅读器侧栏（左侧 TOC 容器）+ 阅读器主区 + 移动端目录抽屉 */ :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#2B2826\], :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#2B2826\] { color: #F2EDE5 !important; } :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#5C5954\], :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#5C5954\] { color: #C8C1B5 !important; } :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#8C8475\], :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .text-\[\#8C8475\] { color: #9E9788 !important; } :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white, :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white\/70, :root[data-style="leaf-dark"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white\/80, :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white, :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white\/70, :root[data-style="nebula"] body.lh-page-opennovel .fixed.bg-\[\#F9F8F6\] .bg-white\/80 { background-color: rgba(45, 39, 35, 0.85) !important; color: #F2EDE5; } /* 毛玻璃卡片 .list-card（不透明度提高，足够分量级 + 高对比文字） */ :root[data-style="leaf-dark"] body.lh-page-opennovel .list-card, :root[data-style="nebula"] body.lh-page-opennovel .list-card { background: rgba(35, 30, 27, 0.94) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #F5EFE5 !important; } :root[data-style="leaf-dark"] body.lh-page-opennovel .list-card:hover, :root[data-style="nebula"] body.lh-page-opennovel .list-card:hover { background: rgba(52, 45, 40, 0.98) !important; border-color: rgba(156, 123, 255, 0.45) !important; box-shadow: 0 18px 36px -8px rgba(0, 0, 0, 0.65) !important; } /* 卡片内部强可读：标题 + 描述 + meta */ :root[data-style="leaf-dark"] .list-card .text-\[\#2B2826\], :root[data-style="nebula"] .list-card .text-\[\#2B2826\] { color: #F2EDE5 !important; } :root[data-style="leaf-dark"] .list-card .text-\[\#5C5954\], :root[data-style="nebula"] .list-card .text-\[\#5C5954\] { color: #BFB7AC !important; } :root[data-style="leaf-dark"] .list-card .text-\[\#8C8475\], :root[data-style="nebula"] .list-card .text-\[\#8C8475\] { color: #8A8278 !important; } /* OpenNovel 侧栏（独属 opennovel） */ :root[data-style="leaf-dark"] .sidebar-glass, :root[data-style="nebula"] .sidebar-glass { background: rgba(28, 24, 21, 0.96) !important; border-right-color: rgba(255, 255, 255, 0.08) !important; color: #F2EDE5; } :root[data-style="leaf-dark"] .sidebar-glass .text-\[\#2B2826\], :root[data-style="nebula"] .sidebar-glass .text-\[\#2B2826\] { color: #F2EDE5 !important; } :root[data-style="leaf-dark"] .sidebar-glass .text-\[\#5C5954\], :root[data-style="nebula"] .sidebar-glass .text-\[\#5C5954\] { color: #BFB7AC !important; } :root[data-style="leaf-dark"] .sidebar-glass .text-\[\#8C8475\], :root[data-style="nebula"] .sidebar-glass .text-\[\#8C8475\] { color: #8A8278 !important; } /* 侧栏底部用户卡片白底 → 深 */ :root[data-style="leaf-dark"] .sidebar-glass .bg-white, :root[data-style="leaf-dark"] .sidebar-glass .bg-white\/50, :root[data-style="leaf-dark"] .sidebar-glass .bg-white\/60, :root[data-style="nebula"] .sidebar-glass .bg-white, :root[data-style="nebula"] .sidebar-glass .bg-white\/50, :root[data-style="nebula"] .sidebar-glass .bg-white\/60 { background-color: rgba(255, 255, 255, 0.06) !important; } /* 侧栏底部那条向上渐变（伪背景） */ :root[data-style="leaf-dark"] .sidebar-glass .bg-gradient-to-t.from-\[\#F2F0E9\], :root[data-style="nebula"] .sidebar-glass .bg-gradient-to-t.from-\[\#F2F0E9\] { background-image: linear-gradient(to top, rgba(28, 24, 21, 0.96), transparent) !important; } /* OpenNovel 阅读器（reader-content / reader-scroll 独属） */ :root[data-style="leaf-dark"] .reader-content p, :root[data-style="nebula"] .reader-content p { color: #D8D1C5 !important; } :root[data-style="leaf-dark"] .reader-scroll, :root[data-style="nebula"] .reader-scroll { background-color: transparent; color: #D8D1C5; } /* 阅读器目录里"高亮当前章" */ :root[data-style="leaf-dark"] .reader-scroll .bg-white, :root[data-style="nebula"] .reader-scroll .bg-white { background-color: rgba(124, 58, 237, 0.18) !important; } /* OpenNovel 全屏模态（reader / NovelCard 都用 bg-[#F2F0E9] 做容器） */ :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\], :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] { background-color: var(--color-bg-primary) !important; color: var(--color-text-primary); } /* 阅读器顶部那条 sticky 工具栏 bg-white/70 backdrop-blur */ :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .bg-white\/70, :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .bg-white\/80, :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .bg-white\/85, :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .bg-white\/70, :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .bg-white\/80, :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .bg-white\/85 { background-color: rgba(28, 24, 21, 0.85) !important; color: #F2EDE5; } :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .text-\[\#2B2826\], :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .text-\[\#2B2826\] { color: #F2EDE5 !important; } :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .text-\[\#5C5954\], :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .text-\[\#5C5954\] { color: #BFB7AC !important; } :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .text-\[\#8C8475\], :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .text-\[\#8C8475\] { color: #8A8278 !important; } /* NovelCard 左侧封面区那条彩色伪背景渐变 */ :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .from-violet-50\/60, :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .from-violet-50\/60 { --tw-gradient-from: rgba(76, 29, 149, 0.25) var(--tw-gradient-from-position) !important; } :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .via-\[\#F2F0E9\], :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .via-\[\#F2F0E9\] { --tw-gradient-via: rgba(28, 24, 21, 0.6) var(--tw-gradient-via-position) !important; } :root[data-style="leaf-dark"] .fixed.bg-\[\#F2F0E9\] .to-orange-50\/40, :root[data-style="nebula"] .fixed.bg-\[\#F2F0E9\] .to-orange-50\/40 { --tw-gradient-to: rgba(124, 45, 18, 0.2) var(--tw-gradient-to-position) !important; } /* OpenNovel 列表上面那行的 search/tab 玻璃背景（在 main 直接子里用了 bg-white/70 等） */ :root[data-style="leaf-dark"] main .bg-white\/60.backdrop-blur, :root[data-style="leaf-dark"] main .bg-white\/70.backdrop-blur, :root[data-style="leaf-dark"] main .bg-white\/80.backdrop-blur, :root[data-style="nebula"] main .bg-white\/60.backdrop-blur, :root[data-style="nebula"] main .bg-white\/70.backdrop-blur, :root[data-style="nebula"] main .bg-white\/80.backdrop-blur { background-color: rgba(40, 35, 32, 0.72) !important; color: #F2EDE5; border-color: rgba(255, 255, 255, 0.08) !important; } /* OpenNovel 移动端底部 nav 灰白 → 深 */ :root[data-style="leaf-dark"] .bottom-nav, :root[data-style="nebula"] .bottom-nav { background: rgba(28, 24, 21, 0.95) !important; border-top-color: rgba(255, 255, 255, 0.08) !important; color: #F2EDE5; } /* 仍保留对显式 lh-themed 的支持（向前兼容） */ body.lh-themed { background-color: var(--color-bg-primary) !important; color: var(--color-text-primary) !important; } /* ========================================================================== * 局部作用域覆盖（data-style-override-{section}） * * 设置中"风格分区"允许在不同页面用不同风格。覆盖原理： * * *

← 这一段使用 opennovel 覆盖 * 实现：在 JS 中读到设置后，对写 data-style-override-{section} 属性， * 同时给页面根容器加 data-style-scope="{section}"。 * ========================================================================== */ [data-style-scope="opennovel"][data-style-override="dark"], :root[data-style-override-opennovel="leaf-dark"] [data-style-scope="opennovel"] { --color-bg-primary: #14110F; --color-text-primary: #F2EDE5; --color-card-bg: rgba(40, 35, 32, 0.86); --color-reader-bg: #1B1714; --color-reader-paper: #221D19; } /* ========================================================================== * 性能档（M1.2.b） * 关闭模糊 / 大动画 / 粒子 * 关闭装饰动画 * ========================================================================== */ :root[data-perf="low"] *, :root[data-perf="reduced-motion"] *:not(.allow-motion) { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 200ms !important; } :root[data-perf="low"] .glass-panel, :root[data-perf="low"] [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-perf="low"] .confetti, :root[data-perf="low"] .particles, :root[data-perf="low"] [data-decorative="true"] { display: none !important; } /* ========================================================================== * 工具类（建议在新组件里使用 var(--xxx) 而不是 Tailwind 硬编码色） * ========================================================================== */ .lh-bg { background-color: var(--color-bg-primary); } .lh-bg-card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .lh-text { color: var(--color-text-primary); } .lh-text-2 { color: var(--color-text-secondary); } .lh-text-muted { color: var(--color-text-muted); } .lh-accent { color: var(--color-accent); } .lh-accent-bg { background-color: var(--color-accent); color: var(--color-text-inverse); } .lh-divider { border-top: 1px solid var(--color-card-border); } .lh-bubble-self { background-color: var(--color-bubble-self-bg); color: var(--color-bubble-self-text); } .lh-bubble-other { background-color: var(--color-bubble-other-bg); color: var(--color-bubble-other-text); }