diff options
| -rw-r--r-- | common/navigation.j2.inc | 4 | ||||
| -rw-r--r-- | justified-nav.css | 72 |
2 files changed, 31 insertions, 45 deletions
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc index 6bb279e2..ab513e4e 100644 --- a/common/navigation.j2.inc +++ b/common/navigation.j2.inc @@ -1,4 +1,4 @@ - <div class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="navbar navbar-fixed-top navbar-taler" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar"> <span class="sr-only">Toggle navigation</span> @@ -10,7 +10,7 @@ <div class="collapse navbar-collapse" id="main-navbar"> <ul class="nav nav-justified"> <li class="m_index"><a href="{{ url_localized('index.html') }}">{{ _("Home") }}</a></li> - <li class="m_demo btn btn-outline-success"><a href="https://demo.taler.net/" target="_blank">{{ _("Demo") }}</a></li> + <li class="m_demo"><a href="https://demo.taler.net/" target="_blank">{{ _("Demo") }}</a></li> <li class="m_citizens"><a href="{{ url_localized('citizens.html') }}">{{ _("Citizens") }}</a></li> <li class="m_merchants"><a href="{{ url_localized('merchants.html') }}">{{ _("Merchants") }}</a></li> <li class="m_governments"><a href="{{ url_localized('governments.html') }}">{{ _("Governments") }}</a></li> diff --git a/justified-nav.css b/justified-nav.css index 966c3b5d..575ba978 100644 --- a/justified-nav.css +++ b/justified-nav.css @@ -6,7 +6,6 @@ body { padding-top: 40px; padding-bottom: 40px; margin-top: 40px; - border-top: 1px solid #eee; } /* Main marketing message and sign up button */ @@ -22,64 +21,34 @@ body { /* Customize the nav-justified links to be fill the entire space of the .navbar */ .nav-justified { - background-color: #eee; - border: 1px solid #ccc; - border-radius: 5px; -/* position:fixed; - z-index:99; - top:20; - right:0; - left:0;*/ + background: #fff; } .nav-justified > li > a { - padding-top: 15px; - padding-bottom: 15px; + border-radius: 20px; + padding-top: 10px; + padding-bottom: 10px; margin-bottom: 0; - font-weight: bold; - color: #777; + margin-left: 10px; + margin-top: 5px; + font-weight: normal; + color: #000; text-align: center; - background-color: #e5e5e5; /* Old browsers */ - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #f5f5f5), to(#e5e5e5)); - background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ - background-repeat: repeat-x; /* Repeat the gradient */ - border-bottom: 1px solid #d5d5d5; } + .nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > .active > a:focus { background-color: #ddd; - background-image: none; - -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); - box-shadow: inset 0 3px 7px rgba(0,0,0,.15); } -.nav-justified > li:first-child > a { - border-radius: 5px 5px 0 0; -} -.nav-justified > li:last-child > a { - border-bottom: 0; - border-radius: 0 0 5px 5px; + +.nav-justified > .m_demo > a { + font-weight: bold; } @media (min-width: 768px) { .nav-justified { max-height: 52px; } - .nav-justified > li > a { - border-right: 1px solid #d5d5d5; - border-left: 1px solid #fff; - } - .nav-justified > li:first-child > a { - border-left: 0; - border-radius: 5px 0 0 5px; - } - .nav-justified > li:last-child > a { - border-right: 0; - border-radius: 0 5px 5px 0; - } } /* Responsive: Portrait tablets and up */ @@ -92,3 +61,20 @@ body { padding-left: 0; } } + +.navbar-taler { + background-color: #fff; + border-bottom: 2px solid #eee; +} + +.navbar-taler .navbar-toggle { + border-color: #ddd; +} +.navbar-taler .navbar-toggle:hover, +.navbar-taler .navbar-toggle:focus { + background-color: #ddd; +} +.navbar-taler .navbar-toggle .icon-bar { + background-color: #888; +} + |