diff --git a/dist/plyr.css b/dist/plyr.css index 91f89acb..2f3b8fa8 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]:focus{outline:0}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;-webkit-transform:scale(1.25);transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__progress{position:relative;-webkit-flex:1;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;border-radius:inherit}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;line-height:1;text-align:center;transition:opacity .3s ease}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;vertical-align:middle;padding:5px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted,.plyr__controls [data-plyr=pause]{display:none}.plyr__controls button:focus{outline:0}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}.plyr__controls button{padding:5px 10px}}.plyr--hide-controls .plyr__controls{opacity:0}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}@media (min-width:480px){.plyr--video .plyr__controls{padding-left:15px;padding-right:15px}}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;box-shadow:0 1px 1px rgba(0,0,0,.05);color:#565D64}.plyr__captions,.plyr__play-large,.plyr__tooltip{color:#fff;position:absolute}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr__time{display:inline-block}.plyr__time{vertical-align:middle;font-size:14px;line-height:.95}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr .plyr__volume{display:none;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;bottom:0;left:0;width:100%;padding:20px;-webkit-transform:translateY(-60px);transform:translateY(-60px);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;font-size:20px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.85)}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-20px);transform:translateY(-20px)}.plyr__tooltip{z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:#000;box-shadow:0 0 5px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.1);border-radius:3px;font-size:14px;line-height:1.3;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid #000;border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__play-large{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:opacity .3s ease,visibility .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio .plyr__play-large{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--fullscreen,.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0}.plyr--fullscreen video,.plyr--fullscreen-active video{height:100%}.plyr--fullscreen .plyr__video-wrapper,.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen .plyr__controls,.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0} \ No newline at end of file +.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;border-radius:inherit}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]:focus{outline:0}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;-webkit-transform:scale(1.25);transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__progress{position:relative;-webkit-flex:1;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;line-height:1;text-align:center;transition:opacity .3s ease}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;vertical-align:middle;padding:5px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted,.plyr__controls [data-plyr=pause]{display:none}.plyr__controls button:focus{outline:0}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}.plyr__controls button{padding:5px 10px}}.plyr--hide-controls .plyr__controls{opacity:0}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}@media (min-width:480px){.plyr--video .plyr__controls{padding-left:15px;padding-right:15px}}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;box-shadow:0 1px 1px rgba(0,0,0,.05);color:#565D64}.plyr__captions,.plyr__play-large,.plyr__tooltip{color:#fff;position:absolute}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr__time{display:inline-block}.plyr__time{vertical-align:middle;font-size:14px;line-height:.95}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr .plyr__volume{display:none;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;bottom:0;left:0;width:100%;padding:20px;-webkit-transform:translateY(-60px);transform:translateY(-60px);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;font-size:20px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.85)}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-20px);transform:translateY(-20px)}.plyr__tooltip{z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:#000;box-shadow:0 0 5px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.1);border-radius:3px;font-size:14px;line-height:1.3;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid #000;border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__play-large{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:opacity .3s ease,visibility .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio .plyr__play-large{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--fullscreen,.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen video,.plyr--fullscreen-active video{height:100%}.plyr--fullscreen .plyr__video-wrapper,.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen .plyr__controls,.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0} \ No newline at end of file diff --git a/src/js/plyr.js b/src/js/plyr.js index ff9fe1fe..b1c3e764 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -194,7 +194,7 @@ else if ((verOffset=nAgt.indexOf('Safari')) !== -1) { name = 'Safari'; fullVersion = nAgt.substring(verOffset + 7); - if ((verOffset=nAgt.indexOf('Version')) !== -1) { + if ((verOffset = nAgt.indexOf('Version')) !== -1) { fullVersion = nAgt.substring(verOffset + 8); } } @@ -1390,7 +1390,7 @@ window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; // Add to queue - window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container) }); + window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); }); // Set callback to process queue window.onYouTubeIframeAPIReady = function () { diff --git a/src/less/base.less b/src/less/base.less index 5e55c860..5ff866b6 100644 --- a/src/less/base.less +++ b/src/less/base.less @@ -1,5 +1,6 @@ -// Base styles -// -------------------------------------------------------------- +// ========================================================================== +// Base +// ========================================================================== .plyr { position: relative; diff --git a/src/less/components.less b/src/less/components.less new file mode 100644 index 00000000..98608c1a --- /dev/null +++ b/src/less/components.less @@ -0,0 +1,636 @@ +// ========================================================================== +// Components +// ========================================================================== + +// Video specific styles +// -------------------------------------------------------------- +.plyr__video-wrapper { + position: relative; + background: #000; + border-radius: inherit; + + // Cleaner radius, also forces iframe radius + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); +} + +// Embedded videos +// -------------------------------------------------------------- +// Container for embeds +.plyr__video-embed { + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; + border-radius: inherit; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + user-select: none; + } + + // Vimeo hack + > div { + position: relative; + padding-bottom: 200%; + transform: translateY(-35.95%); + } +} +// To allow mouse events to be captured if full support +.plyr .plyr__video-embed iframe { + pointer-events: none; +} + +// Range inputs +// -------------------------------------------------------------- +// Specificity is for bootstrap compatibility +.plyr input[type='range'] { + display: block; + height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); + width: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + + appearance: none; + cursor: pointer; + border: none; + background: transparent; + + // WebKit + &::-webkit-slider-runnable-track { + .plyr-range-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2); + .plyr-range-thumb(); + } + + // Mozilla + &::-moz-range-track { + .plyr-range-track(); + } + &::-moz-range-thumb { + .plyr-range-thumb(); + } + &::-moz-focus-outer { + border: 0; + } + + // Microsoft + &::-ms-track { + height: @plyr-range-track-height; + background: transparent; + border: 0; + color: transparent; + } + &::-ms-fill-upper { + .plyr-range-track(); + } + &::-ms-fill-lower { + .plyr-range-track(); + background: @plyr-range-selected-bg; + } + &::-ms-thumb { + .plyr-range-thumb(); + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + &.tab-focus:focus { + outline-offset: 3px; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + .plyr-range-thumb-active(); + } + &::-moz-range-thumb { + .plyr-range-thumb-active(); + } + &::-ms-thumb { + .plyr-range-thumb-active(); + } + } +} + +// Video range inputs +.plyr--video input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-video-control-color, 50%); +} + +// Audio range inputs +.plyr--audio input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-audio-control-color, 50%); +} + +// Seeking & buffering progress +// -------------------------------------------------------------- +.plyr__progress { + position: relative; + flex: 1; + + input[type="range"] { + position: relative; + z-index: 2; + + &::-webkit-slider-runnable-track { + background: transparent; + } + &::-moz-range-track { + background: transparent; + } + &::-ms-fill-upper { + background: transparent; + } + } + + // Seek tooltip to show time + .plyr__tooltip { + left: 0; + } +} + +.plyr__progress--buffer, +.plyr__progress--played, +.plyr__volume--display { + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: @plyr-range-track-height; + margin: -(@plyr-range-track-height / 2) 0 0; + padding: 0; + vertical-align: top; + appearance: none; + border: none; + border-radius: 100px; + + &::-webkit-progress-bar { + background: transparent; + } + &::-webkit-progress-value { + background: currentColor; + border-radius: 100px; + min-width: @plyr-range-track-height; + } + &::-moz-progress-bar { + background: currentColor; + border-radius: 100px; + min-width: @plyr-range-track-height; + } + &::-ms-fill { + border-radius: 100px; + } +} +.plyr__progress--played, +.plyr__volume--display { + z-index: 1; + color: @plyr-range-selected-bg; + background: transparent; + transition: none; + + &::-webkit-progress-value { + min-width: @plyr-range-track-height; + max-width: 99%; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-moz-progress-bar { + min-width: @plyr-range-track-height; + max-width: 99%; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-ms-fill { + display: none; + } +} +.plyr__progress--buffer { + &::-webkit-progress-value { + transition: width .2s ease; + } + &::-moz-progress-bar { + transition: width .2s ease; + } + &::-ms-fill { + transition: width .2s ease; + } +} +.plyr--video .plyr__progress--buffer, +.plyr--video .plyr__volume--display { + background: @plyr-video-range-track-bg; +} +.plyr--video .plyr__progress--buffer { + color: @plyr-video-progress-buffered-bg; +} +.plyr--audio .plyr__progress--buffer, +.plyr--audio .plyr__volume--display { + background: @plyr-audio-range-track-bg; +} +.plyr--audio .plyr__progress--buffer { + color: @plyr-audio-progress-buffered-bg; +} + +// Loading state +.plyr--loading .plyr__progress--buffer { + animation: plyr-progress 1s linear infinite; + background-size: @plyr-progress-loading-size @plyr-progress-loading-size; + background-repeat: repeat-x; + background-image: linear-gradient( + -45deg, + @plyr-progress-loading-bg 25%, + transparent 25%, + transparent 50%, + @plyr-progress-loading-bg 50%, + @plyr-progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; +} +.plyr--video.plyr--loading .plyr__progress--buffer { + background-color: @plyr-video-progress-buffered-bg; +} +.plyr--audio.plyr--loading .plyr__progress--buffer { + background-color: @plyr-audio-progress-buffered-bg; +} + +// Controls +// -------------------------------------------------------------- +// Playback controls +.plyr__controls { + display: flex; + align-items: center; + + line-height: 1; + text-align: center; + + transition: opacity .3s ease; + + // Spacing + > button, + .plyr__progress, + .plyr__time { + margin-left: (@plyr-control-spacing / 2); + + &:first-child { + margin-left: 0; + } + } + .plyr__volume { + margin-left: (@plyr-control-spacing / 2); + } + [data-plyr="pause"] { + margin-left: 0; + } + + // Buttons + button { + position: relative; + display: inline-block; + flex-shrink: 0; + vertical-align: middle; + padding: (@plyr-control-spacing / 2); + border: 0; + background: transparent; + border-radius: 3px; + cursor: pointer; + transition: background .3s ease, color .3s ease, opacity .3s ease; + color: inherit; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + } + + // Default focus + &:focus { + outline: 0; + } + } + + // Hide toggle icons by default + .icon--exit-fullscreen, + .icon--muted, + .icon--captions-on { + display: none; + } + + @media (min-width: @plyr-bp-screen-sm) { + > button, + .plyr__progress, + .plyr__time { + margin-left: @plyr-control-spacing; + } + button { + padding: (@plyr-control-spacing / 2) @plyr-control-spacing; + } + } +} +// Hide controls +.plyr--hide-controls .plyr__controls { + opacity: 0; +} + +// Video controls +.plyr--video .plyr__controls { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; + background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + color: @plyr-video-control-color; + + button { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: @plyr-video-control-bg-hover; + color: @plyr-video-control-color-hover; + } + } + + @media (min-width: @plyr-bp-screen-sm) { + padding-left: (@plyr-control-spacing * 1.5); + padding-right: (@plyr-control-spacing * 1.5); + } +} + +// Audio controls +.plyr--audio .plyr__controls { + padding: @plyr-control-spacing; + border-radius: inherit; + background: @plyr-audio-controls-bg; + border: @plyr-audio-controls-border; + box-shadow: @plyr-audio-controls-box-shadow; + color: @plyr-audio-control-color; + + button { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: @plyr-audio-control-bg-hover; + color: @plyr-audio-control-color-hover; + } + } +} + +// States +.plyr__controls [data-plyr='pause'], +.plyr--playing .plyr__controls [data-plyr='play'] { + display: none; +} +.plyr--playing .plyr__controls [data-plyr='pause'] { + display: inline-block; +} + +// Change icons on state change +.plyr--fullscreen-active .icon--exit-fullscreen, +.plyr--muted .plyr__controls .icon--muted, +.plyr--captions-active .plyr__controls .icon--captions-on { + display: block; + + & + svg { + display: none; + } +} + +// Some options are hidden by default +.plyr [data-plyr='captions'], +.plyr [data-plyr='fullscreen'] { + display: none; +} +.plyr--captions-enabled [data-plyr='captions'], +.plyr--fullscreen-enabled [data-plyr='fullscreen'] { + display: inline-block; +} + +// Time +// -------------------------------------------------------------- +.plyr__time { + display: inline-block; + vertical-align: middle; + font-size: @plyr-font-size-small; + line-height: .95; +} +// Media duration hidden on small screens +.plyr__time + .plyr__time { + display: none; + + @media (min-width: @plyr-bp-screen-md) { + display: inline-block; + } + + // Add a slash in before + &::before { + content: '\2044'; + margin-right: @plyr-control-spacing; + } +} + +// Volume +// -------------------------------------------------------------- +.plyr .plyr__volume { + display: none; + position: relative; + + input[type="range"] { + position: relative; + z-index: 2; + } + @media (min-width: @plyr-bp-screen-sm) { + display: block; + max-width: 60px; + } + @media (min-width: @plyr-bp-screen-md) { + max-width: 100px; + } +} + +// Hide sound controls on iOS +// 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 +.plyr--is-ios .plyr__volume, +.plyr--is-ios [data-plyr='mute'] { + display: none !important; +} + +// Captions +// -------------------------------------------------------------- +// Hide default captions +.plyr video::-webkit-media-text-track-container { + display: none; +} +.plyr__captions { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: (@plyr-control-spacing * 2); + transform: translateY(-(@plyr-control-spacing * 6)); + transition: transform .3s ease; + color: #fff; + font-size: @plyr-font-size-captions-base; + text-align: center; + font-weight: 400; + + span { + border-radius: 2px; + padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; + background: fade(#000, 85%); + } + span:empty { + display: none; + } + + @media (min-width: @plyr-bp-screen-md) { + font-size: @plyr-font-size-captions-medium; + } +} +.plyr--captions-active .plyr__captions { + display: block; +} +.plyr--fullscreen-active .plyr__captions { + font-size: @plyr-font-size-captions-large; +} +.plyr--hide-controls .plyr__captions { + transform: translateY(-(@plyr-control-spacing * 2)); +} + +// Tooltips +// -------------------------------------------------------------- +.plyr__tooltip { + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: (@plyr-tooltip-padding * 2); + padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5); + pointer-events: none; + + opacity: 0; + background: @plyr-tooltip-bg; + box-shadow: @plyr-tooltip-shadow; + border-radius: @plyr-tooltip-radius; + + color: @plyr-tooltip-color; + font-size: @plyr-font-size-small; + line-height: 1.3; + + transform: translate(-50%, 10px) scale(.8); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; + + // Arrows + &::before { + content: ''; + position: absolute; + width: 0; + height: 0; + left: 50%; + transform: translateX(-50%); + } + // The background triangle + &::before { + bottom: -@plyr-tooltip-arrow-size; + border-right: @plyr-tooltip-arrow-size solid transparent; + border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg; + border-left: @plyr-tooltip-arrow-size solid transparent; + z-index: 2; + } +} +.plyr button:hover .plyr__tooltip, +.plyr button.tab-focus:focus .plyr__tooltip, +.plyr__tooltip--visible { + opacity: 1; + transform: translate(-50%, 0) scale(1); +} +.plyr button:hover .plyr__tooltip { + z-index: 3; +} + +// Large play button (video only) +// -------------------------------------------------------------- +.plyr__play-large { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: @plyr-control-spacing; + background: @plyr-video-control-bg-hover; + border: 4px solid currentColor; + border-radius: 100%; + box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); + color: @plyr-video-control-color; + transition: opacity .3s ease, visibility .3s ease; + + svg { + position: relative; + left: 2px; + width: 20px; + height: 20px; + display: block; + fill: currentColor; + } + + &:focus { + outline: 1px dotted fade(@plyr-video-control-color, 50%); + } +} +.plyr--audio .plyr__play-large { + display: none; +} +.plyr--playing .plyr__play-large { + opacity: 0; + visibility: hidden; +} + +// Fullscreen mode +// -------------------------------------------------------------- +.plyr--fullscreen, +.plyr--fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 10000000; + background: #000; + border-radius: 0 !important; + + video { + height: 100%; + } + .plyr__video-wrapper { + height: 100%; + width: 100%; + } + .plyr__controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } +} \ No newline at end of file diff --git a/src/less/components/captions.less b/src/less/components/captions.less deleted file mode 100644 index 83c436c2..00000000 --- a/src/less/components/captions.less +++ /dev/null @@ -1,43 +0,0 @@ -// Captions -// -------------------------------------------------------------- - -// Hide default captions -.plyr video::-webkit-media-text-track-container { - display: none; -} -.plyr__captions { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: (@plyr-control-spacing * 2); - transform: translateY(-(@plyr-control-spacing * 6)); - transition: transform .3s ease; - color: #fff; - font-size: @plyr-font-size-captions-base; - text-align: center; - font-weight: 400; - - span { - border-radius: 2px; - padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; - background: fade(#000, 85%); - } - span:empty { - display: none; - } - - @media (min-width: @plyr-bp-screen-md) { - font-size: @plyr-font-size-captions-medium; - } -} -.plyr--captions-active .plyr__captions { - display: block; -} -.plyr--fullscreen-active .plyr__captions { - font-size: @plyr-font-size-captions-large; -} -.plyr--hide-controls .plyr__captions { - transform: translateY(-(@plyr-control-spacing * 2)); -} \ No newline at end of file diff --git a/src/less/components/controls.less b/src/less/components/controls.less deleted file mode 100644 index fce34aff..00000000 --- a/src/less/components/controls.less +++ /dev/null @@ -1,155 +0,0 @@ -// Controls -// -------------------------------------------------------------- - -// Playback controls -.plyr__controls { - display: flex; - align-items: center; - - line-height: 1; - text-align: center; - - transition: opacity .3s ease; - - // Spacing - > button, - .plyr__progress, - .plyr__time { - margin-left: (@plyr-control-spacing / 2); - - &:first-child { - margin-left: 0; - } - } - .plyr__volume { - margin-left: (@plyr-control-spacing / 2); - } - [data-plyr="pause"] { - margin-left: 0; - } - - // Buttons - button { - position: relative; - display: inline-block; - flex-shrink: 0; - vertical-align: middle; - padding: (@plyr-control-spacing / 2); - border: 0; - background: transparent; - border-radius: 3px; - cursor: pointer; - transition: background .3s ease, color .3s ease, opacity .3s ease; - color: inherit; - - svg { - width: 18px; - height: 18px; - display: block; - fill: currentColor; - } - - // Default focus - &:focus { - outline: 0; - } - } - - // Hide toggle icons by default - .icon--exit-fullscreen, - .icon--muted, - .icon--captions-on { - display: none; - } - - @media (min-width: @plyr-bp-screen-sm) { - > button, - .plyr__progress, - .plyr__time { - margin-left: @plyr-control-spacing; - } - button { - padding: (@plyr-control-spacing / 2) @plyr-control-spacing; - } - } -} -// Hide controls -.plyr--hide-controls .plyr__controls { - opacity: 0; -} - -// Video controls -.plyr--video .plyr__controls { - position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; - background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - color: @plyr-video-control-color; - - button { - // Hover and tab focus - &.tab-focus:focus, - &:hover { - background: @plyr-video-control-bg-hover; - color: @plyr-video-control-color-hover; - } - } - - @media (min-width: @plyr-bp-screen-sm) { - padding-left: (@plyr-control-spacing * 1.5); - padding-right: (@plyr-control-spacing * 1.5); - } -} - -// Audio controls -.plyr--audio .plyr__controls { - padding: @plyr-control-spacing; - border-radius: inherit; - background: @plyr-audio-controls-bg; - border: @plyr-audio-controls-border; - box-shadow: @plyr-audio-controls-box-shadow; - color: @plyr-audio-control-color; - - button { - // Hover and tab focus - &.tab-focus:focus, - &:hover { - background: @plyr-audio-control-bg-hover; - color: @plyr-audio-control-color-hover; - } - } -} - -// States -.plyr__controls [data-plyr='pause'], -.plyr--playing .plyr__controls [data-plyr='play'] { - display: none; -} -.plyr--playing .plyr__controls [data-plyr='pause'] { - display: inline-block; -} - -// Change icons on state change -.plyr--fullscreen-active .icon--exit-fullscreen, -.plyr--muted .plyr__controls .icon--muted, -.plyr--captions-active .plyr__controls .icon--captions-on { - display: block; - - & + svg { - display: none; - } -} - -// Some options are hidden by default -.plyr [data-plyr='captions'], -.plyr [data-plyr='fullscreen'] { - display: none; -} -.plyr--captions-enabled [data-plyr='captions'], -.plyr--fullscreen-enabled [data-plyr='fullscreen'] { - display: inline-block; -} \ No newline at end of file diff --git a/src/less/components/embed.less b/src/less/components/embed.less deleted file mode 100644 index 7179e199..00000000 --- a/src/less/components/embed.less +++ /dev/null @@ -1,31 +0,0 @@ -// Embedded videos -// -------------------------------------------------------------- - -// Container for embeds -.plyr__video-embed { - padding-bottom: 56.25%; /* 16:9 */ - height: 0; - overflow: hidden; - border-radius: inherit; - - iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - user-select: none; - } - - // Vimeo hack - > div { - position: relative; - padding-bottom: 200%; - transform: translateY(-35.95%); - } -} -// To allow mouse events to be captured if full support -.plyr .plyr__video-embed iframe { - pointer-events: none; -} \ No newline at end of file diff --git a/src/less/components/fullscreen.less b/src/less/components/fullscreen.less deleted file mode 100644 index e2710eff..00000000 --- a/src/less/components/fullscreen.less +++ /dev/null @@ -1,30 +0,0 @@ -// Fullscreen mode -// -------------------------------------------------------------- - -.plyr--fullscreen, -.plyr--fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 10000000; - background: #000; - border-radius: 0; - - video { - height: 100%; - } - .plyr__video-wrapper { - height: 100%; - width: 100%; - } - .plyr__controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } -} \ No newline at end of file diff --git a/src/less/components/large-play.less b/src/less/components/large-play.less deleted file mode 100644 index ab549651..00000000 --- a/src/less/components/large-play.less +++ /dev/null @@ -1,36 +0,0 @@ -// Large play button (video only) -// -------------------------------------------------------------- - -.plyr__play-large { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: @plyr-control-spacing; - background: @plyr-video-control-bg-hover; - border: 4px solid currentColor; - border-radius: 100%; - box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); - color: @plyr-video-control-color; - transition: opacity .3s ease, visibility .3s ease; - - svg { - position: relative; - left: 2px; - width: 20px; - height: 20px; - display: block; - fill: currentColor; - } - - &:focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); - } -} -.plyr--audio .plyr__play-large { - display: none; -} -.plyr--playing .plyr__play-large { - opacity: 0; - visibility: hidden; -} \ No newline at end of file diff --git a/src/less/components/progress.less b/src/less/components/progress.less deleted file mode 100644 index 8f67c277..00000000 --- a/src/less/components/progress.less +++ /dev/null @@ -1,131 +0,0 @@ -// Seeking & buffering progress -// -------------------------------------------------------------- - -.plyr__progress { - position: relative; - flex: 1; - - input[type="range"] { - position: relative; - z-index: 2; - - &::-webkit-slider-runnable-track { - background: transparent; - } - &::-moz-range-track { - background: transparent; - } - &::-ms-fill-upper { - background: transparent; - } - } - - // Seek tooltip to show time - .plyr__tooltip { - left: 0; - } -} - -.plyr__progress--buffer, -.plyr__progress--played, -.plyr__volume--display { - position: absolute; - left: 0; - top: 50%; - width: 100%; - height: @plyr-range-track-height; - margin: -(@plyr-range-track-height / 2) 0 0; - padding: 0; - vertical-align: top; - appearance: none; - border: none; - border-radius: 100px; - - &::-webkit-progress-bar { - background: transparent; - } - &::-webkit-progress-value { - background: currentColor; - border-radius: 100px; - min-width: @plyr-range-track-height; - } - &::-moz-progress-bar { - background: currentColor; - border-radius: 100px; - min-width: @plyr-range-track-height; - } - &::-ms-fill { - border-radius: 100px; - } -} -.plyr__progress--played, -.plyr__volume--display { - z-index: 1; - color: @plyr-range-selected-bg; - background: transparent; - transition: none; - - &::-webkit-progress-value { - min-width: @plyr-range-track-height; - max-width: 99%; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &::-moz-progress-bar { - min-width: @plyr-range-track-height; - max-width: 99%; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &::-ms-fill { - display: none; - } -} -.plyr__progress--buffer { - &::-webkit-progress-value { - transition: width .2s ease; - } - &::-moz-progress-bar { - transition: width .2s ease; - } - &::-ms-fill { - transition: width .2s ease; - } -} -.plyr--video .plyr__progress--buffer, -.plyr--video .plyr__volume--display { - background: @plyr-video-range-track-bg; -} -.plyr--video .plyr__progress--buffer { - color: @plyr-video-progress-buffered-bg; -} -.plyr--audio .plyr__progress--buffer, -.plyr--audio .plyr__volume--display { - background: @plyr-audio-range-track-bg; -} -.plyr--audio .plyr__progress--buffer { - color: @plyr-audio-progress-buffered-bg; -} - -// Loading state -.plyr--loading .plyr__progress--buffer { - animation: plyr-progress 1s linear infinite; - background-size: @plyr-progress-loading-size @plyr-progress-loading-size; - background-repeat: repeat-x; - background-image: linear-gradient( - -45deg, - @plyr-progress-loading-bg 25%, - transparent 25%, - transparent 50%, - @plyr-progress-loading-bg 50%, - @plyr-progress-loading-bg 75%, - transparent 75%, - transparent); - color: transparent; -} -.plyr--video.plyr--loading .plyr__progress--buffer { - background-color: @plyr-video-progress-buffered-bg; -} -.plyr--audio.plyr--loading .plyr__progress--buffer { - background-color: @plyr-audio-progress-buffered-bg; -} \ No newline at end of file diff --git a/src/less/components/range.less b/src/less/components/range.less deleted file mode 100644 index 36282761..00000000 --- a/src/less/components/range.less +++ /dev/null @@ -1,95 +0,0 @@ -// Range inputs -// -------------------------------------------------------------- - -// Specificity is for bootstrap compatibility -.plyr input[type='range'] { - display: block; - height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); - width: 100%; - margin: 0; - padding: 0; - vertical-align: middle; - - appearance: none; - cursor: pointer; - border: none; - background: transparent; - - // WebKit - &::-webkit-slider-runnable-track { - .plyr-range-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2); - .plyr-range-thumb(); - } - - // Mozilla - &::-moz-range-track { - .plyr-range-track(); - } - &::-moz-range-thumb { - .plyr-range-thumb(); - } - &::-moz-focus-outer { - border: 0; - } - - // Microsoft - &::-ms-track { - height: @plyr-range-track-height; - background: transparent; - border: 0; - color: transparent; - } - &::-ms-fill-upper { - .plyr-range-track(); - } - &::-ms-fill-lower { - .plyr-range-track(); - background: @plyr-range-selected-bg; - } - &::-ms-thumb { - .plyr-range-thumb(); - // For some reason, Edge uses the -webkit margin above - margin-top: 0; - } - &::-ms-tooltip { - display: none; - } - - // Focus styles - &:focus { - outline: 0; - } - &::-moz-focus-outer { - border: 0; - } - &.tab-focus:focus { - outline-offset: 3px; - } - - // Pressed styles - &:active { - &::-webkit-slider-thumb { - .plyr-range-thumb-active(); - } - &::-moz-range-thumb { - .plyr-range-thumb-active(); - } - &::-ms-thumb { - .plyr-range-thumb-active(); - } - } -} - -// Video range inputs -.plyr--video input[type='range'].tab-focus:focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); -} - -// Audio range inputs -.plyr--audio input[type='range'].tab-focus:focus { - outline: 1px dotted fade(@plyr-audio-control-color, 50%); -} \ No newline at end of file diff --git a/src/less/components/time.less b/src/less/components/time.less deleted file mode 100644 index 7389ba93..00000000 --- a/src/less/components/time.less +++ /dev/null @@ -1,23 +0,0 @@ -// Time -// -------------------------------------------------------------- - -.plyr__time { - display: inline-block; - vertical-align: middle; - font-size: @plyr-font-size-small; - line-height: .95; -} -// Media duration hidden on small screens -.plyr__time + .plyr__time { - display: none; - - @media (min-width: @plyr-bp-screen-md) { - display: inline-block; - } - - // Add a slash in before - &::before { - content: '\2044'; - margin-right: @plyr-control-spacing; - } -} \ No newline at end of file diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less deleted file mode 100644 index 6a3b0488..00000000 --- a/src/less/components/tooltips.less +++ /dev/null @@ -1,51 +0,0 @@ -// Tooltips -// -------------------------------------------------------------- - -.plyr__tooltip { - position: absolute; - z-index: 2; - bottom: 100%; - margin-bottom: (@plyr-tooltip-padding * 2); - padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5); - pointer-events: none; - - opacity: 0; - background: @plyr-tooltip-bg; - box-shadow: @plyr-tooltip-shadow; - border-radius: @plyr-tooltip-radius; - - color: @plyr-tooltip-color; - font-size: @plyr-font-size-small; - line-height: 1.3; - - transform: translate(-50%, 10px) scale(.8); - transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease; - - // Arrows - &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - left: 50%; - transform: translateX(-50%); - } - // The background triangle - &::before { - bottom: -@plyr-tooltip-arrow-size; - border-right: @plyr-tooltip-arrow-size solid transparent; - border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg; - border-left: @plyr-tooltip-arrow-size solid transparent; - z-index: 2; - } -} -.plyr button:hover .plyr__tooltip, -.plyr button.tab-focus:focus .plyr__tooltip, -.plyr__tooltip--visible { - opacity: 1; - transform: translate(-50%, 0) scale(1); -} -.plyr button:hover .plyr__tooltip { - z-index: 3; -} \ No newline at end of file diff --git a/src/less/components/video.less b/src/less/components/video.less deleted file mode 100644 index 205d3b0e..00000000 --- a/src/less/components/video.less +++ /dev/null @@ -1,11 +0,0 @@ -// Video specific styles -// -------------------------------------------------------------- - -.plyr__video-wrapper { - position: relative; - background: #000; - border-radius: inherit; - - // Cleaner radius, also forces iframe radius - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -} \ No newline at end of file diff --git a/src/less/components/volume.less b/src/less/components/volume.less deleted file mode 100644 index 5c814e94..00000000 --- a/src/less/components/volume.less +++ /dev/null @@ -1,27 +0,0 @@ -// Volume -// -------------------------------------------------------------- - -.plyr .plyr__volume { - display: none; - position: relative; - - input[type="range"] { - position: relative; - z-index: 2; - } - @media (min-width: @plyr-bp-screen-sm) { - display: block; - max-width: 60px; - } - @media (min-width: @plyr-bp-screen-md) { - max-width: 100px; - } -} - -// Hide sound controls on iOS -// 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 -.plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'] { - display: none !important; -} \ No newline at end of file diff --git a/src/less/mixins.less b/src/less/mixins.less index 25f43761..8420c7be 100644 --- a/src/less/mixins.less +++ b/src/less/mixins.less @@ -1,6 +1,5 @@ // ========================================================================== -// Plyr mixins -// https://github.com/selz/plyr +// Mixins // ========================================================================== // styling diff --git a/src/less/plyr.less b/src/less/plyr.less index cfcafee3..d8674302 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -8,15 +8,4 @@ @import "animation"; @import "utilities"; @import "base"; - -@import "components/range"; -@import "components/progress"; -@import "components/video"; -@import "components/embed"; -@import "components/controls"; -@import "components/time"; -@import "components/volume"; -@import "components/captions"; -@import "components/tooltips"; -@import "components/large-play"; -@import "components/fullscreen"; \ No newline at end of file +@import "components"; \ No newline at end of file diff --git a/src/less/utilities.less b/src/less/utilities.less index 86f3885c..518f2a8d 100644 --- a/src/less/utilities.less +++ b/src/less/utilities.less @@ -1,5 +1,6 @@ +// ========================================================================== // Utility classes -// -------------------------------------------------------------- +// ========================================================================== // Screen reader only elements .plyr__sr-only { diff --git a/src/less/variables.less b/src/less/variables.less index ea5c6b8e..62fab14e 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -1,6 +1,5 @@ // ========================================================================== -// Plyr variables -// https://github.com/selz/plyr +// Variables // ========================================================================== // Colors