Template:USTC-Software/header/css

From 2013.igem.org

(Difference between revisions)
 
(128 intermediate revisions not shown)
Line 1: Line 1:
-
#top {
+
.pix_diapo {
-
      position: fixed;
+
background: #000;
-
      background: #0D97F2;
+
-moz-box-shadow: 2px 3px 6px #000;
-
      width:100%;
+
-webkit-box-shadow: 2px 3px 6px #000;
-
      height:50px;
+
box-shadow: 2px 3px 6px #000;
-
      z-index: 5000;
+
height: 500px;
-
      top:0px;
+
margin: 0 10px;
-
      left:0px;
+
overflow: hidden;
-
      border-radius: 0 0 5px 5px;
+
position: relative;
-
      -moz-border-radius: 0 0 5px 5px;
+
width: 1000px;
-
      -webkit-border-radius: 0 0 15px 15px;
+
        margin-left:1px;
}
}
-
 
+
.pix_diapo > div {
-
 
+
display: none;
-
#header {
+
height: 100%;
-
      position: relative;
+
left: 0;
-
      background: #fff;
+
position: absolute;
-
      border-radius: 0 0 5px 5px;
+
top: 0;
-
      -moz-border-radius: 0 0 5px 5px;
+
width: 100%;
-
      -webkit-border-radius: 0 0 15px 15px;
+
-
      height: 45px;
+
-
      font-family: "Helvetica Neue","Arial",sans-serif;
+
-
      border: 5px #0D97F2 solid;
+
-
      border-top-width:0px;
+
-
      max-width:1340px;
+
-
      width:955px;
+
-
      margin-left:-15px;
+
}
}
-
 
+
#pix_prev, #pix_next {
-
#nav-strip a {
+
cursor: pointer;
-
      color: #fff;
+
display: block;
-
      text-decoration: none;
+
height: 40px;
-
      cursor: pointer;
+
margin-top: -20px;
-
      cursor: hand;
+
position: absolute;
 +
top: 50%;
 +
width: 40px;
 +
z-index: 1001;
}
}
-
 
+
#pix_prev {
-
 
+
background: url(https://static.igem.org/mediawiki/2013/6/60/USTC_Software_Prev.png) no-repeat;
-
#nav-strip ul {
+
left: 0px;
-
      margin:0;
+
-
      padding:0;
+
-
      list-style:none;
+
}
}
-
 
+
#pix_next {
-
 
+
background: url(https://static.igem.org/mediawiki/2013/5/5e/USTC_Software_Next.png) no-repeat;
-
 
+
left: auto!important;
-
 
+
right: 0px!important;
-
#nav-strip {
+
-
      margin:0;
+
-
      width: 670px;/*总宽度*/
+
-
      height: 45px;
+
-
      position: absolute;
+
-
      z-index:9999;
+
-
      left:350px;
+
}
}
-
 
+
#pix_pag {
-
 
+
margin: 0 auto;
-
#nav-strip a:hover { text-decoration:none;}
+
position: relative;
-
 
+
width: 930px;
-
 
+
z-index: 1002;
-
#nav-strip ul li.nav-item {
+
-
      display: inline;
+
-
      float: left;
+
-
      position:relative;
+
-
      padding-top:15px;
+
-
      width:130px;/*主菜单宽*/
+
-
      height: 30px;
+
-
      text-align:center;
+
}
}
-
 
+
#pix_commands {
-
 
+
cursor: pointer;
-
#nav-strip ul li.nav-item:hover,
+
display: block;
-
#nav-strip ul li.nav-item.hover { background: #0D97F2;}
+
float: left;
-
 
+
height: 26px;
-
#nav-strip ul li.nav-item:hover a,
+
margin: 15px 0 0 13px;
-
#nav-strip ul li.nav-item.hover a {color: #FFF;}/*鼠标接触时的颜色浓绿*/
+
position: relative;
-
 
+
width: 24px;
-
#nav-strip ul li a {
+
-
        color: #000;
+
-
        display:block;
+
-
        font-size: 14px;/*主菜单字体大小*/
+
}
}
-
 
+
#pix_play {
-
 
+
background: url(https://static.igem.org/mediawiki/2013/4/45/USTC_Software_play.png) center no-repeat;
-
#nav-strip ul li .subnav {
+
height: 24px;
-
      display: none;
+
left: 0;
-
      position:absolute;
+
position: absolute;
-
      background: #0D97F2;
+
top: 0;
-
      top:45px;
+
width: 24px;
}
}
-
 
