简化样式生成器生成的CSS

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blivechat",
-  "version": "1.10.2",
+  "version": "1.10.3-dev",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

frontend/src/views/StyleGenerator/Legacy.vue

@@ -472,28 +472,22 @@ export default {
   },
   computed: {
     result() {
-      return `${this.importStyle}
-
-${common.COMMON_STYLE}
-
-${this.paddingStyle}
-
-${this.outlineStyle}
-
-${this.avatarStyle}
-
-${this.userNameStyle}
-
-${this.messageStyle}
-
-${this.timeStyle}
-
-${this.backgroundStyle}
-
-${this.scAndNewMemberStyle}
-
-${this.animationStyle}
-`
+      let styles = [
+        this.importStyle,
+        this.variableStyle,
+        common.COMMON_STYLE,
+        this.paddingStyle,
+        this.outlineStyle,
+        this.avatarStyle,
+        this.userNameStyle,
+        this.messageStyle,
+        this.timeStyle,
+        this.backgroundStyle,
+        this.scAndNewMemberStyle,
+        this.animationStyle,
+      ]
+      let result = styles.filter(style => style).join('\n\n')
+      return `${result}\n`
     },
     importStyle() {
       let allFonts = []
@@ -502,112 +496,97 @@ ${this.animationStyle}
       }
       return common.getImportStyle(allFonts)
     },
+    variableStyle() {
+      return `yt-live-chat-renderer {
+  ${common.getVariableStyle(this.form)}
+
+  /* 描边 Outlines */
+  --outline-color: ${this.form.outlineColor};
+
+  /* 背景色 Background colors
+    普通、舰长、房管、主播 */
+  --text-msg-bg-color: ${this.form.messageBgColor ?? 'transparent'};
+  --text-msg-bg-color-member: ${this.form.memberMessageBgColor ?? 'transparent'};
+  --text-msg-bg-color-moderator: ${this.form.moderatorMessageBgColor ?? 'transparent'};
+  --text-msg-bg-color-owner: ${this.form.ownerMessageBgColor ?? 'transparent'};
+
+  /* 付费、上舰消息 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-2-color: ${this.form.secondLineColor ?? '#ffffff'};
+  --paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
+  --paid-msg-content-color: ${this.form.scContentColor ?? '#ffffff'};
+  --paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
+  --membership-msg-bg-color: ${this.form.showNewMemberBg ? 'var(--username-color-member)' : 'transparent'};
+}`
+    },
     paddingStyle() {
-      return `/* Reduce side padding */
+      return `/* 减少两侧边距 Reduce side padding */
 yt-live-chat-text-message-renderer {
-  padding-left: ${this.form.useBarsInsteadOfBg ? 20 : 4}px !important;
-  padding-right: 4px !important;
+  padding-inline: ${this.form.useBarsInsteadOfBg ? 20 : 4}px 4px;
 }`
     },
     outlineStyle() {
-      return `/* Outlines */
-yt-live-chat-renderer * {
-  ${this.showOutlinesStyle}
-  font-family: ${common.fontsStrToCss(this.form.messageFont)};
-  font-size: ${this.form.messageFontSize}px !important;
-  line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
-}`
-    },
-    showOutlinesStyle() {
       if (!this.form.showOutlines || !this.form.outlineSize) {
         return ''
       }
       let shadow = []
       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 ${this.form.outlineColor}`)
+          shadow.push(`${x}px ${y}px var(--outline-color)`)
         }
       }
