Merge branch 'theurere-css-to-scss-branch' into theurere-scss-libs-branch

12 years ago · 7a77ee255c
27 changed files with 1606 additions and 1504 deletions
--- a/10
+++ b/10
@ -25,6 +25,7 @@ CONFIG_PATH ?= /etc
 VENDOR = "$(CURDIR)/vendor"
 GOPATH = "$(VENDOR):$(CURDIR)"
 SYSTEM_GOPATH := /usr/share/gocode/src/
 OUTPUT := $(CURDIR)/bin
 OUTPUT_JS := $(CURDIR)/build/out
@ -48,6 +49,11 @@ NODEJS_BIN_EXISTS := $(shell [ -x "$(NODEJS_BIN)" ] && echo 1 || echo 0)
 ifneq ($(NODEJS_BIN_EXISTS), 1)
    $(error "Can't find node.js runtime, please install / check your PATH")
 endif
 NPM_BIN_PATH := $(shell npm bin)
 # Tools
 AUTOPREFIXER := autoprefixer
 AUTOPREFIXER_BROWSER_SUPPORT := "> 1%, last 2 versions, Firefox ESR, Opera 12.1, Opera 12.0"
 build: get binary assets
@ -83,11 +89,15 @@ assets: styles javascript
 styles:
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/main.scss:$(CURDIR)/static/css/main.min.css
 		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) $(CURDIR)/static/css/main.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/bootstrap.scss:$(CURDIR)/static/css/bootstrap.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/font-awesome.scss:$(CURDIR)/static/css/font-awesome.min.css
 style-vendor-prefix-info:
 		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) --info
 releaseassets: RJSFLAGS = generateSourceMaps=false preserveLicenseComments=true
 releaseassets: SASSFLAGS = --style=compressed --no-cache
 releaseassets: dist_gopath assets
