Merge branch 'BewlyBewly:dev' into dev

src/contentScripts/views/App.vue

@@ -113,7 +113,7 @@ onMounted(() => {
     // Force overwrite Bilibili Evolved body tag & html tag background color
     document.body.style.setProperty('background-color', 'unset', 'important')
   }
-  document.documentElement.style.setProperty('font-size', '14px')
+  // document.documentElement.style.setProperty('font-size', '14px')
 
   document.addEventListener('scroll', () => {
     if (window.scrollY > 0)

src/contentScripts/views/Home/Home.vue

@@ -199,8 +199,8 @@ function toggleTabContentLoading(loading: boolean) {
         ease-in-out flex="~ justify-between items-start gap-4"
         :class="{ hide: shouldMoveTabsUp }"
       >
-        <ul flex="~ items-center gap-3 wrap">
-          <li
+        <section flex="~ items-center gap-3 wrap">
+          <button
             v-for="tab in currentTabs" :key="tab.page"
             :class="{ 'tab-activated': activatedPage === tab.page }"
             style="backdrop-filter: var(--bew-filter-glass-1)"
@@ -218,8 +218,8 @@ function toggleTabContentLoading(loading: boolean) {
               icon="svg-spinners:ring-resize"
               duration-300 ease-in-out mb--2px text-16px
             />
-          </li>
-        </ul>
+          </button>
+        </section>
 
         <div
           style="backdrop-filter: var(--bew-filter-glass-1)"

src/styles/adaptedStyles/historyPage.scss

@@ -1,5 +1,6 @@
 .bewly-design.historyPage {
-  .history-wrap .b-head .b-head-t {
+  .history-wrap .b-head .b-head-t,
+  .history-wrap .warn .txt {
     color: var(--bew-text-1);
   }
 
@@ -21,17 +22,19 @@
     }
   }
 
-  .history-wrap a.btn {
-    color: var(--bew-theme-color);
+  .history-wrap a.btn:hover,
+  .history-wrap .active {
+    background-color: var(--bew-theme-color);
   }
 
-  .history-wrap .history-btn .btn:hover {
+  .history-wrap .warn .btn {
     background-color: var(--bew-theme-color);
-    border-color: var(--bew-theme-color);
+    color: white;
   }
 
-  .history-wrap .active {
+  .history-wrap .history-btn .btn:hover {
     background-color: var(--bew-theme-color);
+    border-color: var(--bew-theme-color);
   }
 
   .history-wrap .active:before {
@@ -46,10 +49,13 @@
     border-left-color: var(--bew-fill-2);
   }
 
-  .history-wrap .time-label.active {
+  .history-wrap .time-label.active,
+  .history-wrap a.btn:hover {
     border-color: var(--bew-theme-color) !important;
     color: white;
   }
+
+  .history-wrap a.btn,
   .history-wrap .time-label {
     border-color: var(--bew-theme-color) !important;
     color: var(--bew-theme-color);

src/styles/main.scss

@@ -37,7 +37,7 @@ html.bewly-design > ::-webkit-scrollbar-track {
 
 html.bewly-design,
 .bewly-design body {
-  font-size: 14px !important;
+  // font-size: 14px !important;
   min-width: unset !important;
   filter: none !important;
   color: var(--bew-text-1);

src/styles/variables.scss

@@ -1,5 +1,6 @@
 :host,
 :root {
+  --bew-base-font-size: 14px;
   --bew-radius: 12px;
   --bew-radius-half: calc(var(--bew-radius) / 2);
 

unocss.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'unocss/vite'
 import { presetAttributify, presetIcons, presetTypography, presetUno, transformerDirectives } from 'unocss'
 
+const remRE = /(-?[\.\d]+)rem/g
+
 export default defineConfig({
   presets: [
     presetUno(),
@@ -14,6 +16,21 @@ export default defineConfig({
       },
     }),
     presetTypography(),
+
+    {
+      name: 'text-size-transformer',
+      postprocess: (util) => {
+        util.entries.forEach((i) => {
+          const value = i[1]
+
+          if (typeof value === 'string' && remRE.test(value)) {
+            i[1] = value.replace(remRE, (_, num: number) => {
+              return `calc(var(--bew-base-font-size) * ${num})`
+            })
+          }
+        })
+      },
+    },
   ],
   transformers: [
     transformerDirectives(),