Template:USTC-Software/header/css

From 2013.igem.org

(Difference between revisions)
 
(141 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;
-
 
+
height: 100%;
-
#header {  
+
left: 0;
-
position: relative;
+
position: absolute;
-
background: url(https://static.igem.org/mediawiki/2013/3/3f/USTC-Software_header_bg.png) no-repeat right top;  
+
top: 0;
-
        border-radius: 0 0 5px 5px;  
+
width: 100%;
-
-moz-border-radius: 0 0 5px 5px;  
+
-
-webkit-border-radius: 0 0 15px 15px;
+
-
height: 45px;
+
-
font-family: "Helvetica Neue","Arial",sans-serif;
+
-
/*font-size: 14px;*/
+
-
border: 5px #0D97F2 solid;
+
-
border-top-width:0px;
+
-
max-width:1340px;
+
-
width:100%;
+
}
}
-
 
+
#pix_prev, #pix_next {
-
#nav-strip a {
+
-
color: #fff;
+
-
text-decoration: none;
+
cursor: pointer;
cursor: pointer;
-
cursor: hand;
+
display: block;
-
}
+
height: 40px;
-
/*a:hover{text-decoration: underline;}*/
+
margin-top: -20px;
-
#nav-strip ul {
+
-
margin:0;
+
-
padding:0;
+
-
list-style:none;
+
-
}
+
-
/* Header */
+
-
 
+
-
/*  Nav */
+
-
 
+
-
#nav-strip ul li.nav-item,
+
-
#nav-strip ul li.nav-item.active ,
+
-
#nav-strip ul li.nav-item:hover{
+
-
/*border-left: 1px solid #373737;
+
-
border-right: 1px solid #181818;*/
+
-
}
+
-
#nav-strip {
+
-
margin:0;
+
-
width: 670px;/*总宽度*/
+
-
height: 45px;
+
position: absolute;
position: absolute;
-
z-index:9999;
+
top: 50%;
-
left:350px;
+
width: 40px;
-
/*border-right: solid 1px #373737;
+
z-index: 1001;
-
border-left: solid 1px #181818;
+
}
-
}
+
#pix_prev {
-
#nav-strip a:hover {
+
background: url(https://static.igem.org/mediawiki/2013/6/60/USTC_Software_Prev.png) no-repeat;
-
text-decoration:none;
+
left: 0px;
-
}
+
}
-
#nav-strip ul li.nav-item {
+
#pix_next {
-
    display: inline;
+
background: url(https://static.igem.org/mediawiki/2013/5/5e/USTC_Software_Next.png) no-repeat;
-
    float: left;
+
left: auto!important;
-
position:relative;
+
right: 0px!important;
-
padding-top:15px;
+
}
-
width:130px;/*主菜单宽*/
+
#pix_pag {
-
height: 30px;
+
margin: 0 auto;
-
text-align:center;
+
position: relative;
-
}
+
width: 930px;
-
#nav-strip ul li.nav-item:hover,
+
z-index: 1002;
-
#nav-strip ul li.nav-item.hover{
+
}
-
background: #0D97F2;
+
#pix_commands {
-
}
+
cursor: pointer;
-
#nav-strip ul li.nav-item:hover a,
+
display: block;
-
#nav-strip ul li.nav-item.hover a{color: #FFF;}/*鼠标接触时的颜色浓绿*/
+
-
#nav-strip ul li a{
+
-
/*font-weight: bold;*/
+
-
color: #000;
+
-
display:block;
+
-
/*padding:10px;*/
+
-
font-size: 14px;/*主菜单字体大小*/
+
-
}
+
-
/*#nav-strip ul li a .primary-link,
+
-
#nav-strip ul li.active a .primary-link,
+
-
#nav-strip ul li.hover a .primary-link{
+
-
background: 100% -10px no-repeat transparent;
+
-
padding-right: 10px;
+
-
}*/
+
-
/*#nav-strip ul li.no-subnav a .primary-link{
+
-
background: none;
+
-
padding-right: 0;
+
-
}*/
+
-
/*  subNav */
+
-
#nav-strip ul li .subnav {
+
-
display: none;
+
-
position:absolute;
+
-
background: #0D97F2;
+
-
top:45px;
+
-
/*left: -1px;
+
-
 
+
-
border-top:1px solid #313131;
+
-
border-left: 1px solid #333;
+
-
border-right: 1px solid #333;
+
-
border-bottom: 1px solid #fff;
+
-
z-index: 9999;
+
-
min-width: 130px;
+
-
-webkit-box-shadow:0 0px 2px #000;
+
-
-moz-box-shadow:0 0px 2px #000;
+
-
box-shadow:0 0px 2px #000;
+
-
-webkit-border-bottom-left-radius:2px;
+
-
-webkit-border-bottom-right-radius:2px;
+
-
-moz-border-bottom-left-radius:2px;
+
-
-moz-border-bottom-right-radius:2px;
+
-
border-bottom-left-radius:2px;
+
-
border-bottom-right-radius:2px;*/
+
-
}
+
-
#nav-strip .subnav-inner {
+
float: left;
float: left;
-
width: 130px;/*160 the width of menu when hovered*/
+
height: 26px;
-
}
+
margin: 15px 0 0 13px;
-
#nav-strip ul li .subnav ul{
+
position: relative;
-
/*margin-bottom: 13px;*/
+
width: 24px;
 +
}
 +
