fix(favorites,watch-later): enhance content visibility (#1132)

close #1132

src/contentScripts/views/Favorites/Favorites.vue

@@ -287,6 +287,7 @@ function isMusic(item: FavoriteResource) {
             v-if="activatedCategoryCover"
             :src="removeHttpFromUrl(`${activatedCategoryCover}@480w_270h_1c`)"
             w-full h-full object="cover center" blur-40px
+            relative z--1
           >
         </div>
 

src/contentScripts/views/WatchLater/WatchLater.vue

@@ -330,6 +330,7 @@ function jumpToLoginPage() {
             v-if="currentWatchLaterList[0]"
             :src="removeHttpFromUrl(`${currentWatchLaterList[0].pic}@480w_270h_1c`)"
             w-full h-full object="cover center" blur-40px
+            relative z--1
           >
         </div>
 

src/styles/variables.scss

@@ -180,7 +180,7 @@
   --bew-fill-3: rgb(131 131 145 / 33%);
 
   // You can use this as the frosted glass mask, such as on the right side of the "Watch Later" page panel and the "Favorites" page panel
-  --bew-fill-4: rgb(131 131 145 / 43%);
+  --bew-fill-4: rgb(131 131 145 / 63%);
 
   --bew-fill-alt: rgb(255 255 255 / 43%);
 
@@ -245,7 +245,7 @@
   --bew-fill-1: rgb(131 131 145 / 14%);
   --bew-fill-2: rgb(131 131 145 / 24%);
   --bew-fill-3: rgb(131 131 145 / 34%);
-  --bew-fill-4: rgb(131 131 145 / 44%);
+  --bew-fill-4: rgb(131 131 145 / 64%);
   --bew-fill-alt: var(--bew-fill-1);
 
   --bew-border-color: rgb(131 131 145 / 26%);