From 63af6e446216278ebf40cb32a0148381e9620303 Mon Sep 17 00:00:00 2001
From: Evan Theurer <theurer@struktur.de>
Date: Mon, 5 May 2014 16:13:40 +0200
Subject: [PATCH] Update audiovideo to scss.

Rearrange elements.

Change out colors for variables.

Change out colors for variables.
---
 src/styles/components/_audiolevel.scss |   8 +-
 src/styles/components/_audiovideo.scss | 630 ++++++++++++-------------
 src/styles/global/_mixins.scss         |   6 +
 src/styles/global/_variables.scss      |   8 +
 4 files changed, 316 insertions(+), 336 deletions(-)

diff --git a/src/styles/components/_audiolevel.scss b/src/styles/components/_audiolevel.scss
index 74de01b0..5d59369d 100644
--- a/src/styles/components/_audiolevel.scss
+++ b/src/styles/components/_audiolevel.scss
@@ -28,16 +28,16 @@
   width: 400px;
   z-index: 6;
   .audio-level {
-    background: #9dd53a; /* 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: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+    background: $audiovideolevel; /* Old browsers */
+    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, $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;
   }
 }
diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss
index 852ceac0..b985a3ab 100644
--- a/src/styles/components/_audiovideo.scss
+++ b/src/styles/components/_audiovideo.scss
@@ -18,370 +18,336 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-#audiovideo {
-	position:absolute;
-	left:0px;
-	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;
-	right:0px !important;
-	bottom:0px !important;
-	left:0px !important;
-	background:black !important;
-}
-#audiovideo.fullscreen .remoteVideo .peerActions {
-	display:none;
-}
-.withChat #audiovideo, .withBuddylist #audiovideo {
-	right:260px;
-}
-.withBuddylist.withChat #audiovideo {
-	right:520px;
-}
-
-.audiovideo {
-	position:absolute;
-	top:0px;
-	left:0px;
-	bottom:0px;
-	right:0px;
-}
-
-.audiovideo.active {
-	perspective: 1000;
-	-webkit-perspective: 1000;
-}
-
-.audiovideo .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;
-}
 
-.audiovideo.active .audiovideoBase {
-	transform: rotateY(180deg);
-	-webkit-transform: rotateY(180deg);
+#audiovideo {
+  border-top: 1px solid $bordercolor;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 44px;
+  user-select: none;
 }
 
