Nitpicking

Nitpicking

// ------------------------------------
// Sidebar

@media @desktop, @desktop-hd {
  .index-nav {
    & .new-discussion {
      display: block;
      margin-bottom: 20px;
    }
  }
}

// ------------------------------------
// Results

.index-toolbar {
  margin-bottom: 15px;
}
.index-toolbar-view {
  &:extend(.list-inline);

  display: inline-block;
  margin: 0;
}
.index-toolbar-action {
  &:extend(.list-inline);

  float: right;
  margin: 0;
}

@media @phone, @tablet {
  .offset-content {
    margin-top: 15px;
  }
}

@media @desktop, @desktop-hd {
  .offset-content {
    margin-top: 30px;
    margin-left: 225px;
  }
}

// ------------------------------------
// Discussions Pane

@media @phone {
  .index-area.paned {
    display: none;
  }
}

@media @tablet, @desktop, @desktop-hd {
  .index-area {
    left: -@index-pane-width;
    width: 100%;

    &.paned {
      position: fixed;
      z-index: @zindex-pane;
      overflow: auto;
      top: @header-height;
      bottom: 0;
      width: @index-pane-width;
      background: @fl-body-bg;
      padding-bottom: 40px;
      border-top: 1px solid @fl-body-control-bg;
      .box-shadow(2px 2px 6px -2px @fl-shadow-color);
      .transition(left 0.2s);

      .pane-showing & {
        left: 0;
      }
      & .container {
        width: auto;
        margin: 0;
        padding: 0 !important;
      }
      & .index-results {
        margin: 0;
      }
      & .hero, & .index-nav, & .index-toolbar {
        display: none;
      }
      & .discussion-list-item {
        margin: 0;
        padding: 0;

        &.active {
          background: @fl-body-control-bg;
        }
      }
      & .discussion-summary {
        padding-left: 57px + 15px;
        padding-right: 65px + 15px;

        & .title {
          font-size: 14px;
        }
        & .relevant-posts {
          display: none;
        }
      }
    }
  }
}

@media @desktop-hd {
  .index-area.paned {
    .pane-pinned & {
      left: 0;
      z-index: @zindex-composer - 1;
      .transition(none);
    }
  }
  // When the pane is pinned, move the other page content inwards
  .global-content, .global-footer {
    .has-pane.pane-pinned & {
      margin-left: @index-pane-width;
      & .container {
        max-width: 100%;
        padding: 0 30px;
      }
    }
  }
  .global-header .container {
    .has-pane.pane-pinned & {
      width: 100%;
    }
  }
}

// ------------------------------------
// Discussions List

.discussion-list {
  & .loading-indicator {
    height: 46px;
  }

  & > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
  }
}

@media @phone {
  .discussion-list {
    margin: 0 -15px;
  }
}

.discussion-summary {
  position: relative;

  &, & .main {
    color: @fl-body-muted-color;
    text-decoration: none;
  }
  & .author {
    float: left;
    margin-top: 15px;
  }
  & .tooltip .tooltip-inner {
    max-width: none;
  }
  & .badges {
    float: left;
    margin-top: 10px;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;

    & .badge {
      margin-left: -15px;
      position: relative;
      pointer-events: auto;
    }
  }
  & .main {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
  }
  &:hover .title {
    text-decoration: underline;
  }
  & .title {
    margin: 0 0 5px;
    line-height: 1.3;
    color: @fl-body-heading-color;
  }
  &.unread .title {
    font-weight: bold;
  }
  & .info {
    list-style-type: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;

    & > li {
      display: inline;
    }
  }
  & .username {
    font-weight: bold;
  }
  & .count {
    float: right;
    margin-top: 12px;
    text-decoration: none;

    .unread& {
      cursor: pointer;
    }
  }
  & .relevant-posts {
    margin-bottom: 20px;

    @media @phone {
      margin-left: -45px;
      margin-right: -35px;
    }

    & .post-preview {
      background: @fl-body-secondary-color;
      display: block;
      padding: 10px 15px;
      border-bottom: 2px dotted @fl-body-bg;

      & .avatar, & time {
        display: none;
      }
      & .post-preview-content {
        padding-left: 0;
      }
      &:first-child {
        border-radius: @border-radius-base @border-radius-base 0 0;
      }
      &:hover {
        background: darken(@fl-body-secondary-color, 3%);
        text-decoration: none;
      }
    }
  }
}
.load-more {
  text-align: center;
  margin-top: 10px;
}

@media @phone {
  .discussion-summary {
    padding-left: 15px + 45px;
    padding-right: 15px + 35px;

    &:active {
      background: @fl-body-secondary-color;
    }

    & .author {
      margin-left: -45px;
    }
    & .badges {
      margin-left: -45px;
      width: 38px;

      & .badge {
        .badge-size(20px);
        margin-left: -13px;
      }
    }
    & .avatar {
      .avatar-size(32px);
    }
    & .main {
      margin-right: -45px;
    }
    & .title {
      font-size: 14px;
      text-decoration: none !important;
    }
    & .count {
      margin-right: -35px;
      background: @fl-body-control-bg;
      color: @fl-body-control-color;
      border-radius: @border-radius-base;
      font-size: 12px;
      padding: 2px 6px;

      .unread& {
        background: @fl-body-primary-color;
        color: #fff;
        font-weight: bold;

        &:active {
          opacity: 0.5;
        }
      }

      & .label {
        display: none;
      }
    }
  }
}

