rough support for vertical centering #70

This commit is contained in:
Hakim El Hattab
2012-11-10 09:41:26 -05:00
parent f51067b00e
commit 691099c6a2
2 changed files with 96 additions and 23 deletions

View File

@ -48,7 +48,6 @@ html,
body {
width: 100%;
height: 100%;
min-height: 600px;
overflow: hidden;
}
@ -164,11 +163,6 @@ body {
* DEFAULT ELEMENT STYLES
*********************************************/
.reveal .slides section {
line-height: 1.2em;
font-weight: normal;
}
.reveal img {
/* preserve aspect ratio and scale image so it's bound within the section */
max-width: 100%;
@ -495,14 +489,20 @@ body {
* SLIDES
*********************************************/
.reveal {
width: 100%;
height: 100%;
min-height: 600px;
position: relative;
}
.reveal .slides {
position: absolute;
max-width: 900px;
min-height: 600px;
width: 80%;
height: 60%;
left: 50%;
top: 50%;
margin-top: -320px;
padding: 20px 0px;
overflow: visible;
z-index: 1;
@ -520,41 +520,60 @@ body {
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 0% 25%;
-moz-perspective-origin: 0% 25%;
-ms-perspective-origin: 0% 25%;
perspective-origin: 0% 25%;
-webkit-perspective-origin: 0% 0%;
-moz-perspective-origin: 0% 0%;
-ms-perspective-origin: 0% 0%;
perspective-origin: 0% 0%;
}
.reveal .slides>section,
.reveal .slides>section>section {
display: none;
visibility: hidden;
position: absolute;
width: 100%;
min-height: 600px;
z-index: 10;
line-height: 1.2em;
font-weight: normal;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slides>section.present {
display: block;
.reveal .slides>section.present,
.reveal .slides>section>section.present {
visibility: visible;
z-index: 11;
opacity: 1;
}
.reveal .slides>section {
margin-left: -50%;
margin-top: -50%;
}
.reveal.center,
.reveal.center .slides {
padding: 0;
min-height: auto;
}
@ -1113,6 +1132,14 @@ body {
transform: none;
}
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/*********************************************
* BACKGROUND STATES