"
Team:ETH Zurich/Templates/Projekktor-CSS
From 2013.igem.org
(Created page with "/* 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.porkh...")
Newer edit →
Revision as of 16:06, 5 September 2013
/* 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;
}
.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;
}
/* time / time left */ .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;
}
/* special for single .pptimeleft { background: url("maccaco.png") no-repeat -91px top transparent; }
- /
/* lo / hi quality toggle */ .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;
}
/* previous / next item */
.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;
}
/* Scrubber, Playhead and fluff */ .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; }
/* Context Menu */
.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; margin: 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;
}
/****************************
/* VAST ad plugin specific */
/***************************/
.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;
}
/**************************** /* Subtitles plugin specific */ /***************************/ .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;
}
