cyborg: refined navbars, subnav, pager

[bootswatch] / cyborg / bootstrap.css

diff --git a/cyborg/bootstrap.css b/cyborg/bootstrap.css
index 3e5b901..38aacbe 100644 (file)
--- a/cyborg/bootstrap.css
+++ b/cyborg/bootstrap.css
@@ -654,7 +654,7 @@ dd {
 hr {
   margin: 20px 0;
   border: 0;
-  border-top: 1px solid #999999;
+  border-top: 1px solid #222222;
   border-bottom: 1px solid #ffffff;
 }
 abbr[title],
@@ -719,7 +719,7 @@ pre {
   padding: 0 3px 2px;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: 12px;
-  color: #282828;
+  color: #222222;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -775,7 +775,7 @@ legend {
   margin-bottom: 20px;
   font-size: 21px;
   line-height: 40px;
-  color: #282828;
+  color: #222222;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -1691,7 +1691,7 @@ table {
 }
 .table-hover tbody tr:hover td,
 .table-hover tbody tr:hover th {
-  background-color: #282828;
+  background-color: #222222;
 }
 table td[class*="span"],
 table th[class*="span"],
@@ -2284,7 +2284,7 @@ table th[class*="span"],
   padding: 5px 0;
   margin: 2px 0 0;
   list-style: none;
-  background-color: #ffffff;
+  background-color: #131517;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   *border-right-width: 2px;
@@ -2414,7 +2414,7 @@ table th[class*="span"],
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
+  border-left-color: #000000;
   margin-top: 5px;
   margin-right: -10px;
 }
