Rearrange elements.

src/styles/components/_audiovideo.scss

@@ -31,11 +31,11 @@
 
 #audiovideo {
   &.fullscreen {
-    top: 0 !important;
-    right: 0 !important;
+    background: black !important;
     bottom: 0 !important;
     left: 0 !important;
-    background: black !important;
+    top: 0 !important;
+    right: 0 !important;
     .remoteVideo .peerActions {
       display: none;
     }
@@ -61,18 +61,18 @@
 }
 
 .audiovideo {
+  bottom: 0;
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
-  bottom: 0;
   right: 0;
   &.active {
     perspective: 1000;
     &:hover .overlayActions {
-      opacity: 0.3;
+      opacity: .3;
     }
     .overlayActions:hover {
-      opacity: 0.6;
+      opacity: .6;
     }
     .audiovideoBase {
       transform: rotateY(180deg);
@@ -83,118 +83,106 @@
     width: 100%;
     height: 100%;
     transition-property: transform;
-    -webkit-transition-property: -webkit-transform;
     transition-duration: 2s;
-    -webkit-transition-duration: 2s;
     transform: rotateY(0deg);
-    -webkit-transform: rotateY(0deg);
     z-index: 2;
   }
   .localContainer {
-    position: absolute;
+    bottom: 0;
     left: 0;
+    pointer-events: none;
+    position: absolute;
     right: 0;
     top: 0;
-    bottom: 0;
     transform: scale(-1, 1);
-    -webkit-transform: scale(-1, 1);
-    pointer-events: none;
     z-index: 2;
   }
 }
 
 .audiovideo {
   .remoteContainer {
-    position: absolute;
+    bottom: 0;
     left: 0;
+    pointer-events: none;
+    position: absolute;
     right: 0;
     top: 0;
-    bottom: 0;
     transform: rotateY(180deg);
-    -webkit-transform: rotateY(180deg);
-    pointer-events: none;
     z-index: 2;
   }
   .miniContainer {
-    position: absolute;
-    max-height: 18%;
     bottom: 2px;
+    max-height: 18%;
+    opacity: 0;
+    position: absolute;
     right: 2px;
     transform: scale(-1, 1);
-    -webkit-transform: scale(-1, 1);
-    opacity: 0;
     transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
+    transition-duration: .5s;
     &.visible {
       opacity: 1;
     }
   }
   .miniVideo {
+    display: block;
     max-height: 100%;
     max-width: 100%;
-    display: block;
   }
   .localVideo {
-    width: 100%;
+    background: rgba(0,0,0,.4);
+    display: block;
     max-height: 100%;
     opacity: 0;
     transition-property: opacity;
-    -webkit-transition-property: opacity;
     transition-duration: 2s;
-    -webkit-transition-duration: 2s;
-    background: rgba(0,0,0,0.4);
-    display: block;
+    width: 100%;
   }
 }
 
 .audiovideo .remoteVideos {
-  position: absolute;
+  bottom: 0;
   left: 0;
+  opacity: 0;
+  position: absolute;
   right: 0;
-  bottom: 0;
   top: 0;
-  opacity: 0;
   transition-property: opacity;
-  -webkit-transition-property: opacity;
   transition-duration: 2s;
-  -webkit-transition-duration: 2s;
   video {
-    width: 100%;
-    height: 100%;
     display: block;
+    height: 100%;
+    width: 100%;
   }
 }
 
 .audiovideo .remoteVideo{
+  background: rgba(0,0,0,.4);
   display: inline-block;
-  width: 100%;
-  max-width: 100%;
   max-height: 100%;
-  vertical-align: bottom;
+  max-width: 100%;
+  overflow: hidden;
   position: relative;
+  vertical-align: bottom;
   visibility: hidden;
-  background: rgba(0,0,0,0.4);
-  overflow: hidden;
+  width: 100%;
   &.withvideo {
     visibility: visible;
   }
   &.onlyaudio {
-    visibility: visible;
     background: #666;
+    visibility: visible;
   }
   .onlyaudio {
+    color: rgba(255,255,255,.3);
     display: none;
-    position: absolute;
-    left: 0px;
-    top: 45%;
-    right: 0px;
-    color: rgba(255,255,255,0.3);
-    text-align: center;
     font-size: 80px;
+    left: 0;
     margin-top: -40px;
     pointer-events: auto;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 45%;
   }
   &.onlyaudio video {
     display: none;
@@ -203,18 +191,16 @@
     display: block;
   }
   .peerActions {
-    position: absolute;
-    z-index: 10;
-    left: 0px;
-    right: 0px;
     bottom: 5%;
+    left: 0;
+    opacity: 0;
+    pointer-events: auto;
+    position: absolute;
+    right: 0;
     text-align: center;
-    opacity: .0;
     transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    pointer-events: auto;
+    transition-duration: .2s;
+    z-index: 10;
     &:hover {
       opacity: .5;
     }
@@ -223,41 +209,41 @@
     }
   }
   .peerLabel {
-    position: absolute;
-    z-index: 8;
-    left: 4%;
     bottom: 4%;
-    font-size: 2.5vw;
     color: white;
-    opacity: .7;
-    text-shadow: 0px 0px 4px black;
+    left: 4%;
+    font-size: 2.5vw;
     max-width: 30%;
+    opacity: .7;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     padding: 4px;
+    position: absolute;
+    text-overflow: ellipsis;
+    text-shadow: 0 0 4px black;
+    white-space: nowrap;
+    z-index: 8;
   }
 }
 
 .audiovideo .overlayActions {
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  bottom: 0px;
+  background: rgba(0,0,0,.9);
+  bottom: 0;
   height: 70px;
+  left: 0;
   margin:auto 0;
-  width: 40px;
+  opacity: 0;
   padding: 3px 0;
-  background: rgba(0,0,0,0.9);
+  position: absolute;
+  top: 0;
+  width: 40px;
   z-index: 5;
-  opacity: 0;
   button {
-    width: 40px;
-    display: block;
     color: #ccc;
     cursor: pointer;
-    text-shadow: 0 0 5px black;
+    display: block;
     outline: 0;
+    text-shadow: 0 0 5px black;
+    width: 40px;
   }
 }
 
