From 439ab2c8c0bfb4cce9af1b78fcb454a1afa080c8 Mon Sep 17 00:00:00 2001
From: benonymity <benonymity@gmail.com>
Date: Sat, 23 Dec 2023 01:45:40 -0500
Subject: [PATCH] fix: item page background conflict

---
 assets/tailwind.css            | 8 ++++----
 components/app/AudioPlayer.vue | 1 +
 pages/item/_id/index.vue       | 2 +-
 tailwind.config.js             | 3 ---
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/assets/tailwind.css b/assets/tailwind.css
index 2fd04bd2..f52c759f 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -17,8 +17,8 @@
     --color-track-cursor: 229 231 235;
     --color-track: 107 114 128;
     --color-track-buffered: 75 85 99;
-    --gradient-item-page: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%);
-    --gradient-audio-player: linear-gradient(169deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%);
+    --gradient-item-page: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(55, 56, 56, 1) 80%);
+    --gradient-audio-player: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%);
     --gradient-minimized-audio-player: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%);
   }
 
@@ -36,8 +36,8 @@
     --color-track-cursor: 101 109 118;
     --color-track: 189 191 191;
     --color-track-buffered: 129 131 131;
-    --gradient-item-page: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
-    --gradient-audio-player: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
+    --gradient-item-page: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 80%);
+    --gradient-audio-player: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
     --gradient-minimized-audio-player: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 20%, rgb(255, 255, 255) 60%);
   }
 
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 3bd04383..85d54b4d 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -164,6 +164,7 @@ export default {
     showFullscreen(val) {
       this.updateScreenSize()
       this.$store.commit('setPlayerFullscreen', !!val)
+      document.querySelector('body').style.backgroundColor = this.showFullscreen ? this.coverRgb : ""
     },
     bookCoverAspectRatio() {
       this.updateScreenSize()
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index f9a290ba..a1530f08 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="item-page" class="w-full h-full px-3 pb-4 overflow-y-auto overflow-x-hidden relative bg-bg">
     <div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
-      <div class="w-full h-full" :style="{ backgroundColor: coverRgb }" />
+      <div class="w-full h-full" />
       <div class="w-full h-full absolute top-0 left-0" style="background: var(--gradient-item-page)" />
     </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index cbc609d4..16cdc52a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -64,8 +64,5 @@ module.exports = {
       }
     }
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }