Difference between revisions of "Team:CHINA CD UESTC/gallery.css"
Line 1: | Line 1: | ||
− | + | <html> | |
− | + | <style type="text/css"> | |
− | + | /**************** | |
− | + | menu | |
− | + | *********************/ | |
− | + | ||
− | + | .ir { | |
− | + | font: 0/0 a; | |
+ | text-shadow: none; | ||
+ | color: transparent; | ||
} | } | ||
− | + | .clearfix:after { | |
− | + | content: "."; | |
− | + | display: block; | |
− | + | clear: both; | |
− | + | visibility: hidden; | |
− | + | line-height: 0; | |
− | + | height: 0; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .clearfix { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | html[xmlns] .clearfix { | |
− | + | display: block; | |
− | + | ||
} | } | ||
− | + | * html .clearfix { | |
− | + | height: 1%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .middleHack { | |
− | + | zoom: 1; | |
− | + | ||
} | } | ||
− | + | .ib { | |
− | + | display: -moz-inline-stack !important; | |
− | + | display: inline-block !important; | |
− | + | vertical-align: top; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .ibIe { | |
− | + | display: inline !important; | |
− | + | zoom: 1; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .lt-ie8 .ib { | |
− | + | display: inline !important; | |
+ | zoom: 1; | ||
} | } | ||
− | + | .bgCover { | |
− | + | -webkit-background-size: cover; | |
− | + | -moz-background-size: cover; | |
− | + | -o-background-size: cover; | |
+ | background-size: cover; | ||
} | } | ||
− | + | .clear { | |
− | + | clear: both; | |
− | + | display: block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .translate3d { | |
− | + | -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); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .translate { | |
− | + | -webkit-transform: translate(0, 0); | |
− | + | -moz-transform: translate3d(0, 0); | |
− | + | -ms-transform: translate3d(0, 0); | |
− | + | -o-transform: translate3d(0, 0); | |
− | + | transform: translate3d(0, 0); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .noflick { | |
− | + | -webkit-backface-visibility: hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | a img { | |
− | + | border: none; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | background: #2d2c41; | |
− | + | font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* ---------------------------- | |
− | + | menu | |
− | + | -----------------------------*/ | |
+ | ul { | ||
+ | list-style-type: none !important; | ||
} | } | ||
− | + | li { | |
− | + | list-style-type: none !important; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .accordion { | |
− | + | width: 100%; | |
− | + | max-width: 180px; | |
− | + | background: #303030; | |
− | + | -webkit-border-radius: 4px; | |
− | + | -moz-border-radius: 4px; | |
− | + | border-radius: 4px; | |
− | + | list-style-type: none !important; | |
− | + | margin-left:40px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .accordion li { | |
− | + | list-style-type: none !important; | |
− | + | list-style: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .accordion .link { | |
− | + | cursor: pointer; | |
− | + | display: block; | |
− | + | padding: 4px 4px 4px 30px; | |
− | + | color: #FFF; | |
− | + | font-size: 17px; | |
− | + | font-weight: 700; | |
− | + | border-bottom: 1px solid #CCC; | |
− | + | position: relative; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .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%; | ||
− | + | 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; | ||
} | } | ||
− | + | @media screen and (max-height: 780px) { | |
− | + | html body aside #logo { | |
− | + | margin-top: 0px; | |
− | + | 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> | ||
− | / | + | </html> |
Revision as of 15:04, 10 September 2015