Shrink and center loupe icon

Shrink and center loupe icon

/**
* 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 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%;
      text-transform: none;
    }

    .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 {
      .icon-container {
        border-color: @green-dark;

        .icon {
          top: 6px;
          left: 6px;
          color: @green-dark;
          &:before {content: "\e601";}
          font-size: 12px;
        }
      }

      p {
        line-height: 1.2;
        padding-top: 4px;
      }

      span.timing {
        margin-left: 10px;
        font-size: 90%;
      }

      code {
        padding-left: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
        background: transparent;
        font-size: 13px;

        &.expand {
          cursor: pointer;
        }

        &.query-summary {
          &:hover span.elipsis {
            background: @gray;
            color: white;
          }
        }

        span {
          display: inline;
        }

        span.elipsis {
          border-radius: 2px;
          padding: 2px 7px;
          margin: -2px -5px -2px 10px;
        }

        span.keyword {
          font-weight: bold;
          color: @gray-darker;
        }

        span.param {
          color: @gray-darker;
          font-weight: bold;
          padding: 2px 5px;
          margin: -2px -3px;
          background: @gray-lightest;
          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;

      .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 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%;
      text-transform: none;
    }

    .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 {
      .icon-container {
        border-color: @green-dark;

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

      p {
        line-height: 1.2;
        padding-top: 4px;
      }

      span.timing {
        margin-left: 10px;
        font-size: 90%;
      }

      code {
        padding-left: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
        background: transparent;
        font-size: 13px;

        &.expand {
          cursor: pointer;
        }

        &.query-summary {
          &:hover span.elipsis {
            background: @gray;
            color: white;
          }
        }

        span {
          display: inline;
        }

        span.elipsis {
          border-radius: 2px;
          padding: 2px 7px;
          margin: -2px -5px -2px 10px;
        }

        span.keyword {
          font-weight: bold;
          color: @gray-darker;
        }

        span.param {
          color: @gray-darker;
          font-weight: bold;
          padding: 2px 5px;
          margin: -2px -3px;
          background: @gray-lightest;
          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;
  }
}


layout builder in designer

layout builder in designer

--HG--
branch : newuserinterface

.designerBlock(){
	border:1px solid #ccc;
	box-shadow:inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
	#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
}
.panelToPlace,
.rowToPlace,
.element-to-place {
	text-align: center;
	white-space: nowrap;
	margin: 1px;

	line-height:30px;
	min-width: 120px;
	height: 30px;

	border:1px solid #ccc;
	 #gradient > .vertical(#f6f6f6, #ededed);
	 box-shadow:inset 0 1px 0 0 #ffffff;

	color:@themeColor;

}

.layout-parts-container {
	overflow:scroll;
	width:100%;
}
.layout-parts {
	float: left;
	 ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		clear: both;
	}
}
.layout-elements {
	width: 100%;
}
.layout-elements-column-container {
	float: left;
}
#layout-container{

}
.sortable-panel {
	.box-sizing();

	height:auto;

	display:block;
	float:left;

	margin: 1px 0;
	padding: 10px 10px 10px 10px;
	width: 100% !important;
	min-height: 60px !important;

	color:@themeColor !important;
	.t-shadow( rgba(255, 255, 255, 0.8) 0px 1px );
}

.modal-settings {
	margin: 1px;
	padding: 1px;
	min-height: 60px;
	display: none;
	z-index: 2000;
}
.cell-element {
	.box-sizing();
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	color:@themeColor !important;

	border:1px solid #ccc;
	 #gradient > .vertical(#f6f6f6, #ededed);
	 box-shadow:inset 0 1px 0 0 #ffffff;

}
.cell-element-icon {
	float: right;
}
.cell-handle-icon {
	cursor: hand;
	cursor: pointer;
	float: left;
	clear: right;
}
.row-element-icon {
	float: right;
	clear: right;
}
.row-handle-icon {
	cursor: hand;
	cursor: pointer;
	float: left;
	clear: right;
}
.panel-element-icon {
	clear: none;
	float: right;
}
.panel-handle-icon {
	cursor: hand;
	cursor: pointer;
	float: left;
}
//check
.sortable-row-list-container ul {
	list-style-type: none;
	clear: both;
	margin: 5px 5px 5px 20px;
	height: 60px;
	> li{
		min-height: 60px;
		margin-bottom: 5px;
	}
}

.sortable-row-list{
	color:@themeColor !important;
	//.designerBlock();
}

.layout-single-column {
	margin: 15px 5px;
	height: 30px;
	line-height:30px;
	float: left;
	width:100%;
	.box-sizing();
	&.droppable-cell-container{
		width:90%;
		.box-sizing();
	}
}
.layout-double-column {
	.box-sizing();
	margin: 15px 5px;
	line-height:30px;
	width: 45%;
	height: 30px;
	float: left;
}

.panel-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	clear: both;
	min-height: 60px;
	> li {
		min-height: 60px;
		margin-bottom: 5px;
	}
}
#sortable-editable-dropdown-collection li {
	height: auto;
	font-size: 1em;
}

.ui-icon-trash{
	&:after{
		content:"_";
		.symbly(22px);
		text-indent:0;
		display:block;
		float:right;
		color:#A7A7A7;
		margin:0;
		padding:0 2px;
	}
}
.ui-icon-circle-minus{
	&:after{
		content:"S";
		.symbly(22px);
		text-indent:0;
		display:block;
		float:right;
		color:#A7A7A7;
		margin:0;
		padding:0 2px;
	}
}
.ui-icon-circle-plus{
	&:after{
		content:"Y";
		.symbly(22px);
		text-indent:0;
		display:block;
		float:right;
		color:#A7A7A7;
		margin:0;
		padding:0 2px;
	}
}

.ui-icon-arrow-4{
	display:block;
	&:after{
		content:"K";
		.symbly(22px);
		text-indent:0;
		display:block;
		float:right;
		color:#A7A7A7;
		margin:0;
		padding:0 2px;
	}
}
.ui-icon-wrench{
	display:block;
	&:after{
		content:"n";
		.symbly(22px);
		text-indent:0;
		display:block;
		float:right;
		color:#A7A7A7;
		margin:0;
		padding:0 2px;
	}
}

.ui-icon{

}

#layout-container{

	.ui-draggable-disabled.ui-state-disabled{
		opacity:0.2 !important;
		background:pink !important;
	}

	.ui-state-highlight,
	.ui-widget-content .ui-state-highlight,
	.ui-widget-header .ui-state-highlight{
	    border:1px solid #fcefa1;
	    background:#fbf9ee;
	    color:#363636 ;
	}

	.ui-state-highlight a,
	.ui-widget-content .ui-state-highlight a,
	.ui-widget-header .ui-state-highlight a{
    	color:#363636 ;
	}

	.droppable-cell-container{
		background:#EFEFEF;
	}

	.ui-widget-header{
	    font-weight:bold;
	}

	.ui-widget-header a{}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default{
		//border:1px solid red;
	    font-weight:normal;
	    .designerBlock();
	}

	.ui-state-default a,
	.ui-state-default a:link,
	.ui-state-default a:visited{
	    text-decoration:none;
	}

	.ui-state-hover,
	.ui-widget-content .ui-state-hover,
	.ui-widget-header .ui-state-hover,
	.ui-state-focus,
	.ui-widget-content .ui-state-focus,
	.ui-widget-header .ui-state-focus{
	}

	.ui-state-hover a,
	.ui-state-hover a:hover{
	    text-decoration:none;
	}

	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active{
	    z-index:9999;
	    color:#212121;
	     .b-shadow(0 0 1px 1px @themeColor);
	}

}

error: pathspec 'app/themes/default/css/designer.less' did not match any file(s) known to git


remove extra animations mixin

remove extra animations mixin

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


change discourse-comments bg-color to white

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


//** `.form-group` margin Bug bootstrap : @form-group-margin-bottom to define

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/GregDesplaces/classe-1914.git/'


rtl for More button on devhub dashboard

rtl for More button on devhub dashboard

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


added colors.less

added colors.less

.background-primary {
	background-color: @primary-color @important;
}

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


Add block multiple choice style

Add block multiple choice style

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


cleaned up

cleaned up

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


row margin

row margin

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


Fixed all-breakpoints "block" label 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/wUFr/LUI.git/'


Create helper-classes.less

Create helper-classes.less

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


Minor fix

Minor fix

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


Add border to menubar area on screenshot page

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


Create gap.less

Create gap.less

// Gap
// ----------------------------------------------------------------------------/
.gap(@gap: @wrapper-gap; @base: @font-size; @unit: rem) {

    & when not (@gap = false) {

        & when (@unit = %) {
            gap: percentage((@gap / @base));
        }

        & when (@unit = vw), (@unit = vh) {
            gap: unit(((@gap / @base) * 100), @unit);
        }

        & when (@unit = em), (@unit = rem) {
            gap: unit((@gap / @base), @unit);
        }

        & when (@unit = none) {
            gap: unit((@gap / @base));
        }

    }

}

.row-gap(@gap: @wrapper-gap; @base: @font-size; @unit: rem) {

    & when not (@gap = false) {

        & when (@unit = %) {
            row-gap: percentage((@gap / @base));
        }

        & when (@unit = vw), (@unit = vh) {
            row-gap: unit(((@gap / @base) * 100), @unit);
        }

        & when (@unit = em), (@unit = rem) {
            row-gap: unit((@gap / @base), @unit);
        }

        & when (@unit = none) {
            row-gap: unit((@gap / @base));
        }

    }

}

.column-gap(@gap: @wrapper-gap; @base: @font-size; @unit: rem) {

    & when not (@gap = false) {

        & when (@unit = %) {
            column-gap: percentage((@gap / @base));
        }

        & when (@unit = vw), (@unit = vh) {
            column-gap: unit(((@gap / @base) * 100), @unit);
        }

        & when (@unit = em), (@unit = rem) {
            column-gap: unit((@gap / @base), @unit);
        }

        & when (@unit = none) {
            column-gap: unit((@gap / @base));
        }

    }

}

error: pathspec 'css/core/mixins/properties/gap.less' did not match any file(s) known to git


Scale preview images on hover.

Scale preview images on hover.

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/gmist/five-studio2.git/'


Narrow wrapper within section

Narrow wrapper within section

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


Always show scroll

Always show scroll

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/onechiporenko/gce-ui.git/'


Add Machine Types Popup

Add Machine Types Popup


INBOX-70 Fix backgroud color droptarget class

Correction bug ellipsisNotHighlighted.png, if the folder is too long, then it's truncated with "..." at the beginning and when dropping this "..."has no orange background

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


added 'now' series

added 'now' series

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


updated subtitle

updated subtitle

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


Always display body scrollbar on desktop

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/sonatra/sonatra-theme-gluon.git/'


Section media queries for medium size screens


Making active line number bg darker based on @njx's feedback.

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

/*
 * Brackets Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Overall Colors */

