Decrease width of filter component

Decrease width of filter component

@import (inline) "bootstrap-3.1.0.css";
@import (inline) "ionicons.css";
@import (inline) "vendor/tooltip.less";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

/* ==============
 * Base
 * ==============
 */

body {
  background-color: #323539;
  color: #f6f6f6;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

code {
  color: #fff;
  background-color: #454a50;
}

hr {
  border-color: #2a2d2f;
}

dt,
th {
  color: #8e929b;
}

dd {
  color: #f6f6f6;
}

dt,
dd {
  line-height: 1.728571429;
}

a {
  color: #00b482;
}

a:hover,
a:focus {
  color: #00da9d;
}

a,
.btn {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.caret {
  border-width: 5px;
}

.badge {
  background-color: #323539;
  color: #8e929b;
}

.badge-default {
  background-color: #EEE;
  color: #444;
}

.badge-warning {
  background-color: #E8EF98;
}

.close,
.close:focus,
.close:hover {
  color: #bfc5cd;
  font-weight: 200;
  opacity: 1;
  text-shadow: none;
}

.close:focus,
.close:hover {
  color: #fff;
}

.help-block {
  color: #8e929b;
}

.modal {
  display: block;
}

.modal-header {
  background-color: #222224;
  border-bottom: none;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.modal-content {
  background-color: #323539;
}

.page-header {
  border-bottom: none;
  margin-top: 0;
  margin-bottom: 0;
}

.page-header .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #d9534f;
}

.text-healthy {
  color: #7aff68;
}

.text-unhealthy {
  color: #ff7d64;
}

.breadcrumb {
  margin-top: -20px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #2a2d2f;
}

.breadcrumb > li + li:before {
  content:"\0FF1E";
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: #3d4045;
}

.table > tbody > tr > td > .list-inline,
.table > thead > tr > th > .list-inline {
  margin-bottom: 0;
}

.table > tbody > tr > td > .list-inline > li,
.table > thead > tr > th > .list-inline > li {
  padding: 0 0 5px 5px;
}

.list-inline-subtext {
  color: #6f757D;
  display: inline-block;
  margin-left: 10px;
}

.text-info {
  color: #B8E8EF;
}

.text-warning {
  color: #e4f342;
}

.text-muted {
  color: #8e929b;
}

/* ==============
 * Helpers
 * ==============
 */
.control-label {
  font-weight: normal;
}

.form-control {
  background: #f6f6f6;
  border-color: #5e646c;
  color: #555;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.2);
}

.text-align-top {
   vertical-align: text-top;
}

.btn {
  font-weight: 400;
}

.btn-sm {
  padding: 5px 14px;
}

.btn-link {
  color: #8e929b;
}

.btn-default {
  background-color: transparent;
  border-color: #f6f6f6;
  color: #f6f6f6;
}

.btn-default.disabled,
.btn-default[disabled] {
  background-color: transparent;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-color: #f6f6f6;
  color: #323539;
}

.btn-success {
  background-color: #00b482;
  border-color: #00b482;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-color: #00da9d;
  border-color: #007756;
}

.btn-danger {
  background-color: transparent;
  border-color: #d9534f;
  color: #d9534f;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-info {
  background-color: #5b6067;
  border-color: #323539;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-color: #8e929b;
  border-color: #323539;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  color: #838a93;
  background-color: #4d5157;
  border-color: #323539;
}

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==============
 * Textures
 * ==============
 */

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: transparent;
}

.navbar-inverse {
  background-color: #222426;
  border-color: transparent;
}

.navbar-inverse .navbar-nav > li > a {
  color: #8e929b;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #f6f6f6;
  background-color: transparent;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
  }
}

.navbar-brand {
  height: auto;
  padding-bottom: 12px;
  padding-top: 11px;
  padding-left: 0;
}

