Team:ZJU-China/CSS/Header.css
From 2014.igem.org
(4 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
margin-top: 0px; | margin-top: 0px; | ||
text-align: center; | text-align: center; | ||
- | background-color: # | + | background-color: #1d1d1d; |
box-shadow: 0px 0px 20px #1f1f1f; | box-shadow: 0px 0px 20px #1f1f1f; | ||
} | } | ||
Line 48: | Line 48: | ||
li#igem_edit.edit_on { | li#igem_edit.edit_on { | ||
padding: 0pt 0pt; | padding: 0pt 0pt; | ||
- | background-color: # | + | background-color: #5c5c5c; |
} | } | ||
li#igem_edit:hover { | li#igem_edit:hover { | ||
- | border-radius: 0; | + | border-radius: 0 0 5pt 5pt; |
box-shadow: none; | box-shadow: none; | ||
} | } | ||
Line 75: | Line 75: | ||
li#team_name:hover { | li#team_name:hover { | ||
box-shadow: none; | box-shadow: none; | ||
- | background-color: # | + | background-color: #323232; |
- | + | ||
} | } | ||
Line 110: | Line 109: | ||
border-color: #9d9d9d; | border-color: #9d9d9d; | ||
border-radius: 1px;*/ | border-radius: 1px;*/ | ||
- | margin: | + | margin: 0; |
- | padding: 0 | + | padding: 0; |
height: inherit; | height: inherit; | ||
+ | min-width: 36pt; | ||
position: relative; | position: relative; | ||
color: white; | color: white; | ||
Line 126: | Line 126: | ||
ul.zju_menu_list > li:hover{ | ul.zju_menu_list > li:hover{ | ||
- | + | box-shadow: 0px 0px 6px #6f6f6f inset; | |
- | box-shadow: 0px 0px 6px # | + | color: black; |
- | color: | + | background-color: #c4c4c4; |
- | background-color: # | + | |
} | } | ||
ul.zju_menu_list > li a:hover { | ul.zju_menu_list > li a:hover { | ||
- | color: | + | color: black; |
+ | } | ||
+ | |||
+ | ul.zju_menu_list > li img { | ||
+ | height: 36pt; | ||
+ | margin: 0 0 0 -18pt; | ||
+ | left: 50%; | ||
+ | position: absolute; | ||
} | } | ||
Line 171: | Line 177: | ||
border-bottom-style: solid; | border-bottom-style: solid; | ||
border-bottom-width: 3pt; | border-bottom-width: 3pt; | ||
- | border-bottom-color: # | + | border-bottom-color: #dedede; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
float: left; | float: left; | ||
Line 179: | Line 185: | ||
text-decoration: none; | text-decoration: none; | ||
padding: 4px 10px; | padding: 4px 10px; | ||
- | background-color: # | + | background-color: #9bb2c4; |
opacity: 0.8; | opacity: 0.8; | ||
display: block; | display: block; | ||
Line 188: | Line 194: | ||
border-bottom-color: #FFFFFF; | border-bottom-color: #FFFFFF; | ||
opacity: 1.0; | opacity: 1.0; | ||
- | color: # | + | color: #606060; |
background-color: #E0E0F4; | background-color: #E0E0F4; | ||
} | } | ||
Line 230: | Line 236: | ||
border-bottom-style: solid; | border-bottom-style: solid; | ||
border-bottom-width: 3pt; | border-bottom-width: 3pt; | ||
- | border-bottom-color: # | + | border-bottom-color: #dedede; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
float: left; | float: left; | ||
Line 238: | Line 244: | ||
text-decoration: none; | text-decoration: none; | ||
padding: 4px 10px; | padding: 4px 10px; | ||
- | background-color: # | + | background-color: #abb2c4; |
opacity: 0.8; | opacity: 0.8; | ||
display: block; | display: block; | ||
Line 246: | Line 252: | ||
border-bottom-color: #FFFFFF; | border-bottom-color: #FFFFFF; | ||
opacity: 1.0; | opacity: 1.0; | ||
- | color: # | + | color: #808080; |
background-color: #E0E0F4; | background-color: #E0E0F4; | ||
} | } | ||
/*--- decoration of bar ---*/ | /*--- decoration of bar ---*/ | ||
- | + | ul.zju_menu_list > li > a { | |
- | position: | + | min-width: 36pt; |
+ | height: 100%; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | ul.zju_menu_list > li span { | ||
+ | position: relative; | ||
+ | word-wrap: normal; | ||
+ | transition: opacity 0.8s ease 0s; | ||
+ | padding: 0 2px; | ||
bottom: 0px; | bottom: 0px; | ||
right: 0px; | right: 0px; | ||
display: block; | display: block; | ||
background-color: #D0D0D0; | background-color: #D0D0D0; | ||
- | opacity: 0. | + | opacity: 0.0; |
- | height: | + | height: 100%; |
- | width: | + | width: inherit; |
} | } | ||
- | ul.zju_menu_list > li:hover | + | ul.zju_menu_list > li:hover span { |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
background-color: white; | background-color: white; | ||
- | + | color: black; | |
- | + | opacity: 0.6; | |
- | + | ||
} | } | ||
- | + | ul.zju_menu_list > li:hover img { | |
- | + | opacity: 0.8; | |
- | + | ||
- | + | ||
- | + | ||
- | opacity: 0. | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | li#team_name img, li#igem_edit img, li#igem_logo img { | |
- | position: | + | position: relative; |
- | + | left: 0; | |
- | + | margin: 0; | |
- | + | } | |
- | + | ||
- | + | li#igem_edit { | |
- | + | min-width: 0pt; | |
- | + | } | |
- | + | ||
- | } | + | |
+ | li#team_name span, li#igem_edit span, li#igem_logo span { | ||
+ | margin: 0; | ||
+ | left: 0; | ||
+ | position:absolute; | ||
+ | } | ||
@media screen and (min-width: 1600px) { | @media screen and (min-width: 1600px) { | ||
Line 303: | Line 309: | ||
} | } | ||
- | @media screen and (min-width: 1080px) { | + | /*@media screen and (min-width: 1080px) { |
ul.zju_menu_list > li { | ul.zju_menu_list > li { | ||
- | + | padding: 0 0; | |
} | } | ||
Line 319: | Line 325: | ||
padding: 0pt 0pt; | padding: 0pt 0pt; | ||
} | } | ||
- | } | + | }*/ |
@media screen and (max-width: 900px) { | @media screen and (max-width: 900px) { |
Latest revision as of 15:51, 16 October 2014
div.zju_header {
margin-top: 0px; text-align: center; background-color: #1d1d1d; box-shadow: 0px 0px 20px #1f1f1f;
}
div.zju_menu {
position: inherit; top: 0px; margin: 0px; width: 80%; height: auto; text-align: center; display: inline-block; background-color: transparent;
}
a#igem_logo {
/*display:inline-block; position: relative; width: 48px; text-align: center; margin: 14px 0px 0px 0px; border-color: white; border-style: groove; border-width: 0px 1px 0px 1px;*/
}
img#igem_logo {
padding: 0pt 0pt; height: 40pt;
}
li#igem_logo {
padding: 0pt 0pt;
}
img#igem_edit {
padding: 5pt 0pt; height: 30pt;
}
li#igem_edit {
padding: 0pt 0pt;
}
li#igem_edit.edit_on {
padding: 0pt 0pt; background-color: #5c5c5c;
}
li#igem_edit:hover {
border-radius: 0 0 5pt 5pt; box-shadow: none;
}
img#team_name {
margin-top: 2pt; height: 36pt;
}
li#team_name {
padding: 0pt 0pt; position: relative; text-align: right; text-decoration: none; color: white; font-size: 12pt; font-family: "Segoe UI"; font-style: bold; border: 0px;
}
li#team_name:hover {
box-shadow: none; background-color: #323232;
}
ul.zju_menu_list{
display: inline-block; text-align: justify; -ms-text-justify: distribute-all-lines; list-style: none; margin: 14px 0px 0px 0px; padding: 0pt; width: 100%; height: 40pt; min-width: 720px; font-size: 0pt;
}
ul.zju_menu_list > li > a:active, ul.zju_menu_list > li > a:visited, ul.zju_menu_list > li > a:link {
text-decoration: none; color: white; font-family: inherit; font-style: normal; font-size: inherit; text-align: center;
}
ul.zju_menu_list > li {
/*margin-right: -8px; width: auto; margin-top: 14px; padding: 10pt 1%; border-style: solid; border-width: 0px 1px; border-color: #9d9d9d; border-radius: 1px;*/ margin: 0; padding: 0; height: inherit; min-width: 36pt; position: relative; color: white; font-family: "Segoe UI"; font-style: normal; font-size: 14pt; line-height: 40pt; text-align: center; vertical-align: middle; background-color: transparent; display: inline-block;
}
ul.zju_menu_list > li:hover{
box-shadow: 0px 0px 6px #6f6f6f inset; color: black; background-color: #c4c4c4;
}
ul.zju_menu_list > li a:hover {
color: black;
}
ul.zju_menu_list > li img {
height: 36pt; margin: 0 0 0 -18pt; left: 50%; position: absolute;
}
ul.zju_menu_list > li:hover > ul {
/*display: block;*/ z-index: 1;
}
ul.zju_menu_list > li li {
float: none;
}
/*ul.zju_menu_list > li:hover > ul > li {
display: inline;
}*/
ul.zju_sub_menu {
float: none; display: none; list-style: none; margin: 0 0 0 -60pt; width: 120pt; top: 100%; left: 50%; color: white; box-shadow: 5px 5px 5px #888888; position: absolute; background-color: transparent;
}
ul.zju_sub_menu > li a:link, ul.zju_sub_menu > li a:active, ul.zju_sub_menu > li a:visited {
text-decoration: none; color: inherit;
}
ul.zju_sub_menu > li{
border-bottom-style: solid; border-bottom-width: 3pt; border-bottom-color: #dedede; margin-bottom: 0px; float: left; font-family: inherit; font-size: 14pt; text-align: center; text-decoration: none; padding: 4px 10px; background-color: #9bb2c4; opacity: 0.8; display: block; position: relative;
}
ul.zju_sub_menu > li:hover {
border-bottom-color: #FFFFFF; opacity: 1.0; color: #606060; background-color: #E0E0F4;
}
ul.zju_menu_list:after {
content: ""; display: inline-block; font-size: 0; line-height: 0; width: 100%;
}
/*li#zju_menu_long {
font-size: 12px;
}*/
ul.zju_sub_menu > li:hover ul {
/*display: block;*/
}
ul.zju_son_menu {
float: none; display: none; list-style: none; margin: 0 0 0 0pt; width: 120pt; top: 0%; left: 100%; color: white; box-shadow: 5px 5px 5px #888888; position: absolute; background-color: transparent;
}
ul.zju_son_menu > li a:link, ul.zju_sub_menu > li a:active, ul.zju_sub_menu > li a:visited {
text-decoration: none; color: inherit;
}
ul.zju_son_menu > li{
border-bottom-style: solid; border-bottom-width: 3pt; border-bottom-color: #dedede; margin-bottom: 0px; float: left; font-family: inherit; font-size: 14pt; text-align: center; text-decoration: none; padding: 4px 10px; background-color: #abb2c4; opacity: 0.8; display: block;
}
ul.zju_son_menu > li:hover {
border-bottom-color: #FFFFFF; opacity: 1.0; color: #808080; background-color: #E0E0F4;
}
/*--- decoration of bar ---*/ ul.zju_menu_list > li > a {
min-width: 36pt; height: 100%; display: inline-block;
}
ul.zju_menu_list > li span {
position: relative; word-wrap: normal; transition: opacity 0.8s ease 0s; padding: 0 2px; bottom: 0px; right: 0px; display: block; background-color: #D0D0D0; opacity: 0.0; height: 100%; width: inherit;
}
ul.zju_menu_list > li:hover span {
background-color: white; color: black; opacity: 0.6;
}
ul.zju_menu_list > li:hover img {
opacity: 0.8;
}
li#team_name img, li#igem_edit img, li#igem_logo img {
position: relative; left: 0; margin: 0;
}
li#igem_edit {
min-width: 0pt;
}
li#team_name span, li#igem_edit span, li#igem_logo span {
margin: 0; left: 0; position:absolute;
}
@media screen and (min-width: 1600px) {
div.zju_menu { width: 1280px; }
}
/*@media screen and (min-width: 1080px) {
ul.zju_menu_list > li { padding: 0 0; } ul.zju_menu_list > li#igem_edit { padding: 0pt 0pt; } ul.zju_menu_list > li#igem_logo { padding: 0pt 0pt; }
ul.zju_menu_list > li#team_name { padding: 0pt 0pt; }
}*/
@media screen and (max-width: 900px) {
div.zju_menu { width: 720px; }
}
@media screen and (max-width: 720px) {
div.zju_header { width: 720px; }
}