From ae9eaf3082a38d94b6ed988d8c0bf79e52d639e2 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 17 Jul 2026 11:15:05 +0200 Subject: [PATCH] Match image zoom close button to app button styling --- src/client/src/components/shared.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index c2c2559..97cfdeb 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -300,9 +300,9 @@ export const chatStyles = css` dialog.image-zoom[open] { display: flex; } dialog.image-zoom::backdrop { background: rgba(0, 0, 0, 0.8); } .image-zoom-full { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; object-fit: contain; cursor: zoom-out; } - .image-zoom-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: var(--pi-text); background: color-mix(in srgb, var(--pi-surface) 85%, transparent); border: 1px solid var(--pi-border); border-radius: 50%; cursor: pointer; } - .image-zoom-close:focus-visible { outline: 2px solid var(--pi-accent, var(--pi-success-border)); outline-offset: 2px; } - @media (min-width: 640px) { .image-zoom-close { top: -14px; right: -14px; background: var(--pi-surface); } } + .image-zoom-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; font: 16px/1 system-ui, sans-serif; color: var(--pi-muted); background: color-mix(in srgb, var(--pi-surface) 88%, transparent); border: 1px solid var(--pi-border); border-radius: 6px; cursor: pointer; } + .image-zoom-close:hover, .image-zoom-close:focus-visible { color: var(--pi-text-bright); border-color: var(--pi-accent); } + .image-zoom-close:focus-visible { outline: 1px solid var(--pi-border); outline-offset: 2px; } .group-msg { max-width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 0; border-top: 1px solid var(--pi-border-muted); color: var(--pi-text); overflow: visible; } .group-msg.tool { color: var(--pi-warning); } .group-msg.tool-execution-shell { color: var(--pi-text); }