From b7e0d9b1c79a475249777d734a9675b1ba03a47a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 20 Jun 2016 10:27:04 +0200 Subject: [PATCH] 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(-) 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;