diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
3 files changed, 104 insertions, 77 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; } } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index d7407cdaf..03e7aba67 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -157,43 +157,85 @@ position: absolute; } -.media-modal { - max-width: 80vw; - max-height: 80vh; +.video-modal { + max-width: 100vw; + max-height: 100vh; position: relative; - .extended-video-player, - img, - canvas, - video { - max-width: 80vw; - max-height: 80vh; - width: auto; - height: auto; - margin: auto; - } - - .extended-video-player, - video { + .extended-video-player { + width: 100%; + height: 100%; display: flex; - width: 80vw; - height: 80vh; + align-items: center; + justify-content: center; + + video { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + } } +} - img, - canvas { - display: block; - background: url('~images/void.png') repeat; - object-fit: contain; +.media-modal { + width: 100%; + height: 100%; + position: relative; +} + +.media-modal__closer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.media-modal__navigation { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + transition: opacity 0.3s linear; + will-change: opacity; + + * { + pointer-events: auto; } - .react-swipeable-view-container { - max-width: 80vw; + &.media-modal__navigation--hidden { + opacity: 0; + + * { + pointer-events: none; + } } } -.media-modal__content { - background: $base-overlay-background; +.media-modal__nav { + background: rgba($base-overlay-background, 0.5); + box-sizing: border-box; + border: 0; + color: $primary-text-color; + cursor: pointer; + display: flex; + align-items: center; + font-size: 24px; + height: 20vmax; + margin: auto 0; + padding: 30px 15px; + position: absolute; + top: 0; + bottom: 0; +} + +.media-modal__nav--left { + left: 0; +} + +.media-modal__nav--right { + right: 0; } .media-modal__pagination { @@ -201,7 +243,8 @@ text-align: center; position: absolute; left: 0; - bottom: -40px; + bottom: 20px; + pointer-events: none; } .media-modal__page-dot { @@ -225,8 +268,8 @@ .media-modal__close { position: absolute; - right: 4px; - top: 4px; + right: 8px; + top: 8px; z-index: 100; } @@ -244,8 +287,8 @@ @include fullwidth-gallery; video { - height: 100%; - width: 100%; + max-width: 100vw; + max-height: 80vh; z-index: 1; object-fit: cover; position: relative; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index d424b1eda..4f0d6e1bc 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -2,29 +2,6 @@ background: lighten($ui-base-color, 8%); } -.modal-container__nav { - align-items: center; - background: rgba($base-overlay-background, 0.5); - box-sizing: border-box; - border: 0; - color: $primary-text-color; - cursor: pointer; - display: flex; - font-size: 24px; - height: 100%; - padding: 30px 15px; - position: absolute; - top: 0; -} - -.modal-container__nav--left { - left: -61px; -} - -.modal-container__nav--right { - right: -61px; -} - .modal-root { transition: opacity 0.3s linear; will-change: opacity; |