Create menu to set your quality video and game

front/dist/resources/style/style.css

@@ -74,6 +74,10 @@ body .message-info.warning{
     height: 100%;
 }
 
+.video-container video:focus{
+    outline: none;
+}
+
 .video-container#div-myCamVideo{
     border: none;
 }
@@ -455,6 +459,8 @@ body {
     flex-grow: 5;
 }
 
+/*CONSOLE*/
+
 .message-container,
 .main-console{
     position: absolute;
@@ -467,6 +473,7 @@ body {
     background: #333333;
     z-index: 200;
     transition: all 0.1s ease-out;
+    border-radius: 0 0 15px 15px;
 }
 
 .message-container{
@@ -499,6 +506,16 @@ body {
     text-align: center;
 }
 
+.main-console div.message,
+.main-console div.setting{
+    display: none;
+}
+
+.main-console div.message.active,
+.main-console div.setting.active{
+    display: block;
+}
+
 .message-container div.clear{
     width: 100px;
     left: calc(50% - 50px);
@@ -648,6 +665,28 @@ body {
     margin-left: 10px;
 }
 
+/* VIDEO QUALITY */
+.main-console div.setting h1{
+    color: white;
+}
+.main-console div.setting select{
+    background: black;
+    color: white;
+    min-width: 280px;
+    text-align: center;
+    min-height: 40px;
+    padding: 10px;
+    border-radius: 15px;
+}
+.main-console div.setting select:focus{
+    border: solid 1px white;
+    outline: none;
+}
+.main-console div.setting.active section{
+    display: block;
+}
+
+
 /*REPORT input*/
 div.modal-report-user{
     position: absolute;