.panel-group .panel-inverse {
  border-radius: 0;
  border-top: solid 1px #3d4045;
  border-bottom-width: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel-group .panel-header {
  color: #8e929b;
  font-weight: bold;
  border-top: solid 0 transparent;
  border-bottom: solid 1px #3d4045;
}

.panel-group .panel-inverse + .panel-inverse {
  margin-top: 0;
}

.panel-inverse {
  background-color: transparent;
  border-color: transparent;
}

.panel-body {
  background-color: #222224;
}

.panel-inverse:not(.panel-header) .panel-heading:hover {
  background-color: #454a50;
}

.panel-inverse .panel-body {
  border-radius: 0 0 4px 4px;
  margin-bottom: 15px;
}

.pagination-unstyled {
  margin-bottom: -9px;
  margin-top: -6px;
}

.item-numbers {
  padding: 5px 10px;
  margin: 0 0 10px;
}

.pagination > li:first-child > button {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination > li:last-child > button {
  margin-right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination > li > button {
  color: #f6f6f6;
  background-color: #5b6067;
  border: 1px solid #323539;
  line-height: 1.5;
  padding: 5px 10px;
}

.pagination > li > button:hover,
.pagination > li > button:focus {
  color: #f6f6f6;
  background-color: #8e929b;
}

.pagination > .disabled > button,
.pagination > .disabled > button:hover,
.pagination > .disabled > button:focus {
  color: #838a93;
  background-color: #454a50;
}

.pagination > .success > button,
.pagination > .success > button:hover,
.pagination > .success > button:focus {
  color: #f6f6f6;
  background-color: #00b482;
}

.nav-tabs {
  border-bottom: 2px solid #2a2d2f;
  margin-top: 0;
}

.nav-tabs-unbordered {
  border-bottom: 0 solid transparent;
}

.nav-tabs-unbordered > li {
  margin-bottom: 0;
  border-bottom: 0 solid transparent;
}

.nav-tabs > li > a {
  color: #8e929b;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding-bottom: 13px;
  padding-top: 15px;
  border-bottom: 3px solid transparent;
  line-height: 19px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: #f6f6f6;
  border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: transparent;
  color: #f6f6f6;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #00b482;
}

.header-btn {
  margin-top: 14px;
}

.table-fixed {
  table-layout: fixed;
}

.table-unstyled {
  margin-bottom: 0;
}

.table > tbody > tr.active > td,
.table-hover > tbody > tr:hover > td {
  background-color: #454a50;
}

.table-selectable tr > td {
  cursor: pointer;
}

.dl-unstyled {
  margin-bottom: 0;
}

.badge {
   position: absolute;
   top: 5px;
   left: 1px;
   font-size: .7em;
   color: #2a2d2f;
   background: #e4f342;
   min-width: 18px;
   height: 18px;
   text-align: center;
   line-height: 18px;
   border-radius: 50%;
   box-shadow: 0 1px 1px #333;
   padding: 0 2px;
}

.progress {
  height: 10px;
  border-radius: 3px;
}

.progress-bar {
  line-height: 10px;
}

.progress-bar-info {
  background-color: #5e646b;
}

.health-dot {
  display: inline-block;
}

.health-dot:before {
  content: "\00a0";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: solid 2px #51565d;
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 6px;
  margin-bottom: 1px;
}

.health-dot-error:before {
  background-color: #ff7d64;
}

.health-dot-warning:before {
  background-color: #faef66
}

.health-dot-success:before {
  background-color: #7aff68;
}

.health-dot-unknown:before {
  background-color: #8e929b;
}

.health-bar-column {
  vertical-align: middle;
}

.health-bar-column .health-bar {
  width: 100%;
  max-width: 140px;
  display: inline-block;
  height: 8px;
  margin-bottom: 2px;
  background-color: #2a2c31;
  border-radius: 4px;
}

.health-bar-inner {
  border-left: 1px solid #2a2c31;
}

.health-bar-over-capacity {
  background-color: #4ca0ff; // blue
}

.health-bar-unhealthy {
  background-color: #ff7d64; // red
}

.health-bar-staged {
  background-color: #fff57a; // yellow
}

.health-bar-healthy {
  background-color: #29f6a0; // green
}

.health-bar-running {
  background-color: #8e929b; // light-grey
}

.health-bar-unscheduled {
  background-color: #2a2c31; // dark-grey
}

.clickable {
  cursor: pointer;
}

.modal-header-blend {
  background: transparent;
}

@media (min-width: 768px) {
  .dl-horizontal-lg dt {
    width: 190px;
  }

  .dl-horizontal-lg dd {
    margin-left: 210px;
  }
}

.app-list-controls {
  padding-top: 8px;
  padding-bottom: 8px;
}

.filter-box {
  max-width: 240px;

  .search-icon-container {
    .icon {
      font-size: 1.4em;
    }
    padding: 3px 12px;
  }
  .form-control {
    padding: 6px 0;
    -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);
    color: #f6f6f6;
    background: transparent;
    border-color: #5e646c;
    border-width: 2px 0;
  }

  .input-group-addon {
    background: transparent;
    -webkit-transition: border-color ease-in-out .15s;
    transition: border-color ease-in-out .15s;
    border-color: #5e646c;
    border-width: 2px;
  }

  .filter-box-clear {
    color: #5e646c;
  }
}

.filter-box-activated {
  .form-control {
    border-color: #00b482;
  }
  .input-group-addon {
    -webkit-transition: border-color ease-in-out .15s;
    transition: border-color ease-in-out .15s;
    color: #00b482;
    border-color: #00b482;
  }
}

/* ==============
 * PLEASE NOTE
 * The following styles are necessary due to tooltip.js using the same
 * classnames as Bootstrap, in particular for the padding property.
 * By setting the typeClass option we can pass an additional class name and
 * override the Bootstrap values for padding via a more speciific selector.
 * ==============
 */
.tooltip {
  background: #222426;
  text-transform: capitalize;

  &.default {
    padding: .8em 1em; /* this would be "10px 0" otherwise */
  }
}

@import (inline) "bootstrap-3.1.0.css";
@import (inline) "ionicons.css";
@import (inline) "vendor/tooltip.less";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

/* ==============
 * Base
 * ==============
 */

body {
  background-color: #323539;
  color: #f6f6f6;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

code {
  color: #fff;
  background-color: #454a50;
}

hr {
  border-color: #2a2d2f;
}

dt,
th {
  color: #8e929b;
}

dd {
  color: #f6f6f6;
}

dt,
dd {
  line-height: 1.728571429;
}

a {
  color: #00b482;
}

a:hover,
a:focus {
  color: #00da9d;
}

a,
.btn {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.caret {
  border-width: 5px;
}

.badge {
  background-color: #323539;
  color: #8e929b;
}

.badge-default {
  background-color: #EEE;
  color: #444;
}

.badge-warning {
  background-color: #E8EF98;
}

.close,
.close:focus,
.close:hover {
  color: #bfc5cd;
  font-weight: 200;
  opacity: 1;
  text-shadow: none;
}

.close:focus,
.close:hover {
  color: #fff;
}

.help-block {
  color: #8e929b;
}

.modal {
  display: block;
}

.modal-header {
  background-color: #222224;
  border-bottom: none;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.modal-content {
  background-color: #323539;
}

.page-header {
  border-bottom: none;
  margin-top: 0;
  margin-bottom: 0;
}

.page-header .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #d9534f;
}

.text-healthy {
  color: #7aff68;
}

.text-unhealthy {
  color: #ff7d64;
}

.breadcrumb {
  margin-top: -20px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #2a2d2f;
}

.breadcrumb > li + li:before {
  content:"\0FF1E";
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: #3d4045;
}

.table > tbody > tr > td > .list-inline,
.table > thead > tr > th > .list-inline {
  margin-bottom: 0;
}

.table > tbody > tr > td > .list-inline > li,
.table > thead > tr > th > .list-inline > li {
  padding: 0 0 5px 5px;
}

.list-inline-subtext {
  color: #6f757D;
  display: inline-block;
  margin-left: 10px;
}

.text-info {
  color: #B8E8EF;
}

.text-warning {
  color: #e4f342;
}

.text-muted {
  color: #8e929b;
}

/* ==============
 * Helpers
 * ==============
 */
.control-label {
  font-weight: normal;
}

.form-control {
  background: #f6f6f6;
  border-color: #5e646c;
  color: #555;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.2);
}

.text-align-top {
   vertical-align: text-top;
}

.btn {
  font-weight: 400;
}

.btn-sm {
  padding: 5px 14px;
}

.btn-link {
  color: #8e929b;
}

.btn-default {
  background-color: transparent;
  border-color: #f6f6f6;
  color: #f6f6f6;
}

.btn-default.disabled,
.btn-default[disabled] {
  background-color: transparent;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-color: #f6f6f6;
  color: #323539;
}

.btn-success {
  background-color: #00b482;
  border-color: #00b482;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-color: #00da9d;
  border-color: #007756;
}

.btn-danger {
  background-color: transparent;
  border-color: #d9534f;
  color: #d9534f;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-info {
  background-color: #5b6067;
  border-color: #323539;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-color: #8e929b;
  border-color: #323539;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  color: #838a93;
  background-color: #4d5157;
  border-color: #323539;
}

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==============
 * Textures
 * ==============
 */

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: transparent;
}

.navbar-inverse {
  background-color: #222426;
  border-color: transparent;
}

.navbar-inverse .navbar-nav > li > a {
  color: #8e929b;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #f6f6f6;
  background-color: transparent;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
  }
}

.navbar-brand {
  height: auto;
  padding-bottom: 12px;
  padding-top: 11px;
  padding-left: 0;
}

.panel-group .panel-inverse {
  border-radius: 0;
  border-top: solid 1px #3d4045;
  border-bottom-width: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel-group .panel-header {
  color: #8e929b;
  font-weight: bold;
  border-top: solid 0 transparent;
  border-bottom: solid 1px #3d4045;
}

.panel-group .panel-inverse + .panel-inverse {
  margin-top: 0;
}

.panel-inverse {
  background-color: transparent;
  border-color: transparent;
}

.panel-body {
  background-color: #222224;
}

.panel-inverse:not(.panel-header) .panel-heading:hover {
  background-color: #454a50;
}

.panel-inverse .panel-body {
  border-radius: 0 0 4px 4px;
  margin-bottom: 15px;
}

.pagination-unstyled {
  margin-bottom: -9px;
  margin-top: -6px;
}

.item-numbers {
  padding: 5px 10px;
  margin: 0 0 10px;
}

.pagination > li:first-child > button {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination > li:last-child > button {
  margin-right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination > li > button {
  color: #f6f6f6;
  background-color: #5b6067;
  border: 1px solid #323539;
  line-height: 1.5;
  padding: 5px 10px;
}

.pagination > li > button:hover,
.pagination > li > button:focus {
  color: #f6f6f6;
  background-color: #8e929b;
}

.pagination > .disabled > button,
.pagination > .disabled > button:hover,
.pagination > .disabled > button:focus {
  color: #838a93;
  background-color: #454a50;
}

.pagination > .success > button,
.pagination > .success > button:hover,
.pagination > .success > button:focus {
  color: #f6f6f6;
  background-color: #00b482;
}

.nav-tabs {
  border-bottom: 2px solid #2a2d2f;
  margin-top: 0;
}

.nav-tabs-unbordered {
  border-bottom: 0 solid transparent;
}

.nav-tabs-unbordered > li {
  margin-bottom: 0;
  border-bottom: 0 solid transparent;
}

.nav-tabs > li > a {
  color: #8e929b;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding-bottom: 13px;
  padding-top: 15px;
  border-bottom: 3px solid transparent;
  line-height: 19px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: #f6f6f6;
  border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: transparent;
  color: #f6f6f6;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #00b482;
}

.header-btn {
  margin-top: 14px;
}

.table-fixed {
  table-layout: fixed;
}

.table-unstyled {
  margin-bottom: 0;
}

.table > tbody > tr.active > td,
.table-hover > tbody > tr:hover > td {
  background-color: #454a50;
}

.table-selectable tr > td {
  cursor: pointer;
}

.dl-unstyled {
  margin-bottom: 0;
}

.badge {
   position: absolute;
   top: 5px;
   left: 1px;
   font-size: .7em;
   color: #2a2d2f;
   background: #e4f342;
   min-width: 18px;
   height: 18px;
   text-align: center;
   line-height: 18px;
   border-radius: 50%;
   box-shadow: 0 1px 1px #333;
   padding: 0 2px;
}

.progress {
  height: 10px;
  border-radius: 3px;
}

.progress-bar {
  line-height: 10px;
}

.progress-bar-info {
  background-color: #5e646b;
}

.health-dot {
  display: inline-block;
}

.health-dot:before {
  content: "\00a0";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: solid 2px #51565d;
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 6px;
  margin-bottom: 1px;
}

.health-dot-error:before {
  background-color: #ff7d64;
}

.health-dot-warning:before {
  background-color: #faef66
}

.health-dot-success:before {
  background-color: #7aff68;
}

.health-dot-unknown:before {
  background-color: #8e929b;
}

.health-bar-column {
  vertical-align: middle;
}

.health-bar-column .health-bar {
  width: 100%;
  max-width: 140px;
  display: inline-block;
  height: 8px;
  margin-bottom: 2px;
  background-color: #2a2c31;
  border-radius: 4px;
}

.health-bar-inner {
  border-left: 1px solid #2a2c31;
}

.health-bar-over-capacity {
  background-color: #4ca0ff; // blue
}

.health-bar-unhealthy {
  background-color: #ff7d64; // red
}

.health-bar-staged {
  background-color: #fff57a; // yellow
}

.health-bar-healthy {
  background-color: #29f6a0; // green
}

.health-bar-running {
  background-color: #8e929b; // light-grey
}

.health-bar-unscheduled {
  background-color: #2a2c31; // dark-grey
}

.clickable {
  cursor: pointer;
}

.modal-header-blend {
  background: transparent;
}

@media (min-width: 768px) {
  .dl-horizontal-lg dt {
    width: 190px;
  }

  .dl-horizontal-lg dd {
    margin-left: 210px;
  }
}

.app-list-controls {
  padding-top: 8px;
  padding-bottom: 8px;
}

.filter-box {
  max-width: 330px;

  .search-icon-container {
    .icon {
      font-size: 1.4em;
    }
    padding: 3px 12px;
  }
  .form-control {
    padding: 6px 0;
    -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);
    color: #f6f6f6;
    background: transparent;
    border-color: #5e646c;
    border-width: 2px 0;
  }

  .input-group-addon {
    background: transparent;
    -webkit-transition: border-color ease-in-out .15s;
    transition: border-color ease-in-out .15s;
    border-color: #5e646c;
    border-width: 2px;
  }

  .filter-box-clear {
    color: #5e646c;
  }
}

.filter-box-activated {
  .form-control {
    border-color: #00b482;
  }
  .input-group-addon {
    -webkit-transition: border-color ease-in-out .15s;
    transition: border-color ease-in-out .15s;
    color: #00b482;
    border-color: #00b482;
  }
}

/* ==============
 * PLEASE NOTE
 * The following styles are necessary due to tooltip.js using the same
 * classnames as Bootstrap, in particular for the padding property.
 * By setting the typeClass option we can pass an additional class name and
 * override the Bootstrap values for padding via a more speciific selector.
 * ==============
 */
.tooltip {
  background: #222426;
  text-transform: capitalize;

  &.default {
    padding: .8em 1em; /* this would be "10px 0" otherwise */
  }
}


fix white space wrapping in centered navbar items

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aoimedia/uikit.git/'


don't display sabnzbd speed if in setting mode

/*--- mixins and useful things ---*/

.border-radius (@radius: 5px)
{
  border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.opacity (@opacity: 0.5)
{
  opacity: @opacity;
  -moz-opacity: @opacity;
  -o-opacity: @opacity;
  -webkit-opacity: @opacity;
}

.box-shadow (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: @color @x @y @radius;
  -moz-box-shadow: @color @x @y @radius;
  -o-box-shadow: @color @x @y @radius;
  -webkit-box-shadow: @color @x @y @radius;
}

.box-shadow-inset (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: inset @color @x @y @radius;
  -moz-box-shadow: inset @color @x @y @radius;
  -o-box-shadow: inset @color @x @y @radius;
  -webkit-box-shadow: inset @color @x @y @radius;
}

/*--- settings icon ---*/

#settings_icon
{
  background: url(/static/images/alpha/000_70.png);
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: 1;

  border-bottom-right-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -o-border-bottom-right-radius: 40px;
  -webkit-border-bottom-right-radius: 40px;

  transition: opacity 0.3s;
  -transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
}

#settings_icon:hover,
.f_settings_mode #settings_icon
{
  cursor: pointer;
  opacity: 1;
}

#settings_icon .inner
{
  background: url(/static/images/settings_icon.png) no-repeat 5px 5px;
  height: 40px;
  width: 40px;
}

/*--- columns ---*/

#fanart
{
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;

  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

#wrapper
{
  min-width: 900px;
  padding: 2% 2% 60px;
  position: relative;
}

.col
{
  margin-left: 2%;
  width: 32%;
}

#col1
{
  float: left;
  margin-left: 0;
}

#col2
{
  float: left;
}

#col3
{
  float: right;
}

/*--- add module ---*/

.add_module
{
  opacity: 0;
}

.f_settings_mode .add_module
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- module ---*/

ul.modules
{
  min-height: 20px;
}

.placeholder
{
  display: none;
}

.module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  background: url(/static/images/alpha/000_80.png);
  border: 1px solid #333;
  display: block !important;
  margin-bottom: 40px;
  padding: 5px;
  position: relative;

  .border-radius(2px);
  .box-shadow(#222, 0, 0, 10px);
}

.inactive_module
{
  display: none;
}

.module h2,
.f_settings_mode .inactive_module h2,
.f_settings_mode .placeholder h2
{
  display: block;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.3em;
  padding: 10px 15px 12px;
}

.module h2 + .subtitle
{
  color: #ccc;
  font-size: 0.9em;
  margin: -12px 15px 15px;
}

.f_settings_mode .module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  cursor: move;
}

/* settings mode - settings/remove buttons */

.module_settings,
.module_remove
{
  background: url(/static/images/alpha/fff_10.png);
  display: none;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  text-indent: -9999px;
  width: 30px;

  .border-radius(4px);
}

.module_settings
{
  right: 47px;
}

.module_settings span,
.module_remove span
{
  background: url(/static/images/remove_icon.png) no-repeat center center;
  display: block;
  height: 30px;
  width: 30px;
}

.module_settings span
{
  background: url(/static/images/settings_icon_small.png) no-repeat center center;
}

.module_settings:hover,
.module_remove:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

.f_settings_mode .module_settings,
.f_settings_mode .module_remove
{
  display: block;
}

/*--- dialog ---*/

.dialog
{
  background: url(/static/images/alpha/000_80.png);
  border: 2px solid #ccc;
  padding: 15px;
  width: 500px;

  .border-radius(4px);
  .box-shadow(#222, 0, 0, 5px);
}

.dialog .close
{
  background-color: #000;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 18px;
  line-height: 16px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 18px;
  .border-radius(15px);
}

/* confirmation dialog */

#confirmation_dialog h3
{
  font-size: 1.2em;
  font-weight: normal;
  margin: 10px 0 20px;
  text-align: center;
}

#confirmation_dialog .choices
{
  text-align: center;
}

#confirmation_dialog .choices .confirm,
#confirmation_dialog .choices .cancel
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

#confirmation_dialog .choices .confirm:hover,
#confirmation_dialog .choices .cancel:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#confirmation_dialog .choices .confirm
{
  margin-right: 10px;
}

/*--- add module dialog ---*/

#add_module_dialog h2
{
  display: inline;
}

#add_module_dialog #select_module
{
  display: inline;
  margin-left: 5px;
}

#add_module_dialog .description
{
  height: 30px;
  margin: 20px 0;
}

#add_module_dialog .submit
{
  background: url(/static/images/alpha/fff_40.png);
  border: 1px solid #999;
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 11px;
  padding: 8px 12px;

  .border-radius(4px);
}

/*--- module settings ---*/

.edit_settings > .inner
{
  padding: 0 15px 15px;
}

.edit_settings .choices
{
  margin-top: 20px;
  text-align: center;
}

.edit_settings .choices .save,
.edit_settings .choices .cancel
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

.edit_settings .choices .save:hover,
.edit_settings .choices .cancel:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

.edit_settings .choices .save
{
  margin-right: 10px;
}

.edit_settings .formrow
{
  margin-top: 5px;
}

.edit_settings .formrow label
{
  float: left;
  margin-top: 6px;
  width: 33%;
}

.edit_settings .formrow input[type=text],
.edit_settings .formrow input[type=password]
{
  background-color: #fff;
  border: 1px solid #555;
  float: right;
  padding: 4px 6px;
  width: 60%;

  .border-radius(3px);
}

/*--- applications ---*/

#applications li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 0;

  .border-radius(4px);
}

#applications li:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#applications li:first-child
{
  margin-top: 0;
}

#applications li a
{
  display: block;
  padding: 10px 15px;
}

#applications li .name
{
  float: left;
  font-size: 1.3em;
  font-weight: bold;
}

#applications li .description
{
  color: #ddd;
  float: right;
  font-size: 0.9em;
}

/*--- episodes list ---*/

ul.episodes li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  font-size: 0.9em;
  line-height: 1.3em;
  margin-top: 5px;
  position: relative;

  .border-radius(4px);
}

ul.episodes li:first-child
{
  margin-top: 0;
}

ul.episodes li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

ul.episodes .inner
{
  padding: 5px 107px 5px 15px;
  .border-radius(4px);
}

ul.episodes li.watched .inner
{
  border-left: 3px solid #ccc;
  padding-left: 12px;
}

ul.episodes h3
{
  font-size: 1.2em;
  margin-top: 6px;
}

ul.episodes p
{
  color: #ccc;
}

ul.episodes .title
{
  margin-bottom: 6px;
}

ul.episodes img
{
  position: absolute;
  right: 5px;
  top: 5px;
  .box-shadow(#222, 0, 0, 2px);
}

/*--- currently playing ---*/

#currently_playing
{
  background: url(/static/images/alpha/000_80.png);
  bottom: 0;
  left: 0;
  min-width: 900px;
  padding: 20px;
  position: fixed;
  right: 0;

  .box-shadow(#222, 0, 0, 10px);
}

#currently_playing .item_info
{
  float: left;
  line-height: 1.5em;
  width: 400px;
}

#currently_playing .item_info .show:hover,
#currently_playing .item_info .season:hover
{
  border-bottom: 1px solid #555;
  cursor: pointer;
}

#currently_playing .item_info .separator
{
  margin: 0 3px;
}

#currently_playing .controls
{
  margin: 0 auto;
  width: 80px;
}

#currently_playing .controls .play_pause,
#currently_playing .controls .stop
{
  background: #111 url(/static/images/player_sprite.png) no-repeat 11px 11px;
  border: 1px solid #555;
  cursor: pointer;
  float: left;
  height: 33px;
  text-indent: -9999px;
  width: 33px;

  .border-radius(20px);
}

#currently_playing .controls .stop
{
  background-position: 8px -28px;
  margin-right: 10px;
}

#currently_playing .controls .play_pause:hover,
#currently_playing .controls .stop:hover
{
  background-color: #333;
}

#currently_playing .progress
{
  float: right;
  font-size: 0.9em;
  height: 40px;
  position: relative;
  width: 400px;
}

#currently_playing .progress .current
{
  bottom: 8px;
  left: 0;
  position: absolute;
}

#currently_playing .progress .total
{
  bottom: 8px;
  right: 0;
  position: absolute;
}

#currently_playing .progress .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-top: 8px;
  width: 398px;
  .border-radius(3px);
}

#currently_playing .progress .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#currently_playing .synopsis
{
  display: none;
}

/*--- trakt ---*/

#trakt > .inner
{
  margin-top: -5px;
}

#trakt .overview
{
  color: #ccc;
}

#trakt .overview strong
{
  color: #fff;
}

#trakt h3
{
  color: #eee;
  font-weight: normal;
}

#trakt .shouts li
{
  font-size: 0.9em;
  line-height: 1.2em;
  margin-top: 10px;
  position: relative;
}

#trakt .shouts .avatar
{
  left: 0;
  position: absolute;
  top: 20px;
}

#trakt .shouts .shout
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-left: 25px;
  padding: 5px;

  .border-radius(4px);
}

#trakt .shouts li.me .shout
{
  background: url(/static/images/alpha/lightblue_30.png);
}

#trakt .shouts + #add_shout
{
  margin-top: 20px;
}

#trakt #add_shout h3
{
  margin-bottom: 10px;
}

#trakt #add_shout textarea
{
  background: url(/static/images/alpha/fff_20.png);
  border: none;
  color: #ccc;
  display: block;
  font-size: 0.9em;
  height: 55px;
  width: 100%;

  .border-radius(2px);
}

#trakt #add_shout .submit_wrapper.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat 210px 11px;
}

#trakt #add_shout .submit
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #222;
  float: right;
  font-size: 0.9em;
  margin-top: 5px;
  padding: 4px 12px;

  .border-radius(2px);
}

#trakt #add_shout .submit:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#trakt #add_shout .submit_wrapper p
{
  float: left;
  font-size: 0.9em;
  margin-top: 10px;
}

/*--- generic module ---*/

.module.generic > .inner
{
  color: #ccc;
  line-height: 1.3em;
  padding: 0 15px 15px;
}

.module.generic > .inner p
{
  margin-top: 5px;
}

.module.generic > .inner p strong
{
  color: #fff;
}

.module.generic > .inner p:first-child
{
  margin-top: 0;
}

/*--- SABnzbd+ ---*/

#sabnzbd
{
  position: relative;
}

#sabnzbd > .inner
{
  line-height: 1.3em;
  padding: 0 15px 15px;
}

#sabnzbd .speed
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  padding: 4px 8px 2px;
  position: absolute;
  right: 20px;
  top: 14px;

  .border-radius(4px);
}

.f_settings_mode #sabnzbd .speed
{
  display: none;
}

#sabnzbd .bar
{
  border: 1px solid #777;
  height: 5px;
  margin: 17px 0 6px;

  .border-radius(3px);
}

#sabnzbd .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#sabnzbd .remaining
{
  float: left;
  font-size: 0.9em;
}

#sabnzbd .percentage_complete
{
  float: right;
  font-size: 0.9em;
  margin: 0;
}

/*--- media library ---*/

#library
{
  position: relative;
}

#library h2
{
  padding-right: 55px;
}

#library ul
{
  max-height: 196px;
  overflow: auto;
}

#library li,
#library .back
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  cursor: pointer;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 5px 15px;

  .border-radius(4px);
}

