Difference between revisions of "Team:SKLMT-China"

Revision as of 12:22, 4 October 2018

TEAM

PROJECT

PARTS

HUMAN PRACTICES

Education & Engagement

AWARDS

/*

SKLMT SYTLE
*/

/* @import url("https://fonts.googleapis.com/css?family=Lato:300,400,900"); @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,100italic,300italic"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i"); */

/* Basic Sytle */

html, body {

   width:100%;
   font-size: 100%;
   font: inherit;
   height: auto;
   margin:0;
   padding:0;
   vertical-align: baseline;
   overflow-x: hidden;

}

body {

   font-family: Lato, Roboto, Source Sans Pro, Helvetica, sans-serif;
   position: relative;

}

a, a:active, a:focus, a:hover{

   outline:none;
   text-decoration: none !important;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

a:hover{

   text-decoration: none !important;
   color: #47D3E5;

}

h1, h2, h3, h4, h5, h6 {

   font-weight: 300;
   line-height: 1.375;
   letter-spacing: -0.05em;
   margin: 0 0 1rem 0;

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

   color: inherit;
   text-decoration: none;

}

h1 {

   font-size: 3.5rem;
   line-height: 1.2;

}

h2 {

   font-size: 2.25rem;

}

h3 {

   font-size: 1.5rem;

}

h4 {

   font-size: 1.1rem;

}

h5 {

   font-size: 0.9rem;

}

h6 {

   font-size: 0.7rem;

}

sub {

   font-size: 0.8rem;
   position: relative;
   top: 0.5rem;

}

sup {

   font-size: 0.8rem;
   position: relative;
   top: -0.5rem;

}

p{

   margin-bottom:20px;
   font-size: 1.35em;
   line-height: 1.65em;
   font-weight: 11;

}

.wrapper{

   min-height: 800px;

}

/* Paragraph */

.paragraph {

   padding: 3em 3em;
   margin: 5em 0 3em 0;

}

/* breadcrumb */ .article-banner {

   text-align: center;

}

.article-banner .container {

   position: relative;

}

.breadcrumb {

   padding: 0;
   position: absolute;
   width: 100%;
   top: 4.7em;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   background-color: rgba(0, 0, 0, .3) !important;

}

.breadcrumb li {

   padding: 1em 1.3em;
   transition: all 1s ease;
   border-radius: 1em;

}

.breadcrumb li:before {

   display: none;

}

.breadcrumb li a {

   color: #fff;
   font-size: 1.4em;

}

.breadcrumb li:hover {

   background-color: rgba(0, 0, 0, .33);

}

.breadcrumb li.active {

   color: #fff;
   font-size: 1.4em;
   background-color: #00BFFF;

}

.breadcrumb li.active:hover{

   background-color: rgba(0, 255, 255, .8);
   border-radius: 1.5em;

}

.breadcrumb .dropdown-toggle:after {

   font-family: 'FontAwesome';
   content: "\f0d7";
   display: inline-block;
   margin-left: 5px;

}

.breadcrumb .dropdown .dropdown-menu {

   position: absolute;
   float: left;
   z-index: 10000;

}

.breadcrumb .dropdown .dropdown-menu li {

   opacity: 1;

}

.breadcrumb .dropdown-menu li {

   border-bottom: solid 2px #eee;
   border-radius: 0;

}

.breadcrumb .dropdown .dropdown-menu {

   border-top: solid 5px #00BFFF;

}

.breadcrumb .dropdown-menu li:hover {

   background-color: #fff;

}

.breadcrumb .dropdown-menu li:hover a{

   color: #00BFFF;
   background-color: #fff;

}

/* Panel */

.panel-group {

   margin: 2em 0;

}

.panel-default > .panel-heading {

   padding: 1.2em;

}

.panel-body {

   font-size: 1.3em;
   line-height: 1.6em;

}

.panel-title {

   text-align: center;
   font-size: 1.7em;

}

.panel-body .table-wrapper {

   overflow-x: auto;

}

.panel-default>.panel-heading {

   background-color: #fff;
   box-shadow: rgba(0,0,0,0.1) 0px 5px 20px 0px;

}

/* Loading */

loading{

   background-color: #4b2edf;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 99999;
   margin-top: 0px;
   top: 0px;

}

loading-center{

   width: 100%;
   height: 100%;
   position: relative;

}

loading-one {

   position: absolute;
   left: 50%;
   top: 50%;
   height: 300px;
   width: 50px;
   margin-top: -150px;
   margin-left: -25px;

}

loading-two {

   position: absolute;
   left: 50%;
   top: 50%;
   height: 300px;
   width: 50px;
   margin-top: -150px;
   margin-left: 50px;

} .object-one{

   width: 18px;
   height: 18px;
   background-color: #FFF;
   float: left;
   margin-top: 15px;
   margin-right: 15px;
   -moz-border-radius: 50% 50% 50% 50%;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   -webkit-animation: object-one 1s infinite;
   animation: object-one 1s infinite;

} .object-two{

   width: 18px;
   height: 18px;
   background-color: #FFF;
   float: left;
   margin-top: 15px;
   margin-right: 15px;
   -moz-border-radius: 50% 50% 50% 50%;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   -webkit-animation: object-two 1s infinite;
   animation: object-two 1s infinite;

}

.object-one:nth-child(9){

   -webkit-animation-delay: 0.9s;
   animation-delay: 0.9s;

} .object-one:nth-child(8){

   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;

} .object-one:nth-child(7){

   -webkit-animation-delay: 0.7s;
   animation-delay: 0.7s;

} .object-one:nth-child(6){

   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;

} .object-one:nth-child(5){

   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;

} .object-one:nth-child(4){

   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;

} .object-one:nth-child(3){

   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;

} .object-one:nth-child(2){

   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;

}

.object-two:nth-child(9){

   -webkit-animation-delay: 0.9s;
   animation-delay: 0.9s;

} .object-two:nth-child(8){

   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;

} .object-two:nth-child(7){

   -webkit-animation-delay: 0.7s;
   animation-delay: 0.7s;

} .object-two:nth-child(6){

   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;

} .object-two:nth-child(5){

   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;

} .object-two:nth-child(4){

   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;

} .object-two:nth-child(3){

   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;

} .object-two:nth-child(2){

   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;

}

@-webkit-keyframes object-one{

   50% {
       -ms-transform: translate(100px,0); 
       -webkit-transform: translate(100px,0);
       transform: translate(100px,0);
   }

} @keyframes object-one{

   50% {
       -ms-transform: translate(100px,0); 
       -webkit-transform: translate(100px,0);
       transform: translate(100px,0);
   }

} @-webkit-keyframes object-two{

   50% {
       -ms-transform: translate(-100px,0); 
       -webkit-transform: translate(-100px,0);
       transform: translate(-100px,0);
   }

} @keyframes object-two{

   50% {
       -ms-transform: translate(-100px,0); 
       -webkit-transform: translate(-100px,0);
       transform: translate(-100px,0);
   }

}

/* Footer */

page-footer {

   margin-top: 3em;
   background-color: #111;
   text-align: center;
   color: white;
   border-top: 2em solid #222;
   border-bottom: 6em solid #000;

}

page-footer h3 {

   font-size: 2.8m;

}

page-footer h3 strong{

   font-family: Algerian;
   color: #cf5e72;

}

page-footer h2 strong {

   font-family: Algerian;
   color: #cf5e72;
   font-size: 1.6em;

}

page-footer .row {

   margin-bottom: 3em;

}

/*

* Index Banner
*/

.index-banner {

   background-attachment: fixed;
   background-color: #272833;
   background-image: url("");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   min-height: 100vh;
   position: relative;
   text-align: center;
   z-index: 8;

}

@-moz-keyframes inner-animation {

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@-webkit-keyframes inner-animation {

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@-ms-keyframes inner-animation {

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@keyframes inner-animation {

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

.index-banner:before {

   content: ;
   display: inline-block;
   height: 100vh;
   vertical-align: middle;
   width: 1%;

}

.index-banner:after {

   content: ;
   display: block;
   height: 100%;
   left: 0;
   top: 0;
   position: absolute;
   width: 100%;

}

.index-banner .inner {

   -moz-animation: inner-animation 2s 0.25s ease-in-out;
   -webkit-animation: inner-animation 2s 0.25s ease-in-out;
   -ms-animation: inner-animation 2s 0.25s ease-in-out;
   animation: inner-animation 2s 0.25s ease-in-out;
   -moz-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   -ms-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   /*background: rgba(52, 27, 43, 0.5);*/
   color: #fff;
   display: inline-block;
   opacity: 0;
   text-align: center;
   font-size: 150%;
   vertical-align: middle;
   position: relative;
   z-index: 1;

}

.index-banner .inner header {

   width: 100%;
   display: inline-block;
   margin: 0 0 1em 0;
   padding: 3px 0 3px 0;

}

.index-banner .inner .cd-intro {

   width: 100%;

}

.index-banner .inner header h2 {

   font-size: 5em;
   font-weight: 900;
   margin: 0;
   padding-top: 1em;
   padding-left: 10px;
   padding-right: 10px;
   position: relative;
   /* color: transparent; */
   font-family: Broadway, Algerian;
   text-shadow: 0px -1px 4px white, 0px -2px 10px #66b2ff, 0px -10px 20px #3399ff, 0px -18px 40px #0080ff;

}

.index-banner .inner p {

   font-size: 2em;
   font-family: Algerian;
   letter-spacing: 0.1em;
   margin: 0;
   text-transform: uppercase;

}

.index-banner .inner p a {

   font-weight: 400;

}

.index-banner .inner footer {

   margin: 1em 0 0 0;
   /* background: rgba(52, 27, 43, 0.5); */

}

/* Article Banner */

.article-banner {

   position: relative;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 1;
   height: 66vh;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   transition: all 0.5s ease;
   vertical-align: middle;

}

.article-banner:before {

   content: ;
   display: inline-block;
   width: 0;
   height: 25vh;
   vertical-align: middle;

}

.article-banner:after {

   content: ;
   display: inline-block;
   width: 0;
   height: 100%;
   vertical-align: middle;
   position: absolute;

}

.banner-content {

   color: #fff;
   background: rgba(27, 27, 27, 0.75);
   background: rgba(0, 0, 0, 0.30);
   font-size: 1.35em;
   z-index: 2;
   width: 100%;
   text-align: center;

}

.banner-content h2 { padding-left: 10px; padding-right: 10px;

   display: inline-block;
   font-family: Broadway;
   font-size: 3em;
   border-bottom: solid 2px #fff;
   padding-bottom: 5px;

}

.banner-content p {

   font-weight: 100;
   padding-bottom: 10px;
   font-size: 1.5em !important;

}

.banner-content {

   margin: 0 auto;

}

@keyframes scaling {

   0%{
       transform: scale(1);
   }
   50%{
       transform: scale(1.5);
       width: 40%;
       border-radius: 5em;
   }
   100%{
       transform: scale(1);
   }

}

.article-banner .banner-content:hover {

   -webkit-animation: scaling 2s ease;
   -moz-animation: scaling 2s ease;
   -ms-animation: scaling 2s ease;
   -o-animation: scaling 2s ease;

}

.banner-content h2.title {

   transition: all 1s ease;

} /* .article-banner .banner-content:hover h2.title {

   text-shadow: 0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #00BFFF, 0 0 25px #00BFFF, 0 0 30px #00BFFF, 0 0 50px #00BFFF, 0 0 80px #00BFFF, 0 0 100px #00BFFF, 0 0 150px #00BFFF;

}*/

@media screen and (max-width: 736px) {

   .index-banner .inner {
       background: none;
       margin-top: 5em;
   }

   .index-banner:before {
       height: unset;
   }

}

@keyframes leftAnimation {

   0%{ transform: translateX(-2000px); opacity: 0;}
   100%{ transform: translateX(0px); opacity: 1;}

}

@-webkit-keyframes leftAnimation {

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-o-keyframes leftAnimation {

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-ms-keyframes leftAnimation{

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-moz-keyframes leftAnimation{

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@keyframes rightAnimation{

   0%{ transform: translateX(2000px); opacity: 0;} 
   100%{ transform: translateX(0px); opacity: 1;}

} @-webkit-keyframes rightAnimation{

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-o-keyframes rightAnimation{

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-ms-keyframes rightAnimation{

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-moz-keyframes rightAnimation{

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

.index-banner .inner p, .banner-content .title {

   animation: leftAnimation 2s ease 1;
   -webkit-animation: leftAnimation 2s ease 1;
   -ms-animation: leftAnimation 2s ease 1;
   -o-animation: leftAnimation 2s ease 1;
   -moz-animation: leftAnimation 2s ease 1;
   
   animation-fill-mode:forwards;
   -webkit-animation-fill-mode: forwards;  
     -o-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards;   
     -moz-animation-fill-mode: forwards;

}

.index-banner .inner h2, .banner-content .content {

   animation: rightAnimation 2s ease 1;
   -webkit-animation: rightAnimation 2s ease 1;
   -moz-animation: rightAnimation 2s ease 1;
   -ms-animation: rightAnimation 2s ease 1;
   -o-animation: rightAnimation 2s ease 1;

   animation-fill-mode:forwards;
   -webkit-animation-fill-mode: forwards;  
     -o-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards;   
     -moz-animation-fill-mode: forwards;

}

/* Button */

ul.buttons {

   cursor: default;
   list-style: none;
   padding-left: 0;
   margin-top: inherit;

}

ul.buttons:last-child {

   margin-bottom: 0;

}

ul.buttons li {

   display: inline-block;
   padding: 0 0 0 1.5em;

}

ul.buttons li:first-child {

   padding: 0;

}

ul.buttons.stacked li {

   display: block;
   padding: 1.5em 0 0 0;

}

ul.buttons.stacked li:first-child {

   padding: 0;

}

ul.buttons li {

   display: block;
   padding: 1em 0 0 0;

} ul.buttons {

   text-align: center;

}

input[type="button"], button, .actions {

   -moz-appearance: none;
   -webkit-appearance: none;
   -ms-appearance: none;
   appearance: none;
   -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   background: none;
   border: solid 1px;
   border-radius: 20px;
   color: inherit;
   cursor: pointer;
   display: inline-block;
   font-size: 0.8em;
   font-weight: 900;
   letter-spacing: 2px;
   min-width: 18em;
   padding: 0 0.75em;
   line-height: 3.75em;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;

}

input[type="button"]:hover, button:hover, .actions:hover {

   background: rgba(188, 202, 206, 0.15);
   border-color: inherit;

}

input[type="button"].primary, button.primary, .actions.primary {

   background: #83d3c9;
   border-color: #83d3c9;
   color: #fff !important;

}

input[type="button"].primary:hover, button.primary:hover, .actions.primary:hover {

   background: #96dad1 !important;
   border-color: #96dad1 !important;

}

input[type="button"].fit, button.fit, .actions.fit {

   width: 100%;

}

input[type="button"].small, button.small, .actions.small {

   font-size: 0.7em;
   min-width: 14em;
   padding: 0.5em 0;

}

/* Banner Animation */

@-webkit-keyframes animatedBackground {

 0% {
   background-position: 0 0;
 }
 50% {
   background-position: 100% 100%;
 }
 100% {
   background-position: 0 0;
 }

}

.index-banner {

   background-size: cover;
   background-position: bottom;
    -webkit-animation: animatedBackground 40s linear infinite;
   animation: animatedBackground 40s linear infinite;

}

See our Description Page

Before you start

Please read the following pages:

Editing your wiki

On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world!

Use WikiTools - Edit in the black menu bar to edit this page

EDIT PAGE

Uploading pictures and files

You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name.

When you upload, set the "Destination Filename" to T--YourOfficialTeamName--NameOfFile.jpg. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)

UPLOAD FILES

Wiki template information

We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the Pages for awards link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!

Revision as of 12:22, 4 October 2018 (view source) Gaodechen (Talk \| contribs) ← Older edit		Revision as of 12:22, 4 October 2018 (view source) Gaodechen (Talk \| contribs) Newer edit →
Line 1:		Line 1:
−		+	{{SKLMT-China}}
	{{SKLMT-China/template_css}}		{{SKLMT-China/template_css}}