.slidable {
  position: relative;

  & .contextual-controls {
    display: block;
    position: static;
  }

  & .slidable-underneath {
    display: none;
    background: @fl-secondary-color !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 0;
    color: #fff !important;
    border: 0;
    border-radius: 0;
    .box-shadow(none);
    padding: 20px 0;
    text-align: right;

    &.slidable-underneath-left {
      text-align: left;
    }

    & .icon {
      width: 50px;
      text-align: center;
      font-size: 20px;
    }
  }
  & .slidable-slider {
    .transition(~"box-shadow 0.2s, border-radius 0.2s");

    .sliding& {
      position: relative;
      background: #fff;
      z-index: 2;
      border-radius: 2px;
      .box-shadow(0 2px 6px @fl-shadow-color);
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .slidable-underneath {
    display: none;
  }
  .discussion-list-item {
    position: relative;
    margin-right: -25px;
    padding-right: 25px;

    & .contextual-controls {
      visibility: hidden;
      position: absolute;
      right: 0;
      top: 8px;
      z-index: 1;

      & .dropdown-toggle {
        display: block;
      }
    }
    &:hover .contextual-controls, & .contextual-controls.open {
      visibility: visible;
    }
  }
  .discussion-summary {
    padding-left: 57px;
    padding-right: 65px;

    & .author {
      margin-left: -57px;
    }
    & .badges {
      margin-left: -55px;
      width: 48px;
    }
    & .avatar {
      .avatar-size(40px);
    }
    & .main {
      margin-right: -65px;
    }
    & .title {
      font-size: 16px;
    }
    & .count {
      margin-right: -65px;
      width: 60px;
      text-align: center;
      text-transform: uppercase;
      color: @fl-body-muted-color;
      font-size: 20px;
      font-weight: 300;

      & .label {
        font-size: 11px;
        display: block;
        font-weight: normal;
      }
      .unread& {
        color: @fl-body-heading-color;
        font-weight: bold;
      }
    }
  }
}

// ------------------------------------
// Sidebar

@media @desktop, @desktop-hd {
  .index-nav {
    & .new-discussion {
      display: block;
      margin-bottom: 20px;
    }
  }
}

// ------------------------------------
// Results

.index-toolbar {
  margin-bottom: 15px;
}
.index-toolbar-view {
  &:extend(.list-inline);

  display: inline-block;
  margin: 0;
}
.index-toolbar-action {
  &:extend(.list-inline);

  float: right;
  margin: 0;
}

@media @phone, @tablet {
  .offset-content {
    margin-top: 15px;
  }
}

@media @desktop, @desktop-hd {
  .offset-content {
    margin-top: 30px;
    margin-left: 225px;
  }
}

// ------------------------------------
// Discussions Pane

@media @phone {
  .index-area.paned {
    display: none;
  }
}

@media @tablet, @desktop, @desktop-hd {
  .index-area {
    left: -@index-pane-width;
    width: 100%;

    &.paned {
      position: fixed;
      z-index: @zindex-pane;
      overflow: auto;
      top: @header-height;
      bottom: 0;
      width: @index-pane-width;
      background: @fl-body-bg;
      padding-bottom: 40px;
      border-top: 1px solid @fl-body-control-bg;
      .box-shadow(2px 2px 6px -2px @fl-shadow-color);
      .transition(left 0.2s);

      .pane-showing & {
        left: 0;
      }
      & .container {
        width: auto;
        margin: 0;
        padding: 0 !important;
      }
      & .index-results {
        margin: 0;
      }
      & .hero, & .index-nav, & .index-toolbar {
        display: none;
      }
      & .discussion-list-item {
        margin: 0;
        padding: 0;

        &.active {
          background: @fl-body-control-bg;
        }
      }
      & .discussion-summary {
        padding-left: 57px + 15px;
        padding-right: 65px + 15px;

        & .title {
          font-size: 14px;
        }
        & .relevant-posts {
          display: none;
        }
      }
    }
  }
}

@media @desktop-hd {
  .index-area.paned {
    .pane-pinned & {
      left: 0;
      z-index: @zindex-composer - 1;
      .transition(none);
    }
  }
  // When the pane is pinned, move the other page content inwards
  .global-content, .global-footer {
    .has-pane.pane-pinned & {
      margin-left: @index-pane-width;
      & .container {
        max-width: 100%;
        padding: 0 30px;
      }
    }
  }
  .global-header .container {
    .has-pane.pane-pinned & {
      width: 100%;
    }
  }
}

// ------------------------------------
// Discussions List

.discussion-list {
  & .loading-indicator {
    height: 46px;
  }

  & > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
  }
}

@media @phone {
  .discussion-list {
    margin: 0 -15px;
  }
}

.discussion-summary {
  position: relative;

  &, & .main {
    color: @fl-body-muted-color;
    text-decoration: none;
  }
  & .author {
    float: left;
    margin-top: 16px;
  }
  & .tooltip .tooltip-inner {
    max-width: none;
  }
  & .badges {
    float: left;
    margin-top: 13px;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;

    & .badge {
      margin-left: -15px;
      position: relative;
      pointer-events: auto;
    }
  }
  & .main {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
  }
  &:hover .title {
    text-decoration: underline;
  }
  & .title {
    margin: 0 0 5px;
    line-height: 1.3;
    color: @fl-body-heading-color;
  }
  &.unread .title {
    font-weight: bold;
  }
  & .info {
    list-style-type: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;

    & > li {
      display: inline;
    }
  }
  & .username {
    font-weight: bold;
  }
  & .count {
    float: right;
    margin-top: 12px;
    text-decoration: none;

    .unread& {
      cursor: pointer;
    }
  }
  & .relevant-posts {
    margin-bottom: 20px;

    @media @phone {
      margin-left: -45px;
      margin-right: -35px;
    }

    & .post-preview {
      background: @fl-body-secondary-color;
      display: block;
      padding: 10px 15px;
      border-bottom: 2px dotted @fl-body-bg;

      & .avatar, & time {
        display: none;
      }
      & .post-preview-content {
        padding-left: 0;
      }
      &:first-child {
        border-radius: @border-radius-base @border-radius-base 0 0;
      }
      &:hover {
        background: darken(@fl-body-secondary-color, 3%);
        text-decoration: none;
      }
    }
  }
}
.load-more {
  text-align: center;
  margin-top: 10px;
}

@media @phone {
  .discussion-summary {
    padding-left: 15px + 45px;
    padding-right: 15px + 35px;

    &:active {
      background: @fl-body-secondary-color;
    }

    & .author {
      margin-left: -45px;
    }
    & .badges {
      margin-left: -45px;
      width: 38px;

      & .badge {
        .badge-size(20px);
        margin-left: -13px;
      }
    }
    & .avatar {
      .avatar-size(32px);
    }
    & .main {
      margin-right: -45px;
    }
    & .title {
      font-size: 14px;
      text-decoration: none !important;
    }
    & .count {
      margin-right: -35px;
      background: @fl-body-control-bg;
      color: @fl-body-control-color;
      border-radius: @border-radius-base;
      font-size: 12px;
      padding: 2px 6px;

      .unread& {
        background: @fl-body-primary-color;
        color: #fff;
        font-weight: bold;

        &:active {
          opacity: 0.5;
        }
      }

      & .label {
        display: none;
      }
    }
  }
}

.slidable {
  position: relative;

  & .contextual-controls {
    display: block;
    position: static;
  }

  & .slidable-underneath {
    display: none;
    background: @fl-secondary-color !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 0;
    color: #fff !important;
    border: 0;
    border-radius: 0;
    .box-shadow(none);
    padding: 20px 0;
    text-align: right;

    &.slidable-underneath-left {
      text-align: left;
    }

    & .icon {
      width: 50px;
      text-align: center;
      font-size: 20px;
    }
  }
  & .slidable-slider {
    .transition(~"box-shadow 0.2s, border-radius 0.2s");

    .sliding& {
      position: relative;
      background: #fff;
      z-index: 2;
      border-radius: 2px;
      .box-shadow(0 2px 6px @fl-shadow-color);
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .slidable-underneath {
    display: none;
  }
  .discussion-list-item {
    position: relative;
    margin-right: -25px;
    padding-right: 25px;

    & .contextual-controls {
      visibility: hidden;
      position: absolute;
      right: 0;
      top: 8px;
      z-index: 1;

      & .dropdown-toggle {
        display: block;
      }
    }
    &:hover .contextual-controls, & .contextual-controls.open {
      visibility: visible;
    }
  }
  .discussion-summary {
    padding-left: 57px;
    padding-right: 65px;

    & .author {
      margin-left: -57px;
    }
    & .badges {
      margin-left: -57px;
      width: 48px;
    }
    & .avatar {
      .avatar-size(40px);
    }
    & .main {
      margin-right: -65px;
    }
    & .title {
      font-size: 16px;
    }
    & .count {
      margin-right: -65px;
      width: 60px;
      text-align: center;
      text-transform: uppercase;
      color: @fl-body-muted-color;
      font-size: 20px;
      font-weight: 300;

      & .label {
        font-size: 11px;
        display: block;
        font-weight: normal;
      }
      .unread& {
        color: @fl-body-heading-color;
        font-weight: bold;
      }
    }
  }
}


Conversation link textarea width

Conversation link textarea width

@import "../vendor/bootstrap/variables.less";
@import "../vendor/bootstrap/mixins.less";
@import "include/variables.less";
@import "include/mixins.less";

div.ccm-conversation-avatar {
  width: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-right: 10px;

  img {
    .border-radius(4px);
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

div.ccm-conversation-message-form {
  ul.redactor_toolbar {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  .redactor_editor {
    padding: 10px;
    border: 1px solid #eee;
  }
}

.cnv-admin-pane {
  position: absolute;
  right: 0;
  top: -10px;
  a.dropdown-toggle {
    font-size: 10px;
  }
  ul.dropdown-menu {
    left: auto;
    right: 0;

    a.admin-edit {
      color: #00cc66;
      &:hover {
        color: white;
      }
    }

    a.admin-delete {
      color: #ff7070;
      &:hover {
        color: white;
      }
    }

  }
}

.ccm-conversation-message-count {
}

div.ccm-conversation-messages-header {
  .clearfix();
  margin-bottom: 15px;

  select.ccm-sort-conversations {
    font-size: @fontSizeSmall;
    width: auto;
    margin-top: 10px;
    float: right;
  }
}

div.ccm-conversation-add-reply, div.ccm-conversation-add-new-message, div.ccm-conversation-edit-message {
  clear: both;
  .clearfix();
  position: relative;

  form {
    margin-bottom: 0px;
  }

  div.ccm-conversation-message-form {
    padding-left: 50px;
    .clearfix();
    textarea {
      .box-sizing(border-box);
      width: 100%;
      font-size: @fontSizeSmall;
      height: 80px;
    }

    .ccm-conversation-attachment-toggle {
      float: right;
      .opacity(0.7);
      &.btn-success {
        border-top: 0;
        border-bottom: 0;
      }
    }

    button {
      margin: 16px 0 0 16px;
    }
  }
}

div.ccm-conversation-add-new-message {
  margin-bottom: 20px;
}

div.ccm-conversation-add-reply {
  display: none;
  margin-top: 20px;
}

div.ccm-conversation-attachment-container {
  margin-top: 20px;
  .dropzone {
    border: 1px dashed @grayLight;
  }
}

div.ccm-conversation-errors {
  display: none;
}

div.ccm-conversation-message-list {

  div.ccm-conversation-delete-message {
    display: none;
  }

  div.ccm-conversation-delete-attachment {
    display: none;
  }

}

div.ccm-conversation-dialog {
  textarea {
    width: 100%;
  }

  div.ui-dialog-buttonset {
    float: none !important;
  }
}

div.ccm-conversation-message.ccm-conversation-message-topic {
  padding-left: 0px;
}

div.ccm-conversation-message {
  position: relative;
  .clearfix();
  padding-top: 0px;
  padding-bottom: 20px;
  padding-right: 0px;
  padding-left: 50px;
  div.ccm-conversation-message-byline {
    padding: 0px 8px 8px 8px;
    color: #9f9f9f;
    margin-bottom: 0;
    span.ccm-conversation-message-date {
      color: #9f9f9f;
    }
    span.ccm-conversation-message-username {
      font-weight: bold;
      color: #0099ff;
    }
    span.ccm-conversation-message-divider {
      padding: 0px 10px 0px 10px;
    }

  }

  .message-attachments {

    .clearfix();
    .attachment-container {
      position: relative;
      background: #f9f9f9;
      border: 1px solid #cccccc;
      .border-radius(4px);
      display: block;
      .clearfix();
      margin-bottom: 20px;

      .attachment-preview-container {
        width: 90px;
        min-height: 90px;
        float: left;
      }

      .image-popover-hover {
        top: 0;
        left: 0;
        position: absolute;
        background: transparent;
        width: 90px;
        height: 90px;
        .border-top-left-radius(4px);
        .border-bottom-left-radius(4px);
        cursor: pointer;
        .glyph-container {
          padding: 8px 0px 0px 10px;
          color: #fff;
          display: none;
          margin: 29px 0px 0px 27px;
          background-color: black;
          .border-radius(4px);
          width: 36px;
          height: 36px;
          i {
            margin-left: 1px;
          }
        }
        &:hover {
          background: #0a5d99;
          .opacity(0.8);
          .glyph-container {
            display: block;
          }
        }
      }

      img {
        float: left;
        .border-top-left-radius(4px);
        .border-bottom-left-radius(4px);
      }

      p.image-preview {
        display: block;
        float: left;
        padding: 20px 0px 10px 20px;
      }
    }
  }

  .ccm-conversation-message-body {
    padding: 0px 8px;
  }

  div.ccm-conversation-message-controls {
    //border-top: 1px dotted #afafaf;
    padding: 0px 0px 0px 8px;
    color: #999;

    a.ccm-conversation-message-control-icon {
      color: #999;
    }

    a.ccm-conversation-message-control-icon:hover {
      color: #333;
    }

    .ccm-conversation-social-share {
      display: none;
    }

    .clearfix();
    span.control-divider {
      display: block;
      padding: 8px;
      float: left;
      margin-left: 15px;
    }

    li:first-child {
      margin-left: 0;
    }

    ul {
      float: left;
      list-style-type: none;
      margin: 0px;
      padding: 0px;

      li {
        display: inline-block;
        margin-left: 20px;

        &.dropdown {
          margin-left: 0px;
        }
      }

      a {
        // make them stack nicely next to the bootstrap dropdown toggle
        padding-top: 8px;
        padding-bottom: 8px;
        display: block;
      }

    }

    .icon-thumbs-up {

    }

  }

}

div.ccm-conversation-message-deleted,
div.ccm-conversation-message-flagged {
  .opacity(30);
}

div.ccm-conversation-message:hover {
  .ccm-conversation-message-admin-control {
    display: inline-block;
  }
}

.ccm-conversation-message-admin-control {
  display: none;
}

div.ccm-conversation-message {
  &:hover {
    div.ccm-conversation-message-controls {
      .ccm-conversation-social-share {
        display: inline-block;
      }
    }
  }

}

div.ccm-conversation-messages-threaded {

  div.ccm-conversation-message-level0 {
    margin-left: 0px;
  }

  div.ccm-conversation-message-level1 {
    margin-left: 50px;
  }

  div.ccm-conversation-message-level2 {
    margin-left: 100px;
  }

  div.ccm-conversation-message-level3 {
    margin-left: 150px;
  }

  div.ccm-conversation-message-level4 {
    margin-left: 200px;
  }

}

div.ccm-conversation-form-submitted {
  .opacity(40);
}

div.ccm-conversation-load-more-messages {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

/**
 * Basic editor styles
 */

.conversation-editor {
  height: 200px;
}

/**
 * Discussions
 */
ul.ccm-discussion-topics {
  list-style-type: none;
  margin: 0px 0px 20px 0px;
  padding: 0px;

  li {
    display: block;
    padding: 4px 4px 10px 80px;
    position: relative;
    min-height: 60px;
    border-bottom: 1px inset #ccc;

    div.ccm-discussion-topic-replies {
      position: absolute;
      top: 18px;
      left: 0px;
      height: 62px;
      width: 62px;
      text-align: center;

      em {
        font-size: 1.6em;
        font-style: normal;
        display: block;
        line-height: 1em;
        color: #999;
        margin: 5px auto 0px auto;
      }

      font-size: 0.9em;
      color: #999;

    }

    div.ccm-discussion-topic-details {
      color: #444;
    }
  }

  h3 {
    font-size: 1.4em;
    line-height: 1.4em;
    margin-bottom: 2px;
  }
}

div.ccm-discussion {
  select.ccm-discussion-order-by {
    float: right;
    margin-right: 10px;
  }
}

.dropzone,
.dropzone * {
  .box-sizing(border-box);
}

.dropzone {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.03);
  min-height: 160px;
  .border-radius(3px);
  background: rgba(0, 0, 0, 0.03);
  padding: 23px;

  &.drag-hover {
    border-color: green;
    background: green;
  }

  &.clickable {
    cursor: pointer;
  }

  &.drag-hover {
    border-color: green;
    background: green;
  }

  &.started .message {
    display: none;
  }

  .message {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  .preview {
    .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.16));
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    display: inline-block;
    margin: 17px;
    vertical-align: top;
    border: 1px solid #acacac;
    padding: 6px 6px 28px 6px;
    &.image-preview:hover {
      .details {
        img {
          display: block;
          opacity: 0.1;
          filter: alpha(opacity=10);
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        }
      }
    }

    .details {
      width: 100px;
      height: 100px;
      position: relative;
      background: #ebebeb;
      padding: 5px;

      .filename {
        overflow: hidden;
        height: 100%;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        width: 100px;
        height: 100px;
      }

      .size {
        position: absolute;
        bottom: -28px;
        left: 3px;
        height: 28px;
        line-height: 28px;
      }
    }
    // details

    &.error {
      .error-mark {
        display: block;
        opacity: 1;
        -ms-filter: none;
        filter: none;
      }

      .progress .upload {
        background: #ee1e2d;
      }
    }

    &.success {
      .progress {
        display: none;
        display: block;
        .opacity(0);
        .transition(opacity 0.4s ease-in-out);
      }
      .success-mark {
        display: block;
        .opacity(1);
      }
    }

    &:hover .details img {
      display: none;
    }

    &:hover {
      .success-mark, .error-mark {
        display: none;
      }
    }

    .success-mark, .error-mark {
      display: none;
      position: absolute;
      width: 40px;
      height: 40px;
      font-size: 30px;
      text-align: center;
      right: -10px;
      top: -10px;
      display: block;
      .opacity(0);
      .transition(opacity 0.4s ease-in-out);

      span {
        display: none;
      }
    }

    .success-mark {
      color: #8cc657;
      background-position: -268px -163px;
    }

    .error-mark {
      color: #ee162d;
      background-position: -268px -123px;
    }

    .progress {
      position: absolute;
      top: 100px;
      left: 6px;
      right: 6px;
      height: 6px;
      background: #d7d7d7;
      .upload {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        background-color: #8cc657;
        -webkit-animation: loading 0.4s linear infinite;
        -moz-animation: loading 0.4s linear infinite;
        -o-animation: loading 0.4s linear infinite;
        -ms-animation: loading 0.4s linear infinite;
        animation: loading 0.4s linear infinite;
        transition: width 0.3s ease-in-out;
        .transition(width 0.3s ease-in-out);
        .border-radius(2px);
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
      }
    }

    .error-message {
      display: none;
      position: absolute;
      top: -5px;
      left: -20px;
      background: rgba(245, 245, 245, 0.8);
      padding: 8px 10px;
      color: #800;
      min-width: 140px;
      max-width: 500px;
      display: block;
      .opacity(0);
      .transition(opacity 0.3s ease-in-out);
    }

    &:hover.error .error-message {
      display: block;
      .opacity(1);
    }
  }
  //preview
  .default.message {
    .opacity(1);
    .transition(opacity 0.3s ease-in-out);
    position: absolute;
    width: 428px;
    height: 123px;
    margin-left: -214px;
    margin-top: -61.5px;
    top: 50%;
    left: 50%;

    span {
      display: block;
      text-align: center;
      font-size: 16px;
      color: #999;
    }
  }

  &.square .default.message {
    background-position: 0 -123px;
    width: 268px;
    margin-left: -134px;
    height: 174px;
    margin-top: -87px;
  }

  &.drag-hover .message {
    .opacity(0.15);
  }

  &.started .message {
    display: block;
    .opacity(0);
  }
}

// dropzone

#dropzone {
  margin: 30px 0;
  .box-shadow(0 0 50px rgba(0, 0, 0, 0.13));
  padding: 4px;
  .border-radius(3px);
  .dropzone {
    .box-shadow(none);
  }
}

@import "../vendor/bootstrap/variables.less";
@import "../vendor/bootstrap/mixins.less";
@import "include/variables.less";
@import "include/mixins.less";

div.ccm-conversation-avatar {
  width: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-right: 10px;

  img {
    .border-radius(4px);
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

div.ccm-conversation-message-form {
  ul.redactor_toolbar {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  .redactor_editor {
    padding: 10px;
    border: 1px solid #eee;
  }
}

.cnv-admin-pane {
  position: absolute;
  right: 0;
  top: -10px;
  a.dropdown-toggle {
    font-size: 10px;
  }
  ul.dropdown-menu {
    left: auto;
    right: 0;

    a.admin-edit {
      color: #00cc66;
      &:hover {
        color: white;
      }
    }

    a.admin-delete {
      color: #ff7070;
      &:hover {
        color: white;
      }
    }

  }
}

.ccm-conversation-message-count {
}

div.ccm-conversation-messages-header {
  .clearfix();
  margin-bottom: 15px;

  select.ccm-sort-conversations {
    font-size: @fontSizeSmall;
    width: auto;
    margin-top: 10px;
    float: right;
  }
}

div.ccm-conversation-add-reply, div.ccm-conversation-add-new-message, div.ccm-conversation-edit-message {
  clear: both;
  .clearfix();
  position: relative;

  form {
    margin-bottom: 0px;
  }

  div.ccm-conversation-message-form {
    padding-left: 50px;
    .clearfix();
    textarea {
      .box-sizing(border-box);
      width: 100%;
      font-size: @fontSizeSmall;
      height: 80px;
    }

    .ccm-conversation-attachment-toggle {
      float: right;
      .opacity(0.7);
      &.btn-success {
        border-top: 0;
        border-bottom: 0;
      }
    }

    button {
      margin: 16px 0 0 16px;
    }
  }
}

div.ccm-conversation-add-new-message {
  margin-bottom: 20px;
}

div.ccm-conversation-add-reply {
  display: none;
  margin-top: 20px;
}

div.ccm-conversation-attachment-container {
  margin-top: 20px;
  .dropzone {
    border: 1px dashed @grayLight;
  }
}

div.ccm-conversation-errors {
  display: none;
}

div.ccm-conversation-message-list {

  div.ccm-conversation-delete-message {
    display: none;
  }

  div.ccm-conversation-delete-attachment {
    display: none;
  }

}

div.ccm-conversation-dialog {
  div.ui-dialog-buttonset {
    float: none !important;
  }
}

div.ccm-conversation-message.ccm-conversation-message-topic {
  padding-left: 0px;
}

div.ccm-conversation-message {
  position: relative;
  .clearfix();
  padding-top: 0px;
  padding-bottom: 20px;
  padding-right: 0px;
  padding-left: 50px;
  div.ccm-conversation-message-byline {
    padding: 0px 8px 8px 8px;
    color: #9f9f9f;
    margin-bottom: 0;
    span.ccm-conversation-message-date {
      color: #9f9f9f;
    }
    span.ccm-conversation-message-username {
      font-weight: bold;
      color: #0099ff;
    }
    span.ccm-conversation-message-divider {
      padding: 0px 10px 0px 10px;
    }

  }

  .message-attachments {

    .clearfix();
    .attachment-container {
      position: relative;
      background: #f9f9f9;
      border: 1px solid #cccccc;
      .border-radius(4px);
      display: block;
      .clearfix();
      margin-bottom: 20px;

      .attachment-preview-container {
        width: 90px;
        min-height: 90px;
        float: left;
      }

      .image-popover-hover {
        top: 0;
        left: 0;
        position: absolute;
        background: transparent;
        width: 90px;
        height: 90px;
        .border-top-left-radius(4px);
        .border-bottom-left-radius(4px);
        cursor: pointer;
        .glyph-container {
          padding: 8px 0px 0px 10px;
          color: #fff;
          display: none;
          margin: 29px 0px 0px 27px;
          background-color: black;
          .border-radius(4px);
          width: 36px;
          height: 36px;
          i {
            margin-left: 1px;
          }
        }
        &:hover {
          background: #0a5d99;
          .opacity(0.8);
          .glyph-container {
            display: block;
          }
        }
      }

      img {
        float: left;
        .border-top-left-radius(4px);
        .border-bottom-left-radius(4px);
      }

      p.image-preview {
        display: block;
        float: left;
        padding: 20px 0px 10px 20px;
      }
    }
  }

  .ccm-conversation-message-body {
    padding: 0px 8px;
  }

  div.ccm-conversation-message-controls {
    //border-top: 1px dotted #afafaf;
    padding: 0px 0px 0px 8px;
    color: #999;

    a.ccm-conversation-message-control-icon {
      color: #999;
    }

    a.ccm-conversation-message-control-icon:hover {
      color: #333;
    }

    .ccm-conversation-social-share {
      display: none;
    }

    .clearfix();
    span.control-divider {
      display: block;
      padding: 8px;
      float: left;
      margin-left: 15px;
    }

    li:first-child {
      margin-left: 0;
    }

    ul {
      float: left;
      list-style-type: none;
      margin: 0px;
      padding: 0px;

      li {
        display: inline-block;
        margin-left: 20px;

        &.dropdown {
          margin-left: 0px;
        }
      }

      a {
        // make them stack nicely next to the bootstrap dropdown toggle
        padding-top: 8px;
        padding-bottom: 8px;
        display: block;
      }

    }

    .icon-thumbs-up {

    }

  }

}

div.ccm-conversation-message-deleted,
div.ccm-conversation-message-flagged {
  .opacity(30);
}

div.ccm-conversation-message:hover {
  .ccm-conversation-message-admin-control {
    display: inline-block;
  }
}

.ccm-conversation-message-admin-control {
  display: none;
}

div.ccm-conversation-message {
  &:hover {
    div.ccm-conversation-message-controls {
      .ccm-conversation-social-share {
        display: inline-block;
      }
    }
  }

}

div.ccm-conversation-messages-threaded {

  div.ccm-conversation-message-level0 {
    margin-left: 0px;
  }

  div.ccm-conversation-message-level1 {
    margin-left: 50px;
  }

  div.ccm-conversation-message-level2 {
    margin-left: 100px;
  }

  div.ccm-conversation-message-level3 {
    margin-left: 150px;
  }

  div.ccm-conversation-message-level4 {
    margin-left: 200px;
  }

}

div.ccm-conversation-form-submitted {
  .opacity(40);
}

div.ccm-conversation-load-more-messages {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

/**
 * Basic editor styles
 */

.conversation-editor {
  height: 200px;
}

/**
 * Discussions
 */
ul.ccm-discussion-topics {
  list-style-type: none;
  margin: 0px 0px 20px 0px;
  padding: 0px;

  li {
    display: block;
    padding: 4px 4px 10px 80px;
    position: relative;
    min-height: 60px;
    border-bottom: 1px inset #ccc;

    div.ccm-discussion-topic-replies {
      position: absolute;
      top: 18px;
      left: 0px;
      height: 62px;
      width: 62px;
      text-align: center;

      em {
        font-size: 1.6em;
        font-style: normal;
        display: block;
        line-height: 1em;
        color: #999;
        margin: 5px auto 0px auto;
      }

      font-size: 0.9em;
      color: #999;

    }

    div.ccm-discussion-topic-details {
      color: #444;
    }
  }

  h3 {
    font-size: 1.4em;
    line-height: 1.4em;
    margin-bottom: 2px;
  }
}

div.ccm-discussion {
  select.ccm-discussion-order-by {
    float: right;
    margin-right: 10px;
  }
}

.dropzone,
.dropzone * {
  .box-sizing(border-box);
}

.dropzone {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.03);
  min-height: 160px;
  .border-radius(3px);
  background: rgba(0, 0, 0, 0.03);
  padding: 23px;

  &.drag-hover {
    border-color: green;
    background: green;
  }

  &.clickable {
    cursor: pointer;
  }

  &.drag-hover {
    border-color: green;
    background: green;
  }

  &.started .message {
    display: none;
  }

  .message {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  .preview {
    .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.16));
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    display: inline-block;
    margin: 17px;
    vertical-align: top;
    border: 1px solid #acacac;
    padding: 6px 6px 28px 6px;
    &.image-preview:hover {
      .details {
        img {
          display: block;
          opacity: 0.1;
          filter: alpha(opacity=10);
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        }
      }
    }

    .details {
      width: 100px;
      height: 100px;
      position: relative;
      background: #ebebeb;
      padding: 5px;

      .filename {
        overflow: hidden;
        height: 100%;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        width: 100px;
        height: 100px;
      }

      .size {
        position: absolute;
        bottom: -28px;
        left: 3px;
        height: 28px;
        line-height: 28px;
      }
    }
    // details

    &.error {
      .error-mark {
        display: block;
        opacity: 1;
        -ms-filter: none;
        filter: none;
      }

      .progress .upload {
        background: #ee1e2d;
      }
    }

    &.success {
      .progress {
        display: none;
        display: block;
        .opacity(0);
        .transition(opacity 0.4s ease-in-out);
      }
      .success-mark {
        display: block;
        .opacity(1);
      }
    }

    &:hover .details img {
      display: none;
    }

    &:hover {
      .success-mark, .error-mark {
        display: none;
      }
    }

    .success-mark, .error-mark {
      display: none;
      position: absolute;
      width: 40px;
      height: 40px;
      font-size: 30px;
      text-align: center;
      right: -10px;
      top: -10px;
      display: block;
      .opacity(0);
      .transition(opacity 0.4s ease-in-out);

      span {
        display: none;
      }
    }

    .success-mark {
      color: #8cc657;
      background-position: -268px -163px;
    }

    .error-mark {
      color: #ee162d;
      background-position: -268px -123px;
    }

    .progress {
      position: absolute;
      top: 100px;
      left: 6px;
      right: 6px;
      height: 6px;
      background: #d7d7d7;
      .upload {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        background-color: #8cc657;
        -webkit-animation: loading 0.4s linear infinite;
        -moz-animation: loading 0.4s linear infinite;
        -o-animation: loading 0.4s linear infinite;
        -ms-animation: loading 0.4s linear infinite;
        animation: loading 0.4s linear infinite;
        transition: width 0.3s ease-in-out;
        .transition(width 0.3s ease-in-out);
        .border-radius(2px);
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
      }
    }

    .error-message {
      display: none;
      position: absolute;
      top: -5px;
      left: -20px;
      background: rgba(245, 245, 245, 0.8);
      padding: 8px 10px;
      color: #800;
      min-width: 140px;
      max-width: 500px;
      display: block;
      .opacity(0);
      .transition(opacity 0.3s ease-in-out);
    }

    &:hover.error .error-message {
      display: block;
      .opacity(1);
    }
  }
  //preview
  .default.message {
    .opacity(1);
    .transition(opacity 0.3s ease-in-out);
    position: absolute;
    width: 428px;
    height: 123px;
    margin-left: -214px;
    margin-top: -61.5px;
    top: 50%;
    left: 50%;

    span {
      display: block;
      text-align: center;
      font-size: 16px;
      color: #999;
    }
  }

  &.square .default.message {
    background-position: 0 -123px;
    width: 268px;
    margin-left: -134px;
    height: 174px;
    margin-top: -87px;
  }

  &.drag-hover .message {
    .opacity(0.15);
  }

  &.started .message {
    display: block;
    .opacity(0);
  }
}

// dropzone

#dropzone {
  margin: 30px 0;
  .box-shadow(0 0 50px rgba(0, 0, 0, 0.13));
  padding: 4px;
  .border-radius(3px);
  .dropzone {
    .box-shadow(none);
  }
}


Delete bordered-pulled.less

Delete bordered-pulled.less

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


垂直居中mixin

垂直居中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/smallsmallwolf/Zonda.git/'


css for login

css for login

@cgolang: #375EAB;

//line-shadow primary for the logo
.special-line-shadow (@blur: 2px,@color: #888) {
	text-shadow:1px 1px @blur @color,
			-1px -1px @blur @color,
			-1px 1px @blur @color,
			1px -1px @blur @color;
}

h1{
	color:#FFF;
	.special-line-shadow;
	font-size: 5em;
	text-align:center;
	letter-spacing:4px;
}

#login{
	display:block;
	width: 500px;
	height: 190px;
	margin:0 auto;
}

input{
	padding: 5px;
	font-size: 2em;
}
#sub{
	background-color:#375EAB;
	font-family:Tahoma,Arial;
	color:white;
	border: 0px;
	border-radius: 5px;
}

#sub:disabled{
	opacity:0.3;
}

footer{
	width:100%;
	height:2em;
	text-align:center;
	position:absolute;
	bottom:0px;
	padding:5px;
	font-size:1em;
}

error: pathspec 'src/gofire/main/template/css/login.less' did not match any file(s) known to git


OR-1345 Fix tags style

OR-1345 Fix tags 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/heroandtn3/openpaas-esn.git/'


Fix btn min-width in input group

Fix btn min-width in input group

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


INBOX-25 Fix toolbar button selection state

Conflicts:
	modules/linagora.esn.unifiedinbox/frontend/css/modules/composer.less

Remove the buttons from other screens

This reverts commit 9d632e6b6a45da85a111c86a0958b749b0e452bc.


add responsive layout examples

add responsive layout examples

// Content oriented media queries //

@reading-length: 40em;

// breakpoints
@m-small-max: (@reading-length - .01);
@m-medium-min: @reading-length;
@m-medium-max: (@reading-length*2 - .01);
@m-large-min: (@reading-length*2);

// queries
@m-small: ~"(max-width: @{m-small-max})";
@m-medium: ~"(min-width: @{m-medium-min}) and (max-width: @{m-medium-max})";
@m-medium-up: ~"(min-width: @{m-medium-min})";
@m-medium-down: ~"(max-width: @{m-medium-max})";
@m-large: ~"(min-width: @{m-large-min})";

/**
* You can use the following mixins to easily set up responsive layouts.
* For grid layouts with non-equal span sizes use incrementing col-[integer] classes and apply sizes to each of these classes:
*
* .col-set([column name], [column span width]):
* Standard mixin to set up a column in a responsive layout
*
* To set up layouts with equal width columns you only specify the width in `.col-set-equal`.
*
* .col-set-equal([column span width]):
* Extended mixin to set up equal width columns and properly clear them at the same time
*
* Note: Every use of .col-set-equal() must be wrapped in a media query (even for smallest "mobile first" viewport).
* Because else the `nth-child` selectors used in ` .col-set-equal()` for proper clearing would be passed on to all
* other viewports/media queries in the layout.
*
* .col-clear([columns per line]):
* Use this to manually clear every nth column if columns differ in height.
* This ensures that a grid layout can have only [columns per line] columns on one horizontal grid line.
*
**/

// layouts //

.layout-r-1 {
	/**
	* specs: max cols 12
	* large: 4
	* medium: 6
	* small: 12
	**/

	@media @m-small {
		.col-set-equal(12);
	}

	@media @m-medium {
		.col-set-equal(6);
	}

	@media @m-large {
		.col-set-equal(4);
	}
}

.layout-r-2 {
	/**
	* specs: max cols 12
	* large: 6
	* medium: 12
	* small: 12
	**/

	@media @m-medium-down {
		.col-set-equal(12);
	}

	@media @m-large {
		.col-set-equal(6);
	}
}

.layout-r-3 {
	/**
	* specs:
	* large: 8/4
	* medium: 8/4
	* small: 12
	**/

	@media @m-small {
		.col-set-equal(12);
	}

	@media @m-medium-up {
		.col-set(col-1, 8);
		.col-set(col-2, 4);
	}
}

.layout-r-4 {
	/**
	* specs:
	* large: 3
	* medium: 6
	* small: 12
	**/

	@media @m-small {
		.col-set-equal(12);
	}

	@media @m-medium {
		.col-set-equal(6);
	}

	@media @m-large {
		.col-set-equal(3);
	}
}

.layout-nogrid-1 {
	/**
	* specs:
	* large: 9
	* medium: 7
	* small: 5
	**/

	@media @m-small {
		.col-set(col, (@grid-max-cols / 5));
	}

	@media @m-medium {
		.col-set(col, (@grid-max-cols / 7));
	}

	@media @m-large {
		.col-set(col, (@grid-max-cols / 9));
	}
}

error: pathspec 'examples/responsive-layouts.less' did not match any file(s) known to git


Signed-off-by: duxinlixiaoxue <1207931454@qq.com>

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


add code.less

add code.less

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


simple header+main layout

simple header+main layout

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


KNL-400 Scrollbar "curvature"

KNL-400 Scrollbar "curvature"

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


Style block-collection items in table

Style block-collection items in table


Add responsive style of panel-main

Add responsive style of panel-main


Add square style for profile image of list card


change example to a pixel grid to avoid sub-pixel issue

@import './stylesheets/grid.less';

//////////
// GRID //
//////////

// Specify the number of column and set column and gutter widths
@column: 12;
@column-width: 60;
@gutter-width: 20;

// Uncomment the definition below for a percentage-based layout
// @total-width: 100%;
// @p-total-width: 100%;

////////////
// LAYOUT //
////////////
body {
	width:940px;
	margin: 20px auto;
	border: 1px dashed #888;
}

#page {
	.grid();

}

#About {
	padding: 0 20px;
}

