Style tweaks for preview plugin

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;
+    }
 }