From 5d73b97967bc2e0bae42ec8f71a48a70203f4ffa Mon Sep 17 00:00:00 2001
From: Koda <koda.masaru3@gmail.com>
Date: Sat, 2 Dec 2017 21:49:31 +0900
Subject: [PATCH] Change slide fullscreen style

---
 src/main/webapp/css/slide.css | 173 +++++++++++++++++++++-------------
 1 file changed, 106 insertions(+), 67 deletions(-)

diff --git a/src/main/webapp/css/slide.css b/src/main/webapp/css/slide.css
index e2f8d23ac..3f7dad554 100644
--- a/src/main/webapp/css/slide.css
+++ b/src/main/webapp/css/slide.css
@@ -7,36 +7,6 @@
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
 }
-.slideshow-area .slide-image {
-    width    : 100%;
-}
-
-
-@media screen and (max-width: 991px) {
-    .slideshow-area {
-        width: 100%;
-    }
-    .dotArea {
-        display: none;
-    }
-}
-@media screen and (min-width: 992px) {
-    #content .slideshow-area:-webkit-full-screen,
-    #content .slideshow-area:-moz-full-screen, 
-    #content .slideshow-area:-ms-fullscreen,
-    #content .slideshow-area:fullscreen {
-        position : fixed ;
-        left     : 0 ;
-        top      : 0 ;
-        width    : 100% ;
-        height   : 100%;
-    }
-    .slideshow-area {
-        width: 75%;
-    }
-}
-
-
 
 .slideshow-container {
   /*max-width: 1000px;*/
@@ -120,45 +90,86 @@
     background-color: #66cc66;
 }
 
-.slideshow-area:-webkit-full-screen,
-.slideshow-area:-moz-full-screen,
-.slideshow-area:-ms-fullscreen,
+.slideshow-area p > code.hljs {
+    display: inline;
+    padding: 0.1em;
+}
+.slideshow-area li > code.hljs {
+    display: inline;
+    padding: 0.1em;
+}
+
+@media screen and (max-width: 991px) {
+    .slideshow-area {
+        width: 100%;
+    }
+    .dotArea {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .slideshow-area {
+        width: 75%;
+    }
+}
+
+
+.slideshow-area:-webkit-full-screen {
+    position : fixed ;
+    left     : 0 ;
+    top      : 0 ;
+    width    : 100% ;
+    height   : 50%;
+}
+.slideshow-area:-moz-full-screen {
+    position : fixed ;
+    left     : 0 ;
+    top      : 0 ;
+    width    : 100% ;
+    height   : 50%;
+}
+.slideshow-area:-ms-fullscreen {
+    position : fixed ;
+    left     : 0 ;
+    top      : 0 ;
+    width    : 100% ;
+    height   : 50%;
+}
 .slideshow-area:fullscreen {
     position : fixed ;
     left     : 0 ;
     top      : 0 ;
     width    : 100% ;
-    height   : 100%;
+    height   : 50%;
 }
-
-.slideshow-area:-webkit-full-screen .slideshow-container,
-.slideshow-area:-webkit-full-screen .mySlides,
-.slideshow-area:-moz-full-screen .slideshow-container,
-.slideshow-area:-moz-full-screen .mySlides,
-.slideshow-area:-ms-fullscreen .slideshow-container,
-.slideshow-area:-ms-fullscreen .mySlides,
-.slideshow-area:fullscreen .slideshow-container,
-.slideshow-area:fullscreen .mySlides {
-    width    : 100%;
-    height   : 100%;
+.slideshow-area:-webkit-full-screen .slideshow-control {
+    position : fixed ;
+    left     : 0 ;
+    bottom      : 0 ;
+    width    : 100% ;
+    height   : 100px;
+    background-color: black;
+    z-index: 100;
 }
-
-.slideshow-area:-webkit-full-screen .slide-image,
-.slideshow-area:-moz-full-screen .slide-image,
-.slideshow-area:-ms-fullscreen .slide-image,
-.slideshow-area:fullscreen .slide-image {
-    height   : 85%;
-    width    : auto;
-    top: 10;
-    left: 0;
-    right: 0;
-    position: absolute;
-    margin: auto;
+.slideshow-area:-moz-full-screen .slideshow-control {
+    position : fixed ;
+    left     : 0 ;
+    bottom      : 0 ;
+    width    : 100% ;
+    height   : 100px;
+    background-color: black;
+    z-index: 100;
+}
+.slideshow-area:-ms-fullscreen .slideshow-control {
+    position : fixed ;
+    left     : 0 ;
+    bottom      : 0 ;
+    width    : 100% ;
+    height   : 100px;
+    background-color: black;
+    z-index: 100;
 }
-
-.slideshow-area:-webkit-full-screen .slideshow-control,
-.slideshow-area:-moz-full-screen .slideshow-control,
-.slideshow-area:-ms-fullscreen .slideshow-control,
 .slideshow-area:fullscreen .slideshow-control {
     position : fixed ;
     left     : 0 ;
@@ -169,11 +180,39 @@
     z-index: 100;
 }
 
-.slideshow-area p > code.hljs {
-    display: inline;
-    padding: 0.1em;
+.slide-image {
+    width    : 100%;
 }
-.slideshow-area li > code.hljs {
-    display: inline;
-    padding: 0.1em;
+
+.slideshow-area:-webkit-full-screen .slide-image {
+    height : 80vmin;
+    width: auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit- transform: translateX(-50%);
+}
+.slideshow-area:-moz-full-screen .slide-image {
+    height : 80vmin;
+    width: auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit- transform: translateX(-50%);
+}
+.slideshow-area:-ms-fullscreen .slide-image {
+    height : 80vmin;
+    width: auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit- transform: translateX(-50%);
+}
+.slideshow-area:fullscreen .slide-image {
+    height : 80vmin;
+    width: auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit- transform: translateX(-50%);
 }