"
Team:Manchester/css/overlays.css
From 2014.igem.org
(Style for the overlays) |
|||
| Line 1: | Line 1: | ||
/* Overlay style */ | /* Overlay style */ | ||
| - | .overlay { | + | #content .overlay { |
position: fixed; | position: fixed; | ||
width: 100%; | width: 100%; | ||
| Line 15: | Line 15: | ||
} | } | ||
| - | .overlay2 { | + | #content .overlay2 { |
position: fixed; | position: fixed; | ||
width: 100%; | width: 100%; | ||
| Line 27: | Line 27: | ||
overflow-x: hidden; | overflow-x: hidden; | ||
} | } | ||
| - | .overlay3 { | + | |
| + | #content .overlay3 { | ||
position: fixed; | position: fixed; | ||
width: 70%; | width: 70%; | ||
| Line 44: | Line 45: | ||
} | } | ||
/* Overlay closing cross */ | /* Overlay closing cross */ | ||
| - | .overlay .overlay-close { | + | #content .overlay .overlay-close { |
width: 35px; | width: 35px; | ||
height: 40px; | height: 40px; | ||
| Line 59: | Line 60: | ||
} | } | ||
| - | .overlay2 .overlay-close2 { | + | #content .overlay2 .overlay-close2 { |
width: 35px; | width: 35px; | ||
height: 40px; | height: 40px; | ||
| Line 74: | Line 75: | ||
} | } | ||
| - | .overlay3 .overlay-close3 { | + | #content .overlay3 .overlay-close3 { |
width: 35px; | width: 35px; | ||
height: 40px; | height: 40px; | ||
| Line 89: | Line 90: | ||
} | } | ||
| - | .overall-bit{ | + | #content .overall-bit{ |
top: -30px; | top: -30px; | ||
/*zpadding: 50px;*/ | /*zpadding: 50px;*/ | ||
| Line 96: | Line 97: | ||
} | } | ||
| - | .overall-bit h3{ | + | #content .overall-bit h3{ |
font-size: 90px; | font-size: 90px; | ||
} | } | ||
| - | .description { | + | #content .description { |
text-align: center; | text-align: center; | ||
position: relative; | position: relative; | ||
| Line 109: | Line 110: | ||
} | } | ||
| - | .description h2 { | + | #content .description h2 { |
/*list-style: none;*/ | /*list-style: none;*/ | ||
padding: 0; | padding: 0; | ||
| Line 122: | Line 123: | ||
} | } | ||
| - | .details { | + | #content .details { |
text-align: left; | text-align: left; | ||
font-size: 20px; | font-size: 20px; | ||
| Line 129: | Line 130: | ||
} | } | ||
| - | .details h3 { | + | #content .details h3 { |
font-size: 40px; | font-size: 40px; | ||
} | } | ||
/* Effects */ | /* Effects */ | ||
| - | .overlay-overview { | + | #content .overlay-overview { |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| Line 143: | Line 144: | ||
} | } | ||
| - | .overlay-team { | + | #content .overlay-team { |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| Line 152: | Line 153: | ||
} | } | ||
| - | .overlay-beta { | + | #content .overlay-beta { |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| Line 161: | Line 162: | ||
} | } | ||
| - | .overlay-overview.open { | + | #content .overlay-overview.open { |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
| Line 170: | Line 171: | ||
} | } | ||
| - | .overlay-team.open { | + | #content .overlay-team.open { |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
| Line 179: | Line 180: | ||
} | } | ||
| - | .overlay-beta.open { | + | #content .overlay-beta.open { |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
| Line 192: | Line 193: | ||
/*@media screen and (max-height: 30.5em) { | /*@media screen and (max-height: 30.5em) { | ||
| - | .overlay nav { | + | #content .overlay nav { |
height: 70%; | height: 70%; | ||
font-size: 34px; | font-size: 34px; | ||
} | } | ||
| - | .overlay ul li { | + | #content .overlay ul li { |
min-height: 34px; | min-height: 34px; | ||
} | } | ||
}*/ | }*/ | ||
Revision as of 23:22, 13 August 2014
/* Overlay style */
- content .overlay {
position: fixed; width: 100%; height: 100%; padding-right: 5%; padding-left: 5%; top: 0; left: 0; /*background: rgba(10,0,20,0.9);*/ background: rgba(0,0,0,0.8); color: #fff; overflow-y: scroll; overflow-x: hidden; }
- content .overlay2 {
position: fixed; width: 100%; height: 100%; top: 0; left: 0; /*background: rgba(70,70,70,0.9);*/ background: rgba(0,0,0,0.8); color: #fff; overflow-y: scroll; overflow-x: hidden; }
- content .overlay3 {
position: fixed; width: 70%; height: 40%; top: 50%; left: 50%; float: center; background: rgba(70,70,70,0.9); color: #fff; overflow-y: scroll; overflow-x: hidden; }
::-webkit-scrollbar{
display: none;
} /* Overlay closing cross */
- content .overlay .overlay-close {
width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }
- content .overlay2 .overlay-close2 {
width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }
- content .overlay3 .overlay-close3 {
width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }
- content .overall-bit{
top: -30px; /*zpadding: 50px;*/ font-size: 50px; text-align: center; }
- content .overall-bit h3{
font-size: 90px; }
- content .description {
text-align: center; position: relative; font-size: 20px; top: 10%; /*height: 100%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%); }
- content .description h2 {
/*list-style: none;*/ padding: 0; /*margin: 0 auto;*/ display: inline-block; font-size: 54px; border-bottom: 2px solid; line-height: 90px; /*text-transform: uppercase;*/ /*height: 100%;*/ position: relative; }
- content .details {
text-align: left; font-size: 20px; /*text-align: left;*/ position: relative; }
- content .details h3 {
font-size: 40px; }
/* Effects */
- content .overlay-overview {
visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }
- content .overlay-team {
visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }
- content .overlay-beta {
visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }
- content .overlay-overview.open {
visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }
- content .overlay-team.open {
visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }
- content .overlay-beta.open {
visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }
/*@media screen and (max-height: 30.5em) {
#content .overlay nav {
height: 70%;
font-size: 34px;
}
#content .overlay ul li {
min-height: 34px;
}
}*/
