Fix crumb padding

Fix crumb padding

/**
* Group Detail
* ============================================================================
*/

.group-detail {
  position: relative;
  margin: 0 0 20px;
  border-bottom: 1px solid @trim;
  clear: both;

  h3 {
    color: @gray-darkest;
    font-size: 22px;
    margin: 0 0 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;

    em {
      font-style: normal;
    }

  }

  .short-id {
    display: inline;
    font-weight: bold;
    font-size: 90%;
    border-right: 1px solid @trim;
    padding-right: 8px;
    margin-right: 8px;
    color: @gray;

    div {
      display: inline;
    }
  }

  .event-message, .event-meta {
    line-height: 1.2;
  }

  .error-level,
  .event-type {
    padding: 0;
    border-radius: 2px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 3px;
    .square(13px);
    text-indent: -9999em;
    display: inline-block;
    border-radius: 15px;
  }

  .event-meta {
    font-size: 80%;
    margin-top: 6px;
  }

  .event-annotation {
    display: inline-block;
    margin: 0 0 5px 9px;
    font-size: 13px;
    line-height: 1;
    border-left: 1px solid lighten(@trim, 6);
    padding-left: 9px;
    height: 13px;

    a {
      color: lighten(@gray, 12);

      &:hover {
        color: @gray;
      }
    }
  }

  .count span {
    font-size: 24px;
    display: block;
    line-height: 1.2;
  }

  .is-assigned {
    clear: both;
    text-align: right;
    font-size: 14px;
    padding-top: 7px;
  }

  .assigned-to {
    text-align: right;
    position: relative;

    .btn-group {
      float: right;
    }

  }

  .meta {
    margin: 0 0 15px;
    color: #949ea4;
  }

  .group-actions {
    margin-top: 15px;

    .btn-group {
      margin-right: 5px;
    }

    .more .icon-arrow-down {
      margin-left: 5px;
    }

    .group-resolve .icon-checkmark {
      font-size: 13px;
    }

    .group-resolve.active {
      background: @green;
      color: #fff;
      border-color: @green-dark;
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .group-bookmark .icon-star-solid {
      position: relative;
      top: 1px;
      margin-left: -1px;
      margin-right: -1px;
    }

    .group-bookmark.active {
      background: @yellow-orange;
      color: #fff;
      border-color: darken(@yellow-orange, 15);
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .group-remove:hover {
      color: #fff;
      background: @red;
      border-color: @red-dark;
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .clearfix;

    .id-label {
      background: #fff;
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .resolve-dropdown {
    .group-resolve {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }

    .dropdown-menu {
      width: 240px;
      top: 28px;
      left: -7px;

      li a {
        white-space: normal;
        padding: 3px 12px;
      }
    }
  }

  .severity {
    display: inline-block;
    position: relative;
    top: -7px;
    padding: 0 10px;
  }

  .nav-tabs {
    margin-top: 25px;
    margin-bottom: 0;
  }

  // loading indicator for the group needs extra fixing up.
  .assignee-selector {
    display: inline-block;

    .loading {
      margin: 0;

      .loading-indicator {
        left: auto!important;
        right: 0!important;
      }
    }
  }
}

.seen-by {
  margin-top: 15px;
  float: right;

  ul {
    .list-unstyled;

    li:first-child {
      background: @white-darker;
      color: darken(@gray, 10);
      border-radius: 2px;
      .square(28px);
      line-height: 26px;
      text-align: center;

      .icon-eye {
        opacity: .4;
        position: relative;
        top: 2px;
      }
    }

    li {
      float: left;
      margin-left: 5px;

      .avatar {
        display: inline-block;
        position: relative;
        .square(28px);
      }
    }
  }
}

.group-notifications, .group-privacy {
  float: left;
  margin: 22px 0 0 22px;
  font-size: 14px;

  a {
    color: @gray-dark;
    &:hover {
      color: @gray-darker;
    }
  }

  .icon {
    color: @gray-lighter;
    font-size: 16px;
    margin-right: 7px;
    position: relative;
    top: 1px;
  }

  &.on, &.on a:hover {
    .icon {
      color: @red;
      &:after {
        border-color: @red !important;
      }
    }
  }
}

.group-notifications {
  .icon {
    position: relative;
    &:before {
      content: "\e607";
    }
  }

  &.on, a:hover {
    .icon {
      color: @red;
    }
  }
}

.group-privacy {
  .icon {
    &:before {
      content: "\e007";
    }
  }

  &.on, a:hover {
    .icon {
      &:before {
        content: "\e008";
      }
    }
  }
}

// Group Overview

.group-overview {
  .bar-chart {
    figure a {
      height: 70px;
    }
  }
  .bar-chart-small {
    figure a {
      height: 40px;
    }
  }
}

.group-stats-column {
  float: right;
}

.group-stats {
  font-size: 14px;

  h6 {
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;
    color: @gray-dark;

    > span {
      background: @white;
      padding-right: 7px;
    }

    &:before {
      display: block;
      position: absolute;
      content: "";
      border-top: 1px solid lighten(@trim, 3);
      left: 0;
      right: 0;
      top: 50%;
      z-index: -1;
    }

    &.first-seen, &.last-seen {
      &:before {
        right: 16px;
      }

      &:after {
        display: block;
        position: absolute;
        content: "";
        border-radius: 9px;
        .square(9px);
        right: 0;
        top: 3px;
      }

      &.first-seen:after {
        background-color: @pink;
      }

      &.last-seen:after {
        background-color: @green;
      }
    }
  }

  .bar-chart figure a {
    height: 50px;

    span {
      background: @purple-light;
      #gradient > .vertical(@purple-light, @purple);
    }

    &:hover span {
      background: @blue;
    }
  }

  dl {
    margin: 0 0 15px;

    dt {
      float: left;
      font-weight: normal;
      line-height: 1.8;
    }

    dd {
      text-align: right;
      line-height: 1.8;
    }
  }
}

/**
* Activity
* ============================================================================
*/

.activity-container {
  position: relative;
  margin-bottom: 0;

  .activity-notes {
    .nav {
      padding: 7px 20px 0;
      border-bottom: 1px solid lighten(@trim, 5);
      margin-bottom: 0;

      li {
        margin-right: 13px;

        &.markdown {
          margin-right: 3px;
        }
      }

      > li a {
        font-size: 15px;
        padding-bottom: 5px;
      }
    }
  }

  .activity-field {
    .transition(padding .2s ease-in-out);
    margin: -15px -20px 0;

    textarea, .note-preview {
      display: block;
      width: 100%;
      min-height: 140px;
      max-height: 1000px;
      max-width: 100%;
      margin: 0;
      border: 0;
      padding: 15px 20px 0;
      overflow: auto;

      .placeholder(@gray-lighter);

      &:focus {
        outline: 0;
      }
    }

    .note-preview {
      padding-bottom: 8px;
    }

    .activity-actions {
      height: 35px;
      line-height: 35px;
      padding-left: 15px;
      border-top: 1px solid @trim;
      .transition(opacity .2s ease-in-out);

      .btn {
        float: right;
        font-size: 13px;
        margin: -1px -1px -1px;
        border-radius: 0 0 3px;
      }
    }

    &.error {
      border: 1px solid @red;
      margin: -9px -16px;
      border-radius: 3px;

      &:before {
        display: block;
        content:"";
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid @trim;
        position: absolute;
        left: -7px;
        top: 10px;
      }

      &:after {
        display: block;
        content:"";
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #fff;
        position: absolute;
        left: -6px;
        top: 11px;
      }

      .activity-actions .btn {
        border-bottom-color: @red;
        border-right-color: @red;
      }
    }
  }

  > ul {
    .list-unstyled();
    margin-bottom: 0;

    > li {
      padding-bottom: 20px;
    }

    .activity-note {
      position: relative;

      &:hover {
        .editor-tools {
          display: inline !important;
        }
      }

      .avatar {
        position: absolute;
        left: 0;
        top: 0;
        .square(38px);
      }

      .activity-bubble {
        background: #fff;
        border: 1px solid @trim;
        margin-left: 50px;
        border-radius: 3px;
        font-size: 15px;
        line-height: 22px;
        padding: 15px 20px 0;
        position: relative;

        &:before {
          display: block;
          content:"";
          width: 0;
          height: 0;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
          border-right: 7px solid @trim;
          position: absolute;
          left: -7px;
          top: 12px;
        }

        &:after {
          display: block;
          content:"";
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 6px solid #fff;
          position: absolute;
          left: -6px;
          top: 13px;
        }

        h1, h2, h3, h4, p, ul:not(.nav), ol, pre, hr {
          margin-bottom: 15px;
        }
        ul:not(.nav), ol {
          padding-left: 20px;
        }

        ul {
          list-style: disc;
        }

        p {
          a {
            word-wrap: break-word;
          }
        }

        .activity-author {
          font-weight: 600;
          margin-bottom: 5px;
          font-size: 13px;
          padding: 0 20px 8px;
          margin: -6px -20px 15px;
          border-bottom: 1px solid lighten(@trim, 5);

          small {
            font-weight: 300;
            margin-left: 10px;
          }

          .editor-tools {
            display: none;

            a {
              padding: 0 7px;
              border-left: 1px solid lighten(@trim, 5);
              color: @gray;
              font-weight: normal;
              &:hover { color: #666; }
              &:hover.danger { color: #d21c25; }
              &:first-child { margin-left: 7px; }
            }
          }
        }

        time {
          float: right;
          color: @gray-light;
          font-style: normal;
          font-size: 14px;
        }
      }
    }

    .activity-item {
      position: relative;
      font-size: 13px;
      color: @gray-dark;

      &:before {
        position: absolute;
        display: block;
        content: "";
        top: 11px;
        left: 0;
        right: 0;
        border-top: 1px solid @trim;
        z-index: -1;
        opacity: .6;
      }

      .avatar {
        width: 18px;
        height: 18px;
        margin-right: 4px;
        border-radius: 2px;
        position: relative;
        top: -2px;
        left: 0;
        z-index: 2;
        display: inline-block;

        &.sentry {
          color: @gray-darker;
          font-size: 16px;
          background: @white;
          top: -4px;
        }
      }

      time {
        color: @gray-light;
        margin-left: 5px;
        float: right;
        background: @white;
        padding-left: 8px;
      }

      .activity-author {
        font-weight: 600;
        color: @gray-darker;
      }

      .activity-item-content {
        display: inline;
        padding-right: 8px;
        background: @white;
      }
    }
  }

  .post-box {
    margin: -0 -0 5px;
  }
}

/**
* Event Toolbar
* ============================================================================
*/

.event-toolbar {
  margin: 0 0 15px;
  position: relative;
  z-index: 1;
  .clearfix;

  h4 {
    line-height: 1.3;
    margin: 0;
    font-size: 16px;
  }

  .icon-skip-forward, .icon-skip-back {
    position: relative;
    top: 1px;
  }

  time {
    color: @gray-dark;
  }

  .json-link {
    margin-left: 8px;
    padding-left: 8px;
    position: relative;

    &:before {
      display: block;
      position: absolute;
      content: "";
      left: 0;
      top: 2px;
      height: 14px;
      border-left: 1px solid @trim;
    }
  }
}

.sticky .event-toolbar {
  margin: 0 0 0 200px;
  padding-left: 20px;
  padding-right: 20px;
}

.sticky + div .event {
  margin-top: 82px;
}

.module-user .avatar {
  .square(64px);

  img {
    height: 100%;
    width: 100%;
  }
}

.event-stats {
  padding-top: 84px;
  margin-top: -84px;
}

.event-stats {
  h6 {
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;

    > span {
      background: @white-dark;
      padding-right: 7px;
    }

    &:before {
      display: block;
      position: absolute;
      content: "";
      border-top: 1px solid lighten(@trim, 9);
      left: 0;
      right: 0;
      top: 50%;
      z-index: -1;
    }
  }
}

.sticky-sidebar {
  .event-stats {
    position: fixed;
    top: 84px;
    right: 20px;
  }
}

// User widget

.user-widget {
  position: relative;

  margin: 0 0 20px;

  .avatar {
    .square(48px);
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 0 0 5px #fff;
  }

  .btn-group {
    margin-top: -15px;
  }

  .table {
    margin-bottom: 0;
  }
}

/**
* Traceback
* ============================================================================
*/

.traceback {
  list-style-type: none;
  padding-left: 0;
}

.traceback > h3 {
  margin-top: 0;
  font-weight: normal;

  span {
    font-weight: 600;
  }
}

.traceback > pre {
  color: @gray-dark;
  font-size: 12px;
  padding: 0;
  background: inherit;
  margin: -10px 0 20px;
}

.traceback ul {
  padding: 0;
}

.traceback > .traceback {
  padding-bottom: 5px;
}

.subtraceback {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;

  > h3 {
    line-height: 26px;
  }

  > h3:before {
    display: block;
    content: "";
    width: 20px;
    height: 0;
    border-bottom: 1px solid #E9EBEC;
    position: absolute;
    left: -15px;
    top: 11px;
  }
}

.raw-toggle {
  input {
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
}

/**
* Frame
* ============================================================================
*/

.exc-message {
  margin: 15px 0;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: @gray-darker;
  padding: 0;
  background: none;
}

.frames-omitted,
.exc-omitted {
  color: @gray-dark;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid @red;
  border-right: 1px solid lighten(@red, 30%);
  background: lighten(@red, 35%);
  padding: 10px 20px;
  margin-bottom: 10px !important;
  margin-left: -21px;
  margin-right: -21px;
}

.frame {
  list-style-type: none;
  position: relative;
  margin-bottom: 0;

  &.frame-errors {}

  &.system-frame {}

  &.leads-to-app {}

  h3 {
    font-size: 22px;
  }

  p {
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;

    a.annotation {
      &.trigger-popover {
        cursor: pointer;
      }
      color: inherit;
      padding: 0 1px;
      border-bottom: 1px dotted #666;
      &:hover { text-decoration: none; }
    }
  }

  .original-src {
    padding-left: 3px;
    font-size: 13px;
    position: relative;
    top: 1px;
  }

  .icon-open {
    font-size: 12px;
    margin-right: 3px;
    margin-left: 3px;
    position: relative;
    top: 1px;
  }

  .icon-question {
    font-size: 15px;
    position: relative;
    top: 1px;
  }

  .in-at {
    opacity: .8;
    margin: 0 2px;
  }

  .blame {
    color: lighten(@gray, 5);

    a {
      color: @gray;
    }

    .icon-mark-github {
      position: relative;
      top: 1px;
    }
  }

  .tooltip-inner {
    word-wrap: break-word;
    text-align: left;
    max-width: 300px;
  }

  .divider {
    border-left: 1px solid @trim;
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 6px;
    position: relative;
    top: 1px;
  }

  code {
    padding: 0;
    background: #fff;
    font-size: inherit;
    color: inherit;
  }

  .context {
    margin-top: -5px;
    margin-bottom: 15px;

    table.key-value {
      margin-top: 20px;
    }
  }

  .tag-app {
    color: #aaa;
    font-size: 0.9em;
    margin-left: 10px;
  }

  > div > table.key-value {
    margin-bottom: 5px;
    > tbody > tr > th {
      color: @gray-dark;
      text-align: right;
      padding-right: 12px !important;
    }
  }

  .btn-toggle {
    display: block;
    float: right;
    .square(18px);
    padding: 0;
    line-height: 18px;
    font-size: 9px;
    text-align: center;
  }

  .expand-button:hover {
    cursor: pointer;
  }

  &.expanded {

    > p {
      color: #000;
    }

    .expandable {
      height: auto;
    }
  }

  &:last-child {
    .context {
      margin-bottom: 0;
    }

    .toggle-expand .btn {
      margin-bottom: -13px;
    }
  }
}

.expandable {
  height: 0;
  overflow: hidden;
  position: relative;

  .icon-plus {
    position: absolute;
    left: 8px;
    top: 6px;
    opacity: .25;
    .transition(.1s opacity linear);
  }

  &.key-value {
    display: none;
  }

  .ws {
    display: none;
  }

  &:hover {
    .icon-plus {
      opacity: .5;
    }
  }
}

.expanded {
  .expandable {
    overflow: none;
    height: auto;
  }

  .ws {
    display: inline;
  }
}

ol.context {
  margin: 0;
  list-style-position: inside;
  border-radius: 3px;
  padding-left: 0;

  .key-value {
    display: none;

    pre {
      overflow: auto;
    }
  }

  > li {
    cursor: pointer;
    padding-left: 15px;
    font-family: @font-family-code;
    color: #222;
    background-color: #f6f7f8;
    line-height: 24px;
    font-size: 12px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  > li.active {
    background-color: #f6f7f8;
    min-height: 24px;
    list-style-type: none;
    border-radius: 2px;

    pre {
      color: @gray-dark;
    }
  }

  > li:first-child {
      border-radius: 2px 2px 0 0;
  }

  > li:last-of-type {
      border-radius: 0 0 2px 2px;
  }

  li.closed {
    border-radius: 2px;
  }

  &.expanded {
    .key-value {
      display: table;
    }

    > li.active {
      background-color: @purple;
      color: #fff;
      list-style-type: inherit;
      border-radius: 0;
    }
  }
}

ol.context-line {
  > li {
    > span {
      float: right;
    }
  }
}

.expanded {
  ol.context {
    > li {
      min-height: 22px;
    }
    > li.active {
      background-color: @blue;
      color: #fff;
    }
  }
}

.stacktrace-table {

  .trace-col {
    display: inline-block;
    padding: 0 5px;
  }

  .package {
    width: 15%;
    font-size: 13px;
    font-weight: bold;
  }
  .address {
    width: 10%;
    font-family: @font-family-code;
    font-size: 11px;
    color: @gray-dark;
    letter-spacing: -0.25px;
  }
  .symbol {
    width: 75%;
    code {
      font-size: 12px;
      background: transparent;
      color: @blue-dark;
    }
    span.offset {
      font-size: 12px;
      font-weight: bold;
    }
    span.filename {
      &:before {
        content: "(";
      }
      &:after {
        content: ")";
      }
      font-size: 12px;
      color: @purple;
      padding-left: 10px;
    }
  }
}

.system-frame .stacktrace-table {
  background-color: #f6f7f8;
}

.leads-to-app .stacktrace-table {
  background: lighten(@blue-light, 28);
}

#full-message {
  line-height: 1.5em;

  &#full-message {
    background: none;
    padding: 0;
  }
}

&.expanded div.commands,
div.commands:hover {
  .opacity(100);
  a {
    color: @state-info-text;
  }
}

div.commands {
  position: absolute;
  right: 10px;
  top: 6px;
  font-size: 0.9em;
  .opacity(30);

  a {
    color: #666;
    text-decoration: none;
    span {
      font-size: 9px;
      margin-right: 5px;
    }
  }
}

// Request

.box-clippable {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  padding: 16px 20px 1px;
  border-top: 1px solid #f1f2f3;
  .transition(all 5s ease-in-out);
  max-height: 50000px;

  &:first-of-type {
    margin-top: -20px;
    border: 0;
  }

  h5 {
    margin-bottom: 15px;
  }

  .clip-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 0 0;
    #gradient > .vertical(rgba(255,255,255, .15), rgba(255,255,255, 1));
    text-align: center;
    border-bottom: 15px solid #fff;
  }

  &.clipped {
    .clip-fade {
      display: block;
    }

    max-height: 200px;
    overflow: hidden;
  }

}

.box.errors {
  border-color: #E7C0BC;
  background: #FDF6F5;
  color: rgba(0,0,0, .70);
  font-size: 15px;

  .box-content {
    padding: 10px 20px;

    a {
      font-weight: bold;
      color: rgba(0,0,0, .70);
      &:hover {
        color: rgba(0,0,0, .90);
      }
    }

    p {
      margin: 0;
      line-height: 1.5;

      .btn {
        margin-left: 5px;
      }
    }

    ul {
      border-top: 1px solid #EFE0E1;
      margin: 10px 0 0;
      padding: 10px 0 0 20px;

      li {
        margin-bottom: 5px;
      }
    }

    pre {
      background: #F9EDED;
      color: #381618;
      margin: 5px 0 0;
    }
  }
}

/* message details */
.server-list, .url-list, .logger-list, .level-list { list-style: none; margin-left: 0; margin-bottom: 0; }
.server-list li, .url-list li { padding-bottom: 10px; }
.url-list li a { line-height: 18px; }

pre.val, span.val {
  span {
    display: inline;
  }
}

.val-string {
  color: darken(@purple, 10);
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.val-string-multiline {
  background: white;
  display: block!important;
  margin: 0px 0px 0px 15px;
  overflow: auto;
}

.val-stripped {
  color: darken(@red, 10);
  background: transparent;
}

.val-repr {
  color: darken(@blue, 10);
}

.val-number {
  color: darken(@pink, 10);
}

.val-bool, .val-null {
  color: darken(@blue, 10);
  font-weight: bold;
}

.val-dict {
  display: block;

  .val-dict-items {
    display: block;
    padding: 0 0 0 15px;

    .val-dict-pair {
      display: block;

    }
  }

  .val-dict-key, .val-dict-key .val-string {
    color: darken(@red, 5);
    background: transparent;
    border-radius: none;
  }
}

.val-array {
  display: block;

  .val-array-items {
    display: block;
    padding: 0 0 0 15px;

    .val-array-item {
      display: block;
    }
  }
}

.val-toggle {
  > a.val-toggle-link:before {
    content: "+";
  }

  > .val-array-items, > .val-dict-items {
    display: none;
  }

  &.val-toggle-open {
    > a.val-toggle-link:before {
      content: "-";
    }

    > .val-array-items, > .val-dict-items {
      display: block;
    }
  }

  a.val-toggle-link {
    background: @link-color;
    border-radius: 2px;
    color: white;
    font-weight: bold;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    height: 11px;
    width: 11px;
    display: inline-block;

    &:hover {
      background: @link-color-hover;
    }
  }

  &.val-toggle-open > a.val-toggle-link {
    background: @gray-light;
  }

  &.val-toggle-open > a.val-toggle-link:hover {
    background: @gray;
  }
}

/**
* Shared Group Detail
* ============================================================================
*/

.shared-group {
  .container {
    max-width: 900px;
  }
  header .icon-sentry-logo {
    &:before {
      content: "\e61a";
    }
  }
}

/**
* Breadcrumbs / Timeline
* ============================================================================
*/

.breadcrumb-box {
  .box-content {
    padding: 0 !important;
  }
}

ul.crumbs {
  .list-unstyled;
  margin: 0 -1px -1px;

  li {
    margin: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid lighten(@trim, 6);
    padding: 6px 20px 3px 60px;
    position: relative;

    &:before {
      display: block;
      content: "";
      width: 2px;
      top: 0;
      bottom: 0;
      left: 30px;
      background: #E7EAEF;
      position: absolute;
    }

    &:last-child {
      border-bottom: 0;
      border-radius: 0 0 2px 2px;
    }

    h5 {
      font-size: 15px;
      margin-bottom: 3px;
      line-height: 24px;
      text-transform: capitalize;
    }

    p {
      margin: 0;
      padding: 0;
    }

    .message-text {
      font-size: 15px;
      padding-top: 2px;
    }

    .icon-container {
      display: block;
      .square(26px);
      background: #fff;
      border: 1px solid @gray-lighter;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
      border-radius: 32px;
      position: absolute;
      top: 5px;
      left: 18px;
      z-index: 1;

      .icon {
        font-size: 14px;
        position: absolute;
        left: 5px;
        top: 4px;
        font-family: 'sentry-simple';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }

    time, span.dt {
      font-size: 12px;
      color: @gray;
      position: absolute;
      right: 20px
    }

    span.crumb-category {
      font-size: 95%;
      font-weight: bold;
      text-transform: none;
      .truncate;
      padding-right: 10px;
      color: @gray-darker;
    }

    span.timing {
      font-size: 90%;
      padding-left: 6px;
      font-weight: normal;
      color: @gray;
    }

    span.crumb-level {
      background: @gray;
      border-radius: 2px;
      font-size: 11px;
      font-weight: bold;
      color: white;
      padding: 2px 4px;
    }

    * + span.crumb-level {
      margin-left: 6px;
    }

    .table.key-value {
      margin-bottom: 0;
      background: none;

      thead td:first-child {
        font-weight: bold;
      }

      td {
        padding: 2px 0 !important;
        font-weight: normal;
      }

      td.value {
        padding: 2px 60px 2px 0 !important;
      }

      .key {
        width: 110px;
        max-width: 110px;
        color: @gray-dark;
        line-height: 1.6 !important;
      }

      pre {
        display: inline-block;
        padding: 2px 8px;
        margin: -1px 0 0;
      }
    }

    div.summary {
      max-height: 42px;
      overflow: hidden;

      &.can-expand {
        cursor: pointer;
        position: relative;

        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          content: " ";
          display: block;
          width: 100%;
          height: 8px;
          #gradient > .vertical(rgba(255, 255, 255, 0), #ffffff);
        }

        &:hover {
          pre {
            background: @white-darkest;
          }
        }
      }

      &.expanded {
        max-height: none;
        &:after {
          display: none;
        }
      }

      pre {
        display: inline-block;
      }
    }

    &.crumbs-collapsed {
      background: @white-dark;
      margin: 0 1px;
      box-shadow: inset 0 -1px 2px rgba(0,0,0, .03);

      &:before {
        left: 29px;
      }

      .icon-container {
        left: 17px;
      }

      .icon {
        color: @gray;
        top: 6px;
      }

      a {
        color: @gray-dark;
        display: block;
        font-size: 15px;
        padding: 7px 0 5px;
        margin: -5px 0;

        &:hover {
          color: @gray-darkest;
        }
      }
    }

    .query {
      display: inline;

      .keyword {
        font-weight: 600;
      }

      span {
        display: inline;
      }
      span.param {
        color: @gray-darker;
        font-weight: bold;
        padding: 2px 5px;
        margin: -2px -3px;
        background: @gray-lightest;
        border-radius: 2px;
      }
    }

    &.crumb-default {
      padding-top: 7px;
      clear: both;

      .icon-container {
        border-color: @gray-dark;
      }

      .icon {
        color: @gray-dark;
        top: 5px;
        left: 6px;

        &:before {
          content: "\e909";
        }
      }

      span.logger {
        padding-left: 8px;
        color: @gray;
      }
    }

    &.crumb-navigation {
      .icon-container {
        border-color: @blue-dark;

        .icon {
          top: 5px;
          left: 5.5px;
          color: @blue;
          &:before {content: "\e90b";}
        }
      }
    }

    &.crumb-http {
      .icon-container {
        border-color: @green-dark;

        .icon {
          top: 5px;
          left: 5.5px;
          color: @green;
          &:before {
            content: "\e908";
          }
        }
      }
    }

    &.crumb-user {
      .icon-container {
        border-color: @purple-dark;
      }

      .icon {
        color: @purple;
        left: 5.5px;
      }

      .icon:before {
        content: "\e608";
      }
    }

    &.crumb-warning {
      .crumb-level {
        background: @yellow-orange;
      }

      .icon-container {
        border-color: @yellow-orange-dark;

        .icon {
          top: 4px;
          left: 5.5px;
          color: @yellow-orange;
          &:before {
            content: "\e906";
          }
        }
      }
    }

    &.crumb-debug {
      .crumb-level {
        background: @blue;
      }
    }

    &.crumb-error, &.crumb-critical {
      background: #fffcfb;
      border: 1px solid #E7C0BC;
      margin: -1px 0;

      .crumb-level {
        background: @red;
      }

      .icon {
        color: @red;
        left: 5.5px;
        &:before {
          content: "\e906";
        }
      }

      h5 {
        color: #000 !important;
      }

      td, pre, time, .dt {
        color: #504140 !important;
      }

      .icon-container {
        border-color: @red-dark;
      }

      pre {
        background: #F8EEED;
      }

      &:before {
        background: #F1D8D5;
      }

      &:last-child {
        &:before {
           bottom: auto;
           height: 20px;
        }
      }
    }
  }
}

/**
* Responsive medium screen
* ============================================================================
*/

@media(max-width:991px) {
  .group-stats-column {
    float: none;
  }
}

/**
* Responsive small screen
* ============================================================================
*/

@media(max-width:767px) {
  .group-detail {

    h3 {
      white-space: normal;
      font-size: 20px;
      line-height: 1.1;
    }

    .meta {
      font-size: 13px;
    }

    .assignee-selector {
      .dropdown-menu {
        left: 0 !important;
        right: auto !important;

        &:before, &:after {
          display: none;
        }
      }
    }

    .assigned-to, .is-assigned {
      text-align: left;
    }

    .count {
      font-size: 18px;
      text-align: left;
    }

    .stats {
      margin: 15px 0;

      .row {
        border: 1px solid #E9EBEC;
        border-radius: 4px;
        margin: 0;
        padding: 10px 5px;
      }
    }

    .is-assigned {
      padding-top: 0;
    }
  }

  .event-toolbar {
    display: none;
  }

  .context {
    overflow: auto;

    li {
      width: 800px;
    }
  }

  .group-notifications, .group-privacy {
    display: none;
  }
}

/**
* Group Detail
* ============================================================================
*/

.group-detail {
  position: relative;
  margin: 0 0 20px;
  border-bottom: 1px solid @trim;
  clear: both;

  h3 {
    color: @gray-darkest;
    font-size: 22px;
    margin: 0 0 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;

    em {
      font-style: normal;
    }

  }

  .short-id {
    display: inline;
    font-weight: bold;
    font-size: 90%;
    border-right: 1px solid @trim;
    padding-right: 8px;
    margin-right: 8px;
    color: @gray;

    div {
      display: inline;
    }
  }

  .event-message, .event-meta {
    line-height: 1.2;
  }

  .error-level,
  .event-type {
    padding: 0;
    border-radius: 2px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 3px;
    .square(13px);
    text-indent: -9999em;
    display: inline-block;
    border-radius: 15px;
  }

  .event-meta {
    font-size: 80%;
    margin-top: 6px;
  }

  .event-annotation {
    display: inline-block;
    margin: 0 0 5px 9px;
    font-size: 13px;
    line-height: 1;
    border-left: 1px solid lighten(@trim, 6);
    padding-left: 9px;
    height: 13px;

    a {
      color: lighten(@gray, 12);

      &:hover {
        color: @gray;
      }
    }
  }

  .count span {
    font-size: 24px;
    display: block;
    line-height: 1.2;
  }

  .is-assigned {
    clear: both;
    text-align: right;
    font-size: 14px;
    padding-top: 7px;
  }

  .assigned-to {
    text-align: right;
    position: relative;

    .btn-group {
      float: right;
    }

  }

  .meta {
    margin: 0 0 15px;
    color: #949ea4;
  }

  .group-actions {
    margin-top: 15px;

    .btn-group {
      margin-right: 5px;
    }

    .more .icon-arrow-down {
      margin-left: 5px;
    }

    .group-resolve .icon-checkmark {
      font-size: 13px;
    }

    .group-resolve.active {
      background: @green;
      color: #fff;
      border-color: @green-dark;
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .group-bookmark .icon-star-solid {
      position: relative;
      top: 1px;
      margin-left: -1px;
      margin-right: -1px;
    }

    .group-bookmark.active {
      background: @yellow-orange;
      color: #fff;
      border-color: darken(@yellow-orange, 15);
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .group-remove:hover {
      color: #fff;
      background: @red;
      border-color: @red-dark;
      text-shadow: 0 1px 0 rgba(0,0,0, .15);
    }

    .clearfix;

    .id-label {
      background: #fff;
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .resolve-dropdown {
    .group-resolve {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }

    .dropdown-menu {
      width: 240px;
      top: 28px;
      left: -7px;

      li a {
        white-space: normal;
        padding: 3px 12px;
      }
    }
  }

  .severity {
    display: inline-block;
    position: relative;
    top: -7px;
    padding: 0 10px;
  }

  .nav-tabs {
    margin-top: 25px;
    margin-bottom: 0;
  }

  // loading indicator for the group needs extra fixing up.
  .assignee-selector {
    display: inline-block;

    .loading {
      margin: 0;

      .loading-indicator {
        left: auto!important;
        right: 0!important;
      }
    }
  }
}

.seen-by {
  margin-top: 15px;
  float: right;

  ul {
    .list-unstyled;

    li:first-child {
      background: @white-darker;
      color: darken(@gray, 10);
      border-radius: 2px;
      .square(28px);
      line-height: 26px;
      text-align: center;

      .icon-eye {
        opacity: .4;
        position: relative;
        top: 2px;
      }
    }

    li {
      float: left;
      margin-left: 5px;

      .avatar {
        display: inline-block;
        position: relative;
        .square(28px);
      }
    }
  }
}

.group-notifications, .group-privacy {
  float: left;
  margin: 22px 0 0 22px;
  font-size: 14px;

  a {
    color: @gray-dark;
    &:hover {
      color: @gray-darker;
    }
  }

  .icon {
    color: @gray-lighter;
    font-size: 16px;
    margin-right: 7px;
    position: relative;
    top: 1px;
  }

  &.on, &.on a:hover {
    .icon {
      color: @red;
      &:after {
        border-color: @red !important;
      }
    }
  }
}

.group-notifications {
  .icon {
    position: relative;
    &:before {
      content: "\e607";
    }
  }

  &.on, a:hover {
    .icon {
      color: @red;
    }
  }
}

.group-privacy {
  .icon {
    &:before {
      content: "\e007";
    }
  }

  &.on, a:hover {
    .icon {
      &:before {
        content: "\e008";
      }
    }
  }
}

// Group Overview

.group-overview {
  .bar-chart {
    figure a {
      height: 70px;
    }
  }
  .bar-chart-small {
    figure a {
      height: 40px;
    }
  }
}

.group-stats-column {
  float: right;
}

.group-stats {
  font-size: 14px;

  h6 {
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;
    color: @gray-dark;

    > span {
      background: @white;
      padding-right: 7px;
    }

    &:before {
      display: block;
      position: absolute;
      content: "";
      border-top: 1px solid lighten(@trim, 3);
      left: 0;
      right: 0;
      top: 50%;
      z-index: -1;
    }

    &.first-seen, &.last-seen {
      &:before {
        right: 16px;
      }

      &:after {
        display: block;
        position: absolute;
        content: "";
        border-radius: 9px;
        .square(9px);
        right: 0;
        top: 3px;
      }

      &.first-seen:after {
        background-color: @pink;
      }

      &.last-seen:after {
        background-color: @green;
      }
    }
  }

  .bar-chart figure a {
    height: 50px;

    span {
      background: @purple-light;
      #gradient > .vertical(@purple-light, @purple);
    }

    &:hover span {
      background: @blue;
    }
  }

  dl {
    margin: 0 0 15px;

    dt {
      float: left;
      font-weight: normal;
      line-height: 1.8;
    }

    dd {
      text-align: right;
      line-height: 1.8;
    }
  }
}

/**
* Activity
* ============================================================================
*/

.activity-container {
  position: relative;
  margin-bottom: 0;

  .activity-notes {
    .nav {
      padding: 7px 20px 0;
      border-bottom: 1px solid lighten(@trim, 5);
      margin-bottom: 0;

      li {
        margin-right: 13px;

        &.markdown {
          margin-right: 3px;
        }
      }

      > li a {
        font-size: 15px;
        padding-bottom: 5px;
      }
    }
  }

  .activity-field {
    .transition(padding .2s ease-in-out);
    margin: -15px -20px 0;

    textarea, .note-preview {
      display: block;
      width: 100%;
      min-height: 140px;
      max-height: 1000px;
      max-width: 100%;
      margin: 0;
      border: 0;
      padding: 15px 20px 0;
      overflow: auto;

      .placeholder(@gray-lighter);

      &:focus {
        outline: 0;
      }
    }

    .note-preview {
      padding-bottom: 8px;
    }

    .activity-actions {
      height: 35px;
      line-height: 35px;
      padding-left: 15px;
      border-top: 1px solid @trim;
      .transition(opacity .2s ease-in-out);

      .btn {
        float: right;
        font-size: 13px;
        margin: -1px -1px -1px;
        border-radius: 0 0 3px;
      }
    }

    &.error {
      border: 1px solid @red;
      margin: -9px -16px;
      border-radius: 3px;

      &:before {
        display: block;
        content:"";
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid @trim;
        position: absolute;
        left: -7px;
        top: 10px;
      }

      &:after {
        display: block;
        content:"";
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #fff;
        position: absolute;
        left: -6px;
        top: 11px;
      }

      .activity-actions .btn {
        border-bottom-color: @red;
        border-right-color: @red;
      }
    }
  }

  > ul {
    .list-unstyled();
    margin-bottom: 0;

    > li {
      padding-bottom: 20px;
    }

    .activity-note {
      position: relative;

      &:hover {
        .editor-tools {
          display: inline !important;
        }
      }

      .avatar {
        position: absolute;
        left: 0;
        top: 0;
        .square(38px);
      }

      .activity-bubble {
        background: #fff;
        border: 1px solid @trim;
        margin-left: 50px;
        border-radius: 3px;
        font-size: 15px;
        line-height: 22px;
        padding: 15px 20px 0;
        position: relative;

        &:before {
          display: block;
          content:"";
          width: 0;
          height: 0;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
          border-right: 7px solid @trim;
          position: absolute;
          left: -7px;
          top: 12px;
        }

        &:after {
          display: block;
          content:"";
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 6px solid #fff;
          position: absolute;
          left: -6px;
          top: 13px;
        }

        h1, h2, h3, h4, p, ul:not(.nav), ol, pre, hr {
          margin-bottom: 15px;
        }
        ul:not(.nav), ol {
          padding-left: 20px;
        }

        ul {
          list-style: disc;
        }

        p {
          a {
            word-wrap: break-word;
          }
        }

        .activity-author {
          font-weight: 600;
          margin-bottom: 5px;
          font-size: 13px;
          padding: 0 20px 8px;
          margin: -6px -20px 15px;
          border-bottom: 1px solid lighten(@trim, 5);

          small {
            font-weight: 300;
            margin-left: 10px;
          }

          .editor-tools {
            display: none;

            a {
              padding: 0 7px;
              border-left: 1px solid lighten(@trim, 5);
              color: @gray;
              font-weight: normal;
              &:hover { color: #666; }
              &:hover.danger { color: #d21c25; }
              &:first-child { margin-left: 7px; }
            }
          }
        }

        time {
          float: right;
          color: @gray-light;
          font-style: normal;
          font-size: 14px;
        }
      }
    }

    .activity-item {
      position: relative;
      font-size: 13px;
      color: @gray-dark;

      &:before {
        position: absolute;
        display: block;
        content: "";
        top: 11px;
        left: 0;
        right: 0;
        border-top: 1px solid @trim;
        z-index: -1;
        opacity: .6;
      }

      .avatar {
        width: 18px;
        height: 18px;
        margin-right: 4px;
        border-radius: 2px;
        position: relative;
        top: -2px;
        left: 0;
        z-index: 2;
        display: inline-block;

        &.sentry {
          color: @gray-darker;
          font-size: 16px;
          background: @white;
          top: -4px;
        }
      }

      time {
        color: @gray-light;
        margin-left: 5px;
        float: right;
        background: @white;
        padding-left: 8px;
      }

      .activity-author {
        font-weight: 600;
        color: @gray-darker;
      }

      .activity-item-content {
        display: inline;
        padding-right: 8px;
        background: @white;
      }
    }
  }

  .post-box {
    margin: -0 -0 5px;
  }
}

/**
* Event Toolbar
* ============================================================================
*/

.event-toolbar {
  margin: 0 0 15px;
  position: relative;
  z-index: 1;
  .clearfix;

  h4 {
    line-height: 1.3;
    margin: 0;
    font-size: 16px;
  }

  .icon-skip-forward, .icon-skip-back {
    position: relative;
    top: 1px;
  }

  time {
    color: @gray-dark;
  }

  .json-link {
    margin-left: 8px;
    padding-left: 8px;
    position: relative;

    &:before {
      display: block;
      position: absolute;
      content: "";
      left: 0;
      top: 2px;
      height: 14px;
      border-left: 1px solid @trim;
    }
  }
}

.sticky .event-toolbar {
  margin: 0 0 0 200px;
  padding-left: 20px;
  padding-right: 20px;
}

.sticky + div .event {
  margin-top: 82px;
}

.module-user .avatar {
  .square(64px);

  img {
    height: 100%;
    width: 100%;
  }
}

.event-stats {
  padding-top: 84px;
  margin-top: -84px;
}

.event-stats {
  h6 {
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;

    > span {
      background: @white-dark;
      padding-right: 7px;
    }

    &:before {
      display: block;
      position: absolute;
      content: "";
      border-top: 1px solid lighten(@trim, 9);
      left: 0;
      right: 0;
      top: 50%;
      z-index: -1;
    }
  }
}

.sticky-sidebar {
  .event-stats {
    position: fixed;
    top: 84px;
    right: 20px;
  }
}

// User widget

.user-widget {
  position: relative;

  margin: 0 0 20px;

  .avatar {
    .square(48px);
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 0 0 5px #fff;
  }

  .btn-group {
    margin-top: -15px;
  }

  .table {
    margin-bottom: 0;
  }
}

/**
* Traceback
* ============================================================================
*/

.traceback {
  list-style-type: none;
  padding-left: 0;
}

.traceback > h3 {
  margin-top: 0;
  font-weight: normal;

  span {
    font-weight: 600;
  }
}

.traceback > pre {
  color: @gray-dark;
  font-size: 12px;
  padding: 0;
  background: inherit;
  margin: -10px 0 20px;
}

.traceback ul {
  padding: 0;
}

.traceback > .traceback {
  padding-bottom: 5px;
}

.subtraceback {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;

  > h3 {
    line-height: 26px;
  }

  > h3:before {
    display: block;
    content: "";
    width: 20px;
    height: 0;
    border-bottom: 1px solid #E9EBEC;
    position: absolute;
    left: -15px;
    top: 11px;
  }
}

.raw-toggle {
  input {
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
}

/**
* Frame
* ============================================================================
*/

.exc-message {
  margin: 15px 0;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: @gray-darker;
  padding: 0;
  background: none;
}

.frames-omitted,
.exc-omitted {
  color: @gray-dark;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid @red;
  border-right: 1px solid lighten(@red, 30%);
  background: lighten(@red, 35%);
  padding: 10px 20px;
  margin-bottom: 10px !important;
  margin-left: -21px;
  margin-right: -21px;
}

.frame {
  list-style-type: none;
  position: relative;
  margin-bottom: 0;

  &.frame-errors {}

  &.system-frame {}

  &.leads-to-app {}

  h3 {
    font-size: 22px;
  }

  p {
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;

    a.annotation {
      &.trigger-popover {
        cursor: pointer;
      }
      color: inherit;
      padding: 0 1px;
      border-bottom: 1px dotted #666;
      &:hover { text-decoration: none; }
    }
  }

  .original-src {
    padding-left: 3px;
    font-size: 13px;
    position: relative;
    top: 1px;
  }

  .icon-open {
    font-size: 12px;
    margin-right: 3px;
    margin-left: 3px;
    position: relative;
    top: 1px;
  }

  .icon-question {
    font-size: 15px;
    position: relative;
    top: 1px;
  }

  .in-at {
    opacity: .8;
    margin: 0 2px;
  }

  .blame {
    color: lighten(@gray, 5);

    a {
      color: @gray;
    }

    .icon-mark-github {
      position: relative;
      top: 1px;
    }
  }

  .tooltip-inner {
    word-wrap: break-word;
    text-align: left;
    max-width: 300px;
  }

  .divider {
    border-left: 1px solid @trim;
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 6px;
    position: relative;
    top: 1px;
  }

  code {
    padding: 0;
    background: #fff;
    font-size: inherit;
    color: inherit;
  }

  .context {
    margin-top: -5px;
    margin-bottom: 15px;

    table.key-value {
      margin-top: 20px;
    }
  }

  .tag-app {
    color: #aaa;
    font-size: 0.9em;
    margin-left: 10px;
  }

  > div > table.key-value {
    margin-bottom: 5px;
    > tbody > tr > th {
      color: @gray-dark;
      text-align: right;
      padding-right: 12px !important;
    }
  }

  .btn-toggle {
    display: block;
    float: right;
    .square(18px);
    padding: 0;
    line-height: 18px;
    font-size: 9px;
    text-align: center;
  }

  .expand-button:hover {
    cursor: pointer;
  }

  &.expanded {

    > p {
      color: #000;
    }

    .expandable {
      height: auto;
    }
  }

  &:last-child {
    .context {
      margin-bottom: 0;
    }

    .toggle-expand .btn {
      margin-bottom: -13px;
    }
  }
}

.expandable {
  height: 0;
  overflow: hidden;
  position: relative;

  .icon-plus {
    position: absolute;
    left: 8px;
    top: 6px;
    opacity: .25;
    .transition(.1s opacity linear);
  }

  &.key-value {
    display: none;
  }

  .ws {
    display: none;
  }

  &:hover {
    .icon-plus {
      opacity: .5;
    }
  }
}

.expanded {
  .expandable {
    overflow: none;
    height: auto;
  }

  .ws {
    display: inline;
  }
}

ol.context {
  margin: 0;
  list-style-position: inside;
  border-radius: 3px;
  padding-left: 0;

  .key-value {
    display: none;

    pre {
      overflow: auto;
    }
  }

  > li {
    cursor: pointer;
    padding-left: 15px;
    font-family: @font-family-code;
    color: #222;
    background-color: #f6f7f8;
    line-height: 24px;
    font-size: 12px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  > li.active {
    background-color: #f6f7f8;
    min-height: 24px;
    list-style-type: none;
    border-radius: 2px;

    pre {
      color: @gray-dark;
    }
  }

  > li:first-child {
      border-radius: 2px 2px 0 0;
  }

  > li:last-of-type {
      border-radius: 0 0 2px 2px;
  }

  li.closed {
    border-radius: 2px;
  }

  &.expanded {
    .key-value {
      display: table;
    }

    > li.active {
      background-color: @purple;
      color: #fff;
      list-style-type: inherit;
      border-radius: 0;
    }
  }
}

ol.context-line {
  > li {
    > span {
      float: right;
    }
  }
}

.expanded {
  ol.context {
    > li {
      min-height: 22px;
    }
    > li.active {
      background-color: @blue;
      color: #fff;
    }
  }
}

.stacktrace-table {

  .trace-col {
    display: inline-block;
    padding: 0 5px;
  }

  .package {
    width: 15%;
    font-size: 13px;
    font-weight: bold;
  }
  .address {
    width: 10%;
    font-family: @font-family-code;
    font-size: 11px;
    color: @gray-dark;
    letter-spacing: -0.25px;
  }
  .symbol {
    width: 75%;
    code {
      font-size: 12px;
      background: transparent;
      color: @blue-dark;
    }
    span.offset {
      font-size: 12px;
      font-weight: bold;
    }
    span.filename {
      &:before {
        content: "(";
      }
      &:after {
        content: ")";
      }
      font-size: 12px;
      color: @purple;
      padding-left: 10px;
    }
  }
}

.system-frame .stacktrace-table {
  background-color: #f6f7f8;
}

.leads-to-app .stacktrace-table {
  background: lighten(@blue-light, 28);
}

#full-message {
  line-height: 1.5em;

  &#full-message {
    background: none;
    padding: 0;
  }
}

&.expanded div.commands,
div.commands:hover {
  .opacity(100);
  a {
    color: @state-info-text;
  }
}

div.commands {
  position: absolute;
  right: 10px;
  top: 6px;
  font-size: 0.9em;
  .opacity(30);

  a {
    color: #666;
    text-decoration: none;
    span {
      font-size: 9px;
      margin-right: 5px;
    }
  }
}

// Request

.box-clippable {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  padding: 16px 20px 1px;
  border-top: 1px solid #f1f2f3;
  .transition(all 5s ease-in-out);
  max-height: 50000px;

  &:first-of-type {
    margin-top: -20px;
    border: 0;
  }

  h5 {
    margin-bottom: 15px;
  }

  .clip-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 0 0;
    #gradient > .vertical(rgba(255,255,255, .15), rgba(255,255,255, 1));
    text-align: center;
    border-bottom: 15px solid #fff;
  }

  &.clipped {
    .clip-fade {
      display: block;
    }

    max-height: 200px;
    overflow: hidden;
  }

}

.box.errors {
  border-color: #E7C0BC;
  background: #FDF6F5;
  color: rgba(0,0,0, .70);
  font-size: 15px;

  .box-content {
    padding: 10px 20px;

    a {
      font-weight: bold;
      color: rgba(0,0,0, .70);
      &:hover {
        color: rgba(0,0,0, .90);
      }
    }

    p {
      margin: 0;
      line-height: 1.5;

      .btn {
        margin-left: 5px;
      }
    }

    ul {
      border-top: 1px solid #EFE0E1;
      margin: 10px 0 0;
      padding: 10px 0 0 20px;

      li {
        margin-bottom: 5px;
      }
    }

    pre {
      background: #F9EDED;
      color: #381618;
      margin: 5px 0 0;
    }
  }
}

/* message details */
.server-list, .url-list, .logger-list, .level-list { list-style: none; margin-left: 0; margin-bottom: 0; }
.server-list li, .url-list li { padding-bottom: 10px; }
.url-list li a { line-height: 18px; }

pre.val, span.val {
  span {
    display: inline;
  }
}

.val-string {
  color: darken(@purple, 10);
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.val-string-multiline {
  background: white;
  display: block!important;
  margin: 0px 0px 0px 15px;
  overflow: auto;
}

.val-stripped {
  color: darken(@red, 10);
  background: transparent;
}

.val-repr {
  color: darken(@blue, 10);
}

.val-number {
  color: darken(@pink, 10);
}

.val-bool, .val-null {
  color: darken(@blue, 10);
  font-weight: bold;
}

.val-dict {
  display: block;

  .val-dict-items {
    display: block;
    padding: 0 0 0 15px;

    .val-dict-pair {
      display: block;

    }
  }

  .val-dict-key, .val-dict-key .val-string {
    color: darken(@red, 5);
    background: transparent;
    border-radius: none;
  }
}

.val-array {
  display: block;

  .val-array-items {
    display: block;
    padding: 0 0 0 15px;

    .val-array-item {
      display: block;
    }
  }
}

.val-toggle {
  > a.val-toggle-link:before {
    content: "+";
  }

  > .val-array-items, > .val-dict-items {
    display: none;
  }

  &.val-toggle-open {
    > a.val-toggle-link:before {
      content: "-";
    }

    > .val-array-items, > .val-dict-items {
      display: block;
    }
  }

  a.val-toggle-link {
    background: @link-color;
    border-radius: 2px;
    color: white;
    font-weight: bold;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    height: 11px;
    width: 11px;
    display: inline-block;

    &:hover {
      background: @link-color-hover;
    }
  }

  &.val-toggle-open > a.val-toggle-link {
    background: @gray-light;
  }

  &.val-toggle-open > a.val-toggle-link:hover {
    background: @gray;
  }
}

/**
* Shared Group Detail
* ============================================================================
*/

.shared-group {
  .container {
    max-width: 900px;
  }
  header .icon-sentry-logo {
    &:before {
      content: "\e61a";
    }
  }
}

/**
* Breadcrumbs / Timeline
* ============================================================================
*/

.breadcrumb-box {
  .box-content {
    padding: 0 !important;
  }
}

ul.crumbs {
  .list-unstyled;
  margin: 0 -1px -1px;

  li {
    margin: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid lighten(@trim, 6);
    padding: 6px 20px 3px 60px;
    position: relative;

    &:before {
      display: block;
      content: "";
      width: 2px;
      top: 0;
      bottom: 0;
      left: 30px;
      background: #E7EAEF;
      position: absolute;
    }

    &:last-child {
      border-bottom: 0;
      border-radius: 0 0 2px 2px;
    }

    h5 {
      font-size: 15px;
      margin-bottom: 3px;
      line-height: 24px;
      text-transform: capitalize;
    }

    p {
      margin: 0;
      padding: 0;
    }

    .message-text {
      font-size: 15px;
      padding-top: 2px;
    }

    .icon-container {
      display: block;
      .square(26px);
      background: #fff;
      border: 1px solid @gray-lighter;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
      border-radius: 32px;
      position: absolute;
      top: 5px;
      left: 18px;
      z-index: 1;

      .icon {
        font-size: 14px;
        position: absolute;
        left: 5px;
        top: 4px;
        font-family: 'sentry-simple';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }

    time, span.dt {
      font-size: 12px;
      color: @gray;
      position: absolute;
      right: 20px
    }

    span.crumb-category {
      font-size: 95%;
      font-weight: bold;
      text-transform: none;
      .truncate;
      padding-right: 10px;
      color: @gray-darker;
    }

    span.timing {
      font-size: 90%;
      padding-left: 6px;
      font-weight: normal;
      color: @gray;
    }

    span.crumb-level {
      background: @gray;
      border-radius: 2px;
      font-size: 11px;
      font-weight: bold;
      color: white;
      padding: 2px 4px;
    }

    * + span.crumb-level {
      margin-left: 6px;
    }

    .table.key-value {
      margin-bottom: 0;
      background: none;

      thead td:first-child {
        font-weight: bold;
      }

      td {
        padding: 2px 0 !important;
        font-weight: normal;
      }

      td.value {
        padding: 2px 60px 2px 0 !important;
      }

      .key {
        width: 110px;
        max-width: 110px;
        color: @gray-dark;
        line-height: 1.6 !important;
      }

      pre {
        display: inline-block;
        padding: 2px 8px;
        margin: -1px 0 0;
      }
    }

    div.summary {
      max-height: 42px;
      overflow: hidden;

      &.can-expand {
        cursor: pointer;
        position: relative;

        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          content: " ";
          display: block;
          width: 100%;
          height: 8px;
          #gradient > .vertical(rgba(255, 255, 255, 0), #ffffff);
        }

        &:hover {
          pre {
            background: @white-darkest;
          }
        }
      }

      &.expanded {
        max-height: none;
        &:after {
          display: none;
        }
      }

      pre {
        display: inline-block;
      }

      * {
        vertical-align: middle;
      }
    }

    &.crumbs-collapsed {
      background: @white-dark;
      margin: 0 1px;
      box-shadow: inset 0 -1px 2px rgba(0,0,0, .03);

      &:before {
        left: 29px;
      }

      .icon-container {
        left: 17px;
      }

      .icon {
        color: @gray;
        top: 6px;
      }

      a {
        color: @gray-dark;
        display: block;
        font-size: 15px;
        padding: 7px 0 5px;
        margin: -5px 0;

        &:hover {
          color: @gray-darkest;
        }
      }
    }

    .query {
      display: inline;

      .keyword {
        font-weight: 600;
      }

      span {
        display: inline;
      }
      span.param {
        color: @gray-darker;
        font-weight: bold;
        padding: 2px 5px;
        margin: -2px -3px;
        background: @gray-lightest;
        border-radius: 2px;
      }
    }

    &.crumb-default {
      padding-top: 7px;
      clear: both;

      .icon-container {
        border-color: @gray-dark;
      }

      .icon {
        color: @gray-dark;
        top: 5px;
        left: 6px;

        &:before {
          content: "\e909";
        }
      }

      span.logger {
        padding-left: 8px;
        color: @gray;
      }
    }

    &.crumb-navigation {
      .icon-container {
        border-color: @blue-dark;

        .icon {
          top: 5px;
          left: 5.5px;
          color: @blue;
          &:before {content: "\e90b";}
        }
      }
    }

    &.crumb-http {
      .icon-container {
        border-color: @green-dark;

        .icon {
          top: 5px;
          left: 5.5px;
          color: @green;
          &:before {
            content: "\e908";
          }
        }
      }
    }

    &.crumb-user {
      .icon-container {
        border-color: @purple-dark;
      }

      .icon {
        color: @purple;
        left: 5.5px;
      }

      .icon:before {
        content: "\e608";
      }
    }

    &.crumb-warning {
      .crumb-level {
        background: @yellow-orange;
      }

      .icon-container {
        border-color: @yellow-orange-dark;

        .icon {
          top: 4px;
          left: 5.5px;
          color: @yellow-orange;
          &:before {
            content: "\e906";
          }
        }
      }
    }

    &.crumb-debug {
      .crumb-level {
        background: @blue;
      }
    }

    &.crumb-error, &.crumb-critical {
      background: #fffcfb;
      border: 1px solid #E7C0BC;
      margin: -1px 0;

      .crumb-level {
        background: @red;
      }

      .icon {
        color: @red;
        left: 5.5px;
        &:before {
          content: "\e906";
        }
      }

      h5 {
        color: #000 !important;
      }

      td, pre, time, .dt {
        color: #504140 !important;
      }

      .icon-container {
        border-color: @red-dark;
      }

      pre {
        background: #F8EEED;
      }

      &:before {
        background: #F1D8D5;
      }

      &:last-child {
        &:before {
           bottom: auto;
           height: 20px;
        }
      }
    }
  }
}

/**
* Responsive medium screen
* ============================================================================
*/

@media(max-width:991px) {
  .group-stats-column {
    float: none;
  }
}

/**
* Responsive small screen
* ============================================================================
*/

@media(max-width:767px) {
  .group-detail {

    h3 {
      white-space: normal;
      font-size: 20px;
      line-height: 1.1;
    }

    .meta {
      font-size: 13px;
    }

    .assignee-selector {
      .dropdown-menu {
        left: 0 !important;
        right: auto !important;

        &:before, &:after {
          display: none;
        }
      }
    }

    .assigned-to, .is-assigned {
      text-align: left;
    }

    .count {
      font-size: 18px;
      text-align: left;
    }

    .stats {
      margin: 15px 0;

      .row {
        border: 1px solid #E9EBEC;
        border-radius: 4px;
        margin: 0;
        padding: 10px 5px;
      }
    }

    .is-assigned {
      padding-top: 0;
    }
  }

  .event-toolbar {
    display: none;
  }

  .context {
    overflow: auto;

    li {
      width: 800px;
    }
  }

  .group-notifications, .group-privacy {
    display: none;
  }
}


fixed the layout of the blog row anchor

fixed the layout of the blog row anchor

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


Supported footer-menu styling on IE8.

Supported footer-menu styling on IE8.

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/team-aries/just.git/'


[SSE mobile] added common stylesheets file

@border-regular-control: #cbcbcb;
@text-normal: #000;

error: pathspec 'apps/common/mobile/resources/less/variables.less' did not match any file(s) known to git


Fix delay rendering on the scrolling of the parent

fatal: unable to access 'https://github.com/sonatra/sonatra-bootstrap-nav-scroll.git/': The requested URL returned error: 403


Updated jumbotron stylesheet.

Updated jumbotron stylesheet.

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


Add brand colors

Add brand colors

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/Livefyre/livefyre-bootstrap.git/'


style(links): Add nobreak to links in the editor so toolips are always accessible (#449)

/**
 * Editor
 */

// Colors
@themeColor     : rgb(62, 163, 255);
@themeColorText : darken(@themeColor, 10%);

.__mobiledoc-editor {
  font-family: 'Lora', Georgia, serif;
  margin: 1em 0;
  color: #454545;
  /*
    Chrome bug adds inline styles when backspacing to join 2 blocks.
    Fix: Apply font styles to parent element, or use % for font-size, line-height.
    http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span
  */
  font-size: 120%;
  line-height: 160%;
}
.__mobiledoc-editor:focus {
  outline: none;
}
.__mobiledoc-editor:empty:before {
  content: attr(data-placeholder);
  color: #bbb;
  cursor: text;
}
.__mobiledoc-editor > * {
  position: relative;
}
.__mobiledoc-editor a {
  color: @themeColorText;
  white-space: nowrap;
}
.__mobiledoc-editor {
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
}
.__mobiledoc-editor blockquote {
  border-left: 4px solid @themeColorText;
  margin: 1em 0 1em -1.2em;
  padding-left: 1.05em;
  color: #a0a0a0;
}
.__mobiledoc-editor img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.__mobiledoc-editor div,
.__mobiledoc-editor iframe {
  max-width: 100%;
}

/**
 * Editor
 */

// Colors
@themeColor     : rgb(62, 163, 255);
@themeColorText : darken(@themeColor, 10%);

.__mobiledoc-editor {
  font-family: 'Lora', Georgia, serif;
  margin: 1em 0;
  color: #454545;
  /*
    Chrome bug adds inline styles when backspacing to join 2 blocks.
    Fix: Apply font styles to parent element, or use % for font-size, line-height.
    http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span
  */
  font-size: 120%;
  line-height: 160%;
}
.__mobiledoc-editor:focus {
  outline: none;
}
.__mobiledoc-editor:empty:before {
  content: attr(data-placeholder);
  color: #bbb;
  cursor: text;
}
.__mobiledoc-editor > * {
  position: relative;
}
.__mobiledoc-editor a {
  color: @themeColorText;
}
.__mobiledoc-editor {
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
}
.__mobiledoc-editor blockquote {
  border-left: 4px solid @themeColorText;
  margin: 1em 0 1em -1.2em;
  padding-left: 1.05em;
  color: #a0a0a0;
}
.__mobiledoc-editor img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.__mobiledoc-editor div,
.__mobiledoc-editor iframe {
  max-width: 100%;
}


add space under article

add space under article

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


[Fix] Scalate issue in devices

[Fix] Scalate issue in devices

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/gioacostax/sia-finder.git/'


CONTACT-120 Fix css of search form

CONTACT-120 Fix css of search form

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/'


fix color

fix color

fatal: unable to access 'https://github.com/auth0/auth0-quiz.git/': The requested URL returned error: 403


Custom/.less/.css:  Centered image style.

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/QueensSailing/QueensSailing.github.io.git/'


Included color correction for bezier-curve-editor as well.

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


Add media styles

Add media styles

with bootstrap patterns

// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------

// Common styles
// -------------------------

// Clear the floats
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

// Proper spacing between instances of .media
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}

// For images and videos, set to block
.media-object {
  display: block;
}

// Reset margins on headings for tighter default spacing
.media-heading {
  margin: 0 0 5px;
}

// Media image alignment
// -------------------------

.media {
  > .pull-left {
    margin-right: 10px;
  }
  > .pull-right {
    margin-left: 10px;
  }
}

// Media list variation
// -------------------------

// Undo default ul/ol styles
.media-list {
  padding-left: 0;
  list-style: none;
}

error: pathspec 'cp-strap/src/stylesheets/components/media.less' did not match any file(s) known to git


updates styles for posts module

updates styles for posts module

fatal: unable to access 'https://github.com/amazingBastard/infosite-cms.git/': The requested URL returned error: 403


:heavy_plus_sign: app/styles.less as a root component styles

html {
    text-size-adjust: 100%;
}

body {
    margin: 0;
}

error: pathspec 'components/app/styles.less' did not match any file(s) known to git


Signed-off-by: Ge-yuan-jun <daydaygyj@gmail.com>

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/XUEJS/xue-project.git/'


4px bigger

4px bigger

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/potogan/smartotels.git/'


UI Button .noicon class added in case you need :before/:after for something else

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/wUFr/LUI.git/'


set max-width for reviews headings

set max-width for reviews headings

@import 'lib';

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

.reviews {
    position: relative;
    #reviews-info {
        margin-top: 20px;
        position: relative;
    }
    ul {
        padding: 0;
        margin: 0;
    }
    > div {
        .border-box;
    }
    figure {
        display: block;
        background: fade(#fff, 50%);
        margin-right: @spacing;
        padding: @spacing;
        margin-bottom: 2em;
    }
    figcaption {
        margin-bottom: 10px;
        font-size: 22px;
    }
    canvas {
        margin-top: 10px;
        width: 100%;
        height: 72px;
    }
    a[data-review-filter] {
        display: block;
        color: @medium-gray;
        padding: 5px 0;
        &:hover {
            background: fade(#fff, 25%);
            text-decoration: none;
        }
        &.selected {
            background: fade(#fff, 50%);
            pointer-events: none;
        }
    }
    #review-list {
        background: @bg-lite;
        border-top: 1px solid darken(@light-gray, 2%);
        border-bottom: 1px solid lighten(@faint-gray, 4%);
    }
    .review {
        border: 1px solid darken(@light-gray, 2%);
        border-width: 0 1px;
        border-bottom: 1px solid darken(@light-gray, 2%);
        list-style-type: none;
        padding: 10px;
        + .review {
            border-top: 1px solid @white;
        }
        &:nth-child(2n) {
            background: lighten(@bg, 5%);
        }
        .byline, .timestamp {
            font-size: 12px;
        }
        .byline {
            color: @medium-gray;
        }
        .timestamp {
            color: @note-gray;
            float: right;
            &:hover {
                color: @gray;
            }
        }
        .body {
            margin: 10px 0;
        }
        ul {
            float: left;
            list-style: none;
            li {
                display: inline-block;
                + li:before {
                    color: @note-gray;
                    content: "\00a0\2022\00a0\00a0";
                }
            }
        }
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
    .more-reviews {
        .fat-button;
        margin: 20px 0 15px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        max-width: 206px;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-16.png) no-repeat;
    display: inline-block;
    height: 18px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 89px;
    &.stars-4 { background-position: -18px 0; }
    &.stars-3 { background-position: -36px 0; }
    &.stars-2 { background-position: -54px 0; }
    &.stars-1 { background-position: -72px 0; }
    &.stars-0 { background-position: -90px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #review-list {
        margin: 0 -10px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
    }
}

@import 'lib';

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

.reviews {
    position: relative;
    #reviews-info {
        margin-top: 20px;
        position: relative;
    }
    ul {
        padding: 0;
        margin: 0;
    }
    > div {
        .border-box;
    }
    figure {
        display: block;
        background: fade(#fff, 50%);
        margin-right: @spacing;
        padding: @spacing;
        margin-bottom: 2em;
    }
    figcaption {
        margin-bottom: 10px;
        font-size: 22px;
    }
    canvas {
        margin-top: 10px;
        width: 100%;
        height: 72px;
    }
    a[data-review-filter] {
        display: block;
        color: @medium-gray;
        padding: 5px 0;
        &:hover {
            background: fade(#fff, 25%);
            text-decoration: none;
        }
        &.selected {
            background: fade(#fff, 50%);
            pointer-events: none;
        }
    }
    #review-list {
        background: @bg-lite;
        border-top: 1px solid darken(@light-gray, 2%);
        border-bottom: 1px solid lighten(@faint-gray, 4%);
    }
    .review {
        border: 1px solid darken(@light-gray, 2%);
        border-width: 0 1px;
        border-bottom: 1px solid darken(@light-gray, 2%);
        list-style-type: none;
        padding: 10px;
        + .review {
            border-top: 1px solid @white;
        }
        &:nth-child(2n) {
            background: lighten(@bg, 5%);
        }
        .byline, .timestamp {
            font-size: 12px;
        }
        .byline {
            color: @medium-gray;
        }
        .timestamp {
            color: @note-gray;
            float: right;
            &:hover {
                color: @gray;
            }
        }
        .body {
            margin: 10px 0;
        }
        ul {
            float: left;
            list-style: none;
            li {
                display: inline-block;
                + li:before {
                    color: @note-gray;
                    content: "\00a0\2022\00a0\00a0";
                }
            }
        }
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
    .more-reviews {
        .fat-button;
        margin: 20px 0 15px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-16.png) no-repeat;
    display: inline-block;
    height: 18px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 89px;
    &.stars-4 { background-position: -18px 0; }
    &.stars-3 { background-position: -36px 0; }
    &.stars-2 { background-position: -54px 0; }
    &.stars-1 { background-position: -72px 0; }
    &.stars-0 { background-position: -90px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #review-list {
        margin: 0 -10px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
    }
}


Center text

Center text

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/Digipalvelutehdas/APIKA.git/'


Scope variables and functions that are only relevant to .contest-art-entry

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
.contest-art-entry {
  @base-size: 256px;
  @_top: contest-art-entry;

  .contest-art-sizes(@base-width, @base-height) {
      width: @base-width;
      height: @base-height;

      &.@{_top}--placed-2 {
        width: @base-width * 0.75;
        height: @base-height * 0.75;
      }

      &.@{_top}--placed-3 {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }

      &.@{_top}--smaller {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }
  }

  margin: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: top;
  transform: translateZ(0);

  .contest-art-sizes(@base-size, @base-size);
  &--portrait {
    .contest-art-sizes(@base-size/(4/3), @base-size);
  }
  &--landscape {
    .contest-art-sizes(@base-size, @base-size/(16/9));
  }

  &--selected {
      border: 4px solid #ffa500;
  }

  &--result {
    margin-bottom: 58px;
  }

  &--placed {
    margin-bottom: 68px;
  }

  &__thumbnail {
    width: 100%;
    height: 100%;
    display: block;
  }

  &__trophy {
    &--1 {
      color: gold;
    }
    &--2 {
      color: silver;
    }
    &--3 {
      color: chocolate;
    }
  }

  &__entrant {
    text-align: right;
    font-size: 12px;
    .white-link();
    text-decoration: none;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .@{_top}--placed & {
      font-size: 14px;
      overflow: visible;
    }
  }

  &__result {
    margin-top: 10px;
    text-align: center;
  }

  &__result-ranking {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  &__result-place {
    padding-right: 5px;
    .@{_top}--placed & {
      font-size: 20px;
      white-space: nowrap;
    }
  }

  &__result-votes {
    font-size: 10px;
    color: #8dacb6;
    &--percentage {
      font-size: 10px;
      color: #60757b;
    }
  }
}

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
@base-size: 256px;
@_top: contest-art-entry;

.contest-art-sizes(@base-width, @base-height) {
    width: @base-width;
    height: @base-height;

    &.@{_top}--placed-2 {
      width: @base-width * 0.75;
      height: @base-height * 0.75;
    }

    &.@{_top}--placed-3 {
      width: @base-width * 0.5;
      height: @base-height * 0.5;
    }

    &.@{_top}--smaller {
      width: @base-width * 0.5;
      height: @base-height * 0.5;
    }
}

.contest-art-entry {
  margin: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: top;
  transform: translateZ(0);

  .contest-art-sizes(@base-size, @base-size);
  &--portrait {
    .contest-art-sizes(@base-size/(4/3), @base-size);
  }
  &--landscape {
    .contest-art-sizes(@base-size, @base-size/(16/9));
  }

  &--selected {
      border: 4px solid #ffa500;
  }

  &--result {
    margin-bottom: 58px;
  }

  &--placed {
    margin-bottom: 68px;
  }

  &__thumbnail {
    width: 100%;
    height: 100%;
    display: block;
  }

  &__trophy {
    &--1 {
      color: gold;
    }
    &--2 {
      color: silver;
    }
    &--3 {
      color: chocolate;
    }
  }

  &__entrant {
    text-align: right;
    font-size: 12px;
    .white-link();
    text-decoration: none;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .@{_top}--placed & {
      font-size: 14px;
      overflow: visible;
    }
  }

  &__result {
    margin-top: 10px;
    text-align: center;
  }

  &__result-ranking {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  &__result-place {
    padding-right: 5px;
    .@{_top}--placed & {
      font-size: 20px;
      white-space: nowrap;
    }
  }

  &__result-votes {
    font-size: 10px;
    color: #8dacb6;
    &--percentage {
      font-size: 10px;
      color: #60757b;
    }
  }
}


Somehow the flex item is squished in ie

Somehow the flex item is squished in ie

The alternative is using block for the absolute dom but then centering the content becomes a different type of pain.

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.forum-topic-entry {
  @_top: forum-topic-entry;
  @main-margin: (@spacing * 4);

  list-style: none;
  font-size: @font-size--normal;
  display: flex;
  border-bottom: 1px solid @gray-c;
  margin: 0 @main-margin;

  &--empty {
    padding: @spacing 0 (@spacing /2);
  }

  &__bg {
    .full-size();
    margin: 0 (-@main-margin);
    width: calc(100% ~'+' (@main-margin * 2));
    background-color: @gray-lighter;
    opacity: 0;
    will-change: opacity;
    transition: all 250ms ease;

    .@{_top}:hover & {
      opacity: 1;
      transition: none;
    }
  }

  &__col {
    .center-content();
    flex: none;
    margin: @spacing 0;

    &--buttons {
      margin: (-@spacing / 4);

      @media @desktop {
        opacity: 0;
      }

      .@{_top}:hover & {
        @media @desktop {
          opacity: 1;
        }
      }
    }

    &--icon {
      .circle(32px);
      align-self: center;
      font-size: @font-size--forum-topic-entry-icon;

      background-color: @gray-light;
      background-image: url("/images/backgrounds/button.svg");
      background-size: 50px;
      background-position: center;

      color: @gray-f;

      &:hover,
      &:active,
      &:focus {
        color: @gray-f;
        text-decoration: none;
      }
    }

    &--icon-plus {
      background-color: @blue-darker;
    }

    &--last-link {
      font-size: @font-size--forum-topic-entry-icon-small;
      color: @gray;
      width: 30px;
      font-weight: bold;

      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }

    &--lock {
      position: absolute;
      padding: 0 (@spacing / 2);
      top: 0;
      bottom: 0;
      left: (-@main-margin);
      width: @main-margin;
      justify-content: flex-end;

      font-size: @font-size--forum-topic-entry-icon;
    }

    &--main {
      flex: 1;
      margin: (@spacing * 3 / 4) (@spacing / 2);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 0;

      @media @desktop {
        flex-direction: row;
        align-items: center;
      }
    }
  }

  &__content {
    margin: (@spacing / 4) (@spacing / 2);
    flex: none;

    &--middle {
      text-align: right;
      width: 70px;
    }

    &--left {
      flex: 1;
    }

    &--right {
      width: 100%;

      @media @desktop {
        width: 200px;
        text-align: right;
      }
    }
  }

  &__title {
    font-size: @font-size--title-small;
    font-weight: 500;
  }
}

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.forum-topic-entry {
  @_top: forum-topic-entry;
  @main-margin: (@spacing * 4);

  list-style: none;
  font-size: @font-size--normal;
  display: flex;
  border-bottom: 1px solid @gray-c;
  margin: 0 @main-margin;

  &--empty {
    padding: @spacing 0 (@spacing /2);
  }

  &__bg {
    .full-size();
    margin: 0 (-@main-margin);
    width: calc(100% ~'+' (@main-margin * 2));
    background-color: @gray-lighter;
    opacity: 0;
    will-change: opacity;
    transition: all 250ms ease;

    .@{_top}:hover & {
      opacity: 1;
      transition: none;
    }
  }

  &__col {
    .center-content();
    flex: none;
    margin: @spacing 0;

    &--buttons {
      margin: (-@spacing / 4);

      @media @desktop {
        opacity: 0;
      }

      .@{_top}:hover & {
        @media @desktop {
          opacity: 1;
        }
      }
    }

    &--icon {
      .circle(32px);
      align-self: center;
      font-size: @font-size--forum-topic-entry-icon;

      background-color: @gray-light;
      background-image: url("/images/backgrounds/button.svg");
      background-size: 50px;
      background-position: center;

      color: @gray-f;

      &:hover,
      &:active,
      &:focus {
        color: @gray-f;
        text-decoration: none;
      }
    }

    &--icon-plus {
      background-color: @blue-darker;
    }

    &--last-link {
      font-size: @font-size--forum-topic-entry-icon-small;
      color: @gray;
      width: 30px;
      font-weight: bold;

      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }

    &--lock {
      position: absolute;
      margin-right: (@spacing / 2);
      top: 0;
      bottom: 0;
      right: 100%;

      font-size: @font-size--forum-topic-entry-icon;
    }

    &--main {
      flex: 1;
      margin: (@spacing * 3 / 4) (@spacing / 2);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 0;

      @media @desktop {
        flex-direction: row;
        align-items: center;
      }
    }
  }

  &__content {
    margin: (@spacing / 4) (@spacing / 2);
    flex: none;

    &--middle {
      text-align: right;
      width: 70px;
    }

    &--left {
      flex: 1;
    }

    &--right {
      width: 100%;

      @media @desktop {
        width: 200px;
        text-align: right;
      }
    }
  }

  &__title {
    font-size: @font-size--title-small;
    font-weight: 500;
  }
}


fatal: unable to access 'https://github.com/XUEJS/xue-project.git/': The requested URL returned error: 403


Create border-radius.less

Create border-radius.less

// Single side border-radius

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

error: pathspec 'static/app/components/bootstrap/css/less/mixins/border-radius.less' did not match any file(s) known to git


a bit of style in incoming call notification

fatal: unable to access 'https://github.com/VoiSmart/Rocket.Chat.git/': The requested URL returned error: 403


undo text-rendering in css

undo text-rendering in css

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/bmesuere/uni-test.git/'


Import Supersize plugin CSS

Import Supersize plugin CSS

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/basekit-templates/example-supersized-integration.git/'