Difference between revisions of "Team:CHINA CD UESTC/gallery.css"

Line 1: Line 1:
/*************gallery 2***********/
+
<html>
  
#gal {
+
<style type="text/css">
  position:relative;
+
/****************
  width:700px;
+
menu
  height:400px;
+
*********************/
  margin:0 auto;
+
 
  top:100px;
+
.ir {
  background:#000;
+
font: 0/0 a;
 +
text-shadow: none;
 +
color: transparent;
 
}
 
}
#gal:after {
+
.clearfix:after {
  content:'';
+
content: ".";
  position:absolute;
+
display: block;
  bottom:24px;
+
clear: both;
  right:0;
+
visibility: hidden;
  left:0;
+
line-height: 0;
  width:100%;
+
height: 0;
  height:1px;
+
  background:rgba(255,255,255,0.35);
+
  z-index:3;
+
 
}
 
}
#gal ul {list-style-type:none;}
+
.clearfix {
input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
+
display: inline-block;
  position:absolute;
+
  bottom:80px;
+
  display:block;
+
  width:22px;
+
  height:22px;
+
  -webkit-border-radius:50%;
+
  -moz-border-radius:50%;
+
  border-radius:50%;
+
  cursor:pointer;
+
 
}
 
}
input[class="re_radio"] {
+
html[xmlns] .clearfix {
  opacity:0;
+
display: block;
  z-index:200;
+
 
}
 
}
input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;}
+
* html .clearfix {
input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;}
+
height: 1%;
input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;}
+
input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;}
+
input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;}
+
input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;}
+
input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;}
+
input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
+
 
+
input[class="re_radio"] + label[class="re_label"] {
+
  background:rgba(243,243,243,0.55);
+
  z-index:7;
+
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
+
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
+
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
+
  -webkit-transition:all .3s;
+
  -moz-transition:all .3s;
+
  -o-transition:all .3s;
+
  transition:all .3s;
+
 
}
 
}
[class*="entypo-"]:before {
+
.middleHack {
  position:absolute;
+
zoom: 1;
  font-family: 'entypo', sans-serif;
+
 
}
 
}
figure[class*="entypo-"]:before {
+
.ib {
  left:10px;
+
display: -moz-inline-stack !important;
  top:5px;
+
display: inline-block !important;
  font-size:2rem;
+
vertical-align: top;
  color:rgba(255,255,255,0);
+
  z-index:1;
+
  -webkit-transition:color .1s;
+
  -moz-transition:color .1s;
+
  -o-transition:color .1s;
+
  transition:color .1s;
+
 
}
 
}
a[class*="entypo-"]:before {
+
.ibIe {
  top:8px;
+
display: inline !important;
  left:9px;
+
zoom: 1;
  font-size:1.5rem;
+
  color:white;
+
 
}
 
}
a:hover[class*="entypo-"]:before {
+
.lt-ie8 .ib {
  color:white;
+
display: inline !important;
 +
zoom: 1;
 
}
 
}
figure, figure img, figcaption {
+
.bgCover {
  position:absolute;
+
-webkit-background-size: cover;
  top:0;
+
-moz-background-size: cover;
  right:0;
+
-o-background-size: cover;
 +
background-size: cover;
 
}
 
}
figure {
+
.clear {
  bottom:0;
+
clear: both;
  left:0;
+
display: block;
  width:600px;
+
  height:300px;
+
  display:block;
+
  overflow:hidden;
+
 
}
 
}
figure img {
+
.translate3d {
  bottom:0;
+
-webkit-transform: translate3d(0, 0, 0);
  left:0;
+
-moz-transform: translate3d(0, 0, 0);
  display:block;
+
-ms-transform: translate3d(0, 0, 0);
  width:700px;
+
-o-transform: translate3d(0, 0, 0);
  height:400px;
+
transform: translate3d(0, 0, 0);
  z-index:1;
+
  -webkit-transform:translateX(600px);
+
  -moz-transform:translateX(600px);
+
  -ms-transform:translateX(600px);
+
  -o-transform:translateX(600px);
+
  transform:translateX(600px);
+
  -webkit-transition:all .15s .15s, z-index 0s;
+
  -moz-transition:all .15s .15s, z-index 0s;
+
  -o-transition:all .15s .15s, z-index 0s;
+
  transition:all .15s .15s, z-index 0s;
+
 
}
 
}
figcaption {
+
.translate {
  display:block;
+
-webkit-transform: translate(0, 0);
  width:270px;
+
-moz-transform: translate3d(0, 0);
  height:300px;
+
-ms-transform: translate3d(0, 0);
  padding-top:20px;
+
-o-transform: translate3d(0, 0);
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
+
transform: translate3d(0, 0);
  background-size:600px 600px;
+
  background-repeat:no-repeat;
+
  background-position:-300px -150px;
+
  text-align:center;
+
  z-index:3;
+
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
+
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
+
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
+
  -webkit-transform:translateX(300px);
+
  -moz-transform:translateX(300px);
+
  -ms-transform:translateX(300px);
+
  -o-transform:translateX(300px);
+
  transform:translateX(300px);
+
  -webkit-transition:all .35s;
+
  -moz-transition:all .35s;
+
  -o-transition:all .35s;
+
  transition:all .35s;
+
 
}
 
}
 
