From 20238ee1d6cfed6c84cf6d42d168ee4085360a38 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 19 Jan 2017 12:16:30 +0100 Subject: [PATCH] make backgrounds (iframes) interactive when the foreground is empty --- css/reveal.css | 10 +++++++++- css/reveal.scss | 9 +++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/css/reveal.css b/css/reveal.css index 18bb25c..82d0767 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -323,6 +323,7 @@ body { bottom: 0; left: 0; margin: auto; + pointer-events: none; overflow: visible; z-index: 1; text-align: center; @@ -340,6 +341,7 @@ body { position: absolute; width: 100%; padding: 20px 0px; + pointer-events: auto; z-index: 10; -webkit-transform-style: flat; transform-style: flat; @@ -374,6 +376,10 @@ body { z-index: 11; opacity: 1; } +.reveal .slides > section:empty, +.reveal .slides > section > section:empty { + pointer-events: none; } + .reveal.center, .reveal.center .slides, .reveal.center .slides section { @@ -839,6 +845,7 @@ body { height: 100%; opacity: 0; visibility: hidden; + overflow: hidden; background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; @@ -851,7 +858,8 @@ body { .reveal .slide-background.present { opacity: 1; - visibility: visible; } + visibility: visible; + z-index: 2; } .print-pdf .reveal .slide-background { opacity: 1 !important; diff --git a/css/reveal.scss b/css/reveal.scss index 68ff56f..ce57358 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -388,6 +388,7 @@ body { bottom: 0; left: 0; margin: auto; + pointer-events: none; overflow: visible; z-index: 1; @@ -406,6 +407,7 @@ body { position: absolute; width: 100%; padding: 20px 0px; + pointer-events: auto; z-index: 10; transform-style: flat; @@ -443,6 +445,11 @@ body { opacity: 1; } +.reveal .slides>section:empty, +.reveal .slides>section>section:empty { + pointer-events: none; +} + .reveal.center, .reveal.center .slides, .reveal.center .slides section { @@ -866,6 +873,7 @@ body { height: 100%; opacity: 0; visibility: hidden; + overflow: hidden; background-color: rgba( 0, 0, 0, 0 ); background-position: 50% 50%; @@ -882,6 +890,7 @@ body { .reveal .slide-background.present { opacity: 1; visibility: visible; + z-index: 2; } .print-pdf .reveal .slide-background {