Difference between revisions of "Template:Tsinghua-A/css/style"

 
Line 68: Line 68:
 
.header-top
 
.header-top
 
{
 
{
−
background:url(https://static.igem.org/mediawiki/2018/b/b3/T--Tsinghua-A--HomeBG1.png) no-repeat 0px 0px;
+
background:url(https://static.igem.org/mediawiki/2018/1/14/T--Tsinghua-A--BackgroundZ.jpg) no-repeat 0px 0px;
 
     background-position:center;
 
     background-position:center;
 
background-size:cover;
 
background-size:cover;

Latest revision as of 01:57, 18 October 2018

  •  ::selection {
   background:#666; 
   color:#DDD;

}

  •  ::-webkit-scrollbar {
   width: 8px;

}

  •  ::-webkit-scrollbar-thumb {
   background:rgba(10,10,10,0.4);

} img { 

   user-select:none;

}

body{ 

   min-width:1200px;

margin:0; padding:0; font-family: 'Open Sans', sans-serif; background:#fff; 

   animation: animate 0.7s infinite;
   overflow-x: hidden;

} body.page-Team_Tsinghua-A{ 

   background: #fff;

} @keyframes animate{ 

   0%    { cursor: url("T--Tsinghua-A--mouseDNA1.png") 2 2, auto; }
   12.5% { cursor: url("T--Tsinghua-A--mouseDNA2.png") 2 2, auto; }
   25%   { cursor: url("T--Tsinghua-A--mouseDNA3.png") 2 2, auto; }
   37.5% { cursor: url("T--Tsinghua-A--mouseDNA4.png") 2 2, auto; }
   50%   { cursor: url("T--Tsinghua-A--mouseDNA5.png") 2 2, auto; }
   62.5% { cursor: url("T--Tsinghua-A--mouseDNA6.png") 2 2, auto; }
   75%   { cursor: url("T--Tsinghua-A--mouseDNA7.png") 2 2, auto; }
   87.5% { cursor: url("T--Tsinghua-A--mouseDNA8.png") 2 2, auto; }
   100%  { cursor: url("T--Tsinghua-A--mouseDNA1.png") 2 2, auto; }

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } body a:hover{ text-decoration:none; color:0; } p{ margin:0; } ul{ margin:0; padding:0; } .container { padding:0; margin:0; width: 90% }

/*--- header-top ----*/ .header-logo{ text-align:center; margin: 5em 0 2.5em 0; } .header-top { background:url(T--Tsinghua-A--BackgroundZ.jpg) no-repeat 0px 0px; 

   background-position:center;

background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; } .header-text { text-align:center; margin-top: 3%; } .header-text h1 { color:#FFFFFF; font-family: 'Open Sans', sans-serif; letter-spacing:2px; font-size:60px; } .header-text span { color:#9F449B; font-size:60px; } .header-sub-text { text-align:center; margin-bottom: 7%; } .header-sub-text h2 { font-family: 'Lato', sans-serif; font-weight:300; color:#FFFFFF; font-size: 60px; } .header-sub-text h3{ font-family: 'Lato', sans-serif; font-weight:300; color:#5bf2f9; font-size: 40px; } .header-sub-text p { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 21px; color: rgba(255, 255, 255, 0.79); margin-top: 0.8em; } .header-sub-text small { display:block; } .header-top-grids { text-align:center; width: 48%; margin: 0 auto; } .grid-left { text-align:center; } .grid-right { text-align:center; }


/*--- sicky Nav---*/ /*---- Fixed Navigation ----*/ ul.dropdown-menu{ 

   border-top-width:0;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; 

   opacity:0;
   display:block;
   visibility:hidden;

} li.dropdown:hover > ul.dropdown-menu, .dropdown-menu:hover{ 

   visibility:visible;
   opacity:1;

} ul.dropdown-menu li{ 

   font-size:1.2em;
   text-transform:uppercase;
   text-align:left;

}

div.top-nav .logo{ float:left; 

   margin-top: 13px;
   margin-left: 40px;

} div.top-nav .logo img.nav-logo{ 

   height: 60px;

} div.top-nav{ 

   height: 84.42px;

} .top-nav nav{ 

   background-color:#fff;
   height:80px;

} .top-nav ul{ 

   /*height:80px;*/

margin:0; padding:0; text-align:center; 

   background-color:#fff;

} .top-nav > nav > ul > li{ display:inline-block; 

   line-height:80px;

} .top-nav > nav > ul > li > a{ padding:0 1.5em 0 0; display:block; text-decoration:none; color:#333; font-weight:400; font-size:18px; transition:0.5s ease; text-transform:uppercase; } .top-nav > nav > ul > li.active > a{ color:#9F449B; } .top-nav > nav > ul > li > a:hover, .dropdown-menu:hover + a { color:#9F449B; 

   text-decoration:underline;
   font-size: 24px;

transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .fixed{ position: fixed; top: 16px; width: 100%; margin: 0 auto; z-index: 1; } .fixed ul{ transition:.3s; 

   transition-property: box-shadow;
   box-shadow:
       0 4px 5px 0px rgba(0, 0, 0, 0.08),
       0 1px 10px 0px rgba(0, 0, 0, 0.04),
       0 2px 4px -1px rgba(0, 0, 0, 0.3);

} .fixed:hover ul{ 

   box-shadow:
       0 4px 5px 0 rgba(0, 0, 0, 0.14),
       0 1px 10px 0 rgba(0, 0, 0, 0.12),
       0 2px 4px -1px rgba(0, 0, 0, 0.4);

} .nav-palceholder{ margin:0 0 40px 0; } .about-nav, .about-nav1, .about-nav2, .about-nav3, .about-nav4, .about-nav5, .about-nav6, .about-nav label, .about-nav1 label, .about-nav2 label, .about-nav3 label, .about-nav4 label, .about-nav5 label, .about-nav6 label{ cursor:pointer; text-align: center; }

/*------ about-nav -----*/ .arrow-grid { width:10%; margin:0 auto; } .arrow a { width:120px; height:120px; margin-bottom: 25%; display:inline-block; background:url(T--Tsinghua-A--arrow.png) no-repeat 0px 0px; } .arrow a:hover { background:url(T--Tsinghua-A--arrow1.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; }

/* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { 

 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0; }

.row:after, .clearfix:after { 

 clear: both; }

.row, .clearfix { 

 zoom: 1; }

.clear { 

 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;

}

/*--- content--Get-in-touch ----*/ .Get-in-touch-text { position: relative; margin: 12% 0; } .Get-in-touch-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; } .Get-in-touch{ 

   text-align: center;
   width: 70%;
   margin: 0 auto 4%;

} ul.contact-info{ 

   color: #222222;
   font-family: 'Lato', sans-serif;
   margin: 8% 0;
   font-size: 21px;
   font-weight: 400;
   list-style-type: none;
   list-style-image: none;
   line-height: 1.6;

} ul.contact-info a#mailto{ 

   text-decoration: none;
   color: #3377aa;
   padding-right: 0;
   -ms-transition:     all 0.1s ease-out;
   -moz-transition:    all 0.1s ease-out;
   -webkit-transition: all 0.1s ease-out;
   -o-transition:      all 0.1s ease-out;
   transition:         all 0.1s ease-out;

} ul.contact-info a#mailto:hover{ 

   color: white;
   background-color: #3377aa;

} .content-Get-in-touch small { color: #9F449B; font-size: 45px; } .content-Get-in-touch span.portfolio { position: absolute; width: 369px; height: 114; top: -67%; right: 34%; } .Get-in-touch p { font-size:38px; 

   font-weight: 300;

color: #5D5D5D; font-family: 'Lato', sans-serif; } .Get-in-touch h4 { color: #222222; font-family: 'Lato', sans-serif; margin: 16% 0; font-size: 21px; font-weight: 700; } .Get-in-touch span { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; display: block; } .Get-in-touch small { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; } /*----- footer ----*/ .footer{ 

   text-align:center;
   padding: 60px 0 0;

} .footer img{ 

   margin: 40px 0 20px;

}

/*----- to-top ----*/

  1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 14px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("T--Tsinghua-A--to-top1.png") no-repeat 0px 0px; }

  1. toTopHover {

width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } p#abstract{ 

   font-size:1.7em;
   text-align:left;
   margin-top:80;

}