merged latest dev

front/style/mobile-style.scss

@@ -1,9 +1,24 @@
+@media (hover: none) {
+  /**
+   * If we cannot hover over elements, let's display camera button in full.
+   */
+  .btn-cam-action {
+    div {
+      transform: translateY(0px);
+    }
+  }
+}
+
 @media screen and (max-width: 700px),
         screen and (max-height: 700px){
-  video#myCamVideo {
+  video.myCamVideo {
     width: 150px;
   }
 
+  .div-myCamVideo.hide {
+    right: -160px;
+  }
+
   .sidebar {
     width: 20%;
     min-width: 200px;
@@ -22,21 +37,6 @@
     }
   }
 
-  .btn-cam-action {
-    min-width: 150px;
-
-    &:hover{
-      transform: translateY(20px);
-    }
-    div {
-      margin: 0 1%;
-      &:hover {
-        background-color: #666;
-      }
-      margin-bottom: 30px;
-    }
-  }
-
   .main-section {
     position: absolute;
     width: 100%;

front/style/style.css

@@ -42,6 +42,10 @@ body .message-info.warning {
     height: 100%;
 }
 
+.video-container.nes-container.is-dark {
+    padding: 12px 12px !important;
+}
+
 .video-container i {
     position: absolute;
     width: 100px;
@@ -133,23 +137,23 @@ body .message-info.warning {
     outline: none;
 }
 
-.video-container#div-myCamVideo {
-    padding: 12px 12px !important;
+.video-container.div-myCamVideo{
+    border: none;
 }
 
-#div-myCamVideo {
-    position: absolute;
+.div-myCamVideo {
+    position: absolute !important;
     right: 15px;
     bottom: 30px;
     max-height: 20%;
     transition: right 350ms;
 }
 
-#div-myCamVideo.hide {
+.div-myCamVideo.hide {
     right: -20vw;
 }
 
-video#myCamVideo {
+video.myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
@@ -219,7 +223,9 @@ video#myCamVideo {
 
 /*btn animation*/
 .btn-cam-action div{
-    /*position: absolute;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 44px;
     height: 44px;
     width: auto;
@@ -278,7 +284,7 @@ video#myCamVideo {
 
 .btn-cam-action div img {
     height: 22px;
-    width: auto;
+    width: 30px;
     position: relative;
     pointer-events: all;
 }
@@ -1299,4 +1305,5 @@ div.action.danger p.action-body {
     width: 100%;
     height: 100%;
     pointer-events: none;
+    z-index: 999;
 }