diff options
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/components/progress.scss | 2 | ||||
| -rw-r--r-- | src/sass/plugins/previewThumbnails.scss | 77 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 1 |
3 files changed, 79 insertions, 1 deletions
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index 16992808..f28a19ca 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -42,13 +42,13 @@ &::-webkit-progress-bar { background: transparent; - transition: width 0.2s ease; } &::-webkit-progress-value { background: currentColor; border-radius: 100px; min-width: $plyr-range-track-height; + transition: width 0.2s ease; } // Mozilla diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss new file mode 100644 index 00000000..4de90667 --- /dev/null +++ b/src/sass/plugins/previewThumbnails.scss @@ -0,0 +1,77 @@ +// -------------------------------------------------------------- +// 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: 0px; + bottom: 100%; + box-shadow: $plyr-tooltip-shadow; + left: 50%; + line-height: 1.3; + margin-bottom: $plyr-tooltip-padding * 2; + opacity: 0; + pointer-events: none; + position: absolute; + transition: opacity 0.2s 0.1s ease; + white-space: nowrap; + z-index: 2; + + overflow: hidden; + + img { + position: absolute; + left: 0px; + top: 0px; + height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript + width: 100%; + max-height: none; + max-width: none; + border-radius: 0px; + } + + // Seek time text + .plyr__preview-time-text-container { + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + margin-bottom: 2px; + z-index: 3; + + span { + background-color: rgba(0,0,0,0.55); + color: rgba(255,255,255,1); + padding: 4px 6px 3px 6px; + font-size: $plyr-font-size-small; + font-weight: $plyr-font-weight-regular; + } + } +} + +.plyr__preview-scrubbing-container { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + height: 100%; + width: 100%; + margin: auto; // Required when video is different dimensions to container (e.g., fullscreen) + overflow: hidden; + z-index: 1; + transition: opacity 0.3s ease; + filter: blur(1px); + + img { + position: absolute; + left: 0px; + top: 0px; + height: 100%; + width: 100%; + max-height: none; + max-width: none; + object-fit: contain; + } +} diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 3d824f7d..468c534c 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -42,6 +42,7 @@ @import 'states/fullscreen'; @import 'plugins/ads'; +@import 'plugins/previewThumbnails'; @import 'utils/animation'; @import 'utils/hidden'; |