diff options
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/components/progress.scss | 2 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 5 | ||||
| -rw-r--r-- | src/sass/plugins/previewThumbnails.scss | 118 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 1 | ||||
| -rw-r--r-- | src/sass/settings/sliders.scss | 4 |
5 files changed, 122 insertions, 8 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/lib/mixins.scss b/src/sass/lib/mixins.scss index 0a0f7dcb..acd8af1e 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -69,11 +69,6 @@ width: 100%; } - .plyr__video-embed { - // Revert overflow change - overflow: visible; - } - // Vimeo requires some different styling &.plyr--vimeo .plyr__video-wrapper { height: 0; diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss new file mode 100644 index 00000000..02a2f619 --- /dev/null +++ b/src/sass/plugins/previewThumbnails.scss @@ -0,0 +1,118 @@ +// -------------------------------------------------------------- +// Preview Thumbnails +// -------------------------------------------------------------- + +$plyr-preview-padding: $plyr-tooltip-padding !default; +$plyr-preview-bg: $plyr-tooltip-bg !default; +$plyr-preview-radius: $plyr-tooltip-radius !default; +$plyr-preview-shadow: $plyr-tooltip-shadow !default; +$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default; +$plyr-preview-image-bg: $plyr-color-heather !default; +$plyr-preview-time-font-size: $plyr-font-size-time !default; +$plyr-preview-time-padding: 3px 6px !default; +$plyr-preview-time-bg: rgba(0, 0, 0, 0.55); +$plyr-preview-time-color: #fff; +$plyr-preview-time-bottom-offset: 6px; + +.plyr__preview-thumb { + background-color: $plyr-preview-bg; + border-radius: 3px; + bottom: 100%; + box-shadow: $plyr-preview-shadow; + margin-bottom: $plyr-preview-padding * 2; + opacity: 0; + padding: $plyr-preview-radius; + pointer-events: none; + position: absolute; + 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-preview-arrow-size solid transparent; + border-right: $plyr-preview-arrow-size solid transparent; + border-top: $plyr-preview-arrow-size solid $plyr-preview-bg; + bottom: -$plyr-preview-arrow-size; + content: ''; + height: 0; + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 0; + z-index: 2; + } + + &__image-container { + background: $plyr-preview-image-bg; + border-radius: ($plyr-preview-radius - 1px); + overflow: hidden; + position: relative; + z-index: 0; + + img { + height: 100%; // Non sprite images are 100%. 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 + &__time-container { + bottom: $plyr-preview-time-bottom-offset; + left: 0; + position: absolute; + right: 0; + white-space: nowrap; + z-index: 3; + + span { + background-color: $plyr-preview-time-bg; + border-radius: ($plyr-preview-radius - 1px); + color: $plyr-preview-time-color; + font-size: $plyr-preview-time-font-size; + padding: $plyr-preview-time-padding; + } + } +} + +.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; + top: 0; + transition: opacity 0.3s ease; + width: 100%; + z-index: 1; + + &--is-shown { + opacity: 1; + } + + img { + height: 100%; + left: 0; + max-height: none; + max-width: none; + object-fit: contain; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 7c36c307..7d69871c 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -45,6 +45,7 @@ $css-vars-use-native: true; @import 'states/fullscreen'; @import 'plugins/ads'; +@import 'plugins/previewThumbnails'; @import 'utils/animation'; @import 'utils/hidden'; diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index 3ad44534..3d77f485 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -6,13 +6,13 @@ $plyr-range-thumb-active-shadow-width: 3px !default; // Thumb -$plyr-range-thumb-height: 14px !default; +$plyr-range-thumb-height: 13px !default; $plyr-range-thumb-bg: #fff !default; $plyr-range-thumb-border: 2px solid transparent !default; $plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default; // Track -$plyr-range-track-height: 4px !default; +$plyr-range-track-height: 5px !default; $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; // Fill |