apps/mapix
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine fullscreen photo overlay

Browse Source
This commit is contained in:
br0tkasten committed 2026-06-14 10:36:37 +02:00
1 parent 9b40ec9ca5
commit e4374b1617
3 files changed
+80 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/server/app-assets.ts
+44 -13
View File
@@ -37,7 +37,7 @@ export const APP_STYLES = ` :root {
--photo-active-bg: rgba(51, 65, 85, 0.76);
--photo-active-border: rgba(148, 163, 184, 0.34);
--empty-border: rgba(148, 163, 184, 0.22);
--overlay-bg: rgba(2, 6, 23, 0.9);
--overlay-bg: rgba(2, 6, 23, 0.7);
--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);
@@ -97,7 +97,7 @@ export const APP_STYLES = ` :root {
--photo-active-bg: rgba(100, 116, 139, 0.12);
--photo-active-border: rgba(100, 116, 139, 0.32);
--empty-border: rgba(15, 23, 42, 0.16);
--overlay-bg: rgba(8, 12, 18, 0.78);
--overlay-bg: rgba(8, 12, 18, 0.7);
--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);
@@ -587,6 +587,7 @@ export const APP_STYLES = ` :root {
display: none;
place-items: center;
background: var(--overlay-bg);
backdrop-filter: blur(4px);
z-index: 1000;
padding: 24px;
}
@@ -598,11 +599,13 @@ export const APP_STYLES = ` :root {
.overlay-card {
display: inline-grid;
width: fit-content;
max-width: 100%;
max-width: min(100%, calc(100vw - 48px));
gap: 12px;
overflow: hidden;
border-radius: 0;
background: var(--timeline-surface-soft);
border-color: var(--timeline-border);
background: transparent;
border: 0;
box-shadow: none;
color: var(--timeline-text);
}
@@ -610,25 +613,32 @@ export const APP_STYLES = ` :root {
position: relative;
width: fit-content;
max-width: 100%;
min-height: 48vh;
background: var(--timeline-surface-strong);
min-height: 0;
background: transparent;
}
.overlay-card header {
padding: 16px 18px;
border-bottom: 1px solid var(--timeline-border);
padding: 0 4px;
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
background: var(--timeline-surface-strong);
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);
}
.overlay-card img {
display: block;
width: auto;
max-width: min(1120px, calc(100vw - 48px));
max-height: 78vh;
max-width: min(1440px, calc(100vw - 48px));
max-height: calc(100vh - 112px);
object-fit: contain;
background: var(--timeline-surface-strong);
transition: opacity 120ms ease;
@@ -677,6 +687,27 @@ export const APP_STYLES = ` :root {
color: var(--timeline-text);
}
.overlay-close {
position: fixed;
top: 16px;
right: 16px;
z-index: 1001;
width: 40px;
height: 40px;
padding: 0;
justify-content: center;
background: var(--timeline-surface-soft);
color: var(--timeline-text);
border: 1px solid var(--timeline-border);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(14px);
}
.overlay-close:hover {
background: var(--timeline-surface-strong);
border-color: var(--timeline-border-strong);
}
.thumb {
width: min(210px, 100%);
box-sizing: border-box;
src/server/page-template.ts
+3 -3
View File
@@ -140,12 +140,12 @@ ${APP_STYLES}
</section>
<div class="overlay" id="overlay" aria-hidden="true">
<button class="close overlay-close" id="close-overlay" type="button" aria-label="Close photo">
x
</button>
<div class="overlay-card">
<header>
<strong id="overlay-title">Photo</strong>
<button class="close" id="close-overlay" type="button" aria-label="Close photo">
x
</button>
</header>
<div class="overlay-media">
<div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">