Hide header of public page in fullscreen mode

The standard Nextcloud header is added automatically outside the
"#app-content" element when using the "user" template, so it is
automatically hidden when "#app-content" is set to fullscreen mode. The
public page uses the "base" template, so it has to provide its own
header element; this element appears inside "#app-content" (probably to
make it transparent using CSS rules during a call), so it has to be
explicitly hidden when in fullscreen mode.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 29 insertions, 0 deletions

diff --git a/css/style.css b/css/style.css
index aecc95158..4325c0357 100644
--- a/css/style.css
+++ b/css/style.css
@@ -518,6 +518,35 @@ video {
 	top: 0;
 }
 
+/* In the public page the header is inside the app-content, so it has to be
+   hidden explicitly. */
+#app-content:-webkit-full-screen #header {
+	display: none !important;
+}
+#app-content:-moz-full-screen #header {
+	display: none !important;
+}
+#app-content:-ms-fullscreen #header {
+	display: none !important;
+}
+#app-content:fullscreen #header {
+	display: none !important;
+}
+
+/* As there is no header the fullscreen button can be moved to the top. */
+#app-content:-webkit-full-screen #video-fullscreen.public {
+	top: 0;
+}
+#app-content:-moz-full-screen #video-fullscreen.public {
+	top: 0;
+}
+#app-content:-ms-fullscreen #video-fullscreen.public {
+	top: 0;
+}
+#app-content:fullscreen #video-fullscreen.public {
+	top: 0;
+}
+
 .localmediaerror h2 {
 	color: red;
 	font-weight: bold;