.f_settings_mode #library .back
{
  display: none;
}

#library li
{
  padding-right: 28px;
  position: relative;
}

#library li:hover,
#library .back:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#library li:first-child
{
  margin-top: 0;
}

#library li .xhrloading
{
  position: absolute;
  right: 5px;
  top: 6px;
}

#library .back
{
  color: #ccc;
  font-size: 1.2em;
  position: absolute;
  margin-top: 0;
  padding: 3px 15px;
  right: 5px;
  top: 12px;
}

#library .back.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat center center;
  text-indent: -9999px;
}

/*--- expand ---*/

.expand
{
  text-decoration: none;
}

/*--- view more ---*/

.view_older,
.view_newer
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  color: #ccc;
  display: block;
  float: left;
  font-size: 1.2em;
  margin-top: 5px;
  padding: 2px 14px;
  position: relative;
  text-align: center;

  .border-radius(4px);
}

.view_older
{
  float: right;
}

.view_older:hover,
.view_newer:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

/*--- mixins and useful things ---*/

.border-radius (@radius: 5px)
{
  border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.opacity (@opacity: 0.5)
{
  opacity: @opacity;
  -moz-opacity: @opacity;
  -o-opacity: @opacity;
  -webkit-opacity: @opacity;
}

.box-shadow (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: @color @x @y @radius;
  -moz-box-shadow: @color @x @y @radius;
  -o-box-shadow: @color @x @y @radius;
  -webkit-box-shadow: @color @x @y @radius;
}

.box-shadow-inset (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: inset @color @x @y @radius;
  -moz-box-shadow: inset @color @x @y @radius;
  -o-box-shadow: inset @color @x @y @radius;
  -webkit-box-shadow: inset @color @x @y @radius;
}

/*--- settings icon ---*/

#settings_icon
{
  background: url(/static/images/alpha/000_70.png);
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: 1;

  border-bottom-right-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -o-border-bottom-right-radius: 40px;
  -webkit-border-bottom-right-radius: 40px;

  transition: opacity 0.3s;
  -transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
}

#settings_icon:hover,
.f_settings_mode #settings_icon
{
  cursor: pointer;
  opacity: 1;
}

#settings_icon .inner
{
  background: url(/static/images/settings_icon.png) no-repeat 5px 5px;
  height: 40px;
  width: 40px;
}

/*--- columns ---*/

#fanart
{
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;

  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

#wrapper
{
  min-width: 900px;
  padding: 2% 2% 60px;
  position: relative;
}

.col
{
  margin-left: 2%;
  width: 32%;
}

#col1
{
  float: left;
  margin-left: 0;
}

#col2
{
  float: left;
}

#col3
{
  float: right;
}

/*--- add module ---*/

.add_module
{
  opacity: 0;
}

.f_settings_mode .add_module
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- module ---*/

ul.modules
{
  min-height: 20px;
}

.placeholder
{
  display: none;
}

.module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  background: url(/static/images/alpha/000_80.png);
  border: 1px solid #333;
  display: block !important;
  margin-bottom: 40px;
  padding: 5px;
  position: relative;

  .border-radius(2px);
  .box-shadow(#222, 0, 0, 10px);
}

.inactive_module
{
  display: none;
}

.module h2,
.f_settings_mode .inactive_module h2,
.f_settings_mode .placeholder h2
{
  display: block;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.3em;
  padding: 10px 15px 12px;
}

.module h2 + .subtitle
{
  color: #ccc;
  font-size: 0.9em;
  margin: -12px 15px 15px;
}

.f_settings_mode .module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  cursor: move;
}

/* settings mode - settings/remove buttons */

.module_settings,
.module_remove
{
  background: url(/static/images/alpha/fff_10.png);
  display: none;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  text-indent: -9999px;
  width: 30px;

  .border-radius(4px);
}

.module_settings
{
  right: 47px;
}

.module_settings span,
.module_remove span
{
  background: url(/static/images/remove_icon.png) no-repeat center center;
  display: block;
  height: 30px;
  width: 30px;
}

.module_settings span
{
  background: url(/static/images/settings_icon_small.png) no-repeat center center;
}

.module_settings:hover,
.module_remove:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

.f_settings_mode .module_settings,
.f_settings_mode .module_remove
{
  display: block;
}

/*--- dialog ---*/

.dialog
{
  background: url(/static/images/alpha/000_80.png);
  border: 2px solid #ccc;
  padding: 15px;
  width: 500px;

  .border-radius(4px);
  .box-shadow(#222, 0, 0, 5px);
}

.dialog .close
{
  background-color: #000;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 18px;
  line-height: 16px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 18px;
  .border-radius(15px);
}

/* confirmation dialog */

#confirmation_dialog h3
{
  font-size: 1.2em;
  font-weight: normal;
  margin: 10px 0 20px;
  text-align: center;
}

#confirmation_dialog .choices
{
  text-align: center;
}

#confirmation_dialog .choices .confirm,
#confirmation_dialog .choices .cancel
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

#confirmation_dialog .choices .confirm:hover,
#confirmation_dialog .choices .cancel:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#confirmation_dialog .choices .confirm
{
  margin-right: 10px;
}

/*--- add module dialog ---*/

#add_module_dialog h2
{
  display: inline;
}

#add_module_dialog #select_module
{
  display: inline;
  margin-left: 5px;
}

#add_module_dialog .description
{
  height: 30px;
  margin: 20px 0;
}

#add_module_dialog .submit
{
  background: url(/static/images/alpha/fff_40.png);
  border: 1px solid #999;
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 11px;
  padding: 8px 12px;

  .border-radius(4px);
}

/*--- module settings ---*/

.edit_settings > .inner
{
  padding: 0 15px 15px;
}

.edit_settings .choices
{
  margin-top: 20px;
  text-align: center;
}

.edit_settings .choices .save,
.edit_settings .choices .cancel
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

.edit_settings .choices .save:hover,
.edit_settings .choices .cancel:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

.edit_settings .choices .save
{
  margin-right: 10px;
}

.edit_settings .formrow
{
  margin-top: 5px;
}

.edit_settings .formrow label
{
  float: left;
  margin-top: 6px;
  width: 33%;
}

.edit_settings .formrow input[type=text],
.edit_settings .formrow input[type=password]
{
  background-color: #fff;
  border: 1px solid #555;
  float: right;
  padding: 4px 6px;
  width: 60%;

  .border-radius(3px);
}

/*--- applications ---*/

#applications li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 0;

  .border-radius(4px);
}

#applications li:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#applications li:first-child
{
  margin-top: 0;
}

#applications li a
{
  display: block;
  padding: 10px 15px;
}

#applications li .name
{
  float: left;
  font-size: 1.3em;
  font-weight: bold;
}

#applications li .description
{
  color: #ddd;
  float: right;
  font-size: 0.9em;
}

/*--- episodes list ---*/

ul.episodes li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  font-size: 0.9em;
  line-height: 1.3em;
  margin-top: 5px;
  position: relative;

  .border-radius(4px);
}

