le-player
Version:
The best HTML5 video player made for Lectoriy.
1 lines • 20.4 kB
CSS
.leplayer{display:block;outline:0;position:relative;background-color:transparent}.leplayer.leplayer--fullscreen{position:absolute;top:0;bottom:0;left:0;right:0;width:100% ;max-width:none }.leplayer-controls{border-collapse:separate;display:-ms-flexbox;display:flex;height:32px;position:relative;width:100%;outline:none}.leplayer-controls--left{margin-right:auto}.leplayer-controls--right{margin-left:auto}.leplayer-controls--justify{width:auto}.leplayer-controls--justify::after{content:'';width:1px;display:block}.leplayer-controls:not(:last-child){margin-bottom:10px}.leplayer-controls.controls-common{margin-top:10px}.leplayer-controls.controls-fullscreen{position:relative;width:auto;z-index:1007}.leplayer-controls.controls-fullscreen .control{background:#47566b;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control--tap,.leplayer-controls.controls-fullscreen .control.control--no-iphone:hover{background:#333e4c;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control.disabled{color:#6d7278}.leplayer-controls.controls-fullscreen .control.disabled.control--tap,.leplayer-controls.controls-fullscreen .control.disabled.control--no-iphone:hover{background:#47566b;color:#6d7278}.leplayer-controls.controls-fullscreen .control.play{background:#29313d;color:white}.leplayer-controls.controls-fullscreen .control.play.control--tap,.leplayer-controls.controls-fullscreen .control.play.control--no-iphone:hover{background:#333e4c}.leplayer-controls.controls-fullscreen .control.timeline-container.control--tap,.leplayer-controls.controls-fullscreen .control.timeline-container.control--no-iphone:hover{background:#47566b}.leplayer-controls.controls-fullscreen .control-dropdown__content{background:#47566b;z-index:1008}.leplayer-controls.controls-fullscreen .control-checkbox--checked{background:#333e4c;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control-checkbox--checked.control--tap,.leplayer-controls.controls-fullscreen .control-checkbox--checked.control--no-iphone:hover{background:#29313d}.leplayer-controls.controls-fullscreen .info-control__content{background:#47566b;color:white}.leplayer-controls.controls-fullscreen .control-text{background:#47566b;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control-container__item{color:#c4d8ee}.leplayer-controls.controls-fullscreen .control-container__item:hover{background:rgba(0,0,0,0.15) ;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control-container__item--active{background:#29313d;color:#47566b}.leplayer-controls.controls-fullscreen .timeline{background:#7588a3;margin:0}.leplayer-controls.controls-fullscreen .timeline-container{background:#47566b}.leplayer-controls.controls-fullscreen .timeline-container .control-text{height:auto;position:relative}.leplayer-controls.controls-fullscreen .time-marker{background:#29313d;border-right:1px solid rgba(227,229,232,0.7);z-index:1007}.leplayer-controls.controls-fullscreen .time-marker.shadow{background:rgba(157,164,175,0.7);border-right:1px solid rgba(241,242,244,0.5);z-index:1006}.leplayer-controls.controls-fullscreen .time-marker .time{background:rgba(117,136,163,0.8);z-index:1003}.leplayer-controls.controls-fullscreen .time-played{background:rgba(0,0,0,0.25);z-index:1005}.leplayer-controls.controls-fullscreen .time-buffered{background-color:rgba(255,0,0,0.4);z-index:1004}.leplayer-controls.controls-fullscreen .volume-active{background:rgba(0,0,0,0.25)}.leplayer-controls.controls-fullscreen .volume-slider{height:144px}.leplayer-controls.controls-fullscreen .volume-line{background:#7588a3}.leplayer-controls.controls-fullscreen .volume-marker{background:#29313d;border-top:1px solid rgba(227,229,232,0.7)}.leplayer-controls .control{background:#dee5ed;border:none;border-radius:0;color:#1b4b7e;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:16px;height:32px;width:auto;line-height:100%;padding:0 8px;text-align:center;vertical-align:middle}.leplayer-controls .control.control--tap,.leplayer-controls .control.control--no-iphone:hover{background:#1b4b7e;color:#dee5ed}.leplayer-controls .control.play{background:#6a8baf;color:white;padding:0 22px}.leplayer-controls .control.play.disabled:hover{background:#6a8baf}.leplayer-controls .control.play.control--tap,.leplayer-controls .control.play.control--no-iphone:hover{background:#1b4b7e;color:#dee5ed}.leplayer-controls .control.disabled{cursor:not-allowed;color:#94a5b8;pointer-events:none}@media screen and (max-width:420px){.leplayer-controls .control{padding:0 5px}}.leplayer-controls .control-checkbox--checked{background:#1b4b7e;color:#dee5ed}.leplayer-controls .control-checkbox--checked.control--tap,.leplayer-controls .control-checkbox--checked.control--no-iphone:hover{background:#163e69}.leplayer-controls .control-dropdown{position:relative}.leplayer-controls .control-dropdown .leplayer-icon svg{pointer-events:none}.leplayer-controls .control-dropdown__content{background:#dee5ed;bottom:32px;cursor:default;display:none;left:0;min-width:100%;position:absolute;z-index:18;left:50%;transform:translateX(-50%)}.leplayer-controls .control-dropdown__content:before{content:'';position:absolute;width:32px;height:1px;bottom:-1px;left:0}.leplayer-controls .info-control__content{white-space:nowrap;text-align:left;background:#dee5ed;padding:10px;color:black;font-size:12px;min-width:300px}.leplayer-controls .control-container{display:-ms-flexbox;display:flex;height:32px;position:relative}.leplayer-controls .control-container__item{display:block;color:#1b4b7e;white-space:nowrap;cursor:pointer;font-size:12px;line-height:32px;padding:0 7px}.leplayer-controls .control-container__item:hover{background:#1f5793 ;color:#dee5ed}.leplayer-controls .control-container__item--active{background:#6a8baf;color:#dee5ed}.leplayer-controls .control-icon{line-height:32px;padding:0 8px}.leplayer-controls .control-text{background:#dee5ed;color:#1b4b7e;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:12px;box-sizing:content-box;line-height:100%;padding:0 5px;text-align:center}.leplayer-controls .divider{background:none;display:block;padding:0 5px;width:.01%}.leplayer-controls .fa{text-align:center;width:16px}.leplayer-controls .timeline{background:#758ba3;cursor:pointer;display:block;height:12px;margin:10px 0;position:relative;width:100%}.leplayer-controls .time-current{width:40px}.leplayer-controls .timeline-container{background:#dee5ed;position:relative;white-space:nowrap;width:100%}.leplayer-controls .timeline-container.control--tap,.leplayer-controls .timeline-container.control--no-iphone:hover{background:#dee5ed}.leplayer-controls .timeline-subcontainer{display:-ms-flexbox;display:flex;width:100%}.leplayer-controls .time-marker{background:#1b4b7e;border-right:1px solid rgba(222,229,237,0.5);cursor:pointer;height:16px;left:0;margin-left:-2px;position:absolute;top:-2px;width:2px;z-index:17}.leplayer-controls .time-marker:before{content:'';width:4px;height:100%;position:absolute;left:-1px;background:transparent}.leplayer-controls .time-marker--drag:before{background:#1b4b7e}.leplayer-controls .time-marker.shadow{background:rgba(27,75,126,0.8);border-right:1px solid rgba(222,229,237,0.5);transition:none;z-index:16}.leplayer-controls .time-marker.shadow:before{content:none}.leplayer-controls .time-marker .time{background:rgba(117,139,163,0.8);border-radius:1px;bottom:20px;color:white;font-size:12px;line-height:18px;margin-left:-18px;padding:0 5px;position:absolute;z-index:13}.leplayer-controls .timline-container.control--no-iphone .time-marker:hover:before{background:#1b4b7e}.leplayer-controls .timline-container.control--tap .time-marker:before{background:#1b4b7e}.leplayer-controls .time-played{background:rgba(27,75,126,0.6);bottom:0;left:0;position:absolute;top:0;width:0;z-index:15}.leplayer-controls .leplayer-timeline-sections{overflow-x:hidden;position:absolute;top:0;bottom:0;left:0;right:0}.leplayer-controls .leplayer-timeline-section{background:#758ba3;bottom:0;left:0;position:absolute;top:0;width:0;z-index:14}.leplayer-controls .leplayer-timeline-section:nth-child(2n){background:#303f50}.leplayer-controls .time-buffered{background-color:rgba(255,0,0,0.4);bottom:0;left:0;position:absolute;top:0;width:0;z-index:14}.leplayer-controls .volume-active{background:rgba(27,75,126,0.6);bottom:0;height:50%;position:absolute;width:100%}.leplayer-controls .volume-slider{height:144px}.leplayer-controls .volume-line{background:#758ba3;bottom:10px;position:absolute;left:12px;right:12px;top:10px}.leplayer-controls .volume-marker{background:#1b4b7e;bottom:50%;border-top:1px solid rgba(222,229,237,0.5);cursor:pointer;height:2px;left:-4px;margin-bottom:-1px;right:-4px;position:absolute}.leplayer-control-collection{margin-top:10px;margin-bottom:10px;outline:none}.leplayer-control-collection--one-row{display:-ms-flexbox;display:flex}.leplayer-control-collection--fullscreen{display:none;bottom:0;left:20px;position:fixed;right:20px;width:auto;z-index:1007}.leplayer--fullscreen .leplayer-control-collection--common{display:none}.leplayer--fullscreen.leplayer--user-active .leplayer-control-collection--fullscreen{display:block}.leplayer-error-display{position:absolute;top:0;left:0;right:0;background:red;color:white;font-weight:500;width:100%;height:auto;display:none;text-align:center;font-size:15px;padding:15px;z-index:18}.leplayer--fullscreen .leplayer-error-display{z-index:1008}.leplayer--error .leplayer-error-display{display:block}.leplayer-icon{display:block;min-width:1em;min-height:1em}.leplayer-icon svg{display:block;width:1em;height:1em}.leplayer__inner{position:relative;overflow:hidden}.leplayer--fullscreen .leplayer__inner{height:100%;margin:0 auto;position:absolute;top:0;width:100%;z-index:1006}.leplayer--mini .leplayer__inner{top:0;left:0;right:0;height:auto;display:-ms-flexbox;display:flex;position:fixed;max-width:100%;margin-left:auto;margin-right:auto;-ms-flex-align:stretch;align-items:stretch;box-sizing:border-box;z-index:20;max-height:127px;background:#f5f8fa;box-shadow:0 10px 15px -10px rgba(0,0,0,0.75)}.leplayer__info{display:none}.leplayer__last{display:none;position:absolute}.leplayer__last .leplayer-time{display:inline}.leplayer--mini .leplayer__info{display:-ms-flexbox;display:flex;padding:10px;height:50px;margin:0;-ms-flex-direction:column;flex-direction:column;color:black;height:100%;min-width:300px}.leplayer--mini .leplayer__last{display:block;right:20px}@media screen and (max-width:750px){.leplayer--mini .leplayer__last{display:none}}.leplayer--mini .leplayer__title{color:black;font-size:14px;margin-bottom:5px;font-weight:500;line-height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leplayer--mini .leplayer__video-info{margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leplayer__title{color:black;font-size:14px;margin-bottom:5px;font-weight:500;line-height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leplayer--mini .leplayer__title{display:block}.leplayer-key{font-family:inherit;font-size:inherit;box-shadow:1px 1px 0 1px rgba(120,120,120,0.5);background:#eee;border-radius:2px;color:#000;display:inline-block;margin:4.25px 2px 4.25px 0;padding:4px}.leplayer-control-collection--mini{margin-top:auto;margin-bottom:auto;display:none}.leplayer-control-collection--mini .control-time{display:block;padding:6px 10px;font-weight:500;width:150px;white-space:nowrap;box-sizing:border-box}@media (max-width:440px){.leplayer-control-collection--mini .control-time{display:none}}.leplayer-control-collection--mini .control-time__current{background:none;cursor:default;font-size:15px;text-align:right;color:black;display:inline}.leplayer-control-collection--mini .control-time__total{background:none;cursor:default;color:black;display:inline}.leplayer-control-collection--mini .control-time__total:before{content:'/';margin-right:9px}.leplayer-control-collection--mini .volume-control:hover .volume-slider{display:none}.leplayer-control-collection--mini .rate-current{min-width:34px}.leplayer--mini .leplayer-control-collection--mini{display:block}@keyframes leplayer-splashicon-fadeout{0%{opacity:1}to{opacity:0;transform:scale(2)}}.leplayer-splashicon{display:none;position:absolute;left:50%;top:50%;width:52px;height:52px;z-index:17;margin-left:-26px;margin-top:-26px;background:rgba(0,0,0,0.5);border-radius:26px;color:white;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;animation:leplayer-splashicon-fadeout .5s linear 1 normal forwards}.leplayer-splashicon--active{display:-ms-flexbox;display:flex}.leplayer--virgin .leplayer-splashicon{display:none}.leplayer--iphone .leplayer-controls .timeline-container{width:auto}.leplayer--iphone .leplayer-controls .timeline{display:none}.leplayer--mobile.leplayer--fullscreen .leplayer-control-collection--fullscreen{position:static}.leplayer--mobile.leplayer--fullscreen .controls-fullscreen{position:absolute;z-index:1007}.leplayer--mobile.leplayer--fullscreen .controls-fullscreen:nth-child(1){bottom:0;margin-bottom:0;width:100%}.leplayer--mobile.leplayer--fullscreen .controls-fullscreen:nth-child(2){top:0;left:0}.leplayer--mobile.leplayer--fullscreen .controls-fullscreen:nth-child(2) .control-dropdown__content{bottom:auto;top:32px}.leplayer-video{background:#000;display:block;outline:0;left:0;position:relative;z-index:16}.leplayer-video video{display:block;max-width:100%;width:100%;outline:0;height:auto}.leplayer-video video::-webkit-media-controls{display:none }.leplayer-video video::-webkit-media-controls-enclosure{display:none }.leplayer--fullscreen .leplayer-video,.leplayer--fullscreen video{height:100% ;margin:0 auto;width:100% ;padding-top:0 ;z-index:1006}.leplayer--mini .leplayer-video{z-index:21;position:relative;width:170px;-ms-flex:0 0 170px;flex:0 0 170px;top:auto;left:auto}.leplayer--mini video{position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto}.leplayer-play-button,.leplayer-loader-container{display:none;-ms-flex-align:center;align-items:center;align-contents:center;-ms-flex-pack:center;justify-content:center;background:rgba(0,0,0,0.5);color:#1b4b7e;cursor:pointer;position:absolute;height:100%;width:100%;outline:0;text-align:center;z-index:18;font-size:50px}.leplayer-play-button.control--hover,.leplayer-play-button.control--no-iphone:hover{background:rgba(0,0,0,0.2)}.leplayer-play-button.control--hover .leplayer-play-button__button,.leplayer-play-button.control--no-iphone:hover .leplayer-play-button__button{opacity:.8}.leplayer-play-button__button{text-shadow:0 0 10px rgba(255,255,255,0.3);padding:.5em;background-color:white;border-radius:50%;cursor:pointer}.leplayer-play-button .leplayer-icon{position:relative;left:.08em}.leplayer--inited.leplayer--virgin .leplayer-play-button{display:-ms-flexbox;display:flex}.leplayer--inited.leplayer--virgin.leplayer--waiting .leplayer-play-button{display:none}@media screen and (max-width:420px){.leplayer-play-button,.leplayer-loader-container{font-size:35px}}.leplayer--fullscreen .leplayer-play-button,.leplayer--fullscreen .leplayer-loader-container{z-index:1008}.leplayer--fullscreen .leplayer-play-button,.leplayer--fullscreen .leplayer-loader-container{font-size:50px}.leplayer--mini .leplayer-play-button{font-size:30px}.leplayer--playing .leplayer-play-button,.leplayer--error .leplayer-play-button,.leplayer--waiting .leplayer-play-button{display:none}.leplayer-loader-container{color:white;font-size:116px;display:-ms-flexbox;display:flex}.leplayer-loader-container__icon{animation:leplayer-spin 2s infinite linear}.leplayer--fullscreen .leplayer-loader-container{font-size:128px}.leplayer--mini .leplayer-loader-container{font-size:82px}.leplayer--inited .leplayer-loader-container,.leplayer--error .leplayer-loader-container{display:none}.leplayer--inited .leplayer-loader-container__icon,.leplayer--error .leplayer-loader-container__icon{animation:none}.leplayer--waiting .leplayer-loader-container{display:-ms-flexbox;display:flex}.leplayer--waiting .leplayer-loader-container__icon{animation:leplayer-spin 2s infinite linear}.leplayer--iphone .leplayer-loader-container{display:none}.leplayer--iphone .leplayer-loader-container__icon{animation:none}@keyframes leplayer-spin{100%{transform:rotate(360deg)}}.leplayer-sections{font-size:13px;height:100%;overflow:hidden;width:260px;z-index:16;box-sizing:border-box;position:relative;outline:none}.leplayer-sections--hidden{display:none}.leplayer-sections--fsonly{display:none}.leplayer-sections--hide-scroll .leplayer-sections__inner{position:absolute;top:0;bottom:0;left:0;right:-15px;box-sizing:content-box}.leplayer-sections__inner{overflow-y:scroll;height:100%}.leplayer-section{display:-ms-flexbox;display:flex;cursor:pointer;padding:5px 0;background:white;color:black;width:100%}.leplayer-section:nth-child(2n){background:#dde5ee}.leplayer-section.leplayer-section--active{background:#94a5b8}.leplayer-section.leplayer-section--active .leplayer-section-description{display:block}.leplayer-section:hover{background:#758ba3}.leplayer-section-time{color:#555;display:block;font-size:.92em;font-weight:400;padding-top:2px;text-align:right;width:3.5em;-ms-flex:0 0 3.5em;flex:0 0 3.5em}.leplayer-section-info{display:block;padding-left:10px;padding-right:7px;width:calc(100% - 3.5em)}.leplayer-section-title{font-weight:500;word-wrap:break-word}.leplayer-section-description{display:none;word-wrap:break-word}.leplayer-section-next-info{display:none}.leplayer__inner .leplayer-sections{position:absolute;top:0;right:0}.leplayer__inner .leplayer-section{background:rgba(255,255,255,0.8)}.leplayer__inner .leplayer-section:nth-child(2n){background:rgba(221,229,238,0.8)}.leplayer__inner .leplayer-section.leplayer-section--active{background:rgba(148,165,184,0.8)}.leplayer__inner .leplayer-section:hover{background:rgba(117,139,163,0.8)}.leplayer--fullscreen .leplayer-sections{display:none;position:absolute;top:50px;right:50px;bottom:132px;z-index:1008;height:calc(100% - 120px)}@media screen and (max-width:500px){.leplayer--fullscreen .leplayer-sections{top:50%;left:50%;bottom:auto;transform:translate(-50%, -50%)}}.leplayer--fullscreen.leplayer--user-active .leplayer-sections{display:block}.leplayer--fullscreen.leplayer--user-active .leplayer-sections--hidden{display:none}.leplayer--fullscreen .leplayer-sections--hidden{display:none}.leplayer--fullscreen .leplayer-section{background:rgba(31,37,46,0.7);color:#c4d8ee}.leplayer--fullscreen .leplayer-section.leplayer-section--active,.leplayer--fullscreen .leplayer-section:hover{background:#1f252e}.leplayer--fullscreen .leplayer-section:nth-child(2n){background:rgba(51,62,76,0.7)}.leplayer--fullscreen .leplayer-section:nth-child(2n).leplayer-section--active{background:#333e4c}.leplayer--fullscreen .leplayer-section:nth-child(2n):hover{background:#29313d}.leplayer--fullscreen .leplayer-section:hover{background:#14191f}.leplayer--fullscreen.leplayer--android .leplayer-section.leplayer-section--active{background:#1b4b7e}.leplayer--fullscreen .leplayer-section-time{color:white}.leplayer--mini .leplayer__inner .leplayer-sections{margin-left:auto;display:-ms-flexbox;display:flex;position:relative;-ms-flex:0 0 260px;flex:0 0 260px;width:260px}@media screen and (max-width:750px){.leplayer--mini .leplayer__inner .leplayer-sections{display:none}}.leplayer--mini .leplayer__inner .leplayer-section-next-info{display:block;margin-bottom:15px}.leplayer--mini .leplayer__inner .leplayer-section-description{display:none}.leplayer--mini .leplayer__inner .leplayer-section{display:none;height:100%;background:#dde5ee}.leplayer--mini .leplayer__inner .leplayer-section:hover{background:#758ba3}.leplayer--mini .leplayer__inner .leplayer-sections{overflow:hidden}.leplayer--mini .leplayer__inner .leplayer-section-time{display:none}.leplayer--mini .leplayer__inner .leplayer-section--active+.leplayer-section{display:block}.leplayer-timeline-buffered__range{position:absolute;top:0;bottom:0;background-color:rgba(255,0,0,0.4);z-index:15}.leplayer-poster{display:none;position:absolute;z-index:17;left:0;right:0;top:0;bottom:0;background-size:100% auto;background-repeat:no-repeat;background-position:center}.leplayer--virgin .leplayer-poster{display:block}.leplayer--fullscreen .leplayer-poster{z-index:1007}