diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/defaults.js | 5 | ||||
| -rw-r--r-- | src/sass/components/progress.scss | 30 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 4 |
3 files changed, 21 insertions, 18 deletions
diff --git a/src/js/defaults.js b/src/js/defaults.js index a6b83f1f..8d92219a 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -322,9 +322,8 @@ const defaults = { display: { currentTime: '.plyr__time--current', duration: '.plyr__time--duration', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played', - loop: '.plyr__progress--loop', + buffer: '.plyr__progress__buffer', + loop: '.plyr__progress__loop', // Used later volume: '.plyr__volume--display', }, progress: '.plyr__progress', diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index 60994f99..eddd32ab 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -5,16 +5,21 @@ .plyr__progress { display: flex; flex: 1; - position: relative; - margin-right: $plyr-range-thumb-height; left: $plyr-range-thumb-height / 2; + margin-right: $plyr-range-thumb-height; + 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}); + } input[type='range'] { position: relative; z-index: 2; - // Offset the range thumb in order to be able to calculate the relative progress (#954) - width: calc(100% + #{$plyr-range-thumb-height}) !important; - margin: 0 -#{$plyr-range-thumb-height / 2} !important; } // Seek tooltip to show time @@ -24,18 +29,17 @@ } } -.plyr__progress--buffer { +.plyr__progress__buffer { -webkit-appearance: none; /* stylelint-disable-line */ background: transparent; border: 0; border-radius: 100px; height: $plyr-range-track-height; left: 0; - margin: -($plyr-range-track-height / 2) 0 0; + margin-top: -($plyr-range-track-height / 2); padding: 0; position: absolute; top: 50%; - width: 100%; &::-webkit-progress-bar { background: transparent; @@ -63,17 +67,17 @@ } } -.plyr--video .plyr__progress--buffer { +.plyr--video .plyr__progress__buffer { box-shadow: 0 1px 1px rgba(#000, 0.15); color: $plyr-video-progress-buffered-bg; } -.plyr--audio .plyr__progress--buffer { +.plyr--audio .plyr__progress__buffer { color: $plyr-audio-progress-buffered-bg; } // Loading state -.plyr--loading .plyr__progress--buffer { +.plyr--loading .plyr__progress__buffer { animation: plyr-progress 1s linear infinite; background-image: linear-gradient( -45deg, @@ -90,10 +94,10 @@ color: transparent; } -.plyr--video.plyr--loading .plyr__progress--buffer { +.plyr--video.plyr--loading .plyr__progress__buffer { background-color: $plyr-video-progress-buffered-bg; } -.plyr--audio.plyr--loading .plyr__progress--buffer { +.plyr--audio.plyr--loading .plyr__progress__buffer { background-color: $plyr-audio-progress-buffered-bg; } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index e934cf92..3d824f7d 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -31,12 +31,12 @@ @import 'components/controls'; @import 'components/embed'; @import 'components/menus'; -@import 'components/progress'; -@import 'components/poster'; @import 'components/sliders'; +@import 'components/poster'; @import 'components/times'; @import 'components/tooltips'; @import 'components/video'; +@import 'components/progress'; @import 'components/volume'; @import 'states/fullscreen'; |