treeherder/ui/css/treeherder-navbar.css

/*
 * Main navbar settings
 */

#global-navbar-container {
    background-color: #273038;
    margin-bottom: 0px;
    flex: none;
    -webkit-flex: none;
}

#th-global-navbar-top {
    padding-left: 0;
    border-bottom: 1px solid black;
}

.navbar {
    min-height: 36px;
    margin-bottom: 0px;
    border-radius: 0px;
}

.navbar .dropdown-menu {
    max-height: 600px;
    min-width: 112px;
    overflow: auto;
    margin-top: 10px;
    padding-bottom: 8px;
}

#th-logo {
    padding-left: 14px;
    border-left: 0;
}

.btn-right-navbar {
   font-size: 13px;
}

/*
 * Right hand upper navbar
 */

.navbar-right {
    /* Override bootstrap 3.3.5 which doesn't work with the way we align our navbar */
    margin-right: 0px;
}

.navbar-collapse {
    /* Override bootstrap for flush right navbar menus */
    padding-right: 0;
}

.nav-menu-btn {
    margin-right: -4px;
    padding-left: 14px;
    padding-right: 14px;
}

.nav-help-btn {
    margin-right: -4px;
    padding-left: 12px;
    padding-right: 8px;
}

.nav-help-icon {
    font-size: 18px;
    margin-right: 2px;
}

.nav-user-icon {
    display: inline-block;
    margin-right: 4px;
    padding: 3px 4px;
    vertical-align: text-bottom;
    border-radius: 1px;
    background: linear-gradient(#44adf3, #287cc2);
}

.nav-user-icon span:first-child {
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}

.nav-login-btn {
    padding-left: 22px;
    padding-right: 27px;
}

.nav-persona-btn {
    padding-left: 14px;
    padding-right: 14px;
}

.th-context-navbar {
    background-color: #354048;
    overflow: visible;
}

.nav-panel-help-text {
    color: #2b393f;
    margin-bottom: 10px;
}

/*
 * Left hand lower navbar
 */

.watched-repo-main-btn {
    border-right: 0;
    padding-right: 5px;
}

.watched-repo-info-btn {
    border-right: 0;
}

.watched-repo-dropdown-item {
    margin: 0px 10px;
}

.watched-repo-dropdown-item > a {
    white-space: normal;
}

.watched-repo-navbar {
    overflow: visible;
}

.tree-closed {
    color: rgb(161, 52, 53);
}

.tree-open {
    color: green;
}

.tree-approval {
    color: #fb9910;
}

.tree-unavailable {
    color: lightgray;
}

th-watched-repo {
    /* Required for Chrome */
    float: left;
}

/*
 * Right hand lower navbar
 */

.group-state-nav-icon {
    width: 7px;
    display: inline-block;
}

.btn-collapse-resultsets {
   margin-top: -1px;
   margin-bottom: -1px;
   font-size: 14px;
}

.btn-nav-filter {
    padding: 7px 2px;
}

.btn.btn-view-nav.btn-orange-filter-chicklet,
.btn.btn-view-nav.btn-orange-filter-chicklet:hover {
    color: #dd6602;
}

.btn.btn-view-nav.btn-red-filter-chicklet,
.btn.btn-view-nav.btn-red-filter-chicklet:hover {
    color: #c03a44;
}

.btn.btn-view-nav.btn-purple-filter-chicklet,
.btn.btn-view-nav.btn-purple-filter-chicklet:hover {
    color: #77438d;
}

.btn.btn-view-nav.btn-green-filter-chicklet,
.btn.btn-view-nav.btn-green:hover {
    color: rgba(2, 130, 51, 0.75);
}

.btn.btn-view-nav.btn-dkblue-filter-chicklet,
.btn.btn-view-nav.btn-dkblue-filter-chicklet:hover {
    color: #3656ff;
}

.btn.btn-view-nav.btn-pink-filter-chicklet,
.btn.btn-view-nav.btn-pink-filter-chicklet:hover {
    color: rgba(250, 115, 172, 0.82);
}

.btn.btn-view-nav.btn-ltblue-filter-chicklet,
.btn.btn-view-nav.btn-ltblue-filter-chicklet:hover {
    color: #81b8ed;
}

.btn.btn-view-nav.btn-ltgray-filter-chicklet,
.btn.btn-view-nav.btn-ltgray-filter-chicklet:hover {
    color: #e0e0e0;
}

.btn.btn-view-nav.btn-dkgray-filter-chicklet,
.btn.btn-view-nav.btn-dkgray-filter-chicklet:hover {
    color: #7c7a7d;
}

.btn.btn-view-nav.btn-black-filter-chicklet,
.btn.btn-view-nav.btn-black-filter-chicklet:hover {
    color: black;
}

/*
 * Quick Filter
 */

#quick-filter {
    height: 28px;
    width: 150px;
    display: inherit;
    transition: width 0.2s;
}

