Reduce key whitespace

Reduce key whitespace

/**
* 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;

      img {
        border-radius: 2px;
        .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 15px 0;
      border-bottom: 1px solid @trim;
      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: -10px -13px 0;

    textarea, .note-preview {
      display: block;
      width: 100%;
      min-height: 38px;
      max-height: 1000px;
      max-width: 100%;
      margin: 0;
      .transition(.2s ease-in-out all);
      border: 0;
      padding: 15px 0 0 15px;
      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(32px);
      }

      .activity-bubble {
        background: #fff;
        border: 1px solid @trim;
        margin-left: 42px;
        border-radius: 3px;
        font-size: 14px;
        line-height: 18px;
        padding: 10px 13px 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: 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;
        }

        p, ul:not(.nav), ol, pre {
          margin-bottom: 10px;
        }

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

        pre {
          font-size: 12px;
        }

        .activity-author {
          font-weight: 600;
          margin-bottom: 5px;
          font-size: 13px;

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

          .editor-tools {
            display: none;

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

        time {
          float: right;
          color: lighten(@gray, 20);
          font-style: normal;
        }
      }
    }

    .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;
      }

      &.activity-item-compact {
        font-size: 14px;

        .avatar {
          border-radius: 3px;
          .square(30px);
          position: absolute;
          top: 2px;
          left: 0;

          &.sentry {
            background: @white-darker;
            font-size: 16px;
            line-height: 1.2;
            text-align: center;
            line-height: 32px;
          }
        }

        .activity-item-content {
          display: block;
          position: relative;
          padding-left: 38px;
          line-height: 1.25;
          min-height: 30px;
        }

        time {
          float: none;
          padding-left: 0;
          white-space: nowrap;
        }

        .activity-item-bubble {
          margin: 5px 0 0 -38px;
          padding: 6px 8px 4px;
          border: 1px solid @trim;
          border-radius: 3px;
          box-shadow: 0 1px 1px rgba(0,0,0, .04);
          position: relative;
          overflow: hidden;

          a {
            max-width: 100%;
            overflow-x: hidden;
            text-overflow: ellipsis;
          }

          p {
            &:last-child {
              margin-bottom: 0;
            }
          }

          &.clipped {
            max-height: 68px;

            &:after {
              position: absolute;
              content: "";
              display: block;
              bottom: 0;
              right: 0;
              left: 0;
              height: 36px;
              #gradient > .vertical(rgba(255, 255, 255, .15), rgba(255,255,255, 1));
              border-bottom: 6px solid #fff;
              border-radius: 0 0 3px 3px;
              pointer-events: none;
            }
          }
        }

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

  .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;
  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 6px 60px;
    position: relative;
    min-height: 39px;

    &: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: 6px;
      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 {
      float: right;
      font-size: 12px;
      color: @gray;
    }

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

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

      td {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
      }

      tr:last-child td {
        padding-bottom: 0 !important;
      }

      .key {
        width: 110px;
        color: @gray-dark;
      }

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

    &.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;
        }
      }
    }

    &.crumb-query {
      background: lighten(@orange, 42);
      code {
        white-space: pre;

        span.param {
          display: inline;
          color: @blue;
          padding: 0 3px;
          background: white;
          border-radius: 2px;
        }
      }
    }

    &.crumb-rpc {

    }

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

        .icon {
          top: 5px;
          color: darken(@yellow-orange, 5);
          &:before {content: "\e61d";}
        }
      }
    }

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

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

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

      & + .crumb-message {
        margin-top: -9px;
        background: #fff;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 6px;
        border-left: 1px solid @trim;
        border-right: 1px solid @trim;

        .icon-container {
          display: none;
        }
      }

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

      .icon {
        color: @blue;
        top: 5px;

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

      span.level {
        font-size: 11px;
        font-weight: bold;
        text-transform: capitalize;
        background: @white-darkest;
        color: @gray-dark;
        border-radius: 2px;
        display: inline-block;
        padding: 3px 0;
        margin-right: 6px;
        line-height: 1;
        position: relative;
        top: -2px;
        width: 54px;
        text-align: center;
      }

      span.level-info {
        background: @blue;
        color: @white;
      }

      span.level-error {
        background: @orange;
        color: @white;
      }

      span.level-warning {
        background: @yellow-orange;
        color: @white;
      }

      span.level-fatal {
        background: @red;
        color: @white;
      }

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

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

      .icon {
        color: @purple;
      }

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

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

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

      h5 {
        color: #000 !important;
      }

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

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

      &:before {
         background: #F1D8D5;
         bottom: auto;
         height: 20px;
      }

      pre {
        background: #F8EEED;
      }
    }
  }
}

/**
* 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;

      img {
        border-radius: 2px;
        .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 15px 0;
      border-bottom: 1px solid @trim;
      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: -10px -13px 0;

    textarea, .note-preview {
      display: block;
      width: 100%;
      min-height: 38px;
      max-height: 1000px;
      max-width: 100%;
      margin: 0;
      .transition(.2s ease-in-out all);
      border: 0;
      padding: 15px 0 0 15px;
      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(32px);
      }

      .activity-bubble {
        background: #fff;
        border: 1px solid @trim;
        margin-left: 42px;
        border-radius: 3px;
        font-size: 14px;
        line-height: 18px;
        padding: 10px 13px 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: 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;
        }

        p, ul:not(.nav), ol, pre {
          margin-bottom: 10px;
        }

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

        pre {
          font-size: 12px;
        }

        .activity-author {
          font-weight: 600;
          margin-bottom: 5px;
          font-size: 13px;

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

          .editor-tools {
            display: none;

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

        time {
          float: right;
          color: lighten(@gray, 20);
          font-style: normal;
        }
      }
    }

    .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;
      }

      &.activity-item-compact {
        font-size: 14px;

        .avatar {
          border-radius: 3px;
          .square(30px);
          position: absolute;
          top: 2px;
          left: 0;

          &.sentry {
            background: @white-darker;
            font-size: 16px;
            line-height: 1.2;
            text-align: center;
            line-height: 32px;
          }
        }

        .activity-item-content {
          display: block;
          position: relative;
          padding-left: 38px;
          line-height: 1.25;
          min-height: 30px;
        }

        time {
          float: none;
          padding-left: 0;
          white-space: nowrap;
        }

        .activity-item-bubble {
          margin: 5px 0 0 -38px;
          padding: 6px 8px 4px;
          border: 1px solid @trim;
          border-radius: 3px;
          box-shadow: 0 1px 1px rgba(0,0,0, .04);
          position: relative;
          overflow: hidden;

          a {
            max-width: 100%;
            overflow-x: hidden;
            text-overflow: ellipsis;
          }

          p {
            &:last-child {
              margin-bottom: 0;
            }
          }

          &.clipped {
            max-height: 68px;

            &:after {
              position: absolute;
              content: "";
              display: block;
              bottom: 0;
              right: 0;
              left: 0;
              height: 36px;
              #gradient > .vertical(rgba(255, 255, 255, .15), rgba(255,255,255, 1));
              border-bottom: 6px solid #fff;
              border-radius: 0 0 3px 3px;
              pointer-events: none;
            }
          }
        }

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

  .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;
  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 6px 60px;
    position: relative;
    min-height: 39px;

    &: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: 6px;
      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 {
      float: right;
      font-size: 12px;
      color: @gray;
    }

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

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

      td {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
      }

      tr:last-child td {
        padding-bottom: 0 !important;
      }

      .key {
        width: 126px;
        color: @gray-dark;
      }

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

    &.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;
        }
      }
    }

    &.crumb-query {
      background: lighten(@orange, 42);
      code {
        white-space: pre;

        span.param {
          display: inline;
          color: @blue;
          padding: 0 3px;
          background: white;
          border-radius: 2px;
        }
      }
    }

    &.crumb-rpc {

    }

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

        .icon {
          top: 5px;
          color: darken(@yellow-orange, 5);
          &:before {content: "\e61d";}
        }
      }
    }

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

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

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

      & + .crumb-message {
        margin-top: -9px;
        background: #fff;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 6px;
        border-left: 1px solid @trim;
        border-right: 1px solid @trim;

        .icon-container {
          display: none;
        }
      }

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

      .icon {
        color: @blue;
        top: 5px;

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

      span.level {
        font-size: 11px;
        font-weight: bold;
        text-transform: capitalize;
        background: @white-darkest;
        color: @gray-dark;
        border-radius: 2px;
        display: inline-block;
        padding: 3px 0;
        margin-right: 6px;
        line-height: 1;
        position: relative;
        top: -2px;
        width: 54px;
        text-align: center;
      }

      span.level-info {
        background: @blue;
        color: @white;
      }

      span.level-error {
        background: @orange;
        color: @white;
      }

      span.level-warning {
        background: @yellow-orange;
        color: @white;
      }

      span.level-fatal {
        background: @red;
        color: @white;
      }

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

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

      .icon {
        color: @purple;
      }

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

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

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

      h5 {
        color: #000 !important;
      }

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

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

      &:before {
         background: #F1D8D5;
         bottom: auto;
         height: 20px;
      }

      pre {
        background: #F8EEED;
      }
    }
  }
}

/**
* 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;
  }
}


Improved less styles.

Improved less styles.

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


Box tweaks (slight margin added to paragraph to counter padding of box) + `.box--inline`

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


Add style.less file

Add style.less file

@import "bootstrap/less/bootstrap.less";

@btn-font-size-base: 10px;
@btn-font-weight: 400;
@btn-line-height-base: 100%;
@btn-default-color: #fff;

#header-one { .container(); padding-bottom: 20px; }
#header-one h1 { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 1.7em; word-spacing: 0.27em; color: #000; }
#header-one h1 img { width: 200px; height: auto; }

@-moz-keyframes orbit {
	0%   { background-position: 0 0 }
	50%  { background-position: right 0 }
    100% { background-position: 0 0 }
}
@-webkit-keyframes orbit {
	0%   { background-position: 0 0 }
	50%  { background-position: right 0 }
    100% { background-position: 0 0 }
}
#header-two .sat { display: block; width: 100%; text-align: center; padding-top: 30px; }
#header-two .sat img {  width: 200px; height: auto; }

#content { .container(); padding-top: 40px; }
#content h1 { margin-bottom: 1.1em; }

#info { .container(); padding-top: 130px; font-size: 10px; color: #cdc; }
#info a { color: #efe; }

#content img { .img-responsive(); }
#content table { .table(); }
.lineno {
  padding-right: 0.0em;
}

.highlight {
    background: #f3f3f3;
    font-family: "Source Code Pro", source-code-pro, Consola, monospace ;
    font-size: 12pt ;
    line-height: 145% ;
    text-align: left ;
    background-color: #f3f3f3 ;
}

.warning {
    font-family: "Source Code Pro", source-code-pro, Consola, monospace ;
    font-size: 8pt ;
    line-height: 145% ;
    text-align: left ;
}

.output_area pre {
    font-family: "Source Code Pro", source-code-pro, Consolas, monospace;
    border: 0px;
}

div.prompt {
    min-width: 14ex;
    padding: .4em;
    margin: 0;
    font-family: monospace;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

div.input_prompt {
    color: #303F9F;
    border-top: 1px solid transparent;
}

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


code cleaning

code cleaning

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


updated feedback form style

updated feedback form 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/Imaflora/atlasagropecuario.git/'


Do not display language name. It interferes with the code.

@import "bootstrap-custom.less";
@import "variables-custom.less";

@navbar-brand-height: 36px;
@sticky-navbar-height: 60px;

#reactive-manifesto-banner {
    // banner is 143px wide. hide it when screen is too small so it
    // doesn't block the navbar.
    @media (max-width: (@container-lg + (143px * 2))) {
        display: none;
    }
}

.navbar {
    @transition-time: 0.2s;

    background-color: #fff;
    transition: all @transition-time ease;
    font-weight: 500;
    font-size: @font-size-base * 1.2;

    .navbar-brand {
        transition: all @transition-time ease;

        img {
            height: @navbar-brand-height;
        }

        // center logo vertically
        padding-top: ((@navbar-height - @navbar-brand-height) / 2 + 1);
    }

    .navbar-nav {
        a {
            transform: scale(0.85, 1.0);
        }
    }

    @media (min-width: @grid-float-breakpoint) {
        .navbar-nav {
            & > li {
                transition: all @transition-time ease;

                // dividers between navbar items
                &:not(:last-child) {
                    border-right: 2px solid @gray-lighter;
                }

                // center items vertically
                margin-top: ((@navbar-height - @line-height-computed) / 4);
            }

            // navbar link colors
            a {
                color: @gray-base;

                &.vertx-2-link {
                    color: #999;
                }

                &:hover {
                    color: @brand-primary;
                }
            }

            .dropdown-menu {
                box-shadow: none;
                border: 1px solid #e7e7e7;
                margin-right: 11.5px;

                & > li > a:hover, & > li > a:focus {
                    background-color: transparent;
                }

                & > li:hover, & > li:focus {
                    background-color: #e7e7e7;
                }
            }
        }

        &.sticky {
            min-height: @sticky-navbar-height;
            height: @sticky-navbar-height;

            .navbar-brand {
                height: @sticky-navbar-height;

                // center logo vertically
                padding-top: (@sticky-navbar-height - @navbar-brand-height) / 2 + 1;
            }

            .navbar-nav > li {
                // center items vertically
                margin-top: ((@sticky-navbar-height - @line-height-computed) / 4);

                & > a {
                    padding-top: ((@sticky-navbar-height - @line-height-computed) / 4);
                    padding-bottom: ((@sticky-navbar-height - @line-height-computed) / 4);
                }
            }
        }
    }
}

.index-header {
    background-color: @brand-primary;
    color: #fff;
    padding-top: 60px + @navbar-height; // skip sticky navbar
    padding-bottom: 95px;

    h2 {
        font-weight: 400;
        font-size: @font-size-base * 3.5;

        strong {
            font-weight: 500;
        }
    }

    .buttons {
        padding-top: 15px;
    }

    .btn {
        font-weight: 500;

        .icon {
            margin-right: 6px;
        }
    }

    .github-btn {
        padding-top: 16px;
        margin-left: 10px;
        display: inline-block;
    }
}

.page-header {
    background-color: @brand-primary;
    color: #fff;
    margin: 0;
    margin-bottom: @line-height-computed;
    padding: @line-height-computed / 2 0 @line-height-computed 0;

    &.page-header-large {
        text-align: center;
        padding: @line-height-computed * 3 0 @line-height-computed * 4 0;
        font-size: @font-size-base * 1.2;

        h1 {
            font-weight: 400;
            font-size: @font-size-base * 3.5;
        }
    }

    &.page-header-no-gap {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 10px;
    }
}

.highlight {
    padding-top: @line-height-computed * 1.8;
    margin-bottom: @line-height-computed * 2.6;
    font-size: @font-size-base * 1.2;

    img {
        max-width: 90%;
        padding-top: @line-height-computed;
    }

    h2 {
        font-size: @font-size-h1;
        border-left: 8px solid @brand-primary;
        padding: 10px 15px 10px 15px;
        margin-bottom: @line-height-computed;
    }

    .text-right {
        img {
            padding-top: @line-height-computed * 1.6;
            padding-top: @line-height-computed * 3.2;
        }

        h2 {
            border-left: none;
            border-right: 8px solid @brand-primary;
        }
    }

    &.highlight-scale {
        margin-bottom: @line-height-computed * 4;
    }

    &.highlight-general {
        font-size: @font-size-base;
        img {
            max-height: @line-height-computed * 5;
            padding-top: @line-height-computed / 4;
            padding-bottom: @line-height-computed / 1.5;
        }
    }

    &.highlight-polyglot {
        margin-bottom: 0;
        background-color: #eee;

        .code-samples, .code-samples .prettyprint {
            font-size: @font-size-small;
        }

        .code-samples {
            padding-top: @line-height-computed * 2.2;
            margin-bottom: 0;
            code {
                min-height: 360px;
                margin-bottom: 0;
                padding: 20px;
                border-top-right-radius: @border-radius-large;
            }

            .nav-tabs {
                border: none;

                li {
                    &.active a {
                        background-color: #474949;
                        color: #fff;
                    }
                }

                a {
                    border: none;
                }
            }

            .prettyprint {
                min-height: 340px;
                padding: 0;
                margin: 0;
                border-radius: 0;
                border: none;
            }
        }

        & + hr {
            margin-top: 0;
        }
    }

    &.highlight-fun {
        background-color: #eee;
        margin-bottom: 0;

        .highlight-fun-right {
            font-size: @font-size-base;
            padding-top: @line-height-computed;
        }

        .highlight-stack p {
            font-size: @font-size-base * 1.4;
            font-style: italic;
        }
    }

    &.highlight-who {
        text-align: center;
        background-color: @brand-primary;
        color: white;
        padding-bottom: @line-height-computed * 3.2;

        img {
            margin: @line-height-computed @line-height-computed / 2;
            padding: 0;
        }

        .wanttobelisted {
            padding-top: @line-height-computed;
        }

        a {
            color: #fff;
            text-decoration: underline;

            &:hover {
                color: #999;
            }

            &.btn {
                text-decoration: none;

                &:hover {
                    color: @brand-primary;
                }

                 .icon {
                    padding-bottom: 4px;
                }
            }
        }
    }
}

/* Center user logos vertically and horizontally */
.user-logos {
    display: table;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;

    .user-logo {
        display: table-cell;
        float: none !important;
        vertical-align: middle;
        width: 100%;
    }
}