/*
 * Background colors are ordered from least "intense" to most "intense"
 * So, if the background is light, then @background-color-3 should be
 * lightest, -2 should be darker, and -1 should be darker still.
 *
 * The opposite is true for a dark background -- background-color-3 should be
 * the darkest, -2 should be lighter, and -1 should be lighter still.
 */
@background-color-1: darken(@bc-white, @bc-color-step-size*2);
@background-color-2: darken(@bc-white, @bc-color-step-size);
@background-color-3: #f8f8f8;

/*
 * @content-color-stronger should be should be further away from the
 * background color than @content-color (i.e. more contrasty).
 *
 * @content-color-weaker should be closer to the background color
 * than @content-color (i.e. less contrasty).
 */
@content-color: #535353;
@content-color-stronger: @bc-black;
@content-color-weaker: lighten(@bc-black, @bc-color-step-size*6);

/* Code Styling */

/* code accent colors */
@accent-keyword: #446fbd;
@accent-atom: #f18900;
@accent-number: #738d00;
@accent-def: #8757ad;
@accent-variable: #535353;
@accent-variable-2: #535353;
@accent-variable-3: #535353;
@accent-property: #8757ad;
@accent-operator: #535353;
@accent-comment: #949494;
@accent-string: #f18900;
@accent-string-2: #f18900;
@accent-meta: #535353;
@accent-error: #dc322f;
@accent-qualifier: #446fbd;
@accent-builtin: #446fbd;
@accent-bracket: #222;
@accent-tag: #446fbd;
@accent-attribute: #738d00;
@accent-header: #d33682;
@accent-quote: #446fbd;
@accent-hr: #f18900;
@accent-link: #8757ad;
@accent-rangeinfo: #6c71c4;
@accent-minus: #dc322f;
@accent-plus: #859900;
@match-text: #121212;
@cm-match-highlight: rgba(244, 237, 98, 0.7);
@cm-current-match-highlight: rgb(255, 108, 0);

