aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2014-04-06 11:04:58 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2014-04-06 11:04:58 +0200
commita3d4afeeed1aec725a42cb404e62f89739c8faa3 (patch)
treea3c39d1e8745d95b889d3a414888922e0c2ede6b /css
parentc87d7db93064bac472e1cc80bee28c4dcc92565b (diff)
downloadfosdem-2018-presentation-a3d4afeeed1aec725a42cb404e62f89739c8faa3.tar
fosdem-2018-presentation-a3d4afeeed1aec725a42cb404e62f89739c8faa3.tar.gz
better transition names, fix background images in vertical slides
Diffstat (limited to 'css')
-rw-r--r--css/reveal.css123
1 files changed, 71 insertions, 52 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 548aecc..8022b1e 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -683,18 +683,79 @@ body {
/*********************************************
- * DEFAULT TRANSITION
+ * SLIDE TRANSITION
+ * Aliased 'linear' for backwards compatibility
+ *********************************************/
+
+.reveal.slide section.
+.reveal.linear section {
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.reveal .slides>section[data-transition=slide].past,
+.reveal.slide .slides>section:not([data-transition]).past,
+.reveal .slides>section[data-transition=linear].past,
+.reveal.linear .slides>section:not([data-transition]).past {
+ -webkit-transform: translate(-150%, 0);
+ -moz-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ -o-transform: translate(-150%, 0);
+ transform: translate(-150%, 0);
+}
+.reveal .slides>section[data-transition=slide].future,
+.reveal.slide .slides>section:not([data-transition]).future,
+.reveal .slides>section[data-transition=linear].future,
+.reveal.linear .slides>section:not([data-transition]).future {
+ -webkit-transform: translate(150%, 0);
+ -moz-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ -o-transform: translate(150%, 0);
+ transform: translate(150%, 0);
+}
+
+.reveal .slides>section>section[data-transition=slide].past,
+.reveal.slide .slides>section>section:not([data-transition]).past,
+.reveal .slides>section>section[data-transition=linear].past,
+.reveal.linear .slides>section>section:not([data-transition]).past {
+ -webkit-transform: translate(0, -150%);
+ -moz-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ -o-transform: translate(0, -150%);
+ transform: translate(0, -150%);
+}
+.reveal .slides>section>section[data-transition=slide].future,
+.reveal.slide .slides>section>section:not([data-transition]).future,
+.reveal .slides>section>section[data-transition=linear].future,
+.reveal.linear .slides>section>section:not([data-transition]).future {
+ -webkit-transform: translate(0, 150%);
+ -moz-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ -o-transform: translate(0, 150%);
+ transform: translate(0, 150%);
+}
+
+
+/*********************************************
+ * CONVEX TRANSITION
+ * Aliased 'default' for backwards compatibility
*********************************************/
.reveal .slides>section[data-transition=default].past,
-.reveal.default .slides>section:not([data-transition]).past {
+.reveal.default .slides>section:not([data-transition]).past,
+.reveal .slides>section[data-transition=convex].past,
+.reveal.convex .slides>section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal .slides>section[data-transition=default].future,
-.reveal.default .slides>section:not([data-transition]).future {
+.reveal.default .slides>section:not([data-transition]).future,
+.reveal .slides>section[data-transition=convex].future,
+.reveal.convex .slides>section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
@@ -702,14 +763,18 @@ body {
}
.reveal .slides>section>section[data-transition=default].past,
-.reveal.default .slides>section>section:not([data-transition]).past {
+.reveal.default .slides>section>section:not([data-transition]).past,
+.reveal .slides>section>section[data-transition=convex].past,
+.reveal.convex .slides>section>section:not([data-transition]).past {
-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
}
.reveal .slides>section>section[data-transition=default].future,
-.reveal.default .slides>section>section:not([data-transition]).future {
+.reveal.default .slides>section>section:not([data-transition]).future,
+.reveal .slides>section>section[data-transition=convex].future,
+.reveal.convex .slides>section>section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
-moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
-ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
@@ -803,52 +868,6 @@ body {
/*********************************************
- * LINEAR TRANSITION
- *********************************************/
-
-.reveal.linear section {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- backface-visibility: hidden;
-}
-
-.reveal .slides>section[data-transition=linear].past,
-.reveal.linear .slides>section:not([data-transition]).past {
- -webkit-transform: translate(-150%, 0);
- -moz-transform: translate(-150%, 0);
- -ms-transform: translate(-150%, 0);
- -o-transform: translate(-150%, 0);
- transform: translate(-150%, 0);
-}
-.reveal .slides>section[data-transition=linear].future,
-.reveal.linear .slides>section:not([data-transition]).future {
- -webkit-transform: translate(150%, 0);
- -moz-transform: translate(150%, 0);
- -ms-transform: translate(150%, 0);
- -o-transform: translate(150%, 0);
- transform: translate(150%, 0);
-}
-
-.reveal .slides>section>section[data-transition=linear].past,
-.reveal.linear .slides>section>section:not([data-transition]).past {
- -webkit-transform: translate(0, -150%);
- -moz-transform: translate(0, -150%);
- -ms-transform: translate(0, -150%);
- -o-transform: translate(0, -150%);
- transform: translate(0, -150%);
-}
-.reveal .slides>section>section[data-transition=linear].future,
-.reveal.linear .slides>section>section:not([data-transition]).future {
- -webkit-transform: translate(0, 150%);
- -moz-transform: translate(0, 150%);
- -ms-transform: translate(0, 150%);
- -o-transform: translate(0, 150%);
- transform: translate(0, 150%);
-}
-
-
-/*********************************************
* CUBE TRANSITION
*********************************************/
@@ -1360,7 +1379,7 @@ body {
transition: none;
}
-/* 2D slide */
+/* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;