mirror of
https://github.com/xfgryujk/blivechat.git
synced 2026-08-19 09:43:28 +08:00
添加生成自定义样式的skill
This commit is contained in:
John Smith
81
.agents/skills/blivechat-css-ref/SKILL.md
Normal file
81
.agents/skills/blivechat-css-ref/SKILL.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
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* 即可自动导入该文件。
|
||||
|
||||
**输出必须包含以下内容：**
|
||||
```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:` 协议引用本地文件，这种方式不可移植到其他主机。
|
||||
269
.agents/skills/blivechat-css-ref/references/bubble.css
Normal file
269
.agents/skills/blivechat-css-ref/references/bubble.css
Normal file
@@ -0,0 +1,269 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20SC");
|
||||
|
||||
yt-live-chat-renderer {
|
||||
/* 基准尺寸，用于整体缩放 */
|
||||
--base-size: 1px;
|
||||
--font-base-size: calc(1 * var(--base-size));
|
||||
|
||||
/* 没有首选字体时的备用字体 */
|
||||
--fallback-fonts: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE \8F6F \96C5 \9ED1 ", SimHei, Arial, sans-serif;
|
||||
|
||||
/* 头像 */
|
||||
--avatar-size: calc(40 * var(--base-size));
|
||||
|
||||
/* 时间 */
|
||||
--time-color: #999999;
|
||||
--time-size: calc(18 * var(--font-base-size));
|
||||
--time-weight: 400;
|
||||
|
||||
/* 用户名 - 普通、舰长、房管、主播 */
|
||||
--username-color: #cccccc;
|
||||
--username-color-member: #0f9d58;
|
||||
--username-color-moderator: #5e84f1;
|
||||
--username-color-owner: #ffd600;
|
||||
--username-size: calc(18 * var(--font-base-size));
|
||||
--username-weight: 700;
|
||||
|
||||
/* 文本消息 */
|
||||
--text-content-color: #000000;
|
||||
--text-content-size: calc(20 * var(--font-base-size));
|
||||
--text-content-weight: 700;
|
||||
|
||||
/* 表情 */
|
||||
--emote-size: calc(24 * var(--font-base-size));
|
||||
--large-emote-size: calc(60 * var(--font-base-size));
|
||||
|
||||
/* 背景色 - 普通、舰长、房管、主播 */
|
||||
--text-msg-bg-color: #ffffff;
|
||||
--text-msg-bg-color-member: #3ACD2E;
|
||||
--text-msg-bg-color-moderator: #3CA0FB;
|
||||
--text-msg-bg-color-owner: #F5D401;
|
||||
|
||||
/* 付费、上舰消息 */
|
||||
--paid-msg-line-1-size: calc(22 * var(--font-base-size));
|
||||
--paid-msg-line-1-weight: 700;
|
||||
--paid-msg-line-2-size: calc(20 * var(--font-base-size));
|
||||
--paid-msg-line-2-weight: 700;
|
||||
--paid-msg-content-size: calc(20 * var(--font-base-size));
|
||||
--paid-msg-content-weight: 700;
|
||||
--membership-msg-bg-color: var(--username-color-member);
|
||||
}
|
||||
|
||||
/* （必需）透明背景 */
|
||||
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;
|
||||
}
|
||||
|
||||
/* 通用规则 */
|
||||
yt-live-chat-renderer * {
|
||||
font-size: var(--font-size);
|
||||
--line-height: calc(var(--font-size) * 1.2);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* 减少两侧边距 */
|
||||
yt-live-chat-text-message-renderer {
|
||||
padding-inline: 4px;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
yt-live-chat-item-list-renderer :is(#author-photo, #author-photo img) {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 时间 */
|
||||
yt-live-chat-text-message-renderer #timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 用户名 */
|
||||
yt-live-chat-text-message-renderer #author-name {
|
||||
|
||||
color: var(--username-color);
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--username-size);
|
||||
font-weight: var(--username-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
|
||||
color: var(--username-color-owner);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="moderator"] {
|
||||
color: var(--username-color-moderator);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="member"] {
|
||||
color: var(--username-color-member);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
|
||||
--font-size: var(--username-size);
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 文本消息 */
|
||||
yt-live-chat-text-message-renderer :is(#message, #message *) {
|
||||
color: var(--text-content-color);
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--text-content-size);
|
||||
font-weight: var(--text-content-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message .emoji {
|
||||
width: auto;
|
||||
height: var(--emote-size);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
|
||||
height: var(--large-emote-size);
|
||||
}
|
||||
|
||||
/* 气泡背景 */
|
||||
yt-live-chat-text-message-renderer #message {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
overflow: visible;
|
||||
padding: calc(12 * var(--base-size)) calc(20 * var(--base-size));
|
||||
border-radius: calc(24 * var(--base-size));
|
||||
}
|
||||
|
||||
/* 气泡旁边的三角形箭头 */
|
||||
yt-live-chat-text-message-renderer #message::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: calc(8 * var(--base-size)) solid transparent;
|
||||
border-left-width: calc(18 * var(--base-size));
|
||||
border-right: calc(18 * var(--base-size)) solid green;
|
||||
transform: translate(-50%, -50%) rotate(35deg);
|
||||
}
|
||||
|
||||
/* 适配隐藏大表情背景 */
|
||||
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 背景色 */
|
||||
yt-live-chat-text-message-renderer #message {
|
||||
background-color: var(--text-msg-bg-color);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message::before {
|
||||
border-right-color: var(--text-msg-bg-color);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="owner"] #message {
|
||||
background-color: var(--text-msg-bg-color-owner);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="owner"] #message::before {
|
||||
border-right-color: var(--text-msg-bg-color-owner);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="moderator"] #message {
|
||||
background-color: var(--text-msg-bg-color-moderator);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="moderator"] #message::before {
|
||||
border-right-color: var(--text-msg-bg-color-moderator);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="member"] #message {
|
||||
background-color: var(--text-msg-bg-color-member);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="member"] #message::before {
|
||||
border-right-color: var(--text-msg-bg-color-member);
|
||||
}
|
||||
|
||||
/* 隐藏大表情背景 */
|
||||
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 付费、上舰消息 */
|
||||
yt-live-chat-paid-message-renderer {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-1-size);
|
||||
font-weight: var(--paid-msg-line-1-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
font-weight: var(--paid-msg-line-2-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#content, #content *) {
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-content-size);
|
||||
font-weight: var(--paid-msg-content-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer :is(#card, #header) {
|
||||
background-color: var(--membership-msg-bg-color);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* SC固定栏 */
|
||||
yt-live-chat-ticker-renderer :is(#items, #content) {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #text {
|
||||
font-family: "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
font-weight: var(--paid-msg-line-2-weight);
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes anim {
|
||||
0% { opacity: 0; translate: calc(-16 * var(--base-size)); }
|
||||
100% { opacity: 1; translate: none; }
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer #items > * {
|
||||
animation: anim 200ms;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
241
.agents/skills/blivechat-css-ref/references/text.css
Normal file
241
.agents/skills/blivechat-css-ref/references/text.css
Normal file
@@ -0,0 +1,241 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Imprima");
|
||||
@import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20SC");
|
||||
|
||||
yt-live-chat-renderer {
|
||||
/* 基准尺寸，用于整体缩放 */
|
||||
--base-size: 1px;
|
||||
--font-base-size: calc(1 * var(--base-size));
|
||||
|
||||
/* 没有首选字体时的备用字体 */
|
||||
--fallback-fonts: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE \8F6F \96C5 \9ED1 ", SimHei, Arial, sans-serif;
|
||||
|
||||
/* 头像 */
|
||||
--avatar-size: calc(24 * var(--base-size));
|
||||
|
||||
/* 时间 */
|
||||
--time-color: #999999;
|
||||
--time-size: calc(20 * var(--font-base-size));
|
||||
--time-weight: 400;
|
||||
|
||||
/* 用户名 - 普通、舰长、房管、主播 */
|
||||
--username-color: #cccccc;
|
||||
--username-color-member: #0f9d58;
|
||||
--username-color-moderator: #5e84f1;
|
||||
--username-color-owner: #ffd600;
|
||||
--username-size: calc(20 * var(--font-base-size));
|
||||
--username-weight: 700;
|
||||
|
||||
/* 文本消息 */
|
||||
--text-content-color: #ffffff;
|
||||
--text-content-size: calc(20 * var(--font-base-size));
|
||||
--text-content-weight: 700;
|
||||
|
||||
/* 表情 */
|
||||
--emote-size: calc(24 * var(--font-base-size));
|
||||
--large-emote-size: calc(40 * var(--font-base-size));
|
||||
|
||||
/* 描边 */
|
||||
--outline-color: #000000;
|
||||
|
||||
/* 背景色 - 普通、舰长、房管、主播 */
|
||||
--text-msg-bg-color: rgba(204, 204, 204, 0);
|
||||
--text-msg-bg-color-member: rgba(15, 157, 88, 0);
|
||||
--text-msg-bg-color-moderator: rgba(94, 132, 241, 0);
|
||||
--text-msg-bg-color-owner: rgba(255, 214, 0, 0);
|
||||
|
||||
/* 付费、上舰消息 */
|
||||
--paid-msg-line-1-color: #ffffff;
|
||||
--paid-msg-line-1-size: calc(22 * var(--font-base-size));
|
||||
--paid-msg-line-1-weight: 700;
|
||||
--paid-msg-line-2-color: #ffffff;
|
||||
--paid-msg-line-2-size: calc(20 * var(--font-base-size));
|
||||
--paid-msg-line-2-weight: 700;
|
||||
--paid-msg-content-color: #ffffff;
|
||||
--paid-msg-content-size: calc(20 * var(--font-base-size));
|
||||
--paid-msg-content-weight: 700;
|
||||
--membership-msg-bg-color: var(--username-color-member);
|
||||
}
|
||||
|
||||
/* （必需）透明背景 */
|
||||
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;
|
||||
}
|
||||
|
||||
/* 通用规则 */
|
||||
yt-live-chat-renderer * {
|
||||
font-size: var(--font-size);
|
||||
--line-height: calc(var(--font-size) * 1.2);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* 减少两侧边距 */
|
||||
yt-live-chat-text-message-renderer {
|
||||
padding-inline: 4px 4px;
|
||||
}
|
||||
|
||||
/* 描边 */
|
||||
yt-live-chat-renderer * {
|
||||
text-shadow: -2px -2px var(--outline-color), -2px -1px var(--outline-color), -2px 0px var(--outline-color), -2px 1px var(--outline-color), -2px 2px var(--outline-color), -1px -2px var(--outline-color), -1px -1px var(--outline-color), -1px 0px var(--outline-color), -1px 1px var(--outline-color), -1px 2px var(--outline-color), 0px -2px var(--outline-color), 0px -1px var(--outline-color), 0px 0px var(--outline-color), 0px 1px var(--outline-color), 0px 2px var(--outline-color), 1px -2px var(--outline-color), 1px -1px var(--outline-color), 1px 0px var(--outline-color), 1px 1px var(--outline-color), 1px 2px var(--outline-color), 2px -2px var(--outline-color), 2px -1px var(--outline-color), 2px 0px var(--outline-color), 2px 1px var(--outline-color), 2px 2px var(--outline-color);
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
yt-live-chat-item-list-renderer :is(#author-photo, #author-photo img) {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 时间 */
|
||||
yt-live-chat-text-message-renderer #timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 用户名 */
|
||||
yt-live-chat-text-message-renderer #author-name {
|
||||
|
||||
color: var(--username-color);
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--username-size);
|
||||
font-weight: var(--username-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
|
||||
color: var(--username-color-owner);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="moderator"] {
|
||||
color: var(--username-color-moderator);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="member"] {
|
||||
color: var(--username-color-member);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
|
||||
--font-size: var(--username-size);
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
/* 显示冒号 */
|
||||
yt-live-chat-text-message-renderer #author-name::after {
|
||||
content: ":";
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 文本消息 */
|
||||
yt-live-chat-text-message-renderer :is(#message, #message *) {
|
||||
color: var(--text-content-color);
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--text-content-size);
|
||||
font-weight: var(--text-content-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message .emoji {
|
||||
width: auto;
|
||||
height: var(--emote-size);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
|
||||
height: var(--large-emote-size);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #content:has(.emoji.blc-large-emoji) > * {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 背景色 */
|
||||
yt-live-chat-text-message-renderer {
|
||||
background-color: var(--text-msg-bg-color);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="owner"] {
|
||||
background-color: var(--text-msg-bg-color-owner);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="moderator"] {
|
||||
background-color: var(--text-msg-bg-color-moderator);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-type="member"] {
|
||||
background-color: var(--text-msg-bg-color-member);
|
||||
}
|
||||
|
||||
/* 付费、上舰消息 */
|
||||
yt-live-chat-paid-message-renderer {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-1-size);
|
||||
font-weight: var(--paid-msg-line-1-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
font-weight: var(--paid-msg-line-2-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#content, #content *) {
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-content-size);
|
||||
font-weight: var(--paid-msg-content-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer :is(#card, #header) {
|
||||
background-color: var(--membership-msg-bg-color);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* SC固定栏 */
|
||||
yt-live-chat-ticker-renderer :is(#items, #content) {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
width: var(--line-height);
|
||||
height: var(--line-height);
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #text {
|
||||
font-family: "Imprima", "Noto Sans SC", var(--fallback-fonts);
|
||||
--font-size: var(--paid-msg-line-2-size);
|
||||
font-weight: var(--paid-msg-line-2-weight);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
|
||||
color: var(--paid-msg-line-1-color);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
|
||||
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
|
||||
color: var(--paid-msg-line-2-color);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer :is(#content, #content *) {
|
||||
color: var(--paid-msg-content-color);
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #content {
|
||||
color: var(--paid-msg-line-2-color) !important;
|
||||
}
|
||||
@@ -603,7 +603,7 @@ ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #messag
|
||||
overflow: visible;
|
||||
}`}
|
||||
|
||||
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
|
||||
yt-live-chat-text-message-renderer #content:has(.emoji.blc-large-emoji) > * {
|
||||
vertical-align: top;
|
||||
}`
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user