diff options
author | David Yip <yipdw@member.fsf.org> | 2018-04-12 00:20:19 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-12 00:20:19 -0500 |
commit | 0b326950bf8d38fd7c98a71d6bc1c93067c8ceb5 (patch) | |
tree | 744801a0a80321ea57de6fc7821904a2af9eec01 /app/javascript/flavours/glitch/styles/components/media.scss | |
parent | 763cda91a83dd7e3eea7afb2dbe1ff149d849b87 (diff) | |
parent | 9073687f66a8e82d19a56ec85eef2c27f63412dc (diff) |
Merge pull request #416 from ThibG/glitch-soc/features/media-modal
Port various media modal improvements to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/media.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/media.scss | 107 |
1 files changed, 75 insertions, 32 deletions
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; |