changeset 2384:c443cca70e67

improves color contrast issues with the navbar
author sharky93 <rishabhr123@gmail.com>
date Sat, 17 Aug 2013 03:55:02 +0530
parents 1430714a7924
children e9b7e3ab77db
files MoinMoin/themes/basic/static/css/basic.css MoinMoin/themes/basic/static/custom-less/basic.less MoinMoin/themes/basic/static/custom-less/variables.less MoinMoin/themes/basic/templates/layout.html
diffstat 4 files changed, 83 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/MoinMoin/themes/basic/static/css/basic.css	Sat Aug 17 03:27:45 2013 +0530
+++ b/MoinMoin/themes/basic/static/css/basic.css	Sat Aug 17 03:55:02 2013 +0530
@@ -4325,3 +4325,71 @@
   padding-left: 0;
   overflow: hidden;
 }
+.moin-navbar-inverse {
+  background-color: #222222;
+  background-color: #1b436d;
+}
+.moin-navbar-inverse .navbar-brand {
+  color: #999999;
+}
+.moin-navbar-inverse .navbar-brand:hover,
+.moin-navbar-inverse .navbar-brand:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+.moin-navbar-inverse .navbar-text {
+  color: #999999;
+}
+.moin-navbar-inverse .navbar-nav > li > a {
+  color: #999999;
+}
+.moin-navbar-inverse .navbar-nav > li > a:hover,
+.moin-navbar-inverse .navbar-nav > li > a:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+.moin-navbar-inverse .navbar-nav > .active > a,
+.moin-navbar-inverse .navbar-nav > .active > a:hover,
+.moin-navbar-inverse .navbar-nav > .active > a:focus {
+  color: #ffffff;
+  background-color: #080808;
+}
+.moin-navbar-inverse .navbar-nav > .disabled > a,
+.moin-navbar-inverse .navbar-nav > .disabled > a:hover,
+.moin-navbar-inverse .navbar-nav > .disabled > a:focus {
+  color: #444444;
+  background-color: transparent;
+}
+.moin-navbar-inverse .navbar-toggle {
+  border-color: #333333;
+}
+.moin-navbar-inverse .navbar-toggle:hover,
+.moin-navbar-inverse .navbar-toggle:focus {
+  background-color: #333333;
+}
+.moin-navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #ffffff;
+}
+.moin-navbar-inverse .navbar-nav > .open > a,
+.moin-navbar-inverse .navbar-nav > .open > a:hover,
+.moin-navbar-inverse .navbar-nav > .open > a:focus {
+  background-color: #080808;
+  color: #ffffff;
+}
+.moin-navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+.moin-navbar-inverse .navbar-nav > .dropdown > a .caret {
+  border-top-color: #999999;
+  border-bottom-color: #999999;
+}
+.moin-navbar-inverse .navbar-nav > .open > a .caret,
+.moin-navbar-inverse .navbar-nav > .open > a:hover .caret,
+.moin-navbar-inverse .navbar-nav > .open > a:focus .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+.moin-navbar-inverse .navbar-nav > li > a {
+  color: #c8ddf1;
+}
--- a/MoinMoin/themes/basic/static/custom-less/basic.less	Sat Aug 17 03:27:45 2013 +0530
+++ b/MoinMoin/themes/basic/static/custom-less/basic.less	Sat Aug 17 03:55:02 2013 +0530
@@ -37,3 +37,13 @@
   .list-group;
   overflow: hidden;
 }
+
+.moin-navbar-inverse {
+  .navbar-inverse;
+  background-color: darken(@moin-navbar-inverse-color, 5%);
+  .navbar-nav {
+    > li > a {
+      color: lighten(@moin-navbar-inverse-color, 55%);
+    }
+  }
+}
--- a/MoinMoin/themes/basic/static/custom-less/variables.less	Sat Aug 17 03:27:45 2013 +0530
+++ b/MoinMoin/themes/basic/static/custom-less/variables.less	Sat Aug 17 03:55:02 2013 +0530
@@ -245,6 +245,10 @@
 
 // Inverted navbar
 //
+
+// Moin-Inverted Navbar
+@moin-navbar-inverse-color:					#205081;
+
 // Reset inverted navbar basics
 @navbar-inverse-color:                      @gray-light;
 @navbar-inverse-bg:                         #222;
--- a/MoinMoin/themes/basic/templates/layout.html	Sat Aug 17 03:27:45 2013 +0530
+++ b/MoinMoin/themes/basic/templates/layout.html	Sat Aug 17 03:55:02 2013 +0530
@@ -16,7 +16,7 @@
 
 {% block layout %}
 	<div class="container">
-        <div class="navbar navbar-inverse">
+        <div class="navbar moin-navbar-inverse">
             {% if logo %}
             <a class="navbar-brand" href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}">
                 <img class="img-circle" src="{{ '/static/logos/moinmoin-small.png' }}"/>