Move color overrides to variables.less where possible

3 years ago · 93a881d0ba
--- a/static/css/base.css
+++ b/static/css/base.css
@ -4,7 +4,6 @@ html {
 }

 body {
    background: var(--body-bg);
    color:  var(--text-color);
    /* Margin bottom by footer height */
    margin-bottom: 84px;
@ -52,37 +51,18 @@ body {
        border-bottom: 5px solid var(--border-muted);
        padding-bottom: 25px;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover {
        color: var(--text-color);
    }
 }

@media (max-width: 767px) {
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--text-color);
    }

    .navbar-default .navbar-nav > li > a:hover {
        color: var(--btn-active-color);
        border-left: 5px solid var(--border-color);
        padding-left: 10px;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--btn-active-color);
        border-left: 5px solid var(--border-color);
        padding-left: 20px;
    }


    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: var(--text-muted);
    }
 }

 .navbar-default {
@ -91,7 +71,6 @@ body {
 }

 .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
    color: var(--text-color);
    font-weight: bold;
 }

@ -99,14 +78,6 @@ body {
    box-shadow: none;
 }

 .navbar-default .navbar-toggle {
    border-color: var(--border-color);
 }

 .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--text-muted);
 }

 #nav-sign-up {
    padding: 21px 0 21px 15px;
 }
@ -136,9 +107,14 @@ body {
 }

 #broken-channels > a {
    color: #a94442;
    color: hsl(1.2, 43.8%, 46.1%);
 }

 #broken-channels > a:hover {
    color: hsl(1.2, 53.8%, 56.1%);
 }


 .page-checks .container-fluid, .page-details .container-fluid {
    /* Fluid below 1320px, but max width capped to 1320px ... */
    max-width: 1320px;
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@ -1,23 +1,7 @@
 a {
    color:  var(--link-color);
 }

 .panel {
    background-color: var(--panel-bg);
 }

 .panel-default, .list-group-item {
    border-color: var(--border-color);
 }

 .jumbotron {
    background-color:  var(--jumbotron-bg);
 }

 .table > tbody > tr > th, .table > tbody > tr > td {
    border-top-color: var(--border-color);
 }

 .btn-default {
    color: var(--btn-default-color);
    background-color: var(--btn-default-bg);
@ -35,105 +19,10 @@ a {
    border-color: var(--btn-active-border);
 }

 .nav > li > a:hover {
    background-color:  var(--nav-pills-active-link-hover-bg);
 }

 .nav-tabs > li > a:hover {
    color: var(--text-color);
    border-color: transparent;
 }

 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
    color: var(--text-color);
    background-color: transparent;
    border-color: var(--border-color);
    border-bottom-color: var(--body-bg);
 }

 .nav-pills > li.active > a,
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
    color: var(--text-color);
    background-color:  var(--nav-pills-active-link-hover-bg);
 }

 pre {
    color: var(--text-color);
    background-color:  var(--pre-bg);
 }

 .modal-content {
    background-color: var(--modal-content-bg);
 }

 .modal-footer {
    border-top-color: var(--border-color);
 }

 hr {
    border-top-color: var(--border-color);
 }

 .close, .close:hover, .close:focus {
    color: var(--close-color);
 }

 .nav-tabs {
    border-bottom-color: var(--border-color);
 }

 .form-control {
    border-color:  var(--input-border);
    color:  var(--input-color);
 }

 .form-control[disabled] {
    background-color:  var(--input-bg-disabled);
 }

 .navbar-default .navbar-nav > li > a {
    color:  var(--text-muted);
 }

 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
    color:  var(--text-color);
 }

 .navbar-default .navbar-collapse {
    border-color: var(--border-color);
 }

 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
    background-color: var(--border-color);
 }

 .breadcrumb {
    background-color:  var(--breadcrumb-bg);
 }

 .breadcrumb > .active {
    color: var(--breadcrumb-active-color);
 }

 .modal-header {
    border-bottom-color:  var(--border-muted);
 }

 code {
    color:  var(--text-color);
 }

 .alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-color);
    background-color: var(--state-info-bg);
    border-color: var(--state-info-border);
    color: var(--state-info-color);
 }

 .panel-info {
@ -150,43 +39,6 @@ code {
    border-color: var(--alert-success-border);
 }

 .input-group-addon {
    background-color: var(--input-group-addon-bg);
    border-color: var(--input-border);
    color:  var(--input-color);
 }

 .text-muted {
    color: var(--text-muted);
 }


 h1 small,
 h2 small {
    color: var(--text-muted);
 }

 .help-block {
    color: var(--text-muted);
 }

 .dropdown-menu {
    background-color: var(--panel-bg);
 }

 .dropdown-menu .divider {
    background-color: var(--border-muted);
 }

 .dropdown-header {
    color: var(--text-muted);
 }

 .dropdown-menu li a {
    color: var(--text-color);
 }

 .dropdown-menu li a:hover {
    color: var(--text-color);
    background-color: var(--dropdown-link-hover-bg);
 }
--- a/static/css/bootstrap.css
+++ b/static/css/bootstrap.css
@ -272,7 +272,7 @@ body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #fff;
  background-color: var(--body-bg);
 }
 input,
 button,