+
.noflick {
figcaption nav ul {display:block;padding-top:10px;}
+
-webkit-backface-visibility: hidden;
figcaption nav ul li {display:inline-block;margin-left:5px;}
+
figcaption nav ul li a {
+
  position:relative;
+
  display:block;
+
  width:40px;
+
  height:40px;
+
  background:rgba(255,255,255,0.2);
+
  text-decoration:none;
+
  color:white;
+
  -webkit-border-radius:50%;
+
  -moz-border-radius:50%;
+
  border-radius:50%;
+
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
+
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
+
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
+
  -webkit-transition:all .15s;
+
  -moz-transition:all .15s;
+
  -o-transition:all .15s;
+
  transition:all .15s;
+
 
}
 
}
figcaption nav ul li a:hover {
+
a img {
  background:rgba(255,255,255,0);
+
border: none;
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
+
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
+
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
+
 
}
 
}
figcaption p {
+
body {
  padding:50px 15px;
+
background: #2d2c41;
  font-family:'Titillium Web', sans-serif;
+
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
  font-weight:300;
+
  color:#333;
+
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
+
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
+
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
+
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
+
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
+
  background-size:1px 100%;
+
  background-repeat:no-repeat;
+
  background-position:50% 0%;
+
 
}
 
}
   
+
/* ----------------------------
input[class="re_radio"]:hover + label[class="re_label"] {
+
            menu
  background:rgba(255,255,255,0.6);
+
  -----------------------------*/
 +