/* code highlight */
@matching-bracket: #cfead6;

/* inline editor colors */
@inline-background-color-1: #eaeaea;
@inline-background-color-2: #dfe2e2;
@inline-background-color-3: #d0d5d5;

@inline-color-1: #a1a3a4;
@inline-color-2: #8a8a8a;
@inline-color-3: @bc-black;

/* sidebar/toolbar colors */
@project-panel-base-color: #3C3F41;
@project-panel-text-1: #ffffff;
@project-panel-text-2: #94A3A7;
@main-toolbar-background-color: #5D5F60;

/* open working file highlight */
@open-working-file-name-highlight: #8fddff;
@open-working-file-ext-highlight: #8fddff;

/* selection colors */
@selection-color-focused: #abdffa;
@selection-color-unfocused: #d5dee3;

/* background color of the line that has the cursor */
@activeline-bgcolor: #ebefef;
@activeline-number-bgcolor: #dde4e5;

/* custom scrollbar colors */
@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24);
@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);

/* live preview */
@live-preview-sync-error-background: #ff5d99;
@live-preview-sync-error-color: @bc-white;

/* Code font formatting
 *
 * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that
 * is styled with .code-font().
 *
 * The platform-specific selector gets added to the body tag *before* document ready time.
 * We rely on this behavior to load platform-specific web fonts early.
 */
