Update audiovideo to scss.

Rearrange elements.

Change out colors for variables.

Change out colors for variables.

src/styles/components/_audiolevel.scss

@@ -28,16 +28,16 @@
   width: 400px;
   z-index: 6;
   .audio-level {
-    background: #9dd53a; /* Old browsers */
+    background: $audiovideolevel; /* Old browsers */
-    background: gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
+    background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-    background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+    background: linear-gradient(to bottom, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
     border-radius: 0 0 2px 2px;
     height: 4px;
     left: 0;
     margin: 0 auto;
     position: absolute;
     right: 0;
-    transition: width 0.05s ease-in-out;
+    transition: width .05s ease-in-out;
     width: 0;
   }
 }

src/styles/components/_audiovideo.scss

@@ -18,308 +18,287 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #audiovideo {
+  border-top: 1px solid $bordercolor;
+  bottom: 0;
+  left: 0;
   position: absolute;
-	left:0px;
+  right: 0;
   top: 44px;
-	bottom:0px;
-	right:0px;
-	border-top:1px solid $bordercolor;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-o-user-select: none;
   user-select: none;
 }
-#audiovideo.fullscreen {
+
-	top:0px !important;
+#audiovideo {
-	right:0px !important;
+  &.fullscreen {
-	bottom:0px !important;
-	left:0px !important;
     background: black !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    top: 0 !important;
+    right: 0 !important;
+    .remoteVideo .peerActions {
+      display: none;
+    }
+  }
+  @include breakpt-only-screen($breakpoint-video-small) {
+    right: 0;
   }
-#audiovideo.fullscreen .remoteVideo .peerActions {
+}
+
+.mainScreenshare #audiovideo { 
+  @include breakpt-only-screen($breakpoint-video-medium) {
     display: none;
   }
-.withChat #audiovideo, .withBuddylist #audiovideo {
+}
+
+.withChat #audiovideo,
+.withBuddylist #audiovideo {
   right: 260px;
 }
