简化样式生成器代码

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'

frontend/src/lang/ja.js

@@ -174,7 +174,7 @@ export default {
     reverseSlide: '逆の滑る',
     playAnimation: 'アニメーションを再生する',
 
-    result: '結果',
+    result: '結果CSS',
     copy: 'コピー',
     editor: 'エディタ',
     resetConfig: 'デフォルトに戻す'

frontend/src/lang/zh.js

@@ -172,7 +172,7 @@ export default {
     reverseSlide: '反向滑动',
     playAnimation: '生成消息',
 
-    result: '结果',
+    result: '结果CSS',
     copy: '复制',
     editor: '编辑器',
     resetConfig: '恢复默认设置'

frontend/src/views/StyleGenerator/Legacy.vue

@@ -318,9 +318,6 @@
           </el-row>
           <el-divider></el-divider>
 
-          <el-form-item :label="$t('stylegen.showNewMemberBg')">
-            <el-switch v-model="form.showNewMemberBg"></el-switch>
-          </el-form-item>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
               <el-form-item :label="$t('stylegen.showScTicker')">
@@ -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 */
+      return `${common.getUserNameStyle(this.form)}
-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)}
 
 ${!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 */
+      return `${common.getMessageStyle(this.form)}
-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));
-}
 
 ${!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 */
+      return `${common.getScAndNewMemberStyle(this.form)}
-yt-live-chat-paid-message-renderer {
-  margin: 4px 0;
-}
 
-${this.scAndNewMemberFontStyle}
+yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
-
-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-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)

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 */
+      return common.getMessageStyle(this.form)
-yt-live-chat-text-message-renderer :is(#message, #message *) {
+    },
-  color: var(--text-content-color);
+    timeStyle() {
-  font-family: ${common.fontsStrToCss(this.form.messageFont)};
+      return common.getTimeStyle(this.form)
-  font-size: var(--text-content-size);
+    },
-  line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize * 1.2)} * var(--font-base-size));
+    backgroundStyle() {
-}
+      return `/* 气泡背景 Bubble background */
-
-/* 气泡背景 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}
+/* 背景色 Background colors */
-
-${common.getReverseScrollStyle(this.form)}`
-    },
-    timeStyle() {
-      return common.getTimeStyle(this.form)
-    },
-    backgroundStyle() {
-      return `/* 背景色 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 */
+      return common.getScAndNewMemberStyle(this.form)
-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));
-}`
-      }
     },
     animationStyle() {
       return common.getAnimationStyle(this.form)

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 ''

frontend/src/views/StyleGenerator/index.vue

@@ -10,18 +10,18 @@
         </el-tab-pane>
       </el-tabs>
 
-      <el-form label-width="150px" size="mini">
+      <el-form label-width="150px" label-position="top">
         <h3>{{ $t('stylegen.result') }}</h3>
         <el-card shadow="never">
-          <el-form-item label="CSS">
-            <el-input v-model="inputResult" ref="result" type="textarea" :rows="20"></el-input>
-          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="copyResult">{{ $t('stylegen.copy') }}</el-button>
             <a target="_blank" href="https://vscode.dev/">
               <el-button style="margin: 0 10px">{{ $t('stylegen.editor') }}</el-button>
             </a>
-            <el-button @click="resetConfig">{{ $t('stylegen.resetConfig') }}</el-button>
+            <el-button type="danger" @click="resetConfig" style="float: right">{{ $t('stylegen.resetConfig') }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="inputResult" ref="result" type="textarea" :rows="30"></el-input>
           </el-form-item>
         </el-card>
       </el-form>