nes.css improvements, fix for camerainfo

front/dist/resources/html/CustomCharacterScene.html

@@ -7,9 +7,9 @@
         color: #ebeeee;
         overflow: auto;
         width: 42vw;
-        height: 38vh;
-        /*max-width: 300px;*/
-        max-height: 40vh;
+        height: 48vh;
+        /*max-width: 300px;
+        max-height: 48vh;*/
     }
     #customizeScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -47,14 +47,6 @@
     #customizeScene section.text-center{
         text-align: center;
     }
-    #customizeScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #customizeScene section a:hover{
-        font-weight: 700;
-    }
     #customizeScene section p{
         text-align: left;
         font-size: 8px;
@@ -107,6 +99,7 @@
     @media only screen and (max-width: 600px) {
         #customizeScene {
             max-width: 160px;
+            overflow-y: scroll;
         }
     }
     @media only screen and (max-height: 400px) {
@@ -130,7 +123,7 @@
         <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
     </section>
     <section class="action">
-        <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
+        <a type="submit" class="nes-btn is-dark" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
         <button type="submit" class="nes-btn" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
     </section>
 </form>

front/dist/resources/html/EnableCameraScene.html

@@ -5,10 +5,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);
@@ -45,7 +45,7 @@
         text-align: center;
         margin: 0;
         position: absolute;
-        top: 40vh;
+        top: 44vh;
         width: 100%;
     }
     #enableCameraScene button#enableCameraSceneFormCancel {
@@ -87,6 +87,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

@@ -42,11 +42,6 @@
     #selectCompanionScene section.text-center{
         text-align: center;
     }
-    #selectCompanionScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
     #selectCompanionScene section a:hover{
         font-weight: 700;
     }
@@ -89,6 +84,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>
@@ -98,7 +99,7 @@
         <button class="selectCharacterButton nes-btn" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" class="nes-btn is-dark" id="selectCompanionSceneFormBack">Back</a>
+        <a herf="#" class="nes-btn is-dark" id="selectCompanionSceneFormBack">No companion</a>
         <button type="submit" class="nes-btn" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>

front/dist/resources/html/helpCameraSettings.html

@@ -5,9 +5,10 @@
         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: auto;
+        padding-bottom: 10px;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -29,22 +30,10 @@
         text-align: center;
         margin: 0;
     }
-    #helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
     #helpCameraSettings button#helpCameraSettingsFormCancel {
         background-color: #c7c7c700;
         color: #292929;
     }
-    #helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
     #helpCameraSettings section h6,
     #helpCameraSettings section h5{
         margin: 1px;
@@ -53,7 +42,7 @@
         text-align: center;
     }
     #helpCameraSettings section p{
-        font-size: 8px;
+        font-size: 7px;
         margin: 0px 20px;
     }
     #helpCameraSettings section p.err{
@@ -64,12 +53,18 @@
     }
     #helpCameraSettings section li{
         text-align: left;
-        font-size: 8px;
+        font-size: 7px;
     }
     #helpCameraSettings section img {
         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>
@@ -86,7 +81,7 @@
         <p id='browserHelpSetting'></p>
     </section>
     <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
+        <a href="#" class="nes-btn" id="helpCameraSettingsFormRefresh">Refresh</a>
+        <button type="submit" class="nes-btn is-warning" id="helpCameraSettingsFormContinue">Continue</button>
     </section>
 </form>

front/dist/resources/html/loginScene.html

@@ -69,6 +69,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

@@ -5,11 +5,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);
@@ -87,6 +86,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;
         }

front/dist/resources/style/cowebsite.scss

@@ -17,7 +17,7 @@
   }
   
   aside {
-    background: gray;
+    background: #212529;
     align-items: center;
     display: flex;
 

front/dist/resources/style/style.css

@@ -162,15 +162,12 @@ video#myCamVideo{
 .btn-cam-action div{
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
-    border: solid 0px black;
-    width: 44px;
     height: 44px;
-    background: #666;
-    box-shadow: 2px 2px 24px #444;
-    border-radius: 48px;
+    width: auto;
     transform: translateY(20px);
     transition-timing-function: ease-in-out;
     bottom: 20px;
+    pointer-events: none;
 }
 .btn-cam-action div.disabled {
     background: #d75555;
@@ -209,11 +206,10 @@ video#myCamVideo{
 }
 .btn-cam-action div img{
     height: 22px;
-    width: 30px;
-    top: calc(48px - 37px);
-    left: calc(48px - 41px);
+    width: auto;
     position: relative;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    pointer-events: all;
 }
 
 /* Spinner */
@@ -1124,7 +1120,7 @@ div.action p.action-body{
     font-size: 12px;
     font-weight: 500;
     text-align: center;
-    max-width: 250px;
+    max-width: 350px;
 }
 .popUpElement{
     font-family: 'Press Start 2P';