diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/index.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 51 |
1 files changed, 29 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index aa33c9333..afb54056c 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -353,35 +353,42 @@ .image-loader { position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; - &.image-loader--loading { - .image-loader__preview-canvas { - filter: blur(2px); - } + .image-loader__preview-canvas { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + background: url('~images/void.png') repeat; + object-fit: contain; } - .image-loader__img { - position: absolute; - top: 0; - left: 0; - right: 0; - max-width: 100%; - max-height: 100%; - background-image: none; + &.image-loader--loading .image-loader__preview-canvas { + filter: blur(2px); } - &.image-loader--amorphous { - position: static; + &.image-loader--amorphous .image-loader__preview-canvas { + display: none; + } +} - .image-loader__preview-canvas { - display: none; - } +.zoomable-image { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; - .image-loader__img { - position: static; - width: auto; - height: auto; - } + img { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + width: auto; + height: auto; + object-fit: contain; } } |