样式生成器支持设置缩放比例、模糊描边

frontend/src/lang/en.js

@@ -102,10 +102,16 @@ export default {
     light: 'light',
     dark: 'dark',
 
+    global: 'Global',
+    scalingNotice: 'You should modify these options rather than scaling in OBS',
+    globalScale: 'Global scale',
+    fontScale: 'Font scale',
+
     outlines: 'Outlines',
     showOutlines: 'Show outlines',
     outlineSize: 'Outline size',
     outlineColor: 'Outline color',
+    blurryOutline: 'Blurry',
 
     avatars: 'Avatars',
     showAvatars: 'Show avatars',

frontend/src/lang/ja.js

@@ -99,13 +99,19 @@ export default {
     legacy: '古典',
     lineLike: 'LINE風',
 
-    light: '明るい',
+    light: 'ライト',
-    dark: '暗い',
+    dark: 'ダーク',
+
+    global: 'グローバル',
+    scalingNotice: 'OBSでスケーリングするのではなく、まずこちらを調整してください',
+    globalScale: '全体のスケール',
+    fontScale: 'フォントスケール',
 
     outlines: 'アウトライン',
     showOutlines: 'アウトラインを表示する',
     outlineSize: 'アウトラインのサイズ',
     outlineColor: 'アウトラインの色',
+    blurryOutline: 'ぼやけている',
 
     avatars: 'アイコン',
     showAvatars: 'アイコンを表示する',

frontend/src/lang/zh.js

@@ -97,13 +97,19 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
-    light: '亮色',
+    light: '浅色',
-    dark: '暗色',
+    dark: '深色',
+
+    global: '全局',
+    scalingNotice: '如果觉得字体太小，优先修改这里的比例而不是在OBS里拉伸浏览器源。求求你们不要拉伸然后问为什么看不清了😭',
+    globalScale: '全局比例',
+    fontScale: '字体比例',
 
     outlines: '描边',
     showOutlines: '显示描边',
     outlineSize: '描边尺寸',
     outlineColor: '描边颜色',
+    blurryOutline: '模糊',
 
     avatars: '头像',
     showAvatars: '显示头像',

frontend/src/views/StyleGenerator/Legacy.vue

@@ -2,6 +2,27 @@
   <el-card shadow="never">
     <el-form label-width="150px" size="mini">
       <el-collapse>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.global') }}</h3>
+          </template>
+          <p>
+            <el-alert :title="$t('stylegen.scalingNotice')" type="info" show-icon :closable="false"></el-alert>
+          </p>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.globalScale')">
+                <el-input v-model.number="form.globalScale" type="number" min="0" step="0.1"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.fontScale')">
+                <el-input v-model.number="form.fontScale" type="number" min="0" step="0.1"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+
         <el-collapse-item>
           <template slot="title">
             <h3>{{ $t('stylegen.outlines') }}</h3>
@@ -24,6 +45,11 @@
                 <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
               </el-form-item>
             </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.blurryOutline')">
+                <el-switch v-model="form.blurryOutline"></el-switch>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-collapse-item>
 
@@ -398,9 +424,13 @@ import * as common from './common'
 import { mergeConfig } from '@/utils'
 
 export const DEFAULT_CONFIG = {
+  globalScale: 1,
+  fontScale: 1,
+
   showOutlines: true,
   outlineSize: 2,
   outlineColor: '#000000',
+  blurryOutline: false,
 
   showAvatars: true,
   avatarSize: 24,
@@ -539,9 +569,13 @@ yt-live-chat-text-message-renderer {
         return ''
       }
       let shadow = []
-      for (let x = -this.form.outlineSize; x <= this.form.outlineSize; x += Math.ceil(this.form.outlineSize / 4)) {
+      if (this.form.blurryOutline) {
-        for (let y = -this.form.outlineSize; y <= this.form.outlineSize; y += Math.ceil(this.form.outlineSize / 4)) {
+        shadow.push(`0 0 ${this.form.outlineSize}px var(--outline-color)`)
-          shadow.push(`${x}px ${y}px var(--outline-color)`)
+      } else {
+        for (let x = -this.form.outlineSize; x <= this.form.outlineSize; x += Math.ceil(this.form.outlineSize / 4)) {
+          for (let y = -this.form.outlineSize; y <= this.form.outlineSize; y += Math.ceil(this.form.outlineSize / 4)) {
+            shadow.push(`${x}px ${y}px var(--outline-color)`)
+          }
         }
       }
       return `/* 描边 Outlines */

frontend/src/views/StyleGenerator/LineLike.vue

@@ -2,6 +2,27 @@
   <el-card shadow="never">
     <el-form label-width="150px" size="mini">
       <el-collapse>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.global') }}</h3>
+          </template>
+          <p>
+            <el-alert :title="$t('stylegen.scalingNotice')" type="info" show-icon :closable="false"></el-alert>
+          </p>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.globalScale')">
+                <el-input v-model.number="form.globalScale" type="number" min="0" step="0.1"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.fontScale')">
+                <el-input v-model.number="form.fontScale" type="number" min="0" step="0.1"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+
         <el-collapse-item>
           <template slot="title">
             <h3>{{ $t('stylegen.avatars') }}</h3>
@@ -348,6 +369,9 @@ import * as common from './common'
 import { mergeConfig } from '@/utils'
 
 export const DEFAULT_CONFIG = {
+  globalScale: 1,
+  fontScale: 1,
+
   showAvatars: true,
   avatarSize: 40,
 

frontend/src/views/StyleGenerator/common.js

@@ -46,8 +46,8 @@ export function getImportStyle(allFontsStrs) {
 
 export function getVariableStyle(config) {
   return `/* 基准尺寸，用于整体缩放 Base size for scaling */
-  --base-size: 1px;
+  --base-size: ${config.globalScale}px;
-  --font-base-size: calc(1 * var(--base-size));
+  --font-base-size: calc(${config.fontScale} * var(--base-size));
 
   /* 没有首选字体时的备用字体 Fallback font families */
   --fallback-fonts: ${FALLBACK_FONTS_CSS};