diff options
| author | James <james@hale.com.au> | 2018-11-12 15:55:26 +1100 |
|---|---|---|
| committer | James <james@hale.com.au> | 2018-11-12 15:55:26 +1100 |
| commit | 8f27611911d9e6b4c6012e1af44b6c14cf6eaffb (patch) | |
| tree | 2e99daa1e7812e289906d9730e2765933a109435 /src/sass | |
| parent | 7d484c6e09267020f06d3dd6dbd0a434ea3cbc9b (diff) | |
| download | plyr-8f27611911d9e6b4c6012e1af44b6c14cf6eaffb.tar.lz plyr-8f27611911d9e6b4c6012e1af44b6c14cf6eaffb.tar.xz plyr-8f27611911d9e6b4c6012e1af44b6c14cf6eaffb.zip | |
Preview seek/scrubbing thumbnails
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/plugins/previewThumbnails.scss | 70 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 1 |
2 files changed, 71 insertions, 0 deletions
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss new file mode 100644 index 00000000..92702e39 --- /dev/null +++ b/src/sass/plugins/previewThumbnails.scss @@ -0,0 +1,70 @@ +// -------------------------------------------------------------- +// 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; + + img { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + margin: auto; + height: 100%; + width: 100%; + border-radius: 0px; + } + + // Seek time text + span { + position: absolute; + bottom: 0px; + z-index: 3; + transform: translate(-50%,0); + 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%; + z-index: 1; + transition: opacity 0.3s 0.3s ease; + filter: blur(1px); + + img { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + margin: auto; + height: 100%; + width: 100%; + 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'; |