header

public/css/common.css

@@ -1,7 +1,16 @@
+.mystery {
+  font-family: Ubuntu-BoldItalic;
+  font-size: 34px;
+  color: #FFFFFF !important;
+  line-height: 18px;
+  margin-right: 50px;
+}
+
 /* Sticky footer styles
 -------------------------------------------------- */
 html,
 body {
+  font-family: Ubuntu, sans-serif;
   height: 100%;
   /* The html and body elements cannot have any padding or margin. */
 }
@@ -16,6 +25,55 @@ body {
   padding: 0 0 60px;
 }
 
+.navbar-default {
+  background-color: #8DC429;
+  border-bottom: 4px solid #64920F;
+  color: #fff;
+}
+
+.navbar-default .navbar-nav>li>a {
+  color: #F4FBE8;
+  font-family: Ubuntu, sans-serif;
+  font-size: 16px;
+}
+
+.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li>a:hover  {
+  color: #373D42;
+  background-color: #fff;
+  -moz-box-shadow:    0px 4px 0px 0px rgba(55,61,56,1);
+  -webkit-box-shadow: 0px 4px 0px 0px rgba(55,61,56,1);
+  box-shadow:         0px 4px 0px 0px rgba(55,61,56,1);
+}
+
+.navbar-form .form-control {
+  border: 0;
+  border-radius: 2px;
+  background: #7CAD23;
+  -moz-box-shadow:    1px 1px 0px 0px rgba(255,255,255,0.41), inset 1px 1px 3px 0px rgba(0,0,0,0.10);
+  -webkit-box-shadow: 1px 1px 0px 0px rgba(255,255,255,0.41), inset 1px 1px 3px 0px rgba(0,0,0,0.10);
+  box-shadow:         1px 1px 0px 0px rgba(255,255,255,0.41), inset 1px 1px 3px 0px rgba(0,0,0,0.10);
+}
+
+#search {
+  color: #fff;
+  font-family: Ubuntu-Light;
+}
+
+#search::-webkit-input-placeholder { 
+  font-family: Ubuntu-LightItalic;
+  font-size: 13px;
+  color: #BCDF7E;
+  line-height: 18px;
+}
+
+
+#search::-moz-placeholder { 
+  font-family: Ubuntu-LightItalic;
+  font-size: 13px;
+  color: #BCDF7E;
+  line-height: 18px;
+}
+
 /* Set the fixed height of the footer here */
 #footer {
   height: 60px;

public/views/header.html

@@ -1,4 +1,4 @@
-<div class="container" data-ng-controller="HeaderController">
+<div data-ng-controller="HeaderController">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
@@ -6,7 +6,7 @@
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="navbar-brand" href="#!">Mystery</a>
+    <a class="mystery navbar-brand" href="#!">Mystery</a>
   </div>
   <div class="collapse navbar-collapse">
     <ul class="nav navbar-nav">
@@ -14,12 +14,13 @@
         <a href="#!/{{item.link}}">{{item.title}}</a>
       </li>
     </ul>
-    <div ng-controller="SearchController">
+    <div ng-controller="SearchController" class="pull-right">
       <form class="navbar-form navbar-left" role="search" ng-submit="search()">
         <div class="form-group" ng-class="{'has-error': badQuery}">
           <input id="search" type="text" class="form-control" ng-model="q" placeholder="Search for block, transaction or address">
         </div>
         <span class="text-danger" ng-show="badQuery">No matching records found!</span>
+
       </form>
     </div>
   </div>