ul {
 +
list-style-type: none !important;
 
}
 
}
input[class="re_radio"]:checked + label[class="re_label"] {
+
li {
  background:rgba(130,195,217,0.9);
+
list-style-type: none !important;
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
+
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
+
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
+
 
}
 
}
input[class="re_radio"]:checked + label[class="re_label"]:before {}
+
.accordion {
input[class="re_radio"]:checked ~ figure img {
+
width: 100%;
  z-index:2;
+
max-width: 180px;
  -webkit-transform:translatex(0px);
+
background: #303030;
  -moz-transform:translatex(0px);
+
-webkit-border-radius: 4px;
  -ms-transform:translatex(0px);
+
-moz-border-radius: 4px;
  -o-transform:translatex(0px);
+
border-radius: 4px;
  transform:translatex(0px);
+
list-style-type: none !important;
  -webkit-transition:all .15s, z-index 0s;
+
margin-left:40px;
  -moz-transition:all .15s, z-index 0s;
+
  -o-transition:all .15s, z-index 0s;
+
  transition:all .15s, z-index 0s;
+
 
}
 
}
input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {
+
.accordion li {
  z-index:3;
+
list-style-type: none !important;
  color:rgba(255,255,255,0.5);
+
list-style: none;
  -webkit-transition:color .5s;
+
  -moz-transition:color .5s;
+
  -o-transition:color .5s;
+
  transition:color .5s;
+
 
}
 
}
input[class="re_radio"]:checked ~ figure figcaption {
+
.accordion .link {
  z-index:8;
+
cursor: pointer;
  -webkit-transform:translateX(0px);
+
display: block;
  -moz-transform:translateX(0px);
+
padding: 4px 4px 4px 30px;
  -ms-transform:translateX(0px);
+
color: #FFF;
  -o-transform:translateX(0px);
+
font-size: 17px;
  transform:translateX(0px);
+
font-weight: 700;
  -webkit-transition:all .35s, .7s;
+
border-bottom: 1px solid #CCC;
  -moz-transition:all .35s, .7s;
+
position: relative;
  -o-transition:all .35s, .7s;
+
  transition:all .35s, .7s;
+
 
}
 
}
.entypo-forward {
+
.accordion li:last-child .link {
 +
border-bottom: 0;
 +
}
 +
.accordion li.open .link {
 +
color: #FFE153;
 +
}
 +
.submenu {
 +
display: none;
 +
background: #444359;
 +
font-size: 5px;
 +
list-style-type: none !important;
 +
}
 +
.submenu li {
 +
border-bottom: 1px solid #4b4a5e;
 +
list-style-type: none !important;
 +
list-style: none;
 +
}
 +
.submenu a {
 +
display: block;
 +
text-decoration: none;
 +
color: #d9d9d9;
 +
}
 +
.submenu a:hover {
 +
background: #b63b4d;
 +
color: #FFF;
 +
}
 +
#menuHome {
 +
color: #FFF;
 +
font-size: 17px;
 +
margin-right: 60px;
 +
}
 +
#menuHome:hover {
 +
color: #FFE153;
 +
}
 +
/*.overflow {  overflow: hidden;}*/
 +
.bgwidth {
 +
width: 100%;
 +
}
 +
.bgheight {
 +
height: 100%;
 +
}
 +
aside {
 +
width: 260px;
 +
height:100%;
 +
background-color:#000;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
z-index: 11111111;
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
text-decoration:none;
 +
 
 +
}
 +
 
 +
aside #logo {
 +
text-indent: -6000px;
 +
margin: 0px 32px 0px 32px;
 +
display: block;
 +
}
 +
aside #logo img {
 +
display: block;
 +
text-decoration:none;
 +
width: 100%;
 +
}
 +
aside .separator {
 +
background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -23px -296px;
 +
width: 143px;
 +
height: 3px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin: 25px auto;
 +
}
 +
aside nav {
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
padding:0 0 0 0 px;
 +
}
 +
aside nav a {
 +
color: #ddd7d7;
 +
line-height: 40px;
 +
text-align: center;
 +
text-decoration: none;
 +
font-size: 23px;
 +
display: block;
 +
letter-spacing: 2px;
 +
}
 +
 
 +
* {
 
margin: 0;
 
margin: 0;
 +
padding: 0;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
  color: black;
 +
  background: none;
 +
  font-weight: normal;
 +
  margin: 0;
 +
  padding-top: .5em;
 +
  padding-bottom: .17em;
 +
  border-bottom:none;
 +
}
 +
a {
 +
color: #FFFFFF;
 +
text-decoration: none;
 +
}
 +
.fa {
 +
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
 +
}
 +
img {
 +
user-select: none;
 +
user-drag: none;
 +
}
 +
html, body {
 +
min-height: 100%;
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
border: 20px solid #FDFDFD;
+
background: #000000;
 +
overflow: hidden;
 +
color: #ffffff;
 +
font-family: 'din-condensed-web';
 +
font-size: 14px;
 +
font-weight: 400;
 +
}
 +
.owl-wrapper-outer, .owl-wrapper, .owl-item {
 +
height: 100%;
 +
}
 +
.fullBg {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 +
}
 +
.fullBg.display {
 +
display: block;
 +
}
 +
.layoutHide {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 0%;
 +
background: #000000;
 +
z-index: 40;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
-webkit-backface-visibility: hidden;
 +
background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
 +
}
  
 +
