atagen

malice

public
Star0
Fork0
Watch0
35 commits2 branches0 tags0 releases4.4 MiB

Commit 87336a53e733

tarball

atagen <boss@atagen.co>2026-10-24 10:38 UTC

1 file changed+5-0
web: drop the image placeholder frame once the image loads

Screenshots often carry transparent drop-shadow margins, and the permanent --bg-soft fill and border on .media-image turned that margin into a grey card around the content.
web/src/lib/MediaAttachmentView.svelte+5
@@ -14,9 +14,11 @@
1414 $: previewable = PREVIEWABLE.has(attachment.kind);
1515
1616 let fullFailed = false;
17+ let loaded = false;
1718
1819 $: if (attachment.id) {
1920 fullFailed = false;
21+ loaded = false;
2022 }
2123
2224 function openLightbox(ev: MouseEvent): void {
@@ -47,9 +49,11 @@
4749 <a href={fullUrl} target="_blank" rel="noopener noreferrer" title={attachment.filename} on:click={openLightbox}>
4850 <img
4951 class="media-image"
52+ class:loaded
5053 src={fullUrl}
5154 alt={attachment.caption || attachment.filename}
5255 loading="lazy"
56+ on:load={() => (loaded = true)}
5357 on:error={() => (fullFailed = true)}
5458 />
5559 </a>
@@ -111,6 +115,7 @@
111115 border: 1px solid var(--border);
112116 background: var(--bg-soft);
113117 }
118+ .media-image.loaded { border-color: transparent; background: none; }
114119 .media-video { display: block; max-width: 100%; max-height: 320px; border-radius: var(--r-md); background: #000; }
115120 .media-audio { display: block; width: 100%; max-width: 420px; margin-top: 6px; }
116121 .media-block { margin: 6px 0 2px; max-width: 420px; }