-      return `text-shadow: ${shadow.join(', ')};`
+      return `/* 描边 Outlines */
+yt-live-chat-renderer * {
+  text-shadow: ${shadow.join(', ')};
+}`
     },
     avatarStyle() {
       return common.getAvatarStyle(this.form)
     },
     userNameStyle() {
-      return `/* Channel names */
-yt-live-chat-text-message-renderer #author-name[type="owner"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
-  ${this.form.ownerUserNameColor ? `color: ${this.form.ownerUserNameColor} !important;` : ''}
-}
-
-yt-live-chat-text-message-renderer #author-name[type="moderator"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
-  ${this.form.moderatorUserNameColor ? `color: ${this.form.moderatorUserNameColor} !important;` : ''}
-}
-
-yt-live-chat-text-message-renderer #author-name[type="member"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
-  ${this.form.memberUserNameColor ? `color: ${this.form.memberUserNameColor} !important;` : ''}
-}
-
+      return `/* 用户名 Channel names */
 yt-live-chat-text-message-renderer #author-name {
-  ${this.form.showUserNames ? '' : 'display: none !important;'}
-  ${this.form.userNameColor ? `color: ${this.form.userNameColor} !important;` : ''}
+  ${this.form.showUserNames ? '' : 'display: none;'}
+  color: var(--username-color);
   font-family: ${common.fontsStrToCss(this.form.userNameFont)};
-  font-size: ${this.form.userNameFontSize}px !important;
-  line-height: ${this.form.userNameLineHeight || this.form.userNameFontSize}px !important;
+  font-size: var(--username-size);
+  line-height: calc(${this.form.userNameLineHeight || this.form.userNameFontSize} *  var(--font-base-size));
 }
 
-${!this.form.showColon ? '' : `/* Show colon */
+${common.getUserNameStyle(this.form)}
+
+${!this.form.showColon ? '' : `/* 显示冒号 Show colon */
 yt-live-chat-text-message-renderer #author-name::after {
   content: ":";
   margin-left: ${this.form.outlineSize}px;
-}`}
-
-/* Hide badges */
-yt-live-chat-text-message-renderer #chat-badges {
-  ${this.form.showBadges ? '' : 'display: none !important;'}
-  vertical-align: text-top !important;
-}`
+}`}`
     },
     messageStyle() {
-      return `/* Messages */
-yt-live-chat-text-message-renderer #message,
-yt-live-chat-text-message-renderer #message * {
-  ${this.form.messageColor ? `color: ${this.form.messageColor} !important;` : ''}
+      return `/* 文本消息 Text messages */
+yt-live-chat-text-message-renderer :is(#message, #message *) {
+  color: var(--text-content-color);
   font-family: ${common.fontsStrToCss(this.form.messageFont)};
-  font-size: ${this.form.messageFontSize}px !important;
-  line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
+  font-size: var(--text-content-size);
+  line-height: calc(${this.form.messageLineHeight || this.form.messageFontSize} *  var(--font-base-size));
 }
 
 ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
-  display: block !important;
-  overflow: visible !important;
+  display: block;
+  overflow: visible;
 }`}
 
-yt-live-chat-text-message-renderer #message .emoji {
-  width: auto !important;
-  height: ${this.form.emoticonSize}px !important;
-}
+${common.EMOTICON_STYLE}
 
-yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
-  height: ${this.form.largeEmoticonSize}px !important;
-}
-
-${!this.form.messageReverseScroll ? '' : `yt-live-chat-item-list-renderer,
-yt-live-chat-item-list-renderer #items > * {
-  rotate: 180deg;
-  backface-visibility: hidden;
-}`}`
+${common.getReverseScrollStyle(this.form)}`
     },
     timeStyle() {
       return common.getTimeStyle(this.form)
     },
     backgroundStyle() {
-      return `/* Background colors */
+      return `/* 背景色 Background colors */
 body {
-  overflow: hidden;
-  ${this.form.bgColor ? `background-color: ${this.form.bgColor};` : ''}
+  background-color: ${this.form.bgColor ?? 'transparent'};
 }
 
 ${this.getBgStyleForAuthorType('', this.form.messageBgColor)}
@@ -616,79 +595,79 @@ ${this.getBgStyleForAuthorType('owner', this.form.ownerMessageBgColor)}
 
 ${this.getBgStyleForAuthorType('moderator', this.form.moderatorMessageBgColor)}
 
-${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}`
+${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}
+
+${!this.form.useBarsInsteadOfBg ? '' : `yt-live-chat-text-message-renderer::after {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 8px;
+  top: 4px;
+  bottom: 4px;
+  width: 1px;
+  box-sizing: border-box;
+  border-radius: 2px;
+}`}`
     },
     scAndNewMemberStyle() {
-      return `/* SuperChat/Fan Funding Messages */
+      return `/* 付费、上舰消息 Super Chats / Membership messages */
 yt-live-chat-paid-message-renderer {
-  margin: 4px 0 !important;
+  margin: 4px 0;
 }
 
 ${this.scAndNewMemberFontStyle}
 
-yt-live-chat-membership-item-renderer #card,
-yt-live-chat-membership-item-renderer #header {
-  ${this.showNewMemberBgStyle}
+yt-live-chat-membership-item-renderer :is(#card, #header) {
+  background-color: var(--membership-msg-bg-color);
+  ${this.form.showNewMemberBg ? 'margin: 4px 0;' : `box-shadow: none;
+  margin: 0;`}
 }
 
 ${this.scTickerStyle}
 
 ${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
-  display: none !important;
+  display: none;
 }`}`
     },
     scAndNewMemberFontStyle() {
-      return `yt-live-chat-paid-message-renderer #author-name,
-yt-live-chat-paid-message-renderer #author-name *,
-yt-live-chat-membership-item-renderer #header-content-inner-column,
-yt-live-chat-membership-item-renderer #header-content-inner-column * {
-  ${this.form.firstLineColor ? `color: ${this.form.firstLineColor} !important;` : ''}
+      return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
+yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
+  color: var(--paid-msg-line-1-color);
   font-family: ${common.fontsStrToCss(this.form.firstLineFont)};