#Basic {
	.first {
		.column(6);
	}
	.second {
		.column(6);
	}
}

#Multiple-rows {
		.alpha {
			.column(1);
		}
		.beta {
			.column(11,12);
		}
		.gamma {
			.column(2);
		}
		.delta {
			.column(10,12);
		}
		.epsilon {
			.column(3);
		}
		.zeta {
			.column(9,12);
		}
		.eta {
			.column(4);
		}
		.theta {
			.column(8,12);
		}
		.iota {
			.column(5);
		}
		.kappa {
			.column(7,12);
		}
		.lambda {
			.column(4);
		}
		.mu {
		.column(2);
		}
		.nu {
			.column(6,12);
		}
}

#Shifts {
	.alpha {
		.column(6);
		.push(3,12);
	}
}

#nesting {
	.first-row {
		.row(12);
		.col_equal_wrap();
		.nested1 {
			.column(2)
		}
		.nested2 {
			.column(2);
			.col_equal();
		}
		.nested3 {
			.column(8);
			.col_equal();
			aside {
				.column(4,8);
			}
			article {
				.column(4,8);
			}
		}
	}
}

section {
	.column(12);
}

.first-row {
	.row(12);
}

.second-row {
	.row(8);
}

.intro {
	.column(12);
}

.box {
	.column(3,12);
}

