样式生成器支持设置字体粗细

frontend/src/lang/en.js

@@ -120,6 +120,7 @@ export default {
     networkFonts: 'Network fonts',
     localFonts: 'Local fonts',
     fontSize: 'Font size',
+    fontWeight: 'Font weight',
     normalColor: 'Normal color',
     ownerColor: 'Owner color',
     moderatorColor: 'Moderator color',
@@ -149,12 +150,15 @@ export default {
     scAndNewMember: 'Super Chat / New Member',
     firstLineFont: 'First line font',
     firstLineFontSize: 'First line font size',
+    firstLineWeight: 'First line font weight',
     firstLineColor: 'First line color',
     secondLineFont: 'Second line font',
     secondLineFontSize: 'Second line font size',
+    secondLineWeight: 'Second line font weight',
     secondLineColor: 'Second line color',
     scContentLineFont: 'Super Chat content font',
     scContentLineFontSize: 'Super Chat content font size',
+    scContentWeight: 'Super Chat content font weight',
     scContentLineColor: 'Super Chat content color',
     showNewMemberBg: 'Show new member background',
     showScTicker: 'Show Super Chat ticker',

frontend/src/lang/ja.js

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

frontend/src/lang/zh.js

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

frontend/src/views/StyleGenerator/FontWeightSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-select :value="value" @input="val => $emit('input', val)">
+    <el-option label="100 Thin" :value="100"></el-option>
+    <el-option label="200 ExtraLight" :value="200"></el-option>
+    <el-option label="300 Light" :value="300"></el-option>
+    <el-option label="400 Regular" :value="400"></el-option>
+    <el-option label="500 Medium" :value="500"></el-option>
+    <el-option label="600 SemiBold" :value="600"></el-option>
+    <el-option label="700 Bold" :value="700"></el-option>
+    <el-option label="800 ExtraBold" :value="800"></el-option>
+    <el-option label="900 Black" :value="900"></el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'FontWeightSelect',
+  props: {
+    value: Number
+  },
+}
+</script>
+
+<style scoped>
+.el-select {
+  width: 100%;
+}
+</style>

frontend/src/views/StyleGenerator/Legacy.vue

@@ -67,6 +67,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.userNameWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -128,6 +133,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.messageWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -180,6 +190,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.timeWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-collapse-item>
 
@@ -247,6 +262,11 @@
                 <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.firstLineWeight')">
+                <font-weight-select v-model="form.firstLineWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -268,6 +288,11 @@
                 <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.secondLineWeight')">
+                <font-weight-select v-model="form.secondLineWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -289,6 +314,11 @@
                 <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.scContentWeight')">
+                <font-weight-select v-model="form.scContentWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -363,6 +393,7 @@
 import _ from 'lodash'
 
 import FontSelect from './FontSelect'
+import FontWeightSelect from './FontWeightSelect'
 import * as common from './common'
 import { mergeConfig } from '@/utils'
 
@@ -377,6 +408,7 @@ export const DEFAULT_CONFIG = {
   showUserNames: true,
   userNameFont: 'Imprima,Noto Sans SC',
   userNameFontSize: 20,
+  userNameWeight: 700,
   userNameColor: '#cccccc',
   ownerUserNameColor: '#ffd600',
   moderatorUserNameColor: '#5e84f1',
@@ -386,6 +418,7 @@ export const DEFAULT_CONFIG = {
 
   messageFont: 'Imprima,Noto Sans SC',
   messageFontSize: 20,
+  messageWeight: 700,
   messageColor: '#ffffff',
   messageOnNewLine: false,
   messageReverseScroll: false,
@@ -395,6 +428,7 @@ export const DEFAULT_CONFIG = {
   showTime: false,
   timeFont: 'Imprima,Noto Sans SC',
   timeFontSize: 20,
+  timeWeight: 400,
   timeColor: '#999999',
 
   bgColor: 'rgba(0, 0, 0, 0)',
@@ -406,12 +440,15 @@ export const DEFAULT_CONFIG = {
 
   firstLineFont: 'Imprima,Noto Sans SC',
   firstLineFontSize: 22,
+  firstLineWeight: 700,
   firstLineColor: '#ffffff',
   secondLineFont: 'Imprima,Noto Sans SC',
   secondLineFontSize: 20,
+  secondLineWeight: 700,
   secondLineColor: '#ffffff',
   scContentFont: 'Imprima,Noto Sans SC',
   scContentFontSize: 20,
+  scContentWeight: 700,
   scContentColor: '#ffffff',
   showScTicker: false,
   showOtherThings: true,
@@ -428,7 +465,7 @@ export const DEFAULT_CONFIG = {
 export default {
   name: 'Legacy',
   components: {
-    FontSelect
+    FontSelect, FontWeightSelect
   },
   props: {
     value: String
@@ -481,10 +518,13 @@ export default {
   /* 付费、上舰消息 Super Chats / Membership messages */
   --paid-msg-line-1-color: ${this.form.firstLineColor ?? '#ffffff'};
   --paid-msg-line-1-size: calc(${this.form.firstLineFontSize} * var(--font-base-size));
+  --paid-msg-line-1-weight: ${this.form.firstLineWeight};
   --paid-msg-line-2-color: ${this.form.secondLineColor ?? '#ffffff'};
   --paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
+  --paid-msg-line-2-weight: ${this.form.secondLineWeight};
   --paid-msg-content-color: ${this.form.scContentColor ?? '#ffffff'};
   --paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
+  --paid-msg-content-weight: ${this.form.scContentWeight};
   --membership-msg-bg-color: var(--username-color-member);
 }`
     },

frontend/src/views/StyleGenerator/LineLike.vue

@@ -42,6 +42,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.userNameWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -98,6 +103,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.messageWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
@@ -145,6 +155,11 @@
                 <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.fontWeight')">
+                <font-weight-select v-model="form.timeWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-collapse-item>
 
@@ -207,6 +222,11 @@
                 <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.firstLineWeight')">
+                <font-weight-select v-model="form.firstLineWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -223,6 +243,11 @@
                 <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.secondLineWeight')">
+                <font-weight-select v-model="form.secondLineWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -239,6 +264,11 @@
                 <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.scContentWeight')">
+                <font-weight-select v-model="form.scContentWeight"></font-weight-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-divider></el-divider>
 
@@ -313,6 +343,7 @@
 import _ from 'lodash'
 
 import FontSelect from './FontSelect'
+import FontWeightSelect from './FontWeightSelect'
 import * as common from './common'
 import { mergeConfig } from '@/utils'
 
@@ -323,6 +354,7 @@ export const DEFAULT_CONFIG = {
   showUserNames: true,
   userNameFont: 'Noto Sans SC',
   userNameFontSize: 18,
+  userNameWeight: 700,
   userNameColor: '#cccccc',
   ownerUserNameColor: '#ffd600',
   moderatorUserNameColor: '#5e84f1',
@@ -331,6 +363,7 @@ export const DEFAULT_CONFIG = {
 
   messageFont: 'Noto Sans SC',
   messageFontSize: 20,
+  messageWeight: 700,
   messageColor: '#000000',
   emoticonSize: 24,
   largeEmoticonSize: 60,
@@ -339,6 +372,7 @@ export const DEFAULT_CONFIG = {
   showTime: false,
   timeFont: 'Noto Sans SC',
   timeFontSize: 18,
+  timeWeight: 400,
   timeColor: '#999999',
 
   bgColor: 'rgba(0, 0, 0, 0)',
@@ -350,10 +384,13 @@ export const DEFAULT_CONFIG = {
 
   firstLineFont: 'Noto Sans SC',
   firstLineFontSize: 22,
+  firstLineWeight: 700,
   secondLineFont: 'Noto Sans SC',
   secondLineFontSize: 20,
+  secondLineWeight: 700,
   scContentFont: 'Noto Sans SC',
   scContentFontSize: 20,
+  scContentWeight: 700,
   showScTicker: false,
   showOtherThings: true,
 
@@ -369,7 +406,7 @@ export const DEFAULT_CONFIG = {
 export default {
   name: 'LineLike',
   components: {
-    FontSelect
+    FontSelect, FontWeightSelect
   },
   props: {
     value: String
@@ -417,8 +454,11 @@ export default {
 
   /* 付费、上舰消息 Super Chats / Membership messages */
   --paid-msg-line-1-size: calc(${this.form.firstLineFontSize} * var(--font-base-size));
+  --paid-msg-line-1-weight: ${this.form.firstLineWeight};
   --paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
+  --paid-msg-line-2-weight: ${this.form.secondLineWeight};
   --paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
+  --paid-msg-content-weight: ${this.form.scContentWeight};
   --membership-msg-bg-color: var(--username-color-member);
 }`
     },

frontend/src/views/StyleGenerator/common.js

@@ -58,6 +58,7 @@ export function getVariableStyle(config) {
   /* 时间 Timestamps */
   --time-color: ${config.timeColor ?? '#999999'};
   --time-size: calc(${config.timeFontSize} * var(--font-base-size));
+  --time-weight: ${config.timeWeight};
 
   /* 用户名 Channel names
     普通、舰长、房管、主播 */
@@ -66,10 +67,12 @@ export function getVariableStyle(config) {
   --username-color-moderator: ${config.moderatorUserNameColor ?? 'var(--username-color)'};
   --username-color-owner: ${config.ownerUserNameColor ?? 'var(--username-color)'};
   --username-size: calc(${config.userNameFontSize} * var(--font-base-size));
+  --username-weight: ${config.userNameWeight};
 
   /* 文本消息 Text messages */
   --text-content-color: ${config.messageColor ?? '#111111'};
   --text-content-size: calc(${config.messageFontSize} * var(--font-base-size));
+  --text-content-weight: ${config.messageWeight};
 
   /* 表情 Emotes */
   --emote-size: calc(${config.emoticonSize} * var(--font-base-size));
@@ -104,6 +107,7 @@ yt-live-chat-text-message-renderer #timestamp {
   color: var(--time-color);
   font-family: ${fontsStrToCss(config.timeFont)};
   --font-size: var(--time-size);
+  font-weight: var(--time-weight);
 }`
 }
 
@@ -114,6 +118,7 @@ yt-live-chat-text-message-renderer #author-name {
   color: var(--username-color);
   font-family: ${fontsStrToCss(config.userNameFont)};
   --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"] {
@@ -144,6 +149,7 @@ 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);
+  font-weight: var(--text-content-weight);
 }
 
 ${EMOTICON_STYLE}
@@ -197,6 +203,7 @@ function getScAndNewMemberFontStyle(config) {
 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);
+  font-weight: var(--paid-msg-line-1-weight);
 }
 
 yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
@@ -208,11 +215,13 @@ 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);
+  font-weight: var(--paid-msg-line-2-weight);
 }
 
 yt-live-chat-paid-message-renderer :is(#content, #content *) {
   font-family: ${fontsStrToCss(config.scContentFont)};
   --font-size: var(--paid-msg-content-size);
+  font-weight: var(--paid-msg-content-weight);
 }`
 }
 
@@ -223,19 +232,20 @@ function getScTickerStyle(config) {
 }`
   }
   return `/* SC固定栏 Super Chat ticker */
-yt-live-chat-ticker-renderer #items {
+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 #content {
-  height: unset;
+yt-live-chat-ticker-paid-message-item-renderer #text {
   font-family: ${fontsStrToCss(config.secondLineFont)};
   --font-size: var(--paid-msg-line-2-size);
+  font-weight: var(--paid-msg-line-2-weight);
 }`
 }