Convert part of chat to scss. Move colors to varialbes.

src/styles/components/_chat.scss

@@ -18,204 +18,198 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #chat {
-position: absolute;
+  bottom: 0;
-bottom:0px;
+  perspective: 1000;
-right:260px;
+  pointer-events: none;
-width:260px;
+  position: absolute;
-top:0px;
+  right: 260px;
-pointer-events: none;
+  top: 0;
-z-index:45;
+  width: 260px;
--webkit-perspective: 1000;
+  z-index: 45;
--moz-perspective: 1000;
--o-perspective: 1000;
-perspective: 1000;
 }
+
 .withChat #chat .chatcontainer {
-left:0px;
+  left:0px;
 }
+
+.withChat .chatpane.flip {
+  transform: rotateY(360deg);
+}
+
 .withChat.withChatMaximized #chat {
-left:0px;
+  left: 0;
-width:auto;
+  width: auto;
-	.chatcontainer {
+    .chatcontainer {
-		width:auto;
+      width: auto;
-	}
+    }
 }
+
 .chatcontainer {
-position:absolute;
+  background: $chat-background;
-top:0px;
+  bottom: 0;
-left:260px;
+  left: 260px;
-right:0px;
+  overflow: hidden;
-bottom:0px;
+  position: absolute;
-width:260px;
+  right: 0;
-overflow:hidden;
+  top: 0;
--webkit-transition: left 200ms ease-in-out;
+  transition: left 200ms ease-in-out;
--moz-transition: left 200ms ease-in-out;
+  width: 260px;
--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;
+  position: absolute;
-top:0px;
+  top: 0;
-left:100%;
+  left: 100%;
-bottom:0px;
+  bottom: 0;
-width:100%;
+  width: 100%;
-background: #e7e7e7;
+  background: $chat-background;
--webkit-transition: left 200ms ease-in-out;
+  transition: left 200ms ease-in-out;
--moz-transition: left 200ms ease-in-out;
+  .list-group {
--ms-transition: left 200ms ease-in-out;
+    overflow-x: hidden;
--o-transition: left 200ms ease-in-out;
+    overflow-y: auto;
-transition: left 200ms ease-in-out;
+    margin-top: -1px;
-	.list-group {
+    margin-bottom: -1px;
-		margin-top:-1px;
+    max-height: 100%;
-		margin-bottom:-1px;
+  }
-		max-height:100%;
+  .list-group-item {
-		overflow-x: hidden;
+    border-right: none;
-		overflow-y: auto;
+    border-left: none;
-	}
+    border-radius: 0;
-	.list-group-item {
+    position: relative;
-		border-right:none;
+  }
-		border-left:none;
+  .list-group-item .fa-lg {
-		-webkit-border-radius: 0px;
+    display: inline-block;
-        -moz-border-radius: 0px;
+    text-align: center;
-        border-radius: 0px;
+    width: 18px;
-        position:relative;
+  }
-	}
+  .list-group-item .badge {
-	.list-group-item .fa-lg {
+    background: $chat-badge;
-		display:inline-block;
+    border: 1px solid white;
-		width:18px;
+    font-size: .8em;
-		text-align:center;
+  }
-	}
+  .list-group-item {
-	.list-group-item .badge {
+    padding-right: 30px;
-		background: #84b819;
+  }
-		border: 1px solid white;
+  .list-group-item.disabled {
-		font-size:.8em;
+    color: $chat-disabled;
-	}
+  }
-	.list-group-item {
+  .list-group-item > .item-btn {
-		padding-right: 30px;
+    cursor: pointer;
-	}
+    display:none;
-	.list-group-item.disabled {
+    position:absolute;
-		color:#aaa;
+    right:12px;
-	}
+  }
-	.list-group-item > .item-btn {
+  .list-group-item:hover > .item-btn {
-		position:absolute;
+    display:inline;
-		right:12px;
+  }
-		cursor: pointer;
-		display:none;
-	}
-	.list-group-item:hover > .item-btn {
-		display:inline;
-	}
 
 }
+
 .chatpane {
-position:absolute;
+  backface-visibility: hidden;
-top:0px;
+  bottom: 0;
-right:0px;
+  position: absolute;
-bottom:0px;
+  right: 0;
-width:100%;
+  top: 0;
--webkit-transition: 0.3s;
+  transition: 0.3s;
--webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
--moz-transition: 0.3s;
+  width: 100%;
--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);
+.showchatlist {
--moz-transform: rotateY(360deg);
+  .chatpane {
--o-transform: rotateY(360deg);
+    right: 100%;
-transform: rotateY(360deg);
+  }
+  .chatlist {
+    left: 0;
+  }
 }
+
 .chat {
-pointer-events: auto;
+  background: $chat-background;
-position:absolute;
+  display: none;
-top:0px;
+  bottom: 0;
-bottom:0px;
+  left: 0;
-right:0px;
+  overflow: hidden;
-left:0px;
+  pointer-events: auto;
-background: #e7e7e7;
+  position: absolute;
-overflow:hidden;
+  right: 0;
-display:none;
+  top: 0;
-}
-.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 {
-.chat .chatheader {
+  &.active {
-position:absolute;
+    &.visible {
-left:0px;
+      display:block;
-right:0px;
+    }
-top:0px;
+    .chatbody {
-background: $componentbg;
+      // nothing
-padding:0px 4px 0px 8px;
+    }
-border-top: 1px solid $bordercolor;
+    .chatheader {
-border-bottom: 1px solid $bordercolor;
+      // nothing
-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;
+.chatbody {
-max-width:60%;
+  border-right: 1px solid $bordercolor;
-text-overflow:ellipsis;
+  bottom: -1px;
-white-space:nowrap;
+  left: 0;
-overflow:hidden;
+  position: absolute;
-pointer-events: none;
+  right: 0;
-vertical-align: middle;
+  top: 36px;
 }
-.chat .chatheader .ctrl i {
+
-padding:6px;
+.chatheader {
-cursor: pointer;
+  background: $componentbg;
+  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 {
+    padding-left: 28px;
+    display: inline;
+  }
+  .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;
+  }
 }
+
 .chat .outputbox {
 position:absolute;
 left:0px;

src/styles/global/_variables.scss

@@ -48,6 +48,11 @@ $video-overlayactions: rgba(0,0,0,.9);
 $buddylist-background: rgba(0,0,0,.3);
 $buddylist-action-background: rgba(255,255,255,0.5);
 
+$chat-background: #e7e7e7;
+$chat-disabled: #aaa;
+$chat-badge: #84b819;
+$chat-ctrl: rgba(0,0,0,.3);
+
 $tap-highlight: rgba(0, 0, 0, 0);
 
 $breakpoint-small: 480px;