.code-font() {
    color: @content-color;
    // line-height must be specified in px not em because the code font and line number font sizes are different.
    // Sizing via em will cause the code and line numbers to misalign
    line-height: 15px;
    font-size: 12px;
    font-family: "SourceCodePro-Medium", "ＭＳ ゴシック", "MS Gothic", monospace;
}

.code-font-win() {
}

.code-font-mac() {
}

.code-cursor() {
    // to make a block cursor, use something like this:
    // background-color: fadeout(@blue, 50%);
    // border: none !important;

    // to make an I-cursor, use something like this:
    border-left: 1px solid black !important;

}

/* Variables and Mixins for non-code UI elements that can be styled */

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

/*
 * Brackets Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Overall Colors */

/*
 * Background colors are ordered from least "intense" to most "intense"
 * So, if the background is light, then @background-color-3 should be
 * lightest, -2 should be darker, and -1 should be darker still.
 *
 * The opposite is true for a dark background -- background-color-3 should be
 * the darkest, -2 should be lighter, and -1 should be lighter still.
 */
@background-color-1: darken(@bc-white, @bc-color-step-size*2);
@background-color-2: darken(@bc-white, @bc-color-step-size);
@background-color-3: #f8f8f8;

/*
 * @content-color-stronger should be should be further away from the
 * background color than @content-color (i.e. more contrasty).
 *
 * @content-color-weaker should be closer to the background color
 * than @content-color (i.e. less contrasty).
 */
@content-color: #535353;
@content-color-stronger: @bc-black;
@content-color-weaker: lighten(@bc-black, @bc-color-step-size*6);

/* Code Styling */

/* code accent colors */
@accent-keyword: #446fbd;
@accent-atom: #f18900;
@accent-number: #738d00;
@accent-def: #8757ad;
@accent-variable: #535353;
@accent-variable-2: #535353;
@accent-variable-3: #535353;
@accent-property: #8757ad;
@accent-operator: #535353;
@accent-comment: #949494;
@accent-string: #f18900;
@accent-string-2: #f18900;
@accent-meta: #535353;
@accent-error: #dc322f;
@accent-qualifier: #446fbd;
@accent-builtin: #446fbd;
@accent-bracket: #222;
@accent-tag: #446fbd;
@accent-attribute: #738d00;
@accent-header: #d33682;
@accent-quote: #446fbd;
@accent-hr: #f18900;
@accent-link: #8757ad;
@accent-rangeinfo: #6c71c4;
@accent-minus: #dc322f;
@accent-plus: #859900;
@match-text: #121212;
@cm-match-highlight: rgba(244, 237, 98, 0.7);
@cm-current-match-highlight: rgb(255, 108, 0);

/* code highlight */
@matching-bracket: #cfead6;

/* inline editor colors */
@inline-background-color-1: #eaeaea;
@inline-background-color-2: #dfe2e2;
@inline-background-color-3: #d0d5d5;

@inline-color-1: #a1a3a4;
@inline-color-2: #8a8a8a;
@inline-color-3: @bc-black;

/* sidebar/toolbar colors */
@project-panel-base-color: #3C3F41;
@project-panel-text-1: #ffffff;
@project-panel-text-2: #94A3A7;
@main-toolbar-background-color: #5D5F60;

