Rearange overlaybar styles to scss.

Add .bar class. Change all bar-* classes. Revert to font property instead of rhythm mixin.

html/main.html

@@ -8,11 +8,12 @@
 <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
 <page></page>
 <div id="bar">
-    <div class="bar-left">
+    <div class="bar">
+        <div class="left">
           <%template "logo" .%>
         </div>
         <status-message></status-message>
-    <div class="ng-cloak bar-right">
+        <div class="ng-cloak right">
            <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')}}" ng-show="roomstatus" 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">{{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>
@@ -20,6 +21,7 @@
            <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>
     </div>
+</div>
 <div id="roombar" class="ng-cloak">
     <room-bar/>
 </div>

src/styles/components/_bar.scss

@@ -20,16 +20,20 @@
  */
 
 #bar {
-  background-color: $componentbg;
-  color: $componentfg1;
   left: 0;
   min-height: 44px;
   position: absolute;
   right: 0;
   top: 0;
-  text-align: center;
   z-index: 5;
-  @include adjust-leading-to(2);
+}
+
+.bar {
+  background-color: $componentbg;
+  color: $componentfg1;
+  font: bold 1em/40px $font-sans-serif;
+  text-align: center;
+  // @include adjust-leading-to(2);
   @include box-shadow(0 2px 10px 0 $componentfg3);
   // @include debug-vertical-alignment();
   @include touch-callout(none);
@@ -43,7 +47,7 @@
   }
 }
 
-.bar-left {
+.bar .left {
   bottom: 0;
   left: 0;
   top: 0;
@@ -55,10 +59,11 @@
     display: inline-block;
     color: black;
     height: 32px;
+    font: normal 11px/11px $font-sans-serif;
     text-align: left;
     width: 90px;
     vertical-align: middle;
-    @include adjust-font-size-to(11px,0.4);
+    // @include adjust-font-size-to(11px,0.4);
     span {
       font-style: italic;
       left: 38px;
@@ -71,7 +76,7 @@
   }
 }
 
-.bar-middle {
+.bar .middle {
   background-color: $componentbg;
   display: inline-block;
   font-weight: bold;
@@ -133,7 +138,7 @@
   }
 }
 
-.bar-right {
+.bar .right {
   bottom: 1px;
   padding-right: 8px;
   position: absolute;
@@ -153,11 +158,12 @@
     color: $grey3;
     display: inline-block;
     height: 42px;
+    font: 24px/40px $font-sans-serif;
     margin-left: -4px;
     padding: 0;
     text-align: center;
     width: 42px;
-    @include adjust-font-size-to(24px);
+    // @include adjust-font-size-to(24px);
     &:focus {
       border: none;
       outline: none;

src/styles/global/_base.scss

@@ -19,14 +19,14 @@
  *
  */
 
-@include establish-baseline();
+// @include establish-baseline();
 
 html,
 body {
   background-clip: padding-box;
   background-color: $background;
   height: 100%;
-  font: normal #{$base-font-size}/#{$base-rhythm-unit} $font-sans-serif;
+  font: normal $base-font-size $font-sans-serif;
   // @include debug-vertical-alignment();
 }
 

src/styles/global/_mixins.scss

@@ -31,12 +31,27 @@
 @mixin transition-duration($duration) {
   transition-duration: $duration;
   -webkit-transition-duration: $duration;
-
 }
 
 @mixin transition($transition) {
-  transition: all linear 0.5s;
+  transition: $transition;
-  -moz-transition: all linear 0.5s;
+  -moz-transition: $transition;
-  -o-transition: all linear 0.5s;
+  -o-transition: $transition;
-  -webkit-transition: all linear 0.5s;
+  -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+ */
 }

src/styles/global/_overlaybar.scss

@@ -28,33 +28,37 @@
   text-shadow: 0 0 5px black;
   vertical-align: middle;
   @include user-select(none);
-  input[type="radio"], 
+  &:hover {
-  input[type="checkbox"] {
-    margin-top: 2px;
-  }
-}
-
-.overlaybar:hover {
     background: $componentfg2;
   }
-
+  &.notvisible {
-.overlaybar.notvisible {
     background: transparent;
     pointer-events: none;
-}
+    &:hover {
-.overlaybar.notvisible:hover {
       background: transparent;
     }
-
+  }
-.overlaybar .btn {
+  .btn {
     text-shadow: none;
   }
-
+  .btn-link {
-.overlaybar .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 .overlaybarbutton {
+.overlaybar {
+  .overlaybarbutton {
     font-size: 20px;
     vertical-align: middle;
     position: absolute;
@@ -67,35 +71,26 @@
     opacity: .7;
     pointer-events: auto;
   }
-
+  .overlaybarcontent {
-.overlaybar .overlaybarcontent {
     display: inline-block;
     margin-left: .5em;
     margin-bottom: 0;
     max-width: 60%;
-}
+    > * {
-
-.overlaybarcontent > * {
       padding-right: .5em;
     }
-
+    .input-group {
-.overlaybarcontent .input-group {
       max-width: 160px;
     }
-
-.overlaybar label {
-  padding-top: 7px !important;
   }
-
+  .overlaybaroverlay {
-.overlaybar .overlaybaroverlay {
     display: none;
     opacity: .7;
     text-align: left;
     margin-left: .5em;
     padding-top: 2px;
   }
-
+  &.notvisible {
-.overlaybar.notvisible {
     .overlaybarcontent {
       display: none;
     }
@@ -103,8 +98,4 @@
       display: block;
     }
   }
-
-.overlaybar .form-group > * {
-  float: left;
-  padding-top: 0;
 }

src/styles/main.scss

@@ -20,8 +20,7 @@
  */
 
 @import "global/variables";
-@import "compass";
+@import "compass/typography/vertical_rhythm";
-
 @import "libs/libs";
 
 @import "global/mixins";

static/partials/statusmessage.html

@@ -1,4 +1,4 @@
-<span class="bar-middle status-{{status}}" ng-switch on="status">
+<span class="middle status-{{status}}" ng-switch on="status">
   <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
   <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
   <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>