样式生成器去掉行高选项

frontend/src/lang/en.js

@@ -120,7 +120,6 @@ export default {
     networkFonts: 'Network fonts',
     localFonts: 'Local fonts',
     fontSize: 'Font size',
-    lineHeight: 'Line height (0 for default)',
     normalColor: 'Normal color',
     ownerColor: 'Owner color',
     moderatorColor: 'Moderator color',
@@ -150,15 +149,12 @@ export default {
     scAndNewMember: 'Super Chat / New Member',
     firstLineFont: 'First line font',
     firstLineFontSize: 'First line font size',
-    firstLineLineHeight: 'First line line height (0 for default)',
     firstLineColor: 'First line color',
     secondLineFont: 'Second line font',
     secondLineFontSize: 'Second line font size',
-    secondLineLineHeight: 'Second line line height (0 for default)',
     secondLineColor: 'Second line color',
     scContentLineFont: 'Super Chat content font',
     scContentLineFontSize: 'Super Chat content font size',
-    scContentLineLineHeight: 'Super Chat content line height (0 for default)',
     scContentLineColor: 'Super Chat content color',
     showNewMemberBg: 'Show new member background',
     showScTicker: 'Show Super Chat ticker',

frontend/src/lang/ja.js

@@ -120,7 +120,6 @@ export default {
     networkFonts: 'ネットワークフォント',
     localFonts: 'ローカルフォント',
     fontSize: 'フォントサイズ',
-    lineHeight: '行の高さ（0はデフォルト）',
     normalColor: 'ノーマルの色',
     ownerColor: 'オーナーの色',
     moderatorColor: '管理者の色',
@@ -150,15 +149,12 @@ export default {
     scAndNewMember: 'スーパーチャット、新メンバー',
     firstLineFont: '1行目のフォント',
     firstLineFontSize: '1行目のフォントサイズ',
-    firstLineLineHeight: '1行目の高さ（0はデフォルト）',
     firstLineColor: '1行目の色',
     secondLineFont: '2行目のフォント',
     secondLineFontSize: '2行目のフォントサイズ',
-    secondLineLineHeight: '2行目の高さ（0はデフォルト）',
     secondLineColor: '2行目の色',
     scContentLineFont: 'スーパーチャットのコンテンツフォント',
     scContentLineFontSize: 'スーパーチャットコンテンツフォントサイズ',
-    scContentLineLineHeight: 'スーパーチャットコンテンツライン高さ（0がデフォルト）',
     scContentLineColor: 'スーパーチャットコンテンツライン色',
     showNewMemberBg: '新メンバーの背景を表示する',
     showScTicker: 'スーパーチャットチカーの表示',

frontend/src/lang/zh.js

@@ -118,7 +118,6 @@ export default {
     networkFonts: '网络字体',
     localFonts: '本地字体',
     fontSize: '字体尺寸',
-    lineHeight: '行高（0为默认）',
     normalColor: '普通颜色',
     ownerColor: '主播颜色',
     moderatorColor: '房管颜色',
@@ -148,15 +147,12 @@ export default {
     scAndNewMember: '打赏、舰长',
     firstLineFont: '第一行字体',
     firstLineFontSize: '第一行字体尺寸',
-    firstLineLineHeight: '第一行行高（0为默认）',
     firstLineColor: '第一行颜色',
     secondLineFont: '第二行字体',
     secondLineFontSize: '第二行字体尺寸',
-    secondLineLineHeight: '第二行行高（0为默认）',
     secondLineColor: '第二行颜色',
     scContentLineFont: 'Super Chat内容字体',
     scContentLineFontSize: 'Super Chat内容字体尺寸',
-    scContentLineLineHeight: 'Super Chat内容行高（0为默认）',
     scContentLineColor: 'Super Chat内容颜色',
     showNewMemberBg: '显示新舰长背景',
     showScTicker: '显示Super Chat固定栏',

frontend/src/views/StyleGenerator/Legacy.vue

@@ -18,9 +18,13 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-form-item :label="$t('stylegen.outlineSize')">
-            <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.outlineSize')">
+                <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-collapse-item>
 
         <el-collapse-item>
@@ -63,11 +67,6 @@
                 <el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -129,11 +128,6 @@
                 <el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -186,11 +180,6 @@
                 <el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
         </el-collapse-item>
 
@@ -258,11 +247,6 @@
                 <el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.firstLineLineHeight')">
-                <el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -284,11 +268,6 @@
                 <el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.secondLineLineHeight')">
-                <el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -310,11 +289,6 @@
                 <el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.scContentLineLineHeight')">
-                <el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -360,9 +334,13 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-form-item :label="$t('stylegen.animateOutWaitTime')">
-            <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.animateOutWaitTime')">
+                <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
               <el-form-item :label="$t('stylegen.slide')">
@@ -399,7 +377,6 @@ export const DEFAULT_CONFIG = {
   showUserNames: true,
   userNameFont: 'Imprima,Noto Sans SC',
   userNameFontSize: 20,
-  userNameLineHeight: 0,
   userNameColor: '#cccccc',
   ownerUserNameColor: '#ffd600',
   moderatorUserNameColor: '#5e84f1',
@@ -409,7 +386,6 @@ export const DEFAULT_CONFIG = {
 
   messageFont: 'Imprima,Noto Sans SC',
   messageFontSize: 20,
-  messageLineHeight: 0,
   messageColor: '#ffffff',
   messageOnNewLine: false,
   messageReverseScroll: false,
@@ -419,7 +395,6 @@ export const DEFAULT_CONFIG = {
   showTime: false,
   timeFont: 'Imprima,Noto Sans SC',
   timeFontSize: 20,
-  timeLineHeight: 0,
   timeColor: '#999999',
 
   bgColor: 'rgba(0, 0, 0, 0)',
@@ -431,15 +406,12 @@ export const DEFAULT_CONFIG = {
 
   firstLineFont: 'Imprima,Noto Sans SC',
   firstLineFontSize: 22,
-  firstLineLineHeight: 0,
   firstLineColor: '#ffffff',
   secondLineFont: 'Imprima,Noto Sans SC',
   secondLineFontSize: 20,
-  secondLineLineHeight: 0,
   secondLineColor: '#ffffff',
   scContentFont: 'Imprima,Noto Sans SC',
   scContentFontSize: 20,
-  scContentLineHeight: 0,
   scContentColor: '#ffffff',
   showScTicker: false,
   showOtherThings: true,

frontend/src/views/StyleGenerator/LineLike.vue

@@ -42,11 +42,6 @@
                 <el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -103,11 +98,6 @@
                 <el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -155,11 +145,6 @@
                 <el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.lineHeight')">
-                <el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
         </el-collapse-item>
 
@@ -222,11 +207,6 @@
                 <el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.firstLineLineHeight')">
-                <el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -243,11 +223,6 @@
                 <el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.secondLineLineHeight')">
-                <el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -264,11 +239,6 @@
                 <el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12">
-              <el-form-item :label="$t('stylegen.scContentLineLineHeight')">
-                <el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -314,9 +284,13 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-form-item :label="$t('stylegen.animateOutWaitTime')">
-            <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.animateOutWaitTime')">
+                <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
               <el-form-item :label="$t('stylegen.slide')">
@@ -349,7 +323,6 @@ export const DEFAULT_CONFIG = {
   showUserNames: true,
   userNameFont: 'Noto Sans SC',
   userNameFontSize: 18,
-  userNameLineHeight: 0,
   userNameColor: '#cccccc',
   ownerUserNameColor: '#ffd600',
   moderatorUserNameColor: '#5e84f1',
@@ -358,7 +331,6 @@ export const DEFAULT_CONFIG = {
 
   messageFont: 'Noto Sans SC',
   messageFontSize: 20,
-  messageLineHeight: 0,
   messageColor: '#000000',
   emoticonSize: 24,
   largeEmoticonSize: 60,
@@ -367,7 +339,6 @@ export const DEFAULT_CONFIG = {
   showTime: false,
   timeFont: 'Noto Sans SC',
   timeFontSize: 18,
-  timeLineHeight: 0,
   timeColor: '#999999',
 
   bgColor: 'rgba(0, 0, 0, 0)',
@@ -379,13 +350,10 @@ export const DEFAULT_CONFIG = {
 
   firstLineFont: 'Noto Sans SC',
   firstLineFontSize: 22,
-  firstLineLineHeight: 0,
   secondLineFont: 'Noto Sans SC',
   secondLineFontSize: 20,
-  secondLineLineHeight: 0,
   scContentFont: 'Noto Sans SC',
   scContentFontSize: 20,
-  scContentLineHeight: 0,
   showScTicker: false,
   showOtherThings: true,
 

frontend/src/views/StyleGenerator/common.js

@@ -14,6 +14,13 @@ yt-live-chat-author-chip #author-name {
 body,
 yt-live-chat-item-list-renderer #item-scroller {
   overflow: hidden;
+}
+
+/* 通用规则 Common rules */
+yt-live-chat-renderer * {
+  font-size: var(--font-size);
+  --line-height: calc(var(--font-size) * 1.2);
+  line-height: var(--line-height);
 }`
 
 export function getImportStyle(allFontsStrs) {
@@ -96,8 +103,7 @@ yt-live-chat-text-message-renderer #timestamp {
   display: inline;
   color: var(--time-color);
   font-family: ${fontsStrToCss(config.timeFont)};
-  font-size: var(--time-size);
-  line-height: calc(${config.timeLineHeight || (config.timeFontSize * 1.2)} * var(--font-base-size));
+  --font-size: var(--time-size);
 }`
 }
 
@@ -107,8 +113,7 @@ 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));
+  --font-size: var(--username-size);
 }
 
 yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
@@ -124,8 +129,9 @@ yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-r
 }
 
 ${config.showBadges ? `yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
-  width: calc(${config.userNameLineHeight || (config.userNameFontSize * 1.2)} * var(--font-base-size));
-  height: calc(${config.userNameLineHeight || (config.userNameFontSize * 1.2)} * var(--font-base-size));
+  --font-size: var(--username-size);
+  width: var(--line-height);
+  height: var(--line-height);
 }` : `/* 隐藏勋章 Hide badges */
 yt-live-chat-text-message-renderer #chat-badges {
   display: none;
@@ -137,8 +143,7 @@ export function getMessageStyle(config) {
 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));
+  --font-size: var(--text-content-size);
 }
 
 ${EMOTICON_STYLE}
@@ -188,30 +193,26 @@ ${config.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
 }
 
 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));
+  --font-size: var(--paid-msg-line-1-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));
+  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: ${fontsStrToCss(config.secondLineFont)};
-  font-size: var(--paid-msg-line-2-size);
-  line-height: calc(${config.secondLineLineHeight || (config.secondLineFontSize * 1.2)} * var(--font-base-size));
+  --font-size: var(--paid-msg-line-2-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));
+  --font-size: var(--paid-msg-content-size);
 }`
 }
 
@@ -221,22 +222,20 @@ function getScTickerStyle(config) {
   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));
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 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));
+  --font-size: var(--paid-msg-line-2-size);
 }`
 }