ul.episodes li:first-child
{
  margin-top: 0;
}

ul.episodes li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

ul.episodes .inner
{
  padding: 5px 107px 5px 15px;
  .border-radius(4px);
}

ul.episodes li.watched .inner
{
  border-left: 3px solid #ccc;
  padding-left: 12px;
}

ul.episodes h3
{
  font-size: 1.2em;
  margin-top: 6px;
}

ul.episodes p
{
  color: #ccc;
}

ul.episodes .title
{
  margin-bottom: 6px;
}

ul.episodes img
{
  position: absolute;
  right: 5px;
  top: 5px;
  .box-shadow(#222, 0, 0, 2px);
}

/*--- currently playing ---*/

#currently_playing
{
  background: url(/static/images/alpha/000_80.png);
  bottom: 0;
  left: 0;
  min-width: 900px;
  padding: 20px;
  position: fixed;
  right: 0;

  .box-shadow(#222, 0, 0, 10px);
}

#currently_playing .item_info
{
  float: left;
  line-height: 1.5em;
  width: 400px;
}

#currently_playing .item_info .show:hover,
#currently_playing .item_info .season:hover
{
  border-bottom: 1px solid #555;
  cursor: pointer;
}

#currently_playing .item_info .separator
{
  margin: 0 3px;
}

#currently_playing .controls
{
  margin: 0 auto;
  width: 80px;
}

#currently_playing .controls .play_pause,
#currently_playing .controls .stop
{
  background: #111 url(/static/images/player_sprite.png) no-repeat 11px 11px;
  border: 1px solid #555;
  cursor: pointer;
  float: left;
  height: 33px;
  text-indent: -9999px;
  width: 33px;

  .border-radius(20px);
}

#currently_playing .controls .stop
{
  background-position: 8px -28px;
  margin-right: 10px;
}

#currently_playing .controls .play_pause:hover,
#currently_playing .controls .stop:hover
{
  background-color: #333;
}

#currently_playing .progress
{
  float: right;
  font-size: 0.9em;
  height: 40px;
  position: relative;
  width: 400px;
}

#currently_playing .progress .current
{
  bottom: 8px;
  left: 0;
  position: absolute;
}

#currently_playing .progress .total
{
  bottom: 8px;
  right: 0;
  position: absolute;
}

#currently_playing .progress .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-top: 8px;
  width: 398px;
  .border-radius(3px);
}

#currently_playing .progress .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#currently_playing .synopsis
{
  display: none;
}

/*--- trakt ---*/

#trakt > .inner
{
  margin-top: -5px;
}

#trakt .overview
{
  color: #ccc;
}

#trakt .overview strong
{
  color: #fff;
}

#trakt h3
{
  color: #eee;
  font-weight: normal;
}

#trakt .shouts li
{
  font-size: 0.9em;
  line-height: 1.2em;
  margin-top: 10px;
  position: relative;
}

#trakt .shouts .avatar
{
  left: 0;
  position: absolute;
  top: 20px;
}

#trakt .shouts .shout
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-left: 25px;
  padding: 5px;

  .border-radius(4px);
}

