From 940862c059d377ec3aef77315486b51b4a9a4a03 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 23 Jul 2023 17:56:02 +0800
Subject: [PATCH] style: adjusted style

---
 src/components/Settings/Settings.vue              | 12 ++++++------
 src/components/Settings/components/Appearance.vue |  2 +-
 src/contentScripts/views/App.vue                  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 05e3d3f2..4d1437cf 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -51,10 +51,10 @@ function changeMenuItem(menuItem: MenuType) {
     max-w-800px transform="~ translate-x--1/2"
     z-9999 flex justify-between items-center
   >
-    <aside class="group" shrink-0 px-4 pos="absolute left--42px" z-1>
+    <aside class="group" shrink-0 p="x-2 md:x-4" pos="absolute left-0 md:left--42px" z-2>
       <ul
         flex="~ gap-4 col" rounded="30px hover:25px" bg="$bew-elevated-2" p-2 shadow="$bew-shadow-3"
-        group-hover:scale-105 duration-300
+        scale="md:group-hover:105" duration-300
         backdrop-glass
       >
         <li v-for="item in settingsMenuItems" :key="item.value">
@@ -79,12 +79,12 @@ function changeMenuItem(menuItem: MenuType) {
 
     <div
       relative overflow-hidden w-full h-full bg="$bew-elevated-solid-1"
-      shadow="$bew-shadow-3" rounded="$bew-radius"
+      shadow="$bew-shadow-3" rounded="md:$bew-radius"
     >
       <header
         flex justify-between items-center w-full h-80px
-        pos="fixed top-0 left-0" px-12
-        z-1 rounded="t-$bew-radius"
+        pos="fixed top-0 left-0" p="l-70px r-4 md:x-12"
+        z-1 rounded="md:t-$bew-radius"
         style="
           background: linear-gradient(var(--bew-elevated-solid-1), transparent);
           text-shadow: 0 0 15px var(--bew-elevated-solid-1)
@@ -101,7 +101,7 @@ function changeMenuItem(menuItem: MenuType) {
         </div>
       </header>
 
-      <main relative h-full py-8 px-12 overflow-y-scroll>
+      <main relative h-full py-8 p="l-70px r-2 md:x-12" overflow-y-scroll>
         <!-- <header
           flex justify-between items-center w-full h-60px
           pos="fixed top-0 left-0"
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 90b2283e..1eeb87da 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -107,7 +107,7 @@ function changeWallpaper(url: string) {
   </SettingItem>
 
   <SettingItem v-if="settings.wallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
-    <div grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4">
+    <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
       <picture
         aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
         un-border="4 transparent" pointer-cursor
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 66f0ac0e..de0ba094 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -181,7 +181,7 @@ function setAppThemeColor() {
   <!-- background mask -->
   <div
     v-if="settings.enableWallpaperMasking"
-    pos="absolute top-0 left-0" w-full h-full pointer-events-none will-change-contents bg="$bew-bg-mask" z--1
+    pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" z--1
     :style="{ backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)` }"
   />
   <div ref="mainAppRef" text="$bew-text-1" transition="opacity duration-300" h-100vh overflow-y-scroll :style="{ opacity: mainAppOpacity }">
@@ -301,8 +301,8 @@ function setAppThemeColor() {
         <main
           ref="main"
           p="t-80px" m-auto
-          :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-120px)]'"
           relative
+          :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
         >
           <Transition name="fade">
             <Component :is="pages[activatedPage]" absolute w-full />