+
 .withBuddylist.withChat #audiovideo {
   right: 520px;
 }
 
 .audiovideo {
+  bottom: 0;
+  left: 0;
   position: absolute;
-	top:0px;
+  top: 0;
-	left:0px;
+  right: 0;
-	bottom:0px;
+  &.active {
-	right:0px;
-}
-
-.audiovideo.active {
     perspective: 1000;
-	-webkit-perspective: 1000;
+    &:hover .overlayActions {
+      opacity: .3;
     }
-
+    .overlayActions:hover {
-.audiovideo .audiovideoBase {
+      opacity: .6;
+    }
+    .audiovideoBase {
+      transform: rotateY(180deg);
+    }
+  }
+  .audiovideoBase {
     position: relative;
     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 {
-.audiovideo.active .audiovideoBase {
+    bottom: 0;
-	transform: rotateY(180deg);
+    left: 0;
-	-webkit-transform: rotateY(180deg);
+    pointer-events: none;
-}
-
-.audiovideo .localContainer {
     position: absolute;
-	left:0px;
+    right: 0;
-	right:0px;
+    top: 0;
-	top:0px;
-	bottom:0px;
     transform: scale(-1, 1);
-	-webkit-transform: scale(-1, 1);
-	pointer-events:none;
     z-index: 2;
   }
+}
 
-.audiovideo .remoteContainer {
+.audiovideo {
+  .remoteContainer {
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
     position: absolute;
-	left:0px;
+    right: 0;
-	right:0px;
+    top: 0;
-	top:0px;
-	bottom:0px;
     transform: rotateY(180deg);
-	-webkit-transform: rotateY(180deg);
-	pointer-events:none;
     z-index: 2;
   }
-
+  .miniContainer {
-.audiovideo .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: .5s;
-	transition-duration: 0.5s;
+    &.visible {
-	-webkit-transition-duration: 0.5s;
-}
-
-.audiovideo .miniContainer.visible {
       opacity: 1;
     }
-
+  }
-.audiovideo .miniVideo {
+  .miniVideo {
+    display: block;
     max-height: 100%;
     max-width: 100%;
-	display:block;
   }
-
+  .localVideo {
-.audiovideo .localVideo {
+    background: $video-background;
-	width: 100%;
+    display: block;
     max-height: 100%;
     opacity: 0;
     transition-property: opacity;
-	-webkit-transition-property: opacity;
     transition-duration: 2s;
-	-webkit-transition-duration: 2s;
+    width: 100%;
-	background: rgba(0,0,0,0.4);
+  }
-	display:block;
 }
 
 .audiovideo .remoteVideos {
-	position:absolute;
+  bottom: 0;
-	left:0px;
+  left: 0;
-	right:0px;
-	bottom:0px;
-	top:0px;
   opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 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 {
+.audiovideo .remoteVideo{
-
+  background: $video-background;
-	.remoteVideo {
   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);
+  width: 100%;
-		overflow:hidden;
+  &.withvideo {
-	}
-	.remoteVideo.withvideo {
     visibility: visible;
   }
-	.remoteVideo.onlyaudio {
+  &.onlyaudio {
+    background: $video-onlyaudio-background;
     visibility: visible;
-		background: #666;
   }
-	.remoteVideo .onlyaudio {
+  .onlyaudio {
+    color: $video-onlyaudio;
     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%;
   }
-	.remoteVideo.onlyaudio video {
+  &.onlyaudio video {
     display: none;
   }
-	.remoteVideo.onlyaudio .onlyaudio {
+  &.onlyaudio .onlyaudio {
     display: block;
   }
-	.remoteVideo .peerActions {
+  .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: .2s;
-		transition-duration: 0.2s;
+    z-index: 10;
-		-webkit-transition-duration: 0.2s;
+    &:hover {
-		pointer-events:auto;
+      opacity: .5;
     }
-	.remoteVideo .peerActions i {
+    i {
       font-size: 3vw;
     }
-	.remoteVideo .peerActions:hover {
-		opacity:.5;
   }
-	.remoteVideo .peerLabel {
+  .peerLabel {
-		position: absolute;
-		z-index:8;
-		left:4%;
     bottom: 4%;
-		font-size:2.5vw;
     color: white;
-		opacity:.7;
+    left: 4%;
-		text-shadow: 0px 0px 4px black;
+    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;
+  background: $video-overlayactions;
-	left:0px;
+  bottom: 0;
-	top:0px;
-	bottom:0px;
   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;
   }
 }
 
-.audiovideo.active:hover .overlayActions {
+.remoteVideo {
-	opacity: 0.3;
+  &.talking .peerLabel {
-}
+    color: $audiovideolevel;
-
-.audiovideo.active .overlayActions:hover {
-	opacity: 0.6;
   }
-
+  .peerLabel {
-.remoteVideo .peerLabel {
-	-webkit-transition: color 500ms ease-out;
-	-moz-transition: color 500ms ease-out;
-	-o-transition: color 500ms ease-out;
     transition: color 500ms ease-out;
   }
-
+  .overlayLogo {
-.remoteVideo.talking .peerLabel {
+    background: url(../img/logo-overlay.png) no-repeat center;
-	color: #9dd53a;
+    background-size: 100%;
-
+    height: 20%;
-.remoteVideo .overlayLogo {
+    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;
+  }
 }
 
-.miniContainer video {
+.miniContainer {
+  &.talking video {
+    border: 1px solid $audiovideolevel;
+  }
+  video {
     border: 1px solid transparent;
   }
-
+}
-.miniContainer.talking video {
-	border:1px solid #9dd53a;
 
 .renderer-smally {
   width: 150px;
   .remoteVideos {
     padding-bottom: 85px;
   }
-	.miniContainer {
+  .remoteVideo {
-		bottom:0px;
+    .peerLabel {
-		left:0px;
-		right:0px;
-		max-height:none;
-		height:85px;
-	}
-	.remoteVideo .peerLabel {
       font-size: .9em;
       font-weight: bold;
     }
-	.remoteVideo .peerActions i {
+    .peerActions i {
       font-size: 1em;
     }
-	.overlayActions {
+  }
-		display: none;
+  .miniContainer {
+    bottom: 0;
+    height: 85px;
+    left: 0;
+    max-height: none;
+    right: 0;
   }
 }
 
@@ -328,60 +307,47 @@
 
 .renderer-conferencekiosk {
   .remoteVideos {
-		top:auto;
+    background: $video-background;
     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;
     }
-		.peerLabel, .peerActions i {
+    .peerLabel,
+    .peerActions i {
       font-size: 1.1em;
     }
     .peerLabel {
-			background: rgba(0,0,0,0.9);
+      background: $video-overlayactions;
     }
   }
   .miniContainer {
-		max-height: none;
     height: 108px;
+    max-height: none;
     width: 192px;
   }
   .bigVideo {
-		position:absolute;
-		left:0px;
-		right:0px;
     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 {
-	}
-	.bigVideo video {
       width: 100%;
       height: 100%;
     }
-
-}
-
-@media only screen and (max-width: 630px) {
-	.mainScreenshare #audiovideo {
-		display:none;
-	}
-}
-@media only screen and (max-width:590px) {
-	#audiovideo {
-		right:0px;
   }
 }

src/styles/global/_mixins.scss

@@ -4,3 +4,9 @@
     @content;
   }
 }
+
+@mixin breakpt-only-screen($pt) {
+  @media only screen and (max-width: $pt) {
+    @content;
+  }
+}

src/styles/global/_variables.scss

@@ -40,10 +40,18 @@ $grey4: rgba(0,0,0,.4);
 $dgrey: rgb(34,34,34);
 $red: rgb(219,79,57);
 
+$video-background: rgba(0,0,0,.4);
+$video-onlyaudio-background: #666;
+$video-onlyaudio: rgba(255,255,255,.3);
+$video-overlayactions: rgba(0,0,0,.9);
+
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
 
+$breakpoint-video-small: 590px;
+$breakpoint-video-medium: 630px;
+
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
 // compass