#trakt .shouts li.me .shout
{
  background: url(/static/images/alpha/lightblue_30.png);
}

#trakt .shouts + #add_shout
{
  margin-top: 20px;
}

#trakt #add_shout h3
{
  margin-bottom: 10px;
}

#trakt #add_shout textarea
{
  background: url(/static/images/alpha/fff_20.png);
  border: none;
  color: #ccc;
  display: block;
  font-size: 0.9em;
  height: 55px;
  width: 100%;

  .border-radius(2px);
}

#trakt #add_shout .submit_wrapper.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat 210px 11px;
}

#trakt #add_shout .submit
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #222;
  float: right;
  font-size: 0.9em;
  margin-top: 5px;
  padding: 4px 12px;

  .border-radius(2px);
}

#trakt #add_shout .submit:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#trakt #add_shout .submit_wrapper p
{
  float: left;
  font-size: 0.9em;
  margin-top: 10px;
}

/*--- generic module ---*/

.module.generic > .inner
{
  color: #ccc;
  line-height: 1.3em;
  padding: 0 15px 15px;
}

.module.generic > .inner p
{
  margin-top: 5px;
}

.module.generic > .inner p strong
{
  color: #fff;
}

.module.generic > .inner p:first-child
{
  margin-top: 0;
}

/*--- SABnzbd+ ---*/

#sabnzbd
{
  position: relative;
}

#sabnzbd > .inner
{
  line-height: 1.3em;
  padding: 0 15px 15px;
}

#sabnzbd .speed
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  padding: 4px 8px 2px;
  position: absolute;
  right: 20px;
  top: 14px;

  .border-radius(4px);
}

#sabnzbd .bar
{
  border: 1px solid #777;
  height: 5px;
  margin: 17px 0 6px;

  .border-radius(3px);
}

#sabnzbd .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#sabnzbd .remaining
{
  float: left;
  font-size: 0.9em;
}

#sabnzbd .percentage_complete
{
  float: right;
  font-size: 0.9em;
  margin: 0;
}

/*--- media library ---*/

#library
{
  position: relative;
}

#library h2
{
  padding-right: 55px;
}

#library ul
{
  max-height: 196px;
  overflow: auto;
}

#library li,
#library .back
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  cursor: pointer;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 5px 15px;

  .border-radius(4px);
}

.f_settings_mode #library .back
{
  display: none;
}

#library li
{
  padding-right: 28px;
  position: relative;
}

#library li:hover,
#library .back:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#library li:first-child
{
  margin-top: 0;
}

#library li .xhrloading
{
  position: absolute;
  right: 5px;
  top: 6px;
}

#library .back
{
  color: #ccc;
  font-size: 1.2em;
  position: absolute;
  margin-top: 0;
  padding: 3px 15px;
  right: 5px;
  top: 12px;
}

#library .back.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat center center;
  text-indent: -9999px;
}

/*--- expand ---*/

.expand
{
  text-decoration: none;
}

/*--- view more ---*/

.view_older,
.view_newer
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  color: #ccc;
  display: block;
  float: left;
  font-size: 1.2em;
  margin-top: 5px;
  padding: 2px 14px;
  position: relative;
  text-align: center;

  .border-radius(4px);
}

.view_older
{
  float: right;
}

.view_older:hover,
.view_newer:hover
{
  background: url(/static/images/alpha/fff_20.png);
}


[feature/UX-233] Fix comments from the PR thread

/*!
* Jenkins Design Language CSS Theme
*
* Licensed under MIT
*/
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import "icons.less";

//
// Base font stuffs
// --------------------------------------------------

html {
    font-size: 62.5%; // Make 1rem == 10px
}

#root {
    font-size: 1.4rem;
}

body {
    text-rendering: optimizeSpeed;
    font-feature-settings: "kern" on, "liga" off;
    -moz-font-feature-settings: "kern" on, "liga" off;
    //TODO: Do we really want this for everything? -webkit-font-smoothing: antialiased;
}

//
// Some basics
// --------------------------------------------------

* {
    box-sizing: border-box;
}

