仿微信样式生成器添加显示大表情背景选项

This commit is contained in:
John Smith 2024-04-06 15:56:23 +08:00
parent 64f77c5df9
commit 690f6aa35c
4 changed files with 22 additions and 1 deletions

View File

@ -116,6 +116,7 @@ export default {
backgrounds: 'Backgrounds', backgrounds: 'Backgrounds',
bgColor: 'Background color', bgColor: 'Background color',
useBarsInsteadOfBg: 'Use bars instead of backgrounds', useBarsInsteadOfBg: 'Use bars instead of backgrounds',
showLargeEmoticonBg: 'Show large emoticon background',
messageBgColor: 'Message background color', messageBgColor: 'Message background color',
ownerMessageBgColor: 'Owner background color', ownerMessageBgColor: 'Owner background color',
moderatorMessageBgColor: 'Moderator background color', moderatorMessageBgColor: 'Moderator background color',

View File

@ -116,6 +116,7 @@ export default {
backgrounds: '背景', backgrounds: '背景',
bgColor: '背景色', bgColor: '背景色',
useBarsInsteadOfBg: '背景に代わります', useBarsInsteadOfBg: '背景に代わります',
showLargeEmoticonBg: '大きなスタンプの背景を表示する',
messageBgColor: 'コメント背景色', messageBgColor: 'コメント背景色',
ownerMessageBgColor: 'オーナーコメント背景色', ownerMessageBgColor: 'オーナーコメント背景色',
moderatorMessageBgColor: '管理者コメント背景色', moderatorMessageBgColor: '管理者コメント背景色',

View File

@ -116,6 +116,7 @@ export default {
backgrounds: '背景', backgrounds: '背景',
bgColor: '背景色', bgColor: '背景色',
useBarsInsteadOfBg: '用条代替消息背景', useBarsInsteadOfBg: '用条代替消息背景',
showLargeEmoticonBg: '显示大表情背景',
messageBgColor: '消息背景色', messageBgColor: '消息背景色',
ownerMessageBgColor: '主播消息背景色', ownerMessageBgColor: '主播消息背景色',
moderatorMessageBgColor: '房管消息背景色', moderatorMessageBgColor: '房管消息背景色',

View File

@ -155,6 +155,11 @@
<el-color-picker v-model="form.bgColor" show-alpha></el-color-picker> <el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showLargeEmoticonBg')">
<el-switch v-model="form.showLargeEmoticonBg"></el-switch>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
@ -346,6 +351,7 @@ export const DEFAULT_CONFIG = {
ownerMessageBgColor: 'rgba(231, 199, 30, 1)', ownerMessageBgColor: 'rgba(231, 199, 30, 1)',
moderatorMessageBgColor: 'rgba(41, 95, 251, 1)', moderatorMessageBgColor: 'rgba(41, 95, 251, 1)',
memberMessageBgColor: 'rgba(43, 234, 43, 1)', memberMessageBgColor: 'rgba(43, 234, 43, 1)',
showLargeEmoticonBg: true,
firstLineFont: 'Noto Sans SC', firstLineFont: 'Noto Sans SC',
firstLineFontSize: 20, firstLineFontSize: 20,
@ -475,6 +481,10 @@ yt-live-chat-text-message-renderer #message {
border-radius: 24px; border-radius: 24px;
} }
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
${this.form.showLargeEmoticonBg ? '' : 'padding: 0;'}
}
yt-live-chat-text-message-renderer #message .emoji { yt-live-chat-text-message-renderer #message .emoji {
width: auto !important; width: auto !important;
height: ${this.form.emoticonSize}px !important; height: ${this.form.emoticonSize}px !important;
@ -494,6 +504,10 @@ yt-live-chat-text-message-renderer #message::before {
border: 8px solid transparent; border: 8px solid transparent;
border-right: 18px solid; border-right: 18px solid;
transform: rotate(35deg); transform: rotate(35deg);
}
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
${this.form.showLargeEmoticonBg ? '' : 'content: none;'}
}` }`
}, },
timeStyle() { timeStyle() {
@ -512,7 +526,11 @@ ${this.getBgStyleForAuthorType('owner', this.form.ownerMessageBgColor)}
${this.getBgStyleForAuthorType('moderator', this.form.moderatorMessageBgColor)} ${this.getBgStyleForAuthorType('moderator', this.form.moderatorMessageBgColor)}
${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}` ${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
${this.form.showLargeEmoticonBg ? '' : 'background-color: transparent !important;'}
}`
}, },
scAndNewMemberStyle() { scAndNewMemberStyle() {
return `/* SuperChat/Fan Funding Messages */ return `/* SuperChat/Fan Funding Messages */