footer {
    background-color: #eee;
    margin-top: @line-height-computed * 2;
    padding-top: @line-height-computed;
    padding-bottom: @line-height-computed * 5;

    h2 {
        font-size: @font-size-base;
    }

    p {
        color: @gray-light;

        &:first-child {
            padding-top: @line-height-computed;
        }
    }

    .logo {
        margin: @line-height-computed / 2 0;
    }

    .copyright {
        text-align: right;

        @media (max-width: (@screen-xs-max)) {
            text-align: center;
        }

        a {
            white-space: nowrap;
        }
    }
}

// transparent buttons
.btn-transparent {
    color: #fff;
    background-color: transparent;

    &:hover {
        background-color: #fff;
        color: @brand-primary;
    }
}

// entypo icons
.icon {
    fill: currentColor;
    height: @line-height-computed * 0.9;
    width: @line-height-computed * 0.9;
    line-height: 1em;
    float: left;
    margin: 0.2em 0.2em 0 0;
}

/** Community page */
.community-container {
    padding-top: @line-height-computed;
    margin-bottom: @line-height-computed * 3;

    h3 {
        border-left: 8px solid @brand-primary;
        padding: 10px 15px 10px 15px;
        margin-top: 0;
    }

    h4 {
        padding-top: 4px;
    }

    .media {
        display: inline-block;
        text-align: left;

        h4 {
            padding-top: 0;
        }
    }

    .media-body {
        width: auto;

        h4 {
            margin-bottom: 0;
        }
    }

    .media-left {
        padding-bottom: @line-height-computed;
    }

    .icon {
        height: @line-height-computed * 0.8;
        margin: 0.3em 0.3em 0 0;
        color: @gray;

        &:hover {
            color: @brand-primary;
        }
    }

    &.community-introduction {
        margin-bottom: @line-height-computed * 1.2;
    }

    &.contributors {
        h4.many-others {
            margin-top: @line-height-computed;
            font-style: italic;
        }
    }

    .award {
        @media (max-width: (@screen-xs-max)) {
            margin-top: @line-height-computed;
            display: inline-block;
        }
    }

    .community-row {
        margin-bottom: @line-height-computed;

        .col-sm-12:nth-child(2) {
            @media (max-width: (@screen-xs-max)) {
                padding-top: @line-height-computed;
            }
        }
    }
}

