Made navbar's SignIn/Register more visible

static/cranefly/css/cranefly.css

@@ -864,8 +864,9 @@ footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .cred
 .navbar .navbar-inner .navbar-blocks li a:hover i,.navbar .navbar-inner .navbar-blocks li a:active i,.navbar .navbar-inner .navbar-blocks li .btn-link:hover i,.navbar .navbar-inner .navbar-blocks li .btn-link:active i{background-image:url("../img/glyphicons-halflings-white.png");opacity:1;filter:alpha(opacity=100);}
 .navbar .navbar-inner .navbar-blocks li a:hover .label,.navbar .navbar-inner .navbar-blocks li a:active .label,.navbar .navbar-inner .navbar-blocks li .btn-link:hover .label,.navbar .navbar-inner .navbar-blocks li .btn-link:active .label{background-color:#eeeeee;color:#333333;}
 .navbar .navbar-inner .navbar-blocks li.user-profile a:link,.navbar .navbar-inner .navbar-blocks li.user-profile a:visited,.navbar .navbar-inner .navbar-blocks li.user-profile a:hover,.navbar .navbar-inner .navbar-blocks li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;font-weight:bold;text-shadow:none;}.navbar .navbar-inner .navbar-blocks li.user-profile a:link img,.navbar .navbar-inner .navbar-blocks li.user-profile a:visited img,.navbar .navbar-inner .navbar-blocks li.user-profile a:hover img,.navbar .navbar-inner .navbar-blocks li.user-profile a:active img{background-color:#ffffff;border-radius:3px;-webkit-box-shadow:0px 0px 4px #eeeeee;-moz-box-shadow:0px 0px 4px #eeeeee;box-shadow:0px 0px 4px #eeeeee;margin-right:4px;width:32px;height:32px;position:relative;bottom:1px;}
-.navbar .navbar-inner .navbar-user-nav li a:link,.navbar .navbar-inner .navbar-user-nav li a:visited{opacity:0.5;filter:alpha(opacity=50);padding:2px 8px;margin-left:8px;margin-top:13px;color:#000000;font-weight:bold;text-shadow:none;}
-.navbar .navbar-inner .navbar-user-nav li a:active,.navbar .navbar-inner .navbar-user-nav li a:hover{opacity:0.9;filter:alpha(opacity=90);}
+.navbar .navbar-inner .navbar-user-nav li .btn{padding:2px 8px;margin-left:8px;margin-top:13px;}.navbar .navbar-inner .navbar-user-nav li .btn:link,.navbar .navbar-inner .navbar-user-nav li .btn:active,.navbar .navbar-inner .navbar-user-nav li .btn:hover,.navbar .navbar-inner .navbar-user-nav li .btn:visited{color:#ffffff;}
+.navbar .navbar-inner .navbar-user-nav li .btn.btn-danger{text-shadow:0px 1px 0px #902d20;}.navbar .navbar-inner .navbar-user-nav li .btn.btn-danger:hover,.navbar .navbar-inner .navbar-user-nav li .btn.btn-danger:active,.navbar .navbar-inner .navbar-user-nav li .btn.btn-danger:focus{background-color:#e82c15;border-color:#d12813;}
+.navbar .navbar-inner .navbar-user-nav li .btn.btn-inverse{text-shadow:0px 1px 0px #0d0d0d;}.navbar .navbar-inner .navbar-user-nav li .btn.btn-inverse:hover,.navbar .navbar-inner .navbar-user-nav li .btn.btn-inverse:active,.navbar .navbar-inner .navbar-user-nav li .btn.btn-inverse:focus{background-color:#262626;border-color:#1a1a1a;}
 footer .breadcrumb{background:none;border:none;margin:0px;padding:0px;font-weight:bold;text-shadow:none;}footer .breadcrumb li{text-shadow:none;}footer .breadcrumb li a:link,footer .breadcrumb li a:active,footer .breadcrumb li a:visited,footer .breadcrumb li a:hover{color:#333333;}
 footer .breadcrumb li .divider{opacity:0.3;filter:alpha(opacity=30);margin-left:-6px;}
 footer .breadcrumb li.active{color:#555555;}
@@ -882,11 +883,17 @@ footer .breadcrumb li.active{color:#555555;}
 .form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}
 .btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
 .btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover,.btn.btn-primary:active{background-color:#268eb9;border-color:#217ea4;}
+.btn.btn-primary i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-info{background-color:#587987;border-color:#4e6b78;text-shadow:0px 1px 0px #3a5059;}.btn.btn-info:hover,.btn.btn-info:active{background-color:#478098;border-color:#3f7286;}
+.btn.btn-info i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-success{background-color:#589358;border-color:#4e834e;text-shadow:0px 1px 0px #2f6f2f;}.btn.btn-success:hover,.btn.btn-success:active{background-color:#46a546;border-color:#3e933e;}
+.btn.btn-success i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-warning{background-color:#e59119;border-color:#ce8217;text-shadow:0px 1px 0px #ad6704;}.btn.btn-warning:hover,.btn.btn-warning:active{background-color:#f89406;border-color:#df8505;}
+.btn.btn-warning i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;text-shadow:0px 1px 0px #902d20;}.btn.btn-danger:hover,.btn.btn-danger:active{background-color:#e82c15;border-color:#d12813;}
+.btn.btn-danger i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover,.btn.btn-inverse:active{background-color:#262626;border-color:#1a1a1a;}
+.btn.btn-inverse i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-link{opacity:0.6;filter:alpha(opacity=60);color:#333333;}.btn.btn-link:hover,.btn.btn-link:active{opacity:0.9;filter:alpha(opacity=90);}
 .error-page{text-align:center;}.error-page .error-color{color:#cf402e;}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0px 0px 0px 3px #e38b80;-moz-box-shadow:0px 0px 0px 3px #e38b80;box-shadow:0px 0px 0px 3px #e38b80;padding:11px 19px;text-align:left;}.error-page .error-ban-reason :last-child{margin-bottom:0px;padding-bottom:0px;}

static/cranefly/css/cranefly/buttons.less

@@ -24,6 +24,10 @@
       background-color: saturate(@bluePale, 20%);
       border-color: darken(saturate(@bluePale, 20%), 5%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-info {
@@ -36,6 +40,10 @@
       background-color: desaturate(@bluePale, 10%);
       border-color: darken(desaturate(@bluePale, 10%), 5%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-success {
@@ -48,6 +56,10 @@
       background-color: @green;
       border-color: darken(@green, 5%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-warning {
@@ -60,6 +72,10 @@
       background-color: @orange;
       border-color: darken(@orange, 5%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-danger {
@@ -72,6 +88,10 @@
       background-color: saturate(@red, 20%);
       border-color: darken(saturate(@red, 20%), 5%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-inverse {
@@ -84,6 +104,10 @@
       background-color: darken(@textColor, 5%);
       border-color: darken(@textColor, 10%);
     }
+
+    i {
+      background-image: url("@{iconWhiteSpritePath}");
+    }
   }
 
   &.btn-link {

static/cranefly/css/cranefly/navbar.less

@@ -128,19 +128,32 @@
 
     .navbar-user-nav {
       li {
-        a:link, a:visited {
-          .opacity(50);
+        .btn {
           padding: 2px 8px;
           margin-left: 8px;
           margin-top: (@baseLineHeight / 2) + 3;
 
-          color: @black;
-          font-weight: bold;
-          text-shadow: none;
-        }
+          &:link, &:active, &:hover, &:visited {
+            color: @white;
+          }
+
+          &.btn-danger {
+            text-shadow: 0px 1px 0px darken(@red, 15%);
 
-        a:active, a:hover {
-          .opacity(90);
+            &:hover, &:active, &:focus {
+              background-color: saturate(@red, 20%);
+              border-color: darken(saturate(@red, 20%), 5%);
+            }
+          }
+
+          &.btn-inverse {
+            text-shadow: 0px 1px 0px darken(@textColor, 15%);
+
+            &:hover, &:active, &:focus {
+              background-color: darken(@textColor, 5%);
+              border-color: darken(@textColor, 10%);
+            }
+          }
         }
       }
     }

templates/cranefly/layout.html

@@ -40,8 +40,8 @@
         </ul>
         {% else %}
         <ul class="nav navbar-user-nav pull-right">
-          <li><a href="{% url 'sign_in' %}" title="{% trans %}Sign In using your account data{% endtrans %}" class="tooltip-bottom"><i class="icon-check"></i> {% trans %}Sign In{% endtrans %}</a></li>{% if settings.account_activation != 'block' %}
-          <li><a href="{% url 'register' %}" title="{% trans %}Register new account{% endtrans %}" class="tooltip-bottom"><i class="icon-edit"></i> {% trans %}Register{% endtrans %}</a></li>{% endif %}
+          <li><a href="{% url 'sign_in' %}" title="{% trans %}Sign In using your account data{% endtrans %}" class="tooltip-bottom btn btn-danger"><i class="icon-check"></i> {% trans %}Sign In{% endtrans %}</a></li>{% if settings.account_activation != 'block' %}
+          <li><a href="{% url 'register' %}" title="{% trans %}Register new account{% endtrans %}" class="tooltip-bottom btn btn-inverse"><i class="icon-edit"></i> {% trans %}Register{% endtrans %}</a></li>{% endif %}
         </ul>
         {% endif %}
         {% endif %}