grow
shrink
fade-out
+fade-up (also down, left and right!)
current-visible
highlight-red
highlight-blue
-- 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') 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') 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') 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') 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 219a60053a908cba54fdbdaa2cbb28ae596dfe93 Mon Sep 17 00:00:00 2001 From: LaurentTreguier Date: Wed, 17 Feb 2016 20:07:53 +0100 Subject: Change ".video" to ".reveal .video" I don't know if this is supposed to be this way ?--- css/reveal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css') diff --git a/css/reveal.scss b/css/reveal.scss index eb600ac..ad6be67 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -23,7 +23,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; -- cgit v1.2.3 From 587d16ceef9e8f11230d6f183b483388075d3609 Mon Sep 17 00:00:00 2001 From: Dhyego Fernando Date: Thu, 10 Mar 2016 13:50:35 -0400 Subject: fix(PDF Export): Mark as important `width`, `height` and add `zoom` properties to fix CSS rules which were overrided by inline styles --- css/print/pdf.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..e4a1b7d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -60,8 +60,9 @@ ul, ol, div, p { } .reveal .slides { position: static; - width: 100%; - height: auto; + width: 100% !important; + height: auto !important; + zoom: 1 !important; left: auto; top: auto; @@ -157,4 +158,3 @@ ul, ol, div, p { position: absolute; font-size: 14px; } - -- cgit v1.2.3 From a9566dfbd48741b4566b4bdbe07c1222dd48771f Mon Sep 17 00:00:00 2001 From: Vincent Bernat Date: Thu, 24 Mar 2016 16:23:12 +0100 Subject: make theme "simple" use white titles on dark backgrounds This is similar to what is done in the "white" theme. --- css/theme/simple.css | 3 +++ css/theme/source/simple.scss | 5 +++++ 2 files changed, 8 insertions(+) (limited to 'css') diff --git a/css/theme/simple.css b/css/theme/simple.css index b17fa5c..8b48be1 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -7,6 +7,9 @@ */ @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +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 { + color: #fff; } + /********************************************* * GLOBAL STYLES *********************************************/ diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss index 84c7d9b..394c9cd 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/source/simple.scss @@ -31,6 +31,11 @@ $linkColor: #00008B; $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: rgba(0, 0, 0, 0.99); +section.has-dark-background { + &, h1, h2, h3, h4, h5, h6 { + color: #fff; + } +} // Theme template ------------------------------ -- 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') 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 d1a3656108ef0872f2a1179bcb87aa035d60b378 Mon Sep 17 00:00:00 2001 From: Aniqah Mair Date: Wed, 27 Apr 2016 14:50:03 -0400 Subject: Add selection colour for Mozilla Firefox Defines the highlight colour when selecting slide content using Mozilla Firefox to match other browsers, instead of being the default colour. --- css/theme/beige.css | 5 +++++ css/theme/black.css | 5 +++++ css/theme/blood.css | 5 +++++ css/theme/league.css | 5 +++++ css/theme/moon.css | 5 +++++ css/theme/night.css | 5 +++++ css/theme/serif.css | 5 +++++ css/theme/simple.css | 5 +++++ css/theme/sky.css | 5 +++++ css/theme/solarized.css | 5 +++++ css/theme/white.css | 5 +++++ 11 files changed, 55 insertions(+) (limited to 'css') diff --git a/css/theme/beige.css b/css/theme/beige.css index 5bbda4b..7f71dd9 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -29,6 +29,11 @@ body { background: rgba(79, 64, 28, 0.99); text-shadow: none; } +::-moz-selection { + color: #fff; + background: rgba(79, 64, 28, 0.99); + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/black.css b/css/theme/black.css index 511fa79..9228c46 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -25,6 +25,11 @@ body { background: #bee4fd; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #bee4fd; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/blood.css b/css/theme/blood.css index 6fe3d67..2da8d68 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -28,6 +28,11 @@ body { background: #a23; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #a23; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/league.css b/css/theme/league.css index 03c44ce..aa5bee5 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -31,6 +31,11 @@ body { background: #FF5E99; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #FF5E99; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/moon.css b/css/theme/moon.css index 5e5d6e4..5cb1176 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -29,6 +29,11 @@ body { background: #d33682; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #d33682; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/night.css b/css/theme/night.css index a439cdc..cf2c7a7 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -23,6 +23,11 @@ body { background: #e7ad52; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #e7ad52; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/serif.css b/css/theme/serif.css index 40ccb39..bbb9f7e 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -25,6 +25,11 @@ body { background: #26351C; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #26351C; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/simple.css b/css/theme/simple.css index b17fa5c..33809ec 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -25,6 +25,11 @@ body { background: rgba(0, 0, 0, 0.99); text-shadow: none; } +::-moz-selection { + color: #fff; + background: rgba(0, 0, 0, 0.99); + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/sky.css b/css/theme/sky.css index 99f1cfd..202ade8 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -32,6 +32,11 @@ body { background: #134674; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #134674; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/solarized.css b/css/theme/solarized.css index b4d4d4b..44771dc 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -29,6 +29,11 @@ body { background: #d33682; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #d33682; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; diff --git a/css/theme/white.css b/css/theme/white.css index b10dd0e..16a1d23 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -25,6 +25,11 @@ body { background: #98bdef; text-shadow: none; } +::-moz-selection { + color: #fff; + background: #98bdef; + text-shadow: none; } + .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; -- cgit v1.2.3 From 9b11915c3a409aa456c64e9d386ac15598a4fa6b Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 28 Apr 2016 17:07:26 +0200 Subject: fix pdf bg layering, simplify code --- css/print/pdf.css | 14 +++++++------- js/reveal.js | 38 +++++++++----------------------------- 2 files changed, 16 insertions(+), 36 deletions(-) (limited to 'css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..9ae0dfe 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -82,6 +82,12 @@ ul, ol, div, p { perspective-origin: 50% 50%; } +.reveal .slides .pdf-page { + position: relative; + overflow: hidden; + z-index: 1; +} + .reveal .slides section { page-break-after: always !important; @@ -132,13 +138,7 @@ ul, ol, div, p { top: 0; left: 0; width: 100%; - z-index: -1; -} - -/* All elements should be above the slide-background */ -.reveal section>* { - position: relative; - z-index: 1; + height: 100%; } /* Display slide speaker notes when 'showNotes' is enabled */ diff --git a/js/reveal.js b/js/reveal.js index 628c0b9..47b4f01 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -607,8 +607,7 @@ // Wrap the slide in a page element and hide its overflow // so that no page ever flows onto another var page = document.createElement( 'div' ); - page.className = 'page'; - page.style.overflow = 'hidden'; + page.className = 'pdf-page'; page.style.height = ( pageHeight * numberOfPages ) + 'px'; slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); @@ -618,14 +617,8 @@ slide.style.top = top + 'px'; slide.style.width = slideWidth + 'px'; - // TODO Backgrounds need to be multiplied when the slide - // stretches over multiple pages - var background = slide.querySelector( '.slide-background' ); - if( background ) { - background.style.width = pageWidth + 'px'; - background.style.height = ( pageHeight * numberOfPages ) + 'px'; - background.style.top = -top + 'px'; - background.style.left = -left + 'px'; + if( slide.slideBackgroundElement ) { + page.insertBefore( slide.slideBackgroundElement, slide ); } // Inject notes if `showNotes` is enabled @@ -653,7 +646,7 @@ numberElement.classList.add( 'slide-number' ); numberElement.classList.add( 'slide-number-pdf' ); numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV ); - background.appendChild( numberElement ); + page.appendChild( numberElement ); } } @@ -733,24 +726,12 @@ // Iterate over all horizontal slides toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { - var backgroundStack; - - if( printMode ) { - backgroundStack = createBackground( slideh, slideh ); - } - else { - backgroundStack = createBackground( slideh, dom.background ); - } + var backgroundStack = createBackground( slideh, dom.background ); // Iterate over all vertical slides toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { - if( printMode ) { - createBackground( slidev, slidev ); - } - else { - createBackground( slidev, backgroundStack ); - } + createBackground( slidev, backgroundStack ); backgroundStack.classList.add( 'stack' ); @@ -846,6 +827,8 @@ slide.classList.remove( 'has-dark-background' ); slide.classList.remove( 'has-light-background' ); + slide.slideBackgroundElement = element; + // If this slide has a background color, add a class that // signals if it is light or dark. If the slide has no background // color, no class will be set @@ -3406,10 +3389,7 @@ if( isPrintingPDF() ) { var slide = getSlide( x, y ); if( slide ) { - var background = slide.querySelector( '.slide-background' ); - if( background && background.parentNode === slide ) { - return background; - } + return slide.slideBackgroundElement; } return undefined; -- cgit v1.2.3 From e2a863405782709e8cd30227f8b1157acc30fa19 Mon Sep 17 00:00:00 2001 From: 黄玄 Date: Mon, 2 May 2016 01:42:11 +0800 Subject: add refused-to-display tips in link-preview-overlay --- css/reveal.scss | 10 ++++++++++ js/reveal.js | 3 +++ 2 files changed, 13 insertions(+) (limited to 'css') diff --git a/css/reveal.scss b/css/reveal.scss index f8d6904..c360fe6 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1229,6 +1229,16 @@ html:-moz-full-screen-ancestor { visibility: visible; } + .reveal .overlay.overlay-preview.loaded .viewport-inner { + position: absolute; + z-index: -1; + left: 0; + top: 60px; + width: 100%; + text-align: center; + letter-spacing: normal; + } + .reveal .overlay.overlay-preview.loaded .spinner { opacity: 0; visibility: hidden; diff --git a/js/reveal.js b/js/reveal.js index 10c609e..e772516 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1500,6 +1500,9 @@ '', '' ].join(''); -- cgit v1.2.3 From 187114f47224b4628350a6046c6f758bce83f6c1 Mon Sep 17 00:00:00 2001 From: Tiago Garcia Date: Sat, 21 May 2016 11:36:49 -0700 Subject: Removing duplicated "position" property at pdf.css Found that by running css-lint on the code--- css/print/pdf.css | 1 - 1 file changed, 1 deletion(-) (limited to 'css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..3dc577d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -86,7 +86,6 @@ ul, ol, div, p { page-break-after: always !important; visibility: visible !important; - position: relative !important; display: block !important; position: relative !important; -- cgit v1.2.3 From 6593ac3d5f83ec49b168d49d7963146e67fd0e79 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 23 May 2016 10:38:46 +0200 Subject: moz selection color in theme template #1575 --- css/theme/template/theme.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'css') diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 101a567..bcbaf0c 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -22,6 +22,12 @@ body { text-shadow: none; } +::-moz-selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + .reveal .slides>section, .reveal .slides>section>section { line-height: 1.3; -- cgit v1.2.3 From 3111d3b1ae12af2580cb45a18da208146701a6fd Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 26 May 2016 09:57:19 +0200 Subject: support for 'separate-page' layout for notes in PDF exports #1518 --- README.md | 2 +- css/print/pdf.css | 13 ++++++++++++- js/reveal.js | 21 +++++++++++++++++---- 3 files changed, 30 insertions(+), 6 deletions(-) (limited to 'css') diff --git a/README.md b/README.md index 56dad41..b275846 100644 --- a/README.md +++ b/README.md @@ -890,7 +890,7 @@ This will only display in the notes window. Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations. -When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). +When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`. ## Server Side Speaker Notes diff --git a/css/print/pdf.css b/css/print/pdf.css index 406f125..fb56129 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -145,11 +145,22 @@ ul, ol, div, p { display: block; width: 100%; max-height: none; - left: auto; top: auto; + right: auto; + bottom: auto; + left: auto; z-index: 100; } +/* Layout option which makes notes appear on a separate page */ +.reveal .speaker-notes-pdf[data-layout="separate-page"] { + position: relative; + color: inherit; + background-color: transparent; + padding: 20px; + page-break-after: always; +} + /* Display slide numbers when 'slideNumber' is enabled */ .reveal .slide-number-pdf { display: block; diff --git a/js/reveal.js b/js/reveal.js index 656ed10..f43e0aa 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -624,18 +624,31 @@ // Inject notes if `showNotes` is enabled if( config.showNotes ) { + + // Are there notes for this slide? var notes = getSlideNotes( slide ); if( notes ) { + var notesSpacing = 8; + var notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline'; var notesElement = document.createElement( 'div' ); notesElement.classList.add( 'speaker-notes' ); notesElement.classList.add( 'speaker-notes-pdf' ); + notesElement.setAttribute( 'data-layout', notesLayout ); notesElement.innerHTML = notes; - notesElement.style.left = ( notesSpacing - left ) + 'px'; - notesElement.style.bottom = ( notesSpacing - top ) + 'px'; - notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px'; - slide.appendChild( notesElement ); + + if( notesLayout === 'separate-page' ) { + page.parentNode.insertBefore( notesElement, page.nextSibling ); + } + else { + notesElement.style.left = ( notesSpacing - left ) + 'px'; + notesElement.style.bottom = ( notesSpacing - top ) + 'px'; + notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px'; + slide.appendChild( notesElement ); + } + } + } // Inject slide numbers if `slideNumbers` are enabled -- cgit v1.2.3 From 8162855d23601e66a25ba79dd4013ef416c4f1b4 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 10 Jun 2016 10:58:40 +0200 Subject: increase default font sizes, adjust config defaults for less margings and larger max scale #1605 --- css/theme/beige.css | 2 +- css/theme/black.css | 2 +- css/theme/blood.css | 2 +- css/theme/league.css | 2 +- css/theme/moon.css | 2 +- css/theme/night.css | 2 +- css/theme/serif.css | 2 +- css/theme/simple.css | 2 +- css/theme/sky.css | 2 +- css/theme/solarized.css | 2 +- css/theme/source/black.scss | 2 +- css/theme/source/blood.scss | 1 - css/theme/source/night.scss | 1 - css/theme/source/white.scss | 2 +- css/theme/template/settings.scss | 2 +- css/theme/white.css | 2 +- demo.html | 2 ++ js/reveal.js | 4 ++-- 18 files changed, 18 insertions(+), 18 deletions(-) (limited to 'css') diff --git a/css/theme/beige.css b/css/theme/beige.css index 7f71dd9..7424a05 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -20,7 +20,7 @@ body { .reveal { font-family: "Lato", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #333; } diff --git a/css/theme/black.css b/css/theme/black.css index 9228c46..96e4fd4 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -16,7 +16,7 @@ body { .reveal { font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 38px; + font-size: 42px; font-weight: normal; color: #fff; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 2da8d68..1e0fbaf 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -19,7 +19,7 @@ body { .reveal { font-family: Ubuntu, "sans-serif"; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #eee; } diff --git a/css/theme/league.css b/css/theme/league.css index aa5bee5..63711c3 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -22,7 +22,7 @@ body { .reveal { font-family: "Lato", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #eee; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 5cb1176..791a4a0 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -20,7 +20,7 @@ body { .reveal { font-family: "Lato", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #93a1a1; } diff --git a/css/theme/night.css b/css/theme/night.css index cf2c7a7..3db1175 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -14,7 +14,7 @@ body { .reveal { font-family: "Open Sans", sans-serif; - font-size: 30px; + font-size: 40px; font-weight: normal; color: #eee; } diff --git a/css/theme/serif.css b/css/theme/serif.css index bbb9f7e..e9b08c6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -16,7 +16,7 @@ body { .reveal { font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #000; } diff --git a/css/theme/simple.css b/css/theme/simple.css index cb840d9..f64343e 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -19,7 +19,7 @@ body { .reveal { font-family: "Lato", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #000; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 202ade8..33689eb 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -23,7 +23,7 @@ body { .reveal { font-family: "Open Sans", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #333; } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 44771dc..9bd21aa 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -20,7 +20,7 @@ body { .reveal { font-family: "Lato", sans-serif; - font-size: 36px; + font-size: 40px; font-weight: normal; color: #657b83; } diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index 5f7f601..84e8d9a 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -21,7 +21,7 @@ $backgroundColor: #222; $mainColor: #fff; $headingColor: #fff; -$mainFontSize: 38px; +$mainFontSize: 42px; $mainFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss index d22b53d..4533fc0 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -28,7 +28,6 @@ $backgroundColor: $coal; // Main text $mainFont: Ubuntu, 'sans-serif'; -$mainFontSize: 36px; $mainColor: #eee; // Headings diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss index b0cb57f..d49a282 100644 --- a/css/theme/source/night.scss +++ b/css/theme/source/night.scss @@ -27,7 +27,6 @@ $headingTextShadow: none; $headingLetterSpacing: -0.03em; $headingTextTransform: none; $selectionBackgroundColor: #e7ad52; -$mainFontSize: 30px; // Theme template ------------------------------ diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss index 6758ce0..7f06ffd 100644 --- a/css/theme/source/white.scss +++ b/css/theme/source/white.scss @@ -21,7 +21,7 @@ $backgroundColor: #fff; $mainColor: #222; $headingColor: #222; -$mainFontSize: 38px; +$mainFontSize: 42px; $mainFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index ffaac23..63c02cf 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -6,7 +6,7 @@ $backgroundColor: #2b2b2b; // Primary/body text $mainFont: 'Lato', sans-serif; -$mainFontSize: 36px; +$mainFontSize: 40px; $mainColor: #eee; // Vertical spacing between blocks of text diff --git a/css/theme/white.css b/css/theme/white.css index 16a1d23..7adc605 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -16,7 +16,7 @@ body { .reveal { font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 38px; + font-size: 42px; font-weight: normal; color: #222; } diff --git a/demo.html b/demo.html index 36ad224..632e8d6 100644 --- a/demo.html +++ b/demo.html @@ -391,6 +391,8 @@ Reveal.addEventListener( 'customevent', function() { history: true, center: true, + width: 1000, + transition: 'slide', // none/fade/slide/convex/concave/zoom // More info https://github.com/hakimel/reveal.js#dependencies diff --git a/js/reveal.js b/js/reveal.js index 3de52c5..4999bdb 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -43,11 +43,11 @@ height: 700, // Factor of the display size that should remain empty around the content - margin: 0.1, + margin: 0.04, // Bounds for smallest/largest possible scale to apply to content minScale: 0.2, - maxScale: 1.5, + maxScale: 2.0, // Display controls in the bottom right corner controls: true, -- 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') 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') 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') 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') 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') 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') 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 659822a8b50f501c68204e957df2d99be7693d01 Mon Sep 17 00:00:00 2001 From: christikaes Date: Sun, 30 Oct 2016 11:31:20 -0400 Subject: Hide slide number when in paper or pdf print view --- css/print/paper.css | 5 +++-- css/print/pdf.css | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'css') diff --git a/css/print/paper.css b/css/print/paper.css index 6588f48..27d19dd 100644 --- a/css/print/paper.css +++ b/css/print/paper.css @@ -38,7 +38,8 @@ .share-reveal, .state-background, .reveal .progress, - .reveal .backgrounds { + .reveal .backgrounds, + .reveal .slide-number { display: none !important; } @@ -199,4 +200,4 @@ font-size: 0.8em; } -} \ No newline at end of file +} diff --git a/css/print/pdf.css b/css/print/pdf.css index 4bfcddc..e114ca8 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -31,7 +31,8 @@ html { .reveal.overview, .fork-reveal, .share-reveal, -.state-background { +.state-background, +.reveal .slide-number { display: none !important; } -- cgit v1.2.3 From 80e28774dd52e731804a41adfe8d03bd8739851f Mon Sep 17 00:00:00 2001 From: Christi Kaes Date: Sun, 30 Oct 2016 14:11:10 -0400 Subject: Don't remove slide-number in pdf view --- css/print/pdf.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'css') diff --git a/css/print/pdf.css b/css/print/pdf.css index e114ca8..4bfcddc 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -31,8 +31,7 @@ html { .reveal.overview, .fork-reveal, .share-reveal, -.state-background, -.reveal .slide-number { +.state-background { display: none !important; } -- 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') 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 @@ '' ].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') 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') 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