footer {
	.column(12);
}

@import './stylesheets/grid.less';

//////////
// GRID //
//////////

// Specify the number of column and set column and gutter widths
@column: 12;
@column-width: 60;
@gutter-width: 20;

// Uncomment the definition below for a percentage-based layout
@total-width: 100%;
@p-total-width: 100%;

////////////
// LAYOUT //
////////////
body {
	width:940px;
	margin: 20px auto;
	border: 1px dashed #888;
}

#page {
	.grid();

}

#About {
	padding: 0 20px;
}

#Basic {
	.first {
		.column(6);
	}
	.second {
		.column(6);
	}
}

#Multiple-rows {
		.alpha {
			.column(1);
		}
		.beta {
			.column(11,12);
		}
		.gamma {
			.column(2);
		}
		.delta {
			.column(10,12);
		}
		.epsilon {
			.column(3);
		}
		.zeta {
			.column(9,12);
		}
		.eta {
			.column(4);
		}
		.theta {
			.column(8,12);
		}
		.iota {
			.column(5);
		}
		.kappa {
			.column(7,12);
		}
		.lambda {
			.column(4);
		}
		.mu {
		.column(2);
		}
		.nu {
			.column(6,12);
		}
}

#Shifts {
	.alpha {
		.column(6);
		.push(3,12);
	}
}

