diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 930caae..6c1235d 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -174,7 +174,7 @@ export default {
reverseSlide: 'Reverse slide',
playAnimation: 'Play animation',
- result: 'Result',
+ result: 'Result CSS',
copy: 'Copy',
editor: 'Editor',
resetConfig: 'Reset config'
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
index 9186d77..1b74255 100644
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -174,7 +174,7 @@ export default {
reverseSlide: '逆の滑る',
playAnimation: 'アニメーションを再生する',
- result: '結果',
+ result: '結果CSS',
copy: 'コピー',
editor: 'エディタ',
resetConfig: 'デフォルトに戻す'
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 3983386..b40d1ed 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -172,7 +172,7 @@ export default {
reverseSlide: '反向滑动',
playAnimation: '生成消息',
- result: '结果',
+ result: '结果CSS',
copy: '复制',
editor: '编辑器',
resetConfig: '恢复默认设置'
diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue
index 994517b..ca1e9df 100644
--- a/frontend/src/views/StyleGenerator/Legacy.vue
+++ b/frontend/src/views/StyleGenerator/Legacy.vue
@@ -318,9 +318,6 @@
-
-
-
@@ -444,7 +441,6 @@ export const DEFAULT_CONFIG = {
scContentFontSize: 20,
scContentLineHeight: 0,
scContentColor: '#ffffff',
- showNewMemberBg: true,
showScTicker: false,
showOtherThings: true,
@@ -479,9 +475,9 @@ export default {
this.paddingStyle,
this.outlineStyle,
this.avatarStyle,
+ this.timeStyle,
this.userNameStyle,
this.messageStyle,
- this.timeStyle,
this.backgroundStyle,
this.scAndNewMemberStyle,
this.animationStyle,
@@ -517,7 +513,7 @@ export default {
--paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
--paid-msg-content-color: ${this.form.scContentColor ?? '#ffffff'};
--paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
- --membership-msg-bg-color: ${this.form.showNewMemberBg ? 'var(--username-color-member)' : 'transparent'};
+ --membership-msg-bg-color: var(--username-color-member);
}`
},
paddingStyle() {
@@ -545,16 +541,7 @@ yt-live-chat-renderer * {
return common.getAvatarStyle(this.form)
},
userNameStyle() {
- return `/* 用户名 Channel names */
-yt-live-chat-text-message-renderer #author-name {
- ${this.form.showUserNames ? '' : 'display: none;'}
- color: var(--username-color);
- font-family: ${common.fontsStrToCss(this.form.userNameFont)};
- font-size: var(--username-size);
- line-height: calc(${this.form.userNameLineHeight || (this.form.userNameFontSize * 1.2)} * var(--font-base-size));
-}
-
-${common.getUserNameStyle(this.form)}
+ return `${common.getUserNameStyle(this.form)}
${!this.form.showColon ? '' : `/* 显示冒号 Show colon */
yt-live-chat-text-message-renderer #author-name::after {
@@ -563,13 +550,7 @@ yt-live-chat-text-message-renderer #author-name::after {
}`}`
},
messageStyle() {
- return `/* 文本消息 Text messages */
-yt-live-chat-text-message-renderer :is(#message, #message *) {
- color: var(--text-content-color);
- font-family: ${common.fontsStrToCss(this.form.messageFont)};
- font-size: var(--text-content-size);
- line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize * 1.2)} * var(--font-base-size));
-}
+ return `${common.getMessageStyle(this.form)}
${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
display: block;
@@ -578,11 +559,7 @@ ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #messag
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
vertical-align: top;
-}
-
-${common.EMOTICON_STYLE}
-
-${common.getReverseScrollStyle(this.form)}`
+}`
},
timeStyle() {
return common.getTimeStyle(this.form)
@@ -614,80 +591,26 @@ ${!this.form.useBarsInsteadOfBg ? '' : `yt-live-chat-text-message-renderer::afte
}`}`
},
scAndNewMemberStyle() {
- return `/* 付费、上舰消息 Super Chats / Membership messages */
-yt-live-chat-paid-message-renderer {
- margin: 4px 0;
-}
+ return `${common.getScAndNewMemberStyle(this.form)}
-${this.scAndNewMemberFontStyle}
-
-yt-live-chat-membership-item-renderer :is(#card, #header) {
- background-color: var(--membership-msg-bg-color);
- ${this.form.showNewMemberBg ? 'margin: 4px 0;' : `box-shadow: none;
- margin: 0;`}
-}
-
-${this.scTickerStyle}
-
-${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
- display: none;
-}`}`
- },
- scAndNewMemberFontStyle() {
- let firstLineLineHeight = this.form.firstLineLineHeight || (this.form.firstLineFontSize * 1.2)
- return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
+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);
- font-family: ${common.fontsStrToCss(this.form.firstLineFont)};
- font-size: var(--paid-msg-line-1-size);
- line-height: calc(${firstLineLineHeight} * var(--font-base-size));
-}
-
-yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
- width: calc(${firstLineLineHeight} * var(--font-base-size));
- height: calc(${firstLineLineHeight} * var(--font-base-size));
}
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);
- font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
- font-size: var(--paid-msg-line-2-size);
- line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#content, #content *) {
color: var(--paid-msg-content-color);
- font-family: ${common.fontsStrToCss(this.form.scContentFont)};
- font-size: var(--paid-msg-content-size);
- line-height: calc(${this.form.scContentLineHeight || (this.form.scContentFontSize * 1.2)} * var(--font-base-size));
-}`
- },
- scTickerStyle() {
- if (!this.form.showScTicker) {
- return `yt-live-chat-ticker-renderer {
- display: none;
-}`
- } else {
- let secondLineLineHeight = this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)
- return `/* SC固定栏 Super Chat ticker */
-yt-live-chat-ticker-renderer #items {
- height: unset;
-}
-
-yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
- width: calc(${secondLineLineHeight} * var(--font-base-size));
- height: calc(${secondLineLineHeight} * var(--font-base-size));
}
yt-live-chat-ticker-paid-message-item-renderer #content {
- height: unset;
color: var(--paid-msg-line-2-color) !important;
- font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
- font-size: var(--paid-msg-line-2-size);
- line-height: calc(${secondLineLineHeight} * var(--font-base-size));
-}`
- }
+}
+`
},
animationStyle() {
return common.getAnimationStyle(this.form)
diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue
index 778df01..b94e7a6 100644
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@@ -419,9 +419,9 @@ export default {
common.COMMON_STYLE,
this.paddingStyle,
this.avatarStyle,
+ this.timeStyle,
this.userNameStyle,
this.messageStyle,
- this.timeStyle,
this.backgroundStyle,
this.scAndNewMemberStyle,
this.animationStyle,
@@ -464,31 +464,20 @@ yt-live-chat-text-message-renderer {
return common.getAvatarStyle(this.form)
},
userNameStyle() {
- return `/* 用户名 Channel names */
+ return `${common.getUserNameStyle(this.form)}
+
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
margin-bottom: 5px;
-}
-
-yt-live-chat-text-message-renderer #author-name {
- ${this.form.showUserNames ? '' : 'display: none;'}
- color: var(--username-color);
- font-family: ${common.fontsStrToCss(this.form.userNameFont)};
- font-size: var(--username-size);
- line-height: calc(${this.form.userNameLineHeight || (this.form.userNameFontSize * 1.2)} * var(--font-base-size));
-}
-
-${common.getUserNameStyle(this.form)}`
+}`
},
messageStyle() {
- return `/* 文本消息 Text messages */
-yt-live-chat-text-message-renderer :is(#message, #message *) {
- color: var(--text-content-color);
- font-family: ${common.fontsStrToCss(this.form.messageFont)};
- font-size: var(--text-content-size);
- line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize * 1.2)} * var(--font-base-size));
-}
-
-/* 气泡背景 Bubble background */
+ return common.getMessageStyle(this.form)
+ },
+ timeStyle() {
+ return common.getTimeStyle(this.form)
+ },
+ backgroundStyle() {
+ return `/* 气泡背景 Bubble background */
yt-live-chat-text-message-renderer #message {
display: block;
position: relative;
@@ -511,7 +500,7 @@ yt-live-chat-text-message-renderer #message::before {
transform: translate(-50%, -50%) rotate(35deg);
}
-${this.form.showLargeEmoticonBg ? '' : `/* 适配隐藏大表情背景 For Hiding background of large emotes */
+${this.form.showLargeEmoticonBg ? '' : `/* 适配隐藏大表情背景 For hiding background of large emotes */
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
content: none;
}
@@ -520,15 +509,7 @@ yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
padding: 0;
}`}
-${common.EMOTICON_STYLE}
-
-${common.getReverseScrollStyle(this.form)}`
- },
- timeStyle() {
- return common.getTimeStyle(this.form)
- },
- backgroundStyle() {
- return `/* 背景色 Background colors */
+/* 背景色 Background colors */
body {
background-color: ${this.form.bgColor ?? 'transparent'};
}
@@ -547,75 +528,7 @@ yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
}`}`
},
scAndNewMemberStyle() {
- return `/* 付费、上舰消息 Super Chats / Membership messages */
-yt-live-chat-paid-message-renderer {
- margin: 4px 0;
-}
-
-${this.scAndNewMemberFontStyle}
-
-yt-live-chat-membership-item-renderer :is(#card, #header) {
- background-color: var(--membership-msg-bg-color);
- margin: 4px 0;
-}
-
-${this.scTickerStyle}
-
-${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
- display: none;
-}`}`
- },
- scAndNewMemberFontStyle() {
- let firstLineLineHeight = this.form.firstLineLineHeight || (this.form.firstLineFontSize * 1.2)
- return `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: ${common.fontsStrToCss(this.form.firstLineFont)};
- font-size: var(--paid-msg-line-1-size);
- line-height: calc(${firstLineLineHeight} * var(--font-base-size));
-}
-
-yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
- width: calc(${firstLineLineHeight} * var(--font-base-size));
- height: calc(${firstLineLineHeight} * var(--font-base-size));
-}
-
-yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
-yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
- font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
- font-size: var(--paid-msg-line-2-size);
- line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)} * var(--font-base-size));
-}
-
-yt-live-chat-paid-message-renderer :is(#content, #content *) {
- font-family: ${common.fontsStrToCss(this.form.scContentFont)};
- font-size: var(--paid-msg-content-size);
- line-height: calc(${this.form.scContentLineHeight || (this.form.scContentFontSize * 1.2)} * var(--font-base-size));
-}`
- },
- scTickerStyle() {
- if (!this.form.showScTicker) {
- return `yt-live-chat-ticker-renderer {
- display: none;
-}`
- } else {
- let secondLineLineHeight = this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)
- return `/* SC固定栏 Super Chat ticker */
-yt-live-chat-ticker-renderer #items {
- height: unset;
-}
-
-yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
- width: calc(${secondLineLineHeight} * var(--font-base-size));
- height: calc(${secondLineLineHeight} * var(--font-base-size));
-}
-
-yt-live-chat-ticker-paid-message-item-renderer #content {
- height: unset;
- font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
- font-size: var(--paid-msg-line-2-size);
- line-height: calc(${secondLineLineHeight} * var(--font-base-size));
-}`
- }
+ return common.getScAndNewMemberStyle(this.form)
},
animationStyle() {
return common.getAnimationStyle(this.form)
diff --git a/frontend/src/views/StyleGenerator/common.js b/frontend/src/views/StyleGenerator/common.js
index 213e14a..3f1b643 100644
--- a/frontend/src/views/StyleGenerator/common.js
+++ b/frontend/src/views/StyleGenerator/common.js
@@ -102,7 +102,16 @@ yt-live-chat-text-message-renderer #timestamp {
}
export function getUserNameStyle(config) {
- return `yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
+ return `/* 用户名 Channel names */
+yt-live-chat-text-message-renderer #author-name {
+ ${config.showUserNames ? '' : 'display: none;'}
+ color: var(--username-color);
+ font-family: ${fontsStrToCss(config.userNameFont)};
+ font-size: var(--username-size);
+ line-height: calc(${config.userNameLineHeight || (config.userNameFontSize * 1.2)} * var(--font-base-size));
+}
+
+yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
color: var(--username-color-owner);
}
@@ -123,7 +132,21 @@ yt-live-chat-text-message-renderer #chat-badges {
}`}`
}
-export const EMOTICON_STYLE = `yt-live-chat-text-message-renderer #message .emoji {
+export function getMessageStyle(config) {
+ return `/* 文本消息 Text messages */
+yt-live-chat-text-message-renderer :is(#message, #message *) {
+ color: var(--text-content-color);
+ font-family: ${fontsStrToCss(config.messageFont)};
+ font-size: var(--text-content-size);
+ line-height: calc(${config.messageLineHeight || (config.messageFontSize * 1.2)} * var(--font-base-size));
+}
+
+${EMOTICON_STYLE}
+
+${getReverseScrollStyle(config)}`
+}
+
+const EMOTICON_STYLE = `yt-live-chat-text-message-renderer #message .emoji {
width: auto;
height: var(--emote-size);
}
@@ -132,7 +155,7 @@ yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
height: var(--large-emote-size);
}`
-export function getReverseScrollStyle(config) {
+function getReverseScrollStyle(config) {
if (!config.messageReverseScroll) {
return ''
}
@@ -144,6 +167,79 @@ yt-live-chat-item-list-renderer #items > * {
}`
}
+export function getScAndNewMemberStyle(config) {
+ return `/* 付费、上舰消息 Super Chats / Membership messages */
+yt-live-chat-paid-message-renderer {
+ margin: 4px 0;
+}
+
+${getScAndNewMemberFontStyle(config)}
+
+yt-live-chat-membership-item-renderer :is(#card, #header) {
+ background-color: var(--membership-msg-bg-color);
+ margin: 4px 0;
+}
+
+${getScTickerStyle(config)}
+
+${config.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
+ display: none;
+}`}`
+}
+
+function getScAndNewMemberFontStyle(config) {
+ let firstLineLineHeight = config.firstLineLineHeight || (config.firstLineFontSize * 1.2)
+ return `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: ${fontsStrToCss(config.firstLineFont)};
+ font-size: var(--paid-msg-line-1-size);
+ line-height: calc(${firstLineLineHeight} * var(--font-base-size));
+}
+
+yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
+ width: calc(${firstLineLineHeight} * var(--font-base-size));
+ height: calc(${firstLineLineHeight} * var(--font-base-size));
+}
+
+yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
+yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
+ font-family: ${fontsStrToCss(config.secondLineFont)};
+ font-size: var(--paid-msg-line-2-size);
+ line-height: calc(${config.secondLineLineHeight || (config.secondLineFontSize * 1.2)} * var(--font-base-size));
+}
+
+yt-live-chat-paid-message-renderer :is(#content, #content *) {
+ font-family: ${fontsStrToCss(config.scContentFont)};
+ font-size: var(--paid-msg-content-size);
+ line-height: calc(${config.scContentLineHeight || (config.scContentFontSize * 1.2)} * var(--font-base-size));
+}`
+}
+
+function getScTickerStyle(config) {
+ if (!config.showScTicker) {
+ return `yt-live-chat-ticker-renderer {
+ display: none;
+}`
+ }
+ let secondLineLineHeight = config.secondLineLineHeight || (config.secondLineFontSize * 1.2)
+ return `/* SC固定栏 Super Chat ticker */
+yt-live-chat-ticker-renderer #items {
+ height: unset;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
+ width: calc(${secondLineLineHeight} * var(--font-base-size));
+ height: calc(${secondLineLineHeight} * var(--font-base-size));
+}
+
+yt-live-chat-ticker-paid-message-item-renderer #content {
+ height: unset;
+ font-family: ${fontsStrToCss(config.secondLineFont)};
+ font-size: var(--paid-msg-line-2-size);
+ line-height: calc(${secondLineLineHeight} * var(--font-base-size));
+}`
+}
+
export function getAnimationStyle(config) {
if (!config.animateIn && !config.animateOut) {
return ''
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 66554d5..e2843ab 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -10,18 +10,18 @@
-
+
{{ $t('stylegen.result') }}
-
-
-
{{ $t('stylegen.copy') }}
{{ $t('stylegen.editor') }}
- {{ $t('stylegen.resetConfig') }}
+ {{ $t('stylegen.resetConfig') }}
+
+
+