diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-21 12:26:07 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-21 12:26:07 -0400 |
commit | 7d94eb1dcabea72712050d8a7059d7c7ee674f0c (patch) | |
tree | d0c94f4b1aa171776c53ac496b9c9f31e9d66945 /web/sass-files/sass | |
parent | 9553e44dc55e1798180a942e774e9b11f8b01d67 (diff) | |
parent | b9c637ec82d28684029573af119606575f4978d0 (diff) | |
download | chat-7d94eb1dcabea72712050d8a7059d7c7ee674f0c.tar.gz chat-7d94eb1dcabea72712050d8a7059d7c7ee674f0c.tar.bz2 chat-7d94eb1dcabea72712050d8a7059d7c7ee674f0c.zip |
Merge pull request #1098 from florianorben/PLT-616
PLT-616: Enable playing of animated GIF in thumbnails and preview
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 39 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 13 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 4 |
3 files changed, 56 insertions, 0 deletions
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 01057423d..d3ab3b9f8 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -133,12 +133,34 @@ height: 100%; background-color: #FFF; background-repeat: no-repeat; + overflow: hidden; + position: relative; + text-align: center; &.small { background-position: center; } &.normal { background-position: top left; } + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + .file__loaded { + max-width: initial; + &.landscape, &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } + } + &:hover .file-playback-controls.stop { + @include opacity(1); + } } .post-image__thumbnail { float: left; @@ -215,3 +237,20 @@ } } } + +.file-playback-controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; + + &.stop { + @include opacity(0); + } +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 5570b5ce4..1dcdbf348 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -228,11 +228,24 @@ background: #FFF; display: table-cell; vertical-align: middle; + position: relative; + + &:hover .file-playback-controls.stop { + @include opacity(1); + } } img { max-width: 100%; max-height: 100%; } + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } } .modal-content{ box-shadow: none; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 3bffe82a2..c8bb24f3a 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -758,6 +758,10 @@ .post-comments { padding: 9px 21px 10px 10px !important; } + + .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { + @include opacity(1); + } } @media screen and (max-width: 640px) { .access-history__table { |