From 07a50ebf3ba9231132ba839c33cb4eef236e7dfa Mon Sep 17 00:00:00 2001
From: nesquena-hermes <[email protected]>
Date: Tue, 2 Jun 2026 00:09:32 +0000
Subject: [PATCH] polish(#3220): clarify download button on dark images (border
 + backdrop blur)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nathan feedback: the download icon read as 'oddly placed' on dark generated
images. Geometry was already correct (8px inset on the image corner) — the
issue was low contrast: a flat rgba(0,0,0,.55) button blends into a dark image.
Add a subtle 1px white border, soft shadow, and 3px backdrop-blur so the button
reads as a clear chip-on-image regardless of the underlying pixels (the standard
treatment for on-image controls). CSS-only.
---
 static/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/style.css b/static/style.css
index e63e673b..8ad23043 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1572,9 +1572,9 @@
      they never overflow the message column or a mobile viewport. Lightbox-on-click
      (cursor:zoom-in) is preserved. */
   .msg-artifact-image .msg-media-img{margin:0;display:block;width:auto;height:auto;max-width:min(360px,100%);max-height:360px;object-fit:contain;border-radius:8px;cursor:zoom-in;}
-  .msg-artifact-download{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s,background .12s;pointer-events:none;}
+  .msg-artifact-download{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.25);box-shadow:0 1px 4px rgba(0,0,0,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;text-decoration:none;opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s,background .12s;pointer-events:none;}
   .msg-artifact-image:hover .msg-artifact-download,.msg-artifact-image:focus-within .msg-artifact-download{opacity:1;transform:translateY(0);pointer-events:auto;}
-  .msg-artifact-download:hover{background:rgba(0,0,0,.78);}
+  .msg-artifact-download:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.4);}
   .msg-artifact-download:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--accent-bg-strong);outline-offset:1px;}
   @media (hover:none){.msg-artifact-download{opacity:1;pointer-events:auto;transform:none;}}