diff options
| author | Daniel Polito <[email protected]> | 2025-12-29 14:22:48 -0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2025-12-29 11:22:48 -0600 |
| commit | b7ce46f7a12e68283d6588c33aaf972426ddd65e (patch) | |
| tree | b1599ff88021779f969c646a1e154b8871d46129 /packages/ui/src/components/image-preview.css | |
| parent | 82b8d8fa5dd9206607b60de6130a6115cee68830 (diff) | |
| download | opencode-b7ce46f7a12e68283d6588c33aaf972426ddd65e.tar.gz opencode-b7ce46f7a12e68283d6588c33aaf972426ddd65e.zip | |
Desktop: Image Preview and Dedupe File Upload (#6372)
Diffstat (limited to 'packages/ui/src/components/image-preview.css')
| -rw-r--r-- | packages/ui/src/components/image-preview.css | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/packages/ui/src/components/image-preview.css b/packages/ui/src/components/image-preview.css new file mode 100644 index 000000000..3c47f7a25 --- /dev/null +++ b/packages/ui/src/components/image-preview.css @@ -0,0 +1,63 @@ +[data-component="image-preview"] { + position: fixed; + inset: 0; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + + [data-slot="image-preview-container"] { + position: relative; + z-index: 50; + width: min(calc(100vw - 32px), 90vw); + max-width: 1200px; + height: min(calc(100vh - 32px), 90vh); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + [data-slot="image-preview-content"] { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-height: 100%; + border-radius: var(--radius-lg); + background: var(--surface-raised-stronger-non-alpha); + box-shadow: + 0 15px 45px 0 rgba(19, 16, 16, 0.35), + 0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25), + 0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2); + overflow: hidden; + + &:focus-visible { + outline: none; + } + + [data-slot="image-preview-header"] { + display: flex; + padding: 8px 8px 0; + justify-content: flex-end; + align-items: center; + align-self: stretch; + } + + [data-slot="image-preview-body"] { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + overflow: auto; + } + + [data-slot="image-preview-image"] { + max-width: 100%; + max-height: calc(90vh - 100px); + object-fit: contain; + border-radius: var(--radius-md); + } + } + } +} |