// Default All headings to basically "bold and display:block"
h1, h2, h3, h4, h5 h6 {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

// Make h1 slightly bigger :)
h1 {
    font-size: 1.8rem;
    font-family: @font-family-nav;
    letter-spacing: 1.1px;
}

main {
    color: @text-color;
}

.label-danger {
    background-color: @brand-danger;
}

.label-warning {
    background-color: @brand-warning;
}

.label-info {
    background-color: @brand-info;
}

.label-success {
    background-color: @brand-success;
}

.label-primary {
    background-color: @brand-primary;
}

.btn-link {
    color: @link-color;
}

a {
    text-decoration: none;
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
a {
    color: @link-color;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:focus .list-group-item-text,
.list-group-item.active:hover .list-group-item-text {
    color: white;
}

a:hover {
    color: @link-hover-color;
    text-decoration: @link-hover-decoration;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus {
    background-color: @link-color;
}

.nav-pills > li.active > a:hover {
    background-color: @link-hover-color;
}

.progress-bar {
    background-color: @progress-bar-bg;
}

body {
    font-family: @font-family-base;
    background-color: @body-bg;
}

code, pre, kbd {
    font-family: @font-family-monospace;
}

//
// Buttons
// --------------------------------------------------

// Mixin for generating btn styles
.btn-styles(@btn-color; @btn-border; @btn-text) {

    display:inline-block;
    padding:0.5rem 1rem;
    font-family: @font-family-btn;

    border: solid 1px  @btn-border;
    border-radius:3px;

    text-decoration: none;

    background-color: @btn-color;
    color: @btn-text;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: @btn-color;
        border-color: darken(@btn-border, 12%);
        color: @btn-text;
        text-decoration:none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: darken(@btn-color, 12%);
        }
    }
}

// Apply the mixin to the buttons
.btn-default, .btn, button {
    .btn-styles(@btn-default-bg, @btn-default-border, @btn-default-color);
}

.btn-primary {
    .btn-styles(@btn-primary-bg, @btn-primary-border, @btn-primary-color);
}

.btn-success {
    .btn-styles(@btn-success-bg, @btn-success-border, @btn-success-color);
}

.btn-info {
    .btn-styles(@btn-info-bg, @btn-info-border, @btn-info-color);
}

.btn-warning {
    .btn-styles(@btn-warning-bg, @btn-warning-border, @btn-warning-color);
}

.btn-danger {
    .btn-styles(@btn-danger-bg, @btn-danger-border, @btn-danger-color);
}

.btn-ghost {
    .btn-styles(@btn-ghost-bg, @btn-ghost-border, @btn-ghost-color);
}

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
    background-color: darken(@dropdown-link-hover-bg, 5%);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    background-color: darken(@dropdown-link-active-bg, 5%);
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
    .navbar .navbar-nav .open .dropdown-menu > .active > a {
        &,
        &:hover,
        &:focus {
            color: #fff;
            #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
        }
    }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
    border: none;
}

// Mixin for generating new styles
.alert-styles(@color; @text-color; @border-color) {
    background-color: @color;
    color: @text-color;
    border-radius: 3px;
}

// Apply the mixin to the alerts
.alert-success {
    .alert-styles(@alert-success-bg, @alert-success-text, @alert-success-border);
}

.alert-info {
    .alert-styles(@alert-info-bg, @alert-info-text, @alert-info-border);
}

.alert-warning {
    .alert-styles(@alert-warning-bg, @alert-warning-text, @alert-warning-border);
}

.alert-danger {
    .alert-styles(@alert-danger-bg, @alert-danger-text, @alert-danger-border);
}

//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

// Mixin for generating new styles
.progress-bar-styles(@color) {
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar {
    .progress-bar-styles(@progress-bar-bg);
}

.progress-bar-success {
    .progress-bar-styles(@progress-bar-success-bg);
}

.progress-bar-info {
    .progress-bar-styles(@progress-bar-info-bg);
}

.progress-bar-warning {
    .progress-bar-styles(@progress-bar-warning-bg);
}

.progress-bar-danger {
    .progress-bar-styles(@progress-bar-danger-bg);
}

// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
    #gradient > .striped();
}

//
// List groups
// --------------------------------------------------

.list-group {
    border-radius: @border-radius-base;
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
    #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
    border-color: darken(@list-group-active-border, 7.5%);

    .badge {
        text-shadow: none;
    }
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
    background-color: @color;
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
    color: white;
    border: inherit;
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
    .panel-heading-styles(@panel-default-heading-bg);
}

.panel-primary > .panel-heading {
    .panel-heading-styles(@panel-primary-heading-bg);
}

.panel-success > .panel-heading {
    .panel-heading-styles(@panel-success-heading-bg);
}

.panel-info > .panel-heading {
    .panel-heading-styles(@panel-info-heading-bg);
}

.panel-warning > .panel-heading {
    .panel-heading-styles(@panel-warning-heading-bg);
}

.panel-danger > .panel-heading {
    .panel-heading-styles(@panel-danger-heading-bg);
}

// Fix all the hardcoded borders set in bootstrap.css
.panel-default {
    border-color: @panel-default-border;
}

.panel-primary {
    border-color: @panel-primary-border;
}

.panel-success {
    border-color: @panel-success-border;
}

.panel-info {
    border-color: @panel-info-border;
}

.panel-warning {
    border-color: @panel-warning-border;
}

.panel-danger {
    border-color: @panel-danger-border;
}

//
// Wells
// --------------------------------------------------

.well {
    #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
    border-color: darken(@well-bg, 10%);
    @shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    .box-shadow(@shadow);
}

//
// Tables
// --------------------------------------------------

table {
    width: 100%;
}

thead tr:last-child {
    border-bottom: solid 1px;
    th {
        padding-bottom: 1.5rem;
    }
}

tbody tr:first-child td {
    padding-top: 1rem;
}

th {
    font-family: @font-family-headings;
    font-weight: normal;
}

td, th {
    padding: 0.5em 0;
    text-align: left;
}

th:first-child,
td:first-child {
    padding-left: 1em;
}

//
// Code / Logs
// --------------------------------------------------

code {
    background-color: @pre-bg;
    color: @pre-color;
    font-family: @font-family-monospace;
    width: 100%;
    min-height: 12px;
    white-space: normal;
    border: 1px solid @pre-border-color;
    border-radius: 4px;
    position: relative;
    counter-reset: line-numbering;
    overflow-x: auto;
    font-size: 1.1rem;
}
code p:hover{
    background-color: @pre-color-hover;
}
code p {
  margin: 0;
}
code p::nth-line {
  color: yellow !important;
}
code a {
    margin: 0;
    padding: 0 15px 0 20px;
    word-wrap:break-word;
    display: inline;
    color: @pre-color;
}
code a:hover {
    color: @pre-color;
    text-decoration: none;
}
code p a::before {
    content: counter(line-numbering);
    counter-increment: line-numbering;
    float: left;
    width: 0;
    white-space: nowrap;
    padding-right: 1em;
    text-align: right;
    color: #fff;
    opacity: 0.33;
}
code.block {
    background-color: @pre-bg;
    color: @pre-color;
    display: block;
    padding: 0.5rem;
    white-space: pre;
    //max-height: @pre-scrollable-max-height;
    border: solid 1px darken(@pre-bg, 20%);;
}

code.inline {
    display: inline-block;
    padding: inherit;
    white-space: pre-wrap;
}

//
// Mono Icons
// --------------------------------------------------

.material-icons {
    color: @brand-primary;
}

.material-icons.selected {
    color: @brand-warning;
}

//
// Layout elements
// --------------------------------------------------

.content-width {
    min-width: 70rem;
    margin-left: 100px;
    margin-right: 100px;

    @media screen and (max-width: 1000px) {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.global-header {
    font-size: 1.8rem;
    background-color: @header-bg;
    color: white;
}

.global-header a {
    color: white;
}

.global-header nav {
    text-align: center;
    padding: 2rem 0;
}

.global-header nav a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: @font-family-nav;
    letter-spacing: 1.12px;
}

.global-header a:hover {
    color: black;
}

.sub-header {
    background-color: @sub-header-bg;
    color: @text-color;
    padding: 0;
}

.sub-header nav.page-title {
    .content-width;
    display: flex;
    height: 8.2rem;
    align-items: center;

    // Put some spacing between children
    > * {
        margin-right: 1rem;

        &:last-child {
            margin-right: 0;
        }
    }
}

.sub-header nav.page-tabs {
    .content-width;
}

.page-tabs a {
    color: @text-color;
    display: inline-block;
    padding: 0.6rem 1rem 0;
    height: 33px;
    font-family: @font-family-nav;
    text-decoration: none;

    // For transforming underline
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    margin-bottom: -3px;
}

.page-tabs a:before {
    // For transforming underline
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: @brand-primary;
    height: 3px;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    transform: translateY(3px);
    transition-property: transform;
}

.page-tabs a.selected:before,
.page-tabs:hover a.selected:hover:before,
.page-tabs a:hover:before {
    // For transforming underline
    transform: translateY(0);
}

.page-tabs:hover a.selected:before {
    // For transforming underline
    transform: translateY(3px);
}

main article {
    .content-width;
    padding: 1rem 0;
}

.container-fluid {
    padding: 0;
}

footer {
    text-align: center;
    margin: 1em;
}

// Modal css
.overlayStyles {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zIndex: 99;
    background-color: rgba(0,0,0,0.3);
}

.dialog {
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.dialog .header {
    padding: 25px 20px 25px 50px;
    background-color: @header-bg;
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    overflow-y: auto;
    max-height: 20%;
    min-height: 5%;
}

.dialog .content {
    background-color: @modal-content-bg;
    color: #000;
    overflow-y: auto;
    max-height: 90%;
    min-height: 75%;
    padding: 25px 20px 25px 50px;
}

.header .title {
    margin-top: 0
}

.header .closeButton {
    cursor: pointer;
    position: absolute;
    font-size: 3em;
    color: #ffffff;
    right: 20px;
    top: 5px
}
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
circle.success {
    fill: @brand-success;
}
circle.failure {
    fill: @brand-danger;
}

/*!
* Jenkins Design Language CSS Theme
*
* Licensed under MIT
*/
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import "icons.less";

//
// Base font stuffs
// --------------------------------------------------

html {
    font-size: 62.5%; // Make 1rem == 10px
}

#root {
    font-size: 1.4rem;
}

body {
    text-rendering: optimizeSpeed;
    font-feature-settings: "kern" on, "liga" off;
    -moz-font-feature-settings: "kern" on, "liga" off;
    //TODO: Do we really want this for everything? -webkit-font-smoothing: antialiased;
}

//
// Some basics
// --------------------------------------------------

* {
    box-sizing: border-box;
}

// Default All headings to basically "bold and display:block"
h1, h2, h3, h4, h5 h6 {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

// Make h1 slightly bigger :)
h1 {
    font-size: 1.8rem;
    font-family: @font-family-nav;
    letter-spacing: 1.1px;
}

main {
    color: @text-color;
}

.label-danger {
    background-color: @brand-danger;
}

.label-warning {
    background-color: @brand-warning;
}

.label-info {
    background-color: @brand-info;
}

.label-success {
    background-color: @brand-success;
}

.label-primary {
    background-color: @brand-primary;
}

.btn-link {
    color: @link-color;
}

a {
    text-decoration: none;
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
a {
    color: @link-color;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:focus .list-group-item-text,
.list-group-item.active:hover .list-group-item-text {
    color: white;
}

a:hover {
    color: @link-hover-color;
    text-decoration: @link-hover-decoration;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus {
    background-color: @link-color;
}

.nav-pills > li.active > a:hover {
    background-color: @link-hover-color;
}

.progress-bar {
    background-color: @progress-bar-bg;
}

body {
    font-family: @font-family-base;
    background-color: @body-bg;
}

code, pre, kbd {
    font-family: @font-family-monospace;
}

//
// Buttons
// --------------------------------------------------

// Mixin for generating btn styles
.btn-styles(@btn-color; @btn-border; @btn-text) {

    display:inline-block;
    padding:0.5rem 1rem;
    font-family: @font-family-btn;

    border: solid 1px  @btn-border;
    border-radius:3px;

    text-decoration: none;

    background-color: @btn-color;
    color: @btn-text;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: @btn-color;
        border-color: darken(@btn-border, 12%);
        color: @btn-text;
        text-decoration:none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: darken(@btn-color, 12%);
        }
    }
}

// Apply the mixin to the buttons
.btn-default, .btn, button {
    .btn-styles(@btn-default-bg, @btn-default-border, @btn-default-color);
}

.btn-primary {
    .btn-styles(@btn-primary-bg, @btn-primary-border, @btn-primary-color);
}

.btn-success {
    .btn-styles(@btn-success-bg, @btn-success-border, @btn-success-color);
}

.btn-info {
    .btn-styles(@btn-info-bg, @btn-info-border, @btn-info-color);
}

.btn-warning {
    .btn-styles(@btn-warning-bg, @btn-warning-border, @btn-warning-color);
}

.btn-danger {
    .btn-styles(@btn-danger-bg, @btn-danger-border, @btn-danger-color);
}

.btn-ghost {
    .btn-styles(@btn-ghost-bg, @btn-ghost-border, @btn-ghost-color);
}

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
    background-color: darken(@dropdown-link-hover-bg, 5%);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    background-color: darken(@dropdown-link-active-bg, 5%);
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
    .navbar .navbar-nav .open .dropdown-menu > .active > a {
        &,
        &:hover,
        &:focus {
            color: #fff;
            #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
        }
    }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
    border: none;
}

// Mixin for generating new styles
.alert-styles(@color; @text-color; @border-color) {
    background-color: @color;
    color: @text-color;
    border-radius: 3px;
}

// Apply the mixin to the alerts
.alert-success {
    .alert-styles(@alert-success-bg, @alert-success-text, @alert-success-border);
}

.alert-info {
    .alert-styles(@alert-info-bg, @alert-info-text, @alert-info-border);
}

.alert-warning {
    .alert-styles(@alert-warning-bg, @alert-warning-text, @alert-warning-border);
}

.alert-danger {
    .alert-styles(@alert-danger-bg, @alert-danger-text, @alert-danger-border);
}

//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

// Mixin for generating new styles
.progress-bar-styles(@color) {
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar {
    .progress-bar-styles(@progress-bar-bg);
}

.progress-bar-success {
    .progress-bar-styles(@progress-bar-success-bg);
}

.progress-bar-info {
    .progress-bar-styles(@progress-bar-info-bg);
}

.progress-bar-warning {
    .progress-bar-styles(@progress-bar-warning-bg);
}

.progress-bar-danger {
    .progress-bar-styles(@progress-bar-danger-bg);
}

// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
    #gradient > .striped();
}

//
// List groups
// --------------------------------------------------

.list-group {
    border-radius: @border-radius-base;
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
    #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
    border-color: darken(@list-group-active-border, 7.5%);

    .badge {
        text-shadow: none;
    }
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
    background-color: @color;
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
    color: white;
    border: inherit;
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
    .panel-heading-styles(@panel-default-heading-bg);
}

.panel-primary > .panel-heading {
    .panel-heading-styles(@panel-primary-heading-bg);
}

.panel-success > .panel-heading {
    .panel-heading-styles(@panel-success-heading-bg);
}

.panel-info > .panel-heading {
    .panel-heading-styles(@panel-info-heading-bg);
}

.panel-warning > .panel-heading {
    .panel-heading-styles(@panel-warning-heading-bg);
}

.panel-danger > .panel-heading {
    .panel-heading-styles(@panel-danger-heading-bg);
}

// Fix all the hardcoded borders set in bootstrap.css
.panel-default {
    border-color: @panel-default-border;
}

.panel-primary {
    border-color: @panel-primary-border;
}

.panel-success {
    border-color: @panel-success-border;
}

.panel-info {
    border-color: @panel-info-border;
}

.panel-warning {
    border-color: @panel-warning-border;
}

.panel-danger {
    border-color: @panel-danger-border;
}

//
// Wells
// --------------------------------------------------

.well {
    #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
    border-color: darken(@well-bg, 10%);
    @shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    .box-shadow(@shadow);
}

//
// Tables
// --------------------------------------------------

table {
    width: 100%;
}

thead tr:last-child {
    border-bottom: solid 1px;
    th {
        padding-bottom: 1.5rem;
    }
}

tbody tr:first-child td {
    padding-top: 1rem;
}

th {
    font-family: @font-family-headings;
    font-weight: normal;
}

td, th {
    padding: 0.5em 0;
    text-align: left;
}

th:first-child,
td:first-child {
    padding-left: 1em;
}

//
// Code / Logs
// --------------------------------------------------

code {
    background-color: @pre-bg;
    color: @pre-color;
    font-family: @font-family-monospace;
    width: 100%;
    min-height: 12px;
    white-space: normal;
    border: 1px solid @pre-border-color;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    counter-reset: line-numbering;
    overflow-x: auto;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased; // Good for the light on dark text
}
code p:hover{
    background-color: @pre-color-hover;
}
code p {
  margin: 0;
}
code p::nth-line {
  color: yellow !important;
}
code a {
    margin: 0;
    padding: 0 15px 0 5px;
    word-wrap:break-word;
    display: inline;
    color: @pre-color;
}
code a:hover {
    color: @pre-color;
    text-decoration: none;
}
code p a::before {
    content: counter(line-numbering);
    counter-increment: line-numbering;
    padding-right: 1em;
    text-align: right;
    color: #fff;
    opacity: 0.33;
}
code.block {
    background-color: @pre-bg;
    color: @pre-color;
    display: block;
    padding: 0.5rem;
    white-space: pre;
    //max-height: @pre-scrollable-max-height;
    border: solid 1px darken(@pre-bg, 20%);;
}

code.inline {
    display: inline-block;
    padding: inherit;
    white-space: pre-wrap;
}

//
// Mono Icons
// --------------------------------------------------

.material-icons {
    color: @brand-primary;
}

.material-icons.selected {
    color: @brand-warning;
}

//
// Layout elements
// --------------------------------------------------

.content-width {
    min-width: 70rem;
    margin-left: 100px;
    margin-right: 100px;

    @media screen and (max-width: 1000px) {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.global-header {
    font-size: 1.8rem;
    background-color: @header-bg;
    color: white;
}

.global-header a {
    color: white;
}

.global-header nav {
    text-align: center;
    padding: 2rem 0;
}

.global-header nav a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: @font-family-nav;
    letter-spacing: 1.12px;
}

.global-header a:hover {
    color: black;
}

.sub-header {
    background-color: @sub-header-bg;
    color: @text-color;
    padding: 0;
}

.sub-header nav.page-title {
    .content-width;
    display: flex;
    height: 8.2rem;
    align-items: center;

    // Put some spacing between children
    > * {
        margin-right: 1rem;

        &:last-child {
            margin-right: 0;
        }
    }
}

.sub-header nav.page-tabs {
    .content-width;
}

.page-tabs a {
    color: @text-color;
    display: inline-block;
    padding: 0.6rem 1rem 0;
    height: 33px;
    font-family: @font-family-nav;
    text-decoration: none;

    // For transforming underline
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    margin-bottom: -3px;
}

.page-tabs a:before {
    // For transforming underline
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: @brand-primary;
    height: 3px;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    transform: translateY(3px);
    transition-property: transform;
}

.page-tabs a.selected:before,
.page-tabs:hover a.selected:hover:before,
.page-tabs a:hover:before {
    // For transforming underline
    transform: translateY(0);
}

.page-tabs:hover a.selected:before {
    // For transforming underline
    transform: translateY(3px);
}

main article {
    .content-width;
    padding: 1rem 0;
}

.container-fluid {
    padding: 0;
}

footer {
    text-align: center;
    margin: 1em;
}

// Modal css
.overlayStyles {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zIndex: 99;
    background-color: rgba(0,0,0,0.3);
}

.dialog {
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.dialog .header {
    padding: 25px 20px 25px 50px;
    background-color: @header-bg;
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    overflow-y: auto;
    max-height: 20%;
    min-height: 5%;
}

.dialog .content {
    background-color: @modal-content-bg;
    color: #000;
    overflow-y: auto;
    max-height: 90%;
    min-height: 75%;
    padding: 25px 20px 25px 50px;
}

.header .title {
    margin-top: 0
}

.header .closeButton {
    cursor: pointer;
    position: absolute;
    font-size: 3em;
    color: #ffffff;
    right: 20px;
    top: 5px
}
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
circle.success {
    fill: @brand-success;
}
circle.failure {
    fill: @brand-danger;
}


Improve heading alignment on front page.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/addrummond/nodeibexfarm.git/'


fixed .LESS errors.. broken comment causing issue.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/DellGDC/dell-ui-components.git/'


Fix modal header margins

Fix modal header margins

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/ifduyue/sentry.git/'


move caret

move caret

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/quillcontent/qboot.git/'


added the half-gutter class

added the half-gutter class

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


attempt to fix issue with white on white text in certain contexts

fatal: unable to access 'https://github.com/e-jigsaw/seti-ui.git/': The requested URL returned error: 403


Cleanup navbar styles

Cleanup navbar styles

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/a25kk/lra.git/'


新增默认样式文件

新增默认样式文件

@prefixCls:cue;
@maskColor: rgba(0,0,0,.5);

@loaderAfter:cue-loader-after;
@loaderBefore:cue-loader-before;
@colors1: rgba(252, 64, 64, 0.8);
@colors2: rgba(152, 200, 0, 0.8);
@colors3: rgba(48, 180, 228, 0.8);
@colors4: rgba(255, 185, 46, 0.8);
@size: 2.8em;
@thickness: 0.5em;

@lat: (@size - @thickness) / 2;
@offset: @lat - @thickness;

.fixed(){
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.contentFontSize(){
  font-size: 28px; /*px*/
}
.in(@time:.5s){
  animation: @time ease-out backwards;
}
.out(@time:.5s){
  animation: @time ease-in forwards;
}
.@{prefixCls}{
  &-box{
    .fixed();
    z-index: 999;
    pointer-events: none;
  }
  &-mask{
    background:@maskColor;
    pointer-events: auto;
  }
  &-toast-container{
    .fixed();
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-toast-content{
    padding: 15px 25px;
    background: @maskColor;
    color:#fff;
    .contentFontSize();
    border-radius: 6px; /*no*/
  }
  &-bouncein{
    .in();
    animation-name: bouncein;
  }
  &-bounceout{
    .out();
    animation-name: bounceout;
  }
  &-loader {
    position: relative;
    width: @size;
    height: @size;
    transform: rotate(165deg);
    margin: .4em auto .6em;
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @thickness;
      height: @thickness;
      border-radius: @thickness / 2;
      transform: translate(-50%, -50%);
    }
    &:before {
      animation: @loaderBefore 2s infinite;
    }
    &:after {
      animation: @loaderAfter 2s infinite;
    }
  }
}
@keyframes @loaderBefore {
  0% {
    width: @thickness;
    box-shadow: @lat (-@offset) @colors1,
      (-@lat) @offset @colors3;
  }
  35% {
    width: @size;
    box-shadow: 0 (-@offset) @colors1,
    0   @offset  @colors3;
  }
  70% {
    width: @thickness;
    box-shadow: (-@lat) (-@offset) @colors1,
    @lat @offset @colors3;
  }
  100% {
    box-shadow:@lat (-@offset)@colors1,
      (-@lat) @offset @colors3;
  }
}

@keyframes @loaderAfter {
  0% {
    height: @thickness;
    box-shadow:@offset @lat @colors2,
      (-@offset) (-@lat) @colors4;
  }
  35% {
    height: @size;
    box-shadow:
            @offset  0 @colors2,
              (-@offset) 0 @colors4;
  }
  70% {
    height: @thickness;
    box-shadow:
            @offset (-@lat) @colors2,
              (-@offset) @lat @colors4;
  }
  100% {
    box-shadow:
            @offset @lat @colors2,
              (-@offset) (-@lat) @colors4;
  }
}
@keyframes bouncein {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}
@keyframes bounceout {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: scale(0.3);
  }
}

error: pathspec 'src/index.less' did not match any file(s) known to git


triangle modify

triangle modify

fatal: unable to access 'https://github.com/Eomerx/blank-less.git/': The requested URL returned error: 403


many important changes

many important changes


CAL-224: fixed the previous commit

CAL-224: fixed the previous commit

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


[IMP] web: Backport of useful odoo variables

fatal: unable to access 'https://github.com/ygol/odoo.git/': The requested URL returned error: 403


Oops.

Oops.

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Temporary implementation of unobtrusive scrollbars.
   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
   Longer-term, we'll need to implement custom scrollbars. */

.platform-mac .quiet-scrollbars,
.platform-win .quiet-scrollbars,
.platform-linux .quiet-scrollbars,
.dark.platform-mac .quiet-scrollbars,
.dark.platform-win .quiet-scrollbars,
.dark.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: none;
        border: none;
    }

    /* This looks like a dupe, but without it the thumb doesn't fade in
     * properly, probably due to flakiness in how these styles are handled
     * in the build of WebKit that's in CEF.
     */
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
        border: 2px solid transparent;
    }

    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track:vertical {
        margin: 0 0 8px 0;
    }

    ::-webkit-scrollbar-track:horizontal {
        margin: 0 8px 0 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
    }
}

.platform-win {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: @win-scrollbar-track;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
    }

    ::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }
}

