From 85146be7eff313b8249b635208e7c1a850b7a3d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 23 Sep 2026 13:48:03 +0800
Subject: [PATCH] fix(viewer): restore lightbox close button styles orphaned by
 menu removal (transparent bg, white X icon, hover/focus)

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 apps/viewer/src/components/PhotoLightbox.vue | 29 ++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/viewer/src/components/PhotoLightbox.vue b/apps/viewer/src/components/PhotoLightbox.vue
index 441d53f..d332de7 100644
--- a/apps/viewer/src/components/PhotoLightbox.vue
+++ b/apps/viewer/src/components/PhotoLightbox.vue
@@ -516,7 +516,7 @@ onBeforeUnmount(() => {
     @dblclick="onDblClick"
     @keydown.tab="onTrapTab"
   >
-    <!-- 顶栏（§5.1：52-56px 深色半透明）：关闭 / 位置计数 / ⋯ 更多菜单 -->
+    <!-- 顶栏（§5.1：52-56px 深色半透明）：关闭 / 位置计数（⋯ 菜单已按用户要求移除） -->
     <header class="viewer-topbar" data-lightbox-chrome>
       <button type="button" class="viewer-close" :aria-label="t('viewer.close')" @click="emit('close')">
         <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
@@ -674,7 +674,32 @@ onBeforeUnmount(() => {
   padding-top: env(safe-area-inset-top, 0px);
   background: rgba(14, 18, 24, 0.72);
 }
-.viewer-close,
+.viewer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viewer-touch-target, 44px);
+  height: var(--viewer-touch-target, 44px);
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #ffffff;
+  cursor: pointer;
+}
+.viewer-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.viewer-close:focus-visible {
+  outline: 2px solid var(--viewer-primary, #1a73e8);
+}
+.viewer-close svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
 
 /* 舞台：占剩余空间；contain 完整大图（不裁切）；手势区 touch-action none。 */
 .viewer-stage {