.touch .video .close {
 +
top: 20px;
 +
right: 20px;
 
}
 
}
.entypo-forward p {
+
@media screen and (max-height: 780px) {
color: #000;
+
html body aside #logo {
font-size: 20px;
+
margin-top: 0px;
font-family: 'Microsoft YaHei'
+
margin-bottom:0px;
 
}
 
}
 +
html body aside nav a {
 +
line-height: 35px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 20px auto;
 +
}
 +
html body aside .contact {
 +
font-size: 18px;
 +
}
 +
}
 +
@media screen and (max-height: 680px) {
 +
html body aside #logo {
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
}
 +
html body aside nav a {
 +
line-height: 31px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 10px auto;
 +
}
 +
}
 +
@media screen and (max-width: 1050px) {
 +
 +
html aside #logo {
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
}
 +
 +
}
 +
 +
@media screen and (max-width: 700px) {
 +
 +
html aside #mobileMenuButton {
 +
display: block;
 +
}
 +
html #RightContent {
 +
left: 0;
 +
right: auto;
 +
width: 100%;
 +
    height:100%;
 +
}
 +
}
 +
/*float RightContent*/
 +
#content {
 +
width:auto;
 +
height: 2000px;
 +
 +
}
 +
 +
.firstHeading {
 +
display: none;
 +
}
 +
#top {
 +
display: none;
 +
}
 +
h1 {
 +
text-decoration:none;
 +
font-size:100%;}
 +
</style>
 +
<!--  finished menu-->
 +
 +
<aside>
 +
<div id="mobileMenuButton">
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
</div>
 +
<h1 id="logo">
 +
<img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png"></h1>
 +
<div class="separator"></div>
 +
<nav >
 +
<!-- Contenedor -->
 +
<ul id="accordion" class="accordion">
 +
<li>
 +
<div class="link">
 +
<a id="menuHome" href="https://2015.igem.org/Team:CHINA_CD_UESTC">HOME</a>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="link">PROJECT</div>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Description">Description</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Design">Design</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Method">Method</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling">Modeling</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<div class="link">RESULTS</div>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results">Results</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Future">Future</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Parts">Parts</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Judging">Judging</a>
 +
</li>
 +
 +
</ul>
 +
</li>
 +
<li>
 +
<div class="link">TEAM</div>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members">Members</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Instructors">Instructors</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Attributions">Attributions</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Gallery">Gallery</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<div class="link">HUMAN PRACTICES</div>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Practices">Overview</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_education">Education</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_meetup">Union & Club</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_business">Business</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_HKU">Expert advice</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<div class="link">NOTEBOOK</div>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Journal">Journal</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Safety">Safety</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Protocol">Protocol</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Collaborations">Collaborations</a>
 +
</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</nav>
 +
<div class="separator"></div>
 +
</aside>
 +
 +
<script type="text/javascript">
 +
  //slide menu
 +
  $(function() {
 +
var Accordion = function(el, multiple) {
 +
this.el = el || {};
 +
this.multiple = multiple || false;
 +
 +
// Variables privadas
 +
var links = this.el.find('.link');
 +
// Evento
 +
links.on('mouseenter', {el: this.el, multiple: this.multiple}, this.dropdown)
 +
}
 +
 +
 +
Accordion.prototype.dropdown = function(e) {
 +
var $el = e.data.el;
 +
$this = $(this),
 +
$next = $this.next();
 +
 +
$next.slideToggle();
 +
$this.parent().toggleClass('open');
 +
 +
if (!e.data.multiple) {
 +
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
 +
};
 +
}
 +
 +
var accordion = new Accordion($('#accordion'), false);
 +
});</script>
 +
<script type="text/javascript">//<![CDATA[
 +
var controllerName="home";
 +
var actionName="index";
 +
var base="";
 +
var baseLang="/en";
 +
var lang="en";
 +
data=[];//]]>
 +
</script>
  
/********end of gallery 2*********/
+
</html>

Revision as of 15:04, 10 September 2015