le-player
Version:
The best HTML5 video player made for Lectoriy.
1 lines • 18.7 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:table;height:40px;position:relative;width:100%;outline:none}.leplayer-controls--left{width:1%;margin-right:auto}.leplayer-controls--right{width:1%;margin-left:auto;display:none}.leplayer-controls--justify{width:auto}.leplayer-controls.controls-fullscreen{display:block;position:absolute;bottom:0;left:0;right:0;width:auto;z-index:1007}.leplayer-controls.controls-fullscreen .control{background:rgba(20,31,51,0.8);color:rgba(255,255,255,0.8)}.leplayer-controls.controls-fullscreen .control:hover{background:rgba(20,31,51,0.8);color:#ffffff}.leplayer-controls.controls-fullscreen .control.disabled{color:#6d7278}.leplayer-controls.controls-fullscreen .control.disabled:hover{background:rgba(20,31,51,0.8);color:rgba(255,255,255,0.6)}.leplayer-controls.controls-fullscreen .control.play{background:#da3831;color:#ffffff}.leplayer-controls.controls-fullscreen .control.play:hover{background:#da3831;color:#ffffff}.leplayer-controls.controls-fullscreen .control-dropdown__content{background:#ffffff;color:rgba(20,31,51,0.8);z-index:1008}.leplayer-controls.controls-fullscreen .control-checkbox--checked{background:#333e4c;color:#c4d8ee}.leplayer-controls.controls-fullscreen .control-checkbox--checked:hover{background:#29313d}.leplayer-controls.controls-fullscreen .info-control__content{background:#47566b;color:white}.leplayer-controls.controls-fullscreen .control-text{background:rgba(20,31,51,0.8);color:rgba(255,255,255,0.8)}.leplayer-controls.controls-fullscreen .control-container__item{color:rgba(20,31,51,0.8)}.leplayer-controls.controls-fullscreen .control-container__item:hover{background:#da3831;color:#ffffff}.leplayer-controls.controls-fullscreen .control-container__item--active{background:none;color:#da3831}.leplayer-controls.controls-fullscreen .timeline{background:#7588a3}.leplayer-controls.controls-fullscreen .timeline-container{background:rgba(20,31,51,0.8)}.leplayer-controls.controls-fullscreen .timeline-container .control-text{height:auto;position:relative}.leplayer-controls.controls-fullscreen .timeline-container:hover{background:rgba(20,31,51,0.8)}.leplayer-controls.controls-fullscreen .time-marker{background:#da3831;z-index:1007}.leplayer-controls.controls-fullscreen .time-marker.shadow{background:#da3831;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:#da3831;z-index:1005}.leplayer-controls.controls-fullscreen .time-buffered{background-color:rgba(255,255,255,0.2);z-index:1004}.leplayer-controls.controls-fullscreen .volume-active{background:#da3831}.leplayer-controls.controls-fullscreen .volume-slider{height:144px}.leplayer-controls.controls-fullscreen .volume-line{background:#9fabbd}.leplayer-controls.controls-fullscreen .volume-marker{background:#da3831}.leplayer-controls .control{background:rgba(20,31,51,0.8);color:rgba(255,255,255,0.8);cursor:pointer;display:table-cell;font-size:16px;height:40px;line-height:100%;padding:0 8px;text-align:center;vertical-align:middle;width:1%;border-radius:0 }.leplayer-controls .control:hover{background:rgba(20,31,51,0.8);color:#ffffff}.leplayer-controls .control.play{background:#da3831;color:#ffffff;padding:0 22px;width:1%}.leplayer-controls .control.play.disabled:hover{background:#da3831;color:#ffffff}.leplayer-controls .control.play:hover{background:#da3831;color:#ffffff}.leplayer-controls .control.disabled{cursor:not-allowed;color:#94a5b8}.leplayer-controls .control.disabled:hover{background:#dee5ed;color:#94a5b8}.leplayer-controls .control-checkbox--checked{background:#1b4b7e;color:#dee5ed}.leplayer-controls .control-checkbox--checked: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:#ffffff;bottom:40px;cursor:default;display:none;left:0;min-width:100%;position:absolute;z-index:18;left:50%;transform:translateX(-50%);border-radius:8px;overflow:hidden}.leplayer-controls .control-dropdown__content:before{content:'';position:absolute;width:40px;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:table-cell;height:40px;position:relative;width:1%}.leplayer-controls .control-container__item{display:block;color:rgba(20,31,51,0.8);white-space:nowrap;cursor:pointer;font-size:12px;line-height:40px;padding:0 7px}.leplayer-controls .control-container__item:hover{background:#da3831;color:#ffffff}.leplayer-controls .control-container__item--active{background:none;color:#da3831}.leplayer-controls .control-icon{line-height:40px;padding:0 8px}.leplayer-controls .control-text{background:rgba(20,31,51,0.8);color:rgba(255,255,255,0.8);display:table-cell;font-size:12px;box-sizing:content-box;line-height:100%;padding:0 5px;text-align:center;vertical-align:middle}.leplayer-controls .divider{background:none;display:table-cell;padding:0 5px;width:.01%}.leplayer-controls .fa{text-align:center;width:16px}.leplayer-controls .timeline{background:rgba(255,255,255,0.2);cursor:pointer;display:block;height:4px;margin:14px 0;position:relative;width:100%;border-radius:2px}.leplayer-controls .timeline-container{background:rgba(20,31,51,0.8);display:table-cell;position:relative;white-space:nowrap;width:100%}.leplayer-controls .timeline-container:hover{background:rgba(20,31,51,0.8)}.leplayer-controls .timeline-subcontainer{display:table;width:100%}.leplayer-controls .time-current,.leplayer-controls .time-total{width:1%;background:none }.leplayer-controls .time-marker{background:#da3831;cursor:pointer;height:16px;left:0;position:absolute;top:-6px;width:16px;border-radius:8px;z-index:17;display:none;margin-left:-8px}.leplayer-controls .time-marker--drag:before,.leplayer-controls .time-marker:hover:before{background:#1b4b7e}.leplayer-controls .time-marker.shadow{background:#da3831;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 .time-played{background:#da3831;bottom:0;left:0;position:absolute;top:0;width:0;z-index:25;border-radius:2px}.leplayer-controls .leplayer-timeline-sections{overflow-x:hidden;position:absolute;top:0;bottom:0;left:0;right:0}.leplayer-controls .leplayer-timeline-section{background:none;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,255,255,0.2);bottom:0;left:0;position:absolute;top:0;width:0;z-index:14}.leplayer-controls .volume-active{background:#da3831;bottom:0;height:50%;position:absolute;width:100%;border-radius:2px}.leplayer-controls .volume-slider{height:144px}.leplayer-controls .volume-line{background:#9fabbd;bottom:10px;border-radius:2px;position:absolute;left:14px;right:14px;top:10px;cursor:pointer}.leplayer-controls .volume-marker{background:#da3831;cursor:pointer;height:16px;width:16px;left:-6px;margin-bottom:-10px;right:-4px;position:absolute;border-radius:8px}.leplayer-control-collection{outline:none;display:-ms-flexbox;display:flex}.leplayer-control-collection.leplayer-control-collection--common{position:absolute;bottom:0;z-index:999;width:100%}.leplayer-control-collection--one-row{display:-ms-flexbox;display:flex}.leplayer-control-collection--fullscreen{display:none}.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:table-cell;vertical-align:middle;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}.leplayer-control-collection--mini .control-time__total{background:none;cursor:default;color:black}.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-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;-ms-flex-line-pack:center;align-content: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:hover{background:rgba(0,0,0,0.2)}.leplayer-play-button: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--fullscreen .leplayer-play-button__button{padding:.6em}.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}@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;background:#f0f2f7}.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:rgba(255,255,255,0.2);color:black;width:100%}.leplayer-section:nth-child(2n){background:rgba(255,255,255,0.5)}.leplayer-section.leplayer-section--active{background:#ffffff}.leplayer-section.leplayer-section--active .leplayer-section-time{color:#da3831}.leplayer-section.leplayer-section--active .leplayer-section-description{display:block}.leplayer-section:hover{background:#ffffff}.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:0;right:0;z-index:1008;height:calc(100% - 40px);width:360px;background:rgba(20,31,51,0.8)}.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.leplayer-section--active .leplayer-section-time,.leplayer--fullscreen .leplayer-section:hover .leplayer-section-time{color:#da3831}.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).leplayer-section--active .leplayer-section-time{color:#da3831}.leplayer--fullscreen .leplayer-section:nth-child(2n):hover{background:#29313d}.leplayer--fullscreen .leplayer-section:hover{background:#14191f}.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,255,255,0.2);border-radius:2px;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}