+
#pix_stop {
-
 
+
background: url(https://static.igem.org/mediawiki/2013/c/ce/USTC_Software_Stop.png) center no-repeat;
-
#nav-strip .subnav-inner {
+
height: 24px;
-
      float: left;
+
left: 0;
-
      width: 130px;
+
position: absolute;
 +
top: 0;
 +
width: 24px;
}
}
-
 
+
#pix_pag_ul {
-
 
+
float: right;
-
#nav-strip ul li .subnav ul {
+
margin: 0;
-
      float: left;
+
padding: 0;
-
      width: 130px;
+
-
      list-style:none;
+
}
}
-
 
+
#pix_pag_ul > li {
-
 
+
cursor: pointer;
-
#nav-strip ul li .subnav ul li {
+
display: block;
-
      display:block;
+
.display: inline-block;
-
      border-bottom:1px solid #fff;
+
float: left;
-
      float:left;
+
list-style: none;
-
      width: 130px;
+
margin: 0 10px 0 0;
 +
padding: 20px 8px 0;
 +
text-align: center;
 +
text-indent: -9999px;
 +
width: 16px;
}
}
-
 
+
#pix_pag_ul > li > span {
-
 
+
background: #222;
-
#nav-strip ul li .subnav ul li a {
+
-webkit-border-radius: 8px;
-
      font-weight: normal;
+
-moz-border-radius: 8px;
-
      margin-top:5px;
+
border-radius: 8px;
-
      height:20px;
+
display: block;
-
      margin-bottom:2px;
+
height: 16px;
 +
width: 16px;
}
}
-
 
+
#pix_pag_ul > li:hover > span > span {
-
 
+
background: #ccc;
-
#nav-strip ul li .subnav ul li a,
+
-
#nav-strip ul li.nav-item:hover .subnav ul li a{
+
-
      position: relative;
+
-
      color: #fff;
+
-
      text-align:center;
+
-
}<!--下拉菜单的高度-->
+
-
 
+
-
 
+
-
#nav-strip ul li .subnav ul li a,
+
-
#nav-strip ul li.nav-item:hover .subnav ul li a { white-space: normal;}
+
-
 
+
-
 
+
-
#nav-strip ul li .subnav ul li.active a,
+
-
#nav-strip ul li .subnav ul li a:hover { color:#000!important;}
+
-
 
+
-
 
+
-
#team_logo {
+
-
      width:290px;
+
-
      height: 15px;
+
-
      float: left;
+
-
      margin-top:0px;
+
-
      margin-left:60px;
+
-
      font-size:36px;
+
-
      font-family:'Open Sans',"Helvetica Neue",arial,serif;
+
-
      -webkit-transition: all .5s ease-out;
+
-
      -moz-transition: all .5s ease-out;
+
-
      -o-transition: all .5s ease-out;
+
-
      -ms-transition: all .5s ease-out;
+
-
      transition: all .5s ease-out;
+
}
}
-
 
+
#pix_pag_ul > li > span > span {
-
 
+
-webkit-border-radius: 8px;
-
#team_logo a{
+
-moz-border-radius: 8px;
-
      color:#99cc99;
+
border-radius: 8px;
-
      text-decoration:none;
+
display: block;
-
      text-shadow: 4px 3px 0.5px #666666;
+
float: left;
-
      position:relative;
+
height: 8px;
-
      -webkit-transition: color .5s ease-out;
+
margin: 4px;
-
      -moz-transition: color .5s ease-out;
+
width: 8px;
-
      -o-transition: color .5s ease-out;
+
-
      -ms-transition: color .5s ease-out;
+
-
      transition: color .5s ease-out;
+
}
}
-
 
+
#pix_pag_ul > li.diapocurrent > span > span {
-
#team_logo a:active{
+
background: #ff0;
-
    text-shadow:6px 4px 1px black;
+
-webkit-border-radius: 8px;
-
    left:1px;
+
-moz-border-radius: 8px;
-
    top:1px;
+
border-radius: 8px;
 +
}
 +
#pix_pag_ul > li > .pix_thumb {
 +
border: 4px solid #f2f2f2;
 +
.border: 4px solid #e6e6e6;
 +
border: 4px solid #e6e6e6\9;
 +
-moz-box-shadow: 0 1px 8px #000;
 +
-webkit-box-shadow: 0 1px 8px #000;
 +
box-shadow: 0 1px 8px #000;
 +
height: 58px;
 +
left: -42px;
 +
position: absolute;
 +