// Dark Scrollbars

.dark {
    /* Custom scrollbar colors */
    &.platform-win {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: rgb(15, 15, 15);
        }

        // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

        ::-webkit-scrollbar {
            background-color: rgb(15, 15, 15);
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:focus {
            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
        }
        ::-webkit-scrollbar-thumb:active {
            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
        }
    }

    &.platform-linux {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: #1d1f21;
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
        }
    }
}

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Temporary implementation of unobtrusive scrollbars.
   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
   Longer-term, we'll need to implement custom scrollbars. */

.platform-mac .quiet-scrollbars,
.platform-win .quiet-scrollbars,
.platform-linux .quiet-scrollbars,
.dark.platform-mac .quiet-scrollbars,
.dark.platform-win .quiet-scrollbars,
.dark.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: none;
        border: none;
    }

    /* This looks like a dupe, but without it the thumb doesn't fade in
     * properly, probably due to flakiness in how these styles are handled
     * in the build of WebKit that's in CEF.
     */
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
        border: 2px solid transparent;
    }

    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track:vertical {
        margin: 0 0 8px 0;
    }

    ::-webkit-scrollbar-track:horizontal {
        margin: 0 8px 0 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
    }
}

.platform-win {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: @win-scrollbar-track;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
    }

    ::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }
}

