WIP: Update style for mobile (#942)

* Update style for mobile

 - Update style for mobile modale

* Fix overscroll

* Change css properties overflow

* Revert "Change css properties overflow"

This reverts commit 612fcc7e007fb03c7f72e5fa4b8a0604a184ae7d.

* rm image

* Update view mobile

* Fix CI

front/dist/resources/html/CustomCharacterScene.html

@@ -8,11 +8,11 @@
         border-radius: 6px;
         margin: 10px auto 0;
         color: #ebeeee;
-        overflow: scroll;
         width: 42vw;
-        height: 38vh;
-        /*max-width: 300px;*/
-        max-height: 40vh;
+        height: 48vh;
+        /*max-width: 300px;
+        max-height: 48vh;*/
+        overflow: hidden;
     }
     #customizeScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -130,6 +130,7 @@
     @media only screen and (max-width: 600px) {
         #customizeScene {
             max-width: 160px;
+            overflow-y: scroll;
         }
     }
     @media only screen and (max-height: 400px) {

front/dist/resources/html/EnableCameraScene.html

@@ -8,10 +8,10 @@
         border-radius: 6px;
         margin: 20px auto 0;
         color: #ebeeee;
-        max-height: 40vh;
+        max-height: 48vh;
         width: 42vw;
         max-width: 300px;
-        /*overflow: scroll;*/
+        overflow: hidden;
     }
     #enableCameraScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -48,7 +48,7 @@
         text-align: center;
         margin: 0;
         position: absolute;
-        top: 40vh;
+        top: 44vh;
         width: 100%;
     }
     #enableCameraScene button {
@@ -97,6 +97,12 @@
         width: 160px;
         margin: 20px 0;
     }
+    /*@media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #enableCameraScene{
+            overflow-y: scroll;
+        }
+    }*/
 </style>
 
 <form id="enableCameraScene" hidden>

front/dist/resources/html/SelectCompanionScene.html

@@ -9,9 +9,9 @@
         margin: 10px auto 0;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
         max-width: 300px;
         width: 40vw;
+        overflow: hidden;
     }
     #selectCompanionScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -113,6 +113,12 @@
         background-color: #ffd700;
         color: black;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #selectCompanionScene{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="selectCompanionScene" hidden>
@@ -122,7 +128,7 @@
         <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">Back</a>
+        <a herf="#" id="selectCompanionSceneFormBack">No companion</a>
         <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>

front/dist/resources/html/helpCameraSettings.html

@@ -8,9 +8,9 @@
         border-radius: 6px;
         margin: 25px auto 0;
         width: 400px;
-        max-height: calc(50vh - 25px);
-        overflow: scroll;
+        max-height: calc(48vh - 50px);
         max-width: 48vw;
+        overflow: hidden;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -73,6 +73,12 @@
         width: 200px;
         margin-top: 10px;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #helpCameraSettings{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="helpCameraSettings" hidden>

front/dist/resources/html/loginScene.html

@@ -11,7 +11,7 @@
         max-width: 200px;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
+        overflow: hidden;
     }
     #loginScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -93,6 +93,12 @@
         width: 160px;
         margin: 20px 0;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #loginScene{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="loginScene" hidden>

front/dist/resources/html/selectCharacterScene.html

@@ -8,11 +8,10 @@
         border-radius: 6px;
         margin: 10px auto 0;
         color: #ebeeee;
-        max-height: 40vh;
-        overflow: scroll;
+        max-height: 48vh;
         max-width: 300px;
         width: 40vw;
-        overflow: unset;
+        overflow: hidden;
     }
     #selectCharacterScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -118,6 +117,9 @@
     }
     @media only screen and (max-width: 800px),
             only screen and (max-height: 600px) {
+        #selectCharacterScene{
+            overflow-y: scroll;
+        }
         #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
             display: block;
         }