优化样式

frontend/src/lang/en.js

@@ -70,7 +70,7 @@ export default {
   },
   stylegen: {
     legacy: 'Classic',
-    lineLike: 'Line-like',
+    lineLike: 'LINE-like',
 
     light: 'light',
     dark: 'dark',

frontend/src/lang/ja.js

@@ -70,7 +70,7 @@ export default {
   },
   stylegen: {
     legacy: '古典',
-    lineLike: 'Line風',
+    lineLike: 'LINE風',
 
     light: '明るい',
     dark: '暗い',

frontend/src/views/StyleGenerator/LineLike.vue

@@ -447,7 +447,7 @@ yt-live-chat-text-message-renderer #author-name {
   ${this.form.userNameColor ? `color: ${this.form.userNameColor} !important;` : ''}
   font-family: "${common.cssEscapeStr(this.form.userNameFont)}"${common.FALLBACK_FONTS};
   font-size: ${this.form.userNameFontSize}px !important;
-  line-height: ${this.form.userNameLineHeight || this.form.userNameFontSize}px !important;
+  line-height: ${this.form.userNameLineHeight || (this.form.userNameFontSize + 2)}px !important;
 }
 
 /* Hide badges */
@@ -463,14 +463,16 @@ yt-live-chat-text-message-renderer #message * {
   ${this.form.messageColor ? `color: ${this.form.messageColor} !important;` : ''}
   font-family: "${common.cssEscapeStr(this.form.messageFont)}"${common.FALLBACK_FONTS};
   font-size: ${this.form.messageFontSize}px !important;
-  line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
+  line-height: ${this.form.messageLineHeight || (this.form.messageFontSize + 2)}px !important;
 }
 
 yt-live-chat-text-message-renderer #message {
   display: block !important;
+  position: relative;
+  width: fit-content;
   overflow: visible !important;
-  padding: 20px;
+  padding: 15px;
-  border-radius: 30px;
+  border-radius: 24px;
 }
 
 yt-live-chat-text-message-renderer #message .emoji {
@@ -487,8 +489,8 @@ yt-live-chat-text-message-renderer #message::before {
   content: "";
   display: inline-block;
   position: absolute;
-  top: ${this.form.showUserNames ? (this.form.userNameLineHeight || this.form.userNameFontSize) + 10 : 20}px;
+  top: -3px;
-  left: ${this.form.showAvatars ? this.form.avatarSize + (this.form.avatarSize / 4) - 8 : -8}px;
+  left: -10px;
   border: 8px solid transparent;
   border-right: 18px solid;
   transform: rotate(35deg);
@@ -538,7 +540,7 @@ yt-live-chat-membership-item-renderer #header-content-inner-column,
 yt-live-chat-membership-item-renderer #header-content-inner-column * {
   font-family: "${common.cssEscapeStr(this.form.firstLineFont)}"${common.FALLBACK_FONTS};
   font-size: ${this.form.firstLineFontSize}px !important;
-  line-height: ${this.form.firstLineLineHeight || this.form.firstLineFontSize}px !important;
+  line-height: ${this.form.firstLineLineHeight || (this.form.firstLineFontSize + 2)}px !important;
 }
 
 yt-live-chat-paid-message-renderer #purchase-amount,
@@ -547,14 +549,14 @@ yt-live-chat-membership-item-renderer #header-subtext,
 yt-live-chat-membership-item-renderer #header-subtext * {
   font-family: "${common.cssEscapeStr(this.form.secondLineFont)}"${common.FALLBACK_FONTS};
   font-size: ${this.form.secondLineFontSize}px !important;
-  line-height: ${this.form.secondLineLineHeight || this.form.secondLineFontSize}px !important;
+  line-height: ${this.form.secondLineLineHeight || (this.form.secondLineFontSize + 2)}px !important;
 }
 
 yt-live-chat-paid-message-renderer #content,
 yt-live-chat-paid-message-renderer #content * {
   font-family: "${common.cssEscapeStr(this.form.scContentFont)}"${common.FALLBACK_FONTS};
   font-size: ${this.form.scContentFontSize}px !important;
-  line-height: ${this.form.scContentLineHeight || this.form.scContentFontSize}px !important;
+  line-height: ${this.form.scContentLineHeight || (this.form.scContentFontSize + 2)}px !important;
 }`
     },
     showNewMemberBgStyle() {

frontend/src/views/StyleGenerator/index.vue

@@ -25,7 +25,7 @@
     </el-col>
 
     <el-col :sm="24" :md="8">
-      <div :style="{ position: 'relative', top: `${exampleTop}px` }">
+      <div id="example-panel">
         <el-form inline style="line-height: 40px">
           <el-form-item :label="$t('stylegen.playAnimation')" style="margin: 0">
             <el-switch v-model="playAnimation" @change="setExampleRoomClientStart"></el-switch>
@@ -69,7 +69,6 @@ export default {
       // 防抖后延迟变化的结果
       debounceResult: '',
 
-      exampleTop: 0,
       playAnimation: true,
       exampleBgLight: false
     }
@@ -94,21 +93,8 @@ export default {
   },
   mounted() {
     this.debounceResult = this.inputResult = this.subComponentResult
-
-    this.$parent.$el.addEventListener('scroll', this.onParentScroll)
-  },
-  beforeDestroy() {
-    this.$parent.$el.removeEventListener('scroll', this.onParentScroll)
   },
   methods: {
-    onParentScroll(event) {
-      if (document.body.clientWidth <= 992) {
-        this.exampleTop = 0
-      } else {
-        this.exampleTop = event.target.scrollTop
-      }
-    },
-
     onExampleRoomLoad() {
       this.setExampleRoomCustomCss(this.debounceResult)
       this.setExampleRoomClientStart(this.playAnimation)
@@ -137,6 +123,13 @@ export default {
 </script>
 
 <style scoped>
+@media only screen and (min-width: 992px) {
+  #example-panel {
+    position: fixed;
+    width: calc((100vw - 230px - 40px) / 3 - 20px);
+  }
+}
+
 #example-container {
   height: calc(100vh - 150px);