-  font-size: ${this.form.firstLineFontSize}px !important;
-  line-height: ${this.form.firstLineLineHeight || this.form.firstLineFontSize}px !important;
+  font-size: var(--paid-msg-line-1-size);
+  line-height: calc(${this.form.firstLineLineHeight || this.form.firstLineFontSize} *  var(--font-base-size));
 }
 
-yt-live-chat-paid-message-renderer #purchase-amount,
-yt-live-chat-paid-message-renderer #purchase-amount *,
-yt-live-chat-membership-item-renderer #header-subtext,
-yt-live-chat-membership-item-renderer #header-subtext * {
-  ${this.form.secondLineColor ? `color: ${this.form.secondLineColor} !important;` : ''}
+yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
+yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
+  color: var(--paid-msg-line-2-color);
   font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
-  font-size: ${this.form.secondLineFontSize}px !important;
-  line-height: ${this.form.secondLineLineHeight || this.form.secondLineFontSize}px !important;
+  font-size: var(--paid-msg-line-2-size);
+  line-height: calc(${this.form.secondLineLineHeight || this.form.secondLineFontSize} *  var(--font-base-size));
 }
 
-yt-live-chat-paid-message-renderer #content,
-yt-live-chat-paid-message-renderer #content * {
-  ${this.form.scContentColor ? `color: ${this.form.scContentColor} !important;` : ''}
+yt-live-chat-paid-message-renderer :is(#content, #content *) {
+  color: var(--paid-msg-content-color);
   font-family: ${common.fontsStrToCss(this.form.scContentFont)};
-  font-size: ${this.form.scContentFontSize}px !important;
-  line-height: ${this.form.scContentLineHeight || this.form.scContentFontSize}px !important;
+  font-size: var(--paid-msg-content-size);
+  line-height: calc(${this.form.scContentLineHeight || this.form.scContentFontSize} *  var(--font-base-size));
 }`
     },
-    showNewMemberBgStyle() {
-      if (this.form.showNewMemberBg) {
-        return `background-color: ${this.form.memberUserNameColor} !important;
-  margin: 4px 0 !important;`
-      } else {
-        return `background-color: transparent !important;
-  box-shadow: none !important;
-  margin: 0 !important;`
-      }
-    },
     scTickerStyle() {
-      return `${this.form.showScTicker ? '' : `yt-live-chat-ticker-renderer {
-  display: none !important;
-}`}
-
-/* SuperChat Ticker */
-yt-live-chat-ticker-paid-message-item-renderer,
-yt-live-chat-ticker-paid-message-item-renderer *,
-yt-live-chat-ticker-sponsor-item-renderer,
-yt-live-chat-ticker-sponsor-item-renderer * {
-  ${this.form.secondLineColor ? `color: ${this.form.secondLineColor} !important;` : ''}
-  font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
+      if (!this.form.showScTicker) {
+        return `yt-live-chat-ticker-renderer {
+  display: none;
 }`
+      } else {
+        return `/* SC固定栏 Super Chat ticker */
+yt-live-chat-ticker-paid-message-item-renderer,
+yt-live-chat-ticker-paid-message-item-renderer * {
+  color: var(--paid-msg-line-2-color);
+  font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
+  font-size: var(--paid-msg-line-2-size);
+  line-height: calc(${this.form.secondLineLineHeight || this.form.secondLineFontSize} *  var(--font-base-size));
+}`
+      }
     },
     animationStyle() {
       return common.getAnimationStyle(this.form)
@@ -720,24 +699,18 @@ yt-live-chat-ticker-sponsor-item-renderer * {
     },
 
     getBgStyleForAuthorType(authorType, color) {
+      if (!color) {
+        return ''
+      }
       let typeSelector = authorType ? `[author-type="${authorType}"]` : ''
+      let varName = authorType ? `--text-msg-bg-color-${authorType}` : '--text-msg-bg-color'
       if (!this.form.useBarsInsteadOfBg) {
-        return `yt-live-chat-text-message-renderer${typeSelector},
-yt-live-chat-text-message-renderer${typeSelector}[is-highlighted] {
-  ${color ? `background-color: ${color} !important;` : ''}
+        return `yt-live-chat-text-message-renderer${typeSelector} {
+  background-color: var(${varName});
 }`
       } else {
         return `yt-live-chat-text-message-renderer${typeSelector}::after {
-  ${color ? `border: 2px solid ${color};` : ''}
-  content: "";
-  position: absolute;
-  display: block;
-  left: 8px;
-  top: 4px;
-  bottom: 4px;
-  width: 1px;
-  box-sizing: border-box;
-  border-radius: 2px;
+  border: 2px solid var(${varName});
 }`
       }
     }

frontend/src/views/StyleGenerator/LineLike.vue

@@ -413,26 +413,21 @@ export default {
   },
   computed: {
     result() {
-      return `${this.importStyle}
-
-${common.COMMON_STYLE}
-
-${this.paddingStyle}
-
-${this.avatarStyle}
-
-${this.userNameStyle}
-
-${this.messageStyle}
-
-${this.timeStyle}
-
-${this.backgroundStyle}
-
-${this.scAndNewMemberStyle}
-
-${this.animationStyle}
-`
+      let styles = [
+        this.importStyle,
+        this.variableStyle,
+        common.COMMON_STYLE,
+        this.paddingStyle,
+        this.avatarStyle,
+        this.userNameStyle,
+        this.messageStyle,
+        this.timeStyle,
+        this.backgroundStyle,
+        this.scAndNewMemberStyle,
+        this.animationStyle,
+      ]
+      let result = styles.filter(style => style).join('\n\n')
+      return `${result}\n`
     },
     importStyle() {
       let allFonts = []
@@ -441,84 +436,69 @@ ${this.animationStyle}
       }
       return common.getImportStyle(allFonts)
     },
+    variableStyle() {
+      return `yt-live-chat-renderer {
+  ${common.getVariableStyle(this.form)}
+
+  /* 背景色 Background colors
+    普通、舰长、房管、主播 */
+  --text-msg-bg-color: ${this.form.messageBgColor ?? '#ffffff'};
+  --text-msg-bg-color-member: ${this.form.memberMessageBgColor ?? '#ffffff'};
+  --text-msg-bg-color-moderator: ${this.form.moderatorMessageBgColor ?? '#ffffff'};
+  --text-msg-bg-color-owner: ${this.form.ownerMessageBgColor ?? '#ffffff'};
+
+  /* 付费、上舰消息 Super Chats / Membership messages */
+  --paid-msg-line-1-size: calc(${this.form.firstLineFontSize} * var(--font-base-size));
+  --paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
+  --paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
+  --membership-msg-bg-color: var(--username-color-member);
+}`
+    },
     paddingStyle() {
-      return `/* Reduce side padding */
+      return `/* 减少两侧间距 Reduce side padding */
 yt-live-chat-text-message-renderer {
-  padding-left: 4px !important;
-  padding-right: 4px !important;
+  padding-inline: 4px;
 }`
     },
     avatarStyle() {
       return common.getAvatarStyle(this.form)
     },
     userNameStyle() {
-      return `/* Channel names */
+      return `/* 用户名 Channel names */
 yt-live-chat-text-message-renderer yt-live-chat-author-chip {
   margin-bottom: 5px;
 }
 
-yt-live-chat-text-message-renderer #author-name[type="owner"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
-  ${this.form.ownerUserNameColor ? `color: ${this.form.ownerUserNameColor} !important;` : ''}
-}
-
-yt-live-chat-text-message-renderer #author-name[type="moderator"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
-  ${this.form.moderatorUserNameColor ? `color: ${this.form.moderatorUserNameColor} !important;` : ''}
-}
-
-yt-live-chat-text-message-renderer #author-name[type="member"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
-  ${this.form.memberUserNameColor ? `color: ${this.form.memberUserNameColor} !important;` : ''}
-}
-
 yt-live-chat-text-message-renderer #author-name {