#nesting {
	.first-row {
		.row(12);
		.col_equal_wrap();
		.nested1 {
			.column(2)
		}
		.nested2 {
			.column(2);
			.col_equal();
		}
		.nested3 {
			.column(8);
			.col_equal();
			aside {
				.column(4,8);
			}
			article {
				.column(4,8);
			}
		}
	}
}

section {
	.column(12);
}

.first-row {
	.row(12);
}

.second-row {
	.row(8);
}

.intro {
	.column(12);
}

.box {
	.column(3,12);
}

footer {
	.column(12);
}


Style the bootstrap tabs

Style the bootstrap tabs

@import "ui-variables";
@import "ui-mixins";

.tab-bar {
  height: @tab-height + 6px;
  border-bottom: 4px solid @tab-bar-border-color;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 1px;
  background-color: @tab-bar-background-color;
}

.tab {
  height: @tab-height;
  line-height: @tab-height;
  color: @text-color;
  margin: 0;
  background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 1),
    inset 1px 0 0 @background-color-highlight,
    inset -1px 0 0 @background-color-highlight;
}

.tab:hover {
  color: @text-color-highlight;
}

.tab.active {
  height: @tab-height + 1px;
  background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color);
  color: @text-color-highlight;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1)
}

.tab.active:hover .close-icon {
  color: @text-color-highlight;
}

