Team:BIT/public.css

From 2014.igem.org

(Difference between revisions)
 
(37 intermediate revisions not shown)
Line 1: Line 1:
@charset "utf-8";
@charset "utf-8";
/* CSS Document */
/* CSS Document */
 +
#globalWrapper
 +
{
 +
 
 +
background-color:transparent;
 +
  border:none;
 +
}
 +
#top-section{border:none;height: 20px;}
 +
#menubar a{ color:#000;}
 +
#menubar a:hover{ color:#35a5ca;}
 +
#menubar a:visited{ color:#999999;}
 +
.right-menu li a { background:none;text-decoration: none;}
 +
.left-menu:hover {
 +
background:rgba(255,255,255,0.3);
 +
}
 +
#p-logo,#search-controls
 +
{
 +
display:none;
 +
}
 +
#top
 +
{
 +
  display: none;
 +
}
 +
h1.firstHeading
 +
{
 +
  display: none;
 +
}
 +
 +
#footer-box
 +
{
 +
margin-top:1400px;
 +
border: none;
 +
 +
 +
}
 +
 +
#catlinks
 +
{
 +
  display: none;
 +
}
 +
/*框架*/
/*框架*/
-
body{ font-family:"helvetica"; margin:0; }
+
body{ font-family:"helvetica"; margin:0;background-color:transparent; }
-
#main_container{ background:#FFF; width:100%;height:100%; }
+
#main_container{ background:#FFF; width:100%;height:100%;margin-top:-45px; }
#container{width:1024px;margin:auto;  position:relative; z-index:2; height:1400px;
#container{width:1024px;margin:auto;  position:relative; z-index:2; height:1400px;
           }
           }
Line 11: Line 51:
         height:255px;
         height:255px;
text-align:center;  
text-align:center;  
-
background:url(https://static.igem.org/mediawiki/2014/b/bd/BIT_3.jpg);
+
background:url(https://static.igem.org/mediawiki/2014/f/f7/BIT_header.png);
margin:auto;
margin:auto;
position:relative;
position:relative;
Line 17: Line 57:
}
}
 +
.image a{color:#000000;}
/*内容*/
/*内容*/
-
#content{height:420px;
+
#main_content,#content{height:420px;
         width:1024px;  
         width:1024px;  
margin:auto;  
margin:auto;  
background:#FFF;
background:#FFF;
padding:0px;
padding:0px;
 +
                background:#FFF;
 +
                border:none;
 +
                z-index:0;
position:relative;
position:relative;
}
}
Line 37: Line 81:
padding:0;  
padding:0;  
width:90px; }
width:90px; }
 +
#others{text-align:center;
 +
margin:auto 0;
 +
width:1024px;
 +
height:130px;
 +
margin-top:650px;
 +
position: relative;
 +
}
 +
#address p{ text-align:center; line-height:15px;}
 +
#footer1{
#footer1{
width:1024px;  
width:1024px;  
Line 60: Line 113:
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}
-
/*顶部Bar*/
 
-
#menubar {
 
-
    position: absolute;
 
-
height:20px;
 
-
    white-space: nowrap;
 
-
    top: 0px;
 
-
    width: 380px;
 
-
    z-index: 5;
 
-
    font-family: sans-serif;
 
-
    font-size: 20sp;
 
-
   
 
-
}
 
-
.left-menu, .left-menu a {
+
/*返回顶部*/
-
    left: 0px;
+
#toTop{
-
    text-align: left;
+
width:50px;
-
    color:transparent;
+
position:fixed;
-
    text-transform: lowercase;
+
right:10px;
-
padding-left:10px;
+
bottom:10px;
-
+
cursor:pointer;
 +
display:none;
 +
z-index:10;
 +
}
 +
/*左侧收缩菜单*/
 +
.float-right{
 +
  float: right;
}
}
-
 
