diff options
Diffstat (limited to 'css/reveal.scss')
| -rw-r--r-- | css/reveal.scss | 106 |
1 files changed, 82 insertions, 24 deletions
diff --git a/css/reveal.scss b/css/reveal.scss index f8d6904..983e587 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2016 Hakim El Hattab, http://hakim.se + * Copyright (C) 2017 Hakim El Hattab, http://hakim.se */ @@ -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 @@ -78,13 +69,13 @@ html:-moz-full-screen-ancestor { &.visible { opacity: 1; - visibility: visible; + visibility: inherit; } } .reveal .slides section .fragment.grow { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { transform: scale( 1.3 ); @@ -93,7 +84,7 @@ html:-moz-full-screen-ancestor { .reveal .slides section .fragment.shrink { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { transform: scale( 0.7 ); @@ -110,7 +101,7 @@ html:-moz-full-screen-ancestor { .reveal .slides section .fragment.fade-out { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { opacity: 0; @@ -120,17 +111,17 @@ html:-moz-full-screen-ancestor { .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; @@ -175,7 +166,7 @@ html:-moz-full-screen-ancestor { &.current-fragment { opacity: 1; - visibility: visible; + visibility: inherit; } } @@ -186,7 +177,7 @@ html:-moz-full-screen-ancestor { .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 @@ -397,6 +388,7 @@ html:-moz-full-screen-ancestor { bottom: 0; left: 0; margin: auto; + pointer-events: none; overflow: visible; z-index: 1; @@ -415,9 +407,10 @@ html:-moz-full-screen-ancestor { position: absolute; width: 100%; padding: 20px 0px; + pointer-events: auto; 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), @@ -452,6 +445,13 @@ html:-moz-full-screen-ancestor { opacity: 1; } +.reveal .slides>section:empty, +.reveal .slides>section>section:empty, +.reveal .slides>section[data-background-interactive], +.reveal .slides>section>section[data-background-interactive] { + pointer-events: none; +} + .reveal.center, .reveal.center .slides, .reveal.center .slides section { @@ -489,6 +489,12 @@ html:-moz-full-screen-ancestor { @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, @@ -548,6 +554,10 @@ html:-moz-full-screen-ancestor { *********************************************/ @each $stylename in default, convex { + @include transition-stack(#{$stylename}) { + transform-style: preserve-3d; + } + @include transition-horizontal-past(#{$stylename}) { transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } @@ -566,6 +576,10 @@ html:-moz-full-screen-ancestor { * CONCAVE TRANSITION *********************************************/ +@include transition-stack(concave) { + transform-style: preserve-3d; +} + @include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } @@ -605,6 +619,10 @@ html:-moz-full-screen-ancestor { /********************************************* * CUBE TRANSITION + * + * WARNING: + * this is deprecated and will be removed in a + * future version. *********************************************/ .reveal.cube .slides { @@ -616,6 +634,7 @@ html:-moz-full-screen-ancestor { min-height: 700px; backface-visibility: hidden; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.center.cube .slides section { min-height: 0; @@ -676,6 +695,10 @@ html:-moz-full-screen-ancestor { /********************************************* * PAGE TRANSITION + * + * WARNING: + * this is deprecated and will be removed in a + * future version. *********************************************/ .reveal.page .slides { @@ -687,6 +710,7 @@ html:-moz-full-screen-ancestor { padding: 30px; min-height: 700px; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.page .slides section.past { z-index: 12; @@ -859,6 +883,7 @@ html:-moz-full-screen-ancestor { height: 100%; opacity: 0; visibility: hidden; + overflow: hidden; background-color: rgba( 0, 0, 0, 0 ); background-position: 50% 50%; @@ -875,6 +900,7 @@ html:-moz-full-screen-ancestor { .reveal .slide-background.present { opacity: 1; visibility: visible; + z-index: 2; } .print-pdf .reveal .slide-background { @@ -891,7 +917,11 @@ html:-moz-full-screen-ancestor { max-height: none; top: 0; left: 0; + object-fit: cover; } + .reveal .slide-background[data-background-size="contain"] video { + object-fit: contain; + } /* Immediate transition style */ .reveal[data-background-transition=none]>.backgrounds .slide-background, @@ -1021,6 +1051,12 @@ html:-moz-full-screen-ancestor { 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; @@ -1053,6 +1089,10 @@ html:-moz-full-screen-ancestor { .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 { @@ -1063,6 +1103,10 @@ html:-moz-full-screen-ancestor { outline: 10px solid rgba(150,150,150,0.1); outline-offset: 10px; } + + .backgrounds .slide-background.stack { + overflow: visible; + } } // Disable transitions transitions while we're activating @@ -1077,10 +1121,6 @@ html:-moz-full-screen-ancestor { transition: none; } -.reveal.overview-animated .slides { - transition: transform 0.4s ease; -} - /********************************************* * RTL SUPPORT @@ -1178,6 +1218,7 @@ html:-moz-full-screen-ancestor { display: inline-block; width: 40px; height: 40px; + line-height: 36px; padding: 0 10px; float: right; opacity: 0.6; @@ -1229,6 +1270,23 @@ html:-moz-full-screen-ancestor { 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; + 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; |