/** Documentation page */

/* Sidebar should stick to the top */
#sidebar {
    overflow-y: auto;
    max-height: ~"calc(100vh - 40px)";
    font-size: @font-size-small;

    &.affix, &.affix-bottom {
        width: ((@screen-md-min - @grid-gutter-width) * 0.25 - @grid-gutter-width);
    }
    &.affix {
        position: fixed;
        top: 20px;
    }
    &.affix-bottom {
        position: absolute;
    }

    @media (max-width: @screen-md-min) {
        display: none;
    }

    @media (min-width: @screen-lg-min) {
        &.affix, &.affix-bottom {
            width: ((@screen-lg-min - @grid-gutter-width) * 0.25 - @grid-gutter-width);
        }
    }

    & > .nav {
        padding-left: 0;

        a {
            padding: 0 0 (@line-height-computed / 8) 5px;

            &:hover {
                border-left: 1px solid @brand-primary;
                padding-left: 4px;
            }
        }

        & > .active > a {
            border-left: 2px solid @brand-primary;
            padding-left: 3px;
        }

        .nav {
            display: none;

            li {
                a {
                    padding-left: 20px;

                    &:hover {
                        padding-left: 19px;
                    }
                }

                &:last-child a {
                    padding: 0 0 (@line-height-computed / 8) 20px;

                    &:hover {
                        padding-left: 19px;
                    }
                }

                &.active a {
                    border-left: 2px solid @brand-primary;
                    padding-left: 18px;
                }
            }
        }

        .active .nav {
            display: block;
        }
    }

    &.sidebar-no-level2 {
        .sectlevel2 {
            display: none !important;
        }
    }
}