+
.fa{
-
.left-menu:hover {
+
font-size: .8em;
-
    color: white;
+
  line-height: 22px !important;
-
    background:rgba(255,255,255,0.3);
+
}
}
-
.right-menu, .right-menu a {
+
dropdown{
-
    right: 0px;
+
  display: inline-block;
-
    text-align: right;
+
 
-
    color: white;
+
}
}
-
#menubar ul {
+
dropdown label{
-
 
+
  display: block;
-
    list-style: none;
+
  width: 200px;
-
margin:0px;
+
  background: #ECF0F1;
-
+
  padding: 10px;
 +
  color: #35a5ca;
 +
  border-left: 4px solid #35a5ca;
 +
 
 +
  position: relative;
 +
  z-index: 2;
}
}
-
#menubar li {
+
dropdown ul li{ background:url(https://static.igem.org/mediawiki/2014/6/69/BIT_dropdown1.png); width: 206px; height:15px; margin-top:10px;}
-
    display: inline;
+
dropdown ul li a{ line-height: 12px;color:#000;}
-
    position: relative;
+
 
-
    cursor: pointer;
+
dropdown ul li a:hover{ color: #35a5ca; cursor: pointer;}
-
    padding-left: 0px;
+
dropdown ul li a:visited{ color:#999999; }
-
    padding-right: 0px;
+
 
 +
dropdown label img{
 +
  background: url(../img/BIT_show.png);
}
}
-
.left-menu li a {
+
dropdown input{
-
    padding: 0px 10px 0px 0px;
+
  display: none;
-
text-decoration:none;
+
-
color: inherit;
+
}
}
-
.left-menu li a:hover {
+
dropdown input ~ ul{
-
    color: #aaaaff;
+
  position: relative;
-
    text-decoration: none;
+
  visibility: hidden;
 +
  opacity: 0;
 +
  top: -20px;
 +
  z-index: 1;
}
}
-
.left-menu li a:visited{
+
dropdown input:checked + label{
-
    color:#AB6B32;  
+
  background: url(https://static.igem.org/mediawiki/2014/e/e7/BIT_label.png);
-
    text-decoration: none;
+
  color: white;
 +
  text-align: left;
}
}
-
#this a{ color:#AB6B32; }
 
-
.right-menu li a {
+
dropdown input:checked ~ ul{
-
    padding: 1.5px 15px 1.5px 10px;
+
  visibility: visible;
-
 
+
  opacity: 1;
-
 
+
  top: 0;
-
text-decoration:none;
+
-
margin:0px;
+
}
}
-
.right-menu li a:link {
+
$colors: #35a5ca, #35a5ca, #35a5ca;
-
     color: white;
+
 
-
     text-decoration: none;
+
@for $i from 1 through length($colors) {
-
}
+
  dropdown ul li:nth-child(#{$i}) {
-
.right-menu li a:hover {
+
     border-left: 4px solid nth($colors, $i);
-
    color: #aaaaff;
+
     .fa{
-
    text-decoration: none;
+
      color: nth($colors, $i);
-
}
+
    }
-
.right-menu li a:visited{
+
    &:hover {
-
    color: #69F;  
+
        background: nth($colors, $i);
-
     text-decoration: none;
+
        color: white;
 +
      .fa{
 +
        color: white;  
 +
      }
 +
     }
 +
  }
}
}
-
/*返回顶部*/
+
.animate{
-
#toTop{
+
margin:10px 0 0 0;
-
width:50px;
+
list-style:none;
-
position:fixed;
+
text-align:center;
-
right:10px;
+
  -webkit-transition: all .30s;
-
bottom:10px;
+
  -moz-transition: all .30s;
-
cursor:pointer;
+
  -ms-transition: all .30s;
-
display:none;
+
  -ms-transition: all .30s;
-
}
+
  transition: all .30s; 
 +
  backface-visibility:hidden;
 +
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
 +
  -moz-backface-visibility:hidden; /* Firefox */
 +
  -ms-backface-visibility:hidden; /* Internet Explorer */
 +
}

Latest revision as of 16:58, 17 October 2014

@charset "utf-8"; /* CSS Document */

  1. globalWrapper

{ 

background-color:transparent;
 border:none;

}

  1. top-section{border:none;height: 20px;}
  2. menubar a{ color:#000;}
  3. menubar a:hover{ color:#35a5ca;}
  4. menubar a:visited{ color:#999999;}

.right-menu li a { background:none;text-decoration: none;} .left-menu:hover { 

background:rgba(255,255,255,0.3);

}

  1. p-logo,#search-controls

{ 

display:none;

}

  1. top

{ 

 display: none;

} h1.firstHeading { 

 display: none;

}

  1. footer-box

{ margin-top:1400px; border: none;


}

  1. catlinks

{ 

 display: none;

}

/*框架*/ body{ font-family:"helvetica"; margin:0;background-color:transparent; }

  1. main_container{ background:#FFF; width:100%;height:100%;margin-top:-45px; }
  2. container{width:1024px;margin:auto; position:relative; z-index:2; height:1400px; 
         }


  1. header{width:1024px; 
       height:255px;

text-align:center; background:url(BIT_header.png); margin:auto; position:relative;


} .image a{color:#000000;} /*内容*/

  1. main_content,#content{height:420px; 
        width:1024px;

margin:auto; background:#FFF; padding:0px; 

               background:#FFF;
               border:none;
               z-index:0;

position:relative; }

/*页脚*/

  1. footer1 ul{ margin:25px 20px 0 0;}
  2. footer1 li.style{ width:40px;}
  3. footer1 li{

list-style:none; float:right; box-shadow:none; border-radius:0; margin:0; padding:0; width:90px; }

  1. others{text-align:center;

margin:auto 0; width:1024px; height:130px; margin-top:650px; position: relative; }

  1. address p{ text-align:center; line-height:15px;}
  1. footer1{

width:1024px; position:relative; margin:auto; margin-top:0; background-color:#FFF; color:#000; height:140px; font-size:12px;

}

  1. table1{ width:500px; position:absolute; table-layout:fixed;

left:130px; height:100px}


td{width: 170px; padding:10px 10px 0 10px; word-wrap:break-word; }


  1. table1 img{ width:20px; height:20px;vertical-align:text-bottom; margin-right:10px; }

@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}


/*返回顶部*/

  1. toTop{

width:50px; position:fixed; right:10px; bottom:10px; cursor:pointer; display:none; z-index:10; } /*左侧收缩菜单*/ .float-right{ 

 float: right;

} .fa{ 

font-size: .8em;
 line-height: 22px !important;

} dropdown{ 

  display: inline-block;

} dropdown label{ 

 display: block;
 width: 200px;
 background: #ECF0F1;
 padding: 10px;
 color: #35a5ca;
 border-left: 4px solid #35a5ca;
 
 position: relative;
 z-index: 2;

} dropdown ul li{ background:url(BIT_dropdown1.png); width: 206px; height:15px; margin-top:10px;} dropdown ul li a{ line-height: 12px;color:#000;}

dropdown ul li a:hover{ color: #35a5ca; cursor: pointer;} dropdown ul li a:visited{ color:#999999; }

dropdown label img{ 

 background: url(../img/BIT_show.png);

} dropdown input{ 

 display: none;

} dropdown input ~ ul{ 

 position: relative;
 visibility: hidden;
 opacity: 0;
 top: -20px;
 z-index: 1;

} dropdown input:checked + label{ 

 background: url(BIT_label.png);
 color: white;
 text-align: left;

}

dropdown input:checked ~ ul{ 

 visibility: visible;
 opacity: 1;
 top: 0;

} $colors: #35a5ca, #35a5ca, #35a5ca;

@for $i from 1 through length($colors) { 

 dropdown ul li:nth-child(#{$i}) {
   border-left: 4px solid nth($colors, $i);
   .fa{
     color: nth($colors, $i);
   }
   &:hover {
       background: nth($colors, $i);
       color: white;
     .fa{
       color: white; 
     }
   }
 }

}

.animate{ margin:10px 0 0 0; list-style:none; text-align:center; 

 -webkit-transition: all .30s;
 -moz-transition: all .30s;
 -ms-transition: all .30s;
 -ms-transition: all .30s;
 transition: all .30s;  
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden; /* Chrome and Safari */
 -moz-backface-visibility:hidden; /* Firefox */
 -ms-backface-visibility:hidden; /* Internet Explorer */

}

Retrieved from "http://2014.igem.org/Team:BIT/public.css"