Difference between revisions of "Team:OUC-China/css/index"

 
(57 intermediate revisions by 3 users not shown)
Line 8: Line 8:
 
     padding: 0;
 
     padding: 0;
 
     margin: 0;
 
     margin: 0;
 +
}
 +
h2{
 +
    border-bottom: none;
 +
}
 +
li{
 +
    margin-bottom: 0;
 
}
 
}
 
table {
 
table {
Line 37: Line 43:
 
a:hover {
 
a:hover {
 
     color: #b60a0a
 
     color: #b60a0a
 +
}
 +
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
 +
    margin: 0;
 
}
 
}
  
  
 
body{
 
body{
−
font-family: "Microsoft YaHei",sans-serif;
+
font-family: "Arial",sans-serif !important;
 
}
 
}
 
.clr{
 
.clr{
 
clear: both;
 
clear: both;
−
}
 
−
 
−
/*
 
−
* jquery.tocible.css v1.2.0, jQuery Tocible
 
−
*
 
−
* A lightweight table of contents navigation plugin
 
−
* https://github.com/markserbol/tocible
 
−
*
 
−
*/
 
−
 
−
.tocible {
 
−
background:#666;
 
−
color:#FFF;
 
−
font-size:14px;
 
−
height:auto;
 
−
left:auto;
 
−
right:auto;
 
−
margin:0;
 
−
/*position: fixed !important;
 
−
top: 15% !important;
 
−
left: 4% !important;*/
 
−
}
 
−
 
−
.tocible_header {
 
−
text-transform:uppercase;
 
−
cursor:pointer;
 
−
padding:5px 40px 5px 15px;
 
−
position:relative;
 
−
background:#333;
 
−
}
 
−
 
−
.tocible_header span {
 
−
position:absolute;
 
−
top:15px;
 
−
right:15px;
 
−
width: 0;
 
−
height: 0;
 
−
border-left: 6px solid transparent;
 
−
border-right: 6px solid transparent;
 
−
border-top: 6px solid #999;
 
−
font-size: 0;
 
−
line-height: 0;
 
−
transition-property: -moz-transform, -webkit-transform, -o-transform, -ms-transform;
 
−
transition-timing-function:linear;
 
−
transition-duration:0.4s;
 
−
}
 
−
 
−
.tocible_header span.toc_open {
 
−
-moz-transform:rotate(-90deg);
 
−
-webkit-transform:rotate(-90deg);
 
−
-o-transform:rotate(-90deg);
 
−
-ms-transform:rotate(-90deg);
 
−
transform:rotate(-90deg);
 
−
}
 
−
 
−
.tocible ul {
 
−
list-style:none;
 
−
padding:0;
 
−
margin:0;
 
−
overflow:hidden;
 
−
}
 
−
 
−
.tocible li {
 
−
cursor:pointer;
 
−
white-space:nowrap;
 
−
display:block;
 
−
}
 
−
 
−
.tocible li a {
 
−
color:inherit;
 
−
text-decoration:none;
 
−
display:block;
 
−
padding:5px 15px;
 
−
text-align:center;
 
−
word-wrap:break-word;
 
−
white-space:pre-wrap;
 
−
white-space: -moz-pre-wrap
 
−
}
 
−
 
−
.tocible li:hover {
 
−
background:#444;
 
−
}
 
−
 
−
.tocible li.toc_scrolled {
 
−
background:#444;
 
−
}
 
−
 
−
.tocible .tocible_subheading {
 
−
background:#666;
 
 
}
 
}
  
Line 143: Line 63:
 
z-index: 1000;
 
z-index: 1000;
 
background: #131327;
 
background: #131327;
−
padding-top: 20px;
+
padding-top: 30px;
 
font-family: "Microsoft YaHei",sans-serif !important;  
 
font-family: "Microsoft YaHei",sans-serif !important;  
 
}
 
}
Line 156: Line 76:
 
}
 
}
 
.banner-top {
 
.banner-top {
−
width: 90%;
+
width: 79%;
 
float: left;
 
float: left;
 
margin-top: 8px;
 
margin-top: 8px;
Line 215: Line 135:
 
}
 
}
 
.banner-top {
 
.banner-top {
−
width: 79%;
+
width: 56%;
 
}
 
}
 
