diff options
Diffstat (limited to 'src/sass/components')
-rw-r--r-- | src/sass/components/captions.scss | 2 | ||||
-rw-r--r-- | src/sass/components/control.scss | 8 | ||||
-rw-r--r-- | src/sass/components/poster.scss | 2 | ||||
-rw-r--r-- | src/sass/components/progress.scss | 30 |
4 files changed, 23 insertions, 19 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 9dfc2be8..8fce581a 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -21,7 +21,7 @@ transition: transform 0.4s ease-in-out; width: 100%; - span { + .plyr__caption { background: $plyr-captions-bg; border-radius: 2px; box-decoration-break: clone; diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 52716805..cfef1b3a 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -34,10 +34,10 @@ } // Change icons on state change -.plyr__control[aria-pressed='false'] .icon--pressed, -.plyr__control[aria-pressed='true'] .icon--not-pressed, -.plyr__control[aria-pressed='false'] .label--pressed, -.plyr__control[aria-pressed='true'] .label--not-pressed { +.plyr__control:not(.plyr__control--pressed) .icon--pressed, +.plyr__control.plyr__control--pressed .icon--not-pressed, +.plyr__control:not(.plyr__control--pressed) .label--pressed, +.plyr__control.plyr__control--pressed .label--not-pressed { display: none; } diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss index 92ab0fce..4bdb60d9 100644 --- a/src/sass/components/poster.scss +++ b/src/sass/components/poster.scss @@ -18,6 +18,6 @@ pointer-events: none; } -.plyr--stopped .plyr__poster { +.plyr--stopped.plyr__poster-enabled .plyr__poster { opacity: 1; } 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; } |