Merge branch 'develop' of github.com:thecodingmachine/workadventure into main

front/style/style.scss

@@ -39,102 +39,93 @@ body .message-info.warning {
 .video-container {
     position: relative;
     transition: all 0.2s ease;
-    height: 100%;
-}
+    background-color: #00000099;
 
-.video-container.nes-container.is-dark {
-    padding: 12px 12px !important;
-}
+    video {
+        width: 100%;
+        height: 100%;
+        max-height: 90vh;
+    }
 
-.video-container i {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    left: calc(50% - 50px);
-    top: calc(50% - 50px);
-    background-color: black;
-    border-radius: 50%;
-    text-align: center;
-    padding-top: 32px;
-    font-size: 28px;
-    color: white;
-    overflow: hidden;
-}
+    i {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        left: calc(50% - 50px);
+        top: calc(50% - 50px);
+        text-align: center;
+        padding-top: 32px;
+        font-size: 28px;
+        color: white;
+        overflow: hidden;
+    }
 
-.video-container img {
-    position: absolute;
-    display: none;
-    width: 40px;
-    height: 40px;
-    left: 5px;
-    bottom: 5px;
-    padding: 10px;
-    z-index: 2;
-}
+    img {
+        position: absolute;
+        display: none;
+        width: 40px;
+        height: 40px;
+        left: 5px;
+        bottom: 5px;
+        padding: 10px;
+        z-index: 2;
+    }
 
-.video-container img.block-logo {
-    left: 30%;
-    bottom: 15%;
-    width: 150px;
-    height: 150px;
-}
+    img.block-logo {
+        left: 30%;
+        bottom: 15%;
+        width: 150px;
+        height: 150px;
+    }
 
-.video-container button.report {
-    display: block;
-    background: none;
-    background-color: rgba(0, 0, 0, 0);
-    border: none;
-    background-color: black;
-    border-radius: 15px;
-    position: absolute;
-    width: 0px;
-    height: 35px;
-    right: 5px;
-    bottom: 5px;
-    padding: 0px;
-    overflow: hidden;
-    z-index: 2;
-    transition: all .5s ease;
-}
+    button.report{
+        display: block;
+        position: absolute;
+        width: 0px;
+        height: 35px;
+        right: 5px;
+        bottom: 5px;
+        padding: 0px;
+        overflow: hidden;
+        z-index: 2;
+        transition: all .5s ease;
 
-.video-container:hover button.report {
-    width: 35px;
-    padding: 10px;
-}
+        img{
+            position: absolute;
+            display: block;
+            bottom: 5px;
+            left: 5px;
+            margin: 0;
+            padding: 0;
+            width: 25px;
+            height: 25px;
+        }
 
-.video-container button.report:hover {
-    width: 160px;
-}
+        span {
+            position: absolute;
+            bottom: 6px;
+            left: 36px;
+            color: white;
+            font-size: 16px;
+        }
 
-.video-container button.report img {
-    position: absolute;
-    display: block;
-    bottom: 5px;
-    left: 5px;
-    margin: 0;
-    padding: 0;
-    width: 25px;
-    height: 25px;
-}
+        img.active {
+            display: block !important;
+        }
+    }
 
-.video-container button.report span {
-    position: absolute;
-    bottom: 6px;
-    left: 36px;
-    color: white;
-    font-size: 16px;
-}
+    &:hover button.report{
+        width: 35px;
+        padding: 10px;
 
-.video-container img.active {
-    display: block !important;
-}
+        &:hover {
+            width: 160px;
+        }
+    }
 
-.video-container video {
-    height: 100%;
-}
-
-.video-container video:focus {
-    outline: none;
+    video:focus{
+        outline: none;
+    }
 }
 
 .video-container.div-myCamVideo{
@@ -213,7 +204,7 @@ video.myCamVideo{
     display: inline-flex;
     bottom: 10px;
     right: 15px;
-    width: 180px;
+    width: 240px;
     height: 40px;
     text-align: center;
     align-content: center;
@@ -230,8 +221,7 @@ video.myCamVideo{
     justify-content: center;
     width: 44px;
     height: 44px;
-    width: auto;
-    transform: translateY(20px);
+    transform: translateY(15px);
     transition-timing-function: ease-in-out;
     margin: 0 4%;
 }
@@ -277,6 +267,16 @@ video.myCamVideo{
 .btn-cam-action:hover .btn-monitor.hide{
     transform: translateY(60px);
 }
+.btn-layout{
+    pointer-events: auto;
+    transition: all .15s;
+}
+.btn-layout.hide {
+    transform: translateY(60px);
+}
+.btn-cam-action:hover .btn-layout.hide{
+    transform: translateY(60px);
+}
 .btn-copy{
     pointer-events: auto;
     transition: all .3s;