blivechat-css-ref

# blivechat 自定义 CSS 参考 blivechat 软件获取 bilibili 直播弹幕并以 HTML 形式在 OBS 中嵌入显示。默认样式模仿 YouTube，但可通过自定义 CSS 修改。 ## 输出 输出为一个 CSS 文件。 如果用户未指定输出路径，则询问保存位置。推荐 `data/custom_public/preset.css`，因为在 blivechat 设置中启用 *导入服务器预设 CSS* 即可自动导入该文件。 **输出必须包含以下内容：** ```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 示例](references/bubble.css) - [纯文字无消息背景 CSS 示例](references/text.css)——添加文字描边以提高对比度 ## 常用模式 ### 修复含有大表情的文本消息中头像和用户名没有垂直对齐的问题 大表情会把文本消息的高度撑大，导致头像和用户名没有垂直对齐。 修复方式1，指定顶端对齐： ```css yt-live-chat-text-message-renderer #content:has(.emoji.blc-large-emoji) > * { vertical-align: top; } ``` 修复方式2，大表情换行显示： ```css 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:` 协议引用本地文件，这种方式不可移植到其他主机。