// Bootstrap nav tabs.
.nav.nav-tabs {
  border-bottom-color: @tab-background-color-active;

  > li {
    margin-bottom: 0px;
  }

  > li > a {
    border: none;
  }

  > li.active > a {
    .text(highlight);
    border: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: @background-color-highlight;
  }
}

@import "ui-variables";

.tab-bar {
  height: @tab-height + 6px;
  border-bottom: 4px solid @tab-bar-border-color;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 1px;
  background-color: @tab-bar-background-color;
}

.tab {
  height: @tab-height;
  line-height: @tab-height;
  color: @text-color;
  margin: 0;
  background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 1),
    inset 1px 0 0 @background-color-highlight,
    inset -1px 0 0 @background-color-highlight;
}

.tab:hover {
  color: @text-color-highlight;
}

.tab.active {
  height: @tab-height + 1px;
  background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color);
  color: @text-color-highlight;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1)
}

.tab.active:hover .close-icon {
  color: @text-color-highlight;
}


Bug 795976 - change image URLs to force the CDN to refresh

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

// General buttons

.button,
.button:link,
.button:visited {
    .inline-block;
    .border-radius;
    box-shadow: @buttonShadow;
    background-color: @buttonBlue;
    #gradient > .vertical(@buttonBlue, @buttonBlueDark);
    color: @buttonTextColor;
    text-align: center;
    font-size: @baseFontSize;
    font-weight: bold;
    padding: (@baseLine / 4) (@baseLine / 2);
    line-height: 1.1;
    text-decoration: none;
    min-width: 80px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    .open-sans;
    .transition();

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        .box-shadow(@buttonShadowHover);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &:focus,
    &.focus {
        outline-color: @textColorSecondary;
    }

    &:active,
    &.active {
        .box-shadow(@buttonShadowActive);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &.insensitive,
    &.insensitive:hover,
    &.insensitive:focus {
        background-color: #9ca3aa;
        #gradient > .vertical(#bfc7cd, #9ca3aa);
        .box-shadow(@buttonShadow);
        color: #eee;
    }
}

.button-green,
.button-green:link,
.button-green:visited {
    .button;
    background-color: @buttonGreen;
    #gradient > .vertical(@buttonGreen, @buttonGreenDark);

    &:hover,
    &:focus {
        .button-hover-box-shadow(@buttonGreen);
    }
}

.button-negative,
.button-negative:link,
.button-negative:visited {
    .button;
    background-color: #a91300;
    #gradient > .vertical(#da5132, #a91300);

    &:hover,
    &:focus {
        .button-hover-box-shadow(#da5132);
    }
}

.button-white,
.button-white:link,
.button-white:visited {
    .button;
    border: 1px solid #d0d0d0;
    background: #fff;
    padding: (@baseLine / 5) @baseFontSize * 0.75;
    color: @textColorSecondary;
    font-size: @baseFontSize * 0.75;
    font-weight: normal;
    text-shadow: none;
    @shadow: 0 0 12px rgba(230,230,230,0.2) inset, 0 -2px #e8e8e8 inset;
    .box-shadow(@shadow);
    .border-radius(6px);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";

    &:hover,
    &:focus {
        color: @textColorSecondary;
        .box-shadow(@shadow);
    }
}

.button-white.selected {
    background: #d7d5d5;
    border-color: #bcb9b9;
    text-shadow: 0 1px #fff;
    @shadow: 0 1px 1px rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.1) inset;
    .box-shadow(@shadow);
}

.button,
.button-white {
    cursor: pointer;
    small {
        display: block;
    }

}

.button.arrow span,
.button-blue.arrow span,
.button-white.arrow span {
  display: block;
  margin-right: -12px;
  padding: 0 30px 0 0;
  background: url(/media/img/sandstone/buttons/arrow-go-r.png) right center no-repeat;
}

.button-sand,
.button-sand:link,
.button-sand:visited {
    .button;
    #gradient > .vertical(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.4) rgba(0,0,0,0.1);
    @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
              1px  0   0 0 rgba(255,255,255,0.5) inset,
             -1px  0   0 0 rgba(255,255,255,0.5) inset,
              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
    .box-shadow(@shadow);
    .border-radius(8px);
    color: @linkBlue;
    text-shadow: none;
    &:hover,
    &:focus {
        .button-hover-box-shadow();
        color: @linkBlueHover;
    }
}

.button-list {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    li {
        margin: 0;
        padding: 0;
        list-style-style: none;
        .inline-block;
        .button-sand {
            border-radius: 0;
            border-left-width: 0;
            @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                     -1px  0   0 0 rgba(255,255,255,0.5) inset,
                      0   -2px 0 0 rgba(0,0,0,0.1)       inset;
            .box-shadow(@shadow);
            min-width: 0;
        }
        &:first-child {
            .button-sand {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                border-left-width: 1px;
                @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                          1px  0   0 0 rgba(255,255,255,0.5) inset,
                         -1px  0   0 0 rgba(255,255,255,0.5) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
                &:hover,
                &:focus {
                    .button-hover-box-shadow();
                }
            }
        }
        &:last-child {
            .button-sand {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }
    }
}

.dark {
    .button-sand,
    .button-sand:link,
    .button-sand:visited {
        @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                  1px  0   0 0 rgba(255,255,255,0.2) inset,
                 -1px  0   0 0 rgba(255,255,255,0.2) inset,
                  0   -2px 0 0 rgba(0,0,0,0.1)       inset;
        .box-shadow(@shadow);
        &:hover,
        &:focus {
            .button-hover-box-shadow(rgba(255,255,255,0.2));
            color: @linkBlue;
        }
    }
    .button-list {
        li {
            .button-sand {
                @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                         -1px  0   0 0 rgba(255,255,255,0.2) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
            }
            &:first-child {
                .button-sand {
                    @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                              1px  0   0 0 rgba(255,255,255,0.2) inset,
                             -1px  0   0 0 rgba(255,255,255,0.2) inset,
                              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                    .box-shadow(@shadow);
                    &:hover,
                    &:focus {
                        .button-hover-box-shadow(rgba(255,255,255,0.2));
                        color: @linkBlue;
                    }
                }
            }
        }
    }
}

// Product download buttons

.download-button .unrecognized-download,
.download-button .unsupported-download {
    display: none;
}

.download-button {
    .inline-block;
    ul {
        margin: 0;
        li {
            list-style-type: none;
            margin: 0;
        }
    }
}

.download-button .download-link {
    .button-green;
    cursor: pointer;
    padding: 0;
    margin-left: 54px;
    width: 220px;
    /* for IE6 */
    _margin-left: 0;
    _width: 294px;
    text-align: left;
    font-weight: normal;
    line-height: @baseLine;
    font-size: 16px;
    .border-radius(6px);
    .download-content {
        display: block;
        position: relative;
        color: #b8e779;
        margin-left: -54px;
        _margin-left:0;
        background: url(/media/img/sandstone/buttons/firefox-large.png?build=2) 0 0 no-repeat;
        _background-color: @buttonGreenDark;
        min-height: 82px;
        margin-bottom: -12px;
        _margin-bottom: 0;
        padding: 10px 12px 16px 119px;
    }
    .download-title,
    .download-title span {
        display: block;
        color: #fff;
        font-size: 30px;
        font-weight: normal;
        letter-spacing: -0.02em;
        padding-top: 8px;
        margin-bottom: 10px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-title span {
        padding-top: 0;
        margin-bottom: 5px;
    }
    .download-subtitle {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-lang {
        display: block;
        color: #346012;
        padding-top: 2px;
        font-size: 11px;
        line-height: 100%;
        text-shadow: 0 1px rgba(255,255,255,0.2);
    }
    .download-platform {
        display: none;
    }
}

.download-button-small .download-link {
    margin-left: 44px;
    width: 230px;
    /* for IE6 */
    _margin-left: 0;
    _width: 274px;
    .download-content {
        margin-left: -34px;
        _margin-left:0;
        margin-top: -2px;
        margin-bottom: -7px;
        background-image: url(/media/img/sandstone/buttons/firefox-small.png?build=2);
        min-height: 45px;
        padding: 10px 20px 10px 73px;
        overflow: visible;
        font-size: @smallFontSize;
        .border-radius(6px);
    }
    .download-title {
        font-size: 22px;
        padding-top: 0;
        margin-bottom: 0;
    }
    .download-lang {
        position: absolute;
        top: 20px;
        right: 10px;
        text-align: right;
        width: 100px;
    }
}

.download-button-beta.download-button-small .download-link .download-lang,
.download-button-aurora.download-button-small .download-link .download-lang {
    top: 33px;
}

.download-button-beta,
.download-button-aurora {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 24px;
    }
}

.download-button-beta.download-button-small,
.download-button-aurora.download-button-small {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 20px;
    }
}

.download-button.download-button-beta.download-button-small .download-list .os_android,
.download-button.download-button-aurora.download-button-small .download-list .os_android,
.download-button.download-button-mobile.download-button-aurora.download-button-small,
.download-button.download-button-mobile.download-button-beta.download-button-small {
    .download-link .download-title span {
        font-size: 18px;
        letter-spacing: -0.01em;
    }
}

.download-button-large.beta .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/beta-large.png);
}

