fix theme backgrounds in firefox fullscreen mode #1386

This commit is contained in:
Hakim El Hattab 2016-06-20 10:27:04 +02:00
parent 8162855d23
commit b7e0d9b1c7
14 changed files with 135 additions and 15 deletions

View File

@ -47,12 +47,6 @@ body {
background-color: #fff; background-color: #fff;
color: #000; } color: #000; }
html:-webkit-full-screen-ancestor {
background-color: inherit; }
html:-moz-full-screen-ancestor {
background-color: inherit; }
/********************************************* /*********************************************
* VIEW FRAGMENTS * VIEW FRAGMENTS
*********************************************/ *********************************************/

View File

@ -57,15 +57,6 @@ body {
color: #000; 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 * VIEW FRAGMENTS

View File

@ -18,6 +18,26 @@ body {
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background-color: #f7f3de; } 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 { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -14,6 +14,14 @@ body {
background: #222; background: #222;
background-color: #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 { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px; font-size: 42px;

View File

@ -17,6 +17,14 @@ body {
background: #222; background: #222;
background-color: #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 { .reveal {
font-family: Ubuntu, "sans-serif"; font-family: Ubuntu, "sans-serif";
font-size: 40px; font-size: 40px;

View File

@ -20,6 +20,26 @@ body {
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background-color: #2b2b2b; } 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 { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -18,6 +18,14 @@ body {
background: #002b36; background: #002b36;
background-color: #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 { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -12,6 +12,14 @@ body {
background: #111; background: #111;
background-color: #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 { .reveal {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -14,6 +14,14 @@ body {
background: #F0F1EB; background: #F0F1EB;
background-color: #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 { .reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 40px; font-size: 40px;

View File

@ -17,6 +17,14 @@ body {
background: #fff; background: #fff;
background-color: #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 { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -21,6 +21,26 @@ body {
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: #f7fbfc; } 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 { .reveal {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -18,6 +18,14 @@ body {
background: #fdf6e3; background: #fdf6e3;
background-color: #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 { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 40px; font-size: 40px;

View File

@ -9,6 +9,17 @@ body {
background-color: $backgroundColor; 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 { .reveal {
font-family: $mainFont; font-family: $mainFont;
font-size: $mainFontSize; font-size: $mainFontSize;

View File

@ -14,6 +14,14 @@ body {
background: #fff; background: #fff;
background-color: #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 { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px; font-size: 42px;