@ -283,12 +283,12 @@ textarea {
  line-height: inherit;
 }
 a {
  color: #0091EA;
  color: var(--link-color);
  text-decoration: none;
 }
 a:hover,
 a:focus {
  color: #00629e;
  color: var(--link-hover-color);
  text-decoration: underline;
 }
 a:focus {
@ -313,7 +313,7 @@ img {
 .img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  background-color: var(--body-bg);
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-transition: all 0.2s ease-in-out;
@ -330,7 +330,7 @@ hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-top: 1px solid var(--border-color);
 }
 .sr-only {
  position: absolute;
@ -397,7 +397,7 @@ h6 .small,
 .h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
  color: var(--text-muted);
 }
 h1,
 .h1,
@ -517,7 +517,7 @@ mark,
  text-transform: capitalize;
 }
 .text-muted {
  color: #777777;
  color: var(--text-muted);
 }
 .text-primary {
  color: #22bc66;
@ -719,7 +719,7 @@ samp {
 code {
  padding: 2px 4px;
  font-size: 90%;
  color: #222;
  color: var(--text-color);
  background-color: transparent;
  border-radius: 2px;
 }
@ -745,8 +745,8 @@ pre {
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  color: var(--text-color);
  background-color: var(--pre-bg);
  border: 1px solid #ccc;
  border-radius: 2px;
 }
@ -1526,7 +1526,7 @@ table {
 caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  color: var(--text-muted);
  text-align: left;
 }
 th {
@ -1546,11 +1546,11 @@ th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
  border-top: 1px solid var(--border-color);
 }
 .table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
  border-bottom: 2px solid var(--border-color);
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@ -1561,10 +1561,10 @@ th {
  border-top: 0;
 }
 .table > tbody + tbody {
  border-top: 2px solid #ddd;
  border-top: 2px solid var(--border-color);
 }
 .table .table {
  background-color: #fff;
  background-color: var(--body-bg);
 }
 .table-condensed > thead > tr > th,
 .table-condensed > tbody > tr > th,
@ -1575,7 +1575,7 @@ th {
  padding: 5px;
 }
 .table-bordered {
  border: 1px solid #ddd;
  border: 1px solid var(--border-color);
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
@ -1583,7 +1583,7 @@ th {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
  border: 1px solid var(--border-color);
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
@ -1721,7 +1721,7 @@ table th[class*="col-"] {
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    border: 1px solid var(--border-color);
  }
  .table-responsive > .table {
    margin-bottom: 0;
@ -1817,7 +1817,7 @@ output {
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  color: var(--input-color);
 }
 .form-control {
  display: block;
@ -1826,10 +1826,10 @@ output {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  color: var(--input-color);
  background-color: transparent;
  background-image: none;
  border: 1px solid #ccc;
  border: 1px solid var(--input-border);
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -1841,14 +1841,14 @@ output {
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
 }
 .form-control::-moz-placeholder {
  color: #999;
  color: var(--text-muted);
  opacity: 1;
 }
 .form-control:-ms-input-placeholder {
  color: #999;
  color: var(--text-muted);
 }
 .form-control::-webkit-input-placeholder {
  color: #999;
  color: var(--text-muted);
 }
 .form-control::-ms-expand {
  border: 0;
@ -1857,7 +1857,7 @@ output {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
  background-color: #eeeeee;
  background-color: var(--input-bg-disabled);
  opacity: 1;
 }
 .form-control[disabled],
@ -2669,7 +2669,7 @@ fieldset[disabled] .btn-danger.focus {
  background-color: #fff;
 }
 .btn-link {
  color: #0091EA;
  color: var(--link-color);
  font-weight: normal;
  border-radius: 0;
 }
@ -2690,7 +2690,7 @@ fieldset[disabled] .btn-link {
 }
 .btn-link:hover,
 .btn-link:focus {
  color: #00629e;
  color: var(--link-hover-color);
  text-decoration: underline;
  background-color: transparent;
 }
@ -2797,7 +2797,7 @@ tbody.collapse.in {
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  background-color: var(--dropdown-bg);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
@ -2813,7 +2813,7 @@ tbody.collapse.in {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  background-color: var(--border-muted);
 }
 .dropdown-menu > li > a {
  display: block;
@ -2821,14 +2821,14 @@ tbody.collapse.in {
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  color: var(--text-color);
  white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  color: var(--text-color);
  background-color: var(--dropdown-link-hover-bg);
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
@ -2870,7 +2870,7 @@ tbody.collapse.in {
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777777;
  color: var(--text-muted);
  white-space: nowrap;
 }
 .dropdown-backdrop {
@ -3166,10 +3166,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  color: var(--input-color);
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  background-color: var(--input-group-addon-bg);
  border: 1px solid var(--input-border);
  border-radius: 2px;
 }
 .input-group-addon.input-sm {
@ -3254,7 +3254,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
  background-color: var(--nav-link-hover-bg);
 }
 .nav > li.disabled > a {
  color: #777777;
@ -3269,8 +3269,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #0091EA;
  background-color: var(--nav-link-hover-bg);
  border-color: var(--link-color);
 }
 .nav .nav-divider {
  height: 1px;
@ -3301,7 +3301,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #fff;
  background-color: var(--body-bg);
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
@ -3347,7 +3347,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
    border-bottom-color: var(--body-bg);
  }
 }
 .nav-pills > li {
@ -3362,8 +3362,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-pills > li.active > a,
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
  color: #555;
  background-color: #EEE;
  color: var(--text-color);
  background-color: var(--nav-link-hover-bg);
 }
 .nav-stacked > li {
  float: none;
@ -3415,7 +3415,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
    border-bottom-color: var(--body-bg);
  }
 }
 .tab-content > .tab-pane {
@ -3757,31 +3757,31 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-default {
  background-color: transparent;
  border-color: #eeeeee;
  border-color: var(--border-color);
 }
 .navbar-default .navbar-brand {
  color: #777;
  color: var(--text-color);
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  color: var(--text-color);
  background-color: transparent;
 }
 .navbar-default .navbar-text {
  color: #777;
 }
 .navbar-default .navbar-nav > li > a {
  color: #777;
  color: var(--text-muted);
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
  color: #333;
  color: var(--text-color);
  background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  color: var(--text-color);
  background-color: transparent;
 }
 .navbar-default .navbar-nav > .disabled > a,
@ -3791,38 +3791,38 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  background-color: transparent;
 }
 .navbar-default .navbar-toggle {
  border-color: #ddd;
  border-color: var(--border-color);
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
  background-color: #ddd;
  background-color: var(--border-color);
 }
 .navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
  background-color: var(--text-muted);
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
  border-color: #eeeeee;
  border-color: var(--border-color);
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
  background-color: transparent;
  color: #555;
  color: var(--text-color);
 }
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
    color: var(--text-muted);
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    color: var(--text-color);
    background-color: transparent;
  }
  .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:focus {
    color: #555;
    color: var(--text-color);
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
@ -3833,17 +3833,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  }
 }
 .navbar-default .navbar-link {
  color: #777;
  color: var(--text-muted);
 }
 .navbar-default .navbar-link:hover {
  color: #333;
  color: var(--text-color);
 }
 .navbar-default .btn-link {
  color: #777;
  color: var(--text-muted);
 }
 .navbar-default .btn-link:hover,
 .navbar-default .btn-link:focus {
  color: #333;
  color: var(--text-color);
 }
 .navbar-default .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-default .btn-link:hover,
@ -3957,7 +3957,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  background-color: var(--breadcrumb-bg);
  border-radius: 2px;
 }
 .breadcrumb > li {
@ -3969,7 +3969,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #ccc;
 }
 .breadcrumb > .active {
  color: #777777;
  color: var(--breadcrumb-active-color);
 }
 .label {
  display: inline;
@ -4072,7 +4072,7 @@ a.badge:focus {
 }
 .list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
  color: #0091EA;
  color: var(--link-color);
  background-color: #fff;
 }
 .list-group-item > .badge {
@ -4212,7 +4212,7 @@ a.badge:focus {
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: transparent;
  border: 1px solid #ddd;
  border: 1px solid var(--border-color);
 }
 .list-group-item:first-child {
  border-top-right-radius: 2px;
@ -4410,7 +4410,7 @@ button.list-group-item-danger.active:focus {
 }
 .panel {
  margin-bottom: 20px;
  background-color: transparent;
  background-color: var(--panel-bg);
  border: 1px solid transparent;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@ -4558,7 +4558,7 @@ button.list-group-item-danger.active:focus {
 .panel > .panel-body + .table-responsive,
 .panel > .table + .panel-body,
 .panel > .table-responsive + .panel-body {
  border-top: 1px solid #ddd;
  border-top: 1px solid var(--border-color);
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
@ -4644,22 +4644,22 @@ button.list-group-item-danger.active:focus {
  border-bottom: 1px solid #ddd;
 }
 .panel-default {
  border-color: #ddd;
  border-color: var(--border-color);
 }
 .panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #ddd;
  border-color: var(--border-color);
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
  border-top-color: var(--border-color);
 }
 .panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333333;
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
  border-bottom-color: var(--border-color);
 }
 .panel-primary {
  border-color: #22bc66;
@ -4756,14 +4756,14 @@ button.list-group-item-danger.active:focus {
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  color: var(--close-color);
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
 }
 .close:hover,
 .close:focus {
  color: #000;
  color: var(--close-color);
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
@ -4818,7 +4818,7 @@ button.close {
 }
 .modal-content {
  position: relative;
  background-color: #fff;
  background-color: var(--modal-content-bg);
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
@ -4846,7 +4846,7 @@ button.close {
 }
 .modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  border-bottom: 1px solid var(--border-muted);
 }
 .modal-header .close {
  margin-top: -2px;
@ -4862,7 +4862,7 @@ button.close {
 .modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
  border-top: 1px solid var(--border-muted);
 }
 .modal-footer .btn + .btn {
  margin-left: 5px;
--- a/static/css/details.css
+++ b/static/css/details.css
@ -27,7 +27,6 @@
    display: block;
    padding: 8px;
    margin-bottom: 8px;
    color:  var(--text-color);
    background: var(--pre-bg);
 }

--- a/static/css/docs.css
+++ b/static/css/docs.css
@ -29,9 +29,6 @@ h2.rule {
 }

 .page-docs code {
    padding: 2px 4px;
    font-size: 90%;
    color: var(--text-color);
    background: var(--pre-bg);
    border-radius: 4px;
 }
--- a/static/css/selectize.hc.css
+++ b/static/css/selectize.hc.css
@ -122,7 +122,7 @@
  content: ' ';
  display: block;
  position: absolute;
  background: rgba(204, 204, 204, 0.008);
  background: var(--input-border);
  height: 1px;
  bottom: 0;
  left: 0;
@ -132,7 +132,7 @@
  position: absolute;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  background: var(--dropdown-bg);
  margin: -1px 0 0 0;
  border-top: 0 none;
  -webkit-box-sizing: border-box;
@ -171,16 +171,16 @@
  border-top: 0 none;
 }
 .selectize-dropdown .optgroup-header {
  color: #777777;
  background: #fff;
  color: var(--text-muted);
  background: var(--dropdown-bg);
  cursor: default;
 }
 .selectize-dropdown .active {
  background-color: #f5f5f5;
  color: #262626;
  background-color: var(--dropdown-link-hover-bg);
  color: var(--text-color);
 }
 .selectize-dropdown .active.create {
  color: #262626;
  color: var(--text-color);
 }
 .selectize-dropdown .create {
  color: rgba(51, 51, 51, 0.5);
@ -234,7 +234,7 @@
  padding: 0;
  margin: 2px 0 0 0;
  z-index: 1000;
  background: #fff;
  background: var(--dropdown-bg);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 2px;
--- a/static/css/variables.css
+++ b/static/css/variables.css
@ -1,8 +1,5 @@
 :root {
    color-scheme: light;
    --alert-info-bg: #d9edf7;
    --alert-info-border: #bce8f1;
    --alert-info-color: #31708f;
    --alert-no-data-bg: #f5f5f5;
    --alert-no-data-border: #ddd;
    --alert-no-data-color: #444;
@ -26,6 +23,7 @@
    --channel-off-color: #ddd;
    --close-color: #000;
    --debug-warning-bg:  #eee;
    --dropdown-bg: #fff;
    --dropdown-link-hover-bg: #f5f5f5;
    --get-started-bg: #f2f5f2;
    --input-bg-disabled: #eeeeee;
@ -37,9 +35,10 @@
    --label-ign-color: #333;
    --label-start-color: #117a3f;
    --link-color: #0091EA;
    --link-hover-color: #00629e;
    --log-missing-bg: #fff3f2;
    --modal-content-bg: #fff;
    --nav-pills-active-link-hover-bg: #eee;
    --nav-link-hover-bg: #eee;
    --panel-bg: #fff;
    --panel-success-bg: #dff0d8;
    --plan-business-border:  #90CAF9;
@ -52,6 +51,9 @@
    --plan-supporter-color: #1d190f;
    --pre-bg: #f5f5f5;
    --small-text-color: #111;
    --state-info-bg: #d9edf7;
    --state-info-border: #bce8f1;
    --state-info-color: #31708f;
    --status-new-color: #ccc;
    --table-bg-hover: #f5f5f5;
    --tag-bg: #eee;
@ -70,9 +72,6 @@

 body.dark {
    color-scheme: dark;
    --alert-info-bg: #123051;
    --alert-info-border: #163c64;
    --alert-info-color: #e0e2f5;
    --alert-no-data-bg: #29292c;
    --alert-no-data-border: #303033;
    --alert-no-data-color: #878790;
@ -96,20 +95,22 @@ body.dark {
    --channel-off-color: hsl(240, 2%, 40%);
    --close-color: #fff;
    --debug-warning-bg: #60002d;
    --dropdown-bg: hsl(240, 6%, 16%);
    --dropdown-link-hover-bg: #6f6f7f;
    --get-started-bg: #2c2e2c;
    --input-bg-disabled: #29292c;
    --input-border:  #464649;
    --input-color:  #b0b0b2;
    --input-color:  hsl(240, 3.3%, 88.2%);
    --input-group-addon-bg: #29292c;
    --jumbotron-bg: #1f1f22;
    --label-ign-bg: #383840;
    --label-ign-color: #e0e0e2;
    --label-start-color: #e0e0e2;
    --link-color: hsl(202.8, 100%, 55%);
    --link-hover-color: hsl(202.8, 100%, 65%);
    --log-missing-bg: #2d1e21;
    --modal-content-bg: #1f1f22;
    --nav-pills-active-link-hover-bg: #383840;
    --nav-link-hover-bg: #383840;
    --panel-bg: hsl(240, 6%, 16%);
    --panel-success-bg: #165b35;
    --plan-business-border:  #90CAF9;
@ -122,6 +123,9 @@ body.dark {
    --plan-supporter-color: #fff0c4;
    --pre-bg: #29292c;
    --small-text-color: #f0f0f2;
    --state-info-bg: #123051;
    --state-info-border: #163c64;
    --state-info-color: #e0e2f5;
    --status-new-color: hsl(240, 2%, 40%);
    --table-bg-hover: #25252a;
    --tag-bg: #303033;
--- a/stuff/bootstrap/variables.less
+++ b/stuff/bootstrap/variables.less
@ -26,14 +26,14 @@
 //## Settings for some of the most global styles.

 //** Background color for `<body>`.
@body-bg:               #fff;
@body-bg:               var(--body-bg);
 //** Global text color on `<body>`.
@text-color:            @gray-dark;

 //** Global textual link color.
@link-color:            #0091EA;
@link-color:            var(--link-color);
 //** Link hover color set via `darken()` function.
@link-hover-color:      darken(@link-color, 15%);
@link-hover-color:      var(--link-hover-color);
 //** Link hover decoration.
@link-hover-decoration: underline;

@ -136,7 +136,7 @@
@table-bg-active:               @table-bg-hover;

 //** Border color for table and cell borders.
@table-border-color:            #ddd;
@table-border-color:            var(--border-color);


 //== Buttons
@ -184,12 +184,12 @@
 //** `<input>` background color
@input-bg:                       transparent;
 //** `<input disabled>` background color
@input-bg-disabled:              @gray-lighter;
@input-bg-disabled:              var(--input-bg-disabled);

 //** Text color for `<input>`s
@input-color:                    @gray;
@input-color:                    var(--input-color);
 //** `<input>` border color
@input-border:                   #ccc;
@input-border:                   var(--input-border);

 // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
 //** Default `.form-control` border radius
@ -204,7 +204,7 @@
@input-border-focus:             #66afe9;

 //** Placeholder text color
@input-color-placeholder:        #999;
@input-color-placeholder:        var(--text-muted);

 //** Default `.form-control` height
@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
@ -220,7 +220,7 @@
@legend-border-color:            #e5e5e5;

 //** Background color for textual input addons
@input-group-addon-bg:           @gray-lighter;
@input-group-addon-bg:           var(--input-group-addon-bg);
 //** Border color for textual input addons
@input-group-addon-border-color: @input-border;

@ -233,20 +233,20 @@
 //## Dropdown menu container and contents.

 //** Background for the dropdown menu.
@dropdown-bg:                    #fff;
@dropdown-bg:                    var(--dropdown-bg);
 //** Dropdown menu `border-color`.
@dropdown-border:                rgba(0,0,0,.15);
 //** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border:       #ccc;
 //** Divider color for between dropdown items.
@dropdown-divider-bg:            #e5e5e5;
@dropdown-divider-bg:            var(--border-muted);

 //** Dropdown link text color.
@dropdown-link-color:            @gray-dark;
@dropdown-link-color:            var(--text-color);
 //** Hover color for dropdown links.
@dropdown-link-hover-color:      darken(@gray-dark, 5%);
@dropdown-link-hover-color:      var(--text-color);
 //** Hover background for dropdown links.
@dropdown-link-hover-bg:         #f5f5f5;
@dropdown-link-hover-bg:         var(--dropdown-link-hover-bg);

 //** Active dropdown menu item text color.
@dropdown-link-active-color:     @component-active-color;
@ -257,7 +257,7 @@
@dropdown-link-disabled-color:   @gray-light;

 //** Text color for headers within dropdown menus.
@dropdown-header-color:          @gray-light;
@dropdown-header-color:          var(--text-muted);

 //** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color:           #000;
@ -367,26 +367,26 @@

@navbar-default-color:             #777;
@navbar-default-bg:                transparent;
@navbar-default-border:            #eeeeee;
@navbar-default-border:            var(--border-color);

 // Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-color:                var(--text-muted);
@navbar-default-link-hover-color:          var(--text-color);
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-color:         var(--text-color);
@navbar-default-link-active-bg:            transparent;
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

 // Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-color:               var(--text-color);
@navbar-default-brand-hover-color:         var(--text-color);
@navbar-default-brand-hover-bg:            transparent;

 // Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #888;
@navbar-default-toggle-border-color:       #ddd;
@navbar-default-toggle-hover-bg:           var(--border-color);
@navbar-default-toggle-icon-bar-bg:        var(--text-muted);
@navbar-default-toggle-border-color:       var(--border-color);


 //=== Inverted navbar
@ -421,7 +421,7 @@

 //=== Shared nav styles
@nav-link-padding:                          10px 15px;
@nav-link-hover-bg:                         @gray-lighter;
@nav-link-hover-bg:                         var(--nav-link-hover-bg);

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;
@ -440,8 +440,8 @@

 //== Pills
@nav-pills-border-radius:                   @border-radius-base;
@nav-pills-active-link-hover-bg:            #EEE;
@nav-pills-active-link-hover-color:         #555;
@nav-pills-active-link-hover-bg:            var(--nav-link-hover-bg);
@nav-pills-active-link-hover-color:         var(--text-color);


 //== Pagination
@ -597,7 +597,7 @@
@modal-title-line-height:     @line-height-base;

 //** Background color of modal content area
@modal-content-bg:                             #fff;
@modal-content-bg:                             var(--modal-content-bg);
 //** Modal content border color
@modal-content-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
@ -608,9 +608,9 @@
 //** Modal backdrop opacity
@modal-backdrop-opacity:      .5;
 //** Modal header border color
@modal-header-border-color:   #e5e5e5;
@modal-header-border-color:   var(--border-muted);
 //** Modal footer border color
@modal-footer-border-color:   @modal-header-border-color;
@modal-footer-border-color:   var(--border-muted);

@modal-lg:                    900px;
@modal-md:                    600px;
@ -672,7 +672,7 @@
 //** Background color on `.list-group-item`
@list-group-bg:                 transparent;
 //** `.list-group-item` border color
@list-group-border:             #ddd;
@list-group-border:             var(--border-color);
 //** List group border radius
@list-group-border-radius:      @border-radius-base;

@ -703,7 +703,7 @@
 //
 //##

@panel-bg:                    transparent;
@panel-bg:                    var(--panel-bg);
@panel-body-padding:          15px;
@panel-heading-padding:       10px 15px;
@panel-footer-padding:        @panel-heading-padding;
@ -714,7 +714,7 @@
@panel-footer-bg:             #f5f5f5;

@panel-default-text:          @gray-dark;
@panel-default-border:        #ddd;
@panel-default-border:        var(--border-color);
@panel-default-heading-bg:    #f5f5f5;

@panel-primary-text:          #fff;
@ -791,11 +791,11 @@
@breadcrumb-padding-vertical:   8px;
@breadcrumb-padding-horizontal: 15px;
 //** Breadcrumb background color
@breadcrumb-bg:                 #f5f5f5;
@breadcrumb-bg:                 var(--breadcrumb-bg);
 //** Breadcrumb text color
@breadcrumb-color:              #ccc;
 //** Text color of current page in the breadcrumb
@breadcrumb-active-color:       @gray-light;
@breadcrumb-active-color:       var(--breadcrumb-active-color);
 //** Textual separator for between breadcrumb elements
@breadcrumb-separator:          "/";

@ -822,7 +822,7 @@
 //##

@close-font-weight:           bold;
@close-color:                 #000;
@close-color:                 var(--close-color);
@close-text-shadow:           0 1px 0 #fff;


@ -830,14 +830,14 @@
 //
 //##

@code-color:                  #222;
@code-color:                  var(--text-color);
@code-bg:                     transparent;

@kbd-color:                   #fff;
@kbd-bg:                      #333;

@pre-bg:                      #f5f5f5;
@pre-color:                   @gray-dark;
@pre-bg:                      var(--pre-bg);
@pre-color:                   var(--text-color);
@pre-border-color:            #ccc;
@pre-scrollable-max-height:   340px;

@ -849,11 +849,11 @@
 //** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
 //** Text muted color
@text-muted:                  @gray-light;
@text-muted:                  var(--text-muted);
 //** Abbreviations and acronyms border color
@abbr-border-color:           @gray-light;
 //** Headings small color
@headings-small-color:        @gray-light;
@headings-small-color:        var(--text-muted);
 //** Blockquote small color
@blockquote-small-color:      @gray-light;
 //** Blockquote font size
@ -867,4 +867,4 @@
 //** Point at which .dl-horizontal becomes horizontal
@dl-horizontal-breakpoint:    @grid-float-breakpoint;
 //** Horizontal line color.
@hr-border:                   @gray-lighter;
@hr-border:                   var(--border-color);
--- a/stuff/selectize/selectize.hc.less
+++ b/stuff/selectize/selectize.hc.less
@ -38,7 +38,7 @@
@selectize-color-optgroup-text: @dropdown-header-color;
@selectize-color-optgroup-border: @dropdown-divider-bg;
@selectize-color-dropdown: @dropdown-bg;
@selectize-color-dropdown-border-top: mix(@input-border, @input-bg, 0.8);
@selectize-color-dropdown-border-top: @input-border;
@selectize-color-dropdown-item-active: @dropdown-link-hover-bg;
@selectize-color-dropdown-item-active-text: @dropdown-link-hover-color;
@selectize-color-dropdown-item-create-active-text: @dropdown-link-hover-color;