snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match image zoom close button to app button styling

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-07-17 11:15:05 +02:00
parent 6cd666f9b8
commit ae9eaf3082
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/src/components/shared.ts
+3 -3
View File
@@ -300,9 +300,9 @@ export const chatStyles = css`
dialog.image-zoom[open] { display: flex; } dialog.image-zoom[open] { display: flex; }
dialog.image-zoom::backdrop { background: rgba(0, 0, 0, 0.8); } 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-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 { 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:focus-visible { outline: 2px solid var(--pi-accent, var(--pi-success-border)); outline-offset: 2px; } .image-zoom-close:hover, .image-zoom-close:focus-visible { color: var(--pi-text-bright); border-color: var(--pi-accent); }
@media (min-width: 640px) { .image-zoom-close { top: -14px; right: -14px; background: var(--pi-surface); } } .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 { 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 { color: var(--pi-warning); }
.group-msg.tool-execution-shell { color: var(--pi-text); } .group-msg.tool-execution-shell { color: var(--pi-text); }