1 files changed, 41 insertions, 24 deletions

diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss
index 24cf99bb..b62e1021 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/previewThumbnails.scss
@@ -2,54 +2,71 @@
 // Preview Thumbnails
 // --------------------------------------------------------------
 
-.plyr__preview-thumbnail-container {
-    background-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(0, 0, 0, 0); // The background colour above applies to the area under the border - so appears to be a border of 0.5 opacity black
-    border-radius: 2px;
+.plyr__preview-thumb {
+    background-color: $plyr-tooltip-bg;
+    border-radius: 3px;
     bottom: 100%;
     box-shadow: $plyr-tooltip-shadow;
-    left: 50%;
-    line-height: 1.3;
     margin-bottom: $plyr-tooltip-padding * 2;
     opacity: 0;
-    overflow: hidden;
+    padding: 3px;
     pointer-events: none;
     position: absolute;
     transition: opacity 0.2s 0.1s ease;
-    white-space: nowrap;
     z-index: 2;
 
-    img {
-        border-radius: 2px;
-        height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
-        left: 0;
-        max-height: none;
-        max-width: none;
+    // The background triangle
+    &::before {
+        border-left: $plyr-tooltip-arrow-size solid transparent;
+        border-right: $plyr-tooltip-arrow-size solid transparent;
+        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+        bottom: -$plyr-tooltip-arrow-size;
+        content: '';
+        height: 0;
+        left: 50%;
         position: absolute;
-        top: 0;
-        width: 100%;
+        transform: translateX(-50%);
+        width: 0;
+        z-index: 2;
+    }
+
+    &__image-container {
+        border-radius: 2px;
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+
+        img {
+            height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
+            left: 0;
+            max-height: none;
+            max-width: none;
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
     }
 
     // Seek time text
-    .plyr__preview-time-text-container {
-        bottom: 0;
+    &__time-container {
+        bottom: 6px;
         left: 0;
-        margin-bottom: 2px;
         position: absolute;
         right: 0;
+        white-space: nowrap;
         z-index: 3;
 
         span {
             background-color: rgba(0, 0, 0, 0.55);
-            color: rgba(255, 255, 255, 1);
-            font-size: $plyr-font-size-small;
-            font-weight: $plyr-font-weight-regular;
-            padding: 4px 6px 3px;
+            border-radius: 2px;
+            color: #fff;
+            font-size: $plyr-font-size-time;
+            padding: 3px 6px;
         }
     }
 }
 
-.plyr__preview-scrubbing-container {
+.plyr__preview-scrubber {
     bottom: 0;
     filter: blur(1px);
     height: 100%;