/* Theme Name: MACCACO Theme URI: http://www.projekktor.com/downloads Description: this theme is a screenr clone Version: 2.2 Author: Michel Maillard Author URI: http://www.porkhead.org */ /*************************************** general ***************************************/ .projekktor { background-color: #000; font-family: 'Lucida Grande', 'Trebuchet MS', Arial, Sans-Serif; font-size: 12px; font-weight: bold; text-transform:uppercase; padding:0; display:block; position: relative; overflow: hidden; width: 400px; } .pptestcard { background: url(noise.gif) center center repeat; width: 100%; height: 100%; color: #fff; font-size: 18px; overflow: hidden; } .pptestcard p { background-color: #3b393e; width: 60%; margin: auto; line-height: 25px; position: relative; top: 25%; padding: 10px; border:5px solid #000; text-align: center; } /*************************************** display plugin ***************************************/ .ppdisplay { background-color: #000; position: relative !important; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .ppdisplay .inactive, .ppstart.inactive, .ppbuffering.inactive { display: none; } .ppstart { position: absolute; left: 50%; bottom: 50%; margin-left:-45px; margin-bottom: -38px; cursor: pointer; height: 84px; width: 84px; display: block; padding: 0px; background: url(start.png) no-repeat left top transparent; } .ppstart:hover { background: url(start.png) no-repeat left bottom transparent; } .ppstart:active { background: url(start.png) no-repeat left -169px transparent; } .ppbuffering { position: absolute; left: 50%; bottom: 50%; margin-left:-45px; margin-bottom: -38px; display: block; z-index:9010; padding: 0px; background: url(buffering.gif) no-repeat center center #000; height: 84px; width: 84px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } /*************************************** controlbar plugin ***************************************/ .ppcontrols { position: absolute; bottom: 0; right:0; display: block; width: 100%; height: 36px; background: #2e2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #2e2d2d 0%, #0f0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2d2d), color-stop(100%,#0f0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #2e2d2d 0%,#0f0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2d2d', endColorstr='#0f0e0e',GradientType=0 ); /* IE6-9 */ border-style:solid; border-color:#413e3e; border-width:1px 0; padding: 0; margin:0; } .ppcontrols .active { display: block; } .ppcontrols .inactive { display: none; } .projekktor.notransitions .ppcontrols.active { display: block; } .projekktor.notransitions .ppcontrols.inactive { display: none; } .ppcontrols.active { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0); -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .ppcontrols.inactive { filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; filter: alpha(opacity=0); -webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .ppcontrols ul { list-style-type: none; } .ppcontrols ul.left { position: relative; top: 0; left: 0; padding: 0; margin:0; } .ppcontrols ul.right { position: relative; top: 0; right: 0; padding: 0; margin:0; width: 280px; } .ppcontrols ul.bottom { position: relative; top: 31px; left: 0; padding: 0; margin:0; } .ppcontrols ul.left li { float: left; position: relative; } .ppcontrols ul.right li { float: right; position: relative; } /* PLAY / PAUSE - left */ .ppplay, .pppause { background: url(maccaco.png) no-repeat left top transparent; width: 30px; height: 30px; cursor: pointer; border-right: 1px solid #000; } .ppplay:hover { background: url(maccaco.png) no-repeat left -35px transparent; } .ppplay:active { background: url(maccaco.png) no-repeat left -36px transparent; } .pppause { background: url(maccaco.png) no-repeat left -70px transparent; } .pppause:hover { background: url(maccaco.png) no-repeat left -105px transparent; } .pppause:active { background: url(maccaco.png) no-repeat left -106px transparent; } /* Enter / Exit Fullscreen - right */ .projekktor.audio .ppfsenter, .projekktor.audio .ppfsexit { display: none; } .ppfsenter, .ppfsexit { width: 30px; height: 30px; background: url(maccaco.png) no-repeat right top transparent; cursor: pointer; border-left: 1px solid #413e3e; } .ppfsenter:hover { background: url(maccaco.png) no-repeat right -35px transparent; } .ppfsenter:active { background: url(maccaco.png) no-repeat right -36px transparent; } .ppfsexit { background: url(maccaco.png) no-repeat right -70px transparent; } .ppfsexit:hover { background: url(maccaco.png) no-repeat right -105px transparent; } .ppfsexit:active { background: url(maccaco.png) no-repeat right -106px transparent; } /* Unmute / Max volume - right */ .ppvmax { width: 30px; height: 30px; border-right: 1px solid #000; border-left:none; background: url(maccaco.png) no-repeat -842px top transparent; } .ppvmax:hover { background: url(maccaco.png) no-repeat -842px -35px transparent; } .ppvmax:active { background: url(maccaco.png) no-repeat -842px -36px transparent; } /* Mute / Min volume - right */ .ppmute { width: 29px; height: 30px; border-left:1px solid #413e3e; background: url(maccaco.png) no-repeat -750px top transparent; } .ppmute:hover { background: url(maccaco.png) no-repeat -750px -35px transparent; } .ppmute:active { background: url(maccaco.png) no-repeat -750px -36px transparent; } /* volume slider - right */ .ppvslider { margin: 13px 5px; height: 16px; width: 60px; background: url(maccaco.png) no-repeat -781px -13px transparent; } .ppvmarker { position: relative; right:0; left: 0; height: 6px; width: 100%; background: url(maccaco.png) no-repeat -634px -13px transparent; } .ppvknob { cursor: pointer; z-index: 201; position: relative; background: url(maccaco.png) no-repeat -699px -5px transparent; top: -13px; left:0; width: 6px; height: 20px; padding: 0; } .pptimeleft {color: #fff; width: 130px; line-height: 30px; height: 30px; border-left: 1px solid #413e3e; border-right: 1px solid #000; text-align: center; overflow: hidden; } .pploquality, .pphiquality { background: url(maccaco.png) no-repeat -60px -72px transparent; width: 30px; height: 30px; cursor: pointer; border-left:1px solid #413e3e; border-right:1px solid #000; } .pphiquality:hover { background: url(maccaco.png) no-repeat -32px -106px transparent; } .pploquality { background: url(maccaco.png) no-repeat -32px -72px transparent; } .pploquality:hover { background: url(maccaco.png) no-repeat -32px -106px transparent; } .pphiquality:active, .pploquality:active { background: url(maccaco.png) no-repeat -32px -105px transparent; } .ppnext, .ppprev { display:block; background: url(maccaco.png) no-repeat -59px top transparent; width: 30px; height: 30px; cursor: pointer; border-left:1px solid #413e3e; border-right:1px solid #000; } .ppnext { border-right:none;} .ppnext:hover { background: url(maccaco.png) no-repeat -59px -35px transparent; } .ppnext:active { background: url(maccaco.png) no-repeat -59px -36px transparent; } .ppprev { background: url(maccaco.png) no-repeat -32px top transparent; } .ppprev:hover { background: url(maccaco.png) no-repeat -32px -35px transparent; } .ppprev:active { background: url(maccaco.png) no-repeat -32px -36px transparent; } .pploop, .pploop .on, .pploop .off { display:block; line-height: 30px; color: #fff; width: 30px; height: 30px; cursor: pointer; border-left:1px solid #413e3e; border-right:1px solid #000; } .pploop.off { color: #ccc; } .ppscrubber { position: absolute; height: 5px; width: 100%; background: url(maccaco-load.gif) repeat-x left top transparent; left: 0; margin: 0; padding: 0; border-bottom: 1px solid #000; } .audio .ppscrubber { background: url(maccaco-load-static.png) repeat-x left top transparent; } .ppscrubberdrag { cursor: pointer; z-index: 302; position: absolute; background-color: transparent; top:0; left:0; height: 5px; width: 100%; } .ppplayhead, .pploaded { position: relative; display: block; left: 0; bottom: 0; height: 5px; width: 1px; background-color:#fff; cursor: pointer; z-index: 301; -webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0); -webkit-transition: width 0.1s linear; -moz-transition: width 0.1s linear; -o-transition: width 0.1s linear; transition: width 0.1s linear; } .ppcuepoint { position: absolute; height: 5px; width: 5px; background-color: yellow; top: 0; left: 0; margin: 0; padding: 0; z-index: 302; } .ppcuepoint:hover { background-color: red; cursor: pointer; } .pploaded { position: relative; z-index: 10; background: rgb(65, 62, 62) ; opacity: 0.8; filter: alpha(opacity = 80); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .ppplayhead { margin-top: -5px; } .ppscrubbertip { padding: 3px; position: absolute; top: -30px; left: 25px; font-size: 11px; line-height: 15px; color: #fdfdfd; background: #2e2d2d; z-index: 10; display: none; } .ppscrubbertip:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ppscrubbertip:after { border-color: rgba(2, 28, 79, 0); border-top-color: #333; border-width: 5px; left: 50%; margin-left: -5px; } .ppcontextmenu.active { display: block; } .ppcontextmenu.inactive { display: none; } .ppcontextmenu { background: none repeat scroll 0 0 #FFFFFF; list-style: none outside none; border: 1px solid #CCCCCC; border-radius: 2px 2px 2px 2px; margin: 4px 0; outline: medium none; overflow: auto; padding: 6px 0; position: absolute; z-index: 2147483647; in: 0; padding: 0; top: 0; left: 0; } .ppcontextmenu li { color: #333; cursor: pointer; display: block; margin: 0; padding: 6px 20px; text-decoration: none; white-space: nowrap; word-wrap: normal; } .ppcontextmenu li:hover { color: #fff; background-color: #333; } .ppad .left, .ppad .right { display: none; border: none; } .ppad .ppcontrols { background: transparent; border: none; } .ppad .ppadtitle { position: absolute; bottom: 2%; left: 2%; border: none; } .ppadskip { position: absolute; padding-top: 2px; bottom: -10px; right: 0px; width: 85%; height: 28px; background-color: transparent; color: #fdfdfd; } .ppskip.locked { background-color: red; } .ppskip.unlocked { cursor: pointer; color: #00B0FF; } .pppostad .ppprev.active { display: none; } .ppadoverlay.inactive { display: none; } .pptracksbtn.inactive, .pptracks.inactive { display: none; } .pptracksbtn.active, .pptracks.active { display: block; } .pptracks span { position: relative; } .pptracksbtn.on, .pptracksbtn.off { background: url(maccaco.png) no-repeat -120px -72px transparent; width: 30px; height: 30px; cursor: pointer; border-left:1px solid #413e3e; border-right:1px solid #000; } .pptracksbtn.on { background: url(maccaco.png) no-repeat -92px -72px transparent; } .pptracksbtn:hover { background: url(maccaco.png) no-repeat -118px -106px transparent; } .pptracks{ text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; overflow: hidden; color: #fdfdfd; background:rgb(0,0,0); background: transparent\9; background:rgba(0,0,0,0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); zoom: 1; padding: 5px 0; z-index: 1000; } .pptracks.shifted { bottom: 38px; }