-  ${this.form.showUserNames ? '' : 'display: none !important;'}
-  ${this.form.userNameColor ? `color: ${this.form.userNameColor} !important;` : ''}
+  ${this.form.showUserNames ? '' : 'display: none;'}
+  color: var(--username-color);
   font-family: ${common.fontsStrToCss(this.form.userNameFont)};
-  font-size: ${this.form.userNameFontSize}px !important;
-  line-height: ${this.form.userNameLineHeight || (this.form.userNameFontSize + 2)}px !important;
+  font-size: var(--username-size);
+  line-height: calc(${this.form.userNameLineHeight || (this.form.userNameFontSize + 2)} *  var(--font-base-size));
 }
 
-/* Hide badges */
-yt-live-chat-text-message-renderer #chat-badges {
-  ${this.form.showBadges ? '' : 'display: none !important;'}
-  vertical-align: text-top !important;
-}`
+${common.getUserNameStyle(this.form)}`
     },
     messageStyle() {
-      return `/* Messages */
-yt-live-chat-text-message-renderer #message,
-yt-live-chat-text-message-renderer #message * {
-  ${this.form.messageColor ? `color: ${this.form.messageColor} !important;` : ''}
+      return `/* 文本消息 Text messages */
+yt-live-chat-text-message-renderer :is(#message, #message *) {
+  color: var(--text-content-color);
   font-family: ${common.fontsStrToCss(this.form.messageFont)};
-  font-size: ${this.form.messageFontSize}px !important;
-  line-height: ${this.form.messageLineHeight || (this.form.messageFontSize + 2)}px !important;
+  font-size: var(--text-content-size);
+  line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize + 2)} *  var(--font-base-size));
 }
 
