Team:Manchester/css/overlays.css

From 2014.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
/* Overlay style */
/* Overlay style */
-
#content .overlay {
+
.overlay {
position: fixed;
position: fixed;
width: 100%;
width: 100%;
Line 9: Line 9:
left: 0;
left: 0;
/*background: rgba(10,0,20,0.9);*/
/*background: rgba(10,0,20,0.9);*/
-
background: rgba(0,0,0,0.8);
+
background: rgba(0,0,0,0.95);
color: #fff;
color: #fff;
overflow-y: scroll;
overflow-y: scroll;
Line 15: Line 15:
}
}
-
#content .overlay2 {
+
.overlay2 {
position: fixed;
position: fixed;
width: 100%;
width: 100%;
Line 22: Line 22:
left: 0;
left: 0;
/*background: rgba(70,70,70,0.9);*/
/*background: rgba(70,70,70,0.9);*/
-
background: rgba(0,0,0,0.8);
+
background: rgba(0,0,0,0.95);
color: #fff;
color: #fff;
overflow-y: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow-x: hidden;
}
}
-
 
+
.overlay3 {
-
#content .overlay3 {
+
position: fixed;
position: fixed;
-
width: 70%;
+
width: 100%;
-
height: 40%;
+
height: 100%;
-
top: 50%;
+
top: 0;
-
left: 50%;
+
left: 0;
float: center;
float: center;
-
background: rgba(70,70,70,0.9);
+
background: rgba(0,0,0,0.95);
color: #fff;
color: #fff;
overflow-y: scroll;
overflow-y: scroll;
Line 41: Line 40:
}
}
-
::-webkit-scrollbar{
 
-
display: none;
 
-
}
 
/* Overlay closing cross */
/* Overlay closing cross */
-
#content .overlay .overlay-close {
+
.overlay .overlay-close {
width: 35px;
width: 35px;
height: 40px;
height: 40px;
Line 53: Line 49:
overflow: hidden;
overflow: hidden;
border: none;
border: none;
-
background: url(../img/cross.png) no-repeat center center;
+
background: url(https://static.igem.org/mediawiki/2014/4/4e/Cross.png) no-repeat center center;
text-indent: 200%;
text-indent: 200%;
color: transparent;
color: transparent;
Line 60: Line 56:
}
}
-
#content .overlay2 .overlay-close2 {
+
.overlay2 .overlay-close2 {
width: 35px;
width: 35px;
height: 40px;
height: 40px;
Line 68: Line 64:
overflow: hidden;
overflow: hidden;
border: none;
border: none;
-
background: url(../img/cross.png) no-repeat center center;
+
background: url(https://static.igem.org/mediawiki/2014/4/4e/Cross.png) no-repeat center center;
text-indent: 200%;
text-indent: 200%;
color: transparent;
color: transparent;
Line 75: Line 71:
}
}
-
#content .overlay3 .overlay-close3 {
+
.overlay3 .overlay-close3 {
width: 35px;
width: 35px;
height: 40px;
height: 40px;
Line 83: Line 79:
overflow: hidden;
overflow: hidden;
border: none;
border: none;
-
background: url(../img/cross.png) no-repeat center center;
+
background: url(https://static.igem.org/mediawiki/2014/4/4e/Cross.png) no-repeat center center;
text-indent: 200%;
text-indent: 200%;
color: transparent;
color: transparent;
Line 90: Line 86:
}
}
-
#content .overall-bit{
+
.overall-bit{
top: -30px;
top: -30px;
/*zpadding: 50px;*/
/*zpadding: 50px;*/
Line 97: Line 93:
}
}
-
#content .overall-bit h3{
+
.overall-bit h3{
font-size: 90px;
font-size: 90px;
}
}
-
#content .description {
+
.description {
text-align: center;
text-align: center;
position: relative;
position: relative;
Line 110: Line 106:
}
}
-
#content .description h2 {
+
.description h2 {
/*list-style: none;*/
/*list-style: none;*/
padding: 0;
padding: 0;
Line 123: Line 119:
}
}
-
#content .details {
+
.details {
text-align: left;
text-align: left;
font-size: 20px;
font-size: 20px;
Line 130: Line 126:
}
}
-
#content .details h3 {
+
.details h3 {
font-size: 40px;
font-size: 40px;
}
}
/* Effects */
/* Effects */
-
#content .overlay-overview {
+
.overlay-overview {
visibility: hidden;
visibility: hidden;
opacity: 0;
opacity: 0;
Line 144: Line 140:
}
}
-
#content .overlay-team {
+
.overlay-team {
visibility: hidden;
visibility: hidden;
opacity: 0;
opacity: 0;
Line 153: Line 149:
}
}
-
#content .overlay-beta {
+
.overlay-beta {
visibility: hidden;
visibility: hidden;
opacity: 0;
opacity: 0;
Line 162: Line 158:
}
}
-
#content .overlay-overview.open {
+
.overlay-sponsors {
 +
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;
 +
}
 +
 
 +
.overlay-overview.open {
visibility: visible;
visibility: visible;
opacity: 1;
opacity: 1;
Line 171: Line 176:
}
}
-
#content .overlay-team.open {
+
.overlay-team.open {
visibility: visible;
visibility: visible;
opacity: 1;
opacity: 1;
Line 180: Line 185:
}
}
-
#content .overlay-beta.open {
+
.overlay-beta.open {
visibility: visible;
visibility: visible;
opacity: 1;
opacity: 1;
Line 189: Line 194:
}
}
 +
.overlay-sponsors.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) {
/*@media screen and (max-height: 30.5em) {
-
#content .overlay nav {
+
.overlay nav {
height: 70%;
height: 70%;
font-size: 34px;
font-size: 34px;
}
}
-
#content .overlay ul li {
+
.overlay ul li {
min-height: 34px;
min-height: 34px;
}
}
}*/
}*/

Latest revision as of 23:43, 15 August 2014

/* Overlay style */ .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.95); color: #fff; overflow-y: scroll; overflow-x: hidden; }

.overlay2 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; /*background: rgba(70,70,70,0.9);*/ background: rgba(0,0,0,0.95); color: #fff; overflow-y: scroll; overflow-x: hidden; } .overlay3 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; float: center; background: rgba(0,0,0,0.95); color: #fff; overflow-y: scroll; overflow-x: hidden; }

/* Overlay closing cross */ .overlay .overlay-close { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overlay2 .overlay-close2 { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overlay3 .overlay-close3 { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overall-bit{ top: -30px; /*zpadding: 50px;*/ font-size: 50px; text-align: center; }

.overall-bit h3{ font-size: 90px; } .description { text-align: center; position: relative; font-size: 20px; top: 10%; /*height: 100%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.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; }

.details { text-align: left; font-size: 20px; /*text-align: left;*/ position: relative; }

.details h3 { font-size: 40px; }

/* Effects */ .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; }

.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; }

.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; }

.overlay-sponsors { 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; }

.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; }

.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; }

.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; }

.overlay-sponsors.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) { .overlay nav { height: 70%; font-size: 34px; } .overlay ul li { min-height: 34px; } }*/

Retrieved from "http://2014.igem.org/Team:Manchester/css/overlays.css"