chore: style change

src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue

@@ -45,7 +45,7 @@ function getPopularAnimeList() {
     z="-1"
   >
     <div
-      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
+      :style="{ backgroundImage: `url(${activatedAnime?.ss_horizontal_cover})` }"
       bg="cover center"
       duration-600
       w-full
@@ -54,11 +54,12 @@ function getPopularAnimeList() {
       after:content-none
       after:pos="absolute top-0 left-0"
       after:w-full after:h-full
-      after:backdrop-blur-2xl
+      after:backdrop-blur-xl
       opacity-30
     />
   </div>
 
+  <!-- banner -->
   <div h-600px z-1 pos="relative" flex justify-center>
     <div>
       <img
@@ -72,7 +73,7 @@ function getPopularAnimeList() {
     </div>
   </div>
 
-  <ul w-full flex gap-4 overflow-hidden m="t--150px" z-1 relative>
+  <ul w-full flex gap-6 overflow-hidden m="t--150px" z-1 relative>
     <li
       v-for="(item, index) in popularAnimeList"
       :key="index"

src/contentScripts/views/App.vue

@@ -116,6 +116,26 @@ function changeActivatePage(pageName: AppPage) {
 </template>
 
 <style lang="scss" scoped>
+.topbar-enter-active,
+.topbar-leave-active {
+  transition: all 0.5s ease;
+}
+
+.topbar-enter-from,
+.topbar-leave-to {
+  @apply opacity-0 transform -translate-y-full;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
 .tab-item {
   --shadow: 0 0 30px 4px var(--bew-theme-color-50);
   --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
@@ -142,25 +162,3 @@ function changeActivatePage(pageName: AppPage) {
   }
 }
 </style>
-
-<style lang="scss">
-.topbar-enter-active,
-.topbar-leave-active {
-  transition: all 0.5s ease;
-}
-
-.topbar-enter-from,
-.topbar-leave-to {
-  @apply opacity-0 transform -translate-y-full;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  @apply opacity-0;
-}
-</style>