样式生成器预览可选明亮背景

frontend/src/lang/en.js

@@ -50,6 +50,9 @@ export default {
     legacy: 'Classic',
     lineLike: 'Line-like',
 
+    light: 'light',
+    dark: 'dark',
+
     outlines: 'Outlines',
     showOutlines: 'Show outlines',
     outlineSize: 'Outline size',

frontend/src/lang/ja.js

@@ -50,6 +50,9 @@ export default {
     legacy: '古典',
     lineLike: 'Line風',
 
+    light: '明るい',
+    dark: '暗い',
+
     outlines: 'アウトライン',
     showOutlines: 'アウトラインを表示する',
     outlineSize: 'アウトラインのサイズ',

frontend/src/lang/zh.js

@@ -50,6 +50,9 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
+    light: '明亮',
+    dark: '黑暗',
+
     outlines: '描边',
     showOutlines: '显示描边',
     outlineSize: '描边尺寸',

frontend/src/views/StyleGenerator/common.js

@@ -85,13 +85,13 @@ yt-live-chat-membership-item-renderer #author-photo img {
 
 export function getTimeStyle (config) {
   return `/* Timestamps */
-  yt-live-chat-text-message-renderer #timestamp {
-    display: ${config.showTime ? 'inline' : 'none'} !important;
-    ${config.timeColor ? `color: ${config.timeColor} !important;` : ''}
-    font-family: "${cssEscapeStr(config.timeFont)}"${FALLBACK_FONTS};
-    font-size: ${config.timeFontSize}px !important;
-    line-height: ${config.timeLineHeight || config.timeFontSize}px !important;
-  }`
+yt-live-chat-text-message-renderer #timestamp {
+  display: ${config.showTime ? 'inline' : 'none'} !important;
+  ${config.timeColor ? `color: ${config.timeColor} !important;` : ''}
+  font-family: "${cssEscapeStr(config.timeFont)}"${FALLBACK_FONTS};
+  font-size: ${config.timeFontSize}px !important;
+  line-height: ${config.timeLineHeight || config.timeFontSize}px !important;
+}`
 }
 
 export function getAnimationStyle (config) {
@@ -131,8 +131,8 @@ ${keyframes.join('\n')}
 yt-live-chat-text-message-renderer,
 yt-live-chat-membership-item-renderer,
 yt-live-chat-paid-message-renderer {
-animation: anim ${totalTime}ms;
-animation-fill-mode: both;
+  animation: anim ${totalTime}ms;
+  animation-fill-mode: both;
 }`
 }
 

frontend/src/views/StyleGenerator/index.vue

@@ -25,9 +25,14 @@
     </el-col>
 
     <el-col :sm="24" :md="8">
-      <div id="example-container" :style="{top: `${exampleTop}px`}">
-        <div id="fakebody">
-          <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
+      <div :style="{position: 'relative', top: `${exampleTop}px`}">
+        <p>
+          <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
+        </p>
+        <div id="example-container" :class="{light: exampleBgLight}">
+          <div id="fakebody">
+            <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
+          </div>
         </div>
       </div>
     </el-col>
@@ -151,7 +156,8 @@ export default {
       // 防抖后延迟变化的结果
       debounceResult: '',
 
-      exampleTop: 0
+      exampleTop: 0,
+      exampleBgLight: false
     }
   },
   computed: {
@@ -209,8 +215,7 @@ export default {
 
 <style scoped>
 #example-container {
-  position: relative;
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
 
   background-color: #444;
   background-image:
@@ -236,6 +241,20 @@ export default {
   overflow: hidden;
 }
 
+#example-container.light {
+  background-color: #ddd;
+  background-image:
+    -moz-linear-gradient(45deg, #eee 25%, transparent 25%),
+    -moz-linear-gradient(-45deg, #eee 25%, transparent 25%),
+    -moz-linear-gradient(45deg, transparent 75%, #eee 75%),
+    -moz-linear-gradient(-45deg, transparent 75%, #eee 75%);
+  background-image:
+    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #eee), color-stop(.25, transparent)),
+    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #eee), color-stop(.25, transparent)),
+    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #eee)),
+    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #eee));
+}
+
 #fakebody {
   outline: 1px #999 dashed;
   height: 100%;