/* open working file highlight */
@open-working-file-name-highlight: #8fddff;
@open-working-file-ext-highlight: #8fddff;

/* selection colors */
@selection-color-focused: #abdffa;
@selection-color-unfocused: #d5dee3;

/* background color of the line that has the cursor */
@activeline-bgcolor: #ebefef;
@activeline-number-bgcolor: #e2e9ea;

/* custom scrollbar colors */
@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24);
@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);

/* live preview */
@live-preview-sync-error-background: #ff5d99;
@live-preview-sync-error-color: @bc-white;

/* Code font formatting
 *
 * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that
 * is styled with .code-font().
 *
 * The platform-specific selector gets added to the body tag *before* document ready time.
 * We rely on this behavior to load platform-specific web fonts early.
 */
.code-font() {
    color: @content-color;
    // line-height must be specified in px not em because the code font and line number font sizes are different.
    // Sizing via em will cause the code and line numbers to misalign
    line-height: 15px;
    font-size: 12px;
    font-family: "SourceCodePro-Medium", "ＭＳ ゴシック", "MS Gothic", monospace;
}

.code-font-win() {
}

.code-font-mac() {
}

.code-cursor() {
    // to make a block cursor, use something like this:
    // background-color: fadeout(@blue, 50%);
    // border: none !important;

    // to make an I-cursor, use something like this:
    border-left: 1px solid black !important;

}

/* Variables and Mixins for non-code UI elements that can be styled */


centerd controls

centerd controls

@import "mixins.less";

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

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

  .albumart  {
    position: fixed;
    bottom: 10px;
    left: 10px;
    height: auto;
    max-width: 130px;
    .box-shadow(#000, 0, 0, 15px);
  }

  .episodeart  {
    float: left;
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 200px;
    height: auto;
    .box-shadow(#000, 0, 0, 15px);
  }

  .posterart  {
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 100px;
    height: auto;
    .box-shadow(#000, 0, 0, 15px);
  }

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

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

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_artist  {
    float: left;
    position: relative;
    margin-left: 132px;
    line-height: 1.5em;
    width: 400px;

    .artist:hover,
    .album:hover  {
      border-bottom: 1px solid #555;
      cursor: pointer;
    }

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_show  {
    float: left;
    position: relative;
    margin-left: 202px;
    line-height: 1.5em;
    width: 400px;

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

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_movie  {
    float: left;
    position: relative;
    margin-left: 102px;
    line-height: 1.5em;
    width: 400px;
  }
  .controls {
    margin-left: 45%;
    width: 260px;

    div {
      margin: 2px;
      border: 2px solid #333;
      cursor: pointer;
      float: left;
      height: 33px;
      text-indent: -9999px;
      width: 33px;

      .border-radius(20px);

      &:hover {
        background-color: #333;
      }
    }

    .stop {
      background: #111 url(/static/images/player_buttons/stop.png) no-repeat center;
    }
    .play_pause {
      background: #111 url(/static/images/player_buttons/play_pause.png) no-repeat center;
    }
    .volume_up {
      background: #111 url(/static/images/player_buttons/volume_up.png) no-repeat center;
    }
    .volume_down {
      background: #111 url(/static/images/player_buttons/volume_down.png) no-repeat center;
    }
    .mute {
      background: #111 url(/static/images/player_buttons/mute.png) no-repeat center;
    }
    .next {
      background: #111 url(/static/images/player_buttons/next.png) no-repeat center;
    }
    .previous {
      background: #111 url(/static/images/player_buttons/previous.png) no-repeat center;
    }
    .fast_forward {
      background: #111 url(/static/images/player_buttons/fast_forward.png) no-repeat center;
    }
    .rewind {
      background: #111 url(/static/images/player_buttons/rewind.png) no-repeat center;
    }
    .shuffle {
      margin-left: 15px;
      background: #111 url(/static/images/player_buttons/shuffle.png) no-repeat center;
    }
    .repeat {
      background: #111 url(/static/images/player_buttons/repeat.png) no-repeat center;
    }

    #active {
      background-color: #444;
    }

    #repeat_one {
      background: #444 url(/static/images/player_buttons/repeat_one.png) no-repeat center;
    }

    #repeat_all {
      background: #444 url(/static/images/player_buttons/repeat_all.png) no-repeat center;
    }
  }

  .progress {
    float: right;
    font-size: 0.9em;
    height: 40px;
    position: relative;
    width: 400px;
    cursor: pointer;

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

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

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

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

    #tooltip {
      width:80px;
      padding:5px;
      border-radius:4px;
      border: 1px dashed white;
      text-align: center;
      margin-top: 5px;
    }
  }

  .synopsis {
    display: none;
  }
}

