From 7f86c8bfa9dcf5f6ed5daa8caf30144c93f56677 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Tue, 27 May 2025 16:23:21 +1000
Subject: [PATCH] feat(AlbumDetailDialog): enhance dialog styling with backdrop
 blur and image shadow

---
 src/components/AlbumDetailDialog.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AlbumDetailDialog.vue b/src/components/AlbumDetailDialog.vue
index 163c511..0b8491e 100644
--- a/src/components/AlbumDetailDialog.vue
+++ b/src/components/AlbumDetailDialog.vue
@@ -137,9 +137,9 @@ function playTheAlbum(from: number = 0) {
 	<dialog :open="present" class="bg-transparent z-20">
 		<div ref="dialogBackdrop" class="w-screen h-screen z-20 bg-neutral-700/30 flex" @click="handleClose">
 			<div ref="dialogContent"
-				class="max-w-[60rem] w-full h-[40rem] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto"
+				class="max-w-[60rem] w-full h-[40rem] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto backdrop-blur-3xl"
 				:style="{
-					background: album ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url(' + (album.coverDeUrl) + ')' : '#191919',
+					background: album ? `linear-gradient(180deg, rgba(25, 25, 25, 0.8), rgba(25, 25, 25, 0.95)), url(${album.coverDeUrl})` : '#191919',
 					backgroundSize: 'cover',
 					backgroundPosition: 'center',
 					backgroundRepeat: 'no-repeat',
@@ -157,7 +157,7 @@ function playTheAlbum(from: number = 0) {
 						<div class="md:sticky md:top-[4.5rem] flex flex-col gap-8">
 							<div
 								class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 top-0 w-48 mx-auto md:w-72">
-								<img :src="album?.coverUrl" class="md:w-72 md:h-72 w-48 h-48 object-contain" />
+								<img :src="album?.coverUrl" class="md:w-72 md:h-72 w-48 h-48 object-contain shadow-2xl" />
 							</div>
 							<div class="flex flex-col gap-2 text-center md:text-left">
 								<div class="text-white text-2xl font-semibold">{{ album?.name }}</div>