.imagefull-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: default; animation: imagefull-fade 140ms ease-out; } .imagefull-image { max-width: 100vw; max-height: 100vh; transform-origin: center center; transform: translate3d(var(--imagefull-tx, 0px), var(--imagefull-ty, 0px), 0) scale(var(--imagefull-scale, 1)); transition: transform 60ms linear; user-select: none; -webkit-user-drag: none; pointer-events: auto; will-change: transform; } .imagefull-image.imagefull-zoomed { cursor: grab; } .imagefull-image.imagefull-dragging { cursor: grabbing; transition: none; } .imagefull-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); font-size: 13px; pointer-events: none; font-family: var(--font-interface); animation: imagefull-hint-fade 4s ease-out forwards; } @keyframes imagefull-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes imagefull-hint-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }