Update menu mobile

- Add mobile style share modal
- Add mobile style settings modal
- Add menu mobile style

front/dist/resources/html/gameMenu.html

@@ -1,4 +1,7 @@
 <style>
+    #gameMenu main{
+        margin-top: 15px;
+    }
     #gameMenu button {
         background-color: black;
         color: white;
@@ -16,6 +19,21 @@
         width: 32px;
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
+    @media only screen and (max-height: 700px) {
+        #gameMenu main {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            margin-top: 0;
+        }
+        #gameMenu section{
+            margin: 2px;
+        }
+        section#socialLinks{
+            position: relative;
+        }
+    }
 </style>
 
 <div id="gameMenu" hidden>

front/dist/resources/html/gameMenuIcon.html

@@ -3,8 +3,7 @@
         background-color: black;
         color: white;
         border-radius: 7px;
-        height: 28px;
-        width: 34px;
+        padding: 2px 8px;
     }
     #menuIcon button img{
         width: 14px;
@@ -14,6 +13,11 @@
     #menuIcon section {
         margin: 10px;
     }
+    @media only screen and (max-height: 700px) {
+        #menuIcon section {
+            margin: 2px;
+        }
+    }
 </style>
 <main id="menuIcon" hidden>
     <section>

front/dist/resources/html/gameQualityMenu.html

@@ -3,9 +3,9 @@
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        height: 257px;
         margin: 20px auto 0;
-        width: 298px;
+        width: 50vw;
+        max-width: 300px;
     }
     #gameQuality .cautiousText {
         font-size: 50%;
@@ -33,7 +33,7 @@
         color: #696969;
         height: 30px;
         transition: box-shadow 0.3s;
-        width: 240px;
+        width: 100%;
     }
     #gameQuality section {
         margin: 10px;
@@ -42,7 +42,7 @@
         text-align: center;
     }
     #gameQuality button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;

front/dist/resources/html/gameShare.html

@@ -4,8 +4,8 @@
         border: 1px solid #42464b;
         border-radius: 6px;
         margin: 20px auto 0;
-        width: 298px;
-        height: 160px;
+        width: 50vw;
+        max-width: 400px;
     }
     #gameShare h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -40,7 +40,7 @@
         margin: 0;
     }
     #gameShare button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -66,7 +66,7 @@
     }
     #gameShare section p{
         font-size: 8px;
-        margin: 0px 70px;
+        margin: 0;
     }
     #gameShare section p.err{
         color: red;

front/dist/resources/html/helpCameraSettings.html

@@ -3,9 +3,11 @@
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        margin: 10px auto 0;
+        margin: 25px auto 0;
         width: 400px;
-        height: 370px;
+        max-height: calc(50vh - 25px);
+        overflow: scroll;
+        max-width: 50vw;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -20,18 +22,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #helpCameraSettings input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-    }
     #helpCameraSettings section {
         margin: 10px;
     }
@@ -40,7 +30,7 @@
         margin: 0;
     }
     #helpCameraSettings button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;

front/dist/resources/html/loginScene.html

@@ -1,12 +1,14 @@
 <style>
     #loginScene {
-        background: #eceeee;
-        border: 1px solid #42464b;
+        background: #000000;
+        border: 1px solid #ebeeee;
         border-radius: 6px;
         margin: 20px auto 0;
         width: 90%;
         max-width: 200px;
-        height: 200px;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
     }
     #loginScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -42,9 +44,9 @@
         margin: 0;
     }
     #loginScene button {
-        margin-top: 10px;
-        background-color: black;
-        color: white;
+        margin: 10px;
+        background-color: #ebeeee;;
+        color: black;
         border-radius: 7px;
         padding-bottom: 4px;
         width: 100px;
@@ -63,7 +65,7 @@
     #loginScene section a{
         font-size: 8px;
         text-decoration: underline;
-        color: black;
+        color: #ebeeee;
     }
     #loginScene section a:hover{
         font-weight: 700;
@@ -84,9 +86,16 @@
     #loginScene section input#loginSceneLink{
         background-color: #a1a3a3;
     }
+    #loginScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
 </style>
 
 <form id="loginScene" hidden>
+    <section class="text-center">
+        <img src="resources/logos/logo.png">
+    </section>
     <section class="text-center">
         <h5>Enter your name</h5>
         <p class="info">9 chars maximum</p>