Difference between revisions of "Template:USTC/css/indexstyle"

Revision as of 13:31, 18 September 2015

/*indexstyle.css*/

1. fullpage .section{padding:0;}

ol,ul{list-style:none} del{text-decoration:line-through} table{border-collapse:collapse;border-spacing:0}

1. logo{position:relative;}
2. logo img{position:absolute;z-index:2;width:200px;}
3. menu > li{display:inline-block;margin:10px;color:#000;background:#fff;background:rgba(255,255,255,0.5);-webkit-border-radius:10px;border-radius:10px;}
4. menu > li.active{background:#666;background:rgba(0,0,0,0.5);color:#fff;}
5. menu > li a{text-decoration:none;color:#000;}
6. menu > li.active a:hover{color:#000;}
7. menu > li:hover{background:rgba(255,255,255,0.8);}
8. menu > li a,#menu li.active a{padding:9px 18px;display:block;}
9. menu > li.active a{color:#fff;}
10. menu{position:relative;top:0;right:0;height:0px;z-index:70;width:100%;padding:0;margin:0;float:right!important;}
11. welcome{background:#FFF;position:relative;overflow:hidden;-webkit-transition:all 2000ms ease;-moz-transition:all 2000ms ease;-ms-transition:all 2000ms ease;-o-transition:all 2000ms ease;transition:all 2000ms ease}
12. welcome .slider .slides li img{opacity:0.7;}
13. welcome .slider {background-color:black;!important}
14. welcome .container{z-index:999;-webkit-transition:all 2000ms ease;-moz-transition:all 2000ms ease;-ms-transition:all 2000ms ease;-o-transition:all 2000ms ease;transition:all 2000ms ease}
15. welcome h2{font-size:30px;font-weight:200;color:#FFF}
16. welcome img{cursor:pointer}
17. welcome .container{position:relative;z-index:999;text-align:center;}
18. navi .row{margin-bottom:0;}

.check-inview{transition:all 500ms ease} .check-inview.fadeup{opacity:0;-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-ms-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)} .check-inview.inview.fadeup{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)} .navi-inview{transition:all 500ms ease} .navi-inview.fadeup{opacity:0;-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-ms-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)} .navi-inview.inview.fadeup{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

1. navi .card-image{position:relative;}
2. navi{background-color:rgb(50,50,50);background-image:url(https://static.igem.org/mediawiki/2015/9/92/USTC-index-Background.png);background-position:right top;background-repeat:no-repeat;}
3. navi img{top:0;left:0;}
4. navi .card-image span{position:absolute;z-index:4;text-align:left;bottom:0;left:0;width:100%;font-size:180%;font-weight:500;line-height:116%;padding:5px;background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));background:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.6));}
5. navi .card{margin-bottom:7px;}

.loading {position:fixed;width:100%;height:100%;background-color: #ffffff;z-index:100;} .preloader-wrapper{left: 50%;top:50%;} .Footer .col:nth-child(2) img{width:30px;} .Footer{position:absolute;bottom:8px;width:100%;} .Footer .col:nth-child(1){text-align:left;} .Footer .col:nth-child(1) img{height:30px;}

1. navi-dropdown {border-radius:5px}
2. navi-dropdown li>a { padding: 0.6rem 0.4rem;color: black;font-size:15px!important; }
3. constitution .container .row img { width: 100%;}
4. constitution .container .row div { transition:all 1000ms ease;display: inline;text-align: center;color: white; }
5. constitution .row .col.s2 { width:18%;margin:0 1% 0 1%;}

.container .row {margin-bottom:0px;}

1. constitution .container > .row:nth-child(3) .col.s2 {background-color:rgba(0,0,0,0.3);border-radius:5px;padding:5px 5px 15px 5px;}
2. constitution .container > .row:nth-child(3) .col.s2 > h5 {color:white;}

/*#intro div.container > div:nth-child(2) > div > div:before {content:" ";background-repeat:no-repeat;background-position:center center;background-size:contain;position:absolute;width:100%;height:100%;top:0;left:0;}

1. intro div.container > div:nth-child(2) > div:nth-child(1) > div:before {background-image:url(https://static.igem.org/mediawiki/2015/b/b1/USTC-index-fast.png);opacity:0.2;}
2. intro div.container > div:nth-child(2) > div:nth-child(2) > div:before {background-image:url(https://static.igem.org/mediawiki/2015/1/18/USTC-index-toolbox.png);opacity:0.3;}
3. intro div.container > div:nth-child(2) > div:nth-child(3) > div:before {background-image:url(https://static.igem.org/mediawiki/2015/c/cd/USTC-index-gear.png);opacity:0.2;}

1. tutorial div.container > div:nth-child(2) > div > div > div > h4 {text-align:center;}
2. tutorial div.container > div:nth-child(2) > div:nth-child(1) > div > div > h4 > img {width:105px;}
3. tutorial div.container > div:nth-child(2) > div:nth-child(2) > div > div > h4 > img {width:95px;}
4. tutorial div.container > div:nth-child(2) > div:nth-child(3) > div > div > h4 > img {width:105px;}

• /

1. intro,#constitution,#tutorial {background-image:url(https://static.igem.org/mediawiki/2015/f/fd/USTC-index-Background_1.png);background-position:100% 0%;background-repeat:no-repeat;}

1. intro div.container > div:nth-child(2) > div > div > h5 {color:white!important;text-align:center;}
2. intro div.container > div:nth-child(2) > div > div {color:white;border-radius:5px;background-color:rgba(0,0,0,0.3);padding:5px 15px 15px 15px;}
3. intro div.container > div:nth-child(2) > div > figure {margin:0;text-align: center;}
4. intro div.container > div:nth-child(2) > div > figure > img {max-width:130px }

1. tutorial div.container > div:nth-child(2) > div > div > h5 {color:white!important;text-align:center;}
2. tutorial div.container > div:nth-child(2) > div > div {color:white;border-radius:5px;background-color:rgba(0,0,0,0.3);padding:5px 15px 15px 15px;}
3. tutorial div.container > div:nth-child(2) > div > figure {margin:0;text-align: center;}
4. tutorial div.container > div:nth-child(2) > div > figure > img {max-width:100px }