Updated color scheme to fit with bootstrap components better.

html/main.html

@@ -8,7 +8,7 @@
 <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
 <page></page>
 
-<header class="navbar navbar-default navbar-fixed-top bar">
+<div class="navbar navbar-default navbar-fixed-top bar">
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
@@ -23,21 +23,23 @@
                 <status-message></status-message>
             </div>
         </div>
-        <nav class="navbar-collapse collapse" collapse="isCollapsed">
+        <div class="navbar-collapse collapse" collapse="isCollapsed">
             <ul class="nav navbar-nav middle hidden-xs">
                 <status-message></status-message>
             </ul>
-            <ul class="nav navbar-nav navbar-right right ng-cloak">
+            <ul class="nav navbar-nav navbar-right right">
+                <div class="ng-cloak">
                 <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
                 <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
                 <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button>
                 <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
                 <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
                 <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+                </div>
             </ul>
-        </nav>
+        </div>
     </div>
-</header>
+</div>
 <div id="roombar" class="ng-cloak">
     <room-bar/>
 </div>

src/styles/components/_bar.scss

@@ -21,7 +21,6 @@
 
 .bar {
   background: $bar-background;
-  box-shadow: 0 2px 10px 0 $componentfg3;
   color: $componentfg1;
   font: bold 1em/40px $font-sans-serif;
   text-align: center;
@@ -50,9 +49,9 @@
     display: inline-block;
     color: black;
     height: 32px;
+    width: 90px;
     font: normal 11px/11px $font-sans-serif;
     text-align: left;
-    width: 90px;
     vertical-align: middle;
     span {
       font-style: italic;

src/styles/components/_buddylist.scss

@@ -66,7 +66,8 @@
 
 .buddylist {
   background: $buddylist-background;
-  border-top: 1px solid $bordercolor;
+  //border-top: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   bottom: 0;
   left: 25px;
   overflow-x: hidden;

src/styles/components/_chat.scss

@@ -172,7 +172,7 @@
 }
 
 .chatbody {
-  border-right: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   bottom: -1px;
   left: 0;
   position: absolute;
@@ -186,9 +186,8 @@
 
 .chatheader {
   background: $chat-header;
-  border-top: 1px solid $bordercolor;
   border-bottom: 1px solid $bordercolor;
-  border-right: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   height: 36px;
   left: 0;
   line-height: 34px;

src/styles/components/_settings.scss

@@ -20,7 +20,8 @@
  */
 
 #settings {
-  border-top: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
+  background: $settings-background;
   bottom: 0;
   padding-right: 20px;
   position: fixed;

src/styles/global/_base.scss

@@ -39,7 +39,7 @@ a {
 }
 
 #background {
-  background: $main-background repeat;
+  background: $main-background;
   bottom: 0;
   left: 0;
   position:fixed;
@@ -48,7 +48,7 @@ a {
   z-index: 0;
   @include hidpi {
     background-image: $main-background-retina;
-    background-size: 198px 200px;
+    background-size: image-width($main-background-image-retina)/2 image-height($main-background-image-retina)/2;
   }
 }
 

src/styles/global/_variables.scss

@@ -25,13 +25,13 @@
 
 // general
 $background: #e5e5e5 !default;
-$componentbg: #f5f5f5 !default;
+$componentbg: #f8f8f8 !default;
 $componentfg1: #262626 !default;
 $componentfg2: rgba(0,0,0,.5) !default;
 $componentfg3: rgba(0,0,0,.2) !default;
 $componentfg4: #737373 !default;
 $sidepanebg: white !default;
-$bordercolor: #ccc !default;
+$bordercolor: #e7e7e7 !default;
 $actioncolor1: rgb(132,184,25) !default;
 $actioncolor2: rgb(0,149,52) !default;
 $mobile-top-1: 48px !default;
@@ -45,8 +45,10 @@ $load-logo: $scalable-logo !default;
 
 
 // background
-$main-background: url("../img/bg-tiles.jpg") !default;
-$main-background-retina: url("../img/bg-tiles_x2.jpg") !default;
+$main-background-image: "../img/bg-tiles.jpg" !default;
+$main-background-image-retina: "../img/bg-tiles_x2.jpg" !default;
+$main-background: url($main-background-image) !default;
+$main-background-retina: url($main-background-image-retina) !default;
 
 // general action based colors
 $action-hover: rgba(0,0,0,.4) !default;
@@ -102,6 +104,9 @@ $video-onlyaudio-background: #666 !default;
 $video-onlyaudio: rgba(255,255,255,.3) !default;
 $video-overlayactions: rgba(0,0,0,.9) !default;
 
+// settings
+$settings-background: white;
+
 // buddylist
 $buddylist-background: $componentbg;
 $buddylist-tab-color: rgba(0,0,0,.3) !default;