From d457b9270a015f7c5393066d0d58c185ca8e59e7 Mon Sep 17 00:00:00 2001
From: Leonardo Kewitz
Date: Sun, 22 Nov 2015 18:34:25 -0200
Subject: Added 4 fragment transitions effect.
---
css/reveal.css | 454 ++++++++++++++++++++-------------------------------------
1 file changed, 162 insertions(+), 292 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 2f115e5..88858f6 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -59,8 +59,7 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment {
opacity: 0;
visibility: hidden;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease; }
+ transition: all .2s ease; }
.reveal .slides section .fragment.visible {
opacity: 1;
visibility: visible; }
@@ -69,26 +68,18 @@ html:-moz-full-screen-ancestor {
opacity: 1;
visibility: visible; }
.reveal .slides section .fragment.grow.visible {
- -webkit-transform: scale(1.3);
- -ms-transform: scale(1.3);
- transform: scale(1.3); }
+ transform: scale(1.3); }
.reveal .slides section .fragment.shrink {
opacity: 1;
visibility: visible; }
.reveal .slides section .fragment.shrink.visible {
- -webkit-transform: scale(0.7);
- -ms-transform: scale(0.7);
- transform: scale(0.7); }
+ transform: scale(0.7); }
.reveal .slides section .fragment.zoom-in {
- -webkit-transform: scale(0.1);
- -ms-transform: scale(0.1);
- transform: scale(0.1); }
+ transform: scale(0.1); }
.reveal .slides section .fragment.zoom-in.visible {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none; }
+ transform: none; }
.reveal .slides section .fragment.fade-out {
opacity: 1;
@@ -110,6 +101,42 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment.strike.visible {
text-decoration: line-through; }
+.reveal .slides section .fragment.fade-up {
+ opacity: 0;
+ transform: translate(0, 20%);
+ visibility: hidden; }
+ .reveal .slides section .fragment.fade-up.visible {
+ opacity: 1;
+ transform: translate(0, 0);
+ visibility: visible; }
+
+.reveal .slides section .fragment.fade-down {
+ opacity: 0;
+ transform: translate(0, -20%);
+ visibility: hidden; }
+ .reveal .slides section .fragment.fade-down.visible {
+ opacity: 1;
+ transform: translate(0, 0);
+ visibility: visible; }
+
+.reveal .slides section .fragment.fade-right {
+ opacity: 0;
+ transform: translate(-20%, 0);
+ visibility: hidden; }
+ .reveal .slides section .fragment.fade-right.visible {
+ opacity: 1;
+ transform: translate(0, 0);
+ visibility: visible; }
+
+.reveal .slides section .fragment.fade-left {
+ opacity: 0;
+ transform: translate(20%, 0);
+ visibility: hidden; }
+ .reveal .slides section .fragment.fade-left.visible {
+ opacity: 1;
+ transform: translate(0, 0);
+ visibility: visible; }
+
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden; }
@@ -189,13 +216,10 @@ html:-moz-full-screen-ancestor {
height: 0;
background-color: transparent;
border: 12px solid transparent;
- -webkit-transform: scale(0.9999);
- -ms-transform: scale(0.9999);
- transform: scale(0.9999);
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease;
+ transform: scale(0.9999);
+ transition: all 0.2s ease;
-webkit-appearance: none;
- -webkit-tap-highlight-color: transparent; }
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.reveal .controls .enabled {
opacity: 0.7;
@@ -264,8 +288,7 @@ html:-moz-full-screen-ancestor {
height: 100%;
width: 0px;
background-color: #000;
- -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
@@ -294,8 +317,7 @@ html:-moz-full-screen-ancestor {
width: 100%;
height: 100%;
overflow: hidden;
- -ms-touch-action: none;
- touch-action: none; }
+ touch-action: none; }
.reveal .slides {
position: absolute;
@@ -309,10 +331,8 @@ html:-moz-full-screen-ancestor {
overflow: visible;
z-index: 1;
text-align: center;
- -webkit-perspective: 600px;
- perspective: 600px;
- -webkit-perspective-origin: 50% 40%;
- perspective-origin: 50% 40%; }
+ perspective: 600px;
+ perspective-origin: 50% 40%; }
.reveal .slides > section {
-ms-perspective: 600px; }
@@ -324,29 +344,22 @@ html:-moz-full-screen-ancestor {
width: 100%;
padding: 20px 0px;
z-index: 10;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ transform-style: preserve-3d;
+ transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
- -webkit-transition-duration: 400ms;
- transition-duration: 400ms; }
+ transition-duration: 400ms; }
.reveal[data-transition-speed="slow"] .slides section {
- -webkit-transition-duration: 1200ms;
- transition-duration: 1200ms; }
+ transition-duration: 1200ms; }
/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
- -webkit-transition-duration: 400ms;
- transition-duration: 400ms; }
+ transition-duration: 400ms; }
.reveal .slides section[data-transition-speed="slow"] {
- -webkit-transition-duration: 1200ms;
- transition-duration: 1200ms; }
+ transition-duration: 1200ms; }
.reveal .slides > section.stack {
padding-top: 0;
@@ -388,68 +401,50 @@ html:-moz-full-screen-ancestor {
* Aliased 'linear' for backwards compatibility
*********************************************/
.reveal.slide section {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden; }
+ backface-visibility: hidden; }
.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); }
+ transform: translate(-150%, 0); }
.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); }
+ transform: translate(150%, 0); }
.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%); }
+ transform: translate(0, -150%); }
.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%); }
+ transform: translate(0, 150%); }
.reveal.linear section {
- -webkit-backface-visibility: hidden;
- 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); }
+ 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); }
+ 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%); }
+ 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%); }
+ transform: translate(0, 150%); }
/*********************************************
* CONVEX TRANSITION
@@ -458,50 +453,42 @@ html:-moz-full-screen-ancestor {
.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); }
+ 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); }
+ 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); }
+ 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); }
+ 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); }
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
.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); }
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
.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); }
+ transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
.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); }
+ transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
/*********************************************
* CONCAVE TRANSITION
@@ -509,77 +496,62 @@ html:-moz-full-screen-ancestor {
.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); }
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
.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); }
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
.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); }
+ transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }
.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); }
+ transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
/*********************************************
* ZOOM TRANSITION
*********************************************/
.reveal .slides section[data-transition=zoom],
.reveal.zoom .slides section:not([data-transition]) {
- -webkit-transition-timing-function: ease;
- transition-timing-function: ease; }
+ transition-timing-function: ease; }
.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); }
+ transform: scale(16); }
.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); }
+ transform: scale(0.2); }
.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%); }
+ transform: translate(0, -150%); }
.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%); }
+ transform: translate(0, 150%); }
/*********************************************
* CUBE TRANSITION
*********************************************/
.reveal.cube .slides {
- -webkit-perspective: 1300px;
- perspective: 1300px; }
+ perspective: 1300px; }
.reveal.cube .slides section {
padding: 30px;
min-height: 700px;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
box-sizing: border-box; }
.reveal.center.cube .slides section {
@@ -595,8 +567,7 @@ html:-moz-full-screen-ancestor {
top: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
- -webkit-transform: translateZ(-20px);
- transform: translateZ(-20px); }
+ transform: translateZ(-20px); }
.reveal.cube .slides section:not(.stack):after {
content: '';
@@ -610,49 +581,34 @@ html:-moz-full-screen-ancestor {
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
- -webkit-transform: translateZ(-90px) rotateX(65deg);
- transform: translateZ(-90px) rotateX(65deg); }
+ transform: translateZ(-90px) rotateX(65deg); }
.reveal.cube .slides > section.stack {
padding: 0;
background: none; }
.reveal.cube .slides > section.past {
- -webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
- transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
+ transform-origin: 100% 0%;
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
.reveal.cube .slides > section.future {
- -webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
- transform: translate3d(100%, 0, 0) rotateY(90deg); }
+ transform-origin: 0% 0%;
+ transform: translate3d(100%, 0, 0) rotateY(90deg); }
.reveal.cube .slides > section > section.past {
- -webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
- transform-origin: 0% 100%;
- -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
- transform: translate3d(0, -100%, 0) rotateX(90deg); }
+ transform-origin: 0% 100%;
+ transform: translate3d(0, -100%, 0) rotateX(90deg); }
.reveal.cube .slides > section > section.future {
- -webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
- transform: translate3d(0, 100%, 0) rotateX(-90deg); }
+ transform-origin: 0% 0%;
+ transform: translate3d(0, 100%, 0) rotateX(-90deg); }
/*********************************************
* PAGE TRANSITION
*********************************************/
.reveal.page .slides {
- -webkit-perspective-origin: 0% 50%;
- perspective-origin: 0% 50%;
- -webkit-perspective: 3000px;
- perspective: 3000px; }
+ perspective-origin: 0% 50%;
+ perspective: 3000px; }
.reveal.page .slides section {
padding: 30px;
@@ -671,8 +627,7 @@ html:-moz-full-screen-ancestor {
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
- -webkit-transform: translateZ(-20px);
- transform: translateZ(-20px); }
+ transform: translateZ(-20px); }
.reveal.page .slides section:not(.stack):after {
content: '';
@@ -693,32 +648,20 @@ html:-moz-full-screen-ancestor {
background: none; }
.reveal.page .slides > section.past {
- -webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
- transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
+ transform-origin: 0% 0%;
+ transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
.reveal.page .slides > section.future {
- -webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0); }
+ transform-origin: 100% 0%;
+ transform: translate3d(0, 0, 0); }
.reveal.page .slides > section > section.past {
- -webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
- transform: translate3d(0, -40%, 0) rotateX(80deg); }
+ transform-origin: 0% 0%;
+ transform: translate3d(0, -40%, 0) rotateX(80deg); }
.reveal.page .slides > section > section.future {
- -webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
- transform-origin: 0% 100%;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0); }
+ transform-origin: 0% 100%;
+ transform: translate3d(0, 0, 0); }
/*********************************************
* FADE TRANSITION
@@ -726,27 +669,20 @@ html:-moz-full-screen-ancestor {
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- -webkit-transition: opacity 0.5s;
- transition: opacity 0.5s; }
+ transform: none;
+ transition: opacity 0.5s; }
.reveal.fade.overview .slides section,
.reveal.fade.overview .slides > section > section {
- -webkit-transition: none;
- transition: none; }
+ transition: none; }
/*********************************************
* NO TRANSITION
*********************************************/
.reveal .slides section[data-transition=none],
.reveal.none .slides section:not([data-transition]) {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- -webkit-transition: none;
- transition: none; }
+ transform: none;
+ transition: none; }
/*********************************************
* PAUSED MODE
@@ -761,8 +697,7 @@ html:-moz-full-screen-ancestor {
visibility: hidden;
opacity: 0;
z-index: 100;
- -webkit-transition: all 1s ease;
- transition: all 1s ease; }
+ transition: all 1s ease; }
.reveal.paused .pause-overlay {
visibility: visible;
@@ -796,17 +731,14 @@ html:-moz-full-screen-ancestor {
top: 0;
left: -50%;
margin: 70px 0;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none; }
+ transform: none; }
.no-transforms .reveal .slides section section {
left: 0; }
.reveal .no-transition,
.reveal .no-transition * {
- -webkit-transition: none !important;
- transition: none !important; }
+ transition: none !important; }
/*********************************************
* PER-SLIDE BACKGROUNDS
@@ -817,8 +749,7 @@ html:-moz-full-screen-ancestor {
height: 100%;
top: 0;
left: 0;
- -webkit-perspective: 600px;
- perspective: 600px; }
+ perspective: 600px; }
.reveal .slide-background {
display: none;
@@ -827,12 +758,11 @@ html:-moz-full-screen-ancestor {
height: 100%;
opacity: 0;
visibility: hidden;
- background-color: transparent;
+ background-color: rgba(0, 0, 0, 0);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
- -webkit-transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
.reveal .slide-background.stack {
display: block; }
@@ -858,145 +788,114 @@ html:-moz-full-screen-ancestor {
/* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=none] {
- -webkit-transition: none;
- transition: none; }
+ transition: none; }
/* Slide */
.reveal[data-background-transition=slide] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden; }
+ backface-visibility: hidden; }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=slide] {
- -webkit-transform: translate(-100%, 0);
- -ms-transform: translate(-100%, 0);
- transform: translate(-100%, 0); }
+ transform: translate(-100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=slide] {
- -webkit-transform: translate(100%, 0);
- -ms-transform: translate(100%, 0);
- transform: translate(100%, 0); }
+ transform: translate(100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {
- -webkit-transform: translate(0, -100%);
- -ms-transform: translate(0, -100%);
- transform: translate(0, -100%); }
+ transform: translate(0, -100%); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {
- -webkit-transform: translate(0, 100%);
- -ms-transform: translate(0, 100%);
- transform: translate(0, 100%); }
+ transform: translate(0, 100%); }
/* Convex */
.reveal[data-background-transition=convex] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0;
- -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=convex] {
opacity: 0;
- -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] {
opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }
+ transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] {
opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }
+ transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }
/* Concave */
.reveal[data-background-transition=concave] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0;
- -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0;
- -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] {
opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }
+ transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] {
opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }
+ transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }
/* Zoom */
.reveal[data-background-transition=zoom] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=zoom] {
- -webkit-transition-timing-function: ease;
- transition-timing-function: ease; }
+ transition-timing-function: ease; }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- -webkit-transform: scale(16);
- -ms-transform: scale(16);
- transform: scale(16); }
+ transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- -webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
- transform: scale(0.2); }
+ transform: scale(0.2); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- -webkit-transform: scale(16);
- -ms-transform: scale(16);
- transform: scale(16); }
+ transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- -webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
- transform: scale(0.2); }
+ transform: scale(0.2); }
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] > .backgrounds .slide-background {
- -webkit-transition-duration: 400ms;
- transition-duration: 400ms; }
+ transition-duration: 400ms; }
.reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
- -webkit-transition-duration: 1200ms;
- transition-duration: 1200ms; }
+ transition-duration: 1200ms; }
/*********************************************
* OVERVIEW
*********************************************/
.reveal.overview {
- -webkit-perspective-origin: 50% 50%;
- perspective-origin: 50% 50%;
- -webkit-perspective: 700px;
- perspective: 700px; }
+ perspective-origin: 50% 50%;
+ perspective: 700px; }
.reveal.overview .slides section {
height: 700px;
opacity: 1 !important;
@@ -1010,8 +909,7 @@ html:-moz-full-screen-ancestor {
outline-offset: 10px; }
.reveal.overview .slides section .fragment {
opacity: 1;
- -webkit-transition: none;
- transition: none; }
+ transition: none; }
.reveal.overview .slides section:after,
.reveal.overview .slides section:before {
display: none !important; }
@@ -1022,8 +920,7 @@ html:-moz-full-screen-ancestor {
outline: none;
overflow: visible; }
.reveal.overview .backgrounds {
- -webkit-perspective: inherit;
- perspective: inherit; }
+ perspective: inherit; }
.reveal.overview .backgrounds .slide-background {
opacity: 1;
visibility: visible;
@@ -1032,17 +929,14 @@ html:-moz-full-screen-ancestor {
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
- -webkit-transition: none;
- transition: none; }
+ transition: none; }
.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
- -webkit-transition: none;
- transition: none; }
+ transition: none; }
.reveal.overview-animated .slides {
- -webkit-transition: -webkit-transform 0.4s ease;
- transition: transform 0.4s ease; }
+ transition: transform 0.4s ease; }
/*********************************************
* RTL SUPPORT
@@ -1072,17 +966,14 @@ html:-moz-full-screen-ancestor {
* PARALLAX BACKGROUND
*********************************************/
.reveal.has-parallax-background .backgrounds {
- -webkit-transition: all 0.8s ease;
- transition: all 0.8s ease; }
+ transition: all 0.8s ease; }
/* Global transition speed settings */
.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
- -webkit-transition-duration: 400ms;
- transition-duration: 400ms; }
+ transition-duration: 400ms; }
.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
- -webkit-transition-duration: 1200ms;
- transition-duration: 1200ms; }
+ transition-duration: 1200ms; }
/*********************************************
* LINK PREVIEW OVERLAY
@@ -1097,8 +988,7 @@ html:-moz-full-screen-ancestor {
background: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: hidden;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease; }
+ transition: all 0.3s ease; }
.reveal .overlay.visible {
opacity: 1;
@@ -1116,8 +1006,7 @@ html:-moz-full-screen-ancestor {
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
visibility: visible;
opacity: 0.6;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease; }
+ transition: all 0.3s ease; }
.reveal .overlay header {
position: absolute;
@@ -1169,8 +1058,7 @@ html:-moz-full-screen-ancestor {
border: 0;
opacity: 0;
visibility: hidden;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease; }
+ transition: all 0.3s ease; }
.reveal .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1;
@@ -1179,9 +1067,7 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-preview.loaded .spinner {
opacity: 0;
visibility: hidden;
- -webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
- transform: scale(0.2); }
+ transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport {
overflow: auto;
@@ -1222,8 +1108,7 @@ html:-moz-full-screen-ancestor {
bottom: 20px;
z-index: 30;
cursor: pointer;
- -webkit-transition: all 400ms ease;
- transition: all 400ms ease; }
+ transition: all 400ms ease; }
.reveal.overview .playback {
opacity: 0;
@@ -1237,10 +1122,8 @@ html:-moz-full-screen-ancestor {
line-height: 1.2;
overflow: hidden;
vertical-align: top;
- -webkit-perspective: 400px;
- perspective: 400px;
- -webkit-perspective-origin: 50% 50%;
- perspective-origin: 50% 50%; }
+ perspective: 400px;
+ perspective-origin: 50% 50%; }
.reveal .roll:hover {
background: none;
@@ -1251,20 +1134,14 @@ html:-moz-full-screen-ancestor {
position: relative;
padding: 0 2px;
pointer-events: none;
- -webkit-transition: all 400ms ease;
- transition: all 400ms ease;
- -webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden; }
+ transition: all 400ms ease;
+ transform-origin: 50% 0%;
+ transform-style: preserve-3d;
+ backface-visibility: hidden; }
.reveal .roll:hover span {
background: rgba(0, 0, 0, 0.5);
- -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg);
- transform: translate3d(0px, 0px, -45px) rotateX(90deg); }
+ transform: translate3d(0px, 0px, -45px) rotateX(90deg); }
.reveal .roll span:after {
content: attr(data-title);
@@ -1273,13 +1150,9 @@ html:-moz-full-screen-ancestor {
left: 0;
top: 0;
padding: 0 2px;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
- transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
+ backface-visibility: hidden;
+ transform-origin: 50% 0%;
+ transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
/*********************************************
* SPEAKER NOTES
@@ -1312,20 +1185,17 @@ html:-moz-full-screen-ancestor {
@media screen and (max-width: 1024px) {
.reveal .speaker-notes {
font-size: 14px; } }
-
@media screen and (max-width: 600px) {
.reveal .speaker-notes {
width: 90%;
left: 5%; } }
-
/*********************************************
* ZOOM PLUGIN
*********************************************/
.zoomed .reveal *,
.zoomed .reveal *:before,
.zoomed .reveal *:after {
- -webkit-backface-visibility: visible !important;
- backface-visibility: visible !important; }
+ backface-visibility: visible !important; }
.zoomed .reveal .progress,
.zoomed .reveal .controls {
--
cgit v1.2.3
From 2909440fde651af3a2477d0b569d3b43ba64ca6e Mon Sep 17 00:00:00 2001
From: Leonardo Kewitz
Date: Sun, 22 Nov 2015 18:52:42 -0200
Subject: Clean version of the new transitions.
---
css/reveal.css | 450 +++++++++++++++++++++++++++++++++++++-------------------
css/reveal.scss | 16 --
2 files changed, 300 insertions(+), 166 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 88858f6..8979008 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -59,7 +59,8 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment {
opacity: 0;
visibility: hidden;
- transition: all .2s ease; }
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease; }
.reveal .slides section .fragment.visible {
opacity: 1;
visibility: visible; }
@@ -68,18 +69,26 @@ html:-moz-full-screen-ancestor {
opacity: 1;
visibility: visible; }
.reveal .slides section .fragment.grow.visible {
- transform: scale(1.3); }
+ -webkit-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ transform: scale(1.3); }
.reveal .slides section .fragment.shrink {
opacity: 1;
visibility: visible; }
.reveal .slides section .fragment.shrink.visible {
- transform: scale(0.7); }
+ -webkit-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7); }
.reveal .slides section .fragment.zoom-in {
- transform: scale(0.1); }
+ -webkit-transform: scale(0.1);
+ -ms-transform: scale(0.1);
+ transform: scale(0.1); }
.reveal .slides section .fragment.zoom-in.visible {
- transform: none; }
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none; }
.reveal .slides section .fragment.fade-out {
opacity: 1;
@@ -102,40 +111,24 @@ html:-moz-full-screen-ancestor {
text-decoration: line-through; }
.reveal .slides section .fragment.fade-up {
- opacity: 0;
- transform: translate(0, 20%);
- visibility: hidden; }
+ transform: translate(0, 20%); }
.reveal .slides section .fragment.fade-up.visible {
- opacity: 1;
- transform: translate(0, 0);
- visibility: visible; }
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-down {
- opacity: 0;
- transform: translate(0, -20%);
- visibility: hidden; }
+ transform: translate(0, -20%); }
.reveal .slides section .fragment.fade-down.visible {
- opacity: 1;
- transform: translate(0, 0);
- visibility: visible; }
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-right {
- opacity: 0;
- transform: translate(-20%, 0);
- visibility: hidden; }
+ transform: translate(-20%, 0); }
.reveal .slides section .fragment.fade-right.visible {
- opacity: 1;
- transform: translate(0, 0);
- visibility: visible; }
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-left {
- opacity: 0;
- transform: translate(20%, 0);
- visibility: hidden; }
+ transform: translate(20%, 0); }
.reveal .slides section .fragment.fade-left.visible {
- opacity: 1;
- transform: translate(0, 0);
- visibility: visible; }
+ transform: translate(0, 0); }
.reveal .slides section .fragment.current-visible {
opacity: 0;
@@ -216,10 +209,13 @@ html:-moz-full-screen-ancestor {
height: 0;
background-color: transparent;
border: 12px solid transparent;
- transform: scale(0.9999);
- transition: all 0.2s ease;
+ -webkit-transform: scale(0.9999);
+ -ms-transform: scale(0.9999);
+ transform: scale(0.9999);
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease;
-webkit-appearance: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+ -webkit-tap-highlight-color: transparent; }
.reveal .controls .enabled {
opacity: 0.7;
@@ -288,7 +284,8 @@ html:-moz-full-screen-ancestor {
height: 100%;
width: 0px;
background-color: #000;
- transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
@@ -317,7 +314,8 @@ html:-moz-full-screen-ancestor {
width: 100%;
height: 100%;
overflow: hidden;
- touch-action: none; }
+ -ms-touch-action: none;
+ touch-action: none; }
.reveal .slides {
position: absolute;
@@ -331,8 +329,10 @@ html:-moz-full-screen-ancestor {
overflow: visible;
z-index: 1;
text-align: center;
- perspective: 600px;
- perspective-origin: 50% 40%; }
+ -webkit-perspective: 600px;
+ perspective: 600px;
+ -webkit-perspective-origin: 50% 40%;
+ perspective-origin: 50% 40%; }
.reveal .slides > section {
-ms-perspective: 600px; }
@@ -344,22 +344,29 @@ html:-moz-full-screen-ancestor {
width: 100%;
padding: 20px 0px;
z-index: 10;
- transform-style: preserve-3d;
- transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
- transition-duration: 400ms; }
+ -webkit-transition-duration: 400ms;
+ transition-duration: 400ms; }
.reveal[data-transition-speed="slow"] .slides section {
- transition-duration: 1200ms; }
+ -webkit-transition-duration: 1200ms;
+ transition-duration: 1200ms; }
/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
- transition-duration: 400ms; }
+ -webkit-transition-duration: 400ms;
+ transition-duration: 400ms; }
.reveal .slides section[data-transition-speed="slow"] {
- transition-duration: 1200ms; }
+ -webkit-transition-duration: 1200ms;
+ transition-duration: 1200ms; }
.reveal .slides > section.stack {
padding-top: 0;
@@ -401,50 +408,68 @@ html:-moz-full-screen-ancestor {
* Aliased 'linear' for backwards compatibility
*********************************************/
.reveal.slide section {
- backface-visibility: hidden; }
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
.reveal .slides > section[data-transition=slide].past,
.reveal .slides > section[data-transition~=slide-out].past,
.reveal.slide .slides > section:not([data-transition]).past {
- transform: translate(-150%, 0); }
+ -webkit-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ transform: translate(-150%, 0); }
.reveal .slides > section[data-transition=slide].future,
.reveal .slides > section[data-transition~=slide-in].future,
.reveal.slide .slides > section:not([data-transition]).future {
- transform: translate(150%, 0); }
+ -webkit-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ transform: translate(150%, 0); }
.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 {
- transform: translate(0, -150%); }
+ -webkit-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ transform: translate(0, -150%); }
.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 {
- transform: translate(0, 150%); }
+ -webkit-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ transform: translate(0, 150%); }
.reveal.linear section {
- backface-visibility: hidden; }
+ -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 {
- transform: translate(-150%, 0); }
+ -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 {
- transform: translate(150%, 0); }
+ -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 {
- transform: translate(0, -150%); }
+ -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 {
- transform: translate(0, 150%); }
+ -webkit-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ transform: translate(0, 150%); }
/*********************************************
* CONVEX TRANSITION
@@ -453,42 +478,50 @@ html:-moz-full-screen-ancestor {
.reveal .slides > section[data-transition=default].past,
.reveal .slides > section[data-transition~=default-out].past,
.reveal.default .slides > section:not([data-transition]).past {
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+ -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 {
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+ -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 {
- transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
+ -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 {
- transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
+ -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 {
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+ -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=convex].future,
.reveal .slides > section[data-transition~=convex-in].future,
.reveal.convex .slides > section:not([data-transition]).future {
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+ -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=convex].past,
.reveal .slides > section > section[data-transition~=convex-out].past,
.reveal.convex .slides > section > section:not([data-transition]).past {
- transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
+ -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=convex].future,
.reveal .slides > section > section[data-transition~=convex-in].future,
.reveal.convex .slides > section > section:not([data-transition]).future {
- transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
+ -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
@@ -496,62 +529,77 @@ html:-moz-full-screen-ancestor {
.reveal .slides > section[data-transition=concave].past,
.reveal .slides > section[data-transition~=concave-out].past,
.reveal.concave .slides > section:not([data-transition]).past {
- transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
+ -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 .slides > section[data-transition~=concave-in].future,
.reveal.concave .slides > section:not([data-transition]).future {
- transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
+ -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 .slides > section > section[data-transition~=concave-out].past,
.reveal.concave .slides > section > section:not([data-transition]).past {
- transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }
+ -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 .slides > section > section[data-transition~=concave-in].future,
.reveal.concave .slides > section > section:not([data-transition]).future {
- transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
+ -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
/*********************************************
* ZOOM TRANSITION
*********************************************/
.reveal .slides section[data-transition=zoom],
.reveal.zoom .slides section:not([data-transition]) {
- transition-timing-function: ease; }
+ -webkit-transition-timing-function: ease;
+ transition-timing-function: ease; }
.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;
- transform: scale(16); }
+ -webkit-transform: scale(16);
+ -ms-transform: scale(16);
+ transform: scale(16); }
.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;
- transform: scale(0.2); }
+ -webkit-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ transform: scale(0.2); }
.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 {
- transform: translate(0, -150%); }
+ -webkit-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ transform: translate(0, -150%); }
.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 {
- transform: translate(0, 150%); }
+ -webkit-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ transform: translate(0, 150%); }
/*********************************************
* CUBE TRANSITION
*********************************************/
.reveal.cube .slides {
- perspective: 1300px; }
+ -webkit-perspective: 1300px;
+ perspective: 1300px; }
.reveal.cube .slides section {
padding: 30px;
min-height: 700px;
- backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
box-sizing: border-box; }
.reveal.center.cube .slides section {
@@ -567,7 +615,8 @@ html:-moz-full-screen-ancestor {
top: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
- transform: translateZ(-20px); }
+ -webkit-transform: translateZ(-20px);
+ transform: translateZ(-20px); }
.reveal.cube .slides section:not(.stack):after {
content: '';
@@ -581,34 +630,49 @@ html:-moz-full-screen-ancestor {
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
- transform: translateZ(-90px) rotateX(65deg); }
+ -webkit-transform: translateZ(-90px) rotateX(65deg);
+ transform: translateZ(-90px) rotateX(65deg); }
.reveal.cube .slides > section.stack {
padding: 0;
background: none; }
.reveal.cube .slides > section.past {
- transform-origin: 100% 0%;
- transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
+ -webkit-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
.reveal.cube .slides > section.future {
- transform-origin: 0% 0%;
- transform: translate3d(100%, 0, 0) rotateY(90deg); }
+ -webkit-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ transform: translate3d(100%, 0, 0) rotateY(90deg); }
.reveal.cube .slides > section > section.past {
- transform-origin: 0% 100%;
- transform: translate3d(0, -100%, 0) rotateX(90deg); }
+ -webkit-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ transform: translate3d(0, -100%, 0) rotateX(90deg); }
.reveal.cube .slides > section > section.future {
- transform-origin: 0% 0%;
- transform: translate3d(0, 100%, 0) rotateX(-90deg); }
+ -webkit-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ transform: translate3d(0, 100%, 0) rotateX(-90deg); }
/*********************************************
* PAGE TRANSITION
*********************************************/
.reveal.page .slides {
- perspective-origin: 0% 50%;
- perspective: 3000px; }
+ -webkit-perspective-origin: 0% 50%;
+ perspective-origin: 0% 50%;
+ -webkit-perspective: 3000px;
+ perspective: 3000px; }
.reveal.page .slides section {
padding: 30px;
@@ -627,7 +691,8 @@ html:-moz-full-screen-ancestor {
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
- transform: translateZ(-20px); }
+ -webkit-transform: translateZ(-20px);
+ transform: translateZ(-20px); }
.reveal.page .slides section:not(.stack):after {
content: '';
@@ -648,20 +713,32 @@ html:-moz-full-screen-ancestor {
background: none; }
.reveal.page .slides > section.past {
- transform-origin: 0% 0%;
- transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
+ -webkit-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
.reveal.page .slides > section.future {
- transform-origin: 100% 0%;
- transform: translate3d(0, 0, 0); }
+ -webkit-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0); }
.reveal.page .slides > section > section.past {
- transform-origin: 0% 0%;
- transform: translate3d(0, -40%, 0) rotateX(80deg); }
+ -webkit-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ transform: translate3d(0, -40%, 0) rotateX(80deg); }
.reveal.page .slides > section > section.future {
- transform-origin: 0% 100%;
- transform: translate3d(0, 0, 0); }
+ -webkit-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0); }
/*********************************************
* FADE TRANSITION
@@ -669,20 +746,27 @@ html:-moz-full-screen-ancestor {
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
- transform: none;
- transition: opacity 0.5s; }
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none;
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s; }
.reveal.fade.overview .slides section,
.reveal.fade.overview .slides > section > section {
- transition: none; }
+ -webkit-transition: none;
+ transition: none; }
/*********************************************
* NO TRANSITION
*********************************************/
.reveal .slides section[data-transition=none],
.reveal.none .slides section:not([data-transition]) {
- transform: none;
- transition: none; }
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none;
+ -webkit-transition: none;
+ transition: none; }
/*********************************************
* PAUSED MODE
@@ -697,7 +781,8 @@ html:-moz-full-screen-ancestor {
visibility: hidden;
opacity: 0;
z-index: 100;
- transition: all 1s ease; }
+ -webkit-transition: all 1s ease;
+ transition: all 1s ease; }
.reveal.paused .pause-overlay {
visibility: visible;
@@ -731,14 +816,17 @@ html:-moz-full-screen-ancestor {
top: 0;
left: -50%;
margin: 70px 0;
- transform: none; }
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none; }
.no-transforms .reveal .slides section section {
left: 0; }
.reveal .no-transition,
.reveal .no-transition * {
- transition: none !important; }
+ -webkit-transition: none !important;
+ transition: none !important; }
/*********************************************
* PER-SLIDE BACKGROUNDS
@@ -749,7 +837,8 @@ html:-moz-full-screen-ancestor {
height: 100%;
top: 0;
left: 0;
- perspective: 600px; }
+ -webkit-perspective: 600px;
+ perspective: 600px; }
.reveal .slide-background {
display: none;
@@ -758,11 +847,12 @@ html:-moz-full-screen-ancestor {
height: 100%;
opacity: 0;
visibility: hidden;
- background-color: rgba(0, 0, 0, 0);
+ background-color: transparent;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
- transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+ -webkit-transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
.reveal .slide-background.stack {
display: block; }
@@ -788,114 +878,145 @@ html:-moz-full-screen-ancestor {
/* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=none] {
- transition: none; }
+ -webkit-transition: none;
+ transition: none; }
/* Slide */
.reveal[data-background-transition=slide] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
- backface-visibility: hidden; }
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=slide] {
- transform: translate(-100%, 0); }
+ -webkit-transform: translate(-100%, 0);
+ -ms-transform: translate(-100%, 0);
+ transform: translate(-100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=slide] {
- transform: translate(100%, 0); }
+ -webkit-transform: translate(100%, 0);
+ -ms-transform: translate(100%, 0);
+ transform: translate(100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {
- transform: translate(0, -100%); }
+ -webkit-transform: translate(0, -100%);
+ -ms-transform: translate(0, -100%);
+ transform: translate(0, -100%); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {
- transform: translate(0, 100%); }
+ -webkit-transform: translate(0, 100%);
+ -ms-transform: translate(0, 100%);
+ transform: translate(0, 100%); }
/* Convex */
.reveal[data-background-transition=convex] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0;
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=convex] {
opacity: 0;
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] {
opacity: 0;
- transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }
.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] {
opacity: 0;
- transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }
/* Concave */
.reveal[data-background-transition=concave] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0;
- transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0;
- transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] {
opacity: 0;
- transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }
.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] {
opacity: 0;
- transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }
/* Zoom */
.reveal[data-background-transition=zoom] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=zoom] {
- transition-timing-function: ease; }
+ -webkit-transition-timing-function: ease;
+ transition-timing-function: ease; }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- transform: scale(16); }
+ -webkit-transform: scale(16);
+ -ms-transform: scale(16);
+ transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- transform: scale(0.2); }
+ -webkit-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ transform: scale(0.2); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- transform: scale(16); }
+ -webkit-transform: scale(16);
+ -ms-transform: scale(16);
+ transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
- transform: scale(0.2); }
+ -webkit-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ transform: scale(0.2); }
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] > .backgrounds .slide-background {
- transition-duration: 400ms; }
+ -webkit-transition-duration: 400ms;
+ transition-duration: 400ms; }
.reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
- transition-duration: 1200ms; }
+ -webkit-transition-duration: 1200ms;
+ transition-duration: 1200ms; }
/*********************************************
* OVERVIEW
*********************************************/
.reveal.overview {
- perspective-origin: 50% 50%;
- perspective: 700px; }
+ -webkit-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+ -webkit-perspective: 700px;
+ perspective: 700px; }
.reveal.overview .slides section {
height: 700px;
opacity: 1 !important;
@@ -909,7 +1030,8 @@ html:-moz-full-screen-ancestor {
outline-offset: 10px; }
.reveal.overview .slides section .fragment {
opacity: 1;
- transition: none; }
+ -webkit-transition: none;
+ transition: none; }
.reveal.overview .slides section:after,
.reveal.overview .slides section:before {
display: none !important; }
@@ -920,7 +1042,8 @@ html:-moz-full-screen-ancestor {
outline: none;
overflow: visible; }
.reveal.overview .backgrounds {
- perspective: inherit; }
+ -webkit-perspective: inherit;
+ perspective: inherit; }
.reveal.overview .backgrounds .slide-background {
opacity: 1;
visibility: visible;
@@ -929,14 +1052,17 @@ html:-moz-full-screen-ancestor {
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
- transition: none; }
+ -webkit-transition: none;
+ transition: none; }
.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
- transition: none; }
+ -webkit-transition: none;
+ transition: none; }
.reveal.overview-animated .slides {
- transition: transform 0.4s ease; }
+ -webkit-transition: -webkit-transform 0.4s ease;
+ transition: transform 0.4s ease; }
/*********************************************
* RTL SUPPORT
@@ -966,14 +1092,17 @@ html:-moz-full-screen-ancestor {
* PARALLAX BACKGROUND
*********************************************/
.reveal.has-parallax-background .backgrounds {
- transition: all 0.8s ease; }
+ -webkit-transition: all 0.8s ease;
+ transition: all 0.8s ease; }
/* Global transition speed settings */
.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
- transition-duration: 400ms; }
+ -webkit-transition-duration: 400ms;
+ transition-duration: 400ms; }
.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
- transition-duration: 1200ms; }
+ -webkit-transition-duration: 1200ms;
+ transition-duration: 1200ms; }
/*********************************************
* LINK PREVIEW OVERLAY
@@ -988,7 +1117,8 @@ html:-moz-full-screen-ancestor {
background: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: hidden;
- transition: all 0.3s ease; }
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease; }
.reveal .overlay.visible {
opacity: 1;
@@ -1006,7 +1136,8 @@ html:-moz-full-screen-ancestor {
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
visibility: visible;
opacity: 0.6;
- transition: all 0.3s ease; }
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease; }
.reveal .overlay header {
position: absolute;
@@ -1058,7 +1189,8 @@ html:-moz-full-screen-ancestor {
border: 0;
opacity: 0;
visibility: hidden;
- transition: all 0.3s ease; }
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease; }
.reveal .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1;
@@ -1067,7 +1199,9 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-preview.loaded .spinner {
opacity: 0;
visibility: hidden;
- transform: scale(0.2); }
+ -webkit-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport {
overflow: auto;
@@ -1108,7 +1242,8 @@ html:-moz-full-screen-ancestor {
bottom: 20px;
z-index: 30;
cursor: pointer;
- transition: all 400ms ease; }
+ -webkit-transition: all 400ms ease;
+ transition: all 400ms ease; }
.reveal.overview .playback {
opacity: 0;
@@ -1122,8 +1257,10 @@ html:-moz-full-screen-ancestor {
line-height: 1.2;
overflow: hidden;
vertical-align: top;
- perspective: 400px;
- perspective-origin: 50% 50%; }
+ -webkit-perspective: 400px;
+ perspective: 400px;
+ -webkit-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%; }
.reveal .roll:hover {
background: none;
@@ -1134,14 +1271,20 @@ html:-moz-full-screen-ancestor {
position: relative;
padding: 0 2px;
pointer-events: none;
- transition: all 400ms ease;
- transform-origin: 50% 0%;
- transform-style: preserve-3d;
- backface-visibility: hidden; }
+ -webkit-transition: all 400ms ease;
+ transition: all 400ms ease;
+ -webkit-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
.reveal .roll:hover span {
background: rgba(0, 0, 0, 0.5);
- transform: translate3d(0px, 0px, -45px) rotateX(90deg); }
+ -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg);
+ transform: translate3d(0px, 0px, -45px) rotateX(90deg); }
.reveal .roll span:after {
content: attr(data-title);
@@ -1150,9 +1293,13 @@ html:-moz-full-screen-ancestor {
left: 0;
top: 0;
padding: 0 2px;
- backface-visibility: hidden;
- transform-origin: 50% 0%;
- transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
+ transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
/*********************************************
* SPEAKER NOTES
@@ -1185,17 +1332,20 @@ html:-moz-full-screen-ancestor {
@media screen and (max-width: 1024px) {
.reveal .speaker-notes {
font-size: 14px; } }
+
@media screen and (max-width: 600px) {
.reveal .speaker-notes {
width: 90%;
left: 5%; } }
+
/*********************************************
* ZOOM PLUGIN
*********************************************/
.zoomed .reveal *,
.zoomed .reveal *:before,
.zoomed .reveal *:after {
- backface-visibility: visible !important; }
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important; }
.zoomed .reveal .progress,
.zoomed .reveal .controls {
diff --git a/css/reveal.scss b/css/reveal.scss
index 1cea73e..7525b2a 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -138,50 +138,34 @@ html:-moz-full-screen-ancestor {
}
.reveal .slides section .fragment.fade-up {
- opacity: 0;
transform: translate(0, 20%);
- visibility: hidden;
&.visible {
- opacity: 1;
transform: translate(0, 0);
- visibility: visible;
}
}
.reveal .slides section .fragment.fade-down {
- opacity: 0;
transform: translate(0, -20%);
- visibility: hidden;
&.visible {
- opacity: 1;
transform: translate(0, 0);
- visibility: visible;
}
}
.reveal .slides section .fragment.fade-right {
- opacity: 0;
transform: translate(-20%, 0);
- visibility: hidden;
&.visible {
- opacity: 1;
transform: translate(0, 0);
- visibility: visible;
}
}
.reveal .slides section .fragment.fade-left {
- opacity: 0;
transform: translate(20%, 0);
- visibility: hidden;
&.visible {
- opacity: 1;
transform: translate(0, 0);
- visibility: visible;
}
}
--
cgit v1.2.3
From 18b644cf8f1ae04b16f962655b99cb786f08ef2c Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 4 Jan 2016 09:29:55 +0100
Subject: :copyright: :copyright: :copyright: :copyright: :copyright: closes
#1469
---
Gruntfile.js | 2 +-
LICENSE | 2 +-
README.md | 2 +-
css/reveal.css | 2 +-
css/reveal.scss | 2 +-
css/theme/black.css | 2 +-
css/theme/source/black.scss | 2 +-
css/theme/source/white.scss | 2 +-
css/theme/white.css | 2 +-
js/reveal.js | 2 +-
10 files changed, 10 insertions(+), 10 deletions(-)
(limited to 'css/reveal.css')
diff --git a/Gruntfile.js b/Gruntfile.js
index f6c71e2..675adff 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -13,7 +13,7 @@ module.exports = function(grunt) {
' * http://lab.hakim.se/reveal-js\n' +
' * MIT licensed\n' +
' *\n' +
- ' * Copyright (C) 2015 Hakim El Hattab, http://hakim.se\n' +
+ ' * Copyright (C) 2016 Hakim El Hattab, http://hakim.se\n' +
' */'
},
diff --git a/LICENSE b/LICENSE
index 0962307..faadd00 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+Copyright (C) 2016 Hakim El Hattab, http://hakim.se
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 52dcd22..e7857cc 100644
--- a/README.md
+++ b/README.md
@@ -1016,4 +1016,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
MIT licensed
-Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+Copyright (C) 2016 Hakim El Hattab, http://hakim.se
diff --git a/css/reveal.css b/css/reveal.css
index 2f115e5..9739291 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* RESET STYLES
diff --git a/css/reveal.scss b/css/reveal.scss
index d932269..eb600ac 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
diff --git a/css/theme/black.css b/css/theme/black.css
index 54d44c3..deccc46 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -1,7 +1,7 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
index 73dfecb..5f7f601 100644
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@@ -1,7 +1,7 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss
index 4c5b647..6758ce0 100644
--- a/css/theme/source/white.scss
+++ b/css/theme/source/white.scss
@@ -1,7 +1,7 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
diff --git a/css/theme/white.css b/css/theme/white.css
index a05cd85..14e1703 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -1,7 +1,7 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
diff --git a/js/reveal.js b/js/reveal.js
index 164996d..2c92954 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
(function( root, factory ) {
if( typeof define === 'function' && define.amd ) {
--
cgit v1.2.3
From 52aec94800dd092a81d3de0439f95a32cba8a8cf Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 8 Jan 2016 10:58:13 +0100
Subject: center help overlay with flexbox
---
css/reveal.css | 44 ++++++++++++++++++++++++++++++++------------
css/reveal.scss | 9 +++++----
2 files changed, 37 insertions(+), 16 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 4530584..fc16f5b 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -111,24 +111,40 @@ html:-moz-full-screen-ancestor {
text-decoration: line-through; }
.reveal .slides section .fragment.fade-up {
- transform: translate(0, 20%); }
+ -webkit-transform: translate(0, 20%);
+ -ms-transform: translate(0, 20%);
+ transform: translate(0, 20%); }
.reveal .slides section .fragment.fade-up.visible {
- transform: translate(0, 0); }
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-down {
- transform: translate(0, -20%); }
+ -webkit-transform: translate(0, -20%);
+ -ms-transform: translate(0, -20%);
+ transform: translate(0, -20%); }
.reveal .slides section .fragment.fade-down.visible {
- transform: translate(0, 0); }
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-right {
- transform: translate(-20%, 0); }
+ -webkit-transform: translate(-20%, 0);
+ -ms-transform: translate(-20%, 0);
+ transform: translate(-20%, 0); }
.reveal .slides section .fragment.fade-right.visible {
- transform: translate(0, 0); }
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
.reveal .slides section .fragment.fade-left {
- transform: translate(20%, 0); }
+ -webkit-transform: translate(20%, 0);
+ -ms-transform: translate(20%, 0);
+ transform: translate(20%, 0); }
.reveal .slides section .fragment.fade-left.visible {
- transform: translate(0, 0); }
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
.reveal .slides section .fragment.current-visible {
opacity: 0;
@@ -1176,6 +1192,10 @@ html:-moz-full-screen-ancestor {
.reveal .overlay .viewport {
position: absolute;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
top: 40px;
right: 0;
bottom: 0;
@@ -1209,8 +1229,8 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
- margin: 0 auto;
- padding: 60px;
+ margin: auto;
+ padding: 20px 20px 80px 20px;
text-align: center;
letter-spacing: normal; }
@@ -1220,12 +1240,12 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff;
border-collapse: collapse;
- font-size: 14px; }
+ font-size: 16px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px;
- padding: 10px;
+ padding: 14px;
border: 1px solid #fff;
vertical-align: middle; }
diff --git a/css/reveal.scss b/css/reveal.scss
index 5a66671..da1fb22 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1204,6 +1204,7 @@ html:-moz-full-screen-ancestor {
.reveal .overlay .viewport {
position: absolute;
+ display: flex;
top: 40px;
right: 0;
bottom: 0;
@@ -1240,8 +1241,8 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
- margin: 0 auto;
- padding: 60px;
+ margin: auto;
+ padding: 20px 20px 80px 20px;
text-align: center;
letter-spacing: normal;
}
@@ -1253,13 +1254,13 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff;
border-collapse: collapse;
- font-size: 14px;
+ font-size: 16px;
}
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px;
- padding: 10px;
+ padding: 14px;
border: 1px solid #fff;
vertical-align: middle;
}
--
cgit v1.2.3
From 8ec529d7675392f7732612cd0e6566f2b0c4fac1 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 8 Jan 2016 13:59:12 +0100
Subject: rebuild css
---
css/reveal.css | 52 ++-----------------------------------------------
css/theme/beige.css | 12 ++++++------
css/theme/black.css | 12 ++++++------
css/theme/blood.css | 12 ++++++------
css/theme/league.css | 12 ++++++------
css/theme/moon.css | 12 ++++++------
css/theme/night.css | 12 ++++++------
css/theme/serif.css | 12 ++++++------
css/theme/simple.css | 12 ++++++------
css/theme/sky.css | 12 ++++++------
css/theme/solarized.css | 12 ++++++------
css/theme/white.css | 12 ++++++------
12 files changed, 68 insertions(+), 116 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index fc16f5b..3a31fa4 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -59,8 +59,8 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment {
opacity: 0;
visibility: hidden;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease; }
+ -webkit-transition: all .2s ease;
+ transition: all .2s ease; }
.reveal .slides section .fragment.visible {
opacity: 1;
visibility: visible; }
@@ -70,7 +70,6 @@ html:-moz-full-screen-ancestor {
visibility: visible; }
.reveal .slides section .fragment.grow.visible {
-webkit-transform: scale(1.3);
- -ms-transform: scale(1.3);
transform: scale(1.3); }
.reveal .slides section .fragment.shrink {
@@ -78,16 +77,13 @@ html:-moz-full-screen-ancestor {
visibility: visible; }
.reveal .slides section .fragment.shrink.visible {
-webkit-transform: scale(0.7);
- -ms-transform: scale(0.7);
transform: scale(0.7); }
.reveal .slides section .fragment.zoom-in {
-webkit-transform: scale(0.1);
- -ms-transform: scale(0.1);
transform: scale(0.1); }
.reveal .slides section .fragment.zoom-in.visible {
-webkit-transform: none;
- -ms-transform: none;
transform: none; }
.reveal .slides section .fragment.fade-out {
@@ -112,38 +108,30 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment.fade-up {
-webkit-transform: translate(0, 20%);
- -ms-transform: translate(0, 20%);
transform: translate(0, 20%); }
.reveal .slides section .fragment.fade-up.visible {
-webkit-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.fade-down {
-webkit-transform: translate(0, -20%);
- -ms-transform: translate(0, -20%);
transform: translate(0, -20%); }
.reveal .slides section .fragment.fade-down.visible {
-webkit-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.fade-right {
-webkit-transform: translate(-20%, 0);
- -ms-transform: translate(-20%, 0);
transform: translate(-20%, 0); }
.reveal .slides section .fragment.fade-right.visible {
-webkit-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.fade-left {
-webkit-transform: translate(20%, 0);
- -ms-transform: translate(20%, 0);
transform: translate(20%, 0); }
.reveal .slides section .fragment.fade-left.visible {
-webkit-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.current-visible {
@@ -226,7 +214,6 @@ html:-moz-full-screen-ancestor {
background-color: transparent;
border: 12px solid transparent;
-webkit-transform: scale(0.9999);
- -ms-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
@@ -363,7 +350,6 @@ html:-moz-full-screen-ancestor {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/* Global transition speed settings */
@@ -431,28 +417,24 @@ html:-moz-full-screen-ancestor {
.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 .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 .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 .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 {
@@ -463,28 +445,24 @@ html:-moz-full-screen-ancestor {
.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%); }
/*********************************************
@@ -579,7 +557,6 @@ html:-moz-full-screen-ancestor {
.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,
@@ -587,21 +564,18 @@ html:-moz-full-screen-ancestor {
.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 .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 .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%); }
/*********************************************
@@ -655,28 +629,24 @@ html:-moz-full-screen-ancestor {
.reveal.cube .slides > section.past {
-webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
.reveal.cube .slides > section.future {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
transform: translate3d(100%, 0, 0) rotateY(90deg); }
.reveal.cube .slides > section > section.past {
-webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
transform: translate3d(0, -100%, 0) rotateX(90deg); }
.reveal.cube .slides > section > section.future {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
transform: translate3d(0, 100%, 0) rotateX(-90deg); }
@@ -730,28 +700,24 @@ html:-moz-full-screen-ancestor {
.reveal.page .slides > section.past {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
.reveal.page .slides > section.future {
-webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.reveal.page .slides > section > section.past {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
transform: translate3d(0, -40%, 0) rotateX(80deg); }
.reveal.page .slides > section > section.future {
-webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
@@ -763,7 +729,6 @@ html:-moz-full-screen-ancestor {
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
-webkit-transform: none;
- -ms-transform: none;
transform: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s; }
@@ -779,7 +744,6 @@ html:-moz-full-screen-ancestor {
.reveal .slides section[data-transition=none],
.reveal.none .slides section:not([data-transition]) {
-webkit-transform: none;
- -ms-transform: none;
transform: none;
-webkit-transition: none;
transition: none; }
@@ -833,7 +797,6 @@ html:-moz-full-screen-ancestor {
left: -50%;
margin: 70px 0;
-webkit-transform: none;
- -ms-transform: none;
transform: none; }
.no-transforms .reveal .slides section section {
@@ -907,25 +870,21 @@ html:-moz-full-screen-ancestor {
.reveal[data-background-transition=slide] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(-100%, 0);
- -ms-transform: translate(-100%, 0);
transform: translate(-100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(100%, 0);
- -ms-transform: translate(100%, 0);
transform: translate(100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(0, -100%);
- -ms-transform: translate(0, -100%);
transform: translate(0, -100%); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(0, 100%);
- -ms-transform: translate(0, 100%);
transform: translate(0, 100%); }
/* Convex */
@@ -989,7 +948,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
- -ms-transform: scale(16);
transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,
@@ -997,7 +955,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,
@@ -1005,7 +962,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
- -ms-transform: scale(16);
transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,
@@ -1013,7 +969,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
/* Global transition speed settings */
@@ -1220,7 +1175,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport {
@@ -1294,7 +1248,6 @@ html:-moz-full-screen-ancestor {
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
@@ -1316,7 +1269,6 @@ html:-moz-full-screen-ancestor {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
diff --git a/css/theme/beige.css b/css/theme/beige.css
index be18733..9d29bd5 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #8b743d;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #c0a86e;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/black.css b/css/theme/black.css
index deccc46..f0a265f 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #42affa;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #8dcffc;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/blood.css b/css/theme/blood.css
index e035ab6..0d44848 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -209,9 +209,9 @@ body {
.reveal a {
color: #a23;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #dd5566;
@@ -236,9 +236,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/league.css b/css/theme/league.css
index fa9f53c..1f7ad4c 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -212,9 +212,9 @@ body {
.reveal a {
color: #13DAEC;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #71e9f4;
@@ -239,9 +239,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/moon.css b/css/theme/moon.css
index b119576..4e5532a 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #268bd2;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #78b9e6;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/night.css b/css/theme/night.css
index 3d0e3c5..d2fc296 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -204,9 +204,9 @@ body {
.reveal a {
color: #e7ad52;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #f3d7ac;
@@ -231,9 +231,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 736c0b5..7d5c35e 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #51483D;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #8b7c69;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 20d919d..9123043 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #00008B;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #0000f1;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/sky.css b/css/theme/sky.css
index e762a50..2b1e439 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -213,9 +213,9 @@ body {
.reveal a {
color: #3b759e;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #74a7cb;
@@ -240,9 +240,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index bf2f651..9a17ca8 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #268bd2;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #78b9e6;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
diff --git a/css/theme/white.css b/css/theme/white.css
index 14e1703..f55e094 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #2a76dd;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #6ca0e8;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
--
cgit v1.2.3
From 5dd90671507f8f56b27fe9d8a2fd25c1adb08d6b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 13 Apr 2016 15:21:30 +0200
Subject: overview now works with percentage based width/height #1247
---
css/reveal.css | 5 +++--
css/reveal.scss | 3 ++-
js/reveal.js | 45 +++++++++++++++++++++------------------------
3 files changed, 26 insertions(+), 27 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 3a31fa4..b203074 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -20,7 +20,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
-.reveal time, .reveal mark, .reveal audio, video {
+.reveal time, .reveal mark, .reveal audio, .reveal video {
margin: 0;
padding: 0;
border: 0;
@@ -989,7 +989,8 @@ html:-moz-full-screen-ancestor {
-webkit-perspective: 700px;
perspective: 700px; }
.reveal.overview .slides section {
- height: 700px;
+ height: 100%;
+ top: 0 !important;
opacity: 1 !important;
overflow: hidden;
visibility: visible !important;
diff --git a/css/reveal.scss b/css/reveal.scss
index 8cf8cda..f8d6904 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1022,7 +1022,8 @@ html:-moz-full-screen-ancestor {
perspective: 700px;
.slides section {
- height: 700px;
+ height: 100%;
+ top: 0 !important;
opacity: 1 !important;
overflow: hidden;
visibility: visible !important;
diff --git a/js/reveal.js b/js/reveal.js
index 0b1cad7..96a6359 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -166,6 +166,10 @@
// Flags if the overview mode is currently active
overview = false,
+ // Holds the dimensions of our overview slides, including margins
+ overviewSlideWidth = null,
+ overviewSlideHeight = null,
+
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
@@ -1798,6 +1802,17 @@
}
} );
+ // Calculate slide sizes
+ var margin = 70;
+ var slideSize = getComputedSlideSize();
+ overviewSlideWidth = slideSize.width + margin;
+ overviewSlideHeight = slideSize.height + margin;
+
+ // Reverse in RTL mode
+ if( config.rtl ) {
+ overviewSlideWidth = -overviewSlideWidth;
+ }
+
updateSlidesVisibility();
layoutOverview();
updateOverview();
@@ -1821,19 +1836,10 @@
*/
function layoutOverview() {
- var margin = 70;
- var slideWidth = config.width + margin,
- slideHeight = config.height + margin;
-
- // Reverse in RTL mode
- if( config.rtl ) {
- slideWidth = -slideWidth;
- }
-
// Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
hslide.setAttribute( 'data-index-h', h );
- transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
+ transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
if( hslide.classList.contains( 'stack' ) ) {
@@ -1841,7 +1847,7 @@
vslide.setAttribute( 'data-index-h', h );
vslide.setAttribute( 'data-index-v', v );
- transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
+ transformElement( vslide, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
}
@@ -1849,10 +1855,10 @@
// Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
- transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
+ transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
- transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
+ transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
} );
@@ -1864,19 +1870,10 @@
*/
function updateOverview() {
- var margin = 70;
- var slideWidth = config.width + margin,
- slideHeight = config.height + margin;
-
- // Reverse in RTL mode
- if( config.rtl ) {
- slideWidth = -slideWidth;
- }
-
transformSlides( {
overview: [
- 'translateX('+ ( -indexh * slideWidth ) +'px)',
- 'translateY('+ ( -indexv * slideHeight ) +'px)',
+ 'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',
+ 'translateY('+ ( -indexv * overviewSlideHeight ) +'px)',
'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
].join( ' ' )
} );
--
cgit v1.2.3
From b7e0d9b1c79a475249777d734a9675b1ba03a47a Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 20 Jun 2016 10:27:04 +0200
Subject: fix theme backgrounds in firefox fullscreen mode #1386
---
css/reveal.css | 6 ------
css/reveal.scss | 9 ---------
css/theme/beige.css | 20 ++++++++++++++++++++
css/theme/black.css | 8 ++++++++
css/theme/blood.css | 8 ++++++++
css/theme/league.css | 20 ++++++++++++++++++++
css/theme/moon.css | 8 ++++++++
css/theme/night.css | 8 ++++++++
css/theme/serif.css | 8 ++++++++
css/theme/simple.css | 8 ++++++++
css/theme/sky.css | 20 ++++++++++++++++++++
css/theme/solarized.css | 8 ++++++++
css/theme/template/theme.scss | 11 +++++++++++
css/theme/white.css | 8 ++++++++
14 files changed, 135 insertions(+), 15 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index b203074..778076e 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -47,12 +47,6 @@ body {
background-color: #fff;
color: #000; }
-html:-webkit-full-screen-ancestor {
- background-color: inherit; }
-
-html:-moz-full-screen-ancestor {
- background-color: inherit; }
-
/*********************************************
* VIEW FRAGMENTS
*********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index f8d6904..9045428 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -57,15 +57,6 @@ body {
color: #000;
}
-// Ensures that the main background color matches the
-// theme in fullscreen mode
-html:-webkit-full-screen-ancestor {
- background-color: inherit;
-}
-html:-moz-full-screen-ancestor {
- background-color: inherit;
-}
-
/*********************************************
* VIEW FRAGMENTS
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 7424a05..d2caeb8 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -18,6 +18,26 @@ body {
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background-color: #f7f3de; }
+html:-webkit-full-screen-ancestor {
+ background: #f7f2d3;
+ background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+ background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background-color: #f7f3de; }
+
+html:-moz-full-screen-ancestor {
+ background: #f7f2d3;
+ background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+ background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+ background-color: #f7f3de; }
+
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/black.css b/css/theme/black.css
index 96e4fd4..635a2b1 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -14,6 +14,14 @@ body {
background: #222;
background-color: #222; }
+html:-webkit-full-screen-ancestor {
+ background: #222;
+ background-color: #222; }
+
+html:-moz-full-screen-ancestor {
+ background: #222;
+ background-color: #222; }
+
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px;
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 1e0fbaf..5a1cee5 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -17,6 +17,14 @@ body {
background: #222;
background-color: #222; }
+html:-webkit-full-screen-ancestor {
+ background: #222;
+ background-color: #222; }
+
+html:-moz-full-screen-ancestor {
+ background: #222;
+ background-color: #222; }
+
.reveal {
font-family: Ubuntu, "sans-serif";
font-size: 40px;
diff --git a/css/theme/league.css b/css/theme/league.css
index 63711c3..6359446 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -20,6 +20,26 @@ body {
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background-color: #2b2b2b; }
+html:-webkit-full-screen-ancestor {
+ background: #1c1e20;
+ background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+ background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background-color: #2b2b2b; }
+
+html:-moz-full-screen-ancestor {
+ background: #1c1e20;
+ background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+ background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+ background-color: #2b2b2b; }
+
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 791a4a0..e6831b0 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -18,6 +18,14 @@ body {
background: #002b36;
background-color: #002b36; }
+html:-webkit-full-screen-ancestor {
+ background: #002b36;
+ background-color: #002b36; }
+
+html:-moz-full-screen-ancestor {
+ background: #002b36;
+ background-color: #002b36; }
+
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/night.css b/css/theme/night.css
index 3db1175..6ad1089 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -12,6 +12,14 @@ body {
background: #111;
background-color: #111; }
+html:-webkit-full-screen-ancestor {
+ background: #111;
+ background-color: #111; }
+
+html:-moz-full-screen-ancestor {
+ background: #111;
+ background-color: #111; }
+
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 40px;
diff --git a/css/theme/serif.css b/css/theme/serif.css
index e9b08c6..60654ef 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -14,6 +14,14 @@ body {
background: #F0F1EB;
background-color: #F0F1EB; }
+html:-webkit-full-screen-ancestor {
+ background: #F0F1EB;
+ background-color: #F0F1EB; }
+
+html:-moz-full-screen-ancestor {
+ background: #F0F1EB;
+ background-color: #F0F1EB; }
+
.reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 40px;
diff --git a/css/theme/simple.css b/css/theme/simple.css
index f64343e..86f6af6 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -17,6 +17,14 @@ body {
background: #fff;
background-color: #fff; }
+html:-webkit-full-screen-ancestor {
+ background: #fff;
+ background-color: #fff; }
+
+html:-moz-full-screen-ancestor {
+ background: #fff;
+ background-color: #fff; }
+
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 33689eb..6ee8cde 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -21,6 +21,26 @@ body {
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: #f7fbfc; }
+html:-webkit-full-screen-ancestor {
+ background: #add9e4;
+ background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
+ background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background-color: #f7fbfc; }
+
+html:-moz-full-screen-ancestor {
+ background: #add9e4;
+ background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
+ background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+ background-color: #f7fbfc; }
+
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 40px;
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 9bd21aa..d554ca9 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -18,6 +18,14 @@ body {
background: #fdf6e3;
background-color: #fdf6e3; }
+html:-webkit-full-screen-ancestor {
+ background: #fdf6e3;
+ background-color: #fdf6e3; }
+
+html:-moz-full-screen-ancestor {
+ background: #fdf6e3;
+ background-color: #fdf6e3; }
+
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index bcbaf0c..8d4b8a7 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -9,6 +9,17 @@ body {
background-color: $backgroundColor;
}
+// Ensures that the main background color matches the
+// theme in fullscreen mode
+html:-webkit-full-screen-ancestor {
+ @include bodyBackground();
+ background-color: $backgroundColor;
+}
+html:-moz-full-screen-ancestor {
+ @include bodyBackground();
+ background-color: $backgroundColor;
+}
+
.reveal {
font-family: $mainFont;
font-size: $mainFontSize;
diff --git a/css/theme/white.css b/css/theme/white.css
index 7adc605..1048a6e 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -14,6 +14,14 @@ body {
background: #fff;
background-color: #fff; }
+html:-webkit-full-screen-ancestor {
+ background: #fff;
+ background-color: #fff; }
+
+html:-moz-full-screen-ancestor {
+ background: #fff;
+ background-color: #fff; }
+
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px;
--
cgit v1.2.3
From ce777e4c4b5517bf2210bc9839909413a48f42fa Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 21 Jun 2016 11:27:24 +0200
Subject: Revert "fix theme backgrounds in firefox fullscreen mode #1386"
This reverts commit b7e0d9b1c79a475249777d734a9675b1ba03a47a.
---
css/reveal.css | 6 ++++++
css/reveal.scss | 9 +++++++++
css/theme/beige.css | 20 --------------------
css/theme/black.css | 8 --------
css/theme/blood.css | 8 --------
css/theme/league.css | 20 --------------------
css/theme/moon.css | 8 --------
css/theme/night.css | 8 --------
css/theme/serif.css | 8 --------
css/theme/simple.css | 8 --------
css/theme/sky.css | 20 --------------------
css/theme/solarized.css | 8 --------
css/theme/template/theme.scss | 11 -----------
css/theme/white.css | 8 --------
14 files changed, 15 insertions(+), 135 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 778076e..b203074 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -47,6 +47,12 @@ body {
background-color: #fff;
color: #000; }
+html:-webkit-full-screen-ancestor {
+ background-color: inherit; }
+
+html:-moz-full-screen-ancestor {
+ background-color: inherit; }
+
/*********************************************
* VIEW FRAGMENTS
*********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index 9045428..f8d6904 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -57,6 +57,15 @@ body {
color: #000;
}
+// Ensures that the main background color matches the
+// theme in fullscreen mode
+html:-webkit-full-screen-ancestor {
+ background-color: inherit;
+}
+html:-moz-full-screen-ancestor {
+ background-color: inherit;
+}
+
/*********************************************
* VIEW FRAGMENTS
diff --git a/css/theme/beige.css b/css/theme/beige.css
index d2caeb8..7424a05 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -18,26 +18,6 @@ body {
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background-color: #f7f3de; }
-html:-webkit-full-screen-ancestor {
- background: #f7f2d3;
- background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
- background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background-color: #f7f3de; }
-
-html:-moz-full-screen-ancestor {
- background: #f7f2d3;
- background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
- background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
- background-color: #f7f3de; }
-
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/black.css b/css/theme/black.css
index 635a2b1..96e4fd4 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -14,14 +14,6 @@ body {
background: #222;
background-color: #222; }
-html:-webkit-full-screen-ancestor {
- background: #222;
- background-color: #222; }
-
-html:-moz-full-screen-ancestor {
- background: #222;
- background-color: #222; }
-
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px;
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 5a1cee5..1e0fbaf 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -17,14 +17,6 @@ body {
background: #222;
background-color: #222; }
-html:-webkit-full-screen-ancestor {
- background: #222;
- background-color: #222; }
-
-html:-moz-full-screen-ancestor {
- background: #222;
- background-color: #222; }
-
.reveal {
font-family: Ubuntu, "sans-serif";
font-size: 40px;
diff --git a/css/theme/league.css b/css/theme/league.css
index 6359446..63711c3 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -20,26 +20,6 @@ body {
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background-color: #2b2b2b; }
-html:-webkit-full-screen-ancestor {
- background: #1c1e20;
- background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
- background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background-color: #2b2b2b; }
-
-html:-moz-full-screen-ancestor {
- background: #1c1e20;
- background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
- background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
- background-color: #2b2b2b; }
-
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/moon.css b/css/theme/moon.css
index e6831b0..791a4a0 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -18,14 +18,6 @@ body {
background: #002b36;
background-color: #002b36; }
-html:-webkit-full-screen-ancestor {
- background: #002b36;
- background-color: #002b36; }
-
-html:-moz-full-screen-ancestor {
- background: #002b36;
- background-color: #002b36; }
-
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/night.css b/css/theme/night.css
index 6ad1089..3db1175 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -12,14 +12,6 @@ body {
background: #111;
background-color: #111; }
-html:-webkit-full-screen-ancestor {
- background: #111;
- background-color: #111; }
-
-html:-moz-full-screen-ancestor {
- background: #111;
- background-color: #111; }
-
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 40px;
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 60654ef..e9b08c6 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -14,14 +14,6 @@ body {
background: #F0F1EB;
background-color: #F0F1EB; }
-html:-webkit-full-screen-ancestor {
- background: #F0F1EB;
- background-color: #F0F1EB; }
-
-html:-moz-full-screen-ancestor {
- background: #F0F1EB;
- background-color: #F0F1EB; }
-
.reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 40px;
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 86f6af6..f64343e 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -17,14 +17,6 @@ body {
background: #fff;
background-color: #fff; }
-html:-webkit-full-screen-ancestor {
- background: #fff;
- background-color: #fff; }
-
-html:-moz-full-screen-ancestor {
- background: #fff;
- background-color: #fff; }
-
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 6ee8cde..33689eb 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -21,26 +21,6 @@ body {
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: #f7fbfc; }
-html:-webkit-full-screen-ancestor {
- background: #add9e4;
- background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
- background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background-color: #f7fbfc; }
-
-html:-moz-full-screen-ancestor {
- background: #add9e4;
- background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
- background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
- background-color: #f7fbfc; }
-
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 40px;
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index d554ca9..9bd21aa 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -18,14 +18,6 @@ body {
background: #fdf6e3;
background-color: #fdf6e3; }
-html:-webkit-full-screen-ancestor {
- background: #fdf6e3;
- background-color: #fdf6e3; }
-
-html:-moz-full-screen-ancestor {
- background: #fdf6e3;
- background-color: #fdf6e3; }
-
.reveal {
font-family: "Lato", sans-serif;
font-size: 40px;
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 8d4b8a7..bcbaf0c 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -9,17 +9,6 @@ body {
background-color: $backgroundColor;
}
-// Ensures that the main background color matches the
-// theme in fullscreen mode
-html:-webkit-full-screen-ancestor {
- @include bodyBackground();
- background-color: $backgroundColor;
-}
-html:-moz-full-screen-ancestor {
- @include bodyBackground();
- background-color: $backgroundColor;
-}
-
.reveal {
font-family: $mainFont;
font-size: $mainFontSize;
diff --git a/css/theme/white.css b/css/theme/white.css
index 1048a6e..7adc605 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -14,14 +14,6 @@ body {
background: #fff;
background-color: #fff; }
-html:-webkit-full-screen-ancestor {
- background: #fff;
- background-color: #fff; }
-
-html:-moz-full-screen-ancestor {
- background: #fff;
- background-color: #fff; }
-
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px;
--
cgit v1.2.3
From a12a17b2d7053fad006ae9914309e8fb56c44329 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 21 Jun 2016 11:30:12 +0200
Subject: request fullscreen on documentElement instead of body (#1621 #1624)
---
css/reveal.css | 6 ------
css/reveal.scss | 9 ---------
js/reveal.js | 4 ++--
3 files changed, 2 insertions(+), 17 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index b203074..778076e 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -47,12 +47,6 @@ body {
background-color: #fff;
color: #000; }
-html:-webkit-full-screen-ancestor {
- background-color: inherit; }
-
-html:-moz-full-screen-ancestor {
- background-color: inherit; }
-
/*********************************************
* VIEW FRAGMENTS
*********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index f8d6904..9045428 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -57,15 +57,6 @@ body {
color: #000;
}
-// Ensures that the main background color matches the
-// theme in fullscreen mode
-html:-webkit-full-screen-ancestor {
- background-color: inherit;
-}
-html:-moz-full-screen-ancestor {
- background-color: inherit;
-}
-
/*********************************************
* VIEW FRAGMENTS
diff --git a/js/reveal.js b/js/reveal.js
index 4999bdb..d8cc4fc 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1980,10 +1980,10 @@
*/
function enterFullscreen() {
- var element = document.body;
+ var element = document.documentElement;
// Check which implementation is available
- var requestMethod = element.requestFullScreen ||
+ var requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
--
cgit v1.2.3
From bc4fc65da475b1234b32c9eb5070138218abff76 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 1 Aug 2016 09:15:34 +0200
Subject: none/fade/slide transitions use flat transform style, prevents
blurred content #1002
---
css/reveal.css | 27 +++++++++++++++++++++++----
css/reveal.scss | 12 +++++++++++-
2 files changed, 34 insertions(+), 5 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 778076e..fae8123 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -341,8 +341,8 @@ body {
width: 100%;
padding: 20px 0px;
z-index: 10;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
+ -webkit-transform-style: flat;
+ transform-style: flat;
-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
@@ -463,6 +463,11 @@ body {
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
+.reveal .slides section[data-transition=default],
+.reveal.default .slides section:not([data-transition]) {
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d; }
+
.reveal .slides > section[data-transition=default].past,
.reveal .slides > section[data-transition~=default-out].past,
.reveal.default .slides > section:not([data-transition]).past {
@@ -487,6 +492,11 @@ body {
-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],
+.reveal.convex .slides section:not([data-transition]) {
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d; }
+
.reveal .slides > section[data-transition=convex].past,
.reveal .slides > section[data-transition~=convex-out].past,
.reveal.convex .slides > section:not([data-transition]).past {
@@ -514,6 +524,11 @@ body {
/*********************************************
* CONCAVE TRANSITION
*********************************************/
+.reveal .slides section[data-transition=concave],
+.reveal.concave .slides section:not([data-transition]) {
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d; }
+
.reveal .slides > section[data-transition=concave].past,
.reveal .slides > section[data-transition~=concave-out].past,
.reveal.concave .slides > section:not([data-transition]).past {
@@ -584,7 +599,9 @@ body {
min-height: 700px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
- box-sizing: border-box; }
+ box-sizing: border-box;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d; }
.reveal.center.cube .slides section {
min-height: 0; }
@@ -657,7 +674,9 @@ body {
.reveal.page .slides section {
padding: 30px;
min-height: 700px;
- box-sizing: border-box; }
+ box-sizing: border-box;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d; }
.reveal.page .slides section.past {
z-index: 12; }
diff --git a/css/reveal.scss b/css/reveal.scss
index 9045428..c888a27 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -408,7 +408,7 @@ body {
padding: 20px 0px;
z-index: 10;
- transform-style: preserve-3d;
+ transform-style: flat;
transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
@@ -539,6 +539,10 @@ body {
*********************************************/
@each $stylename in default, convex {
+ @include transition-global(#{$stylename}) {
+ transform-style: preserve-3d;
+ }
+
@include transition-horizontal-past(#{$stylename}) {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
@@ -557,6 +561,10 @@ body {
* CONCAVE TRANSITION
*********************************************/
+@include transition-global(concave) {
+ transform-style: preserve-3d;
+}
+
@include transition-horizontal-past(concave) {
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
@@ -607,6 +615,7 @@ body {
min-height: 700px;
backface-visibility: hidden;
box-sizing: border-box;
+ transform-style: preserve-3d;
}
.reveal.center.cube .slides section {
min-height: 0;
@@ -678,6 +687,7 @@ body {
padding: 30px;
min-height: 700px;
box-sizing: border-box;
+ transform-style: preserve-3d;
}
.reveal.page .slides section.past {
z-index: 12;
--
cgit v1.2.3
From 0b9233cf4a1a53297356cbc834c2240a92d20545 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 5 Oct 2016 14:00:40 +0200
Subject: attempt at fixing ff transition bug #1627
---
css/reveal.css | 12 ++++++------
css/reveal.scss | 10 ++++++++--
2 files changed, 14 insertions(+), 8 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index fae8123..c879c03 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -463,8 +463,8 @@ body {
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
-.reveal .slides section[data-transition=default],
-.reveal.default .slides section:not([data-transition]) {
+.reveal .slides section[data-transition=default].stack,
+.reveal.default .slides section.stack {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
@@ -492,8 +492,8 @@ body {
-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],
-.reveal.convex .slides section:not([data-transition]) {
+.reveal .slides section[data-transition=convex].stack,
+.reveal.convex .slides section.stack {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
@@ -524,8 +524,8 @@ body {
/*********************************************
* CONCAVE TRANSITION
*********************************************/
-.reveal .slides section[data-transition=concave],
-.reveal.concave .slides section:not([data-transition]) {
+.reveal .slides section[data-transition=concave].stack,
+.reveal.concave .slides section.stack {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
diff --git a/css/reveal.scss b/css/reveal.scss
index c888a27..c5ff05a 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -480,6 +480,12 @@ body {
@content;
}
}
+@mixin transition-stack($style) {
+ .reveal .slides section[data-transition=#{$style}].stack,
+ .reveal.#{$style} .slides section.stack {
+ @content;
+ }
+}
@mixin transition-horizontal-past($style) {
.reveal .slides>section[data-transition=#{$style}].past,
.reveal .slides>section[data-transition~=#{$style}-out].past,
@@ -539,7 +545,7 @@ body {
*********************************************/
@each $stylename in default, convex {
- @include transition-global(#{$stylename}) {
+ @include transition-stack(#{$stylename}) {
transform-style: preserve-3d;
}
@@ -561,7 +567,7 @@ body {
* CONCAVE TRANSITION
*********************************************/
-@include transition-global(concave) {
+@include transition-stack(concave) {
transform-style: preserve-3d;
}
--
cgit v1.2.3
From 7547b893d4421c193974a9e68989cfa20669ac11 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 10 Oct 2016 12:11:27 +0200
Subject: fixes ff overview rendering bug #1649
---
css/reveal.css | 5 ++++-
css/reveal.scss | 10 ++++++++++
2 files changed, 14 insertions(+), 1 deletion(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index c879c03..dbabfcb 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1001,6 +1001,8 @@ body {
perspective-origin: 50% 50%;
-webkit-perspective: 700px;
perspective: 700px; }
+ .reveal.overview .slides {
+ -moz-transform-style: preserve-3d; }
.reveal.overview .slides section {
height: 100%;
top: 0 !important;
@@ -1028,7 +1030,8 @@ body {
overflow: visible; }
.reveal.overview .backgrounds {
-webkit-perspective: inherit;
- perspective: inherit; }
+ perspective: inherit;
+ -moz-transform-style: preserve-3d; }
.reveal.overview .backgrounds .slide-background {
opacity: 1;
visibility: visible;
diff --git a/css/reveal.scss b/css/reveal.scss
index c5ff05a..f6a37ad 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1028,6 +1028,12 @@ body {
perspective-origin: 50% 50%;
perspective: 700px;
+ .slides {
+ // Fixes overview rendering errors in FF48+, not applied to
+ // other browsers since it degrades performance
+ -moz-transform-style: preserve-3d;
+ }
+
.slides section {
height: 100%;
top: 0 !important;
@@ -1060,6 +1066,10 @@ body {
.backgrounds {
perspective: inherit;
+
+ // Fixes overview rendering errors in FF48+, not applied to
+ // other browsers since it degrades performance
+ -moz-transform-style: preserve-3d;
}
.backgrounds .slide-background {
--
cgit v1.2.3
From f2bd9d297018e1af97ebee147a8824bfb61c2bed Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 13 Dec 2016 16:16:51 +0100
Subject: don't show error message while iframe fades in #1577
---
css/reveal.css | 18 ++++++++++++++++++
css/reveal.scss | 10 +++++++++-
js/reveal.js | 2 +-
3 files changed, 28 insertions(+), 2 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index dbabfcb..80c1786 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1140,6 +1140,7 @@ body {
display: inline-block;
width: 40px;
height: 40px;
+ line-height: 36px;
padding: 0 10px;
float: right;
opacity: 0.6;
@@ -1188,6 +1189,23 @@ body {
opacity: 1;
visibility: visible; }
+.reveal .overlay.overlay-preview.loaded .viewport-inner {
+ position: absolute;
+ z-index: -1;
+ left: 0;
+ top: 45%;
+ width: 100%;
+ text-align: center;
+ letter-spacing: normal; }
+
+.reveal .overlay.overlay-preview .x-frame-error {
+ opacity: 0;
+ -webkit-transition: opacity 0.3s ease 0.3s;
+ transition: opacity 0.3s ease 0.3s; }
+
+.reveal .overlay.overlay-preview.loaded .x-frame-error {
+ opacity: 1; }
+
.reveal .overlay.overlay-preview.loaded .spinner {
opacity: 0;
visibility: hidden;
diff --git a/css/reveal.scss b/css/reveal.scss
index 321b3f9..fa7f20d 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1195,6 +1195,7 @@ body {
display: inline-block;
width: 40px;
height: 40px;
+ line-height: 36px;
padding: 0 10px;
float: right;
opacity: 0.6;
@@ -1250,11 +1251,18 @@ body {
position: absolute;
z-index: -1;
left: 0;
- top: 60px;
+ top: 45%;
width: 100%;
text-align: center;
letter-spacing: normal;
}
+ .reveal .overlay.overlay-preview .x-frame-error {
+ opacity: 0;
+ transition: opacity 0.3s ease 0.3s;
+ }
+ .reveal .overlay.overlay-preview.loaded .x-frame-error {
+ opacity: 1;
+ }
.reveal .overlay.overlay-preview.loaded .spinner {
opacity: 0;
diff --git a/js/reveal.js b/js/reveal.js
index e9dba2e..7a4bc9e 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1604,7 +1604,7 @@
'',
'',
'',
- 'This link is refused to display in a frame due to its policy',
+ 'Unable to load iframe. This is likely due to the site\'s policy (x-frame-options).',
'',
'
'
].join('');
--
cgit v1.2.3
From 97bb6e9b584f6b4eee33c91e04e5a40da358b7cd Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 15 Dec 2016 14:06:17 +0100
Subject: fragments inherit visibility to avoid conflicts with parent slide
visibility
---
css/reveal.css | 18 +++++++++---------
css/reveal.scss | 18 +++++++++---------
2 files changed, 18 insertions(+), 18 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 80c1786..430dcde 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -57,18 +57,18 @@ body {
transition: all .2s ease; }
.reveal .slides section .fragment.visible {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.grow {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.grow.visible {
-webkit-transform: scale(1.3);
transform: scale(1.3); }
.reveal .slides section .fragment.shrink {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.shrink.visible {
-webkit-transform: scale(0.7);
transform: scale(0.7); }
@@ -82,21 +82,21 @@ body {
.reveal .slides section .fragment.fade-out {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.fade-out.visible {
opacity: 0;
visibility: hidden; }
.reveal .slides section .fragment.semi-fade-out {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.semi-fade-out.visible {
opacity: 0.5;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.strike {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.strike.visible {
text-decoration: line-through; }
@@ -133,7 +133,7 @@ body {
visibility: hidden; }
.reveal .slides section .fragment.current-visible.current-fragment {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
@@ -142,7 +142,7 @@ body {
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
opacity: 1;
- visibility: visible; }
+ visibility: inherit; }
.reveal .slides section .fragment.highlight-red.visible {
color: #ff2c2d; }
diff --git a/css/reveal.scss b/css/reveal.scss
index fa7f20d..22fb3fe 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -69,13 +69,13 @@ body {
&.visible {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
}
}
.reveal .slides section .fragment.grow {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
&.visible {
transform: scale( 1.3 );
@@ -84,7 +84,7 @@ body {
.reveal .slides section .fragment.shrink {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
&.visible {
transform: scale( 0.7 );
@@ -101,7 +101,7 @@ body {
.reveal .slides section .fragment.fade-out {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
&.visible {
opacity: 0;
@@ -111,17 +111,17 @@ body {
.reveal .slides section .fragment.semi-fade-out {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
&.visible {
opacity: 0.5;
- visibility: visible;
+ visibility: inherit;
}
}
.reveal .slides section .fragment.strike {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
&.visible {
text-decoration: line-through;
@@ -166,7 +166,7 @@ body {
&.current-fragment {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
}
}
@@ -177,7 +177,7 @@ body {
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
opacity: 1;
- visibility: visible;
+ visibility: inherit;
}
.reveal .slides section .fragment.highlight-red.visible {
color: #ff2c2d
--
cgit v1.2.3
From 941b86b6c390bf91eeb6b47f12ff8bf830e28b0a Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 18 Jan 2017 10:43:29 +0100
Subject: works with video, defaults to (same as for images)
---
README.md | 1 +
css/reveal.css | 8 +++++++-
css/reveal.scss | 4 ++++
js/reveal.js | 1 +
4 files changed, 13 insertions(+), 1 deletion(-)
(limited to 'css/reveal.css')
diff --git a/README.md b/README.md
index 8878842..54b065b 100644
--- a/README.md
+++ b/README.md
@@ -578,6 +578,7 @@ Automatically plays a full size video behind the slide.
| data-background-video | | A single video source, or a comma separated list of video sources. |
| data-background-video-loop | false | Flags if the video should play repeatedly. |
| data-background-video-muted | false | Flags if the audio should be muted. |
+| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
```html
diff --git a/css/reveal.css b/css/reveal.css
index 430dcde..18bb25c 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -865,7 +865,13 @@ body {
max-width: none;
max-height: none;
top: 0;
- left: 0; }
+ left: 0;
+ -o-object-fit: cover;
+ object-fit: cover; }
+
+.reveal .slide-background[data-background-size="contain"] video {
+ -o-object-fit: contain;
+ object-fit: contain; }
/* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background,
diff --git a/css/reveal.scss b/css/reveal.scss
index 22fb3fe..68ff56f 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -898,7 +898,11 @@ body {
max-height: none;
top: 0;
left: 0;
+ object-fit: cover;
}
+ .reveal .slide-background[data-background-size="contain"] video {
+ object-fit: contain;
+ }
/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
diff --git a/js/reveal.js b/js/reveal.js
index 7f4783e..a59916f 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -884,6 +884,7 @@
// Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+ if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
--
cgit v1.2.3
From 20238ee1d6cfed6c84cf6d42d168ee4085360a38 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 19 Jan 2017 12:16:30 +0100
Subject: make backgrounds (iframes) interactive when the foreground is empty
---
css/reveal.css | 10 +++++++++-
css/reveal.scss | 9 +++++++++
2 files changed, 18 insertions(+), 1 deletion(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 18bb25c..82d0767 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -323,6 +323,7 @@ body {
bottom: 0;
left: 0;
margin: auto;
+ pointer-events: none;
overflow: visible;
z-index: 1;
text-align: center;
@@ -340,6 +341,7 @@ body {
position: absolute;
width: 100%;
padding: 20px 0px;
+ pointer-events: auto;
z-index: 10;
-webkit-transform-style: flat;
transform-style: flat;
@@ -374,6 +376,10 @@ body {
z-index: 11;
opacity: 1; }
+.reveal .slides > section:empty,
+.reveal .slides > section > section:empty {
+ pointer-events: none; }
+
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
@@ -839,6 +845,7 @@ body {
height: 100%;
opacity: 0;
visibility: hidden;
+ overflow: hidden;
background-color: transparent;
background-position: 50% 50%;
background-repeat: no-repeat;
@@ -851,7 +858,8 @@ body {
.reveal .slide-background.present {
opacity: 1;
- visibility: visible; }
+ visibility: visible;
+ z-index: 2; }
.print-pdf .reveal .slide-background {
opacity: 1 !important;
diff --git a/css/reveal.scss b/css/reveal.scss
index 68ff56f..ce57358 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -388,6 +388,7 @@ body {
bottom: 0;
left: 0;
margin: auto;
+ pointer-events: none;
overflow: visible;
z-index: 1;
@@ -406,6 +407,7 @@ body {
position: absolute;
width: 100%;
padding: 20px 0px;
+ pointer-events: auto;
z-index: 10;
transform-style: flat;
@@ -443,6 +445,11 @@ body {
opacity: 1;
}
+.reveal .slides>section:empty,
+.reveal .slides>section>section:empty {
+ pointer-events: none;
+}
+
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
@@ -866,6 +873,7 @@ body {
height: 100%;
opacity: 0;
visibility: hidden;
+ overflow: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
@@ -882,6 +890,7 @@ body {
.reveal .slide-background.present {
opacity: 1;
visibility: visible;
+ z-index: 2;
}
.print-pdf .reveal .slide-background {
--
cgit v1.2.3
From e8164c13923b65c60cca122aeab6e61cb5377e80 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 20 Jan 2017 10:35:01 +0100
Subject: 2017
---
Gruntfile.js | 2 +-
LICENSE | 2 +-
README.md | 2 +-
css/reveal.css | 2 +-
css/reveal.scss | 2 +-
js/reveal.js | 2 +-
6 files changed, 6 insertions(+), 6 deletions(-)
(limited to 'css/reveal.css')
diff --git a/Gruntfile.js b/Gruntfile.js
index 96a4f52..059bb05 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -15,7 +15,7 @@ module.exports = function(grunt) {
' * http://lab.hakim.se/reveal-js\n' +
' * MIT licensed\n' +
' *\n' +
- ' * Copyright (C) 2016 Hakim El Hattab, http://hakim.se\n' +
+ ' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
' */'
},
diff --git a/LICENSE b/LICENSE
index 924cd89..c3e6e5f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (C) 2016 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2017 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 54b065b..22014c5 100644
--- a/README.md
+++ b/README.md
@@ -1168,4 +1168,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
MIT licensed
-Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+Copyright (C) 2017 Hakim El Hattab, http://hakim.se
diff --git a/css/reveal.css b/css/reveal.css
index 82d0767..296c8e9 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* RESET STYLES
diff --git a/css/reveal.scss b/css/reveal.scss
index ce57358..ee3c440 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
*/
diff --git a/js/reveal.js b/js/reveal.js
index 3e4be56..7fad2b1 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
*/
(function( root, factory ) {
if( typeof define === 'function' && define.amd ) {
--
cgit v1.2.3
From 2c9e226fab51763d830754d72e1a92cc839ceacc Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 1 Feb 2017 10:33:43 +0100
Subject: warning about cube/page being deprecated #1774
---
css/reveal.css | 8 ++++++++
css/reveal.scss | 8 ++++++++
2 files changed, 16 insertions(+)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index 296c8e9..cde184a 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -595,6 +595,10 @@ body {
/*********************************************
* CUBE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
*********************************************/
.reveal.cube .slides {
-webkit-perspective: 1300px;
@@ -670,6 +674,10 @@ body {
/*********************************************
* PAGE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
*********************************************/
.reveal.page .slides {
-webkit-perspective-origin: 0% 50%;
diff --git a/css/reveal.scss b/css/reveal.scss
index ee3c440..1972183 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -617,6 +617,10 @@ body {
/*********************************************
* CUBE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
*********************************************/
.reveal.cube .slides {
@@ -689,6 +693,10 @@ body {
/*********************************************
* PAGE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
*********************************************/
.reveal.page .slides {
--
cgit v1.2.3
From 1cee8998a0e423265d7e99feb6a74d627fc306ca Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 17 Feb 2017 10:50:52 +0100
Subject: fix overview rendering issues in latest chrome #1649
---
css/reveal.css | 6 ++----
css/reveal.scss | 8 ++++----
js/reveal.js | 11 +++++++++--
3 files changed, 15 insertions(+), 10 deletions(-)
(limited to 'css/reveal.css')
diff --git a/css/reveal.css b/css/reveal.css
index cde184a..f675977 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1059,6 +1059,8 @@ body {
visibility: visible;
outline: 10px solid rgba(150, 150, 150, 0.1);
outline-offset: 10px; }
+ .reveal.overview .backgrounds .slide-background.stack {
+ overflow: visible; }
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
@@ -1070,10 +1072,6 @@ body {
-webkit-transition: none;
transition: none; }
-.reveal.overview-animated .slides {
- -webkit-transition: -webkit-transform 0.4s ease;
- transition: transform 0.4s ease; }
-
/*********************************************
* RTL SUPPORT
*********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index 1972183..fba248e 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1101,6 +1101,10 @@ body {
outline: 10px solid rgba(150,150,150,0.1);
outline-offset: 10px;
}
+
+ .backgrounds .slide-background.stack {
+ overflow: visible;
+ }
}
// Disable transitions transitions while we're activating
@@ -1115,10 +1119,6 @@ body {
transition: none;
}
-.reveal.overview-animated .slides {
- transition: transform 0.4s ease;
-}
-
/*********************************************
* RTL SUPPORT
diff --git a/js/reveal.js b/js/reveal.js
index d31d591..5325beb 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1797,6 +1797,10 @@
updateProgress();
updateParallax();
+ if( isOverview() ) {
+ updateOverview();
+ }
+
}
}
@@ -2012,11 +2016,14 @@
*/
function updateOverview() {
+ var vmin = Math.min( window.innerWidth, window.innerHeight );
+ var scale = Math.max( vmin / 5, 150 ) / vmin;
+
transformSlides( {
overview: [
+ 'scale('+ scale +')',
'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',
- 'translateY('+ ( -indexv * overviewSlideHeight ) +'px)',
- 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
+ 'translateY('+ ( -indexv * overviewSlideHeight ) +'px)'
].join( ' ' )
} );
--
cgit v1.2.3
From caccf67d3a8016c5ca4a735ec2cfcb6b0720e521 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 27 Apr 2017 16:39:49 +0200
Subject: add for iframe backgrounds
---
README.md | 4 ++--
css/reveal.css | 4 +++-
css/reveal.scss | 4 +++-
3 files changed, 8 insertions(+), 4 deletions(-)
(limited to 'css/reveal.css')
diff --git a/README.md b/README.md
index f03ae0f..99fc651 100644
--- a/README.md
+++ b/README.md
@@ -602,9 +602,9 @@ Automatically plays a full size video behind the slide.
```
##### Iframe Backgrounds
-Embeds a web page as a background. Note that since the iframe is in the background layer, behind your slides, it is not possible to interact with the embedded page.
+Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
```html
-
+
```
diff --git a/css/reveal.css b/css/reveal.css
index f675977..5f501b1 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -377,7 +377,9 @@ body {
opacity: 1; }
.reveal .slides > section:empty,
-.reveal .slides > section > section:empty {
+.reveal .slides > section > section:empty,
+.reveal .slides > section[data-background-interactive],
+.reveal .slides > section > section[data-background-interactive] {
pointer-events: none; }
.reveal.center,
diff --git a/css/reveal.scss b/css/reveal.scss
index fba248e..983e587 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -446,7 +446,9 @@ body {
}
.reveal .slides>section:empty,
-.reveal .slides>section>section:empty {
+.reveal .slides>section>section:empty,
+.reveal .slides>section[data-background-interactive],
+.reveal .slides>section>section[data-background-interactive] {
pointer-events: none;
}
--
cgit v1.2.3