diff options
Diffstat (limited to 'src/sass/components')
-rw-r--r-- | src/sass/components/controls.scss | 64 | ||||
-rw-r--r-- | src/sass/components/embed.scss | 36 | ||||
-rw-r--r-- | src/sass/components/progress.scss | 15 | ||||
-rw-r--r-- | src/sass/components/video.scss | 33 |
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); + } +} |