-.audiovideo .localContainer {
-	position: absolute;
-	left:0px;
-	right:0px;
-	top:0px;
-	bottom:0px;
-	transform: scale(-1, 1);
-	-webkit-transform: scale(-1, 1);
-	pointer-events:none;
-	z-index:2;
+#audiovideo {
+  &.fullscreen {
+    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 .remoteContainer {
-	position: absolute;
-	left:0px;
-	right:0px;
-	top:0px;
-	bottom:0px;
-	transform: rotateY(180deg);
-	-webkit-transform: rotateY(180deg);
-	pointer-events:none;
-	z-index:2;
+.mainScreenshare #audiovideo { 
+  @include breakpt-only-screen($breakpoint-video-medium) {
+    display: none;
+  }
 }
 
-.audiovideo .miniContainer {
-	position: absolute;
-	max-height: 18%;
-	bottom: 2px;
-	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;
+.withChat #audiovideo,
+.withBuddylist #audiovideo {
+  right: 260px;
 }
 
-.audiovideo .miniContainer.visible {
-	opacity: 1;
+.withBuddylist.withChat #audiovideo {
+  right: 520px;
 }
 
-.audiovideo .miniVideo {
-	max-height: 100%;
-	max-width:100%;
-	display:block;
+.audiovideo {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  &.active {
+    perspective: 1000;
+    &:hover .overlayActions {
+      opacity: .3;
+    }
+    .overlayActions:hover {
+      opacity: .6;
+    }
+    .audiovideoBase {
+      transform: rotateY(180deg);
+    }
+  }
+  .audiovideoBase {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition-property: transform;
+    transition-duration: 2s;
+    transform: rotateY(0deg);
+    z-index: 2;
+  }
+  .localContainer {
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: scale(-1, 1);
+    z-index: 2;
+  }
 }
 
-.audiovideo .localVideo {
-	width: 100%;
-	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;
+.audiovideo {
+  .remoteContainer {
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: rotateY(180deg);
+    z-index: 2;
+  }
+  .miniContainer {
+    bottom: 2px;
+    max-height: 18%;
+    opacity: 0;
+    position: absolute;
+    right: 2px;
+    transform: scale(-1, 1);
+    transition-property: opacity;
+    transition-duration: .5s;
+    &.visible {
+      opacity: 1;
+    }
+  }
+  .miniVideo {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+  }
+  .localVideo {
+    background: $video-background;
+    display: block;
+    max-height: 100%;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: 2s;
+    width: 100%;
+  }
 }
 
 .audiovideo .remoteVideos {
-	position:absolute;
-	left:0px;
-	right:0px;
-	bottom:0px;
-	top:0px;
-	opacity: 0;
-	transition-property: opacity;
-	-webkit-transition-property: opacity;
-	transition-duration: 2s;
-	-webkit-transition-duration: 2s;
-
-	video {
-		width:100%;
-		height:100%;
-		display:block;
-	}
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-property: opacity;
+  transition-duration: 2s;
+  video {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
 }
 
-.audiovideo {
-
-	.remoteVideo {
-		display: inline-block;
-		width:100%;
-		max-width:100%;
-		max-height:100%;
-		vertical-align:bottom;
-		position:relative;
-		visibility:hidden;
-		background: rgba(0,0,0,0.4);
-		overflow:hidden;
-	}
-	.remoteVideo.withvideo {
-		visibility:visible;
-	}
-	.remoteVideo.onlyaudio {
-		visibility:visible;
-		background: #666;
-	}
-	.remoteVideo .onlyaudio {
-		display:none;
-		position:absolute;
-		left:0px;
-		top:45%;
-		right:0px;
-		color:rgba(255,255,255,0.3);
-		text-align:center;
-		font-size:80px;
-		margin-top:-40px;
-		pointer-events:auto;
-	}
-	.remoteVideo.onlyaudio video {
-		display:none;
-	}
-	.remoteVideo.onlyaudio .onlyaudio {
-		display:block;
-	}
-	.remoteVideo .peerActions {
-		position: absolute;
-		z-index: 10;
-		left:0px;
-		right:0px;
-		bottom:5%;
-		text-align:center;
-		opacity:.0;
-		transition-property: opacity;
-		-webkit-transition-property: opacity;
-		transition-duration: 0.2s;
-		-webkit-transition-duration: 0.2s;
-		pointer-events:auto;
-	}
-	.remoteVideo .peerActions i {
-		font-size:3vw;
-	}
-	.remoteVideo .peerActions:hover {
-		opacity:.5;
-	}
-	.remoteVideo .peerLabel {
-		position: absolute;
-		z-index:8;
-		left:4%;
-		bottom:4%;
-		font-size:2.5vw;
-		color:white;
-		opacity:.7;
-		text-shadow: 0px 0px 4px black;
-		max-width:30%;
-		overflow:hidden;
-		white-space:nowrap;
-		text-overflow:ellipsis;
-		padding:4px;
-	}
-
+.audiovideo .remoteVideo{
+  background: $video-background;
+  display: inline-block;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  vertical-align: bottom;
+  visibility: hidden;
+  width: 100%;
+  &.withvideo {
+    visibility: visible;
+  }
+  &.onlyaudio {
+    background: $video-onlyaudio-background;
+    visibility: visible;
+  }
+  .onlyaudio {
+    color: $video-onlyaudio;
+    display: none;
+    font-size: 80px;
+    left: 0;
+    margin-top: -40px;
+    pointer-events: auto;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 45%;
+  }
+  &.onlyaudio video {
+    display: none;
+  }
+  &.onlyaudio .onlyaudio {
+    display: block;
+  }
+  .peerActions {
+    bottom: 5%;
+    left: 0;
+    opacity: 0;
+    pointer-events: auto;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    transition-property: opacity;
+    transition-duration: .2s;
+    z-index: 10;
+    &:hover {
+      opacity: .5;
+    }
+    i {
+      font-size: 3vw;
+    }
+  }
+  .peerLabel {
+    bottom: 4%;
+    color: white;
+    left: 4%;
+    font-size: 2.5vw;
+    max-width: 30%;
+    opacity: .7;
+    overflow: hidden;
+    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;
-	height:70px;
-	margin:auto 0;
-	width:40px;
-	padding:3px 0;
-	background: rgba(0,0,0,0.9);
-	z-index:5;
-	opacity:0;
-
-	button {
-		width:40px;
-		display: block;
-		color:#ccc;
-		cursor:pointer;
-		text-shadow: 0 0 5px black;
-		outline: 0;
-	}
-}
-
-.audiovideo.active:hover .overlayActions {
-	opacity: 0.3;
-}
-
-.audiovideo.active .overlayActions:hover {
-	opacity: 0.6;
+  background: $video-overlayactions;
+  bottom: 0;
+  height: 70px;
+  left: 0;
+  margin:auto 0;
+  opacity: 0;
+  padding: 3px 0;
+  position: absolute;
+  top: 0;
+  width: 40px;
+  z-index: 5;
+  button {
+    color: #ccc;
+    cursor: pointer;
+    display: block;
+    outline: 0;
+    text-shadow: 0 0 5px black;
+    width: 40px;
+  }
 }
 
-.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;
+.remoteVideo {
+  &.talking .peerLabel {
+    color: $audiovideolevel;
+  }
+  .peerLabel {
+    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%;
+    z-index: 2;
+  }
 }
 
-.remoteVideo.talking .peerLabel {
-	color: #9dd53a;
-
-.remoteVideo .overlayLogo {
-	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 {
+  &.talking video {
+    border: 1px solid $audiovideolevel;
+  }
+  video {
+    border: 1px solid transparent;
+  }
 }
 
-.miniContainer video {
-	border:1px solid transparent;
-}
-
-.miniContainer.talking video {
-	border:1px solid #9dd53a;
-
 .renderer-smally {
-	width:150px;
-	.remoteVideos {
-		padding-bottom: 85px;
-	}
-	.miniContainer {
-		bottom:0px;
-		left:0px;
-		right:0px;
-		max-height:none;
-		height:85px;
-	}
-	.remoteVideo .peerLabel {
-		font-size:.9em;
-		font-weight:bold;
-	}
-	.remoteVideo .peerActions i {
-		font-size:1em;
-	}
-	.overlayActions {
-		display: none;
-	}
+  width: 150px;
+  .remoteVideos {
+    padding-bottom: 85px;
+  }
+  .remoteVideo {
+    .peerLabel {
+      font-size: .9em;
+      font-weight: bold;
+    }
+    .peerActions i {
+      font-size: 1em;
+    }
+  }
+  .miniContainer {
+    bottom: 0;
+    height: 85px;
+    left: 0;
+    max-height: none;
+    right: 0;
+  }
 }
 
 .renderer-onepeople {
 }
 
 .renderer-conferencekiosk {
-	.remoteVideos {
-		top:auto;
-		bottom:2px;
-		text-align:center;
-		background:rgba(0,0,0,0.4);
-		min-height:108px;
-		pointer-events:auto;
-		white-space:nowrap;
-		>div {
-			height:108px;
-			width:192px;
-			cursor:pointer;
-		}
-		.overlayLogo {
-			display:none;
-		}
-		.peerLabel, .peerActions i {
-			font-size:1.1em;
-		}
-		.peerLabel {
-			background: rgba(0,0,0,0.9);
-		}
-	}
-	.miniContainer {
-		max-height: none;
-		height:108px;
-		width:192px;
-	}
-	.bigVideo {
-		position:absolute;
-		left:0px;
-		right:0px;
-		bottom:112px;
-		top:2px;
-		margin: auto;
-		opacity: 0;
-		transition-property: opacity;
-		-webkit-transition-property: opacity;
-		transition-duration: 2s;
-		-webkit-transition-duration: 2s;
-	}
-	.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;
-	}
+  .remoteVideos {
+    background: $video-background;
+    bottom: 2px;
+    min-height: 108px;
+    pointer-events: auto;
+    text-align: center;
+    top: auto;
+    white-space: nowrap;
+    > div {
+      cursor: pointer;
+      height: 108px;
+      width: 192px;
+    }
+    .overlayLogo {
+      display: none;
+    }
+    .peerLabel,
+    .peerActions i {
+      font-size: 1.1em;
+    }
+    .peerLabel {
+      background: $video-overlayactions;
+    }
+  }
+  .miniContainer {
+    height: 108px;
+    max-height: none;
+    width: 192px;
+  }
+  .bigVideo {
+    bottom: 112px;
+    left: 0;
+    margin: auto;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 2px;
+    transition-property: opacity;
+    transition-duration: 2s;
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss
index 7021a24e..ed188269 100644
--- a/src/styles/global/_mixins.scss
+++ b/src/styles/global/_mixins.scss
@@ -4,3 +4,9 @@
     @content;
   }
 }
+
+@mixin breakpt-only-screen($pt) {
+  @media only screen and (max-width: $pt) {
+    @content;
+  }
+}
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index e14c5548..b24989c6 100644
--- a/src/styles/global/_variables.scss
+++ b/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