From ff753fc2ffbbd64496ea6b0d2ad968482034c81b Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Wed, 10 Jun 2026 22:38:19 +0800
Subject: [PATCH 1/2] style(album): Update preview image navigation button
 styles

---
 components/album/preview-image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/album/preview-image.tsx b/components/album/preview-image.tsx
index 792a27e2..f270433f 100644
--- a/components/album/preview-image.tsx
+++ b/components/album/preview-image.tsx
@@ -478,7 +478,7 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollPrev()}
               aria-label="Previous photo"
-              className="absolute left-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur transition-opacity hover:bg-black/50 sm:flex"
+              className="absolute left-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-xl bg-background/95 text-foreground shadow-lg backdrop-blur-md transition-all hover:bg-background hover:shadow-xl sm:flex border border-border"
             >
               <ChevronLeftIcon size={22} />
             </button>
@@ -488,7 +488,7 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollNext()}
               aria-label="Next photo"
-              className="absolute right-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur transition-opacity hover:bg-black/50 sm:flex"
+              className="absolute right-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-xl bg-background/95 text-foreground shadow-lg backdrop-blur-md transition-all hover:bg-background hover:shadow-xl sm:flex border border-border"
             >
               <ChevronRightIcon size={22} />
             </button>

From a2a40d7b284347b9d5faee04a473011361a1a020 Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Wed, 10 Jun 2026 23:44:42 +0800
Subject: [PATCH 2/2] style(album): Optimize image preview component navigation
 button styles

---
 components/album/preview-image.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/album/preview-image.tsx b/components/album/preview-image.tsx
index f270433f..9bde283a 100644
--- a/components/album/preview-image.tsx
+++ b/components/album/preview-image.tsx
@@ -478,9 +478,9 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollPrev()}
               aria-label="Previous photo"
-              className="absolute left-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-xl bg-background/95 text-foreground shadow-lg backdrop-blur-md transition-all hover:bg-background hover:shadow-xl sm:flex border border-border"
+              className="absolute left-2 top-1/2 z-30 hidden backdrop-blur text-gray-300 rounded-full items-center justify-center sm:flex"
             >
-              <ChevronLeftIcon size={22} />
+              <ChevronLeftIcon className='!bg-transparent hover:!bg-transparent' size={22} />
             </button>
           )}
           {hasNext && (
@@ -488,9 +488,9 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollNext()}
               aria-label="Next photo"
-              className="absolute right-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-xl bg-background/95 text-foreground shadow-lg backdrop-blur-md transition-all hover:bg-background hover:shadow-xl sm:flex border border-border"
+              className="absolute right-2 top-1/2 z-30 hidden backdrop-blur text-gray-300 rounded-full items-center justify-center sm:flex"
             >
-              <ChevronRightIcon size={22} />
+              <ChevronRightIcon className='!bg-transparent hover:!bg-transparent' size={22} />
             </button>
           )}
           {photos.length > 1 && !lightboxPhoto && (