top: -40px;
 +
width: 108px;
}
}
-
 
+
#pix_pag_ul > li > .thumb_arrow {
-
#team_logo:hover a{ color:#0D97F2;}
+
    border-left: 4px solid transparent;
-
 
+
    border-right: 4px solid transparent;
-
#igem {
+
    border-top: 4px solid  #e6e6e6;
-
      float:right;
+
top: 26px;
-
      margin-top:-1px;
+
left: 12px;
-
      margin-right:-10px;
+
position: absolute;
-
      background: url(https://static.igem.org/mediawiki/2013/7/7c/USTC-Software_circle.png) no-repeat center;
+
}
-
      height:80px;  
+
.pix_relativize {
-
      width:160px;  
+
overflow: hidden;
-
      border-bottom-right-radius:1000px;
+
position: relative;
-
      border-bottom-left-radius:1000px;
+
}
-
      border-top-left-radius:0px;
+
.imgFake {
-
      border-top-right-radius:0px;
+
cursor: pointer;
 +
}
 +
.elemHover {
 +
position: absolute;
 +
}
 +
.caption {
 +
background: rgba(0, 0, 0, 0.8);
 +
    .filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
 +
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;
 +
bottom: 20px;
 +
color: #fff;
 +
display: block;
 +
font-size: 16px;
 +
        font-family: Arial, Helvetica, sans-serif;
 +
padding: 20px;
 +
width: 960px;
 +
}
 +
.ui-loader {
 +
display: none;
}
}

Latest revision as of 14:30, 7 November 2013

.pix_diapo { background: #000; -moz-box-shadow: 2px 3px 6px #000; -webkit-box-shadow: 2px 3px 6px #000; box-shadow: 2px 3px 6px #000; height: 500px; margin: 0 10px; overflow: hidden; position: relative; width: 1000px; 

       margin-left:1px;

} .pix_diapo > div { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

  1. pix_prev, #pix_next {

cursor: pointer; display: block; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 1001; }

  1. pix_prev {

background: url(USTC_Software_Prev.png) no-repeat; left: 0px; }

  1. pix_next {

background: url(USTC_Software_Next.png) no-repeat; left: auto!important; right: 0px!important; }

  1. pix_pag {

margin: 0 auto; position: relative; width: 930px; z-index: 1002; }

  1. pix_commands {

cursor: pointer; display: block; float: left; height: 26px; margin: 15px 0 0 13px; position: relative; width: 24px; }

  1. pix_play {

background: url(USTC_Software_play.png) center no-repeat; height: 24px; left: 0; position: absolute; top: 0; width: 24px; }

  1. pix_stop {

background: url(USTC_Software_Stop.png) center no-repeat; height: 24px; left: 0; position: absolute; top: 0; width: 24px; }

  1. pix_pag_ul {

float: right; margin: 0; padding: 0; }

  1. pix_pag_ul > li {

cursor: pointer; display: block; .display: inline-block; float: left; list-style: none; margin: 0 10px 0 0; padding: 20px 8px 0; text-align: center; text-indent: -9999px; width: 16px; }

  1. pix_pag_ul > li > span {

background: #222; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block; height: 16px; width: 16px; }

  1. pix_pag_ul > li:hover > span > span {

background: #ccc; }

  1. pix_pag_ul > li > span > span {

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block; float: left; height: 8px; margin: 4px; width: 8px; }

  1. pix_pag_ul > li.diapocurrent > span > span {

background: #ff0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

  1. pix_pag_ul > li > .pix_thumb {

border: 4px solid #f2f2f2; .border: 4px solid #e6e6e6; border: 4px solid #e6e6e6\9; -moz-box-shadow: 0 1px 8px #000; -webkit-box-shadow: 0 1px 8px #000; box-shadow: 0 1px 8px #000; height: 58px; 

	left: -42px;

position: absolute; top: -40px; width: 108px; }

  1. pix_pag_ul > li > .thumb_arrow { 
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid  #e6e6e6;

top: 26px; left: 12px; position: absolute; } .pix_relativize { overflow: hidden; position: relative; } .imgFake { cursor: pointer; } .elemHover { position: absolute; } .caption { background: rgba(0, 0, 0, 0.8); 

   .filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;

bottom: 20px; color: #fff; display: block; font-size: 16px; 

       font-family: Arial, Helvetica, sans-serif;

padding: 20px; width: 960px; } .ui-loader { display: none; }

Retrieved from "http://2013.igem.org/Template:USTC-Software/header/css"