--- a/README.md
+++ b/README.md
@ -10,10 +10,11 @@ The latest version of Spreed Speak Freely can be found on GitHub:
  - [Go](http://golang.org) >= 1.1.0
  - [NodeJS](http://nodejs.org/)
      + [autoprefixer](https://www.npmjs.org/package/autoprefixer)
      + [po2json](https://github.com/mikeedwards/po2json)
  - [Sass](http://sass-lang.com/) >= 3.2.0
  - [Compass](http://compass-style.org/)
  - [Babel](http://babel.pocoo.org/)
  - [po2json](https://github.com/mikeedwards/po2json)
  - make
--- a/src/styles/color-pallete.html
+++ b/src/styles/color-pallete.html
@ -97,4 +97,17 @@
      <td class="color-block" style="background-color: rgba(0,0,0,.4);"></td>
      <td class="color-block" style="background-color: rgba(0,0,0,.3);"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $grey5: #aaa
      </td>
      <td class="color-desc">
         $grey6: #ddd
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: #aaa;"></td>
      <td class="color-block" style="background-color: #ddd;"></td>
   </tr>
 </table>
--- a/src/styles/components/_audiolevel.scss
+++ b/src/styles/components/_audiolevel.scss
@ -18,37 +18,26 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #audiolevel {
-	position:fixed;
+  left: 0;
-	top: 38px;
+  margin: 0 auto;
-	left: 0px;
+  position: fixed;
-	right: 0px;
+  right: 0;
-	width:400px;
+  top: 38px;
-	margin:0 auto;
+  width: 400px;
-	z-index:6;
+  z-index: 6;
-}
+  .audio-level {
-#audiolevel .audio-level {
+    background: $audiovideolevel; /* Old browsers */
-	height: 4px;
+    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+ */
-	-webkit-border-bottom-right-radius: 2px;
+    background: linear-gradient(to bottom, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
-	-webkit-border-bottom-left-radius: 2px;
+    border-radius: 0 0 2px 2px;
-	-moz-border-radius-bottomright: 2px;
+    height: 4px;
-	-moz-border-radius-bottomleft: 2px;
+    left: 0;
-	border-bottom-right-radius: 2px;
+    margin: 0 auto;
-	border-bottom-left-radius: 2px;
+    position: absolute;
-	background: $audiovideolevel; /* Old browsers */
+    right: 0;
-	background: -moz-linear-gradient(top, $audiovideolevel 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+    transition: width .05s ease-in-out;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
+    width: 0;
-	background: -webkit-linear-gradient(top, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
+  }
 	background: -o-linear-gradient(top, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
 	background: -ms-linear-gradient(top, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
 	background: linear-gradient(to bottom, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
 	width:0%;
 	position:absolute;
 	margin:0 auto;
 	left:0px;
 	right:0px;
 	-webkit-transition: width 0.05s ease-in-out;
 	-moz-transition: width 0.05s ease-in-out;
 	-o-transition: width 0.05s ease-in-out;
 	transition: width 0.05s ease-in-out;
 }
--- a/src/styles/components/_audiovideo.scss
+++ b/src/styles/components/_audiovideo.scss
@ -18,372 +18,339 @@
 * 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 {
+#audiovideo {
-	perspective: 1000;
+  border-top: 1px solid $bordercolor;
-	-webkit-perspective: 1000;
+  bottom: 0;
-}
+  left: 0;
-
+  position: absolute;
-.audiovideo .audiovideoBase {
+  right: 0;
-	position:relative;
+  top: 44px;
-	width:100%;
+  user-select: none;
 	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 .localContainer {
+#audiovideo {
-	position: absolute;
+  &.fullscreen {
-	left:0px;
+    background: black !important;
-	right:0px;
+    bottom: 0 !important;
-	top:0px;
+    left: 0 !important;
-	bottom:0px;
+    top: 0 !important;
-	transform: scale(-1, 1);
+    right: 0 !important;
-	-webkit-transform: scale(-1, 1);
+    .remoteVideo .peerActions {
-	pointer-events:none;
+      display: none;
-	z-index:2;
+    }
  }
  @include breakpt($breakpoint-video-small, max-width, only screen) {
    right: 0;
  }
 }
-.audiovideo .remoteContainer {
+.mainScreenshare #audiovideo { 
-	position: absolute;
+  @include breakpt($breakpoint-video-medium, max-width, only screen) {
-	left:0px;
+    display: none;
-	right:0px;
+  }
 	top:0px;
 	bottom:0px;
 	transform: rotateY(180deg);
 	-webkit-transform: rotateY(180deg);
 	pointer-events:none;
 	z-index:2;
 }
-.audiovideo .miniContainer {
+.withChat #audiovideo,
-	position: absolute;
+.withBuddylist #audiovideo {
-	max-height: 18%;
+  right: 260px;
 	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;
 }
-.audiovideo .miniContainer.visible {
+.withBuddylist.withChat #audiovideo {
-	opacity: 1;
+  right: 520px;
 }
-.audiovideo .miniVideo {
+.audiovideo {
-	max-height: 100%;
+  bottom: 0;
-	max-width:100%;
+  left: 0;
-	display:block;
+  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 {
+.audiovideo {
-	width: 100%;
+  .remoteContainer {
-	max-height: 100%;
+    bottom: 0;
-	opacity: 0;
+    left: 0;
-	transition-property: opacity;
+    pointer-events: none;
-	-webkit-transition-property: opacity;
+    position: absolute;
-	transition-duration: 2s;
+    right: 0;
-	-webkit-transition-duration: 2s;
+    top: 0;
-	background: rgba(0,0,0,0.4);
+    transform: rotateY(180deg);
-	display:block;
+    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;
+  bottom: 0;
-	left:0px;
+  left: 0;
-	right:0px;
+  opacity: 0;
-	bottom:0px;
+  position: absolute;
-	top:0px;
+  right: 0;
-	opacity: 0;
+  top: 0;
-	transition-property: opacity;
+  transition-property: opacity;
-	-webkit-transition-property: opacity;
+  transition-duration: 2s;
-	transition-duration: 2s;
+  video {
-	-webkit-transition-duration: 2s;
+    display: block;
-
+    height: 100%;
-	video {
+    width: 100%;
-		width:100%;
+  }
 		height:100%;
 		display:block;
 	}
 }
-.audiovideo {
+.audiovideo .remoteVideo{
-
+  background: $video-background;
-	.remoteVideo {
+  display: inline-block;
-		display: inline-block;
+  max-height: 100%;
-		width:100%;
+  max-width: 100%;
-		max-width:100%;
+  overflow: hidden;
-		max-height:100%;
+  position: relative;
-		vertical-align:bottom;
+  vertical-align: bottom;
-		position:relative;
+  visibility: hidden;
-		visibility:hidden;
+  width: 100%;
-		background: rgba(0,0,0,0.4);
+  &.withvideo {
-		overflow:hidden;
+    visibility: visible;
-	}
+  }
-	.remoteVideo.withvideo {
+  &.onlyaudio {
-		visibility:visible;
+    background: $video-onlyaudio-background;
-	}
+    visibility: visible;
-	.remoteVideo.onlyaudio {
+  }
-		visibility:visible;
+  .onlyaudio {
-		background: #666;
+    color: $video-onlyaudio;
-	}
+    display: none;
-	.remoteVideo .onlyaudio {
+    font-size: 80px;
-		display:none;
+    left: 0;
-		position:absolute;
+    margin-top: -40px;
-		left:0px;
+    pointer-events: auto;
-		top:45%;
+    position: absolute;
-		right:0px;
+    right: 0;
-		color:rgba(255,255,255,0.3);
+    text-align: center;
-		text-align:center;
+    top: 45%;
-		font-size:80px;
+  }
-		margin-top:-40px;
+  &.onlyaudio video {
-		pointer-events:auto;
+    display: none;
-	}
+  }
-	.remoteVideo.onlyaudio video {
+  &.onlyaudio .onlyaudio {
-		display:none;
+    display: block;
-	}
+  }
-	.remoteVideo.onlyaudio .onlyaudio {
+  .peerActions {
-		display:block;
+    bottom: 5%;
-	}
+    left: 0;
-	.remoteVideo .peerActions {
+    opacity: 0;
-		position: absolute;
+    pointer-events: auto;
-		z-index: 10;
+    position: absolute;
-		left:0px;
+    right: 0;
-		right:0px;
+    text-align: center;
-		bottom:5%;
+    transition-property: opacity;
-		text-align:center;
+    transition-duration: .2s;
-		opacity:.0;
+    z-index: 10;
-		transition-property: opacity;
+    &:hover {
-		-webkit-transition-property: opacity;
+      opacity: .5;
-		transition-duration: 0.2s;
+    }
-		-webkit-transition-duration: 0.2s;
+    i {
-		pointer-events:auto;
+      font-size: 3vw;
-	}
+    }
-	.remoteVideo .peerActions i {
+  }
-		font-size:3vw;
+  .peerLabel {
-	}
+    bottom: 4%;
-	.remoteVideo .peerActions:hover {
+    color: white;
-		opacity:.5;
+    left: 4%;
-	}
+    font-size: 2.5vw;
-	.remoteVideo .peerLabel {
+    max-width: 30%;
-		position: absolute;
+    opacity: .7;
-		z-index:8;
+    overflow: hidden;
-		left:4%;
+    padding: 4px;
-		bottom:4%;
+    position: absolute;
-		font-size:2.5vw;
+    text-overflow: ellipsis;
-		color:white;
+    text-shadow: 0 0 4px black;
-		opacity:.7;
+    white-space: nowrap;
-		text-shadow: 0px 0px 4px black;
+    z-index: 8;
-		max-width:30%;
+  }
 		overflow:hidden;
 		white-space:nowrap;
 		text-overflow:ellipsis;
 		padding:4px;
 	}
 }
 .audiovideo .overlayActions {
-	position: absolute;
+  background: $video-overlayactions;
-	left:0px;
+  bottom: 0;
-	top:0px;
+  height: 70px;
-	bottom:0px;
+  left: 0;
-	height:70px;
+  margin:auto 0;
-	margin:auto 0;
+  opacity: 0;
-	width:40px;
+  padding: 3px 0;
-	padding:3px 0;
+  position: absolute;
-	background: rgba(0,0,0,0.9);
+  top: 0;
-	z-index:5;
+  width: 40px;
-	opacity:0;
+  z-index: 5;
-
+  button {
-	button {
+    color: #ccc;
-		width:40px;
+    cursor: pointer;
-		display: block;
+    display: block;
-		color:#ccc;
+    outline: 0;
-		cursor:pointer;
+    text-shadow: 0 0 5px black;
-		text-shadow: 0 0 5px black;
+    width: 40px;
-		outline: 0;
+  }
 	}
 }
-.audiovideo.active:hover .overlayActions {
+.remoteVideo {
-	opacity: 0.3;
+  &.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;
  }
 }
-.audiovideo.active .overlayActions:hover {
+.miniContainer {
-	opacity: 0.6;
+  &.talking video {
-}
+    border: 1px solid $audiovideolevel;
-
+  }
-.remoteVideo .peerLabel {
+  video {
-	-webkit-transition: color 500ms ease-out;
+    border: 1px solid transparent;
-	-moz-transition: color 500ms ease-out;
+  }
 	-o-transition: color 500ms ease-out;
 	transition: color 500ms ease-out;
 }
 .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 video {
 	border:1px solid transparent;
 }
 .miniContainer.talking video {
 	border:1px solid #9dd53a;
 }
 .renderer-smally {
-	width:150px;
+  width: 150px;
-	.remoteVideos {
+  .remoteVideos {
-		padding-bottom: 85px;
+    padding-bottom: 85px;
-	}
+  }
-	.miniContainer {
+  .remoteVideo {
-		bottom:0px;
+    .peerLabel {
-		left:0px;
+      font-size: .9em;
-		right:0px;
+      font-weight: bold;
-		max-height:none;
+    }
-		height:85px;
+    .peerActions i {
-	}
+      font-size: 1em;
-	.remoteVideo .peerLabel {
+    }
-		font-size:.9em;
+  }
-		font-weight:bold;
+  .miniContainer {
-	}
+    bottom: 0;
-	.remoteVideo .peerActions i {
+    height: 85px;
-		font-size:1em;
+    left: 0;
-	}
+    max-height: none;
-	.overlayActions {
+    right: 0;
-		display: none;
+  }
-	}
+  .overlayActions {
    display: none;
  }
 }
 .renderer-onepeople {
 }
 .renderer-conferencekiosk {
-	.remoteVideos {
+  .remoteVideos {
-		top:auto;
+    background: $video-background;
-		bottom:2px;
+    bottom: 2px;
-		text-align:center;
+    min-height: 108px;
-		background:rgba(0,0,0,0.4);
+    pointer-events: auto;
-		min-height:108px;
+    text-align: center;
-		pointer-events:auto;
+    top: auto;
-		white-space:nowrap;
+    white-space: nowrap;
-		>div {
+    > div {
-			height:108px;
+      cursor: pointer;
-			width:192px;
+      height: 108px;
-			cursor:pointer;
+      width: 192px;
-		}
+    }
-		.overlayLogo {
+    .overlayLogo {
-			display:none;
+      display: none;
-		}
+    }
-		.peerLabel, .peerActions i {
+    .peerLabel,
-			font-size:1.1em;
+    .peerActions i {
-		}
+      font-size: 1.1em;
-		.peerLabel {
+    }
-			background: rgba(0,0,0,0.9);
+    .peerLabel {
-		}
+      background: $video-overlayactions;
-	}
+    }
-	.miniContainer {
+  }
-		max-height: none;
+  .miniContainer {
-		height:108px;
+    height: 108px;
-		width:192px;
+    max-height: none;
-	}
+    width: 192px;
-	.bigVideo {
+  }
-		position:absolute;
+  .bigVideo {
-		left:0px;
+    bottom: 112px;
-		right:0px;
+    left: 0;
-		bottom:112px;
+    margin: auto;
-		top:2px;
+    opacity: 0;
-		margin: auto;
+    position: absolute;
-		opacity: 0;
+    right: 0;
-		transition-property: opacity;
+    top: 2px;
-		-webkit-transition-property: opacity;
+    transition-property: opacity;
-		transition-duration: 2s;
+    transition-duration: 2s;
-		-webkit-transition-duration: 2s;
+    video {
-	}
+      width: 100%;
-	.bigVideo video {
+      height: 100%;
-		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;
 	}
 }
--- a/src/styles/components/_bar.scss
+++ b/src/styles/components/_bar.scss
@ -29,21 +29,19 @@
 }
 .bar {
  // without height bar jumps and disappears on reload
  // use em to scale with text.
  height: #{$minbarheight/$base-font-size}em;
  background-color: $componentbg;
  box-shadow: 0 2px 10px 0 $componentfg3;
  color: $componentfg1;
  font: bold 1em/40px $font-sans-serif;
  // without height bar jumps and disappears on reload, use em to scale with text.
  height: #{$minbarheight/$base-font-size}em;
  text-align: center;
-  // @include adjust-leading-to(2);
+  touch-callout: none;
-  @include box-shadow(0 2px 10px 0 $componentfg3);
+  user-select: none;
  // @include debug-vertical-alignment();
  @include touch-callout(none);
  @include user-select(none);
  @include breakpt($breakpoint-medium) {
    z-index: 40;
-    @include box-shadow(none);
+    box-shadow: none;
  }
  .btn {
    position: relative;
@ -66,7 +64,6 @@
    text-align: left;
    width: 90px;
    vertical-align: middle;
    // @include adjust-font-size-to(11px,0.4);
    span {
      font-style: italic;
      left: 38px;
@ -74,7 +71,7 @@
      top: 26px;
    }
    span a {
-      color: $dgrey;
+      color: $bar-logo-text-desc;
    }
  }
 }
@ -158,7 +155,7 @@
  .btn {
    background: transparent;
    border-color: transparent;
-    color: $grey3;
+    color: $bar-btn-action-color;
    display: inline-block;
    height: 42px;
    font: 24px/40px $font-sans-serif;
@ -166,30 +163,29 @@
    padding: 0;
    text-align: center;
    width: 42px;
    // @include adjust-font-size-to(24px);
    &:focus {
      border: none;
      outline: none;
-      @include box-shadow(0);
+      box-shadow: 0;
    }
    &:hover {
      background-color: none;
-      border-color: #ccc;
+      border-color: $bordercolor;
-      color: $grey4;
+      color: $bar-btn-action-hover;
    }
    &.active {
      background-color: none;
-      border-color: #ccc;
+      border-color: $bordercolor;
-      color: $grey4;
+      color: $bar-btn-action-hover;
    }
    &.active.amutebtn {
-      background-color: $red;
+      background-color: $bar-btn-action-mute;
-      border-color: $red;
+      border-color: $bar-btn-action-mute;
      color: white;
    }
    &.active.aenablebtn {
-      background-color: $actioncolor1;
+      background-color: $bar-btn-action-enable;
-      border-color: $actioncolor1;
+      border-color: $bar-btn-action-enable;
      color: white;
    }
  }
--- a/src/styles/components/_buddylist.scss
+++ b/src/styles/components/_buddylist.scss
@ -18,168 +18,181 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #buddylist {
-position: absolute;
+  bottom: 0;
-top: 0px;
+  position: absolute;
-right: 0px;
+  right: 0;
-bottom: 0px;
+  top: 0;
-width:285px;
+  width: 285px;
-z-index:50;
+  z-index: 50;
-}
+}
 #buddylist:before {
-position:absolute;
+  background: $componentbg;
-width:25px;
+  border-left: 1px solid $bordercolor;
-height:55px;
+  border-top: 1px solid $bordercolor;
-line-height:55px;
+  border-bottom: 1px solid $bordercolor;
-margin: auto;
+  border-top-left-radius: 6px;
-left: 0px;
+  border-bottom-left-radius: 6px;
-top:0px;
+  bottom: 0;
-bottom:0px;
+  color: $buddylist-background;
-content:"\f100";
+  content: "\f100";
-font-family: 'FontAwesome';
+  cursor: pointer;
-color:rgba(0,0,0,0.3);
+  display: none;
-font-size:1.8em;
+  font-family: FontAwesome;
-text-align:center;
+  font-size: 1.8em;
-cursor:pointer;
+  height: 55px;
-pointer-events:auto;
+  left: 0;
-background:$componentbg;
+  line-height: 55px;
-border-left:1px solid $bordercolor;
+  margin: auto;
-border-top:1px solid $bordercolor;
+  pointer-events: auto;
-border-bottom:1px solid $bordercolor;
+  position: absolute;
-webkit-border-top-left-radius: 6px;
+  text-align: center;
-webkit-border-bottom-left-radius: 6px;
+  top: 0;
-moz-border-radius-topleft: 6px;
+  width: 25px;
-moz-border-radius-bottomleft: 6px;
+}
-border-top-left-radius: 6px;
+
 border-bottom-left-radius: 6px;
 display:none;
 }
 .withBuddylist #buddylist:before {
-content:"\f101";
+  content: "\f101";
 }
 .withBuddylistAutoHide #buddylist:before {
-display:block;
+  display: block;
 }
 .buddylist {
-position:absolute;
+  background: $componentbg;
-left:25px;
+  border-top: 1px solid $bordercolor;
-right:0px;
+  bottom: 0;
-top:0px;
+  left: 25px;
-bottom:0px;
+  overflow-x: hidden;
-overflow-x: hidden;
+  overflow-y: auto;
-overflow-y: auto;
+  pointer-events: auto;
-border-top: 1px solid $bordercolor;
+  position: absolute;
-background: $componentbg;
+  right: 0;
-pointer-events:auto;
+  top: 0;
-}
+}
-.buddylist .buddycontainer {
+
-webkit-user-select: none;
+.buddylist {
-position: relative;
+  &.loading {
-pointer-events:auto;
+    .buddylistloading {
-}
+      display:block;
-.buddylist .buddylistloading, .buddylist .buddylistempty {
+    }
-padding:.4em;
+  }
-font-size:1.4em;
+  &.empty {
-text-align:center;
+    .buddylistempty {
-display:none;
+      display:block;
-position:absolute;
+    }
-left:0px;
+  }
-right:0px;
+  .buddycontainer {
-bottom:0px;
+    pointer-events: auto;
-top:0px;
+    position: relative;
-margin:auto;
+    user-select: none;
-height:2em;
+  }
-color:rgba(0,0,0,0.3);
+  .buddylistloading,
-}
+  .buddylistempty {
-.buddylist.loading .buddylistloading {
+    bottom: 0;
-display:block;
+    color: $buddylist-background;
-}
+    display: none;
-.buddylist.empty .buddylistempty {
+    font-size: 1.4em;
-display:block;
+    height: 2em;
-}
+    left: 0;
    margin: auto;
    padding:.4em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
  }
 }
 .buddy {
-overflow: hidden;
+  background: $sidepanebg;
-height: 66px;
+  border-bottom: 1px solid $bordercolor;
-display: block;
+  cursor: pointer;
-border-bottom: 1px solid $bordercolor;
+  display: block;
-position: relative;
+  font-size: 13px;
-cursor: pointer;
+  height: 66px;
-text-align: left;
+  overflow: hidden;
-width: 100%;
+  position: relative;
-font-size: 13px;
+  text-align: left;
-background: $sidepanebg;
+  width: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  @include tap-highlight-color($tap-highlight);
-}
+}
 .buddy:hover {
-background: $componentbg;
+  background: $componentbg;
 }
 .buddy > .buddyimage {
 float:left;
 height: 46px;
 width: 46px;
 overflow: hidden;
 margin: 10px;
 position: relative;
 border-radius: 2px;
 background: $actioncolor1;
 text-align:center;
 }
 .buddy > .buddyimage > i {
 line-height:46px;
 color:$actioncolor2;
 }
 .buddy > .buddyimage > img {
 position: absolute;
 left:0px;
 right:0px;
 bottom:0px;
 top:0px;
 display:block;
 }
 .buddy > .buddy1 {
 position: absolute;
 left: 65px;
 white-space: nowrap;
 overflow: hidden;
 right: 4px;
 height: 28px;
 color: $componentfg1;
 font-weight:bold;
 font-size:14px;
 top: 24px;
 text-overflow: ellipsis;
 }
 .buddy.withSubline > .buddy1 {
 top: 15px;
 }
 .buddy > .buddy2 {
 position: absolute;
 left: 65px;
 white-space: nowrap;
 overflow: hidden;
 right: 0px;
 color: $componentfg2;
 top: 33px;
 }
 .buddy {
  &.withSubline .display-name {
    top: 15px;
  }
  &.hovered .buddyactions {
    right: 0;
  }
  .avatar {
    background: $actioncolor1;
    border-radius: 2px;
    float: left;
    height: 46px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 46px;
    .#{$fa-css-prefix} {
      color: $actioncolor2;
      line-height: 46px;
    }
    img {
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .display-name {
    color: $componentfg1;
    font-weight: bold;
    font-size: 14px;
    height: 28px;
    left: 65px;
    position: absolute;
    overflow: hidden;
    right: 4px;
    text-overflow: ellipsis;
    top: 24px;
    white-space: nowrap;
  }
  .browser {
    color: $componentfg2;
    left: 65px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 33px;
    white-space: nowrap;
  }
 }
 .buddy .buddyactions {
-position:absolute;
+  background: $buddylist-action-background;
-right:-125px;
+  bottom: 0px;
-top:0px;
+  line-height: 66px;
-bottom:0px;
+  position: absolute;
-background:rgba(255,255,255,0.5);
+  right: -125px;
-z-index:5;
+  padding: 0 10px;
-line-height:66px;
+  text-align: right;
-padding:0 10px;
+  top: 0px;
-transition-property: right;
+  transition-property: right;
-webkit-transition-property: right;
+  transition-duration: .3s;
-transition-duration: .3s;
+  white-space: nowrap;
-webkit-transition-duration: .3s;
+  z-index: 5;
-white-space:nowrap;
+  .#{$fa-css-prefix} {
-text-align:right;
+    font-size: 2em;
-}
+  }
 .buddy .buddyactions i {
 font-size:2em;
 }
 .buddy.hovered .buddyactions {
 right:0px;
 }
--- a/src/styles/components/_chat.scss
+++ b/src/styles/components/_chat.scss
@ -18,499 +18,482 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #chat {
 position: absolute;
 bottom:0px;
 right:260px;
 width:260px;
 top:0px;
 pointer-events: none;
 z-index:45;
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
 perspective: 1000;
 }
 .withChat #chat .chatcontainer {
 left:0px;
 }
 .withChat.withChatMaximized #chat {
 left:0px;
 width:auto;
 	.chatcontainer {
 		width:auto;
 	}
 }
 .chatcontainer {
 position:absolute;
 top:0px;
 left:260px;
 right:0px;
 bottom:0px;
 width:260px;
 overflow:hidden;
 -webkit-transition: left 200ms ease-in-out;
 -moz-transition: left 200ms ease-in-out;
 -ms-transition: left 200ms ease-in-out;
 -o-transition: left 200ms ease-in-out;
 transition: left 200ms ease-in-out;
 background: #e7e7e7;
 }
 .chatlist {
 position:absolute;
 top:0px;
 left:100%;
 bottom:0px;
 width:100%;
 background: #e7e7e7;
 -webkit-transition: left 200ms ease-in-out;
 -moz-transition: left 200ms ease-in-out;
 -ms-transition: left 200ms ease-in-out;
 -o-transition: left 200ms ease-in-out;
 transition: left 200ms ease-in-out;
 	.list-group {
 		margin-top:-1px;
 		margin-bottom:-1px;
 		max-height:100%;
 		overflow-x: hidden;
 		overflow-y: auto;
 	}
 	.list-group-item {
 		border-right:none;
 		border-left:none;
 		-webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        position:relative;
 	}
 	.list-group-item .fa-lg {
 		display:inline-block;
 		width:18px;
 		text-align:center;
 	}
 	.list-group-item .badge {
 		background: #84b819;
 		border: 1px solid white;
 		font-size:.8em;
 	}
 	.list-group-item {
 		padding-right: 30px;
 	}
 	.list-group-item.disabled {
 		color:#aaa;
 	}
 	.list-group-item > .item-btn {
 		position:absolute;
 		right:12px;
 		cursor: pointer;
 		display:none;
 	}
 	.list-group-item:hover > .item-btn {
 		display:inline;
 	}
-}
+#chat {
-.chatpane {
+  bottom: 0;
-position:absolute;
+  perspective: 1000;
-top:0px;
+  pointer-events: none;
-right:0px;
+  position: absolute;
-bottom:0px;
+  right: 260px;
-width:100%;
+  top: 0;
-webkit-transition: 0.3s;
+  width: 260px;
-webkit-transform-style: preserve-3d;
+  z-index: 45;
 -moz-transition: 0.3s;
 -moz-transform-style: preserve-3d;
 -o-transition: 0.3s;
 -o-transform-style: preserve-3d;
 transition: 0.3s;
 transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 }
 .showchatlist .chatpane {
 right:100%;
 }
 .showchatlist .chatlist {
 left:0px;
 }
 .withChat .chatpane.flip {
 -webkit-transform: rotateY(360deg);
 -moz-transform: rotateY(360deg);
 -o-transform: rotateY(360deg);
 transform: rotateY(360deg);
 }
 .chat {
 pointer-events: auto;
 position:absolute;
 top:0px;
 bottom:0px;
 right:0px;
 left:0px;
 background: #e7e7e7;
 overflow:hidden;
 display:none;
 }
 .chat.visible {
 }
 .chat.visible.active {
 display:block;
 }
 .chat .chatbody {
 position:absolute;
 bottom:-1px;
 left:0px;
 right:0px;
 top: 36px;
 border-right:1px solid $bordercolor;
 }
 .chat.active .chatbody {
 }
 .chat .chatheader {
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 background: $componentbg;
 padding:0px 4px 0px 8px;
 border-top: 1px solid $bordercolor;
 border-bottom: 1px solid $bordercolor;
 border-right: 1px solid $bordercolor;
 height:36px;
 line-height:34px;
 }
 .chat.active .chatheader {
 }
 .chat .chatheader .chatstatusicon {
 position:absolute;
 left:0px;
 top:0px;
 font-size:1.4em;
 width:36px;
 height:36px;
 display:block;
 text-align:center;
 cursor: pointer;
 }
 .chat .chatheader .chatheadertitle {
 padding-left:28px;
 display:inline;
 }
 .chat .chatheader .ctrl {
 position:absolute;
 top:0px;
 right:1px;
 color:rgba(0,0,0,0.3);
 }
 .chat .chatheader span {
 display: inline-block;
 max-width:60%;
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
 pointer-events: none;
 vertical-align: middle;
 }
 .chat .chatheader .ctrl i {
 padding:6px;
 cursor: pointer;
 }
 .chat .outputbox {
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 bottom:75px;
 }
 .chat .output {
 overflow-x: hidden;
 overflow-y: auto;
 padding: 0.4em 0;
 height:100%;
 }
 .chat .output > i {
 font-size:0.8em;
 color: #aaa;
 display:block;
 padding:6px 0;
 text-align:center;
 clear:both;
 }
 .chat .output > i.p2p {
 padding:6px 0;
 font-weight: bold;
 }
 .chat .output .message {
 background: #fff;
 border: 1px solid #e5e5ef;
 border-radius: 6px;
 margin-bottom: 2px;
 position: relative;
 word-wrap: break-word;
 padding:8px;
 margin-left:20px;
 margin-right:4px;
 clear:both;
 display:block;
 }
 .chat .output .message .timestamp {
 font-size:0.8em;
 color: #aaa;
 text-align:right;
 position:absolute;
 top:8px;
 right:8px;
 }
 .chat.with_pictures .output .message.is_self .timestamp {
 right:58px;
 }
 .chat .output .message > ul {
 list-style-type: none;
 margin:0;
 padding-left:0;
 }
-.chat .output .message > ul > li {
+.withChat {
-line-height:1.1em;
+  #chat .chatcontainer {
-margin:4px 0;
+    left: 0;
-padding-left:1.2em;
+  }
-position:relative;
+  .chatpane.flip {
    transform: rotateY(360deg);
  }
  &.withChatMaximized #chat {
    left: 0;
    width: auto;
      .chatcontainer {
        width: auto;
      }
  }
 }
-.chat .message li:before {
+.chatcontainer {
-font-family: 'FontAwesome';
+  background: $chat-background;
-content: '\f075';
+  bottom: 0;
-color:#ccc;
+  left: 260px;
-position:absolute;
+  overflow: hidden;
-left:0px;
+  position: absolute;
-width:12px;
+  right: 0;
-text-align:center;
+  top: 0;
  transition: left 200ms ease-in-out;
  width: 260px;
 }
-.chat .message.is_self li:before {
+.showchatlist {
-moz-transform: scale(-1, 1);
+  .chatpane {
-webkit-transform: scale(-1, 1);
+    right: 100%;
-transform: scale(-1, 1);
+  }
-color:#ccc;
+  .chatlist {
    left: 0;
  }
 }
-.chat .message li.unread:before {
+.chatlist {
-content: '\f0eb';
+  background: $chat-background;
-color: #FE9A2E;
+  bottom: 0;
  left: 100%;
  position: absolute;
  transition: left 200ms ease-in-out;
  top: 0;
  width: 100%;
  .list-group {
    margin-top: -1px;
    margin-bottom: -1px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list-group-item {
    border-right: none;
    border-left: none;
    border-radius: 0;
    padding-right: 30px;
    position: relative;
    &.newmessage {
      animation: newmessage 1s ease -0.3s infinite;
    }
    &.disabled {
      color: $chat-disabled;
    }
    &:hover .item-btn {
      display: inline;
    }
    .fa-lg {
      display: inline-block;
      text-align: center;
      width: 18px;
    }
    .badge {
      background: $chat-badge;
      border: 1px solid white;
      font-size: .8em;
    }
    .item-btn {
      cursor: pointer;
      display: none;
      position: absolute;
      right: 12px;
    }
  }
 }
-.chat .message li.sending:before {
+.chatpane {
-content: '\f0ec';
+  backface-visibility: hidden;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.3s;
  transform-style: preserve-3d;
  width: 100%;
 }
-.chat .message li.sent:before {
+.chat {
-content: '\f003';
+  background: $chat-background;
-color:#5882FA;
+  display: none;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 0;
 }
-.chat .message li.delivered:before {
+.chat {
-content: '\f019';
+  &.active {
-color:#5882FA;
+    &.visible {
      display: block;
    }
    .chatbody {
      // nothing
    }
    .chatheader {
      // nothing
    }
  }
 }
-.chat .message li.received:before {
+.chatbody {
-content: '\f06e';
+  border-right: 1px solid $bordercolor;
-color:#84b819;
+  bottom: -1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 36px;
  @include breakpt($breakpoint-chat-small, max-height) {
    border-top: 1px solid $bordercolor;
    top: 0px;
  }
 }
-.chat .message li.read:before {
+.chatheader {
-content: '\f00c';
+  background: $componentbg;
-color:#ccc;
+  border-top: 1px solid $bordercolor;
  border-bottom: 1px solid $bordercolor;
  border-right: 1px solid $bordercolor;
  height: 36px;
  left: 0;
  line-height: 34px;
  padding: 0 4px 0 8px;
  position: absolute;
  right: 0;
  top: 0;
  .chatstatusicon {
    cursor: pointer;
    display: block;
    font-size: 1.4em;
    height: 36px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 36px;
  }
  .chatheadertitle {
    display: inline;
    padding-left: 28px;
  }
  .ctrl {
    color: $chat-ctrl;
    position: absolute;
    right: 1px;
    top: 0;
    .#{$fa-css-prefix} {
      cursor: pointer;
      padding: 6px;
    }
  }
  span {
    display: inline-block;
    max-width: 60%;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
  }
  @include breakpt($breakpoint-chat-small, max-height) {
    display: none;
  }
 }
-.chat .output .message .buddyimage {
+.chat .outputbox {
-position: absolute;
+  bottom: 75px;
-top: 4px;
+  left: 0;
-width:46px;
+  position: absolute;
-height:46px;
+  right: 0;
-left: 4px;
+  top: 0;
-overflow: hidden;
+  @include breakpt($breakpoint-chat-small, max-height) {
-border-radius: 2px;
+    bottom: 45px;
-background: $actioncolor1;
+  }
 text-align:center;
 }
 .chat .output .message.is_self .buddyimage {
 right: 4px;
 left: auto;
 }
 .chat .output .message .buddyimage > i {
 line-height:46px;
 color:$actioncolor2;
 }
 .chat .output .message .buddyimage > img {
 position: absolute;
 left:0px;
 right:0px;
 bottom:0px;
 top:0px;
 display:block;
 }
-.chat.with_pictures .output .message.is_remote {
+.chat .output {
-padding-left: 58px;
+  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.4em 0;
  > i {
    clear: both;
    color: $chat-meta;
    display: block;
    font-size: .8em;
    padding: 6px 0;
    text-align: center;
    &.p2p {
      font-weight: bold;
      padding: 6px 0;
    }
  }
 }
-.chat .output .message:before, .chat .output .message:after {
+.chat.with_pictures .message {
-content:"";
+  &.is_self {
-position:absolute;
+    padding-right: 54px;
-border-style: solid;
+    .timestamp {
-width:0;
+      right: 58px;
-display:block;
+    }
-}
+  }
-.chat .output .message.is_remote:before {
+  &.is_remote {
-top:4px;
+    padding-left: 58px;
-bottom:auto;
+  }
 left:-16px;
 border-width: 10px 17px 10px 0;
 border-color: transparent #fff;
 }
 .chat .output .message.is_remote:after {
 top:5px;
 bottom:auto;
 left:-15px;
 border-width: 9px 15px 9px 0;
 border-color: transparent #fff;
 }
 .chat .output .message.is_self:before {
 top:4px;
 bottom:auto;
 right:-16px;
 border-width: 10px 0 10px 17px;
 border-color: transparent #fff;
 }
 .chat .output .message.is_self:after {
 top:5px;
 bottom:auto;
 right:-15px;
 border-width: 9px 0 9px 15px;
 border-color: transparent #fff;
 }
-.chat .output .message.with_name {
+.chat .message {
  background: $chat-msg-background;
  border: 1px solid $chat-msg-border;
  border-radius: 6px;
  clear: both;
  display: block;
  margin: 0 4px 2px 20px;
  padding: 8px;
  position: relative;
  word-wrap: break-word;
  ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
  }
  li {
    line-height: 1.1em;
    margin: 4px 0;
    padding-left: 1.2em;
    position: relative;
    &:before {
      color: $chat-msg-default-icon-color;
      content: '\f075';
      font-family: FontAwesome;
      left: 0;
      position: absolute;
      text-align: center;
      width: 12px;
    }
  }
  .timestamp {
    color: $chat-timestamp;
    font-size: .8em;
    position: absolute;
    right: 8px;
    text-align: right;
    top: 8px;
  }
  strong {
    display: block;
    padding-bottom: 2px;
    margin-right: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 }
-.chat .output .message.is_self {
+.chat .message {
-background: #fff;
+  &.is_self li:before {
-margin-right:20px;
+    color: $chat-msg-default-icon-color;
-margin-left:4px;
+    transform: scale(-1, 1);
-padding-right:0px;
+  }
-}
+  li {
-.chat.with_pictures .output .message.is_self {
+    &.unread:before {
-padding-right:54px;
+      content: $chat-msg-unread-icon;
      color: $chat-msg-unread-icon-color;
    }
    &.sending:before {
      content: $chat-msg-sending-icon;
      color: $chat-msg-sending-icon-color;
    }
    &.sent:before {
      content: $chat-msg-sent-icon;
      color: $chat-msg-sent-icon-color;
    }
    &.delivered:before {
      content: $chat-msg-delivered-icon;
      color: $chat-msg-delivered-icon-color;
    }
    &.received:before {
      content: $chat-msg-received-icon;
      color: $chat-msg-received-icon-color;
    }
    &.read:before {
      content: $chat-msg-read-icon;
      color: $chat-msg-read-icon-color;
    }
  }
 }
-.chat .output .message strong {
+.chat .message {
-display:block;
+  &.is_self .avatar {
-padding-bottom:2px;
+    left: auto;
-margin-right:40px;
+    right: 4px;
-white-space:nowrap;
+  }
-overflow:hidden;
+  .avatar {
-text-overflow:ellipsis;
+    background: $actioncolor1;
    border-radius: 2px;
    height: 46px;
    left: 4px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 4px;
    width: 46px;
    .#{$fa-css-prefix} {
      color: $actioncolor2;
      line-height: 46px;
    }
    img {
      display: block;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      top: 0;
    }
  }
 }
-.chat .chatbodybottom {
+.chat .message {
-	background: #e7e7e7;
+  &:before,
-	position: absolute;
+  &:after {
-	left:0px;
+    border-style: solid;
-	bottom:1px;
+    content: "";
-	right:0px;
+    display: block;
-	margin:0 auto;
+    position: absolute;
    width: 0;
  }
  &.is_remote {
    background: $chat-msg-remote-background;
    &:before {  // arrow border
      border-width: 10px 17px 10px 0;
      border-color: transparent $chat-msg-remote-background;
      bottom: auto;
      left: -16px;
      top: 4px;
    }
    &:after { // arrow background
      border-width: 9px 15px 9px 0;
      border-color: transparent $chat-msg-remote-background;
      bottom:auto;
      left: -15px;
      top: 5px;
    }
  }
  &.is_self {
    background: $chat-msg-self-background;
    margin-right:20px;
    margin-left: 4px;
    padding-right: 0;
    &:before { // arrow border
      border-width: 10px 0 10px 17px;
      border-color: transparent $chat-msg-self-background;
      bottom: auto;
      right: -16px;
      top: 4px;
    }
    &:after { // arrow background
      border-width: 9px 0 9px 15px;
      border-color: transparent $chat-msg-self-background;
      bottom: auto;
      right: -15px;
      top: 5px;
    }
  }
  &.with_name {
    // none
  }
 }
-.chat .typinghint {
+.chat {
-padding:2px 6px 0 6px;
+  .chatbodybottom {
-white-space: nowrap;
+    background: $chat-bottom-background;
-overflow: hidden;
+    bottom: 1px;
-font-size:.8em;
+    left: 0;
-color: #aaa;
+    margin: 0 auto;
-height:14px;
+    position: absolute;
-}
+    right: 0;
-.chat .inputbox {
+    @include breakpt($breakpoint-chat-small, max-height) {
-position:relative;
+      height: auto;
-}
+    }
-.chat .inputbox .btn {
+  }
-position:absolute;
+  .typinghint {
-right:6px;
+    padding: 2px 6px 0 6px;
-top:1px;
+    white-space: nowrap;
-padding: 0.5em 1em;
+    overflow: hidden;
-display:none;
+    font-size:.8em;
-}
+    color: $chat-typing;
-.chat .inputbox > div {
+    height: 14px;
-border-top:1px solid $bordercolor;
+    @include breakpt($breakpoint-chat-small, max-height) {
-}
+      display: none;
-.chat .input {
+    }
-display:block;
+  }
-resize: none;
+  .inputbox {
-width:100%;
+    position: relative;
-height:54px;
+    .btn {
-max-height:54px; /* FF hack */
+      position: absolute;
-margin:0px;
+      right: 6px;
-webkit-border-radius: 0px;
+      top: 1px;
-moz-border-radius: 0px;
+      padding: .5em 1em;
-border-radius: 0px;
+      display: none;
-border-color:transparent;
+    }
-webkit-box-shadow: none;
+    > div {
-moz-box-shadow: none;
+      border-top: 1px solid $bordercolor;
-box-shadow: none;
+    }
-}
+    @include breakpt($breakpoint-chat-small, max-height) {
-.chat .input.active, .chat .input:active, .chat .input:focus {
+      height: auto;
-border-color:#66afe9;
+    }
  }
  .input {
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    display: block;
    height: 54px;
    max-height: 54px; /* FF hack */
    margin: 0;
    resize: none;
    width: 100%;
    &:active,
    &:focus {
      border-color: $chat-input-border-color;
    }
    @include breakpt($breakpoint-chat-small, max-height) {
      max-height: 2.5em;
    }
  }
 }
@keyframes newmessage {
-	0% {background-color: rgba(132,184,25,1.0);}
+  0% {background-color: $actioncolor1;}
-	50% {background-color: $componentbg;}
+  50% {background-color: $componentbg;}
-	100% {background-color: rgba(132,184,25,1.0);}
+  100% {background-color: $actioncolor1;}
 }
@-webkit-keyframes newmessage {
 	0% {background-color: rgba(132,184,25,1.0);}
 	50% {background-color: $componentbg;}
 	100% {background-color: rgba(132,184,25,1.0);}
 }
 .chat.newmessage .chatheader, .chatlist .list-group-item.newmessage {
 animation: newmessage 1s ease -0.3s infinite;
 -webkit-animation: newmessage 1s ease -0.3s infinite;
 }
-.chat.newmessage .chatheadertitle:after {
+.chat.newmessage {
-content: "***";
+  .chatheadertitle:after {
-position:absolute;
+    content: "***";
-top:2px;
+    position: absolute;
-right:32px;
+    right: 32px;
    top: 2px;
  }
  .chatheader {
    animation: newmessage 1s ease -0.3s infinite;
  }
 }
@media all and (max-height: 210px) {
 	.chat .inputbox {
 		height: auto;
 	}
 	.chat .input {
 		max-height: 2.5em;
 	}
 	.chat .outputbox {
 		bottom:45px;
 	}
 	.chat .chatbodybottom {
 		height: auto;
 	}
 	.chat .typinghint {
 		display: none;
 	}
 	.chat .chatheader {
 		display: none;
 	}
 	.chat .chatbody {
 		border-top: 1px solid $bordercolor;
 		top: 0px;
 	}
 }
--- a/src/styles/components/_fileinfo.scss
+++ b/src/styles/components/_fileinfo.scss
@ -18,134 +18,129 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 .file-info {
 	text-align:center;
 	border: 1px solid #ddd;
 	padding: 1em;
 	background: #fff;
 	border-radius: 4px;
 	padding: 1em;
 	position: relative;
 	max-width: 170px;
 }
 .file-info > div {
 	z-index: 3;
 	position: relative;
 }
 .file-info div.file-info-bg {
 	position:absolute;
 	left:41px;
 	top:-17px;
 	right:0px;
 	bottom:0px;
 	z-index:2;
 	overflow:hidden;
 }
-.file-info-bg i {
+.file-info {
-	font-size: 20em;
+  background: $fileinfo-background;
-	color: #eee;
+  border: 1px solid $fileinfo-border;
  border-radius: 4px;
  padding: 1em;
  position: relative;
  text-align: center;
  max-width: 170px;
 }
 .file-info {
  > div {
    position: relative;
    z-index: 3;
  }
  .file-info-bg {
    bottom: 0;
    left: 41px;
    right: 0;
    overflow: hidden;
    position: absolute;
    top: -17px;
    z-index: 2;
    .#{$fa-css-prefix} {
      color: $fileinfo-icon-background-color;
      font-size: 20em;
    }
  }
  .actions {
    left: 50%;
    margin-left: 10px;
    position: absolute;
    text-align: left;
    top: 14px;
  }
 }
 .file-info-name {
-	font-size: 1.1em;
+  font-size: 1.1em;
-	padding: 0 .2em;
+  margin: .2em 0;
-	margin:0.2em 0;
+  min-width: 140px;
-	min-width:140px;
+  padding: 0 .2em;
 }
 .file-info-size {
-	font-size: 0.8em;
+  font-size: .8em;
-	position:relative;
+  height: 20px;
-	height: 20px;
+  position: relative;
-}
+  > span {
-
+    display: block;
-.file-info.downloader .file-info-size {
+    left: 0;
-	margin-bottom: 10px;
+    margin: 0 auto;
-}
+    padding: 4px;
-
+    position: absolute;
-.file-info.downloading .file-info-size{
+    text-shadow: 1px 1px 1px white;
-	border-color: #ddd;
+    top: 1px;
-}
+    right: 0;
-
+    z-index: 5;
-.file-info-size > span {
+  }
-	padding: 4px;
+  > div {
-	z-index:5;
+    bottom: 0;
-	display:block;
+    box-shadow: none !important;
-	position:relative;
+    left: 0;
-	text-shadow: 1px 1px 1px white;
+    position: absolute;
-	position: absolute;
+    top: 0;
-	margin: 0 auto;
+    width: 0;
-	top:1px;
+    z-index: 0;
-	right:0px;
+    &.progress-bar {
-	left:0px;
+      opacity: .5;
-}
+    }
-
+    &.progress-bar.download {
-.file-info-size > div {
+      opacity: 1;
-	z-index:0;
+      z-index: 1;
-	width:0%;
+    }
-	-webkit-box-shadow: none !important;
+  }
-	box-shadow: none !important;
+}
-	position: absolute;
+
-	left:0px;
+.file-info-speed {
-	bottom:0px;
+  bottom: 8px;
-	top:0px;
+  font-size: .8em;
-}
+  left: 0;
-
+  position: absolute;
-.file-info-size > div.progress-bar {
+  right: 0;
-	opacity: 0.5;
+  text-align: center;
-}
+}
-
+
-.file-info-size > div.progress-bar.download {
+.file-info.uploader {
-	z-index:1;
+  .file-info-speed {
-	opacity: 1;
+    bottom: 6px;
-}
+  }
-
+  .actions {
-div.file-info-speed {
+    margin-left: 30px;
-	position: absolute;
+    opacity: 0;
-	left: 0px;
+  }
-	right: 0px;
+  .anim {
-	bottom: 8px;
+    margin-left: 0;
-	text-align: center;
+  }
-	font-size: 0.8em;
+  .hovercontrol {
-}
+    &:hover .anim {
-.file-info.uploader div.file-info-speed {
+      margin-left: -50px;
-	bottom: 6px;
+    }
-}
+    &:hover .actions {
-
+      margin-left: 0;
-.file-info.downloader .anim {
+      opacity: 1;
-	margin-left: -40px;
+    }
-}
+    > div {
-
+      transition: all .2s ease-in-out
-.file-info.uploader .anim {
+    }
-	margin-left: 0px;
+  }
-}
+}
-.file-info.uploader .hovercontrol:hover .anim {
+
-	margin-left: -50px;
+.file-info.downloader {
-}
+  .anim {
-
+    margin-left: -40px;
-.file-info.uploader .hovercontrol > div {
+  }
-  -webkit-transition: all .2s ease-in-out;
+  .file-info-size {
-  -moz-transition: all .2s ease-in-out;
+    margin-bottom: 10px;
-  -o-transition: all .2s ease-in-out;
+  }
-  transition: all .2s ease-in-out
+}
-}
+
-
+.file-info.downloading {
-.file-info .actions {
+  .file-info-size{
-	position: absolute;
+    border-color: $fileinfo-downloading-size-border;
-	top: 14px;
+  }
 	left: 50%;
 	margin-left: 10px;
 	text-align: left;
 }
 .file-info.uploader .actions {
 	margin-left:30px;
 	opacity:0;
 }
 .file-info.uploader .hovercontrol:hover .actions {
 	margin-left:0px;
 	opacity:1;
 }
--- a/src/styles/components/_rightslide.scss
+++ b/src/styles/components/_rightslide.scss
@ -1,25 +1,44 @@
 /*
 * Spreed Speak Freely.
 * Copyright (C) 2013-2014 struktur AG
 *
 * This file is part of Spreed Speak Freely.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #rightslide {
-position: absolute;
+  bottom: 0;
-top: 44px;
+  left: 0;
-right: -260px;
+  overflow-x: auto;
-bottom: 0px;
+  overflow-y: hidden;
-left: 0px;
+  pointer-events: none;
-z-index:5;
+  position: absolute;
-webkit-transition: right 200ms ease-in-out;
+  right: -260px;
-moz-transition: right 200ms ease-in-out;
+  top: 44px;
-ms-transition: right 200ms ease-in-out;
+  transition: right 200ms ease-in-out;
-o-transition: right 200ms ease-in-out;
+  z-index: 5;
 transition: right 200ms ease-in-out;
 pointer-events:none;
 overflow-x: auto;
 overflow-y: hidden;
 }
 .withBuddylist #rightslide {
-right:0px;
+  right: 0;
 }
 #rightslide .rightslidepane {
-position:relative;
+  height: 100%;
-width:100%;
+  min-width: 520px;
-height:100%;
+  position: relative;
-min-width:520px;
+  width: 100%;
-}
+}
--- a/src/styles/components/_roombar.scss
+++ b/src/styles/components/_roombar.scss
@ -18,18 +18,20 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #roombar {
-	position: absolute;
+  left: 0;
-	left:0px;
+  min-width: 260px;
-	top:44px;
+  position: absolute;
-	right:0px;
+  right: 0;
-	min-width:260px;
+  top: 44px;
-	z-index:4;
+  z-index: 4;
 }
 #roombar .roombar {
-	position: absolute;
+  left: 0;
-	left:0px;
+  position: absolute;
-	top:0px;
+  right: 0;
-	right:0px;
+  top: 0;
 }
--- a/src/styles/components/_screenshare.scss
+++ b/src/styles/components/_screenshare.scss
@ -19,39 +19,45 @@
 *
 */
 .mainScreenshare #screenshare {
 	display: block;
 }
 .screenshare {
-	position:absolute;
+  bottom: 0;
-	left:0px;
+  left: 0;
-	right:0px;
+  position: absolute;
-	top:0px;
+  right: 0;
-	bottom:0px;
+  top: 0;
 }
-.screensharepane {
+
-	position:absolute;
+.mainScreenshare #screenshare {
-	left:0px;
+  display: block;
 	right:0px;
 	bottom:0px;
 	top:0px;
 	overflow:auto;
 	background:black;
 }
-.screensharepane .remotescreen {
+
-	position:relative;
+.screensharepane {
  background: black;
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
 }
-.screensharepane video {
+
-	width: 100%;
+.screensharepane {
-	max-height: 99%;
+  .remotescreen {
    position: relative;
  }
  video {
    max-height: 99%;
    width: 100%;
  }
 }
 .remotesize .screensharepane video {
-	width: auto;
+  max-height: none;
-	max-height: none;
+  width: auto;
 }
 .screenshare .overlaybar {
-	bottom: 0px;
+  bottom: 0;
-	left: 0px;
+  left: 0;
-	right: 0px;
+  right: 0;
-}
+}
--- a/src/styles/components/_settings.scss
+++ b/src/styles/components/_settings.scss
@ -18,68 +18,73 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #settings {
-position:fixed;
+  border-top: 1px solid $bordercolor;
-top:44px;
+  bottom: 0;
-right:-520px;
+  padding-right: 20px;
-bottom:0px;
+  position: fixed;
-width:520px;
+  right: -520px;
-z-index: 50;
+  top: 44px;
-webkit-transition: right 200ms ease-in-out;
+  transition: right 200ms ease-in-out;
-moz-transition: right 200ms ease-in-out;
+  width: 520px;
-ms-transition: right 200ms ease-in-out;
+  z-index: 50;
 -o-transition: right 200ms ease-in-out;
 transition: right 200ms ease-in-out;
 padding-right: 20px;
 border-top:1px solid $bordercolor;
 }
 #settings.show {
-right:0px;
+  right: 0;
  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
    background: white;
    left: 0;
    width: auto;
  }
  .form-actions{
    @include breakpt($breakpoint-settings-medium, max-width, only screen) {
      bottom: 0;
      height: 60px;
      left: 0;
      margin-bottom: 0;
      padding: 6px 0 6px 120px;
      position: fixed;
      right: 0;
    }
  }
 }
 .settings {
-position:absolute;
+  background: $sidepanebg;
-left:0px;
+  bottom: 0;
-right:0px;
+  left: 0;
-top:0px;
+  overflow-x: hidden;
-bottom:0px;
+  overflow-y: auto;
-background: $sidepanebg;
+  padding: 10px;
-overflow-x: hidden;
+  position: absolute;
-overflow-y: auto;
+  right: 0;
-padding:10px;
+  top: 0;
 }
-.settings .version {
+
-position:absolute;
+.settings {
-top:10px;
+  .version {
-right:10px;
+    color: $settings-version;
-font-size:10px;
+    font-size: 10px;
-color:#ccc;
+    position: absolute;
-}
+    right: 10px;
-@media only screen and (max-width: 630px) {
+    top: 10px;
-	.settings .form-horizontal .controls {
+  }
-		margin-left:110px;
+  .form-horizontal {
-	}
+    .controls {
-	.settings .form-horizontal .control-label {
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-		width:100px;
+        margin-left: 110px;
-		word-wrap:break-word;
+      }
-	}
+    }
-	.settings {
+    .control-label {
-		padding-bottom:10px;
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-	}
+        width: 100px;
-	#settings.show {
+        word-wrap: break-word;
- 		width:auto;
+      }
- 		left:0px;
+    }
- 		background:white;
+  }
-	}
+  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-	#settings.show .form-actions {
+    padding-bottom: 10px;
-		position: fixed;
+  }
 		bottom: 0px;
 		left:0px;
 		right:0px;
 		margin-bottom:0px;
 		padding-bottom:0px;
 		height:60px;
 		padding-left:120px;
 		padding-top:6px;
 		padding-bottom:6px;
 	}
 }
--- a/src/styles/components/_social.scss
+++ b/src/styles/components/_social.scss
@ -1,15 +1,38 @@
-i.email, span.email {
+/*
-color: #aaa;
+ * Spreed Speak Freely.
 * Copyright (C) 2013-2014 struktur AG
 *
 * This file is part of Spreed Speak Freely.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 .#{$fa-css-prefix} {
  &.email {
    color: $social-email-color;
  }
  &.facebook {
    color: $social-facebook-color;
  }
  &.google {
    color: $social-google-color;
  }
  &.twitter {
    color: $social-twitter-color;
  }
  &.xing {
    color: $social-xing-color;
  }
 }
 i.facebook, span.facebook {
 color: #45619d;
 }
 i.twitter, span.twitter {
 color: #00aced;
 }
 i.google, span.google {
 color: #dd4b39;
 }
 i.xing, span.xing {
 color: #fff;
 }
--- a/src/styles/components/_usability.scss
+++ b/src/styles/components/_usability.scss
@ -18,53 +18,45 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 #help {
-    position:absolute;
+  bottom: 10px;
-    top:80px;
+  color: #aaa;
-    bottom:10px;
+  font-size: 1.1em;
-    left:0px;
+  left: 0;
-    right:0px;
+  margin: 0 auto;
-    width:350px;
+  position: absolute;
-    font-size:1.1em;
+  right: 0;
-    color:#aaa;
+  text-shadow: 0 0 5px black;
-    text-shadow: 0 0 5px black;
+  transition: right 200ms ease-in-out;
-    margin: 0 auto;
+  top: 80px;
-    -webkit-transition: right 200ms ease-in-out;
+  user-select: none;
-    -moz-transition: right 200ms ease-in-out;
+  width: 350px;
    -ms-transition: right 200ms ease-in-out;
    -o-transition: right 200ms ease-in-out;
    transition: right 200ms ease-in-out;
    boder-top:1px solid $bordercolor;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
 }
-.withChat #help, .withBuddylist #help {
+
-    right:260px;
+.withChat #help,
 .withBuddylist #help {
  right: 260px;
 }
-.withChat.withBuddylist #help, .withSettings #help {
+
-    right:520px;
+.withChat.withBuddylist #help,
 .withSettings #help {
  right: 520px;
 }
-#help > div {
+
-    margin:0 10px;
+#help {
-}
+  > div {
-#help .help-subline {
+    margin: 0 10px;
-    padding:20px 0;
+  }
-    color:#888;
+  .help-subline {
-}
+    color: #888;
-@media only screen and (max-width: 1020px) and (min-width: 400px) {
+    padding: 20px 0;
-    #help {
+  }
-        width:250px;
+  @include breakpt($breakpoint-useability-small, max-width, only screen){
-        font-size:1em;
+    display: none;
-    }
+  }
-    #help > div {
+  @include breakpt($breakpoint-useability-small, min-width, only screen, $breakpoint-useability-large){
-        //margin-left:10px;
+    font-size: 1em;
-    }
+    width: 250px;
-}
+  }
@media only screen and (max-width: 400px) {
 	#help {
 		display:none;
 	}
 }
--- a/src/styles/global/_angular.scss
+++ b/src/styles/global/_angular.scss
@ -18,6 +18,12 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+
-display: none;
+[ng\:cloak],
 [ng-cloak],
 [data-ng-cloak],
 [x-ng-cloak],
 .ng-cloak,
 .x-ng-cloak {
  display: none;
 }
--- a/src/styles/global/_animations.scss
+++ b/src/styles/global/_animations.scss
@ -18,26 +18,27 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 .fadetogglecontainer > div {
 position:absolute;
 width:100%;
 }
-.animate-show.ng-hide-add,
+.fadetogglecontainer > div {
-.animate-show.ng-hide-remove {
+  position: absolute;
-webkit-transition:all linear 0.5s;
+  width: 100%;
 -moz-transition:all linear 0.5s;
 -o-transition:all linear 0.5s;
 transition:all linear 0.5s;
 display:block!important;
 }
 .animate-show.ng-hide-add.ng-hide-add-active,
 .animate-show.ng-hide-remove {
 opacity:0;
 }
-.animate-show.ng-hide-add,
+.animate-show {
-.animate-show.ng-hide-remove.ng-hide-remove-active {
+  &.ng-hide-add {
-opacity:1;
+    opacity: 1;
    display: block !important;
    transition: all linear 0.5s;
    &.ng-hide-add-active {
      opacity: 0;
    }
  }
  &.ng-hide-remove {
    opacity: 0;
    display: block !important;
    transition: all linear 0.5s;
    &.ng-hide-remove-active {
      opacity: 1;
    }
  }
 }
--- a/src/styles/global/_base.scss
+++ b/src/styles/global/_base.scss
@ -25,7 +25,6 @@ body {
  background-color: $background;
  height: 100%;
  font: normal $base-font-size $font-sans-serif;
  // @include debug-vertical-alignment();
 }
 body {
@ -101,10 +100,10 @@ a {
  right: 15%;
  top: 15%;
  z-index: 20000;
-  @include transition-property(opacity);
+  transition-property: opacity;
-  @include transition-duration(.5s);
+  transition-duration: .5s;
  div {
-    color: $lighter-text;
+    color: $loading;
    display: block;
    font-size: 3em;
    left: 0;
@ -125,11 +124,11 @@ a {
  position: absolute;
  right: 0;
  top: 44px;
-  @include user-select(none);
+  user-select: none;
 }
 .welcome {
-  color: $light-text;
+  color: $welcome;
  font-size: 1.1em;
  margin-top: 80px;
  text-shadow: 0 0 5px black;
--- a/src/styles/global/_mixins.scss
+++ b/src/styles/global/_mixins.scss
@ -1,57 +1,44 @@
-@mixin breakpt($pt) {
+// not handled by autoprefixer
-  @media (max-width: $pt) {
+@mixin tap-highlight-color($color) {
-    @content;
+  -webkit-tap-highlight-color: $color;
 }
 /*  Supports media type and up to two expressions 
    ex output:
    @media only screen and (min-width: 700px) and (max-width: 1280px) {
      .bar .middle img {
        display: none; 
      }
    }
    @param $media-value1:   required - number/units
    @param $media-feature1: optional - width,height,ect...
    @param $media-type:     optional - screen,print,ect...
    @param $media-value2:   optional - number/units
    @param $media-feature2: optional - width,height,ect...
 */
@mixin breakpt($media-value1, $media-feature1: max-width, $media-type: null,
               $media-value2: null, $media-feature2: max-width) {
  @if($media-type and $media-value2) {
    @media #{$media-type} and ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
      @content;
    }
  }
  @if(not $media-type and $media-value2) {
    @media ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
      @content;
    }
  }
  @if($media-type and not $media-value2) {
    @media #{$media-type} and ($media-feature1: $media-value1) {
      @content;
    }
  }
  @if(not $media-type and not $media-value2) {
    @media ($media-feature1: $media-value1) {
      @content;
    }
  }
 }
@mixin user-select($select) {
  -khtml-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  -o-user-select: $select;
  -webkit-user-select: $select;
  user-select: $select;
 }
@mixin touch-callout($callout) {
  -webkit-touch-callout: $callout;
 }
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
 }
@mixin transition-property($property) {
  transition-property: $property;
  -webkit-transition-property: $property;
 }
@mixin transition-duration($duration) {
  transition-duration: $duration;
  -webkit-transition-duration: $duration;
 }
@mixin transition($transition) {
  transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  -webkit-transition: $transition;
 }
@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
 }
@mixin linear-gradient($gradient...) {
  background: #9dd53a; /* Old browsers */
  background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
  background: -webkit-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: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
 }
--- a/src/styles/global/_nicescroll.scss
+++ b/src/styles/global/_nicescroll.scss
@ -18,23 +18,23 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
 .nicescroll::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 background-color: $background;
 border: solid transparent;
 }
 .nicescroll::-webkit-scrollbar:hover {
 background-color: $background;
 border-left: 1px solid rgba(0,0,0,.12);
 border-right: 1px solid rgba(0,0,0,.12);
 }
 .nicescroll::-webkit-scrollbar-thumb {
 background: rgba(0,0,0,0.2);
 }
-.nicescroll::-webkit-scrollbar-thumb:active {
+.nicescroll {
-background: rgba(0,0,0,0.4);
+  &::-webkit-scrollbar {
    background-color: $background;
    border: solid transparent;
    height: 8px;
    width: 8px;
    &:hover {
      background-color: $background;
      border-left: 1px solid rgba(0,0,0,.12);
      border-right: 1px solid rgba(0,0,0,.12);
    }
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    &:active {
      background: rgba(0,0,0,0.4);
    }
  }
 }
--- a/src/styles/global/_overlaybar.scss
+++ b/src/styles/global/_overlaybar.scss
@ -1,92 +1,102 @@
-.overlaybar {
+/*
-	position:absolute;
+ * Spreed Speak Freely.
-	padding:3px 8px 0px 30px;
+ * Copyright (C) 2013-2014 struktur AG
-	vertical-align:middle;
+ *
-	background: rgba(0,0,0,0.2);
+ * This file is part of Spreed Speak Freely.
-	min-height:36px;
+ *
-	color: #ccc;
+ * This program is free software: you can redistribute it and/or modify
-	text-shadow: 0 0 5px black;
+ * it under the terms of the GNU Affero General Public License as published by
-	input[type="radio"], input[type="checkbox"] {
+ * the Free Software Foundation, either version 3 of the License, or
-		margin-top:2px;
+ * (at your option) any later version.
-	}
+ *
-    -webkit-user-select: none;
+ * This program is distributed in the hope that it will be useful,
-    -khtml-user-select: none;
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
-    -moz-user-select: none;
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    -o-user-select: none;
+ * GNU Affero General Public License for more details.
-    user-select: none;
+ *
-}
+ * You should have received a copy of the GNU Affero General Public License
-
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
-.overlaybar:hover {
+ *
-	background: rgba(0,0,0,0.5);
+ */
 }
 .overlaybar.notvisible {
 	background: transparent;
 	pointer-events: none;
 }
 .overlaybar.notvisible:hover {
 	background: transparent;
 }
 .overlaybar .btn {
 	text-shadow: none;
 }
-.overlaybar .btn-link {
+.overlaybar {
-	text-shadow: 0 0 5px black;
+  background: $componentfg3;
-}
+  color: $bordercolor;
-
+  min-height: 36px;
-.overlaybar .overlaybarbutton {
+  padding: 3px 8px 0 30px;
-	font-size:20px;
+  position: absolute;
-	vertical-align:middle;
+  text-shadow: 0 0 5px black;
-	position:absolute;
+  user-select: none;
-	left: 3px;
+  vertical-align: middle;
 	top: 1px;
 	padding:6px;
 	display:block;
 	color:#ccc;
 	z-index:15;
 	opacity:0.7;
 	pointer-events: auto;
 }
 .overlaybar .overlaybarcontent {
 	display:inline-block;
 	margin-left:.5em;
 	margin-bottom:0px;
 	max-width:60%;
 }
 .overlaybarcontent > * {
 	padding-right:.5em;
 }
 .overlaybarcontent .input-group {
 	max-width:160px;
 }
 .overlaybar label {
 	padding-top:7px !important;
 }
-.overlaybar .overlaybaroverlay {
+.overlaybar {
-	display:none;
+  &:hover {
-	opacity: 0.7;
+    background: $componentfg2;
-	text-align:left;
+  }
-	margin-left:0.5em;
+  .btn {
-	padding-top:2px;
+    text-shadow: none;
  }
  .btn-link {
    text-shadow: 0 0 5px black;
  }
  .form-group > * {
    float: left;
    padding-top: 0;
  }
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 2px;
  }
  label {
    padding-top: 7px !important;
  }
 }
-.overlaybar.notvisible {
+.overlaybar {
-	.overlaybarcontent {
+  &.notvisible {
-		display: none;
+    background: transparent;
-	}
+    pointer-events: none;
-	.overlaybaroverlay {
+    &:hover {
-		display: block;
+      background: transparent;
-	}
+    }
    .overlaybar-content {
      display: none;
    }
    .overlaybar-overlay {
      display: block;
    }
  }
  .overlaybar-button {
    color: $bordercolor;
    display: block;
    font-size: 20px;
    left: 3px;
    opacity: .7;
    padding: 6px;
    position: absolute;
    pointer-events: auto;
    top: 1px;
    vertical-align: middle;
    z-index: 15;
  }
  .overlaybar-content {
    display: inline-block;
    margin-left: .5em;
    margin-bottom: 0;
    max-width: 60%;
    > * {
      padding-right: .5em;
    }
    .input-group {
      max-width: 160px;
    }
  }
  .overlaybar-overlay {
    display: none;
    margin-left: .5em;
    opacity: .7;
    padding-top: 2px;
    text-align: left;
  }
 }
 .overlaybar .form-group > * {
 	float: left;
 	padding-top: 0px;
 }
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@ -21,6 +21,8 @@
 // ** Custom Variables **
 // --------------------------------------------------
 // general
 $background: #e5e5e5;
 $componentbg: #f5f5f5;
 $componentfg1: #262626;
@ -32,31 +34,114 @@ $bordercolor: #ccc;
 $actioncolor1: rgb(132,184,25);
 $actioncolor2: rgb(0,149,52);
-$light-text: #aaa;
+// general action based colors
-$lighter-text: #ddd;
+$action-hover: rgba(0,0,0,.4);
 $action-mute: rgb(219,79,57);
 $action-enable: $actioncolor1;
 // base
 $welcome: #aaa;
 $loading: #ddd;
 // font
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 $base-font-size: 13px; // compass
 $base-line-height: 19px; // compass
-$grey3: rgba(0,0,0,.3);
+// audio video
-$grey4: rgba(0,0,0,.4);
+$audiovideolevel: $action-enable;
 $dgrey: rgb(34,34,34);
 $red: rgb(219,79,57);
 // main navigation bar
 $minbarheight: 44px;
 $bar-logo-text-desc: rgb(34,34,34);
 $bar-btn-action-color: rgba(0,0,0,.3);
 $bar-btn-action-hover: $action-hover;
 $bar-btn-action-mute: $action-mute;
 $bar-btn-action-enable: $action-enable;
 // video
 $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);
 // buddylist
 $buddylist-background: rgba(0,0,0,.3);
 $buddylist-action-background: rgba(255,255,255,0.5);
 // chat
 $chat-background: #e7e7e7;
 $chat-disabled: #aaa;
 $chat-badge: #84b819;
 $chat-ctrl: rgba(0,0,0,.3);
 $chat-timestamp: #aaa;
 $chat-meta: #aaa;
 $chat-msg-background: white;
 $chat-msg-border: #e5e5ef;
 $chat-msg-default-icon-color: #ccc;
 $chat-msg-unread-icon-color: #FE9A2E;
 $chat-msg-sending-icon-color: $chat-msg-default-icon-color;
 $chat-msg-sent-icon-color: #5882FA;
 $chat-msg-delivered-icon-color: #5882FA;
 $chat-msg-received-icon-color: #84b819;
 $chat-msg-read-icon-color: $chat-msg-default-icon-color;
 $chat-msg-unread-icon: '\f0eb';
 $chat-msg-sending-icon: '\f0ec';
 $chat-msg-sent-icon: '\f003';
 $chat-msg-delivered-icon: '\f019';
 $chat-msg-received-icon: '\f06e';
 $chat-msg-read-icon: '\f00c';
 $chat-msg-self-background: white;
 $chat-msg-remote-background: white;
 $chat-bottom-background: $chat-background;
 $chat-typing: $chat-meta;
 $chat-input-border-color: #66afe9;
 // fileinfo
 $fileinfo-background: white;
 $fileinfo-border: #ddd;
 $fileinfo-icon-background-color: #eee;
 $fileinfo-downloading-size-border: #ddd;
 // settings
 $settings-version: #ccc;
 // social
 $social-email-color: #aaa;
 $social-facebook-color: #45619d;
 $social-google-color: #dd4b39;
 $social-twitter-color: #00aced;
 $social-xing-color: white;
 // useability
 $breakpoint-useability-small: 400px;
 $breakpoint-useability-large: 1020px;
 // breakpoints
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
-$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
+$breakpoint-video-small: 590px;
-$base-font-size: 13px;
+$breakpoint-video-medium: 630px;
-$base-line-height: 19px;
+
 $breakpoint-chat-small: 210px;
 $breakpoint-settings-medium: 630px;
 // touch specific
 $tap-highlight: rgba(0, 0, 0, 0);
 $audiovideolevel: #9dd53a;
 //main navigation bar
 $minbarheight: 44px;
 // ** Fontawsome changed variables **
 // original at libs/fontawesome/_variables.scss
 // --------------------------
-
+$fa-css-prefix:       fa;
 // ** Bootstrap changed variables **
@ -70,12 +155,11 @@ $minbarheight: 44px;
 //** Background color for `<body>`.
 $body-bg:               $background;
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif:  $font-sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -19,6 +19,7 @@
 *
 */
 // must set custom compass variables before import of compass
@import "global/variables";
@import "compass";
@import "libs/libs";
--- a/static/js/controllers/chatroomcontroller.js
+++ b/static/js/controllers/chatroomcontroller.js
@ -299,7 +299,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
                    title.html(displayName(from, true));
                    extra_css += "with_name ";
                    var imgSrc = buddyImageSrc(from);
-                    picture = $('<div class="buddyimage"><i class="fa fa-user fa-3x"/><img/></div>');
+                    picture = $('<div class="avatar"><i class="fa fa-user fa-3x"/><img/></div>');
                    if (imgSrc) {
                        picture.find("img").attr("src", imgSrc);
                    }
--- a/static/partials/buddy.html
+++ b/static/partials/buddy.html
@ -1,5 +1,5 @@
 <div class="buddy withSubline">
-    <div class="buddyimage"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div>
+    <div class="avatar"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div>
-    <div class="buddy1">{{session.Id|displayName}}</div>
+    <div class="display-name">{{session.Id|displayName}}</div>
-    <div class="buddy2"><i ng-show="session.Userid" class="fa fa-star-o"></i> {{session.Ua}}</div>
+    <div class="browser"><i ng-show="session.Userid" class="fa fa-star-o"></i> {{session.Ua}}</div>
-</div>
+</div>
--- a/static/partials/roombar.html
+++ b/static/partials/roombar.html
@ -1,6 +1,6 @@
 <div class="roombar overlaybar form-horizontal" ng-class="{notvisible: hideRoomBar}">
-	<a class="overlaybarbutton" ng-model="hideRoomBar" btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Change room')}}"><i class="fa fa-th-list"></i></a>
+	<a class="overlaybar-button" ng-model="hideRoomBar" btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Change room')}}"><i class="fa fa-th-list"></i></a>
-	<form name="roombarform" class="overlaybarcontent form-group">
+	<form name="roombarform" class="overlaybar-content form-group">
 		<label class="pull-left control-label hidden-xs">{{_('Room')}}</label>
 		<div class="pull-left">
 			<div class="input-group">
@ -11,5 +11,5 @@
 			<social-share/>
 		</div>
 	</form>
-	<label class="control-label overlaybaroverlay" title="{{_('Current room')}}">{{roomid}}</label>
+	<label class="control-label overlaybar-overlay" title="{{_('Current room')}}">{{roomid}}</label>
 </div>
--- a/static/partials/screenshare.html
+++ b/static/partials/screenshare.html
@ -1,8 +1,8 @@
 <div class="screenshare" ng-class="{remotesize: !fitScreen}">
 	<div class="screensharepane nicescroll"></div>
 	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideOptionsBar}">
-		<a class="overlaybarbutton" ng-model="hideOptionsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Screen sharing options')}}"><i class="fa fa-cogs"></i></a>
+		<a class="overlaybar-button" ng-model="hideOptionsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Screen sharing options')}}"><i class="fa fa-cogs"></i></a>
-		<form class="overlaybarcontent form-group">
+		<form class="overlaybar-content form-group">
 			<div class="checkbox">
 		        <label class="control-label pull-left">
 		          <input type="checkbox" ng-model="fitScreen"> {{_('Fit screen.')}}
@ -10,4 +10,4 @@
 	      	</div>
 		</form>
 	</div>
-</div>
+</div>