aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/plugins
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/plugins')
-rw-r--r--src/sass/plugins/ads.scss86
-rw-r--r--src/sass/plugins/preview-thumbnails.scss118
-rw-r--r--src/sass/plugins/preview-thumbnails/index.scss108
-rw-r--r--src/sass/plugins/preview-thumbnails/settings.scss15
4 files changed, 166 insertions, 161 deletions
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index a577e680..16fb43e4 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -3,54 +3,54 @@
// ==========================================================================
.plyr__ads {
- border-radius: inherit;
- bottom: 0;
- cursor: pointer;
- left: 0;
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 0;
- z-index: -1; // Hide it by default
+ border-radius: inherit;
+ bottom: 0;
+ cursor: pointer;
+ left: 0;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: -1; // Hide it by default
- // Make sure the inner container is big enough for the ad creative.
- > div,
- > div iframe {
- height: 100%;
- position: absolute;
- width: 100%;
- }
+ // Make sure the inner container is big enough for the ad creative.
+ > div,
+ > div iframe {
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ }
- // The countdown label
- &::after {
- background: rgba($plyr-color-gray-900, 0.8);
- border-radius: 2px;
- bottom: $plyr-control-spacing;
- color: #fff;
- content: attr(data-badge-text);
- font-size: 11px;
- padding: 2px 6px;
- pointer-events: none;
- position: absolute;
- right: $plyr-control-spacing;
- z-index: 3;
- }
+ // The countdown label
+ &::after {
+ background: $plyr-color-gray-900;
+ border-radius: 2px;
+ bottom: $plyr-control-spacing;
+ color: #fff;
+ content: attr(data-badge-text);
+ font-size: 11px;
+ padding: 2px 6px;
+ pointer-events: none;
+ position: absolute;
+ right: $plyr-control-spacing;
+ z-index: 3;
+ }
- &::after:empty {
- display: none;
- }
+ &::after:empty {
+ display: none;
+ }
}
// Advertisement cue's for the progress bar
.plyr__cues {
- background: currentColor;
- display: block;
- height: $plyr-range-track-height;
- left: 0;
- margin: -($plyr-range-track-height / 2) 0 0;
- opacity: 0.8;
- position: absolute;
- top: 50%;
- width: 3px;
- z-index: 3; // Between progress and thumb
+ background: currentColor;
+ display: block;
+ height: $plyr-range-track-height;
+ left: 0;
+ margin: -($plyr-range-track-height / 2) 0 0;
+ opacity: 0.8;
+ position: absolute;
+ top: 50%;
+ width: 3px;
+ z-index: 3; // Between progress and thumb
}
diff --git a/src/sass/plugins/preview-thumbnails.scss b/src/sass/plugins/preview-thumbnails.scss
deleted file mode 100644
index d20c9d18..00000000
--- a/src/sass/plugins/preview-thumbnails.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-// --------------------------------------------------------------
-// Preview Thumbnails
-// --------------------------------------------------------------
-
-$plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-background: $plyr-tooltip-background !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-background: $plyr-color-gray-200 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
-$plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
-$plyr-preview-time-color: #fff;
-$plyr-preview-time-bottom-offset: 6px;
-
-.plyr__preview-thumb {
- background-color: $plyr-preview-background;
- 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-background;
- 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-background;
- 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-background;
- 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/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss
new file mode 100644
index 00000000..6a0382d0
--- /dev/null
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@@ -0,0 +1,108 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings.scss';
+
+.plyr__preview-thumb {
+ background-color: $plyr-preview-background;
+ border-radius: 3px;
+ bottom: 100%;
+ box-shadow: $plyr-preview-shadow;
+ margin-bottom: calc(#{$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-background;
+ bottom: calc(#{$plyr-preview-arrow-size} * -1);
+ content: '';
+ height: 0;
+ left: 50%;
+ position: absolute;
+ transform: translateX(-50%);
+ width: 0;
+ z-index: 2;
+ }
+
+ &__image-container {
+ background: $plyr-preview-image-background;
+ border-radius: calc(#{$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-background;
+ 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/plugins/preview-thumbnails/settings.scss b/src/sass/plugins/preview-thumbnails/settings.scss
new file mode 100644
index 00000000..155d6019
--- /dev/null
+++ b/src/sass/plugins/preview-thumbnails/settings.scss
@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !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-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 22:30:46 +0000