Team:ETH Zurich/Templates/Projekktor-CSS

From 2013.igem.org

(Difference between revisions)
 
Line 178: Line 178:
.ppcontrols ul {
.ppcontrols ul {
     list-style-type: none;   
     list-style-type: none;   
 +
    list-style-image: none;
 +
    line-height: normal;
}
}

Latest revision as of 16:21, 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("/wiki/images/b/bd/ETH_Zurich.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("/wiki/images/f/f7/ETH_Zurich.start.png") no-repeat left top transparent;

} .ppstart:hover { 

   background: url("/wiki/images/f/f7/ETH_Zurich.start.png") no-repeat left bottom transparent;

} .ppstart:active { 

   background: url("/wiki/images/f/f7/ETH_Zurich.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("/wiki/images/5/50/ETH_Zurich.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;   
   list-style-image: none;
   line-height: normal;

}

.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat left top transparent;
   width: 30px;
   height: 30px;
   cursor: pointer;
   border-right: 1px solid #000;

}

.ppplay:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat left -35px transparent;

} .ppplay:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat left -36px transparent;

}

.pppause { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat left -70px transparent;

}

.pppause:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat left -105px transparent;

}

.pppause:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat right top transparent;
   cursor: pointer;
   border-left: 1px solid #413e3e;

} .ppfsenter:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat right -35px transparent;

} .ppfsenter:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat right -36px transparent;

} .ppfsexit { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat right -70px transparent;

} .ppfsexit:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat right -105px transparent;

} .ppfsexit:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -842px top transparent;

}

.ppvmax:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -842px -35px transparent;

} .ppvmax:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -842px -36px transparent;

}


/* Mute / Min volume - right */ .ppmute { 

   width: 29px;
   height: 30px;    
   border-left:1px solid #413e3e;
   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -750px top transparent;

} .ppmute:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -750px -35px transparent;

} .ppmute:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -750px -36px transparent;

}


/* volume slider - right */ .ppvslider { 

   margin: 13px 5px;
   height: 16px;
   width: 60px;
   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -781px -13px transparent;

}

.ppvmarker { 

   position: relative;
   right:0;
   left: 0;
   height: 6px;
   width: 100%;
   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -634px -13px transparent;

}

.ppvknob { 

   cursor: pointer;
   z-index: 201;
   position: relative;
   background: url("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -91px top transparent; }

  • /


/* lo / hi quality toggle */ .pploquality, .pphiquality { 

   background: url("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -106px transparent;

}

.pploquality { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -72px transparent;

}

.pploquality:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -106px transparent;

}

.pphiquality:active, .pploquality:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -105px transparent;

}



/* previous / next item */ .ppnext, .ppprev { 

   display:block;
   background: url("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -59px -35px transparent;

} .ppnext:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -59px -36px transparent;

}

.ppprev { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px top transparent;

}

.ppprev:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -35px transparent;

} .ppprev:active { 

   background: url("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -32px -36px transparent;

}


/* Scrubber, Playhead and fluff */ .ppscrubber { 

   position: absolute;
   height: 5px;
   width: 100%;
   background: url("/wiki/images/1/1f/ETH_Zurich.maccaco-load.gif") repeat-x left top transparent;
   left: 0;
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #000;

}

.audio .ppscrubber { 

   background: url("/wiki/images/0/0b/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.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("/wiki/images/e/e3/ETH_Zurich.maccaco.png") no-repeat -92px -72px transparent;

}

.pptracksbtn:hover { 

   background: url("/wiki/images/e/e3/ETH_Zurich.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;

}

Retrieved from "http://2013.igem.org/Team:ETH_Zurich/Templates/Projekktor-CSS"