aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass')
-rw-r--r--src/sass/components/progress.scss2
-rw-r--r--src/sass/lib/mixins.scss5
-rw-r--r--src/sass/plugins/previewThumbnails.scss118
-rw-r--r--src/sass/plyr.scss1
-rw-r--r--src/sass/settings/sliders.scss4
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