aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components')
-rw-r--r--src/sass/components/controls.scss64
-rw-r--r--src/sass/components/embed.scss36
-rw-r--r--src/sass/components/progress.scss15
-rw-r--r--src/sass/components/video.scss33
4 files changed, 74 insertions, 74 deletions
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 41426e8b..f4559bba 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -12,44 +12,49 @@
align-items: center;
display: flex;
justify-content: flex-end;
+ min-width: 0; // Fix for Edge issue where content would overflow
text-align: center;
- // Spacing
- > .plyr__control,
- .plyr__progress,
- .plyr__time,
- .plyr__menu,
- .plyr__volume {
- margin-left: ($plyr-control-spacing / 2);
+ .plyr__progress__container {
+ flex: 1;
}
- .plyr__menu + .plyr__control,
- > .plyr__control + .plyr__menu,
- > .plyr__control + .plyr__control,
- .plyr__progress + .plyr__control {
- margin-left: floor($plyr-control-spacing / 4);
- }
+ // Spacing
+ .plyr__controls__item {
+ margin-left: ($plyr-control-spacing / 4);
+
+ &:first-child {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ &.plyr__progress__container {
+ padding-left: ($plyr-control-spacing / 4);
+ }
+
+ &.plyr__time {
+ padding: 0 ($plyr-control-spacing / 2);
+ }
- > .plyr__control:first-child,
- > .plyr__control:first-child + [data-plyr='pause'] {
- margin-left: 0;
- margin-right: auto;
+ &.plyr__progress__container:first-child,
+ &.plyr__time:first-child,
+ &.plyr__time + .plyr__time {
+ padding-left: 0;
+ }
+
+ &.plyr__volume {
+ padding-right: ($plyr-control-spacing / 2);
+ }
+
+ &.plyr__volume:first-child {
+ padding-right: 0;
+ }
}
// Hide empty controls
&:empty {
display: none;
}
-
- @media (min-width: $plyr-bp-sm) {
- > .plyr__control,
- .plyr__menu,
- .plyr__progress,
- .plyr__time,
- .plyr__volume {
- margin-left: $plyr-control-spacing;
- }
- }
}
// Audio controls
@@ -62,10 +67,7 @@
// Video controls
.plyr--video .plyr__controls {
- background: linear-gradient(
- rgba($plyr-video-controls-bg, 0),
- rgba($plyr-video-controls-bg, 0.7)
- );
+ background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
bottom: 0;
diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss
deleted file mode 100644
index 25431caf..00000000
--- a/src/sass/components/embed.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// --------------------------------------------------------------
-// Embedded players
-// YouTube, Vimeo, etc
-// --------------------------------------------------------------
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed {
- height: 0;
- padding-bottom: to-percentage($embed-padding);
- position: relative;
-
- iframe {
- border: 0;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- user-select: none;
- width: 100%;
- }
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
- $height: 240;
- $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
- // Only used for Vimeo
- > .plyr__video-embed__container {
- padding-bottom: to-percentage($height);
- position: relative;
- transform: translateY(-$offset);
- }
-}
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index f28a19ca..04c83516 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -2,18 +2,19 @@
// Playback progress
// --------------------------------------------------------------
+// Offset the range thumb in order to be able to calculate the relative progress (#954)
+$plyr-progress-offset: $plyr-range-thumb-height;
+
.plyr__progress {
- flex: 1;
- left: $plyr-range-thumb-height / 2;
- margin-right: $plyr-range-thumb-height;
+ left: $plyr-progress-offset / 2;
+ margin-right: $plyr-progress-offset;
position: relative;
input[type='range'],
&__buffer {
- margin-left: -($plyr-range-thumb-height / 2);
- margin-right: -($plyr-range-thumb-height / 2);
- // Offset the range thumb in order to be able to calculate the relative progress (#954)
- width: calc(100% + #{$plyr-range-thumb-height});
+ margin-left: -($plyr-progress-offset / 2);
+ margin-right: -($plyr-progress-offset / 2);
+ width: calc(100% + #{$plyr-progress-offset});
}
input[type='range'] {
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index c3dc4152..fdcf4f2d 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -20,3 +20,36 @@
// Require z-index to force border-radius
z-index: 0;
}
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+ height: 0;
+ padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+ border: 0;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ user-select: none;
+ width: 100%;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+ $height: 240;
+ $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+ // Only used for Vimeo
+ > .plyr__video-embed__container {
+ padding-bottom: to-percentage($height);
+ position: relative;
+ transform: translateY(-$offset);
+ }
+}