+/* 气泡背景 Bubble background */
 yt-live-chat-text-message-renderer #message {
-  display: block !important;
+  display: block;
   position: relative;
   width: fit-content;
-  overflow: visible !important;
+  overflow: visible;
   padding: 15px;
   border-radius: 24px;
 }
 
-yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
-  ${this.form.showLargeEmoticonBg ? '' : 'padding: 0;'}
-}
-
-yt-live-chat-text-message-renderer #message .emoji {
-  width: auto !important;
-  height: ${this.form.emoticonSize}px !important;
-}
-
-yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
-  height: ${this.form.largeEmoticonSize}px !important;
-}
-
-/* The triangle beside dialog */
+/* 气泡旁边的三角形箭头 The triangle beside the bubble */
 yt-live-chat-text-message-renderer #message::before {
   content: "";
   display: inline-block;
@@ -530,99 +510,95 @@ yt-live-chat-text-message-renderer #message::before {
   transform: rotate(35deg);
 }
 
+${this.form.showLargeEmoticonBg ? '' : `/* 适配隐藏大表情背景 For Hiding background of large emotes */
 yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
-  ${this.form.showLargeEmoticonBg ? '' : 'content: none;'}
+  content: none;
 }
 
-${!this.form.messageReverseScroll ? '' : `yt-live-chat-item-list-renderer,
-yt-live-chat-item-list-renderer #items > * {
-  rotate: 180deg;
-  backface-visibility: hidden;
-}`}`
+yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
+  padding: 0;
+}`}
+
+${common.EMOTICON_STYLE}
+
+${common.getReverseScrollStyle(this.form)}`
     },
     timeStyle() {
       return common.getTimeStyle(this.form)
     },
     backgroundStyle() {
-      return `/* Background colors */
+      return `/* 背景色 Background colors */
 body {
-  overflow: hidden;
-  ${this.form.bgColor ? `background-color: ${this.form.bgColor};` : ''}
+  background-color: ${this.form.bgColor ?? 'transparent'};
 }
 
-${this.getBgStyleForAuthorType('', this.form.messageBgColor)}
+${this.getBgStyleForAuthorType('')}
 
-${this.getBgStyleForAuthorType('owner', this.form.ownerMessageBgColor)}
+${this.getBgStyleForAuthorType('owner')}
 
-${this.getBgStyleForAuthorType('moderator', this.form.moderatorMessageBgColor)}
+${this.getBgStyleForAuthorType('moderator')}
 
-${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}
+${this.getBgStyleForAuthorType('member')}
 
+${this.form.showLargeEmoticonBg ? '' : `/* 隐藏大表情背景 Hide background of large emotes */
 yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
-  ${this.form.showLargeEmoticonBg ? '' : 'background-color: transparent !important;'}
-}`
+  background-color: transparent;
+}`}`
     },
     scAndNewMemberStyle() {
-      return `/* SuperChat/Fan Funding Messages */
+      return `/* 付费、上舰消息 Super Chats / Membership messages */
 yt-live-chat-paid-message-renderer {
-  margin: 4px 0 !important;
+  margin: 4px 0;
 }
 
 ${this.scAndNewMemberFontStyle}
 
-yt-live-chat-membership-item-renderer #card,
-yt-live-chat-membership-item-renderer #header {
-  ${this.showNewMemberBgStyle}
+yt-live-chat-membership-item-renderer :is(#card, #header) {
+  background-color: var(--membership-msg-bg-color);
+  margin: 4px 0;
 }
 
 ${this.scTickerStyle}
 
 ${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
-  display: none !important;
+  display: none;
 }`}`
     },
     scAndNewMemberFontStyle() {
-      return `yt-live-chat-paid-message-renderer #author-name,
-yt-live-chat-paid-message-renderer #author-name *,
-yt-live-chat-membership-item-renderer #header-content-inner-column,
-yt-live-chat-membership-item-renderer #header-content-inner-column * {
+      return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
+yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
   font-family: ${common.fontsStrToCss(this.form.firstLineFont)};
-  font-size: ${this.form.firstLineFontSize}px !important;
-  line-height: ${this.form.firstLineLineHeight || (this.form.firstLineFontSize + 2)}px !important;
+  font-size: var(--paid-msg-line-1-size);
+  line-height: calc(${this.form.firstLineLineHeight || (this.form.firstLineFontSize + 2)} *  var(--font-base-size));
 }
 
-yt-live-chat-paid-message-renderer #purchase-amount,
-yt-live-chat-paid-message-renderer #purchase-amount *,
-yt-live-chat-membership-item-renderer #header-subtext,
-yt-live-chat-membership-item-renderer #header-subtext * {
+yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
+yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
   font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
-  font-size: ${this.form.secondLineFontSize}px !important;
-  line-height: ${this.form.secondLineLineHeight || (this.form.secondLineFontSize + 2)}px !important;
+  font-size: var(--paid-msg-line-2-size);
+  line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize + 2)} *  var(--font-base-size));
 }
 
-yt-live-chat-paid-message-renderer #content,
-yt-live-chat-paid-message-renderer #content * {
+yt-live-chat-paid-message-renderer :is(#content, #content *) {
   font-family: ${common.fontsStrToCss(this.form.scContentFont)};
-  font-size: ${this.form.scContentFontSize}px !important;
-  line-height: ${this.form.scContentLineHeight || (this.form.scContentFontSize + 2)}px !important;
+  font-size: var(--paid-msg-content-size);
+  line-height: calc(${this.form.scContentLineHeight || (this.form.scContentFontSize + 2)} *  var(--font-base-size));
 }`
-    },
-    showNewMemberBgStyle() {
-      return `background-color: ${this.form.memberUserNameColor} !important;
-  margin: 4px 0 !important;`
     },
     scTickerStyle() {
-      return `${this.form.showScTicker ? '' : `yt-live-chat-ticker-renderer {
-  display: none !important;
-}`}
-
-/* SuperChat Ticker */
-yt-live-chat-ticker-paid-message-item-renderer,
-yt-live-chat-ticker-paid-message-item-renderer *,
-yt-live-chat-ticker-sponsor-item-renderer,
-yt-live-chat-ticker-sponsor-item-renderer * {
-  font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
+      if (!this.form.showScTicker) {
+        return `yt-live-chat-ticker-renderer {
+  display: none;
 }`
+      } else {
+        return `/* SC固定栏 Super Chat ticker */
+yt-live-chat-ticker-paid-message-item-renderer,
+yt-live-chat-ticker-paid-message-item-renderer * {
+  font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
+  font-size: var(--paid-msg-line-2-size);
+  line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize + 2)} *  var(--font-base-size));
+}`
+      }
     },
     animationStyle() {
       return common.getAnimationStyle(this.form)
@@ -653,17 +629,15 @@ yt-live-chat-ticker-sponsor-item-renderer * {
       this.form = { ...DEFAULT_CONFIG }
     },
 
-    getBgStyleForAuthorType(authorType, color) {
-      if (!color) {
-        color = '#ffffff'
-      }
+    getBgStyleForAuthorType(authorType) {
       let typeSelector = authorType ? `[author-type="${authorType}"]` : ''
+      let varName = authorType ? `--text-msg-bg-color-${authorType}` : '--text-msg-bg-color'
       return `yt-live-chat-text-message-renderer${typeSelector} #message {
