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 ------ 1 file changed, 6 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index b203074..778076e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -47,12 +47,6 @@ body { background-color: #fff; color: #000; } -html:-webkit-full-screen-ancestor { - background-color: inherit; } - -html:-moz-full-screen-ancestor { - background-color: inherit; } - /********************************************* * VIEW FRAGMENTS *********************************************/ -- cgit v1.2.3 From ce777e4c4b5517bf2210bc9839909413a48f42fa Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 21 Jun 2016 11:27:24 +0200 Subject: Revert "fix theme backgrounds in firefox fullscreen mode #1386" This reverts commit b7e0d9b1c79a475249777d734a9675b1ba03a47a. --- css/reveal.css | 6 ++++++ css/reveal.scss | 9 +++++++++ css/theme/beige.css | 20 -------------------- css/theme/black.css | 8 -------- css/theme/blood.css | 8 -------- css/theme/league.css | 20 -------------------- css/theme/moon.css | 8 -------- css/theme/night.css | 8 -------- css/theme/serif.css | 8 -------- css/theme/simple.css | 8 -------- css/theme/sky.css | 20 -------------------- css/theme/solarized.css | 8 -------- css/theme/template/theme.scss | 11 ----------- css/theme/white.css | 8 -------- 14 files changed, 15 insertions(+), 135 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 778076e..b203074 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -47,6 +47,12 @@ body { background-color: #fff; color: #000; } +html:-webkit-full-screen-ancestor { + background-color: inherit; } + +html:-moz-full-screen-ancestor { + background-color: inherit; } + /********************************************* * VIEW FRAGMENTS *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 9045428..f8d6904 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -57,6 +57,15 @@ body { color: #000; } +// Ensures that the main background color matches the +// theme in fullscreen mode +html:-webkit-full-screen-ancestor { + background-color: inherit; +} +html:-moz-full-screen-ancestor { + background-color: inherit; +} + /********************************************* * VIEW FRAGMENTS diff --git a/css/theme/beige.css b/css/theme/beige.css index d2caeb8..7424a05 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -18,26 +18,6 @@ body { background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background-color: #f7f3de; } -html:-webkit-full-screen-ancestor { - background: #f7f2d3; - background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); - background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background-color: #f7f3de; } - -html:-moz-full-screen-ancestor { - background: #f7f2d3; - background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); - background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background-color: #f7f3de; } - .reveal { font-family: "Lato", sans-serif; font-size: 40px; diff --git a/css/theme/black.css b/css/theme/black.css index 635a2b1..96e4fd4 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -14,14 +14,6 @@ body { background: #222; background-color: #222; } -html:-webkit-full-screen-ancestor { - background: #222; - background-color: #222; } - -html:-moz-full-screen-ancestor { - background: #222; - background-color: #222; } - .reveal { font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 42px; diff --git a/css/theme/blood.css b/css/theme/blood.css index 5a1cee5..1e0fbaf 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -17,14 +17,6 @@ body { background: #222; background-color: #222; } -html:-webkit-full-screen-ancestor { - background: #222; - background-color: #222; } - -html:-moz-full-screen-ancestor { - background: #222; - background-color: #222; } - .reveal { font-family: Ubuntu, "sans-serif"; font-size: 40px; diff --git a/css/theme/league.css b/css/theme/league.css index 6359446..63711c3 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -20,26 +20,6 @@ body { background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background-color: #2b2b2b; } -html:-webkit-full-screen-ancestor { - background: #1c1e20; - background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); - background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background-color: #2b2b2b; } - -html:-moz-full-screen-ancestor { - background: #1c1e20; - background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); - background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background-color: #2b2b2b; } - .reveal { font-family: "Lato", sans-serif; font-size: 40px; diff --git a/css/theme/moon.css b/css/theme/moon.css index e6831b0..791a4a0 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -18,14 +18,6 @@ body { background: #002b36; background-color: #002b36; } -html:-webkit-full-screen-ancestor { - background: #002b36; - background-color: #002b36; } - -html:-moz-full-screen-ancestor { - background: #002b36; - background-color: #002b36; } - .reveal { font-family: "Lato", sans-serif; font-size: 40px; diff --git a/css/theme/night.css b/css/theme/night.css index 6ad1089..3db1175 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -12,14 +12,6 @@ body { background: #111; background-color: #111; } -html:-webkit-full-screen-ancestor { - background: #111; - background-color: #111; } - -html:-moz-full-screen-ancestor { - background: #111; - background-color: #111; } - .reveal { font-family: "Open Sans", sans-serif; font-size: 40px; diff --git a/css/theme/serif.css b/css/theme/serif.css index 60654ef..e9b08c6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -14,14 +14,6 @@ body { background: #F0F1EB; background-color: #F0F1EB; } -html:-webkit-full-screen-ancestor { - background: #F0F1EB; - background-color: #F0F1EB; } - -html:-moz-full-screen-ancestor { - background: #F0F1EB; - background-color: #F0F1EB; } - .reveal { font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-size: 40px; diff --git a/css/theme/simple.css b/css/theme/simple.css index 86f6af6..f64343e 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -17,14 +17,6 @@ body { background: #fff; background-color: #fff; } -html:-webkit-full-screen-ancestor { - background: #fff; - background-color: #fff; } - -html:-moz-full-screen-ancestor { - background: #fff; - background-color: #fff; } - .reveal { font-family: "Lato", sans-serif; font-size: 40px; diff --git a/css/theme/sky.css b/css/theme/sky.css index 6ee8cde..33689eb 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -21,26 +21,6 @@ body { background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background-color: #f7fbfc; } -html:-webkit-full-screen-ancestor { - background: #add9e4; - background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); - background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background-color: #f7fbfc; } - -html:-moz-full-screen-ancestor { - background: #add9e4; - background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); - background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background-color: #f7fbfc; } - .reveal { font-family: "Open Sans", sans-serif; font-size: 40px; diff --git a/css/theme/solarized.css b/css/theme/solarized.css index d554ca9..9bd21aa 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -18,14 +18,6 @@ body { background: #fdf6e3; background-color: #fdf6e3; } -html:-webkit-full-screen-ancestor { - background: #fdf6e3; - background-color: #fdf6e3; } - -html:-moz-full-screen-ancestor { - background: #fdf6e3; - background-color: #fdf6e3; } - .reveal { font-family: "Lato", sans-serif; font-size: 40px; diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 8d4b8a7..bcbaf0c 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -9,17 +9,6 @@ body { background-color: $backgroundColor; } -// Ensures that the main background color matches the -// theme in fullscreen mode -html:-webkit-full-screen-ancestor { - @include bodyBackground(); - background-color: $backgroundColor; -} -html:-moz-full-screen-ancestor { - @include bodyBackground(); - background-color: $backgroundColor; -} - .reveal { font-family: $mainFont; font-size: $mainFontSize; diff --git a/css/theme/white.css b/css/theme/white.css index 1048a6e..7adc605 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -14,14 +14,6 @@ body { background: #fff; background-color: #fff; } -html:-webkit-full-screen-ancestor { - background: #fff; - background-color: #fff; } - -html:-moz-full-screen-ancestor { - background: #fff; - background-color: #fff; } - .reveal { font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 42px; -- cgit v1.2.3 From a12a17b2d7053fad006ae9914309e8fb56c44329 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 21 Jun 2016 11:30:12 +0200 Subject: request fullscreen on documentElement instead of body (#1621 #1624) --- css/reveal.css | 6 ------ css/reveal.scss | 9 --------- js/reveal.js | 4 ++-- 3 files changed, 2 insertions(+), 17 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index b203074..778076e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -47,12 +47,6 @@ body { background-color: #fff; color: #000; } -html:-webkit-full-screen-ancestor { - background-color: inherit; } - -html:-moz-full-screen-ancestor { - background-color: inherit; } - /********************************************* * VIEW FRAGMENTS *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index f8d6904..9045428 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -57,15 +57,6 @@ body { color: #000; } -// Ensures that the main background color matches the -// theme in fullscreen mode -html:-webkit-full-screen-ancestor { - background-color: inherit; -} -html:-moz-full-screen-ancestor { - background-color: inherit; -} - /********************************************* * VIEW FRAGMENTS diff --git a/js/reveal.js b/js/reveal.js index 4999bdb..d8cc4fc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1980,10 +1980,10 @@ */ function enterFullscreen() { - var element = document.body; + var element = document.documentElement; // Check which implementation is available - var requestMethod = element.requestFullScreen || + var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || -- cgit v1.2.3 From bc4fc65da475b1234b32c9eb5070138218abff76 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 1 Aug 2016 09:15:34 +0200 Subject: none/fade/slide transitions use flat transform style, prevents blurred content #1002 --- css/reveal.css | 27 +++++++++++++++++++++++---- css/reveal.scss | 12 +++++++++++- 2 files changed, 34 insertions(+), 5 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 778076e..fae8123 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -341,8 +341,8 @@ body { width: 100%; padding: 20px 0px; z-index: 10; - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; + -webkit-transform-style: flat; + transform-style: flat; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } @@ -463,6 +463,11 @@ body { * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ +.reveal .slides section[data-transition=default], +.reveal.default .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past { @@ -487,6 +492,11 @@ body { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } +.reveal .slides section[data-transition=convex], +.reveal.convex .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past { @@ -514,6 +524,11 @@ body { /********************************************* * CONCAVE TRANSITION *********************************************/ +.reveal .slides section[data-transition=concave], +.reveal.concave .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past { @@ -584,7 +599,9 @@ body { min-height: 700px; -webkit-backface-visibility: hidden; backface-visibility: hidden; - box-sizing: border-box; } + box-sizing: border-box; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .reveal.center.cube .slides section { min-height: 0; } @@ -657,7 +674,9 @@ body { .reveal.page .slides section { padding: 30px; min-height: 700px; - box-sizing: border-box; } + box-sizing: border-box; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .reveal.page .slides section.past { z-index: 12; } diff --git a/css/reveal.scss b/css/reveal.scss index 9045428..c888a27 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -408,7 +408,7 @@ body { padding: 20px 0px; z-index: 10; - transform-style: preserve-3d; + transform-style: flat; transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), @@ -539,6 +539,10 @@ body { *********************************************/ @each $stylename in default, convex { + @include transition-global(#{$stylename}) { + transform-style: preserve-3d; + } + @include transition-horizontal-past(#{$stylename}) { transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } @@ -557,6 +561,10 @@ body { * CONCAVE TRANSITION *********************************************/ +@include transition-global(concave) { + transform-style: preserve-3d; +} + @include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } @@ -607,6 +615,7 @@ body { min-height: 700px; backface-visibility: hidden; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.center.cube .slides section { min-height: 0; @@ -678,6 +687,7 @@ body { padding: 30px; min-height: 700px; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.page .slides section.past { z-index: 12; -- cgit v1.2.3 From 0b9233cf4a1a53297356cbc834c2240a92d20545 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 5 Oct 2016 14:00:40 +0200 Subject: attempt at fixing ff transition bug #1627 --- css/reveal.css | 12 ++++++------ css/reveal.scss | 10 ++++++++-- 2 files changed, 14 insertions(+), 8 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index fae8123..c879c03 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -463,8 +463,8 @@ body { * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides section[data-transition=default], -.reveal.default .slides section:not([data-transition]) { +.reveal .slides section[data-transition=default].stack, +.reveal.default .slides section.stack { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @@ -492,8 +492,8 @@ body { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } -.reveal .slides section[data-transition=convex], -.reveal.convex .slides section:not([data-transition]) { +.reveal .slides section[data-transition=convex].stack, +.reveal.convex .slides section.stack { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @@ -524,8 +524,8 @@ body { /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides section[data-transition=concave], -.reveal.concave .slides section:not([data-transition]) { +.reveal .slides section[data-transition=concave].stack, +.reveal.concave .slides section.stack { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } diff --git a/css/reveal.scss b/css/reveal.scss index c888a27..c5ff05a 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -480,6 +480,12 @@ body { @content; } } +@mixin transition-stack($style) { + .reveal .slides section[data-transition=#{$style}].stack, + .reveal.#{$style} .slides section.stack { + @content; + } +} @mixin transition-horizontal-past($style) { .reveal .slides>section[data-transition=#{$style}].past, .reveal .slides>section[data-transition~=#{$style}-out].past, @@ -539,7 +545,7 @@ body { *********************************************/ @each $stylename in default, convex { - @include transition-global(#{$stylename}) { + @include transition-stack(#{$stylename}) { transform-style: preserve-3d; } @@ -561,7 +567,7 @@ body { * CONCAVE TRANSITION *********************************************/ -@include transition-global(concave) { +@include transition-stack(concave) { transform-style: preserve-3d; } -- cgit v1.2.3 From 7547b893d4421c193974a9e68989cfa20669ac11 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 10 Oct 2016 12:11:27 +0200 Subject: fixes ff overview rendering bug #1649 --- css/reveal.css | 5 ++++- css/reveal.scss | 10 ++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index c879c03..dbabfcb 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1001,6 +1001,8 @@ body { perspective-origin: 50% 50%; -webkit-perspective: 700px; perspective: 700px; } + .reveal.overview .slides { + -moz-transform-style: preserve-3d; } .reveal.overview .slides section { height: 100%; top: 0 !important; @@ -1028,7 +1030,8 @@ body { overflow: visible; } .reveal.overview .backgrounds { -webkit-perspective: inherit; - perspective: inherit; } + perspective: inherit; + -moz-transform-style: preserve-3d; } .reveal.overview .backgrounds .slide-background { opacity: 1; visibility: visible; diff --git a/css/reveal.scss b/css/reveal.scss index c5ff05a..f6a37ad 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1028,6 +1028,12 @@ body { perspective-origin: 50% 50%; perspective: 700px; + .slides { + // Fixes overview rendering errors in FF48+, not applied to + // other browsers since it degrades performance + -moz-transform-style: preserve-3d; + } + .slides section { height: 100%; top: 0 !important; @@ -1060,6 +1066,10 @@ body { .backgrounds { perspective: inherit; + + // Fixes overview rendering errors in FF48+, not applied to + // other browsers since it degrades performance + -moz-transform-style: preserve-3d; } .backgrounds .slide-background { -- cgit v1.2.3 From f2bd9d297018e1af97ebee147a8824bfb61c2bed Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 13 Dec 2016 16:16:51 +0100 Subject: don't show error message while iframe fades in #1577 --- css/reveal.css | 18 ++++++++++++++++++ css/reveal.scss | 10 +++++++++- js/reveal.js | 2 +- 3 files changed, 28 insertions(+), 2 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index dbabfcb..80c1786 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1140,6 +1140,7 @@ body { display: inline-block; width: 40px; height: 40px; + line-height: 36px; padding: 0 10px; float: right; opacity: 0.6; @@ -1188,6 +1189,23 @@ body { opacity: 1; visibility: visible; } +.reveal .overlay.overlay-preview.loaded .viewport-inner { + position: absolute; + z-index: -1; + left: 0; + top: 45%; + width: 100%; + text-align: center; + letter-spacing: normal; } + +.reveal .overlay.overlay-preview .x-frame-error { + opacity: 0; + -webkit-transition: opacity 0.3s ease 0.3s; + transition: opacity 0.3s ease 0.3s; } + +.reveal .overlay.overlay-preview.loaded .x-frame-error { + opacity: 1; } + .reveal .overlay.overlay-preview.loaded .spinner { opacity: 0; visibility: hidden; diff --git a/css/reveal.scss b/css/reveal.scss index 321b3f9..fa7f20d 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1195,6 +1195,7 @@ body { display: inline-block; width: 40px; height: 40px; + line-height: 36px; padding: 0 10px; float: right; opacity: 0.6; @@ -1250,11 +1251,18 @@ body { position: absolute; z-index: -1; left: 0; - top: 60px; + top: 45%; width: 100%; text-align: center; letter-spacing: normal; } + .reveal .overlay.overlay-preview .x-frame-error { + opacity: 0; + transition: opacity 0.3s ease 0.3s; + } + .reveal .overlay.overlay-preview.loaded .x-frame-error { + opacity: 1; + } .reveal .overlay.overlay-preview.loaded .spinner { opacity: 0; diff --git a/js/reveal.js b/js/reveal.js index e9dba2e..7a4bc9e 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1604,7 +1604,7 @@ '
', '', '', - 'This link is refused to display in a frame due to its policy', + 'Unable to load iframe. This is likely due to the site\'s policy (x-frame-options).', '', '
' ].join(''); -- cgit v1.2.3 From 97bb6e9b584f6b4eee33c91e04e5a40da358b7cd Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 15 Dec 2016 14:06:17 +0100 Subject: fragments inherit visibility to avoid conflicts with parent slide visibility --- css/reveal.css | 18 +++++++++--------- css/reveal.scss | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 80c1786..430dcde 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -57,18 +57,18 @@ body { transition: all .2s ease; } .reveal .slides section .fragment.visible { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.grow { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.grow.visible { -webkit-transform: scale(1.3); transform: scale(1.3); } .reveal .slides section .fragment.shrink { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.shrink.visible { -webkit-transform: scale(0.7); transform: scale(0.7); } @@ -82,21 +82,21 @@ body { .reveal .slides section .fragment.fade-out { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.fade-out.visible { opacity: 0; visibility: hidden; } .reveal .slides section .fragment.semi-fade-out { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.semi-fade-out.visible { opacity: 0.5; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.strike { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.strike.visible { text-decoration: line-through; } @@ -133,7 +133,7 @@ body { visibility: hidden; } .reveal .slides section .fragment.current-visible.current-fragment { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, @@ -142,7 +142,7 @@ body { .reveal .slides section .fragment.highlight-blue, .reveal .slides section .fragment.highlight-current-blue { opacity: 1; - visibility: visible; } + visibility: inherit; } .reveal .slides section .fragment.highlight-red.visible { color: #ff2c2d; } diff --git a/css/reveal.scss b/css/reveal.scss index fa7f20d..22fb3fe 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -69,13 +69,13 @@ body { &.visible { opacity: 1; - visibility: visible; + visibility: inherit; } } .reveal .slides section .fragment.grow { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { transform: scale( 1.3 ); @@ -84,7 +84,7 @@ body { .reveal .slides section .fragment.shrink { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { transform: scale( 0.7 ); @@ -101,7 +101,7 @@ body { .reveal .slides section .fragment.fade-out { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { opacity: 0; @@ -111,17 +111,17 @@ body { .reveal .slides section .fragment.semi-fade-out { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { opacity: 0.5; - visibility: visible; + visibility: inherit; } } .reveal .slides section .fragment.strike { opacity: 1; - visibility: visible; + visibility: inherit; &.visible { text-decoration: line-through; @@ -166,7 +166,7 @@ body { &.current-fragment { opacity: 1; - visibility: visible; + visibility: inherit; } } @@ -177,7 +177,7 @@ body { .reveal .slides section .fragment.highlight-blue, .reveal .slides section .fragment.highlight-current-blue { opacity: 1; - visibility: visible; + visibility: inherit; } .reveal .slides section .fragment.highlight-red.visible { color: #ff2c2d -- cgit v1.2.3