span.menu {
 
span.menu {
Line 312: Line 232:
 
.banner-content{
 
.banner-content{
 
max-width: 1200px;
 
max-width: 1200px;
−
margin: 0 auto;
+
margin: -70px auto;
 
}
 
}
 
.banner-content img{
 
.banner-content img{
Line 366: Line 286:
 
color: #868687;
 
color: #868687;
 
}
 
}
−
.index-details img{
+
/*.index-details img{
 
margin: 80px 0;
 
margin: 80px 0;
−
}
+
}*/
 
.index-details .caption{
 
.index-details .caption{
−
margin: 30% 0;
+
margin: 20% 0;
 
color: #868687;
 
color: #868687;
 
}
 
}
Line 422: Line 342:
 
}
 
}
 
footer address{
 
footer address{
−
        font-size:13pt;
+
width: 35%;
−
width: 150px;
+
 
position: relative;
 
position: relative;
−
top: 50px;
+
top: 3px;
 
}
 
}
 
footer address:after{
 
footer address:after{
−
content: url(https://static.igem.org/mediawiki/2015/5/58/OUC-China-Facebook.png);
+
content: url(https://static.igem.org/mediawiki/2015/2/2b/OUC-China-Facebook4.png);
−
        width:100px;
+
width:10px;
−
         height:100px
+
         height:50px;
−
position: absolute;
+
        position: absolute;
−
left: 2em;
+
left: 19em;
 
bottom: -4px;
 
bottom: -4px;
 
}
 
}
Line 464: Line 383:
 
/*Member*/
 
/*Member*/
 
.member-head{
 
.member-head{
−
margin-top: 71px;
+
margin-top: 55px;
 
background-color: #3ea79d;
 
background-color: #3ea79d;
 
}
 
}
Line 504: Line 423:
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
−
@media screen and (min-width: 1366px) {
+
/*@media screen and (min-width: 1366px) {
 
.photo-content img.memberPhoto{
 
.photo-content img.memberPhoto{
 
-webkit-transition: all .35s ease-out;
 
-webkit-transition: all .35s ease-out;
Line 516: Line 435:
 
transform: rotate(360deg);
 
transform: rotate(360deg);
 
}
 
}
−
}
+
}*/
  
 
.photo-content+h3{
 
.photo-content+h3{
Line 558: Line 477:
 
}
 
}
 
.text-content article h2:before{
 
.text-content article h2:before{
−
content: url(../images/greenline_03.png);
+
content: url(https://static.igem.org/mediawiki/2015/0/08/Greenline_03.png);
 
margin-right: 10px;
 
margin-right: 10px;
 
position: relative;
 
position: relative;
Line 591: Line 510:
 
/*color: #868586;*/
 
/*color: #868586;*/
 
margin: 0 0 0 10px;
 
margin: 0 0 0 10px;
 +
position: relative;
 
}
 
}
 
.note li i{
 
.note li i{
−
margin-left: 85%;
+
/*margin-left: 85%;*/
 +
position: absolute;
 +
left: 94%;
 +
top: 24%;
 +
        display: inline-block;
 +
        width:43px;
 +
        height: 30px;
 
}
 
}
 +
 
.noteHide{
 
.noteHide{
 
cursor: auto;
 
cursor: auto;
Line 606: Line 533:
 
}
 
}
 
.toggleNote i:before{
 
.toggleNote i:before{
−
content: "\f077";
+
content: url(https://static.igem.org/mediawiki/2015/b/ba/Arrow-up.png) !important;
 +
}
 +
.index-details .caption p a:visited{
 +
        color:#fff !important;
 +
}
 +
 
 +
i.icon-chevron-down:before{
 +
      content: url(https://static.igem.org/mediawiki/2015/f/fb/Arrow-down.png);
 +
}
 +
.img-example{
 +
      font-size:13px;
 +
      font-family:"Arial",sans-serif;
 
}
 
}

Latest revision as of 09:47, 18 September 2015

css reset code */

/* for everything else */

/*字体边框等初始化*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 

   padding: 0;
   margin: 0;

} h2{ 

   border-bottom: none;

} li{ 

   margin-bottom: 0;

} table { 

   border-collapse: collapse;
   border-spacing: 0;

} fieldset,img { 

   border: 0;

} img { 

   display: block;

} ol,ul { 

   list-style: none;

} caption,th { 

   text-align: left;

} q:before,q:after { 

   content: ;

} abbr,acronym { 

   border: 0;

} a { 

   color: #343434;
   text-decoration: none;

} a:hover { 

   color: #b60a0a

} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ 

   margin: 0;

}


body{ font-family: "Arial",sans-serif !important; } .clr{ clear: both; }

/*index*/ header{ width: 100%; position: fixed; top: 0; z-index: 1000; background: #131327; padding-top: 30px; font-family: "Microsoft YaHei",sans-serif !important; } .logo{ float: left; width: 4%; margin-right: 50px; } .navigation{ width: 100%; text-align: center; } .banner-top { width: 79%; float: left; margin-top: 8px; } ul.navig{ padding: 0; width: 69%; float: left; margin: 1% auto 0; text-align: center; } ul.navig li{ display: inline-block; margin:0 10px; } ul.navig li a{ text-transform:uppercase; font-size:1em; color:#fff; font-weight:700; } ul.navig li a:hover{ color:#838383; } nav a , ul.navig a{ position: relative; margin: 0px 0px 3px; outline: none; text-decoration: none; text-transform: capitalize; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; } nav a:hover, nav a:focus, ul.navig a:hover, ul.navig a:focus { outline: none; } span.menu { display: none; } @media screen and (max-width: 1280px){ .logo { width: 4%; } .banner-top { width: 88%; } } @media screen and (max-width: 1024px){ .logo { width: 5%; margin-right:4%; } .logo img { width:100%; } .banner-top { width: 56%; } span.menu { display: block; cursor: pointer; float: none; margin: 3px auto 0em auto; width: 10%; background-color: #f0c11b; color: #000; text-align: center; padding: 6px; font-size: 16px; font-weight: 500; position: relative; } } @media screen and (max-width: 768px){ .logo { width: 5%; margin-right: 0; margin-top: 7px; } } @media screen and (max-width: 640px){ .logo { width: 6%; } } @media screen and (max-width: 480px){ span.menu { width: 17%; padding: 4px; font-size: 14px; } .logo { width: 31%; margin-top: 5px; } } @media screen and (max-width: 320px){ span.menu { width: 100%; padding:5px; margin: 50px auto 0em auto; } .logo { width: 52%; margin-top: 8px; } } .container-fluid{ padding: 0; } .navbar{ border: 0 !important; border-radius: 0 !important; background-color: #131327; margin-bottom: 10px; } .navbar a{ font-size: 18px; color: #fff; } .navbar-default{ box-shadow: none !important; } .navbar-default .navbar-nav > li > a{ /*color: #fff;*/ -webkit-transition: all 0.2s ease-out; 

   -moz-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;

} .navbar-default .navbar-nav > li > a:hover{ background-color: #e8cc4e; color: #000; } .navbar-default .navbar-nav > li > a:focus{ color: #fff; }

  1. bs-example-navbar-collapse-1{

background-color: #131327 !important; } ul.navbar-nav{ margin-left: 10em; } .navbar-header{ background: #131327; } .banner-container{ width: 100%; background-color: #131327; } .banner-content{ max-width: 1200px; margin: -70px auto; } .banner-content img{ padding-top: 7em; } .banner-content h2{ font-size: 34px; color: #e8cc4e; text-align: center; padding-bottom: 100px; }

.work-header{ text-align: center; margin-bottom: 66px; } .how-work{ background-color: #f2f2f2; } @media (max-width: 1199px){ .work-content{ text-align: center; } } .work-header h2{ width: 350px; color: #0a3c63; font-weight: bold; padding-bottom: 10px; margin: 62px auto 37px auto; border-bottom: 2px solid #0a3c63; } .work-header p,.work-content{ color: #868687; } .work-header h2 span{ color: #e8cd4d; } .work-content{ margin-bottom: 50px; } @media (min-width: 1600px) { .container{ width: 1500px; } } @media screen and (device-width: 1024px) { .container{ width: 990px; } } .index-details{ color: #868687; } /*.index-details img{ margin: 80px 0; }*/ .index-details .caption{ margin: 20% 0; color: #868687; } .index-details .caption h3:before{ content: url(../images/h-before.jpg); position: relative; top: 20px; margin-right: 15px; } .index-details .caption h3{ margin-bottom: 40px; } .index-details .caption p:last-child{ margin-top: 20px; } .index-details .caption p:last-child a{ background-color: #0a3c63; border: none; -webkit-transition: all 0.2s ease-out; 

   -moz-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;

} .index-details .caption p:last-child a:hover{ background-color: #206295; } .index-details2{ background-color: #f2f2f2; } .index-headline{ width: 270px; margin: 0 auto; font-size: 28px; font-weight: bold; padding-top: 20px; padding-bottom: 10px; color: #0a3c63; border-bottom: 1px solid #0a3c63; } .index-headline2{ width: 400px; padding-top: 50px; margin-bottom: 20px; } .index-headline span{ color: #f0c11b; } footer{ width: 100%; } footer address{ width: 35%; position: relative; top: 3px; } footer address:after{ content: url(OUC-China-Facebook4.png); width:10px; 

       height:50px;
       position: absolute;

left: 19em; bottom: -4px; } .footer-img{ width: 960px; margin: 0 auto; margin-top: 70px; } .footer-img li{ float: left; margin-left: 50px; } .footer-img li:first-child{ margin: 0; } @media screen and (max-width: 992px){ .footer-img{ width: 550px; } .work-content div{ margin-bottom: 30px; } .work-content div img{ margin: 0 auto; } .index-details .caption{ margin: 5% 0; } }

/*Member*/ .member-head{ margin-top: 55px; background-color: #3ea79d; } .member-head h2{ color: #fff; padding: 50px 0; } .member-about{ margin-top: 40px; } .member-about img{ margin: 20px 0; } .member-about h5{ color: #3ea79d; } .member-content{ padding-top: 50px; background-color: #f2f2f2; } .member-content div.row{ margin-top: 50px; } .member-content div.row div{ position: relative; /*width: 10%;*/ } .memberPhoto{ position: absolute; z-index: 901; top: 6%; left: 7%; width: 85%; } .returnTop{ position: fixed; bottom: 8%; right: 3%; cursor: pointer; } /*@media screen and (min-width: 1366px) { .photo-content img.memberPhoto{ -webkit-transition: all .35s ease-out; -o-transition: all .35s ease-out; transition: all .35s ease-out; } .photo-content img.memberPhoto:hover{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }*/

.photo-content+h3{ color: #3ea79d; margin-top: 20px; margin-bottom: 10px; } .photo-content+h3 +h4{ font-style: italic; padding-bottom: 10px; } .photo-content+h3 +h4 +p{ padding-bottom: 30px; } @media screen and (max-width: 991px) { .memberPhoto{ top: 6%; left: 19.5%; width: 61%; } .photo-content img:first-child{ margin: 0 auto; } .member-content div.col-md-4{ text-align: center; margin-bottom: 50px; }

} @media screen and (width: 1366px) { .memberPhoto{ top: 6.3%; } }

.text-content{ margin-top: 40px; } .text-content article h2{ margin-bottom: 15px; } .text-content article h2:before{ content: url(Greenline_03.png); margin-right: 10px; position: relative; top: 13px; } .text-content article p span{ color: #3ea79d; } .text-content article img{ margin: 20px 0; }

/*文章目录颜色修改*/ .tocible_header{ background-color: #131327 !important; } .tocible .tocible_heading{ background: #2B3352; }

.note li{ background-color: #f2f2f2; margin-bottom: 10px; cursor: pointer; } .note li:hover{ background-color: #e2e1e1; } .note li h4{ font-size: 24px; line-height: 50px; /*color: #868586;*/ margin: 0 0 0 10px; position: relative; } .note li i{ /*margin-left: 85%;*/ position: absolute; left: 94%; top: 24%; 

       display: inline-block;
       width:43px;
       height: 30px;

}

.noteHide{ cursor: auto; background-color: #f2f2f2 !important; margin: -7px 0 10px 0; padding: 10px; } .toggleNote{ background-color: #58bbb6 !important; color: #fff !important; } .toggleNote i:before{ content: url(Arrow-up.png) !important; } .index-details .caption p a:visited{ 

       color:#fff !important;

}

i.icon-chevron-down:before{ 

      content: url(Arrow-down.png);

} .img-example{ 

      font-size:13px;
      font-family:"Arial",sans-serif;

}