.toc {
    h2 {
        margin-top: 0;
    }

    padding-bottom: @line-height-computed * 2;

    ul {
        list-style-type: disc;
        margin-top: 0;
        margin-bottom: 12.5px;
        margin-left: 0;
        padding-left: 1.2em;

        li {
            display: list-item;

            a {
                padding: 0;
            }
        }
    }
}

.docs-content {
    margin-top: @line-height-computed * 2;

    .no-margin-top {
        margin-top: 0;
    }
}

// do not display language name. it interferes with the code.
.listingblock:hover code[class*="language-"]:before {
    display: none;
}


Restoring the file `inline-edit-area.less`.

//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Inline edit area
//

@inline-edit-area-border-color: @border-color;
@inline-edit-area-border-style: dotted;
@inline-edit-area-border-width: 1px;

.tox.tox-inline-edit-area {
  border: @inline-edit-area-border-width @inline-edit-area-border-style @inline-edit-area-border-color;
}

error: pathspec 'src/less/theme/components/edit-area/inline-edit-area.less' did not match any file(s) known to git


corrects styling for checkboxes

corrects styling for checkboxes

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/hevnly/asset-bazaar.git/'


Insert elements.less

Insert elements.less

/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb(@start,@start,@start)),
                               color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb(@start,@start,@start) 0%,
                                  rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb(@start,@start,@start) 0%,
                                   rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                 rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}
