mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-28 13:58:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: item page background conflict

Browse source
This commit is contained in:
benonymity 2023-12-23 01:45:40 -05:00
parent 26d0209763
commit 439ab2c8c0
4 changed files with 6 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/tailwind.css
View file

@ -17,8 +17,8 @@
--color-track-cursor: 229 231 235; --color-track-cursor: 229 231 235;
--color-track: 107 114 128; --color-track: 107 114 128;
--color-track-buffered: 75 85 99; --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-item-page: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, 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-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%); --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-cursor: 101 109 118;
--color-track: 189 191 191; --color-track: 189 191 191;
--color-track-buffered: 129 131 131; --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-item-page: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, 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-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%); --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%);
} }

1
components/app/AudioPlayer.vue
View file

@ -164,6 +164,7 @@ export default {
showFullscreen(val) { showFullscreen(val) {
this.updateScreenSize() this.updateScreenSize()
this.$store.commit('setPlayerFullscreen', !!val) this.$store.commit('setPlayerFullscreen', !!val)
document.querySelector('body').style.backgroundColor = this.showFullscreen ? this.coverRgb : ""
}, },
bookCoverAspectRatio() { bookCoverAspectRatio() {
this.updateScreenSize() this.updateScreenSize()

2
pages/item/_id/index.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div id="item-page" class="w-full h-full px-3 pb-4 overflow-y-auto overflow-x-hidden relative bg-bg"> <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="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 class="w-full h-full absolute top-0 left-0" style="background: var(--gradient-item-page)" />
</div> </div>

3
tailwind.config.js
View file

@ -64,8 +64,5 @@ module.exports = {
} }
} }
}, },
variants: {
extend: {},
},
plugins: [], plugins: [],
} }