@import "mixins.less";

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

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

  .albumart  {
    position: fixed;
    bottom: 10px;
    left: 10px;
    height: auto;
    max-width: 130px;
    .box-shadow(#000, 0, 0, 15px);
  }

  .episodeart  {
    float: left;
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 200px;
    height: auto;
    .box-shadow(#000, 0, 0, 15px);
  }

  .posterart  {
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 100px;
    height: auto;
    .box-shadow(#000, 0, 0, 15px);
  }

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

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

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_artist  {
    float: left;
    position: relative;
    margin-left: 132px;
    line-height: 1.5em;
    width: 400px;

    .artist:hover,
    .album:hover  {
      border-bottom: 1px solid #555;
      cursor: pointer;
    }

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_show  {
    float: left;
    position: relative;
    margin-left: 202px;
    line-height: 1.5em;
    width: 400px;

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

    .separator {
      margin: 0 3px;
    }
  }

  .item_info_movie  {
    float: left;
    position: relative;
    margin-left: 102px;
    line-height: 1.5em;
    width: 400px;
  }
  .controls {
    margin: 0 auto;

    div {
      margin: 2px;
      border: 2px solid #333;
      cursor: pointer;
      float: left;
      height: 33px;
      text-indent: -9999px;
      width: 33px;

      .border-radius(20px);

      &:hover {
        background-color: #333;
      }
    }

    .stop {
      background: #111 url(/static/images/player_buttons/stop.png) no-repeat center;
    }
    .play_pause {
      background: #111 url(/static/images/player_buttons/play_pause.png) no-repeat center;
    }
    .volume_up {
      background: #111 url(/static/images/player_buttons/volume_up.png) no-repeat center;
    }
    .volume_down {
      background: #111 url(/static/images/player_buttons/volume_down.png) no-repeat center;
    }
    .mute {
      background: #111 url(/static/images/player_buttons/mute.png) no-repeat center;
    }
    .next {
      background: #111 url(/static/images/player_buttons/next.png) no-repeat center;
    }
    .previous {
      background: #111 url(/static/images/player_buttons/previous.png) no-repeat center;
    }
    .fast_forward {
      background: #111 url(/static/images/player_buttons/fast_forward.png) no-repeat center;
    }
    .rewind {
      background: #111 url(/static/images/player_buttons/rewind.png) no-repeat center;
    }
    .shuffle {
      background: #111 url(/static/images/player_buttons/shuffle.png) no-repeat center;
    }
    .repeat {
      background: #111 url(/static/images/player_buttons/repeat.png) no-repeat center;
    }

    #active {
      background-color: #444;
    }

    #repeat_one {
      background: #444 url(/static/images/player_buttons/repeat_one.png) no-repeat center;
    }

    #repeat_all {
      background: #444 url(/static/images/player_buttons/repeat_all.png) no-repeat center;
    }
  }

  .progress {
    float: right;
    font-size: 0.9em;
    height: 40px;
    position: relative;
    width: 400px;
    cursor: pointer;

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

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

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

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

    #tooltip {
      width:80px;
      padding:5px;
      border-radius:4px;
      border: 1px dashed white;
      text-align: center;
      margin-top: 5px;
    }
  }

  .synopsis {
    display: none;
  }
}


Added media query variables

Added media query variables

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/19hz/material-ui.git/'


Added white border

Added white border

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/Fabio-Gambacorta/aniem-abruzzo.git/'


fixed the vertical alignment and the margin top, because needed a correction

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


Update landing page with new var path links and remove legacy box campaign styling

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


Create text-emphasis.less

Create text-emphasis.less

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


Added reponsive.less

Added reponsive.less

Added reponsive.less for easy variables

fatal: unable to access 'https://github.com/hesselberg/novicell-frontend.git/': The requested URL returned error: 403


fixed taskbar, tabs were stacking vertically instead of horizontally

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/cablelabs/dev-portal.git/'


OR-1841 Set dropup width

OR-1841 Set dropup width


Update z-index

Update z-index

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