html.image-viewer-opened, body.image-viewer-opened { overflow: hidden !important; } .image-viewer-container { background: rgba(0,0,0,0.85); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100000; display: none; justify-content: center; align-items: center; } /* @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { .image-viewer-container { background: rgba(0,0,0,0.618); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } } */ .image-viewer-container.opened { display: flex; } .image-viewer { width: 90%; height: 90%; display: grid; grid-template-columns: auto 48px; grid-template-rows: 48px auto 48px; grid-template-areas: "image close" "image ." "image download"; grid-column-gap: 12px; justify-items: center; justify-content: stretch; align-items: center; align-content: stretch; } .image-viewer .image { grid-area: image; width: auto; height: auto; max-width: 100%; max-height: 100%; } .image-viewer .close { grid-area: close; } .image-viewer .download { grid-area: download; } .image-viewer-icon { cursor: pointer; width: 100%; height: 100%; } .image-viewer-icon svg { max-width: 48px; max-height: 48px; } .image-viewer-icon path { fill: #eee; transition: all 0.2s; transform-origin: center; } .image-viewer-icon:hover path { fill: var(--theme-color); transform: scale(1.2); }