way/pigway-frame-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 29 Wiki Activity

Enlarge image viewer with fit and actual-size modes

Browse Source
This commit is contained in:
Pigway
2026-10-08 19:40:05 +08:00
parent 0b9b548d20
commit dafcf8ecb4
3 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/style.css
+9
View File
@@ -54,3 +54,12 @@ input[type="file"]::file-selector-button{margin-inline-end:12px}
.source-items button small{display:block;margin-top:8px;color:var(--muted)}
.history-table [data-reconcile]{white-space:nowrap;overflow-wrap:normal;margin-top:8px}
/* Image dialogs use the viewport; forms keep their existing compact width. */
dialog.image-viewer{width:calc(100vw - 32px);max-width:1600px;max-height:calc(100dvh - 32px);padding:20px;overflow:auto}
.image-viewer-toolbar{margin:12px 0}
.image-viewer-toolbar button[aria-pressed="true"]{background:var(--accent);color:var(--panel)}
.image-viewer-viewport{max-height:calc(100dvh - 220px);overflow:auto;text-align:center;background:var(--soft);border-radius:12px}
.image-viewer-viewport img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 220px);object-fit:contain;margin:0 auto}
.image-viewer-viewport.actual-size img{width:auto;height:auto;max-width:none;max-height:none;margin:0}
@media(max-width:600px){dialog.image-viewer{width:calc(100vw - 16px);padding:12px}.image-viewer-viewport,.image-viewer-viewport img{max-height:calc(100dvh - 240px)}.image-viewer-viewport.actual-size img{max-height:none}}