Turned the dev mode navbar back to red. Added a small IETF logo with transparent background for the navbar, instead of using two with dedicated colour-background.

- Legacy-Id: 9468
This commit is contained in:
Henrik Levkowetz 2015-04-12 20:27:45 +00:00
parent 9c5de53b54
commit 576e29e4e6
10 changed files with 56 additions and 50 deletions

View file

@ -226,11 +226,11 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.navbar-default { .navbar-default {
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%); background-image: -webkit-linear-gradient(top, #f79990 0%, #f36d61 100%);
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%); background-image: -o-linear-gradient(top, #f79990 0%, #f36d61 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f79990), to(#f36d61));
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); background-image: linear-gradient(to bottom, #f79990 0%, #f36d61 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff79990', endColorstr='#fff36d61', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-radius: 4px; border-radius: 4px;
@ -239,11 +239,11 @@
} }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a { .navbar-default .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); background-image: -webkit-linear-gradient(top, #ef3a2a 0%, #f04738 100%);
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); background-image: -o-linear-gradient(top, #ef3a2a 0%, #f04738 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2)); background-image: -webkit-gradient(linear, left top, left bottom, from(#ef3a2a), to(#f04738));
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%); background-image: linear-gradient(to bottom, #ef3a2a 0%, #f04738 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef3a2a', endColorstr='#fff04738', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -4399,38 +4399,38 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
} }
} }
.navbar-default { .navbar-default {
background-color: #f8f8f8; background-color: #f36d61;
border-color: #e7e7e7; border-color: #f15042;
} }
.navbar-default .navbar-brand { .navbar-default .navbar-brand {
color: #777; color: #222;
} }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { .navbar-default .navbar-brand:focus {
color: #5e5e5e; color: #080808;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-text { .navbar-default .navbar-text {
color: #777; color: #777;
} }
.navbar-default .navbar-nav > li > a { .navbar-default .navbar-nav > li > a {
color: #777; color: #222;
} }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { .navbar-default .navbar-nav > li > a:focus {
color: #333; color: #111;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { .navbar-default .navbar-nav > .active > a:focus {
color: #555; color: #111;
background-color: #e7e7e7; background-color: #f15042;
} }
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus { .navbar-default .navbar-nav > .disabled > a:focus {
color: #ccc; color: #777;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-toggle { .navbar-default .navbar-toggle {
@ -4441,58 +4441,58 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
background-color: #ddd; background-color: #ddd;
} }
.navbar-default .navbar-toggle .icon-bar { .navbar-default .navbar-toggle .icon-bar {
background-color: #888; background-color: #000;
} }
.navbar-default .navbar-collapse, .navbar-default .navbar-collapse,
.navbar-default .navbar-form { .navbar-default .navbar-form {
border-color: #e7e7e7; border-color: #f15042;
} }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { .navbar-default .navbar-nav > .open > a:focus {
color: #555; color: #111;
background-color: #e7e7e7; background-color: #f15042;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a { .navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777; color: #222;
} }
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333; color: #111;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555; color: #111;
background-color: #e7e7e7; background-color: #f15042;
} }
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc; color: #777;
background-color: transparent; background-color: transparent;
} }
} }
.navbar-default .navbar-link { .navbar-default .navbar-link {
color: #777; color: #222;
} }
.navbar-default .navbar-link:hover { .navbar-default .navbar-link:hover {
color: #333; color: #111;
} }
.navbar-default .btn-link { .navbar-default .btn-link {
color: #777; color: #222;
} }
.navbar-default .btn-link:hover, .navbar-default .btn-link:hover,
.navbar-default .btn-link:focus { .navbar-default .btn-link:focus {
color: #333; color: #111;
} }
.navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus, .navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus { fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc; color: #777;
} }
.navbar-inverse { .navbar-inverse {
background-color: #2c254a; background-color: #2c254a;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -17,17 +17,17 @@
@gray-doc-background: #fafafa; // was #f5f5f5 @gray-doc-background: #fafafa; // was #f5f5f5
// Brand palette // Brand palette
// http://www.colourlovers.com/palette/3702908/Key_West_Sunset // http://www.colourlovers.com/palette/3702908/Key_West_Sunset_2
// //
@brand-blue: #2c254a; // space blue @brand-blue: #2c254a; // space blue
@brand-purple: #59356b; // time purple @brand-purple: #59356b; // time purple
@brand-mauve: #b05683; @brand-red: #d4584d; // tweaked from sunset 2
@brand-orange: #f69f74; @brand-orange: #f69f74;
@brand-yellow: #f8e16d; @brand-yellow: #f8e16d;
// //
// Secondary colours, not part of the primary palette // Secondary colours, not part of the primary palette
@brand-green: #69fc2c; @brand-green: #69fc2c;
@brand-red: #d4584d;
@brand-primary: @brand-blue; // space blue @brand-primary: @brand-blue; // space blue
@brand-success: darken(@brand-green, 20%); // green // #3abf03 @brand-success: darken(@brand-green, 20%); // green // #3abf03
@ -394,16 +394,16 @@
@navbar-collapse-max-height: 340px; @navbar-collapse-max-height: 340px;
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: #f8f8f8; @navbar-default-bg: lighten(saturate(@brand-red, 25%), 10%);
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links // Navbar links
@navbar-default-link-color: #777; @navbar-default-link-color: #222;
@navbar-default-link-hover-color: #333; @navbar-default-link-hover-color: #111;
@navbar-default-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555; @navbar-default-link-active-color: #111;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-color: #777;
@navbar-default-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@ -413,7 +413,7 @@
// Navbar toggle // Navbar toggle
@navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888; @navbar-default-toggle-icon-bar-bg: #000;
@navbar-default-toggle-border-color: #ddd; @navbar-default-toggle-border-color: #ddd;

View file

@ -27,7 +27,7 @@
<body {% block bodyAttrs %}{%endblock%} data-group-menu-data-url="{% url "group_menu_data" %}"> <body {% block bodyAttrs %}{%endblock%} data-group-menu-data-url="{% url "group_menu_data" %}">
<!-- Removing the amp|smartypants filter as it increases the rendering time with about 50% --> <!-- Removing the amp|smartypants filter as it increases the rendering time with about 50% -->
<nav class="navbar {% if server_mode and server_mode != "production" %}navbar-inverse{% else %}navbar-inverse{% endif %} navbar-fixed-top" role="navigation"> <nav class="navbar {% if server_mode and server_mode == "production" %}navbar-inverse{% else %}navbar-default{% endif %} navbar-fixed-top" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
@ -37,9 +37,15 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img alt="IETF Logo" src="/images/ietflogo-blue3-small.png"></img> <img alt="IETF Logo" src="/images/ietflogo-small-transparent.png"></img>
{% if not user.is_authenticated %} {% if not user.is_authenticated %}
<div style="display: inline; vertical-align: top; padding-left: 1em;">Datatracker</div> <div style="display: inline; vertical-align: top; padding-left: 1em;">
{% if server_mode and server_mode == "production" %}
Datatracker
{% else %}
<b><i>Development mode</i></b>
{% endif %}
</div>
{% endif %} {% endif %}
</a> </a>
</div> </div>

View file

@ -58,7 +58,7 @@ body { padding-top: 70px; }
/* See http://eichefam.net/2012/04/12/scrollable-menus-in-bootstrap/ */ /* See http://eichefam.net/2012/04/12/scrollable-menus-in-bootstrap/ */
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
height: auto; height: auto;
max-height: 600px; max-height: 650px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB