karma/assets/static/base.css

* {
    font-size: 18px;
}

body.dark {
  background-color: #2c3e50;
  padding-top: 58px;
}

/* unsee is pretty useless with tiny width, require at least 1180px */
@media (max-width: 1180px) {
    body {min-width: 1180px;}
}

/* flatly default height is 60x instead of 50px, leaving 10px space below, override it*/
.navbar-brand {
    padding-top: 15px;
    padding-bottom: 15px;
    min-width: 90px;
}
.navbar-nav > li > a, .navbar-brand {
    height: 50px;
}

/* set minimum width and height for navbar */
.navbar {
    min-height:50px;
    min-width: 1150px;
}
.navbar > .container {
    min-width: 1180px;
}

#navbar > form.navbar-form.navbar-nav {
    padding-right: 0;
    padding-left: 0;
}

.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* add some spacing in menu dropdown */
.dropdown-switch {
    margin-left: 10px;
    margin-right: 10px;
}


/* we have a popover on header, indicate that with cursor */
.navbar-header {
    cursor: help;
}

/* we use big popver, default width limit is too low */
.popover {
    max-width: 100%;
}

/* we have wide tooltips for some alert names */
.tooltip-inner {
    max-width: 100%;
}

/* custom badge for popover */
.breakdown-badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #2c3e50;
    border-radius: 10px;
}

/* fullscreen flash div */
.flash {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(243, 156, 18, 0.9);
}

/* space between labels */
.label-list {
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 3px;
}

a.label.label-age {
    cursor: help;
}

span.label-ts-span {
    font-size: inherit;
}

/* used in alert group trim summary for adding label counters */
.label-trim-group {
    display: inline-block;
    margin-bottom: 2px;
    white-space: nowrap;
}
.label-trim-tag {
    padding-left: 4px;
    padding-right: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.label-trim-count {
    margin-left: -3px;
    padding-left: 3px;
    padding-right: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[data-label-type="filter"] {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-help {
  cursor: help;
}

/* make filter input take all the space it can */
div.filterbar {
    width: 905px;
}
div.filterbar > .input-group-addon.input-sm {
    width: 10px;
}

/* fix padding with flatly */
div.bootstrap-tagsinput {
    width: 100%;
    padding-top: 3px;
    padding-bottom: 6px;
    line-height: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* flatly makes focused input border black, which looks ugly with dark navbar
   revert to default color for focused input */
input#filter:focus {
    border: 2px solid #dce4ec;
}

/* set min-width on real input so it doesn't need too much space when it's empty */
div.bootstrap-tagsinput > .twitter-typeahead > input.tt-input {
  min-width: 10px;
}

#filter-help {
    cursor: help;
}
#help-labels > code {
    white-space: nowrap;
}

/* adjust padding for counter badge in tags input */
.tag-badge {
    margin-right: 3px;
    margin-top: -2px;
}
.tag {
    padding-left: 2px;
}

/* menus uses links with icons instead of buttons, fix focus color
   so the link doesn't stay colored after clicking */
#history:focus,
#help:focus,
#settings:focus,
#refresh:focus {
    color: #fff;
}

#history:hover,
#help:hover,
#settings:hover,
#refresh:hover {
    color: #18bc9c;
}

/* remove default 15px padding from container-fluid for incident grid */
#container {
    padding-left: 5px;
    padding-right: 5px;
}

/* but errors should have additional margin */
#errors {
    margin-left: 10px;
    margin-right: 10px;
}

#instance-errors > .alert {
  padding: 8px;
  margin-bottom: 6px;
}

.panel-title {
    overflow: hidden;
}

.panel-title > .label {
  font-size: 90%;
  line-height: 2em;
}
.panel-heading > .badge {
    margin-left: 2px;
    font-size: 90%;
    margin-top: 5px;
}