.download-button-small.beta .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/beta-small.png);
}

.download-button-large.aurora .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/aurora-large.png);
}

.download-button-small.aurora .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/aurora-small.png);
}

.download-button.download-button-noicon {
    .download-link {
        width: 250px;
        margin-left: auto;
        .download-content {
            margin-left: auto;
            padding-left: 55px;
            background-image: url(/media/img/sandstone/buttons/download-arrow.png);
            background-position: 15px 30px;
        }
        .download-subtitle {
            margin-right: auto;
        }
    }
}

.download-button-noicon .download-list .os_android,
.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 7px;
    }
}

.download-button-small.download-button-noicon {
    .download-link {
        .download-content {
            background-image: url(/media/img/sandstone/buttons/download-arrow-small.png);
            background-position: 15px 18px;
        }
    }
}

.download-button-small.download-button-noicon .download-list .os_android,
.download-button-small.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 0;
    }
}

// OS detection

.download-button .os_linux,
.download-button .os_windows,
.download-button .os_osx,
.download-button .os_android,
.no-js .download-list,
.other .download-list {
    display: none !important;
}

.linux .download-button .os_linux,
.windows .download-button .os_windows,
.osx .download-button .os_osx,
.android .download-button .os_android,
.download-button-mobile .os_android,
.android .download-button-desktop .download-list,
.android .download-button-desktop small.os_windows,
.no-js .download-button-mobile .download-list,
.other .download-button-mobile .download-list,
.other .download-button small.os_windows {
    display: block !important;
}

// Small print

.download-button small.download-other,
.other .download-button-mobile small.download-other,
.android .download-button-desktop small.download-other {
    .open-sans;
    display: block;
    font-size: 11px;
    text-align: right;
    margin-top: 6px;
    color: @textColorLight;

    a:link,
    a:visited {
        color: #999;
    }
}

.no-js .download-button small.download-other,
.other .download-button small.download-other,
.android .download-button-desktop small.download-other {
    text-align: left;
}

.other .download-button,
.android .download-button-desktop {
    .unrecognized-download {
        display: block;
    }
}

.oldmac .download-button .unsupported-download {
    display: block;
}

.download-button noscript,
.download-button .unrecognized-download {
    text-align: left;
    h4 {
        text-shadow: none;
        margin: 0 0 6px 0;
        font-size: 18px;
    }
    ul li {
        display: inline;
    }

    small {
        font-size: 11px;
        letter-spacing: normal;
    }
    .button-green {
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 3px;
        margin-bottom: 3px;
    }

}

// Mobile download buttons

.download-button .download-list .os_android,
.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 16px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
        }
        .download-subtitle {
            display: block;
            position: static;
            text-align: left;
            margin-right: 40px;
            color: #fff;
            font-size: 11px;
            line-height: 1.2;
            letter-spacing: normal;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
    }
}

.download-button.download-button-small .download-list .os_android,
.download-button.download-button-small.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 13px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
            letter-spacing: normal;
            span {
                font-size: 22px;
                margin-bottom: 0;
            }
        }
        .download-subtitle {
            position: absolute;
            top: 15px;
            right: 10px;
            text-align: right;
            width: 100px;
            margin-right: 0;
        }
    }
}

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

// General buttons

