runbot/runbot_merge/static/scss/runbot_merge.scss

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666666;
}
body {
  color: inherit;
  font-family: inherit;
}
h1, h2, h3, h4, h5, h6{
  color: inherit;
  margin-top: 0.66em !important;
  margin-bottom: 0.33em !important;
}
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-gray-lighter,
.table-success, .table-info, .table-warning, .table-danger {
  color: inherit;
}
.dropdown-item, .dropdown-menu, .dropdown-menu a {
  color: inherit;
}

// FIXME: move these over to the primary variables or some shit, but bg-info is completely fucked
$mergebot-colors: ("success": #dff0d8, "danger": #f2dede, "warning": #fcf8e3, "info": #d9edf7);
@each $category, $color in $mergebot-colors {
  .bg-#{$category} {
    background-color: $color !important;
  }
  .table-#{$category} {
    --table-bg: #{$color};
    --table-accent-bg: transparent;
    &.table-active {
      // TODO: make that a runtime operation
      --table-bg: #{scale-color($color, $lightness: -5%)};
    }
  }
}
.alert-primary {
  background-color: #d7eaeb !important;
}
.bg-unmerged {
  background-color: #dcefe8 !important
}

.list-inline {
  margin-bottom: 10px;
}
.list-inline > li {
  padding: 0 5px;
  margin-right: 0;
  // TODO: find better way to do this
  display: inline-block;
}

.btn {
  user-select: text;
}

// mergebot layouting
.stagings {
  display: flex;
  align-items: stretch;

  > li {
    flex: 1;
    // prevent content-based autosizing otherwise that's flex' starting point
    width: 0;

    padding: 0.1em 0.1em 0.1em 0.5em;

    &:not(:last-child) {
      border-right: 1px solid lightgray;
    }
  }
  .batch {
    // cut off branch names if they can't be line-wrapped and would break the
    // layout, works with flex to force all columns to be at the same size
    overflow: hidden;
    text-overflow: ellipsis;

    &:not(:last-child) {
      border-bottom: 1px solid lightgray;
    }
  }

  .batch a:not(:last-of-type) a:after {
    content: ",";
  }

  button.dropdown-toggle {
    text-align: left;
    white-space: wrap;
  }
}
.pr-listing > * { display: inline-block; }
.pr-awaiting { opacity: 0.8; }
.pr-blocked { opacity: 0.6; }
.pr-failed { opacity: 0.9; }

ul.todo {
  list-style-type: '☐ ';
  > li.ok {
    //@extend .alert-success;
    list-style-type: '☑ ';
  }
  > li.fail {
    @extend .alert-danger;
    list-style-type: '☒ ';
  }
}

dl.runbot-merge-fields {
  @extend .row;
  > dt {
    @extend .col-sm-2;
  }
  > dd {
    @extend .col-sm-10;
  }
}

.staging-statuses {
  cursor: wait;
}

/* forwardport */
.outstanding-partners > * {
  @extend .pt-1;
  // because there's a trailing space which is annoying to remove, which plays
  // the role of padding-right
  @extend .ps-1;
  @extend .text-nowrap;
  // works better for the left edge of the *box*
  @extend .border-start;
}

// batches sequence table in PR dashboard: mostly uses (customised) bootstrap
// but some of the style is bespoke because inline styles don't work well with
// CSP
.closed {
  text-decoration: line-through;
}
tr.inactive {
  opacity: 0.5;
}
td.detached {
  border-top: 2px solid map-get($theme-colors, "danger");
}