Flatter navbar icons.

static/cranefly/css/cranefly.css

@@ -537,7 +537,7 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .navbar .nav>li{float:left}
 .navbar .nav>li>a{float:none;padding:15px 15px 15px;color:#777;text-decoration:none;text-shadow:0 1px 0 #fff}
 .navbar .nav .dropdown-toggle .caret{margin-top:8px}
-.navbar .nav>li>a:focus,.navbar .nav>li>a:hover{background-color:transparent;color:#333;text-decoration:none}
+.navbar .nav>li>a:focus,.navbar .nav>li>a:hover{background-color:#e7e7e7;color:#333;text-decoration:none}
 .navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555;text-decoration:none;background-color:#e7e7e7;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);box-shadow:inset 0 3px 8px rgba(0,0,0,0.125)}
 .navbar .btn-navbar{display:none;float:right;padding:7px 10px;margin-left:5px;margin-right:5px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#eee;background-image:-moz-linear-gradient(top, #f2f2f2, #e7e7e7);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e7e7e7));background-image:-webkit-linear-gradient(top, #f2f2f2, #e7e7e7);background-image:-o-linear-gradient(top, #f2f2f2, #e7e7e7);background-image:linear-gradient(to bottom, #f2f2f2, #e7e7e7);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe7e7e7', GradientType=0);border-color:#e7e7e7 #e7e7e7 #c0c0c0;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#e7e7e7;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)}.navbar .btn-navbar:hover,.navbar .btn-navbar:focus,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled]{color:#fff;background-color:#e7e7e7;*background-color:#dadada}
 .navbar .btn-navbar:active,.navbar .btn-navbar.active{background-color:#cdcdcd \9}
@@ -743,12 +743,8 @@ footer .container .credits p{margin-bottom:0;color:#555;font-size:90%}footer .co
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:link,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:visited{margin-left:7px;position:relative;top:1px;color:#999;font-weight:bold}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:active,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:hover{color:#333}
 .navbar-header .navbar-inner .navbar-blocks{margin-left:6px}.navbar-header .navbar-inner .navbar-blocks li{margin-left:6px}.navbar-header .navbar-inner .navbar-blocks li form{margin:0;padding:0}
-.navbar-header .navbar-inner .navbar-blocks li a:link,.navbar-header .navbar-inner .navbar-blocks li a:visited,.navbar-header .navbar-inner .navbar-blocks li .btn-link{background-color:#f8f8f8;border:1px solid #dfdfdf;border-radius:3px;padding:5px 0;margin-top:9px;min-width:30px;color:#555;text-align:center}.navbar-header .navbar-inner .navbar-blocks li a:link.fluid,.navbar-header .navbar-inner .navbar-blocks li a:visited.fluid,.navbar-header .navbar-inner .navbar-blocks li .btn-link.fluid{padding:5px 8px}
-.navbar-header .navbar-inner .navbar-blocks li a:link .label,.navbar-header .navbar-inner .navbar-blocks li a:visited .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link .label{background-color:#cf402e;margin-left:7px;padding-left:6px;padding-right:5px;position:relative;bottom:1px}
-.navbar-header .navbar-inner .navbar-blocks li a:hover,.navbar-header .navbar-inner .navbar-blocks li a:active,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active{background-color:#08c;border-color:#069;color:#fff;text-shadow:0 1px 1px #069}.navbar-header .navbar-inner .navbar-blocks li a:hover.danger,.navbar-header .navbar-inner .navbar-blocks li a:active.danger,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover.danger,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active.danger{background-color:#cf402e;border-color:#a53325;text-shadow:0 1px 1px #a53325}
-.navbar-header .navbar-inner .navbar-blocks li a:hover.hot,.navbar-header .navbar-inner .navbar-blocks li a:active.hot,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover.hot,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active.hot{background-color:#f89406;border-color:#c67605;text-shadow:0 1px 1px #c67605}
-.navbar-header .navbar-inner .navbar-blocks li a:hover.fresh,.navbar-header .navbar-inner .navbar-blocks li a:active.fresh,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover.fresh,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active.fresh{background-color:#46a546;border-color:#378137;text-shadow:0 1px 1px #378137}
-.navbar-header .navbar-inner .navbar-blocks li a:hover .label,.navbar-header .navbar-inner .navbar-blocks li a:active .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active .label{background-color:#fff;color:#08c}
+.navbar-header .navbar-inner .navbar-blocks li a:link,.navbar-header .navbar-inner .navbar-blocks li a:visited,.navbar-header .navbar-inner .navbar-blocks li .btn-link{min-width:20px;font-size:17.5px;text-align:center}.navbar-header .navbar-inner .navbar-blocks li a:link .label,.navbar-header .navbar-inner .navbar-blocks li a:visited .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link .label{background-color:#cf402e;margin-left:7px;padding-left:6px;padding-right:5px;padding-bottom:3px;position:relative;bottom:3px;color:#fff;font-size:14px;text-shadow:0 -1px 1px #7c261b}
+.navbar-header .navbar-inner .navbar-blocks li a:hover,.navbar-header .navbar-inner .navbar-blocks li a:active,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active{text-shadow:0 -2px 2px #fff}
 .navbar-header .navbar-inner .navbar-blocks li.user-profile>a:link,.navbar-header .navbar-inner .navbar-blocks li.user-profile>a:visited,.navbar-header .navbar-inner .navbar-blocks li.user-profile>a:hover,.navbar-header .navbar-inner .navbar-blocks li.user-profile>a:active{color:#555 !important;font-size:17.5px}
 .navbar-header .navbar-inner .navbar-blocks li.user-profile a:link,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;color:#222;font-weight:bold;text-shadow:none}.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active img{border-radius:3px;margin-right:6px;width:32px;height:32px;position:relative;bottom:1px}
 .navbar-header .navbar-inner .navbar-compact{display:none}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-top:0;padding:14px;padding-top:10px;padding-bottom:8px}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link img,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited img{margin-right:0;margin-left:6px}

static/cranefly/css/cranefly/navbar.less

@@ -155,60 +155,28 @@
         }
 
         a:link, a:visited, .btn-link {
-          background-color: lighten(@navbarBackground, 2%);
-          border: 1px solid @navbarBorder;
-          border-radius: @baseBorderRadius;
-          padding: 5px 0px;
-          margin-top: ((@navbarHeight - @baseLineHeight) / 2) - 6;
-          min-width: 30px;
+          min-width: 20px;
 
-          color: @gray;
+          font-size: @fontSizeLarge;
           text-align: center;
 
-          &.fluid {
-          	padding: 5px 8px;
-          }
-
           .label {
             background-color: @red;
             margin-left: @baseFontSize / 2;
             padding-left: 6px;
             padding-right: 5px;
+            padding-bottom: 3px;
             position: relative;
-            bottom: 1px;
+            bottom: 3px;
+
+            color: @white;
+            font-size: @baseFontSize;
+            text-shadow: 0px -1px 1px darken(@red, 20%);
           }
         }
 
         a:hover, a:active, .btn-link:hover, .btn-link:active {
-          background-color: @linkColor;
-          border-color: darken(@linkColor, 10%);
-
-          color: @white;
-          text-shadow: 0px 1px 1px darken(@linkColor, 10%);
-
-          &.danger {
-            background-color: @red;
-          	border-color: darken(@red, 10%);
-          	text-shadow: 0px 1px 1px darken(@red, 10%);
-          }
-
-          &.hot {
-            background-color: @orange;
-          	border-color: darken(@orange, 10%);
-          	text-shadow: 0px 1px 1px darken(@orange, 10%);
-          }
-
-          &.fresh {
-            background-color: @green;
-          	border-color: darken(@green, 10%);
-          	text-shadow: 0px 1px 1px darken(@green, 10%);
-          }
-
-          .label {
-            background-color: @white;
-
-            color: @linkColor;
-          }
+        	text-shadow: 0px -2px 2px @white;
         }
 
         &.user-profile {

static/cranefly/css/variables.less

@@ -227,9 +227,9 @@
 
 @navbarText:                      #777;
 @navbarLinkColor:                 #777;
-@navbarLinkColorHover:            @grayDark;
+@navbarLinkColorHover:            @textColor;
 @navbarLinkColorActive:           @gray;
-@navbarLinkBackgroundHover:       transparent;
+@navbarLinkBackgroundHover:       darken(@navbarBackground, 5%);
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
 @navbarLogoImage:                 "../img/logo.png";