Team:UCL/Template:plumb.css

From 2014.igem.org

/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/ ._jsPlumb_drag_select * { 

   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

}

/** OPEN SANS FONT **/ @font-face { 

 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
	src:local('Open Sans'), 
		local('OpenSans'),
		url("OpenSans-Regular.ttf") format('truetype'),
		url("OpenSans.woff") format('woff');

}

/** FB **/

  1. like { 
   position: fixed;
   width: 77px;
   height: 70px;
   border: 0;
   right: 11px;
   bottom: -40px;

}

  1. retweet_button { 
 position: fixed;
 bottom: 30px;
 right: -7px;

}

body { 

   padding:0;
   margin:0;    
   font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
   background-color: whitesmoke;

}

  1. headerWrapper {

width:100%; background-color:white; position:fixed; top:0;left:0; 

 z-index:100001;

height:44px; 

 padding:0;
 opacity:0.8;
 text-align: center;
 border-bottom: 1px solid #e5e5e5;
 box-shadow: 0px 1px #eee;

}

  1. header {

margin-top:0;

height:44px; 

 font-size:13px;

margin-left:auto; margin-right:auto;

line-height: 44px; 

 max-width:1000px;
 width:80%;

}

@media screen and (max-width:1000px) { #header { width:100%; } }

@media screen and (max-width:800px) { #header select { display:none; } }

@media screen and (max-width:700px) { .library-links { right:330px; } }

@media screen and (max-width:640px) { .logo { display:none; } #header { text-align:center; overflow:hidden; } }

.explanation i { float: right; margin-right: 25px; margin-top: 13px; font-size: 25px; cursor:pointer; }

.explanation i:hover { color:orange; }

.words { 

 text-align: left;
 padding:50px;
 background-color:white;

}

.code { 

 border:1px solid #456;

}

.logo { 

 font-size:30px;
 color:#1f1f1f;
 text-shadow: 1px 1px #ccc;
 float:left;
 width:154px;
 height:44px;
 background-position:0px 5px;

} 

#main {  
 margin-top: 106px;  
 font-size: 80%;    
 width: 80%;
 margin-left:auto;
 margin-right: auto;  
 height: 600px;
 text-align: center;
 position: relative;
 max-width: 1200px;
 max-height: 1000px;

}

.demo { 

 position: relative;
 width:100%;
 background-color:white;    
 overflow:auto;  
 margin-top: 53px;
 margin-bottom:25px;
 height: 600px;

}

.explanation { 

 position: absolute;
 text-align: center;
 background-color: #7AB02C;
 opacity: 0.8;
 filter: alpha(opacity=80);
 color: white;
 width: 100%;
 height: 54px;
 z-index: 10000;
 overflow: hidden;
 box-shadow: 0px 0px 10px gray;

}

.explanation.expanded { 

 height:auto;
 min-height:54px;
   
 -webkit-transition: max-height 0.8s;
 max-height:100%;

}

.commands { 

 margin-bottom:10px;

}

.commands:hover { 

 z-index:10000;

}

/* demo elements */

a, a:visited { 

   text-decoration:none;
   color:black;
   border-radius:0.2em;
   -webkit-transition: color 0.15s ease-in;
   -moz-transition: color 0.15s ease-in;
   -o-transition: color 0.15s ease-in;
   transition: color 0.15s ease-in;

}

a:hover { 

   color:#7AB02C;

}

a:active { 

 color:#FF2300;

}

.menu, #render, #explanation { background-color:#fff; }

.menu { 

 float:right;
 font-size:12px;

}

.menu a { 

 margin-right: 19px;

}

.otherLibraries { 

 display:inline;

}

  1. render a { 
 margin-right:10px;

}

.selected { 

 color:orange !important;

}

.window, .label { 

 text-align:center;
 z-index:24;

cursor:pointer; box-shadow: 2px 2px 19px #aaa; 

  -o-box-shadow: 2px 2px 19px #aaa;
  -webkit-box-shadow: 2px 2px 19px #aaa;
  -moz-box-shadow: 2px 2px 19px #aaa;

} path, ._jsPlumb_endpoint { cursor:pointer; }

.cmd { 

 color:white;
 margin-right:25px;

}

.cmd:hover { 

 color:#FF2300;
 text-decoration: underline;

} .cmd:active { 

 color:#FF2300;

}

.label { 

 font-size:13px; 
 padding:8px;
 padding:8px;

}

.component { 

 border:1px solid #346789; 
 border-radius:0.5em;        
 opacity:0.8; 
 filter:alpha(opacity=80);
 background-color:white;
 color:black;
 padding:0.5em;   
 font-size:0.8em;

}

.component:hover { 

   border:1px solid #123456;
   box-shadow: 2px 2px 19px #444;
  -o-box-shadow: 2px 2px 19px #444;
  -webkit-box-shadow: 2px 2px 19px #444;
  -moz-box-shadow: 2px 2px 19px #fff;
   opacity:0.9;
   filter:alpha(opacity=90);

}

.window { 

   background-color:white;
   border:1px solid #346789;
   box-shadow: 2px 2px 19px #e0e0e0;
   -o-box-shadow: 2px 2px 19px #e0e0e0;
   -webkit-box-shadow: 2px 2px 19px #e0e0e0;
   -moz-box-shadow: 2px 2px 19px #e0e0e0;
   -moz-border-radius:0.5em;
   border-radius:0.5em;        
   width:5em; height:5em;        
   position:absolute;    
   color:black;
   padding:0.5em;
   width:80px; 
   height:80px;
   line-height: 80px;     
   -webkit-transition: -webkit-box-shadow 0.15s ease-in;
   -moz-transition: -moz-box-shadow 0.15s ease-in;
   -o-transition: -o-box-shadow 0.15s ease-in;
   transition: box-shadow 0.15s ease-in;

}

.window:hover { 

   border:1px solid #123456;
   box-shadow: 2px 2px 19px #444;
  -o-box-shadow: 2px 2px 19px #444;
  -webkit-box-shadow: 2px 2px 19px #444;
  -moz-box-shadow: 2px 2px 19px #fff;
   opacity:0.9;
   filter:alpha(opacity=90);

}

.window a { 

   font-family:helvetica;

}

.demo-links, .library-links { 

 position: fixed;
 right: 0;
 top: 44px;
 font-size: 11px;
 background-color: white;
 opacity: 0.8;
 padding-right: 10px;
 padding-left: 5px;
 text-transform: uppercase;
 z-index:100001;

}

.demo-links div, .library-links a { 

 display:inline;
 margin-right:7px;
 margin-left:7px;

}

.demo-links i, .library-links i { 

 padding:4px;

}

.library-links { 

   right: 515px;
   height: 19px;
   line-height: 19px;

}

.current-library { 

 color:#7AB02C !important;

}

/** Z-INDEX **/

._jsPlumb_connector { z-index:18; } ._jsPlumb_endpoint { z-index:19; } ._jsPlumb_overlay { z-index:20; }

.aLabel { 

 background-color:white; 
 padding:0.4em; 
 font:12px sans-serif; 
 color:#444;
 z-index:21;
 border:1px dotted gray;
 opacity:0.8;
 filter:alpha(opacity=80);
 cursor: pointer;

} .aLabel._jsPlumb_hover { 

 background-color:#5C96BC;
 color:white;  
 border:1px solid white;

}

/* ---------------------- bootstrap dropdowns ------------------------- */ .clearfix { 

 *zoom: 1;

}

.clearfix:before, .clearfix:after { 

 display: table;
 line-height: 0;
 content: "";

}

.clearfix:after { 

 clear: both;

}

.hide-text { 

 font: 0/0 a;
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;

}

.input-block-level { 

 display: block;
 width: 100%;
 min-height: 30px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

/* load test */ 


   #iframe { 
     width: 98%;

height: 1000px; position: absolute; top: 8px; left: 1%; border: 0; 

   }     
   #render { height:20px;}
   #links {      
     width: 143px;
     font-size: 14px;
     padding-left: 0px;
     position: fixed;
     left: 9px;
     top: 52px;
     z-index: 20;
     background-color: white;                  
   }
   ul { padding:0; }
   li {
     list-style-type:none;
   }
   .current-tests {
     color:orange !important;
   }
   #qunit-tests li.pass, #qunit-tests li.fail {
     background-color:transparent;
   }
   .loadtest #main, #main.test  {
     max-width: none;
     margin-top: 52px;
     background-color: white;
   
     margin-left: 162px;

}


.loadtest ._jsPlumb_connection { z-index:3; } .loadtest .jspLoad { 

   z-index:4;
   position:absolute;
   width:70px;
   height:70px;
   cursor:pointer;

}

.loadtest #header { 

 height:11em;
 border:2px solid #824563;

}

.loadtest #setup { 

 float:left;

} .loadtest #demo { 

 margin-top:10em;
 position:relative;

} .loadtest #setup, .loadtest #output { 

 font-size:12px;

}

Retrieved from "http://2014.igem.org/Team:UCL/Template:plumb.css"