// Dark Scrollbars

.dark {
    /* Custom scrollbar colors */
    &.platform-mac {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: rgb(15, 15, 15);
        }

        // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

        ::-webkit-scrollbar {
            background-color: rgb(15, 15, 15);
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:focus {
            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
        }
        ::-webkit-scrollbar-thumb:active {
            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
        }
    }

    &.platform-linux {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: #1d1f21;
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
        }
    }
}


Fix bug

Fix bug

fatal: unable to access 'https://github.com/Tosuke/Misskey-Web.git/': The requested URL returned error: 403


Paragraph and heading font-sizes explicity set in pixels for gravity forms

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/putterschool/styleguide.git/'


minor fix

minor fix

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/essenlive/bosch.git/'


[INTERNAL] sap.m.ObjectNumber: Belize theme applied

Change-Id: If4412d276a8b02f827d6919471d1cb3ebeaa5bde

/* =================================== */
/* CSS for control sap.m/ObjectNumber  */
/* Belize theme                        */
/* =================================== */

.sapMObjectNumberText,
.sapMObjectNumberUnit {
	text-shadow: @sapUiShadowText;
}

error: pathspec 'src/themelib_sap_belize/src/sap/m/themes/sap_belize_plus/ObjectNumber.less' did not match any file(s) known to git


[限购]修改购物车限购tag图片

[限购]修改购物车限购tag图片

(cherry picked from commit 3c20484)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/psychokiller666/heishi.git/'