-  background-color: ${color} !important;
+  background-color: var(${varName});
 }
 
 yt-live-chat-text-message-renderer${typeSelector} #message::before {
-  border-right-color: ${color};
+  border-right-color: var(${varName});
 }`
     }
   }

frontend/src/views/StyleGenerator/common.js

@@ -3,55 +3,17 @@ import * as fonts from './fonts'
 const FALLBACK_FONTS_CSS = '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", \
 "\\5FAE \\8F6F \\96C5 \\9ED1 ", SimHei, Arial, sans-serif'
 
-export const COMMON_STYLE = `/* Transparent background */
-yt-live-chat-renderer {
-  background-color: transparent !important;
-}
-
-yt-live-chat-ticker-renderer {
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-
+export const COMMON_STYLE = `/* （必需）透明背景 (Required) Transparent background */
+yt-live-chat-renderer,
+yt-live-chat-ticker-renderer,
 yt-live-chat-author-chip #author-name {
-  background-color: transparent !important;
-}
-
-/* Hide scrollbar */
-yt-live-chat-item-list-renderer #items {
-  overflow: hidden !important;
+  background-color: transparent;
 }
 
+/* （必需）隐藏滚动条 (Required) Hide scrollbar */
+body,
 yt-live-chat-item-list-renderer #item-scroller {
-  overflow: hidden !important;
-}
-
-yt-live-chat-text-message-renderer #content,
-yt-live-chat-membership-item-renderer #content {
-  overflow: visible !important;
-}
-
-/* Hide header and input */
-yt-live-chat-header-renderer,
-yt-live-chat-message-input-renderer {
-  display: none !important;
-}
-
-/* Hide unimportant messages */
-yt-live-chat-text-message-renderer[is-deleted],
-yt-live-chat-membership-item-renderer[is-deleted] {
-  display: none !important;
-}
-
-yt-live-chat-mode-change-message-renderer, 
-yt-live-chat-viewer-engagement-message-renderer, 
-yt-live-chat-restricted-participation-renderer {
-  display: none !important;
-}
-
-yt-live-chat-text-message-renderer a,
-yt-live-chat-membership-item-renderer a {
-  text-decoration: none !important;
+  overflow: hidden;
 }`
 
 export function getImportStyle(allFontsStrs) {
@@ -75,30 +37,97 @@ export function getImportStyle(allFontsStrs) {
   return res.join('\n')
 }
 
+export function getVariableStyle(config) {
+  return `/* 基准尺寸，用于整体缩放 Base size for scaling */
+  --base-size: 1px;
+  --font-base-size: calc(1 * var(--base-size));
+
+  /* 没有首选字体时的备用字体 Fallback font families */
+  --fallback-fonts: ${FALLBACK_FONTS_CSS};
+
+  /* 头像 Avatars */
+  --avatar-size: calc(${config.avatarSize} * var(--base-size));
+
+  /* 时间 Timestamps */
+  --time-color: ${config.timeColor ?? '#999999'};
+  --time-size: calc(${config.timeFontSize} * var(--font-base-size));
+
+  /* 用户名 Channel names
+    普通、舰长、房管、主播 */
+  --username-color: ${config.userNameColor ?? '#111111'};
+  --username-color-member: ${config.memberUserNameColor ?? 'var(--username-color)'};
+  --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));
+
+  /* 文本消息 Text messages */
+  --text-content-color: ${config.messageColor ?? '#111111'};
+  --text-content-size: calc(${config.messageFontSize} * var(--font-base-size));
+
+  /* 表情 Emotes */
+  --emote-size: calc(${config.emoticonSize} * var(--font-base-size));
+  --large-emote-size: calc(${config.largeEmoticonSize} * var(--font-base-size));`
+}
+
 export function getAvatarStyle(config) {
-  return `/* Avatars */
-yt-live-chat-text-message-renderer #author-photo,
-yt-live-chat-text-message-renderer #author-photo img,
-yt-live-chat-paid-message-renderer #author-photo,
-yt-live-chat-paid-message-renderer #author-photo img,
-yt-live-chat-membership-item-renderer #author-photo,
-yt-live-chat-membership-item-renderer #author-photo img {
-  ${config.showAvatars ? '' : 'display: none !important;'}
-  width: ${config.avatarSize}px !important;
-  height: ${config.avatarSize}px !important;
-  border-radius: ${config.avatarSize}px !important;
-  margin-right: ${config.avatarSize / 4}px !important;
+  return `/* 头像 Avatars */
+yt-live-chat-item-list-renderer :is(#author-photo, #author-photo img) {
+  ${config.showAvatars ? '' : 'display: none;'}
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--avatar-size);
+  margin-right: calc(var(--avatar-size) / 4);
 }`
 }
 
 export function getTimeStyle(config) {
-  return `/* Timestamps */
+  return `/* 时间 Timestamps */
 yt-live-chat-text-message-renderer #timestamp {
-  display: ${config.showTime ? 'inline' : 'none'} !important;
-  ${config.timeColor ? `color: ${config.timeColor} !important;` : ''}
+  display: ${config.showTime ? 'inline' : 'none'};
+  color: var(--time-color);
   font-family: ${fontsStrToCss(config.timeFont)};
-  font-size: ${config.timeFontSize}px !important;
-  line-height: ${config.timeLineHeight || config.timeFontSize}px !important;
+  font-size: var(--time-size);
+  line-height: ${config.timeLineHeight || config.timeFontSize}px;
+}`
+}
+
+export function getUserNameStyle(config) {
+  return `yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
+  color: var(--username-color-owner);
+}
+
+yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="moderator"] {
+  color: var(--username-color-moderator);
+}
+
+yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="member"] {
+  color: var(--username-color-member);
+}
+
+${config.showBadges ? '' : `/* 隐藏勋章 Hide badges */
+yt-live-chat-text-message-renderer #chat-badges {
+  display: none;
+}`}`
+}
+
+export const EMOTICON_STYLE = `yt-live-chat-text-message-renderer #message .emoji {
+  width: auto;
+  height: var(--emote-size);
+}
+
+yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
+  height: var(--large-emote-size);
+}`
+
+export function getReverseScrollStyle(config) {
+  if (!config.messageReverseScroll) {
+    return ''
+  }
+  return `/* 反向滚动 Reverse scrolling */
+yt-live-chat-item-list-renderer,
+yt-live-chat-item-list-renderer #items > * {
+  rotate: 180deg;
+  backface-visibility: hidden;
 }`
 }
 
@@ -131,7 +160,7 @@ export function getAnimationStyle(config) {
       : ` translate: ${config.reverseSlide ? -16 : 16}px;`
     } }`)
   }
-  return `/* Animation */
+  return `/* 动画 Animation */
 @keyframes anim {
 ${keyframes.join('\n')}
 }
@@ -152,11 +181,8 @@ export function fontsArrToStr(fontsArr) {
 
 export function fontsStrToCss(fontsStr) {
   let fontsArr = fontsStrToArr(fontsStr)
-  if (fontsArr.length === 0) {
-    return FALLBACK_FONTS_CSS
-  }
   fontsArr = fontsArr.map(cssEscapeStr)
-  fontsArr.push(FALLBACK_FONTS_CSS)
+  fontsArr.push('var(--fallback-fonts)')
   return fontsArr.join(', ')
 }