tomevault-io 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: 协议引用本地文件，这种方式不可移植到其他主机。
Source: xfgryujk/blivechat — distributed by TomeVault.