@@ -2530,7 +2530,7 @@ button.close {
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  color: #282828;
+  color: #222222;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   background-color: #616161;
   background-image: -moz-linear-gradient(top, #666666, #595959);
@@ -2562,7 +2562,7 @@ button.close {
 .btn.active,
 .btn.disabled,
 .btn[disabled] {
-  color: #282828;
+  color: #222222;
   background-color: #595959;
   *background-color: #4d4d4d;
 }
@@ -2574,7 +2574,7 @@ button.close {
   *margin-left: 0;
 }
 .btn:hover {
-  color: #282828;
+  color: #222222;
   text-decoration: none;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
@@ -2904,7 +2904,7 @@ input[type="submit"].btn.btn-mini {
   background-color: transparent;
 }
 .btn-link[disabled]:hover {
-  color: #282828;
+  color: #222222;
   text-decoration: none;
 }
 .btn-group {
@@ -3500,7 +3500,7 @@ input[type="submit"].btn.btn-mini {
   *z-index: 2;
 }
 .navbar-inner {
-  min-height: 40px;
+  min-height: 50px;
   padding-left: 20px;
   padding-right: 20px;
   background-color: #020202;
@@ -3539,7 +3539,7 @@ input[type="submit"].btn.btn-mini {
 .navbar .brand {
   float: left;
   display: block;
-  padding: 10px 20px 10px;
+  padding: 15px 20px 15px;
   margin-left: -20px;
   font-size: 20px;
   font-weight: 200;
@@ -3551,7 +3551,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar-text {
   margin-bottom: 0;
-  line-height: 40px;
+  line-height: 50px;
 }
 .navbar-link {
   color: #adafae;
@@ -3560,14 +3560,14 @@ input[type="submit"].btn.btn-mini {
   color: #ffffff;
 }
 .navbar .divider-vertical {
-  height: 40px;
+  height: 50px;
   margin: 0 9px;
   border-left: 1px solid #020202;
   border-right: 1px solid #020202;
 }
 .navbar .btn,
 .navbar .btn-group {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 .navbar .btn-group .btn,
 .navbar .input-prepend .btn,
@@ -3591,7 +3591,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-form select,
 .navbar-form .radio,
 .navbar-form .checkbox {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 .navbar-form input,
 .navbar-form select,
@@ -3616,7 +3616,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 5px;
+  margin-top: 10px;
   margin-bottom: 0;
 }
 .navbar-search .search-query {
@@ -3700,7 +3700,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 15px 10px;
+  padding: 15px 15px 15px;
   color: #adafae;
   text-decoration: none;
   text-shadow: 0 1px 0 #020202;
@@ -3794,7 +3794,7 @@ input[type="submit"].btn.btn-mini {
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
+  border-bottom: 6px solid #131517;
   position: absolute;
   top: -6px;
   left: 10px;
@@ -3807,7 +3807,7 @@ input[type="submit"].btn.btn-mini {
   top: auto;
 }
 .navbar-fixed-bottom .nav > li > .dropdown-menu:after {
-  border-top: 6px solid #ffffff;
+  border-top: 6px solid #131517;
   border-bottom: 0;
   bottom: -6px;
   top: auto;
@@ -3854,7 +3854,7 @@ input[type="submit"].btn.btn-mini {
   border-radius: 6px 0 6px 6px;
 }
 .navbar-inverse {
-  color: #eeeeee;
+  color: #adafae;
 }
 .navbar-inverse .navbar-inner {
   background-color: #252a30;
@@ -3869,7 +3869,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar-inverse .brand,
 .navbar-inverse .nav > li > a {
-  color: #eeeeee;
+  color: #adafae;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 .navbar-inverse .brand:hover,
@@ -3878,17 +3878,17 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar-inverse .nav > li > a:focus,
 .navbar-inverse .nav > li > a:hover {
-  background-color: #000000;
+  background-color: #242a31;
   color: #ffffff;
 }
 .navbar-inverse .nav .active > a,
 .navbar-inverse .nav .active > a:hover,
 .navbar-inverse .nav .active > a:focus {
   color: #ffffff;
-  background-color: #000000;
+  background-color: #242a31;
 }
 .navbar-inverse .navbar-link {
-  color: #eeeeee;
+  color: #adafae;
 }
 .navbar-inverse .navbar-link:hover {
   color: #ffffff;
@@ -3900,12 +3900,12 @@ input[type="submit"].btn.btn-mini {
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
 .navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
 .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
-  background-color: #000000;
+  background-color: #242a31;
   color: #ffffff;
 }
 .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
-  border-top-color: #eeeeee;
-  border-bottom-color: #eeeeee;
+  border-top-color: #adafae;
+  border-bottom-color: #adafae;
 }
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
 .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
@@ -3937,7 +3937,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-inverse .navbar-search .search-query:focus,
 .navbar-inverse .navbar-search .search-query.focused {
   padding: 5px 15px;
-  color: #282828;
+  color: #222222;
   text-shadow: 0 1px 0 #ffffff;
   background-color: #ffffff;
   border: 0;
@@ -4029,7 +4029,7 @@ input[type="submit"].btn.btn-mini {
   line-height: 20px;
   text-decoration: none;
   background-color: #060606;
-  border: 1px solid #dddddd;
+  border: 1px solid transparent;
   border-left-width: 0;
 }
 .pagination ul > li > a:hover,
@@ -4311,7 +4311,7 @@ input[type="submit"].btn.btn-mini {
   color: #ffffff;
   text-align: center;
   text-decoration: none;
-  background-color: #000000;
+  background-color: #131517;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -4328,28 +4328,28 @@ input[type="submit"].btn.btn-mini {
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
-  border-top-color: #000000;
+  border-top-color: #131517;
 }
 .tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000000;
+  border-right-color: #131517;
 }
 .tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000000;
+  border-left-color: #131517;
 }
 .tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: #000000;
+  border-bottom-color: #131517;
 }
 .popover {
   position: absolute;
@@ -4359,7 +4359,7 @@ input[type="submit"].btn.btn-mini {
   display: none;
   width: 236px;
   padding: 1px;
-  background-color: #ffffff;
+  background-color: #131517;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -4390,8 +4390,8 @@ input[type="submit"].btn.btn-mini {
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
+  background-color: #131517;
+  border-bottom: 1px solid #070809;
   -webkit-border-radius: 5px 5px 0 0;
   -moz-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
@@ -4422,7 +4422,7 @@ input[type="submit"].btn.btn-mini {
   left: 50%;
   margin-left: -10px;
   border-width: 10px 10px 0;
-  border-top-color: #ffffff;
+  border-top-color: #131517;
 }
 .popover.top .arrow:after {
   border-width: 11px 11px 0;
@@ -4435,7 +4435,7 @@ input[type="submit"].btn.btn-mini {
   left: -10px;
   margin-top: -10px;
   border-width: 10px 10px 10px 0;
-  border-right-color: #ffffff;
+  border-right-color: #131517;
 }
 .popover.right .arrow:after {
   border-width: 11px 11px 11px 0;
@@ -4448,7 +4448,7 @@ input[type="submit"].btn.btn-mini {
   left: 50%;
   margin-left: -10px;
   border-width: 0 10px 10px;
-  border-bottom-color: #ffffff;
+  border-bottom-color: #131517;
 }
 .popover.bottom .arrow:after {
   border-width: 0 11px 11px;
@@ -4461,7 +4461,7 @@ input[type="submit"].btn.btn-mini {
   right: -10px;
   margin-top: -10px;
   border-width: 10px 0 10px 10px;
-  border-left-color: #ffffff;
+  border-left-color: #131517;
 }
 .popover.left .arrow:after {
   border-width: 11px 0 11px 11px;
@@ -4617,11 +4617,11 @@ a.badge:hover {
 }
 .label-inverse,
 .badge-inverse {
-  background-color: #282828;
+  background-color: #222222;
 }
 .label-inverse[href],
 .badge-inverse[href] {
-  background-color: #0e0e0e;
+  background-color: #080808;
 }
 .btn .label,
 .btn .badge {
@@ -4934,7 +4934,7 @@ a.badge:hover {
   right: 0;
   bottom: 0;
   padding: 15px;
-  background: #282828;
+  background: #222222;
   background: rgba(0, 0, 0, 0.75);
 }
 .carousel-caption h4,
@@ -5003,10 +5003,10 @@ pre {
   background-color: #eeeeee;
 }
 blockquote {
-  border-left: 5px solid #33b5e5;
+  border-left: 5px solid #222222;
 }
 blockquote.pull-right {
-  border-right: 5px solid #33b5e5;
+  border-right: 5px solid #222222;
 }
 html {
   min-height: 100%;
@@ -5023,10 +5023,10 @@ body {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff060606', endColorstr='#ff252a30', GradientType=0);
 }
 .page-header {
-  border-bottom: 2px solid #33b5e5;
+  border-bottom: 1px solid #222222;
 }
-.navbar {
-  font-size: 16px;
+hr {
+  border-bottom: none;
 }
 .navbar .navbar-inner {
   -webkit-border-radius: 0;
@@ -5035,58 +5035,50 @@ body {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  border-bottom: 2px solid #33b5e5;
+  border-bottom: 1px solid #222222;
 }
 .navbar .brand {
-  padding: 12px 20px 11px;
+  padding: 15px 20px 15px;
   color: #eeeeee;
   font-weight: normal;
   text-shadow: none;
 }
-.navbar li {
-  line-height: 19px;
-}
 .navbar .nav > li > a {
-  padding: 13px 10px 8px;
-  border-bottom: 3px solid transparent;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
-}
-.navbar .nav > li > a:hover {
-  border-bottom: 3px solid #33b5e5;
+  padding: 15px 15px 14px;
+  border-bottom: 1px solid transparent;
 }
-.navbar .nav > .active > a {
-  border-bottom: 3px solid #33b5e5;
+.navbar .nav > li > a:hover,
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover {
+  border-bottom: 1px solid #33b5e5;
 }
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover,
-.navbar .nav .active > a:focus {
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.navbar .nav > li > .dropdown-menu::before,
-.navbar .nav > li > .dropdown-menu::after {
-  display: none;
-}
-.navbar .dropdown-menu li > a:hover,
-.navbar .dropdown-menu li > a:focus,
-.navbar .dropdown-submenu:hover > a {
-  background-image: none;
-}
 .navbar .navbar-text {
-  margin-left: 15px;
-  margin-right: 15px;
-  line-height: 43px;
+  margin-bottom: 1px;
+  padding: 15px 15px 14px;
+  line-height: inherit;
+}
+.navbar .divider-vertical {
+  margin: 0;
+  border-left: 1px solid #222222;
+  border-right-width: 0;
 }
 .navbar .search-query,
 .navbar .search-query:focus,
 .navbar .search-query.focused {
-  color: #adafae;
-  text-shadow: none;
-  background-color: #222;
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
+  background-color: #222222;
+  line-height: normal;
+  color: #adafae;
+  text-shadow: none;
 }
 .navbar .search-query:-moz-placeholder,
 .navbar .search-query:focus:-moz-placeholder,
@@ -5103,20 +5095,6 @@ body {
 .navbar .search-query.focused::-webkit-input-placeholder {
   color: #999999;
 }
-.navbar-inverse .navbar-inner {
-  border: none;
-  border-bottom: 3px solid #000000;
-}
-.navbar-inverse .brand:hover {
-  border-bottom: none;
-  background-color: #000000;
-}
-.navbar-inverse .nav li > a:hover {
-  border-bottom-color: transparent;
-}
-.navbar-inverse .nav .active > a {
-  border-bottom-color: transparent;
-}
 @media (max-width: 979px) {
   .navbar .nav-collapse .nav li > a {
     border: none;
@@ -5156,64 +5134,48 @@ body {
   }
 }
 div.subnav {
-  position: static;
   background-color: #020202;
   background-image: none;
-  border: 0;
+  border: none;
+  border-bottom: 1px solid #222222;
 }
 div.subnav.subnav-fixed {
-  position: relative;
-  left: -1px;
-  top: auto;
+  top: 50px;
 }
 div.subnav .nav > li > a,
-div.subnav .nav .active a {
+div.subnav .nav > li:first-child > a,
+div.subnav .nav > li:first-child > a:hover {
+  padding: 11px 12px;
+  border: none;
   background-color: #020202;
-  border-left: 1px solid #222;
-  border-right: 0;
-  color: #eeeeee;
-}
-div.subnav .nav li.nav-header {
-  text-shadow: none;
+  color: #adafae;
 }
 div.subnav .nav > li > a:hover,
+div.subnav .nav > li.active > a,
 div.subnav .nav > li.active > a:hover,
 div.subnav .nav > li:first-child > a:hover {
+  padding: 11px 12px;
   background: transparent;
-  border-bottom: 2px solid #33b5e5;
-  border-left: 1px solid #222;
+  border: none;
+  border-bottom: 1px solid #33b5e5;
   color: #ffffff;
 }
-div.subnav .nav .open .dropdown-toggle {
-  border: 0;
-  border-left: 1px solid #222;
-  border-bottom: 2px solid #33b5e5;
-  background-color: #060606;
-}
-div.subnav .nav .open .dropdown-menu {
-  background-color: #020202;
-  border-left: solid 1px rgba(255, 255, 255, 0.1);
-}
-div.subnav .nav .open .dropdown-menu li > a:hover {
-  border-bottom: 0;
-  background: #33b5e5;
+div.subnav .nav li.nav-header {
+  text-shadow: none;
 }
 .nav-tabs {
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #222222;
 }
 .nav-tabs li > a:hover,
 .nav-tabs li.active > a,
 .nav-tabs li.active > a:hover {
-  border: 1px solid #222;
+  border-color: transparent;
   background-color: #33b5e5;
   color: #ffffff;
 }
 .nav-tabs .open .dropdown-toggle {
-  background-color: #060606 !important;
-  border: 1px solid #222;
-}
-.nav-tabs .dropdown-menu li > a:hover {
-  border: none;
+  background-color: #060606;
+  border-color: transparent;
 }
 .nav-pills li > a:hover {
   background-color: #33b5e5;
@@ -5237,10 +5199,10 @@ div.subnav .nav .open .dropdown-menu li > a:hover {
 }
 .nav-list .divider {
   background-color: transparent;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #222222;
 }
 .nav-stacked li > a {
-  border: 1px solid #222 !important;
+  border: 1px solid #222222 !important;
 }
 .nav-stacked li > a:hover,
 .nav-stacked li.active > a {
@@ -5249,7 +5211,7 @@ div.subnav .nav .open .dropdown-menu li > a:hover {
 }
 .tabbable .nav-tabs,
 .tabbable .nav-tabs li.active > a {
-  border-color: #222;
+  border-color: #222222;
 }
 .breadcrumb {
   background-color: transparent;
@@ -5272,31 +5234,19 @@ div.subnav .nav .open .dropdown-menu li > a:hover {
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.pagination ul > li > a,
-.pagination ul > li > span {
-  border: 0;
-  font-size: 14px;
-}
-.pagination ul > li > a:hover {
-  background-color: #33b5e5;
-  color: #ffffff;
-}
-.pagination ul > .active > a,
-.pagination ul > .active > span {
-  background-color: #33b5e5;
-  color: #ffffff;
-}
 .pagination ul > .disabled > a,
 .pagination ul > .disabled > a:hover,
 .pagination ul > .disabled > span,
 .pagination ul > .disabled > span:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
-.pager a {
+.pager li > a,
+.pager li > span {
   background-color: #060606;
   border: none;
 }
-.pager a:hover {
+.pager li > a:hover,
+.pager li > span:hover {
   background-color: #33b5e5;
 }
 .pager .disabled a,
@@ -5557,7 +5507,7 @@ input,
 textarea,
 select,
 .uneditable-input {
-  color: #282828;
+  color: #222222;
 }
 input[disabled],
 select[disabled],
@@ -5611,14 +5561,10 @@ select:focus {
   color: #ffffff;
 }
 .dropdown-menu {
-  background-color: #191A1A;
   -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
-.dropdown-menu li > a:hover {
-  background-color: #33b5e5;
-}
 .alert,
 .alert .alert-heading,
 .alert-success,
@@ -5679,13 +5625,13 @@ select:focus {
 }
 .well,
 .hero-unit {
-  border-top: solid 1px #353535;
+  border-top: solid 1px #2f2f2f;
   -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
 .thumbnail {
-  border-color: #222;
+  border-color: #222222;
 }
 .progress {
   background-color: #060606;
@@ -5698,15 +5644,15 @@ select:focus {
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
-  border-top: solid 1px #353535;
-  background-color: #282828;
+  border-top: solid 1px #2f2f2f;
+  background-color: #222222;
 }
 .modal-header {
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #222222;
 }
 .modal-footer {
-  background-color: #282828;
-  border-top: 1px solid #222;
+  background-color: #222222;
+  border-top: 1px solid #222222;
   -webkit-border-radius: 0 0 6px 6px;
   -moz-border-radius: 0 0 6px 6px;
   border-radius: 0 0 6px 6px;
@@ -5715,13 +5661,13 @@ select:focus {
   box-shadow: none;
 }
 .footer {
-  border-top: 1px solid #222;
+  border-top: 1px solid #222222;
 }
 @media (max-width: 768px) {
   div.subnav .nav > li + li > a,
   div.subnav .nav > li:first-child > a {
-    border-top: 1px solid #222;
-    border-left: 1px solid #222;
+    border-top: 1px solid #222222;
+    border-left: 1px solid #222222;
   }
   .subnav .nav > li + li > a:hover,
   .subnav .nav > li:first-child > a:hover {