#pix_play {
 +
background: url(https://static.igem.org/mediawiki/2013/4/45/USTC_Software_play.png) center no-repeat;
 +
height: 24px;
 +
left: 0;
 +
position: absolute;
 +
top: 0;
 +
width: 24px;
 +
}
 +
#pix_stop {
 +
background: url(https://static.igem.org/mediawiki/2013/c/ce/USTC_Software_Stop.png) center no-repeat;
 +
height: 24px;
 +
left: 0;
 +
position: absolute;
 +
top: 0;
 +
width: 24px;
 +
}
 +
#pix_pag_ul {
 +
float: right;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#pix_pag_ul > li {
 +
cursor: pointer;
 +
display: block;
 +
.display: inline-block;
float: left;
float: left;
-
width: 130px;/*115*/
+
list-style: none;
-
list-style:none;
+
margin: 0 10px 0 0;
-
}
+
padding: 20px 8px 0;
-
#nav-strip ul li .subnav ul li{
+
text-align: center;
-
    display:block;
+
text-indent: -9999px;
-
border-bottom:1px solid #fff;
+
width: 16px;
-
float:left;
+
-
width: 130px;/*160px*/
+
}
}
-
 
+
#pix_pag_ul > li > span {
-
#nav-strip ul li .subnav ul li a{font-weight: normal;margin-top:5px;height:20px; margin-bottom:2px;}
+
background: #222;
-
#nav-strip ul li .subnav ul li a,
+
-webkit-border-radius: 8px;
-
#nav-strip ul li.nav-item:hover .subnav ul li a{
+
-moz-border-radius: 8px;
-
position: relative;
+
border-radius: 8px;
-
/*font-size: 14px;*/
+
display: block;
-
color: #fff;
+
height: 16px;
-
/*white-space: nowrap;
+
width: 16px;
-
white-space: normal;
+
-
_white-space: nowrap; */
+
-
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;
+
}
}
-
 
+
#pix_pag_ul > li:hover > span > span {
-
 
+
background: #ccc;
-
#team_logo {
+
-
    width:290px;
+
-
    height: 15px;
+
-
    float: left;
+
-
    margin-top:0px;
+
-
    margin-left:60px;
+
-
    font-size:36px;
+
-
    font-family:"汉仪蝶语体简";
+
-
    -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;
+
}
}
-
#team_logo a{
+
#pix_pag_ul > li > span > span {
-
    color:#99cc99;
+
-webkit-border-radius: 8px;
-
    text-decoration:none;
+
-moz-border-radius: 8px;
-
    text-shadow: 4px 3px 0.5px #666666;
+
border-radius: 8px;
-
    position:relative;
+
display: block;
-
    -webkit-transition: color .5s ease-out;
+
float: left;
-
    -moz-transition: color .5s ease-out;
+
height: 8px;
-
    -o-transition: color .5s ease-out;
+
margin: 4px;
-
    -ms-transition: color .5s ease-out;
+
width: 8px;
-
    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 {
-
#team_logo:hover a{
+
border: 4px solid #f2f2f2;
-
  color:#0D97F2;
+
.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 {
-
#igem {
+
    border-left: 4px solid transparent;
-
    float:right;
+
    border-right: 4px solid transparent;
-
    margin-top:-1px;
+
    border-top: 4px solid  #e6e6e6;
-
    margin-right:100px;
+
top: 26px;
-
    background: url(https://static.igem.org/mediawiki/2013/7/7c/USTC-Software_circle.png) no-repeat center;
+
left: 12px;
-
    height:80px;  
+
position: absolute;
-
    width:160px;  
+
}
-
    border-bottom-right-radius:1000px;
+
.pix_relativize {
-
    border-bottom-left-radius:1000px;
+
overflow: hidden;
-
    border-top-left-radius:0px;
+
position: relative;
-
    border-top-right-radius:0px;
+
}
 +
.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;
}
}

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"