fix: restyle fullscreen caption

src/server/app-assets.ts

@@ -38,6 +38,9 @@ export const APP_STYLES = `      :root {
         --photo-active-border: rgba(148, 163, 184, 0.34);
         --empty-border: rgba(148, 163, 184, 0.22);
         --overlay-bg: rgba(2, 6, 23, 0.7);
+        --overlay-media-bg: rgba(15, 23, 42, 0.86);
+        --overlay-media-border: rgba(148, 163, 184, 0.18);
+        --overlay-media-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
         --card-border: rgba(148, 163, 184, 0.16);
         --timeline-surface: rgba(15, 23, 42, 0.88);
         --timeline-surface-soft: rgba(15, 23, 42, 0.76);
@@ -98,6 +101,9 @@ export const APP_STYLES = `      :root {
         --photo-active-border: rgba(100, 116, 139, 0.32);
         --empty-border: rgba(15, 23, 42, 0.16);
         --overlay-bg: rgba(8, 12, 18, 0.7);
+        --overlay-media-bg: rgba(248, 250, 252, 0.94);
+        --overlay-media-border: rgba(148, 163, 184, 0.26);
+        --overlay-media-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
         --card-border: rgba(15, 23, 42, 0.11);
         --timeline-surface: rgba(255, 255, 255, 0.84);
         --timeline-surface-soft: rgba(255, 255, 255, 0.94);
@@ -600,7 +606,7 @@ export const APP_STYLES = `      :root {
         display: inline-grid;
         width: fit-content;
         max-width: min(100%, calc(100vw - 48px));
-        gap: 12px;
+        gap: 10px;
         overflow: hidden;
         border-radius: 0;
         background: transparent;
@@ -614,24 +620,9 @@ export const APP_STYLES = `      :root {
         width: fit-content;
         max-width: 100%;
         min-height: 0;
-        background: transparent;
-      }
-
-      .overlay-card header {
-        padding: 0 4px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        background: transparent;
-        color: var(--timeline-text);
-      }
-
-      .overlay-card header strong {
-        display: inline-flex;
-        padding: 8px 12px;
-        background: var(--timeline-surface-soft);
-        border: 1px solid var(--timeline-border);
-        backdrop-filter: blur(14px);
+        background: var(--overlay-media-bg);
+        border: 1px solid var(--overlay-media-border);
+        box-shadow: var(--overlay-media-shadow);
       }
 
       .overlay-card img {
@@ -640,10 +631,31 @@ export const APP_STYLES = `      :root {
         max-width: min(1440px, calc(100vw - 48px));
         max-height: calc(100vh - 112px);
         object-fit: contain;
-        background: var(--timeline-surface-strong);
+        background: transparent;
         transition: opacity 120ms ease;
       }
 
+      .overlay-caption {
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        color: var(--timeline-text-muted);
+      }
+
+      .overlay-caption strong {
+        display: block;
+        max-width: min(72ch, calc(100vw - 96px));
+        padding: 0 10px;
+        font-size: 0.78rem;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: 1.35;
+        color: var(--timeline-text-muted);
+        opacity: 0.9;
+      }
+
       .overlay-card.loading img {
         opacity: 0;
       }

src/server/page-template.ts

@@ -144,9 +144,6 @@ ${APP_STYLES}
         x
       </button>
       <div class="overlay-card">
-        <header>
-          <strong id="overlay-title">Photo</strong>
-        </header>
         <div class="overlay-media">
           <div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">
             <span class="spinner active" aria-hidden="true"></span>
@@ -154,6 +151,9 @@ ${APP_STYLES}
           </div>
           <img id="overlay-image" alt="" />
         </div>
+        <footer class="overlay-caption">
+          <strong id="overlay-title">Photo</strong>
+        </footer>
       </div>
     </div>