.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -webkit-border-top-left-radius: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
  border-top-left-radius: @topleft;
  .background-clip(padding-box);
}
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}
.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}
.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}
.rotation(@deg:5deg){
  .transform(rotate(@deg));
}
.scale(@ratio:1.5){
  .transform(scale(@ratio));
}
.transition(@duration:0.2s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}
.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}
.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}
.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}
.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

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


border bottom for articles

border bottom for articles

@import "../../defaults/common.less";

.blog-entry-title {
  font-size: 2em;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 35px;
}

.blog-entry-title h1 {
  display: block;
}

.blog-entry-title a:hover {
  text-decoration: none;
}

.blog-entry-date {
  float: right;
  font-size: 10px;
  color: @red_shadow;
}

.blog-entry-brief {
  margin-bottom: 45px;
}

.blog-entry-brief h1,
.blog-entry-text h1,
.blog-entry h2,
.blog-entry h3,
.blog-entry h4 {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 25px;
  font-weight: bold;
  color: @strong;
}

.blog-entry pre {
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.blog-entry pre code {
  display: block;
}

.blog-entry p {
  line-height: 1.3em;
  margin-bottom: 15px;
}

.blog-entry ul {
  margin: 20px 0;
}

.blog-entry ul li {
  line-height: 1.6em;
  list-style-position:inside;
  list-style-type: disc;
  list-style-type: hiragana-iroha;
}

.blog-entry ul li:before {
  content: '';
  padding-right: 3px;
}

.blog-entry blockquote {
  .box-radius(8px);

  padding: 12px;
  margin: 25px 0 15px 0;
  background-color: @light;

  border: 1px solid @grayish;
  border-top: 2px solid @light;
  border-left: 2px solid @light;

  min-height: 24px;

  .box-gradient(@light, @moderate);
}

.blog-entry blockquote:before {
  content: '{ }';
  color: @strong + #777;
  text-shadow: 0 1px @strong;
  font-size: 30px;
  font-weight: bold;

  float: left;

  position: relative;
  top: -8px;
  left: 0;
  margin-bottom: 12px;
  margin-right: 12px;
}

.blog-entry section a {
  color: @pink;
  font-weight: bold;
}

.blog-entries .blog-entry:first-child {
  margin-top: inherit;
}

.blog-entries .blog-entry {
  margin-top: 40px;
  padding-bottom: 20px;
  border-bottom: 3px double @strong;
}

@import "../../defaults/common.less";

.blog-entry-title {
  font-size: 2em;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 35px;
}

.blog-entry-title h1 {
  display: block;
}

.blog-entry-title a:hover {
  text-decoration: none;
}

.blog-entry-date {
  float: right;
  font-size: 10px;
  color: @red_shadow;
}

.blog-entry-brief {
  margin-bottom: 45px;
}

.blog-entry-brief h1,
.blog-entry-text h1,
.blog-entry h2,
.blog-entry h3,
.blog-entry h4 {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 25px;
  font-weight: bold;
  color: @strong;
}

.blog-entry pre {
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.blog-entry pre code {
  display: block;
}

.blog-entry p {
  line-height: 1.3em;
  margin-bottom: 15px;
}

.blog-entry ul {
  margin: 20px 0;
}

.blog-entry ul li {
  line-height: 1.6em;
  list-style-position:inside;
  list-style-type: disc;
  list-style-type: hiragana-iroha;
}

.blog-entry ul li:before {
  content: '';
  padding-right: 3px;
}

.blog-entry blockquote {
  .box-radius(8px);

  padding: 12px;
  margin: 25px 0 15px 0;
  background-color: @light;

  border: 1px solid @grayish;
  border-top: 2px solid @light;
  border-left: 2px solid @light;

  min-height: 24px;

  .box-gradient(@light, @moderate);
}

.blog-entry blockquote:before {
  content: '{ }';
  color: @strong + #777;
  text-shadow: 0 1px @strong;
  font-size: 30px;
  font-weight: bold;

  float: left;

  position: relative;
  top: -8px;
  left: 0;
  margin-bottom: 12px;
  margin-right: 12px;
}

.blog-entry section a {
  color: @pink;
  font-weight: bold;
}

.blog-entries .blog-entry:first-child {
  margin-top: inherit;
}

.blog-entries .blog-entry {
  margin-top: 40px;
}


Font families

Font families

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


Fix jumbotron img

Fix jumbotron img

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/getinsomnia/website.git/'