@@ -269,20 +255,18 @@
     transition: color 500ms ease-out;
   }
   .overlayLogo {
+    background: url(../img/logo-overlay.png) no-repeat center;
+    background-size: 100%;
+    height: 20%;
+    max-height: 40px;
+    max-width: 111px;
+    opacity: .5;
+    pointer-events: none;
     position: absolute;
     right: 4%;
     top: 4%;
     width: 20%;
-    height: 20%;
-    max-height: 40px;
-    max-width: 111px;
-    background-image: url(../img/logo-overlay.png);
-    background-size: 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.5;
     z-index: 2;
-    pointer-events: none;
   }
 }
 
@@ -302,19 +286,19 @@
   }
   .remoteVideo {
     .peerLabel {
-        font-size: .9em;
-        font-weight: bold;
+      font-size: .9em;
+      font-weight: bold;
     }
     .peerActions i {
-        font-size: 1em;
+      font-size: 1em;
     }
   }
   .miniContainer {
     bottom: 0;
+    height: 85px;
     left: 0;
-    right: 0;
     max-height: none;
-    height: 85px;
+    right: 0;
   }
 }
 
@@ -323,17 +307,17 @@
 
 .renderer-conferencekiosk {
   .remoteVideos {
-    top: auto;
+    background: rgba(0,0,0,.4);
     bottom: 2px;
-    text-align: center;
-    background: rgba(0,0,0,0.4);
     min-height: 108px;
     pointer-events: auto;
+    text-align: center;
+    top: auto;
     white-space: nowrap;
     > div {
+      cursor: pointer;
       height: 108px;
       width: 192px;
-      cursor: pointer;
     }
     .overlayLogo {
       display: none;
@@ -343,29 +327,27 @@
       font-size: 1.1em;
     }
     .peerLabel {
-      background: rgba(0,0,0,0.9);
+      background: rgba(0,0,0,.9);
     }
   }
   .miniContainer {
-    max-height: none;
     height: 108px;
+    max-height: none;
     width: 192px;
   }
   .bigVideo {
-    position: absolute;
-    left: 0;
-    right: 0;
     bottom: 112px;
-    top: 2px;
+    left: 0;
     margin: auto;
     opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 2px;
     transition-property: opacity;
-    -webkit-transition-property: opacity;
     transition-duration: 2s;
-    -webkit-transition-duration: 2s;
     video {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
   }
 }