merge develop into main

front/dist/resources/style/style.css

@@ -106,7 +106,7 @@ body .message-info.warning {
 }
 
 .video-container button.report:hover {
-    width: 150px;
+    width: 160px;
 }
 
 .video-container button.report img {
@@ -136,6 +136,7 @@ body .message-info.warning {
 
 .video-container video {
     height: 100%;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .video-container video:focus {
@@ -150,7 +151,7 @@ body .message-info.warning {
     position: absolute;
     right: 15px;
     bottom: 30px;
-    max-height: 200px;
+    max-height: 20%;
 }
 
 video#myCamVideo {
@@ -161,13 +162,63 @@ video#myCamVideo {
     /*height: 113px;*/
 }
 
+.sound-progress {
+    display: none;
+    position: absolute;
+    right: 14px;
+    top: calc(50% - 5px);
+}
+
+.sound-progress.active {
+    display: table-column;
+}
+
+.sound-progress span {
+    position: absolute;
+    color: black;
+    background-color: #00000020;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+}
+
+.sound-progress span.active {
+    background-color: #00c3ff66
+}
+
+.sound-progress span:nth-child(1) {
+    top: calc(50% + 20px);
+}
+
+.sound-progress span:nth-child(2) {
+    top: calc(50% + 10px);
+}
+
+.sound-progress span:nth-child(3) {
+    top: calc(50% - 0px);
+}
+
+.sound-progress span:nth-child(4) {
+    top: calc(50% - 10px);
+}
+
+.sound-progress span:nth-child(5) {
+    top: calc(50% - 20px);
+}
+
 .btn-cam-action {
     pointer-events: all;
     position: absolute;
-    bottom: 0px;
-    right: 0px;
-    width: 300px;
-    height: 50px;
+    display: inline-flex;
+    bottom: 10px;
+    right: 15px;
+    width: 15vw;
+    height: 40px;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
 }
 
 
@@ -175,13 +226,14 @@ video#myCamVideo {
 
 .btn-cam-action div {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-    position: absolute;
+    /*position: absolute;*/
+    width: 44px;
     height: 44px;
     width: auto;
     transform: translateY(20px);
     transition-timing-function: ease-in-out;
-    bottom: 20px;
-    pointer-events: none;
+    margin-bottom: 20px;
+    margin: 0 4%;
 }
 
 .btn-cam-action div.disabled {
@@ -203,21 +255,21 @@ video#myCamVideo {
 }
 
 .btn-micro {
-    pointer-events: auto;
+    pointer-events: none;
     transition: all .3s;
-    right: 44px;
+    /*right: 44px;*/
 }
 
 .btn-video {
-    pointer-events: auto;
+    pointer-events: none;
     transition: all .25s;
-    right: 134px;
+    /*right: 134px;*/
 }
 
 .btn-monitor {
-    pointer-events: auto;
+    pointer-events: none;
     transition: all .2s;
-    right: 224px;
+    /*right: 224px;*/
 }
 
 .btn-copy {
@@ -556,12 +608,20 @@ input[type=range]:focus::-ms-fill-upper {
     /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
 }
 
+.game-overlay+div {
+    pointer-events: none;
+}
+
+.game-overlay+div>div {
+    pointer-events: auto;
+}
+
 .game-overlay.active {
     display: flex;
 }
 
 .game-overlay video {
-    width: 100%
+    width: 100%;
 }
 
 .main-section {
@@ -577,6 +637,7 @@ input[type=range]:focus::-ms-fill-upper {
     flex-basis: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    pointer-events: auto;
     /*flex-shrink: 2;*/
 }
 
@@ -588,20 +649,23 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar {
     flex: 0 0 25%;
     display: flex;
-    pointer-events: none;
 }
 
 .sidebar>div {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-    padding: 12px 12px !important;
+    pointer-events: auto;
 }
 
 .sidebar>div:hover {
     margin: 0%;
 }
 
+.sidebar>div video {
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+}
+
 
 /* Let's make sure videos are vertically centered if they need to be cropped */
 
@@ -1199,7 +1263,17 @@ div.action {
     animation-timing-function: ease-in-out;
 }
 
+div.action.info,
+div.action.warning,
+div.action.danger {
+    transition: all 1s ease;
+    animation: mymove 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+
 div.action p.action-body {
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     padding: 10px;
     font-size: 12px;
     font-weight: 500;
@@ -1207,6 +1281,16 @@ div.action p.action-body {
     max-width: 350px;
 }
 
+div.action.warning p.action-body {
+    background-color: #ff9800eb;
+    color: #000;
+}
+
+div.action.danger p.action-body {
+    background-color: #da0000e3;
+    color: #000;
+}
+
 .popUpElement {
     font-family: 'Press Start 2P';
     text-align: left;