From 4601ee328c979961fc05e9fa8986e45e1a2ec550 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Mon, 15 Mar 2021 23:13:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=94=9F=E6=88=90=E5=99=A8?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8F=AF=E9=80=89=E6=98=8E=E4=BA=AE=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                     |  3 ++
 frontend/src/lang/ja.js                     |  3 ++
 frontend/src/lang/zh.js                     |  3 ++
 frontend/src/views/StyleGenerator/common.js | 18 ++++++------
 frontend/src/views/StyleGenerator/index.vue | 31 +++++++++++++++++----
 5 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 35adec9..c66a8e8 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
index fa11ec9..b8a3adf 100644
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -50,6 +50,9 @@ export default {
     legacy: '古典',
     lineLike: 'Line風',
 
+    light: '明るい',
+    dark: '暗い',
+
     outlines: 'アウトライン',
     showOutlines: 'アウトラインを表示する',
     outlineSize: 'アウトラインのサイズ',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index c0a781f..5253f8a 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -50,6 +50,9 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
+    light: '明亮',
+    dark: '黑暗',
+
     outlines: '描边',
     showOutlines: '显示描边',
     outlineSize: '描边尺寸',
diff --git a/frontend/src/views/StyleGenerator/common.js b/frontend/src/views/StyleGenerator/common.js
index 05e389a..8beb447 100644
--- a/frontend/src/views/StyleGenerator/common.js
+++ b/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;
 }`
 }
 
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 5586cb9..1095055 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/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%;