#quick-filter-parent {
    position: relative;
}

#quick-filter:focus,
#quick-filter:valid {
    width: 300px !important;
    padding-right: 20px;
}

#quick-filter:valid + #quick-filter-clear-button {
    display: inherit;
}

#quick-filter-clear-button {
    color: #bababa;
    font-size: 13px;
    cursor: pointer;
    position: absolute;
    display: none;
    top: 7px;
    right: 5px;
    height: 16px;
}

/*
 * Unclassified failures button
 */

.btn-unclassified-failures {
  margin-top: 1px;
  padding: 3px 10px;
  background-color: rgba(78, 93, 21, 0.56);
  border-color: #9fa01d;
  color: lightgray;
}
.btn-unclassified-failures:hover,
.btn-unclassified-failures:focus,
.btn-unclassified-failures:active,
.btn-unclassified-failures.active {
  background-color: #25292b;
  border-color: #cdce1d;
  color: white;
}
.btn-unclassified-failures.disabled:hover,
.btn-unclassified-failures.disabled:focus,
.btn-unclassified-failures.disabled:active,
.btn-unclassified-failures.disabled.active,
.btn-unclassified-failures[disabled]:hover,
.btn-unclassified-failures[disabled]:focus,
.btn-unclassified-failures[disabled]:active,
.btn-unclassified-failures[disabled].active,
fieldset[disabled] .btn-unclassified-failures:hover,
fieldset[disabled] .btn-unclassified-failures:focus,
fieldset[disabled] .btn-unclassified-failures:active,
fieldset[disabled] .btn-unclassified-failures.active {
  color: #e0e0e0;
  border-color: #e0e0e0;
}

/*
 * Navbar button customization
 */

.btn-view-nav {
  background-color: transparent;
  border-color: #373d40;
  color: lightgray;
  border-radius: 0;
  border-bottom: 0;
  border-top: 0;
  border-right: 0;
}

.btn-view-nav:hover,
.btn-view-nav:focus,
.btn-view-nav:active,
.btn-view-nav.active {
  background-color: #2c3133;
  border-color: #1a1d20;
  color: white;
}
.btn-view-nav.disabled:hover,
.btn-view-nav.disabled:focus,
.btn-view-nav.disabled:active,
.btn-view-nav.disabled.active,
.btn-view-nav[disabled]:hover,
.btn-view-nav[disabled]:focus,
.btn-view-nav[disabled]:active,
.btn-view-nav[disabled].active,
fieldset[disabled] .btn-view-nav:hover,
fieldset[disabled] .btn-view-nav:focus,
fieldset[disabled] .btn-view-nav:active,
fieldset[disabled] .btn-view-nav.active {
  color: #e0e0e0;
  border-color: #e0e0e0;
}

.btn-view-nav-closed {
  background-color: rgba(107, 4, 4, 0.53);
  border-color: #22282d;
  color: lightgray;
  border-radius: 0;
  border-bottom: 0;
  border-top: 0;
  border-left: 0;
}
.btn-view-nav-closed:hover,
.btn-view-nav-closed:focus,
.btn-view-nav-closed:active,
.btn-view-nav-closed.active {
  background-color: rgba(107, 4, 4, 0.53);
  border-color: #1a1d20;
  color: white;
}
.btn-view-nav-closed.disabled:hover,
.btn-view-nav-closed.disabled:focus,
.btn-view-nav-closed.disabled:active,
.btn-view-nav-closed.disabled.active,
.btn-view-nav-closed[disabled]:hover,
.btn-view-nav-closed[disabled]:focus,
.btn-view-nav-closed[disabled]:active,
.btn-view-nav-closed[disabled].active,
fieldset[disabled] .btn-view-nav-closed:hover,
fieldset[disabled] .btn-view-nav-closed:focus,
fieldset[disabled] .btn-view-nav-closed:active,
fieldset[disabled] .btn-view-nav-closed.active {
  color: #e0e0e0;
  border-color: #e0e0e0;
}