Css work applying new styles for topmenu dashboard button and logo/menu icon

src/app/partials/dashboard_topnav.html

@@ -5,13 +5,18 @@
 			<div class="top-nav">
 				<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
 					<img class="logo-icon" src="img/fav32.png"></img>
-					<i class="fa fa-angle-right"></i>
+					<i class="fa fa-bars"></i>
 				</a>
 
-				<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
-					<i class="fa fa-th-large"></i>
-					<i class="fa fa-angle-down"></i>
-				</a>
+				<div class="top-nav-dashboards-btn">
+					<a class="pointer" ng-click="openSearch()">
+						<i class="fa fa-th-large"></i>
+						<i class="fa fa-caret-down"></i>
+					</a>
+				</div>
+
+				<span class="fa fa-angle-right top-nav-breadcrumb-icon">
+				</span>
 
 				<a ng-click="asd()" class="top-nav-title pointer">
 					 {{dashboard.title}}

src/css/less/console.less

@@ -1,69 +0,0 @@
-.grafana-console {
-  position: fixed;
-  width: 100%;
-  bottom: 0px;
-  height: 300px;
-  background: @grafanaPanelBackground;
-  border-top: 1px solid @fullEditBorder;
-}
-
-.grafana-console-header {
-  padding: 2px 5px;
-}
-
-.grafana-console-item {
-  .icon-caret-right {
-    font-size: 14px;
-    color: @blue;
-  }
-  margin: 2px 0;
-  display: table-row;
-}
-
-.grafana-console-body {
-  overflow-y: auto;
-  display: table;
-  width: 100%;
-}
-
-.gfc-col {
-  display: table-cell;
-  padding: 2px 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  vertical-align: middle;
-}
-
-.grafana-console-method {
-  text-align: center;
-}
-
-.grafana-console-error {
-  .grafana-console-method {
-    color: red;
-  }
-}
-
-.grafana-console-field2 {
-  width: 90%;
-}
-
-.grafana-console-time:before {
-  content: '(';
-  color: rgb(106, 253, 81);
-}
-
-.grafana-console-time:after {
-  content: ')';
-  color: rgb(106, 253, 81);
-}
-
-.grafana-console-time {
-  color: rgb(162, 196, 253);
-}
-
-.grafana-console-elapsed {
-  text-align: right;
-  color: rgb(162, 196, 253);
-}
-

src/css/less/grafana.less

@@ -1,7 +1,6 @@
 @import "p_pro.less";
 @import "submenu.less";
 @import "graph.less";
-@import "console.less";
 @import "bootstrap-tagsinput.less";
 @import "tables_lists.less";
 @import "search.less";
@@ -48,10 +47,6 @@
   }
 }
 
-.logo-icon {
-  width: 24px;
-}
-
 .row-button {
   width: 24px;
 }

src/css/less/navbar.less

@@ -11,48 +11,75 @@
   float: left;
 }
 
+.fa.top-nav-breadcrumb-icon {
+  margin: 17px 21px 8px 0px;
+  float: left;
+  font-size: 160%;
+  color: @textColor;
+}
+
 .top-nav-menu-btn {
+  border-radius: 50%;
+  background: black;
   display: block;
   float: left;
-  padding: 11px 9px 11px 14px;
-  background: @grafanaTargetBackground;
-  border: 1px solid rgb(55, 54, 54);
-  i {
-    font-size: 160%;
-    color: darken(@gray, 15%);
-    padding: 0px 0px 0px 0px;
-    position: relative;
-    top: 4px;
+  padding: 4px;
+  margin: 7px 6px 3px 9px;
+  .fa {
+    display: none;
+  }
+  img {
+    width: 30px;
   }
   &:hover {
-    background: lighten(@grafanaTargetBackground, 3%);
+    .fa {
+      display: block;
+      width: 30px;
+      height: 30px;
+      color: @textColor;
+      opacity: .7;
+      position: relative;
+      left: 6px;
+      top: 4px;
+      font-size: 150%;
+    }
+    img {
+      display: none;
+    }
   }
 }
 
 .top-nav-dashboards-btn {
   display: block;
   float: left;
-  padding: 15px 7px 9px 14px;
+  margin: 10px 8px 5px 14px;
+  border-radius: 3px;
   font-size: 1.4em;
   font-weight: bold;
   color: #a2a2a2;
-  margin: 0 18px 0 0;
-  border: 1px solid rgb(55, 54, 54);
-  border-left: none;
-  background: @grafanaTargetBackground;
-  .fa-th-large {
-    font-size: 123%;
+  border: 1px solid #555;
+
+  a {
+    display: inline-block;
+    background: @grafanaTargetFuncBackground;
+    padding: 5px 4px 5px 13px;
+    border: 1px solid #000;
+    border-radius: 3px;
+    color: #a2a2a2;
+
+    &:hover {
+      background: @grafanaTargetFuncHightlight;
+      .fa {
+        color: @linkColorHover
+      }
+    }
   }
-  .fa-angle-down {
+
+  .fa-caret-down {
+    font-size: 60%;
     position: relative;
     top: 4px;
   }
-  &:hover {
-    background: lighten(@grafanaTargetBackground, 3%);
-    .fa {
-      color: @textColor;
-    }
-  }
 }
 
 .top-nav-breadcrumb {

src/css/less/sidemenu.less

@@ -55,11 +55,18 @@
 
 .sidemenu-top-btn {
   display: block;
-  padding: 14px 0px 10px 27px;
-  background: @grafanaTargetBackground;
-  border: 1px solid rgb(55, 54, 54);
+  padding: 8px 0 4px 22px;
+  background-color: @navbarBackground;
+  border-right: 3px solid black;
+  img {
+    border-radius: 50%;
+    background: black;
+    width: 30px;
+    padding: 4px;
+  }
   i {
     padding-right: 5px;
+    padding-top: 5px;
     font-size: 170%;
     color: @gray;
   }

src/css/less/variables.dark.less

@@ -13,7 +13,6 @@
 @grayLighter:           #BBBFC2;
 @white:                 #fff;
 
-
 // Accent colors
 // -------------------------
 @blue:                  #33B5E5;
@@ -30,9 +29,6 @@
 // -------------------------
 @grafanaPanelBackground: @grayDarker;
 
-// Tabs
-@fullEditBorder:          #555;
-
 // Graphite Target Editor
 @grafanaTargetBorder:         @black;
 @grafanaTargetBackground:     @grayDark;