.button,
.button:link,
.button:visited {
    .inline-block;
    .border-radius;
    box-shadow: @buttonShadow;
    background-color: @buttonBlue;
    #gradient > .vertical(@buttonBlue, @buttonBlueDark);
    color: @buttonTextColor;
    text-align: center;
    font-size: @baseFontSize;
    font-weight: bold;
    padding: (@baseLine / 4) (@baseLine / 2);
    line-height: 1.1;
    text-decoration: none;
    min-width: 80px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    .open-sans;
    .transition();

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        .box-shadow(@buttonShadowHover);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &:focus,
    &.focus {
        outline-color: @textColorSecondary;
    }

    &:active,
    &.active {
        .box-shadow(@buttonShadowActive);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &.insensitive,
    &.insensitive:hover,
    &.insensitive:focus {
        background-color: #9ca3aa;
        #gradient > .vertical(#bfc7cd, #9ca3aa);
        .box-shadow(@buttonShadow);
        color: #eee;
    }
}

.button-green,
.button-green:link,
.button-green:visited {
    .button;
    background-color: @buttonGreen;
    #gradient > .vertical(@buttonGreen, @buttonGreenDark);

    &:hover,
    &:focus {
        .button-hover-box-shadow(@buttonGreen);
    }
}

.button-negative,
.button-negative:link,
.button-negative:visited {
    .button;
    background-color: #a91300;
    #gradient > .vertical(#da5132, #a91300);

    &:hover,
    &:focus {
        .button-hover-box-shadow(#da5132);
    }
}

.button-white,
.button-white:link,
.button-white:visited {
    .button;
    border: 1px solid #d0d0d0;
    background: #fff;
    padding: (@baseLine / 5) @baseFontSize * 0.75;
    color: @textColorSecondary;
    font-size: @baseFontSize * 0.75;
    font-weight: normal;
    text-shadow: none;
    @shadow: 0 0 12px rgba(230,230,230,0.2) inset, 0 -2px #e8e8e8 inset;
    .box-shadow(@shadow);
    .border-radius(6px);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";

    &:hover,
    &:focus {
        color: @textColorSecondary;
        .box-shadow(@shadow);
    }
}

.button-white.selected {
    background: #d7d5d5;
    border-color: #bcb9b9;
    text-shadow: 0 1px #fff;
    @shadow: 0 1px 1px rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.1) inset;
    .box-shadow(@shadow);
}

.button,
.button-white {
    cursor: pointer;
    small {
        display: block;
    }

}

.button.arrow span,
.button-blue.arrow span,
.button-white.arrow span {
  display: block;
  margin-right: -12px;
  padding: 0 30px 0 0;
  background: url(/media/img/sandstone/buttons/arrow-go-r.png) right center no-repeat;
}

.button-sand,
.button-sand:link,
.button-sand:visited {
    .button;
    #gradient > .vertical(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.4) rgba(0,0,0,0.1);
    @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
              1px  0   0 0 rgba(255,255,255,0.5) inset,
             -1px  0   0 0 rgba(255,255,255,0.5) inset,
              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
    .box-shadow(@shadow);
    .border-radius(8px);
    color: @linkBlue;
    text-shadow: none;
    &:hover,
    &:focus {
        .button-hover-box-shadow();
        color: @linkBlueHover;
    }
}

.button-list {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    li {
        margin: 0;
        padding: 0;
        list-style-style: none;
        .inline-block;
        .button-sand {
            border-radius: 0;
            border-left-width: 0;
            @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                     -1px  0   0 0 rgba(255,255,255,0.5) inset,
                      0   -2px 0 0 rgba(0,0,0,0.1)       inset;
            .box-shadow(@shadow);
            min-width: 0;
        }
        &:first-child {
            .button-sand {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                border-left-width: 1px;
                @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                          1px  0   0 0 rgba(255,255,255,0.5) inset,
                         -1px  0   0 0 rgba(255,255,255,0.5) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
                &:hover,
                &:focus {
                    .button-hover-box-shadow();
                }
            }
        }
        &:last-child {
            .button-sand {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }
    }
}

.dark {
    .button-sand,
    .button-sand:link,
    .button-sand:visited {
        @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                  1px  0   0 0 rgba(255,255,255,0.2) inset,
                 -1px  0   0 0 rgba(255,255,255,0.2) inset,
                  0   -2px 0 0 rgba(0,0,0,0.1)       inset;
        .box-shadow(@shadow);
        &:hover,
        &:focus {
            .button-hover-box-shadow(rgba(255,255,255,0.2));
            color: @linkBlue;
        }
    }
    .button-list {
        li {
            .button-sand {
                @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                         -1px  0   0 0 rgba(255,255,255,0.2) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
            }
            &:first-child {
                .button-sand {
                    @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                              1px  0   0 0 rgba(255,255,255,0.2) inset,
                             -1px  0   0 0 rgba(255,255,255,0.2) inset,
                              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                    .box-shadow(@shadow);
                    &:hover,
                    &:focus {
                        .button-hover-box-shadow(rgba(255,255,255,0.2));
                        color: @linkBlue;
                    }
                }
            }
        }
    }
}

// Product download buttons

.download-button .unrecognized-download,
.download-button .unsupported-download {
    display: none;
}

.download-button {
    .inline-block;
    ul {
        margin: 0;
        li {
            list-style-type: none;
            margin: 0;
        }
    }
}

.download-button .download-link {
    .button-green;
    cursor: pointer;
    padding: 0;
    margin-left: 54px;
    width: 220px;
    /* for IE6 */
    _margin-left: 0;
    _width: 294px;
    text-align: left;
    font-weight: normal;
    line-height: @baseLine;
    font-size: 16px;
    .border-radius(6px);
    .download-content {
        display: block;
        position: relative;
        color: #b8e779;
        margin-left: -54px;
        _margin-left:0;
        background: url(/media/img/sandstone/buttons/firefox-large.png) 0 0 no-repeat;
        _background-color: @buttonGreenDark;
        min-height: 82px;
        margin-bottom: -12px;
        _margin-bottom: 0;
        padding: 10px 12px 16px 119px;
    }
    .download-title,
    .download-title span {
        display: block;
        color: #fff;
        font-size: 30px;
        font-weight: normal;
        letter-spacing: -0.02em;
        padding-top: 8px;
        margin-bottom: 10px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-title span {
        padding-top: 0;
        margin-bottom: 5px;
    }
    .download-subtitle {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-lang {
        display: block;
        color: #346012;
        padding-top: 2px;
        font-size: 11px;
        line-height: 100%;
        text-shadow: 0 1px rgba(255,255,255,0.2);
    }
    .download-platform {
        display: none;
    }
}

.download-button-small .download-link {
    margin-left: 44px;
    width: 230px;
    /* for IE6 */
    _margin-left: 0;
    _width: 274px;
    .download-content {
        margin-left: -34px;
        _margin-left:0;
        margin-top: -2px;
        margin-bottom: -7px;
        background-image: url(/media/img/sandstone/buttons/firefox-small.png);
        min-height: 45px;
        padding: 10px 20px 10px 73px;
        overflow: visible;
        font-size: @smallFontSize;
        .border-radius(6px);
    }
    .download-title {
        font-size: 22px;
        padding-top: 0;
        margin-bottom: 0;
    }
    .download-lang {
        position: absolute;
        top: 20px;
        right: 10px;
        text-align: right;
        width: 100px;
    }
}

.download-button-beta.download-button-small .download-link .download-lang,
.download-button-aurora.download-button-small .download-link .download-lang {
    top: 33px;
}

.download-button-beta,
.download-button-aurora {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 24px;
    }
}

.download-button-beta.download-button-small,
.download-button-aurora.download-button-small {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 20px;
    }
}

.download-button.download-button-beta.download-button-small .download-list .os_android,
.download-button.download-button-aurora.download-button-small .download-list .os_android,
.download-button.download-button-mobile.download-button-aurora.download-button-small,
.download-button.download-button-mobile.download-button-beta.download-button-small {
    .download-link .download-title span {
        font-size: 18px;
        letter-spacing: -0.01em;
    }
}

.download-button-large.beta .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/beta-large.png);
}

.download-button-small.beta .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/beta-small.png);
}

.download-button-large.aurora .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/aurora-large.png);
}

.download-button-small.aurora .download-link .download-content {
  background-image: url(/media/img/sandstone/buttons/aurora-small.png);
}

.download-button.download-button-noicon {
    .download-link {
        width: 250px;
        margin-left: auto;
        .download-content {
            margin-left: auto;
            padding-left: 55px;
            background-image: url(/media/img/sandstone/buttons/download-arrow.png);
            background-position: 15px 30px;
        }
        .download-subtitle {
            margin-right: auto;
        }
    }
}

.download-button-noicon .download-list .os_android,
.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 7px;
    }
}

.download-button-small.download-button-noicon {
    .download-link {
        .download-content {
            background-image: url(/media/img/sandstone/buttons/download-arrow-small.png);
            background-position: 15px 18px;
        }
    }
}

.download-button-small.download-button-noicon .download-list .os_android,
.download-button-small.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 0;
    }
}

// OS detection

.download-button .os_linux,
.download-button .os_windows,
.download-button .os_osx,
.download-button .os_android,
.no-js .download-list,
.other .download-list {
    display: none !important;
}

.linux .download-button .os_linux,
.windows .download-button .os_windows,
.osx .download-button .os_osx,
.android .download-button .os_android,
.download-button-mobile .os_android,
.android .download-button-desktop .download-list,
.android .download-button-desktop small.os_windows,
.no-js .download-button-mobile .download-list,
.other .download-button-mobile .download-list,
.other .download-button small.os_windows {
    display: block !important;
}

// Small print

.download-button small.download-other,
.other .download-button-mobile small.download-other,
.android .download-button-desktop small.download-other {
    .open-sans;
    display: block;
    font-size: 11px;
    text-align: right;
    margin-top: 6px;
    color: @textColorLight;

    a:link,
    a:visited {
        color: #999;
    }
}

.no-js .download-button small.download-other,
.other .download-button small.download-other,
.android .download-button-desktop small.download-other {
    text-align: left;
}

.other .download-button,
.android .download-button-desktop {
    .unrecognized-download {
        display: block;
    }
}

.oldmac .download-button .unsupported-download {
    display: block;
}

.download-button noscript,
.download-button .unrecognized-download {
    text-align: left;
    h4 {
        text-shadow: none;
        margin: 0 0 6px 0;
        font-size: 18px;
    }
    ul li {
        display: inline;
    }

    small {
        font-size: 11px;
        letter-spacing: normal;
    }
    .button-green {
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 3px;
        margin-bottom: 3px;
    }

}

// Mobile download buttons

.download-button .download-list .os_android,
.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 16px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
        }
        .download-subtitle {
            display: block;
            position: static;
            text-align: left;
            margin-right: 40px;
            color: #fff;
            font-size: 11px;
            line-height: 1.2;
            letter-spacing: normal;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
    }
}

.download-button.download-button-small .download-list .os_android,
.download-button.download-button-small.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 13px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
            letter-spacing: normal;
            span {
                font-size: 22px;
                margin-bottom: 0;
            }
        }
        .download-subtitle {
            position: absolute;
            top: 15px;
            right: 10px;
            text-align: right;
            width: 100px;
            margin-right: 0;
        }
    }
}


Easier seek bar targeting

Easier seek bar targeting

fatal: unable to access 'https://github.com/Xyloo/osu-web.git/': The requested URL returned error: 403


fixed a bug on firefox using font-size: 0; // Trick to fix a Firefox bug.

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/dedalozzo/pit-bootstrap.git/'