fix theme backgrounds in firefox fullscreen mode hakimel#1386

derheap · Feb 22, 2018 · a32fe59 · a32fe59
1 parent b35ef05
commit a32fe59
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;