diff options
Diffstat (limited to 'src/sass/plugins')
| -rw-r--r-- | src/sass/plugins/previewThumbnails.scss | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss index b62e1021..8fb0132d 100644 --- a/src/sass/plugins/previewThumbnails.scss +++ b/src/sass/plugins/previewThumbnails.scss @@ -12,9 +12,16 @@ padding: 3px; pointer-events: none; position: absolute; - transition: opacity 0.2s 0.1s ease; + transform: translate(0, 10px) scale(0.8); + transform-origin: 50% 100%; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; z-index: 2; + &--is-shown { + opacity: 1; + transform: translate(0, 0) scale(1); + } + // The background triangle &::before { border-left: $plyr-tooltip-arrow-size solid transparent; @@ -31,6 +38,7 @@ } &__image-container { + background: $plyr-color-heather; border-radius: 2px; overflow: hidden; position: relative; @@ -66,12 +74,13 @@ } } -.plyr__preview-scrubber { +.plyr__preview-scrubbing { bottom: 0; filter: blur(1px); height: 100%; left: 0; margin: auto; // Required when video is different dimensions to container (e.g., fullscreen) + opacity: 0; overflow: hidden; position: absolute; right: 0; @@ -90,4 +99,8 @@ top: 0; width: 100%; } + + &--is-shown { + opacity: 1; + } } |