弹幕姬主题

弹幕姬（ElementType.ChatRenderer）的皮肤机制和加班机 / 礼物菜单不一样：它的 DOM 精确还原 YouTube Live Chat（yt-live-chat-* 自定义元素 + #id），走「整表主题」机制，可直接套用现成的 blivechat 主题。源码 src/components/ChatRenderer/、src/utils/skin-css.ts（applyChatRendererTheme）。

规范

• 整表主题、不作用域：用单个 <link rel="stylesheet"> 整表加载，选择器写顶层 yt-live-chat-* / #id（与 blivechat 一致），不要作用域前缀。注意基础 CSS（youtube/*.css）始终存在并打包进组件，主题是覆盖它、不是替换它。

• 一般不需要 !important：基础 CSS 放在 @layer yt（优先级最低），主题不分层、天然覆盖它，普通声明即可生效。只有极少数基础规则自带 !important，或要盖元素内联 style 时才加。现成 blivechat 主题里带着 !important 也无妨。

• versionType 必须匹配：有原版（blivechat，扁平结构）和只熊版（blivechat-zx，#card 包裹）两套条目 DOM，选择器要对上，否则命中不到。

• 皮肤定义走 cssUrl + skinData：整表 CSS 用 cssUrl；skinData 里声明 versionType 与 fonts：

  skinData 字段	作用
  versionType	"blivechat" 或 "blivechat-zx"，决定条目 DOM
  fonts	自带字体数组 [{ family, url }]

• 字体写名字、不写 @font-face：主题里直接 font-family: "字体名"，把字体文件放进 skinData.fonts，客户端按同名注册并下载（字体所在 OSS 需配好 CORS）。

• 几何不变：skinData 里的 width/height 会被忽略（外壳尺寸由 realWidth/realHeight 管），别指望靠主题改元素大小。

• 资源可达：cssUrl 在编辑 / 预览 / 虚拟摄像头三种窗口都要能直接加载（预览窗无鉴权），用公网可达地址。

DOM 结构

容器（两版共用）

<yt-live-chat-renderer class="style-scope yt-live-chat-app">
  <yt-live-chat-item-list-renderer
    class="style-scope yt-live-chat-renderer"
    allow-scroll
  >
    <div
      id="item-scroller"
      class="style-scope yt-live-chat-item-list-renderer animated"
    >
      <div id="item-offset" class="style-scope yt-live-chat-item-list-renderer">
        <div id="items" class="style-scope yt-live-chat-item-list-renderer">
          <!-- 条目们 -->
        </div>
      </div>
    </div>
  </yt-live-chat-item-list-renderer>
</yt-live-chat-renderer>

文本弹幕 —— 原版（blivechat）

<yt-live-chat-text-message-renderer author-type="" privilegetype="">
  <!-- id="author-photo"：头像（关闭头像时不渲染） -->
  <div id="content">
    <span id="timestamp">12:00</span>
    <yt-live-chat-author-chip>
      <span id="author-name" type="member"
        >昵称<span id="chip-badges"></span
      ></span>
    </yt-live-chat-author-chip>
    <span id="message">弹幕正文</span>
  </div>
</yt-live-chat-text-message-renderer>

文本弹幕 —— 只熊版（blivechat-zx）

<yt-live-chat-text-message-renderer author-type="member" privilegetype="2">
  <div id="card">
    <!-- id="author-photo"：头像 -->
    <div id="content">
      <yt-live-chat-author-chip>
        <span id="timestamp">12:00</span>
        <span id="author-name" type="member"
          >昵称<span id="chip-badges"></span
        ></span>
      </yt-live-chat-author-chip>
      <div id="image-and-message"><span id="message">弹幕正文</span></div>
    </div>
  </div>
</yt-live-chat-text-message-renderer>

礼物（付费）弹幕（两版共用）

精确还原 Super Chat，颜色由内联 --yt-live-chat-paid-message-* 变量按金额分级控制。

<yt-live-chat-paid-message-renderer giftname="..." blc-price-level="...">
  <div id="card">
    <div id="header">
      <!-- id="author-photo"：头像 -->
      <div id="header-content">
        <div id="header-content-primary-column">
          <div id="author-name">昵称</div>
          <div id="purchase-amount">CN¥6.00</div>
        </div>
        <span id="timestamp">12:00</span>
      </div>
    </div>
    <div id="content"><div id="message">送给主播 1 个 礼物名</div></div>
  </div>
</yt-live-chat-paid-message-renderer>

完整选择器清单见 src/components/ChatRenderer/themes/default.css 与 youtube/*.css。任何标准 blivechat 主题 CSS 都可直接用。

示例

常用选择器（顶层 yt-live-chat-* + #id，普通声明即可覆盖基础 CSS）：

/* 透明背景：弹幕姬要叠在画布上，几乎所有主题都要这条 */
yt-live-chat-renderer {
  background-color: transparent;
}

/* 隐藏头部 / 输入框 */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none;
}

/* 头像尺寸 / 圆角 */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-text-message-renderer #author-photo img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}

/* 正文 / 昵称 / 时间 颜色 */
yt-live-chat-text-message-renderer #message {
  color: #fff;
}
yt-live-chat-text-message-renderer #author-name {
  color: #9cf;
}
yt-live-chat-text-message-renderer #timestamp {
  color: #888;
}

自带字体（skinData.fonts 声明，主题里只写 font-family）：

{
  "versionType": "blivechat",
  "fonts": [{ "family": "霞鹜文楷", "url": "https://your-oss/lxgw.woff2" }]
}