moovie
Version:
An advanced HTML5 video player for MooTools.
2 lines (1 loc) • 13.8 kB
CSS
.moovie-checkbox{font:inherit;height:0;margin:0;opacity:0;overflow:visible;position:absolute;width:0}.moovie-checkbox+.moovie-label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:11px;line-height:17px;position:relative}.moovie-checkbox+.moovie-label::before{background:none no-repeat center;border:1px solid rgba(255,255,255,0.15);border-radius:4px;content:' ';height:17px;margin-right:5px;width:17px}.moovie-checkbox:checked+.moovie-label::before{background-image:url("img/checked.png")}.moovie-slider{position:relative}.moovie-slider .slider-track{background-color:rgba(255,255,255,0.7);border-radius:3px;position:absolute}.moovie-slider .slider-fill{background-color:#b9dc84;border-radius:3px;position:absolute}.moovie-slider .slider-thumb{background-color:#b9dc84;border:4px solid #fff;border-radius:13px;height:13px;position:absolute;width:13px}.moovie-slider[aria-orientation="horizontal"]{height:100%;width:100%}.moovie-slider[aria-orientation="horizontal"] .slider-track{height:3px;top:14.7px;width:100%}.moovie-slider[aria-orientation="horizontal"] .slider-fill{height:3px;top:14.7px;width:0}.moovie-slider[aria-orientation="horizontal"] .slider-thumb{left:0;margin-left:-6.5px;top:9.7px}.moovie-slider[aria-orientation="vertical"]{height:50px;width:27px}.moovie-slider[aria-orientation="vertical"] .slider-track{height:100%;left:12px;width:3px}.moovie-slider[aria-orientation="vertical"] .slider-fill{bottom:0;height:0;left:12px;width:3px}.moovie-slider[aria-orientation="vertical"] .slider-thumb{bottom:0;left:7px;margin-bottom:-6.5px}.moovie-tooltip{background-color:rgba(196,82,5,0.8);border-radius:4px;color:#fff;font-size:1em;margin-left:16px;margin-top:16px;max-width:200px;padding:2px 5px;position:absolute;text-align:center;white-space:nowrap;z-index:99}.moovie-tooltip[hidden]{opacity:0;visibility:hidden}.moovie-tooltip[aria-disabled="true"]{display:none}.moovie-panel{background-color:rgba(0,0,0,0.8);border:1px solid rgba(255,255,255,0.25);border-radius:4px;bottom:4.5em;left:2em;padding:2em;position:absolute;right:2em;top:2em;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.moovie-panel[hidden]{opacity:0;visibility:hidden}.moovie-panel>.close{display:block;font-size:1.4em;height:2em;position:absolute;right:1.4em;text-shadow:0 1px 0 #fff;top:1.4em;width:2em}.moovie-panel>.close:hover{text-shadow:0 1px 15px #fff}.moovie-panel>header{border-bottom:1px dotted #888;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.moovie-panel>header>h2{margin:0}.moovie button,.moovie [role="button"]{background:0;border:0;color:white;cursor:pointer;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:1.1em;font-style:normal;font-weight:600;line-height:1;padding:0;text-align:center;z-index:99}.moovie button:focus,.moovie [role="button"]:focus{outline:0}.moovie button[disabled],.moovie [role="button"][disabled]{display:none}.moovie-popup{position:relative}.moovie-popup .popup-target{height:100%;width:100%}.moovie-popup .popup-content{background-color:rgba(0,0,0,0.8);border:1px solid rgba(255,255,255,0.15);border-radius:4px;bottom:100%;margin:0 0 -5px 2px;opacity:0;position:absolute;-webkit-transition:all .2s ease;transition:all .2s ease;visibility:hidden;z-index:98}.moovie-popup:hover .popup-content{opacity:1;visibility:visible}.moovie{background-color:transparent;border:0;-webkit-box-shadow:0 0 15px #000;box-shadow:0 0 15px #000;color:#fff;cursor:default;font-family:'Lucida Sans Unicode',Arial,Helvetica,sans-serif;font-size:12px;line-height:1.8;max-width:852px;padding:0;position:relative}.moovie *,.moovie *::before,.moovie *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.moovie h1{margin:1.4em 0 0;font-family:GaramondItalic,'Palatino Linotype','Lucida Sans Unicode',Arial,Helvetica,sans-serif;font-weight:normal;line-height:1.4;text-shadow:1px 1px 3px #cbcbcb;color:#83b834;font-size:3.5em}.moovie h2{margin:1.4em 0 0;font-family:GaramondItalic,'Palatino Linotype','Lucida Sans Unicode',Arial,Helvetica,sans-serif;font-weight:normal;line-height:1.4;text-shadow:1px 1px 3px #cbcbcb;color:#83b834;font-size:2.5em}.moovie h3{margin:1.4em 0 0;font-weight:bold;color:#666;font-size:1.4em}.moovie ol{margin:1.5em 0;padding:0 0 0 3em}.moovie p{margin:1.3em 0}.moovie video{background:black;display:block;width:100%;height:100%}.moovie .about-panel{background-image:url("img/moovie.png");background-position:bottom 2em right 2em;background-repeat:no-repeat}.moovie .about-panel a{color:#444;text-decoration:none;display:inline-block;text-indent:0;border-bottom:1px solid #888;display:inline}.moovie .about-panel a:hover{text-decoration:none;border:0}.moovie .about-panel a:visited{color:#888;border-color:#cbcbcb}:-webkit-full-screen:not(:root){position:fixed ;top:0 ;left:0 ;right:0 ;bottom:0 ;width:100% ;height:100% ;margin:0 ;min-width:0 ;max-width:none ;min-height:0 ;max-height:none ;-webkit-box-sizing:border-box ;box-sizing:border-box ;object-fit:contain ;-webkit-transform:none ;transform:none }:-moz-full-screen:not(:root){position:fixed ;top:0 ;left:0 ;right:0 ;bottom:0 ;width:100% ;height:100% ;margin:0 ;min-width:0 ;max-width:none ;min-height:0 ;max-height:none ;box-sizing:border-box ;object-fit:contain ;transform:none }:-ms-fullscreen:not(:root){position:fixed ;top:0 ;left:0 ;right:0 ;bottom:0 ;width:100% ;height:100% ;margin:0 ;min-width:0 ;max-width:none ;min-height:0 ;max-height:none ;box-sizing:border-box ;object-fit:contain ;transform:none }:fullscreen:not(:root){position:fixed ;top:0 ;left:0 ;right:0 ;bottom:0 ;width:100% ;height:100% ;margin:0 ;min-width:0 ;max-width:none ;min-height:0 ;max-height:none ;-webkit-box-sizing:border-box ;box-sizing:border-box ;-o-object-fit:contain ;object-fit:contain ;-webkit-transform:none ;transform:none }.moovie .debug{font:.75em Monaco,monospace;width:218px;padding:10px;border:1px solid #aaa;position:absolute;left:-235px;top:-5px;color:#444;overflow:hidden}.moovie .debug[aria-disabled="true"]{display:none}.moovie .debug,.moovie .debug tr,.moovie .debug p{background:#ddd}.moovie .debug table{width:100%;border-spacing:5px;border-collapse:collapse}.moovie .debug td{vertical-align:top;padding:3px 6px}.moovie .debug td:first-child{width:1px}.moovie .debug td+td{font-weight:bold}.moovie .debug p{border-top:1px dotted #888;margin:5px 0 0;padding:10px 5px 5px;text-indent:0}.playlist-panel>.header{display:none}.playlist-panel>ol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;margin:0;overflow:hidden;padding:0}.playlist-panel>ol li{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;left:0;margin:0;margin-right:0;padding:0;right:0;top:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1000ms;transition:-webkit-transform 1000ms;transition:transform 1000ms;transition:transform 1000ms,-webkit-transform 1000ms}.playlist-panel>ol li img{height:100%;margin-right:1em;-o-object-fit:contain;object-fit:contain}.playlist-panel>ol li .content{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.playlist-panel>ol li h3{margin:0;font-family:GaramondItalic,'Palatino Linotype','Lucida Sans Unicode',Arial,Helvetica,sans-serif;font-weight:normal;line-height:1.4;text-shadow:1px 1px 3px #cbcbcb;color:#83b834;font-size:2.5em}.playlist-panel>ol li p{white-space:pre-wrap}.playlist-panel>ol li p::before{content:'Summary: ';font-weight:600}.playlist-panel>ol li button{background-color:#c45205;border-radius:4px;margin-right:1em;padding:.5em}.playlist-panel>ol li button:hover{background-color:#b04903}.playlist-panel .moovie-checkbox+.moovie-label{color:#c45205;font-size:1.1em;top:5px;vertical-align:baseline}.playlist-panel .moovie-checkbox+.moovie-label:hover{text-decoration:underline}.playlist-panel>.previous,.playlist-panel>.next{background:0;font-size:4em;height:1em;position:absolute;text-shadow:0 1px 0 #fff;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1em}.playlist-panel>.previous:hover,.playlist-panel>.next:hover{text-shadow:0 1px 15px #fff}.playlist-panel>.previous{left:0}.playlist-panel>.next{right:0}.moovie .overlay{background-color:rgba(0,0,0,0.5);bottom:0;left:0;opacity:.7;position:absolute;right:0;top:0;-webkit-transition:all 500ms ease 0s;transition:all 500ms ease 0s}.moovie[data-playbackstate="playing"] .overlay{display:none}.moovie[data-playbackstate="loading"] .overlay,.moovie[data-playbackstate="seeking"] .overlay,.moovie[data-playbackstate="waiting"] .overlay{opacity:1}.moovie[data-playbackstate="stopped"]:hover .overlay,.moovie[data-playbackstate="ended"]:hover .overlay,.moovie[data-playbackstate="paused"]:hover .overlay{opacity:1}.moovie .overlay::after{background:#a5d260 none repeat scroll 0 0;border:4px solid #FFF;border-radius:10px;color:#000;display:block;left:50%;position:absolute;text-align:center;text-shadow:1px 1px 3px rgba(0,0,0,0.6);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;width:200px;font:2.8em/70px "Times New Roman",serif}.moovie[data-playbackstate="loading"] .overlay::after{content:"Loading..."}.moovie[data-playbackstate="stopped"] .overlay::after{content:"Play video"}.moovie[data-playbackstate="paused"] .overlay::after{content:"Paused"}.moovie[data-playbackstate="ended"] .overlay::after{content:"Replay"}.moovie[data-playbackstate="seeking"] .overlay::after{content:"Seeking..."}.moovie[data-playbackstate="waiting"] .overlay::after{content:"Waiting..."}.moovie-title{color:#fff;font-size:1.6em;padding:3px;position:absolute;right:20px;text-shadow:2px 2px 5px rgba(0,0,0,0.5);top:5px;-webkit-transition:all 2s ease 0s;transition:all 2s ease 0s}.moovie-title[aria-hidden="true"]{opacity:0;visibility:hidden}.moovie-controls .elapsed,.moovie-controls .duration{-ms-flex-item-align:center;align-self:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.2em;min-width:2em;width:auto}.moovie-controls{position:absolute;left:0;right:0;bottom:0;font-size:.9em;-webkit-transition:all .4s ease;transition:all .4s ease;display:-webkit-box;display:-ms-flexbox;display:flex;background:rgba(0,0,0,0.5);height:3em}.moovie-controls[hidden],.moovie[data-playbackstate="stopped"] .moovie-controls{opacity:0;visibility:hidden}.moovie-controls>button,.moovie-controls>.moovie-popup>button{background-position:50% 50%;background-repeat:no-repeat;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:3em}.moovie-controls .play{background-image:url("img/play.png")}.moovie[data-playbackstate="playing"] .moovie-controls .play{background-image:url("img/pause.png")}.moovie-controls .stop{background-image:url("img/stop.png")}.moovie-controls .previous{background-image:url("img/previous.png")}.moovie-controls .next{background-image:url("img/next.png")}.moovie-controls .elapsed{padding:0 1em 0 .5em}.moovie-controls .seekbar{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:4em;position:relative}.moovie-controls .seekbar .moovie-tooltip{bottom:100%;width:4em;text-align:center;margin-left:-2em;margin-top:0;position:absolute}.moovie-controls .seekbar .moovie-tooltip::after{content:"";position:absolute;width:0;height:0;border-style:solid;border-color:rgba(196,82,5,0.8) transparent transparent;top:100%;border-width:5px;margin-left:-1.5em}.moovie-controls .seekbar-buffered{background-color:rgba(0,255,0,0.3);border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;height:3px;position:absolute;top:14.7px;width:0}.moovie-controls .duration{padding:0 .5em 0 1em}.moovie-controls .volume-control button{background-image:url("img/full.png")}.moovie-controls .volume-control[data-muted="true"] button{background-image:url("img/muted.png")}.moovie-controls .volume-control .popup-content{padding:13px 0}.moovie-controls .settings-control>button{background-image:url("img/settings.png")}.moovie-controls .settings-control .popup-content{padding-top:4px}.moovie-controls .settings-control .moovie-checkbox+.moovie-label{padding:3px 8px;white-space:nowrap;width:100%}.moovie-controls .settings-control .moovie-checkbox+.moovie-label:hover{background-color:#994004}.moovie-controls .more-control>button{background-image:url("img/more.png")}.moovie-controls .more-control .popup-content{padding:10px 7px}.moovie-controls .more-control .popup-content button{display:block;height:13px;width:13px}.moovie-controls .more-control .about{background-image:url("img/about.png");margin-bottom:10px}.moovie-controls .more-control .info{background-image:url("img/info.png");margin-bottom:10px}.moovie-controls .more-control .playlist{background-image:url("img/playlist.png")}.moovie-controls .fullscreen{background-image:url("img/close.png")}