/* make silence description smaller */
.silence-comment {
    font-size: smaller;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
blockquote.silence-comment {
  border-left-color: #18bc9c;
  border-radius: 4px;
}
.silence-comment-title {
  margin-top: 6px;
  display: block;
}
.silence-block {
  margin-bottom: 2px;
  padding-left: 0;
  padding-right: 2px;
  padding-top: 0;
  padding-bottom: 0;
}
.silence-block.well {
  border: 0;
}

/* button is an icon inside a well, it gets white color
   make it dark gray by default, so it's visible but doesn't stand out
  and black on hover */
button.silence-delete {
  color: inherit;
  margin-top: 2px;
}
button.silence-delete:hover,
button.silence-delete:focus {
  color: #2c3e50;
}

.incident .panel {
    margin-bottom: 0;
}

.incident {
    padding: 5px;
}

.incident>.panel>.panel-heading {
    padding-top: 4px;
    padding-bottom: 4px;
}

.incident>.panel>.panel-body {
    padding: 6px;
    overflow: hidden;
}

/* incident indicator is a small circle marking most recent alerts */
.incident-indicator-success {
    background-color: #18bc9c;
}
.incident-indicator-danger {
    background-color: #e74c3c;
}
.incident-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

.grid-sizer, .incident {  width: 100%;  }
@media screen and (min-width: 700px) and (max-width: 1399px) {
  .grid-sizer, .incident { width: 50%; }
}
@media screen and (min-width: 1400px) and (max-width: 2099px) {
  .grid-sizer, .incident { width: 33.333%; }
}
@media screen and (min-width: 2100px) and (max-width: 2799px) {
  .grid-sizer, .incident { width: 25%; }
}
@media screen and (min-width: 2800px) and (max-width: 3499px) {
  .grid-sizer, .incident { width: 20%; }
}
@media screen and (min-width: 3500px) and (max-width: 4199px) {
  .grid-sizer, .incident { width: 16.666%; }
}
@media screen and (min-width: 4200px) and (max-width: 4899px) {
  .grid-sizer, .incident { width: 14.285%; }
}
@media screen and (min-width: 4900px) and (max-width: 5599px) {
  .grid-sizer, .incident { width: 14.285%; }
}
@media screen and (min-width: 5600px) {
  .grid-sizer, .incident { width: 12.5%; }
}

.incident-group {
    word-wrap: break-word;
}

.incident-group-separator {
    border-bottom: 1px solid #bbb;
}

.annotation-well {
    margin-bottom: 2px;
    padding: 4px;
    background-color: transparent;
}
.annotation-well > .fa {
    cursor: help;
}

/* move the spinner up so it's in the middle of navbar */
#spinner {
    margin-top: -9px;
}
/* change spinner color to text-warning when JSON is loaded and it's being parsed */
#spinner > .spinner-success {
    background-color: #f39c12;
}
/* and to text-danger when rendering alerts fails */
#spinner > .spinner-error {
    background-color: #e74c3c;
}

/* tweak nprogress look for flatly */
#nprogress .nprogress-flatly.bar {
    background: #f39c12;
}
#nprogress .nprogress-flatly.peg {
    box-shadow: 0 0 10px #f39c12, 0 0 5px #f39c12;
}


/* tweaks for help page tables */
table.table.help {
    margin-bottom: 42px;
}
table.table.help > tbody > tr > td,
table.table.help > tbody > tr > th {
    border-top: 1px solid #ddd;
}
table.table.help > thead > tr > th {
    white-space: nowrap;
}
table.table.examples > tbody > tr > td {
    padding: 6px 3px;
}
table.table.examples > tbody > tr td:first-child {
    width: 1%;
}


/* margins between bottom action buttons in settings menu */
.btn-dropdown-action {
    margin-left: 10px;
    margin-right: 10px;
}

.modal-body>table.table>tbody>tr>td.modal-row-filters {
  word-break: break-all;
}
.modal-body>table.table>tbody>tr>td.modal-row-filters,
.modal-body>table.table>tbody>tr>td.modal-row-actions  {
  vertical-align: middle;
}

.panel-heading > span.alert-group-link {
  margin-left: -8px;
}
span.alert-group-link > a {
  color: #fff;
  opacity: 0;
}

.silence-result-icon {
  font-size: 12em;
}

.silence-label-select {
  background-color: inherit;
}

.bootstrap-select > button {
  padding: 0;
}
.bootstrap-select > .dropdown-toggle {
  padding-right: 6px;
}
table.silence-label-selects {
  width: auto;
}
table.table.silence-label-selects > tbody > tr > td {
  padding-left: 0;
  padding-right: 4px;
  padding-top: 0;
  padding-bottom: 0;
}
.silence-label-select > .bs-caret {
  margin-left: -6px;
}
.silence-label-select:hover, .silence-label-picker:hover,
.silence-label-select:active, .silence-label-picker:active,
.silence-label-select:focus, .silence-label-picker:focus {
  color: inherit;
}
.select-label-badge {
  cursor: pointer;
}
.bootstrap-select > .dropdown-menu > .dropdown-menu > li > a > .label {
  margin-right: 20px;
}

.datetime-picker > .bootstrap-datetimepicker-widget > .row > .datepicker {
  padding-top: 10px;
  padding-bottom: 20px;
}

.silence-duration-table {
  margin-left: auto;
  margin-right: auto;
}
.silence-duration-text {
  font-size: 2em;
}
.silence-duration-btn:hover {
  color: #fff;
  background: #eee;
}
.silence-duration-btn:focus {
  color: #18bc9c;
}
.silence-duration-btn:focus:hover {
  color: #fff;
}
.silence-duration-btn > i {
  pointer-events: none;
}
table.silence-duration-table > tbody > tr > td.silence-separator {
  width: 10px;
}
table.silence-duration-table > tbody > tr > td.silence-duration-label {
  padding-left: 0;
  vertical-align: bottom;
  line-height: 2em;
}
#silenceJSON {
  margin-top: 6px;
}

a[aria-expanded=true] .fa-chevron-right {
   display: none;
}
a[aria-expanded=false] .fa-chevron-down {
   display: none;
}

/* adjust size and padding to look like bootstrap button but without all background tweaks */
.icon-as-button {
  text-align: center;
  vertical-align: middle;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.42857143;
  display: inline-block;
}

.alert-static-elements {
  margin-bottom: 4px;
}

li.history-menu > a.history-menu-item {
  padding-left: 10px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 6px;
  max-width: 600px;
  overflow: hidden;
}