blivechat-css-ref

name	blivechat-css-ref
description	blivechat 自定义 CSS 参考。使用场景：用户提到 写/设计/生成/修改 一个 弹幕样式/CSS；排查弹幕样式不生效等问题。
license	MIT
metadata	{"author":"xfgryujk"}

blivechat 自定义 CSS 参考

blivechat 软件获取 bilibili 直播弹幕并以 HTML 形式在 OBS 中嵌入显示。默认样式模仿 YouTube，但可通过自定义 CSS 修改。

输出

输出为一个 CSS 文件。

如果用户未指定输出路径，则询问保存位置。推荐 data/custom_public/preset.css，因为在 blivechat 设置中启用 导入服务器预设 CSS 即可自动导入该文件。

输出必须包含以下内容：

/* （必需）透明背景 */
body,
yt-live-chat-renderer,
yt-live-chat-ticker-renderer,
yt-live-chat-author-chip #author-name {
  background-color: transparent;
}

/* （必需）隐藏滚动条 */
body,
yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden;
}

参考文件

• DOM 结构源码：frontend/src/components/ChatRenderer/index.vue
• 内置 YouTube 样式：frontend/src/assets/css/youtube/——默认样式未被覆盖时可以参考
• 聊天气泡风格 CSS 示例
• 纯文字无消息背景 CSS 示例——添加文字描边以提高对比度

常用模式

修复含有大表情的文本消息中头像和用户名没有垂直对齐的问题

大表情会把文本消息的高度撑大，导致头像和用户名没有垂直对齐。

修复方式1，指定顶端对齐：

yt-live-chat-text-message-renderer #content:has(.emoji.blc-large-emoji) > * {
  vertical-align: top;
}

修复方式2，大表情换行显示：

yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
  display: block;
}

区分舰队等级

文本消息 yt-live-chat-text-message-renderer 和上舰消息 yt-live-chat-membership-item-renderer 带有 blc-guard-level 属性区分舰队等级。

blc-guard-level 取值：

• 0：非舰队成员
• 1：总督
• 2：提督
• 3：舰长

区分付费消息金额档位

付费消息 yt-live-chat-paid-message-renderer 带有 blc-price-level 属性区分金额档位。其值从低到高为 0-7，0 代表免费礼物。

引用本地资源文件

如需引用本地资源，将文件放入 data/custom_public/ 目录，通过绝对 URL /custom_public/ 引用。例如 data/custom_public/img/bg.png 可通过 /custom_public/img/bg.png 引用。

禁止使用 file: 协议引用本地文件，这种方式不可移植到其他主机。