aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/reveal.css79
-rw-r--r--css/reveal.scss62
2 files changed, 92 insertions, 49 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 6127a5b..258e975 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -335,29 +335,56 @@ body {
opacity: 0; }
/*********************************************
+ * Mixins for readability of transitions
+ *********************************************/
+/*********************************************
* SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility
*********************************************/
-.reveal.slide section, .reveal.linear section {
+.reveal.slide section {
-webkit-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 {
+.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-ms-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 {
+.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-ms-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 {
+.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-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 {
+.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future {
+ -webkit-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ transform: translate(0, 150%); }
+
+.reveal.linear section {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past {
+ -webkit-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ transform: translate(-150%, 0); }
+
+.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future {
+ -webkit-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ transform: translate(150%, 0); }
+
+.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past {
+ -webkit-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ transform: translate(0, -150%); }
+
+.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
@@ -366,38 +393,54 @@ body {
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
-.reveal .slides > section[data-transition=default].past, .reveal.default .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=convex].past, .reveal.convex .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past {
+ -webkit-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 .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future {
+ -webkit-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 > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past {
+ -webkit-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 .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future {
+ -webkit-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[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past {
-webkit-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 .slides > section[data-transition=convex].future, .reveal.convex .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future {
-webkit-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 > section[data-transition=default].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 {
+.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past {
-webkit-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 .slides > section > section[data-transition=convex].future, .reveal.convex .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
/*********************************************
* CONCAVE TRANSITION
*********************************************/
-.reveal .slides > section[data-transition=concave].past, .reveal.concave .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past {
-webkit-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=concave].future, .reveal.concave .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future {
-webkit-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 > section[data-transition=concave].past, .reveal.concave .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }
-.reveal .slides > section > section[data-transition=concave].future, .reveal.concave .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
@@ -408,24 +451,24 @@ body {
-webkit-transition-timing-function: ease;
transition-timing-function: ease; }
-.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past {
visibility: hidden;
-webkit-transform: scale(16);
-ms-transform: scale(16);
transform: scale(16); }
-.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future {
visibility: hidden;
-webkit-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2); }
-.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
-.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
@@ -601,7 +644,7 @@ body {
/*********************************************
* NO TRANSITION
*********************************************/
-.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) {
+.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) {
-webkit-transform: none;
-ms-transform: none;
transform: none;
diff --git a/css/reveal.scss b/css/reveal.scss
index 02ba1b4..3321c98 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -432,39 +432,39 @@ body {
*********************************************/
@mixin transition-global($style) {
- .reveal .slides>section[data-transition=#{$style}],
- .reveal.#{$style} .slides>section:not([data-transition]) {
- @content;
- }
+ .reveal .slides>section[data-transition=#{$style}],
+ .reveal.#{$style} .slides>section:not([data-transition]) {
+ @content;
+ }
}
@mixin transition-horizontal-past($style) {
- .reveal .slides>section[data-transition=#{$style}].past,
- .reveal .slides>section[data-transition~=#{$style}-out].past,
- .reveal.#{$style} .slides>section:not([data-transition]).past {
- @content;
- }
+ .reveal .slides>section[data-transition=#{$style}].past,
+ .reveal .slides>section[data-transition~=#{$style}-out].past,
+ .reveal.#{$style} .slides>section:not([data-transition]).past {
+ @content;
+ }
}
@mixin transition-horizontal-future($style) {
- .reveal .slides>section[data-transition=#{$style}].future,
- .reveal .slides>section[data-transition~=#{$style}-in].future,
- .reveal.#{$style} .slides>section:not([data-transition]).future {
- @content;
- }
+ .reveal .slides>section[data-transition=#{$style}].future,
+ .reveal .slides>section[data-transition~=#{$style}-in].future,
+ .reveal.#{$style} .slides>section:not([data-transition]).future {
+ @content;
+ }
}
@mixin transition-vertical-past($style) {
- .reveal .slides>section>section[data-transition=#{$style}].past,
- .reveal .slides>section>section[data-transition~=#{$style}-out].past,
- .reveal.#{$style} .slides>section>section:not([data-transition]).past {
- @content;
- }
+ .reveal .slides>section>section[data-transition=#{$style}].past,
+ .reveal .slides>section>section[data-transition~=#{$style}-out].past,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+ @content;
+ }
}
@mixin transition-vertical-future($style) {
- .reveal .slides>section>section[data-transition=#{$style}].future,
- .reveal .slides>section>section[data-transition~=#{$style}-in].future,
- .reveal.#{$style} .slides>section>section:not([data-transition]).future {
- @content;
- }
+ .reveal .slides>section>section[data-transition=#{$style}].future,
+ .reveal .slides>section>section[data-transition~=#{$style}-in].future,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+ @content;
+ }
}
/*********************************************
@@ -533,21 +533,21 @@ body {
*********************************************/
@include transition-global(zoom) {
- transition-timing-function: ease;
+ transition-timing-function: ease;
}
@include transition-horizontal-past(zoom) {
- visibility: hidden;
- transform: scale(16);
+ visibility: hidden;
+ transform: scale(16);
}
@include transition-horizontal-future(zoom) {
- visibility: hidden;
- transform: scale(0.2);
+ visibility: hidden;
+ transform: scale(0.2);
}
@include transition-vertical-past(zoom) {
- transform: translate(0, -150%);
+ transform: translate(0, -150%);
}
@include transition-vertical-future(zoom) {
- transform: translate(0, 150%);
+ transform: translate(0, 150%);
}
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-21 22:30:31 +0000