Difference between revisions of "Template:JiangnanU China/CSS"

 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
.main-header {
+
@font-face {
−
  background-repeat: no-repeat;
+
    font-family: 'moon';
−
  background-position: center 20%;
+
    src:url("https://static.igem.org/mediawiki/2019/6/61/T--JiangnanU_China--Moon2.0-Regular.otf");
−
  -webkit-background-size: cover;
+
−
  background-size: cover;
+
−
  text-align: center;
+
−
  padding: 24px 0;
+
−
  background: #1E8D83;
+
−
  color: #fff;
+
 
}
 
}
−
.site-header {
+
h2{
−
  background-color: rgba(114, 143, 213,0.8);
+
    font-family: moon,sans-serif;
−
  font-size: 22px;
+
    color: #ffffff;
 +
 
 
}
 
}
−
.site-header .nav-link {
+
body{
−
  color: #fff;
+
    padding-top: 7px;
 +
    float: none;
 +
    margin: 0;
 
}
 
}
−
.fa {
+
.List{
−
  display: inline-block;
+
    margin-right: 100px;
−
  width:16px;
+
−
  height:16px;
+
 
}
 
}
−
.fa-home {
+
nav{ width:100%;
−
  background: url('https://static.igem.org/mediawiki/2018/d/d3/T--jiangnan_china--home--icon-home.png');
+
    height:100px;
−
  background-size:16px 16px;  
+
    background-image:url("https://static.igem.org/mediawiki/2019/b/b0/T--JiangnanU_China--Banner_BG.jpg
 +
");
 +
    float: left;
 +
    position: relative;
 
}
 
}
−
.fa-group {
+
nav ul{list-style:none;z-index: 1;}
−
  background: url('https://static.igem.org/mediawiki/2018/7/76/T--jiangnan_china--home--icon-group.png');
+
nav ul li:hover ul{ display:block}
−
  background-size:16px 16px;  
+
nav ul li:hover .chosen_bar{ display: block}
 +
nav ul li{ float:right; line-height:40px; text-align:center; position:relative;}
 +
 
 +
nav ul li ul{ position:absolute; display:none;background:rgb(0,19,86);padding: 0;margin: 0}
 +
nav ul li ul li{ float:none; line-height:30px; text-align:left; width:100%;}
 +
nav ul li ul li:hover{ background-color:#00b2ff;}
 +
nav ul li ul li a{ width:100%;white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding: 0 15px;}
 +
.menu{
 +
    margin-left: 50px;
 +
    width: auto;
 
}
 
}
−
.fa-project {
+
.logo{
−
  background: url('https://static.igem.org/mediawiki/2018/c/c8/T--jiangnan_china--home--icon-project.png');
+
    position: absolute;
−
  background-size:16px 16px;  
+
    width: 80px;
 +
    height: 80px;
 +
    z-index: 1;
 +
    top:10px;
 +
    left: 28px;
 
}
 
}
−
.fa-bell {
+
.logo_text{
−
  background: url('https://static.igem.org/mediawiki/2018/3/35/T--jiangnan_china--home--icon-bell.png');
+
    font-size: 24px;
−
  background-size:16px 16px;  
+
    position: absolute;
 +
    left:126px;
 +
    top:14px;
 +
    color: #ffffff;
 +
    font-family: moon,serif;
 
}
 
}
−
.fa-composer {
+
.decoration1{
−
  background: url('https://static.igem.org/mediawiki/2018/3/33/T--jiangnan_china--home--icon-composer.png');
+
    width: 40px;
−
  background-size:16px 16px;  
+
    height: 17px;
 +
    position: absolute;
 +
    right:20px;
 +
    top:20px;
 
}
 
}
−
.fa-part {
+
.decoration1:hover .left{
−
  background: url('https://static.igem.org/mediawiki/2018/f/fa/T--jiangnan_china--home--icon-part.png');
+
    display:inherit;
−
  background-size:16px 16px;  
+
 
}
 
}
−
.fa-trophy {
+
.div1{
−
  background: url('https://static.igem.org/mediawiki/2018/5/5a/T--jiangnan_china--home--icon-awards.png');
+
    position: relative;
−
  background-size:16px 16px;  
+
    width: inherit;
 
}
 
}
−
.fa-interlab {
+
.chosen_bar{
−
  background: url('https://static.igem.org/mediawiki/2018/1/11/T--jiangnan_china--home--icon-interlab.png');
+
    top: -10px;
−
  background-size:16px 16px;  
+
    position: absolute;
 +
    display: none;
 +
    width:100%;
 +
    height: 10px;
 
}
 
}
−
.dropdown:hover>.dropdown-menu {
+
/*-----------------Leftnav----------------*/
−
  display: block;
+
 
 +
.open {
 +
    overflow: hidden;
 +
    transform: translateX(0px);
 +
 
 +
    width: 346px;
 +
    height:100%;
 +
    margin-top: 99px;
 +
    border-top-style: solid;
 +
    border-top-width: 1px;
 +
    background-image: url("leftnav_background.png");
 
}
 
}
−
.dropdown>.dropdown-toggle:active {
+
.left{
−
     pointer-events: none;
+
     overflow: hidden;
−
}
+
     transform: translateX(-250px);
−
.dropdown-menu {
+
 
−
     border-radius: 1rem;
+
    width: 346px;
−
}
+
    height:100%;
−
.dropdown a {
+
    margin-top: 99px;
−
  -webkit-transition: background-color .3s;
+
    border-top-style: solid;
−
  transition: background-color .3s;
+
     border-top-width: 1px;
−
  border-radius: 0.5em;
+
     background-image: url("leftnav_background.png");
−
}
+
−
.dropdown-item:focus, .dropdown-item:hover {
+
−
    color: #16181b;
+
−
     text-decoration: none;
+
−
     background-color: #f8f9fa;
+
−
    border-bottom: 0.5px solid #000;
+
 
}
 
}
−
@keyframes bounce {
+
.left ul{list-style: none;margin:0;padding:0;width: 100%}
−
  from, 20%, 53%, 80%, to {
+
.left ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
−
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
.left ul li:hover ul{display: block}
−
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
.left ul li:hover{background: #00b2ff}
−
    -webkit-transform: translate3d(0,0,0);
+
−
    transform: translate3d(0,0,0);
+
−
  }
+
  
−
  40%, 43% {
+
.left ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
−
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
.left ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
−
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
.left ul li ul li:hover{ background-color:#00b2ff;}
−
    -webkit-transform: translate3d(0, -30px, 0);
+
.left ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
−
    transform: translate3d(0, -30px, 0);
+
−
  }
+
  
−
  70% {
 
−
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
    -webkit-transform: translate3d(0, -15px, 0);
 
−
    transform: translate3d(0, -15px, 0);
 
−
  }
 
  
−
  90% {
+
.open ul{list-style: none;margin:0;padding:0;width: 100%}
−
    -webkit-transform: translate3d(0,-4px,0);
+
.open ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
−
    transform: translate3d(0,-4px,0);
+
.open ul li:hover ul{display: block}
−
  }
+
.open ul li:hover{background: #00b2ff}
−
}
+
−
.bounce {
+
−
    -webkit-animation-name: bounce;
+
−
    animation-name: bounce;
+
−
    -webkit-transform-origin: center bottom;
+
−
    transform-origin: center bottom;
+
−
}
+
−
.animated.infinite {
+
−
    -webkit-animation-iteration-count: infinite;
+
−
    animation-iteration-count: infinite;
+
−
}
+
−
.animated {
+
−
    -webkit-animation-duration: 2s;
+
−
    animation-duration: 2s;
+
−
    -webkit-animation-fill-mode: both;
+
−
    animation-fill-mode: both;
+
−
}
+
−
.dcpt3 {
+
−
    text-align: justify;
+
−
    background-color: #e5e5e5;
+
−
    padding: 40px 10%;
+
−
}
+
−
footer {
+
−
  background-color: #8198ce;
+
−
}
+
−
footer img {
+
−
  width: 60px;
+
−
}
+
  
 +
.open ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
 +
.open ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
 +
.open ul li ul li:hover{ background-color:#00b2ff;}
 +
.open ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
  
−
/*Team.html*/
 
−
.mmd {
 
−
    font-size: 20px;
 
−
    line-height: 1.5;
 
−
    font-family: 'spr';
 
−
    text-align: justify;
 
−
    background-color: #e6e6e6;
 
−
    padding: 40px 250px;
 
−
}
 
−
.mmd2 {
 
−
    font-size: 20px;
 
−
    line-height: 1.5;
 
−
    font-family: 'spr';
 
−
    text-align: justify;
 
−
    background-color: #e6e6e6;
 
−
    padding: 40px 150px;
 
−
}
 
−
.dcpt2 {
 
−
    width: 100%;
 
−
    padding-left: 15px;
 
−
    text-align: center;
 
−
    margin-top: 20px;
 
−
    margin-bottom: 20px;
 
−
    /* margin: auto 7.5%; */
 
−
    font-size: 36px;
 
−
    /* background-color: #d2d2d2; */
 
−
    font-family: fsb;
 
−
}
 
−
.content2 {
 
−
    margin: 0px auto;
 
−
    font-family: fsb;
 
−
    color: #f75000;
 
−
}
 
−
#div1 {
 
−
    position: relative;
 
−
    height: 1.5px;
 
−
    margin-top: 40px;
 
−
    background-color: #f75000;
 
−
}
 
−
.row {
 
−
    margin-left: -15px;
 
−
    margin-right: -15px;
 
−
}
 
−
#dcpt4 {
 
−
    text-align: justify;
 
−
    margin: 0px 0% 1px;
 
−
    background-color: #fffae6;
 
−
    padding: 40px 10%;
 
  
 +
 +
.icon {
 +
    position: absolute;
 +
    width: 36px;
 +
    height: 36px;
 +
    right: 32px;
 +
    top:17px;
 
}
 
}
−
#tr1 {
+
<style>
−
    line-height: 120%;
+
−
    font-size: inherit;
+
−
}
+
−
#HQ_page {
+
−
        border: 1px solid #ccc;
+
−
    border-collapse: collapse;
+
−
    width: 90% margin:auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
}
+
−
.col-md-4 {
+
−
    width: 33.33333333%;
+
−
    font-size: 72px;
+
−
    color: #990100;
+
−
}
+
−
#div2 {
+
−
    position: relative;
+
−
    margin: 0 0 10.5px;
+
−
    color: #990100;
+
−
    font-family: fsb;
+
−
    letter-spacing: 8px;
+
−
    font-size: 48px;
+
−
    text-align: center;
+
−
    padding-top: 7px;
+
−
}
+
−
#divwang {
+
−
    position: relative;
+
−
    height: 3px;
+
−
    margin-top: 40px;
+
−
    background-color: #f75000;
+
−
}
+
−
.lb-loader,.lightbox{text-align:center;line-height:0}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}html.lb-disable-scrolling{overflow:hidden;position:fixed;height:100vh;width:100vw}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
+
−
 
+
−
</style>
+
 
</html>
 
</html>

Latest revision as of 15:16, 15 June 2019