diff --git a/src/less/plyr.less b/src/less/plyr.less index 72217a88..e57c2b1a 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -227,7 +227,7 @@ font-size: @font-size-captions-large; } - // Plyr controls + // Playback controls &-controls { .clearfix(); .font-smoothing(); diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 71adb232..08485efa 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -148,7 +148,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Styles // ------------------------------- // Base -.player { +.plyr { position: relative; max-width: 100%; min-width: 290px; @@ -230,7 +230,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger font-size: $font-size-captions-large; } - // Player controls + // Playback controls &-controls { @include clearfix(); @include font-smoothing(); @@ -298,7 +298,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Time display - .player-time { + .plyr-time { display: inline-block; vertical-align: middle; margin-left: $control-spacing; @@ -309,7 +309,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Media duration hidden on small screens - .player-time + .player-time { + .plyr-time + .plyr-time { display: none; @media (min-width: $bp-control-split) { @@ -359,16 +359,16 @@ $bp-captions-large: 768px !default; // When captions jump to the larger border-color: $controls-bg transparent transparent; } } - button:hover .player-tooltip, - button:focus .player-tooltip { + button:hover .plyr-tooltip, + button:focus .plyr-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } - button:hover .player-tooltip { + button:hover .plyr-tooltip { z-index: 3; } - // Player progress + // Playback progress // element &-progress { position: absolute; @@ -467,7 +467,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Loading state - &.loading .player-progress-buffer { + &.loading .plyr-progress-buffer { animation: progress 1s linear infinite; background-size: $progress-loading-size $progress-loading-size; background-repeat: repeat-x; @@ -485,11 +485,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // States - &-controls [data-player='pause'], - &.playing .player-controls [data-player='play'] { + &-controls [data-plyr='pause'], + &.playing .plyr-controls [data-plyr='play'] { display: none; } - &.playing .player-controls [data-player='pause'] { + &.playing .plyr-controls [data-plyr='pause'] { display: inline-block; } @@ -561,7 +561,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html &.ios &-volume, - &.ios [data-player='mute'], + &.ios [data-plyr='mute'], &-audio.ios &-controls-right { display: none; } @@ -572,10 +572,10 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Audio specific styles // Position the progress within the container - &-audio .player-controls { + &-audio .plyr-controls { padding-top: ($control-spacing * 2); } - &-audio .player-progress { + &-audio .plyr-progress { bottom: auto; top: 0; background: $off-white; @@ -597,11 +597,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger video { height: 100%; } - .player-video-wrapper { + .plyr-video-wrapper { height: 100%; width: 100%; } - .player-controls { + .plyr-controls { position: absolute; bottom: 0; left: 0; @@ -610,22 +610,22 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Hide controls when playing in full screen &.fullscreen-hide-controls.playing { - .player-controls { + .plyr-controls { transform: translateY(100%) translateY($control-spacing / 2); transition: transform .3s .2s ease; } - &.player-hover .player-controls { + &.plyr-hover .plyr-controls { transform: translateY(0); } - .player-captions { + .plyr-captions { bottom: ($control-spacing / 2); transition: bottom .3s .2s ease; } } // Captions - .player-captions, - &.fullscreen-hide-controls.playing.player-hover .player-captions { + .plyr-captions, + &.fullscreen-hide-controls.playing.plyr-hover .plyr-captions { top: auto; bottom: 90px; @@ -637,8 +637,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Change icons on state change &.fullscreen-active .icon-exit-fullscreen, - &.muted .player-controls .icon-muted, - &.captions-active .player-controls .icon-captions-on { + &.muted .plyr-controls .icon-muted, + &.captions-active .plyr-controls .icon-captions-on { display: block; & + svg { @@ -647,12 +647,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Some options are hidden by default - [data-player='captions'], - [data-player='fullscreen'] { + [data-plyr='captions'], + [data-plyr='fullscreen'] { display: none; } - &.captions-enabled [data-player='captions'], - &.fullscreen-enabled [data-player='fullscreen'] { + &.captions-enabled [data-plyr='captions'], + &.fullscreen-enabled [data-plyr='fullscreen'] { display: inline-block; } }