remove unnecessary @font-face files

remove unnecessary @font-face files

@font-face {
    font-family: "Avenir Next";
    src: url("../ip/fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot");
    src: url("../ip/fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("embedded-opentype"),
         url("../ip/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"),
         url("../ip/fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"),
         url("../ip/fonts/52a192b1-bea5-4b48-879f-107f009b666f.svg#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Avenir Next Italic";
    src: url("../ip/fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot");
    src: url("../ip/fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("embedded-opentype"),
         url("../ip/fonts/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff"),
         url("../ip/fonts/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf") format("truetype"),
         url("../ip/fonts/1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585.svg#1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585") format("svg");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Avenir Next Medium";
    src: url("../ip/fonts/1a7c9181-cd24-4943-a9d9-d033189524e0.eot");
    src: url("../ip/fonts/1a7c9181-cd24-4943-a9d9-d033189524e0.eot?#iefix") format("embedded-opentype"),
         url("../ip/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff"),
         url("../ip/fonts/63a74598-733c-4d0c-bd91-b01bffcd6e69.ttf") format("truetype"),
         url("../ip/fonts/a89d6ad1-a04f-4a8f-b140-e55478dbea80.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Avenir Next Demi";
    src: url("../ip/fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot");
    src: url("../ip/fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("embedded-opentype"),
         url("../ip/fonts/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff"),
         url("../ip/fonts/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf") format("truetype"),
         url("../ip/fonts/99affa9a-a5e9-4559-bd07-20cf0071852d.svg#99affa9a-a5e9-4559-bd07-20cf0071852d") format("svg");
    font-weight: 700;
    font-style: normal;
}


Fix services page

Fix services page

.services-tabs {
  h1 {
    margin-left: 7.7083%;
  }
  .tab-title {
    display: none;
  }
  .tab-nav {
    overflow: hidden;
    margin-bottom: 47px;
    margin: 0 0 47px 7.7083%;
    padding: 42px 0 10px;

    h2 {
      width: 150px;
      margin: 0;
      font-size: 1.714rem;
      line-height: 1em;
    }
    li {
      float: left;
      width: 22.1875%;
      margin-right: 3.7%;

      &:last-child {
        margin-right: 0;
      }
      &.ui-tabs-active {
        a {
          color: @global-text-color;
          border-color: transparent;

          &:before {
            .opacity(0);
          }
        }
      }
    }
    a {
      position: relative;
      font-size: 1.500rem;
      color: #6a84d1;
      text-decoration: none;
      font-family: 'museo_sans_cyrl', @global-font;
      outline: solid 0px transparent;
      border-bottom:  dotted 1px #6a84d1;

      &:before {
        content: "";
        position: absolute;
        background: @sprite;
        top: -35px;
        left: 0;
        .transition(all 150ms ease-in-out);
      }
      &[href="#web-development"] {
        &:before {
          width: 17px;
          height: 16px;
          background-position: -164px -37px;
        }
      }
      &[href="#web-design"] {
        &:before {
          width: 19px;
          height: 18px;
          background-position: -182px -37px;
        }
      }
      &[href="#mobile-development"] {
        &:before {
          width: 15px;
          height: 15px;
          background-position: -204px -37px;
        }
      }
      &[href="#game-development"] {
        &:before {
          width: 15px;
          height: 15px;
          background-position: -222px -37px;
        }
      }
    }
  }
  .tab-content-wrapper {
    position: relative;
    margin: 0 0 0 7.7083%;

    .img {
      display: none;
      position: absolute;
      left: -28px;
      top: -19px;

      &:nth-child(2) {
        top: -25px;
        left: -17px;
      }
      &:nth-child(3) {
        top: -22px;
        left: -16px;
      }
      &:nth-child(4) {
        top: -22px;
        left: -17px;
      }
    }
  }
  .tab-content {
    .clearfix;
    margin: 0 0 100px 16.9791%;
    display: none;

    &#web-development {
      display: block;
    }
  }
  .tab-text {
    float: left;
    margin-right: 4.338%;
    width: 58.5416%;

    p {
      margin: 0;
    }
  }
  .price {
    position: relative;
    float: left;
    margin: 0 0 40px 60px;
    font-size: 12px;

    &:before {
      content: "";
      position: absolute;
      left: -75px;
      top: 8px;
      width: 60px;
      border-top: solid 1px #c3c7c8;
    }
    span {
      display: block;
      font-size: 30px;
      font-family: 'museo_sans_cyrl', @global-font;
    }
  }
  .show-in-portfolio {
    .clearfix;
    float: left;
    width: 230px;
    color: #6a84d1;
    font-size: 0.750em;

    span {
      display: inline-block;

      &:last-child {
        margin-top: 8px;
        width: 160px;
        text-decoration: underline;
      }
    }
    .arrow-btn {
      position: relative;
      float: left;
      margin: 0 10px 0 0;
      .sq(49px);
      border-radius: 50%;
      background: #fff;

      &:before {
        content: "";
        position: absolute;
        top: 15px;
        left: 22px;
        width: 10px;
        height: 19px;
        background: @sprite -226px -8px;
      }
    }
  }
}

@media screen and (max-width:1023px) {
  .services-tabs {
    .tab-content-wrapper, .tab-nav {
      margin-left: 0;
    }
  }
}

@media screen and (max-width:1005px) {
  .services-tabs {
    .tab-text {
      width: 57%;
    }
    .tab-nav {
      margin-bottom: 27px;
    }
    .img {
      display: none !important;
    }
    .tab-content {
      margin-left: 0;
    }
  }
}

@media screen and (max-width:670px) {
  .tab-nav {
    display: none;
  }
  .services-tabs {
    margin-bottom: 37px;

    h1 {
      margin: 0 0 11px 7px;
      font-size: 1.929rem;
    }
    .tab-content {
      display: block;
      overflow: hidden;
      margin-bottom: 7px;
      padding: 12px 7px 13px;
      background: #fff;
    }
    .tab-title {
      position: relative;
      display: inline-block;
      font-size: 1.357rem;
      text-decoration: none;
      border-bottom: dotted 1px;
      color: #3457c0;
      cursor: pointer;

      &:after {
        content: "";
        position: absolute;
        left: -7px;
        top: -14px;
        width: 400%;
        height: 52px;
      }
    }
    .tab-text {
      float: none;
      margin: 0;
      width: auto;
    }
    .price {
      float: none;
      margin: 11px 0 12px;
      font-size: 1rem;
      font-weight: bold;

      &:before {
        display: none;
      }
      span {
        font-size: 1rem;
        display: inline;
        font-family: @global-font;
      }
    }
    .show-in-portfolio {
      display: block;
      float: none;
      font-size: 1rem;

      .arrow-btn {
        display: none;
      }
      span {
        display: inline;
      }
    }
  }
  .open {
    .tab-title {
      border: none;
      color: @global-text-color;
      margin-bottom: 9px;
    }
  }
  .accordion-wrapper {
    display: none;
  }
}

.services-tabs {
  h1 {
    margin-left: 7.7083%;
  }
  .tab-title {
    display: none;
  }
  .tab-nav {
    overflow: hidden;
    margin-bottom: 47px;
    padding: 42px 0 10px;

    h2 {
      width: 150px;
      margin: 0;
      font-size: 1.714rem;
      line-height: 1em;
    }
    li {
      float: left;
      width: 22.1875%;
      margin-right: 3.7%;

      &:last-child {
        margin-right: 0;
      }
      &.ui-tabs-active {
        a {
          color: @global-text-color;
          border-color: transparent;

          &:before {
            .opacity(0);
          }
        }
      }
    }
    a {
      position: relative;
      font-size: 1.500rem;
      color: #6a84d1;
      text-decoration: none;
      font-family: 'museo_sans_cyrl', @global-font;
      outline: solid 0px transparent;
      border-bottom:  dotted 1px #6a84d1;

      &:before {
        content: "";
        position: absolute;
        background: @sprite;
        top: -35px;
        left: 0;
        .transition(all 150ms ease-in-out);
      }
      &[href="#web-development"] {
        &:before {
          width: 17px;
          height: 16px;
          background-position: -164px -37px;
        }
      }
      &[href="#web-design"] {
        &:before {
          width: 19px;
          height: 18px;
          background-position: -182px -37px;
        }
      }
      &[href="#mobile-development"] {
        &:before {
          width: 15px;
          height: 15px;
          background-position: -204px -37px;
        }
      }
      &[href="#game-development"] {
        &:before {
          width: 15px;
          height: 15px;
          background-position: -222px -37px;
        }
      }
    }
  }
  .tab-content-wrapper {
    position: relative;

    .img {
      display: none;
      position: absolute;
      left: -28px;
      top: -19px;

      &:nth-child(2) {
        top: -25px;
        left: -17px;
      }
      &:nth-child(3) {
        top: -22px;
        left: -16px;
      }
      &:nth-child(4) {
        top: -22px;
        left: -17px;
      }
    }
  }
  .tab-content {
    .clearfix;
    margin: 0 0 100px 16.9791%;
    display: none;

    &#web-development {
      display: block;
    }
  }
  .tab-text {
    float: left;
    margin-right: 4.338%;
    width: 58.5416%;

    p {
      margin: 0;
    }
  }
  .price {
    position: relative;
    float: left;
    margin: 0 0 40px 60px;
    font-size: 12px;

    &:before {
      content: "";
      position: absolute;
      left: -75px;
      top: 8px;
      width: 60px;
      border-top: solid 1px #c3c7c8;
    }
    span {
      display: block;
      font-size: 30px;
      font-family: 'museo_sans_cyrl', @global-font;
    }
  }
  .show-in-portfolio {
    .clearfix;
    float: left;
    width: 230px;
    color: #6a84d1;
    font-size: 0.750em;

    span {
      display: inline-block;

      &:last-child {
        margin-top: 8px;
        width: 160px;
        text-decoration: underline;
      }
    }
    .arrow-btn {
      position: relative;
      float: left;
      margin: 0 10px 0 0;
      .sq(49px);
      border-radius: 50%;
      background: #fff;

      &:before {
        content: "";
        position: absolute;
        top: 15px;
        left: 22px;
        width: 10px;
        height: 19px;
        background: @sprite -226px -8px;
      }
    }
  }
}

@media screen and (max-width:1005px) {
  .services-tabs {
    .tab-text {
      width: 57%;
    }
    .tab-nav {
      margin-bottom: 27px;
    }
    .img {
      display: none !important;
    }
    .tab-content {
      margin-left: 0;
    }
  }
}

@media screen and (max-width:670px) {
  .tab-nav {
    display: none;
  }
  .services-tabs {
    margin-bottom: 37px;

    h1 {
      margin: 0 0 11px 7px;
      font-size: 1.929rem;
    }
    .tab-content {
      display: block;
      overflow: hidden;
      margin-bottom: 7px;
      padding: 12px 7px 13px;
      background: #fff;
    }
    .tab-title {
      position: relative;
      display: inline-block;
      font-size: 1.357rem;
      text-decoration: none;
      border-bottom: dotted 1px;
      color: #3457c0;
      cursor: pointer;

      &:after {
        content: "";
        position: absolute;
        left: -7px;
        top: -14px;
        width: 400%;
        height: 52px;
      }
    }
    .tab-text {
      float: none;
      margin: 0;
      width: auto;
    }
    .price {
      float: none;
      margin: 11px 0 12px;
      font-size: 1rem;
      font-weight: bold;

      &:before {
        display: none;
      }
      span {
        font-size: 1rem;
        display: inline;
        font-family: @global-font;
      }
    }
    .show-in-portfolio {
      display: block;
      float: none;
      font-size: 1rem;

      .arrow-btn {
        display: none;
      }
      span {
        display: inline;
      }
    }
  }
  .open {
    .tab-title {
      border: none;
      color: @global-text-color;
      margin-bottom: 9px;
    }
  }
  .accordion-wrapper {
    display: none;
  }
}


Update

Update

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


replaced widget-title with widget-header, added widget-footer and update less template

/**
 * Widgets
 */
.widget {
    .box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 2px;
    border-color: #e9e9e9;
    .widget-header, .widget-footer {
      .pagination {
        margin: 0;
      }
    }
    .widget-header {
        color: #767676;
        background-color: #f6f6f6;
        padding: 10px 15px;
        border-bottom: 1px solid #e9e9e9;
        line-height: 30px;
        i {
            margin-right: 5px;
        }
        input {
            width: 25%;
        }
    }
    .widget-body {
        padding: 20px;
        table {
            thead {
                background: #fafafa;
                * {
                    font-size: 14px !important;
                }
            }
            tbody {
                * {
                    font-size: 13px !important;
                }
            }
        }
        .error {
            color: #ff0000;
        }
        button {
            margin-left: 5px;
        }
        div.alert {
            margin-bottom: 10px;
        }
        &.large {
          height: 350px;
          overflow-y: auto;
        }
        &.medium {
          height: 250px;
          overflow-y: auto;
        }
        &.small {
          height: 150px;
          overflow-y: auto;
        }
        &.no-padding {
          padding: 0;
          .error, .message {
            padding: 20px;
          }
        }
    }
    .widget-footer {
      border-top: 1px solid #e9e9e9;
      padding: 10px;
    }
    .widget-icon {
        background: #30426a;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        margin-right: 15px;
        i {
            line-height: 66px;
            color: #ffffff;
            font-size: 30px;
        }
    }
    .widget-content {
        .title {
            font-size: 28px;
            display: block;
        }
    }
}

/**
 * Widgets
 */
.widget {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    border-color: #e9e9e9;
    .widget-title {
        color: #767676;
        background-color: #f6f6f6;
        padding: 10px 15px;
        border-bottom: 1px solid #e9e9e9;
        line-height: 30px;
        i {
            margin-right: 5px;
        }
        input {
            width: 25%;
        }
    }
    .widget-body {
        padding: 20px;
        table {
            thead {
                background: #fafafa;
                * {
                    font-size: 14px !important;
                }
            }
            tbody {
                * {
                    font-size: 13px !important;
                }
            }
        }
        .error {
            color: #ff0000;
        }
        button {
            margin-left: 5px;
        }
        div.alert {
            margin-bottom: 10px;
        }
    }
    .widget-body.large {
        height: 350px;
        overflow-y: auto;
    }
    .widget-body.medium {
        height: 250px;
        overflow-y: auto;
    }
    .widget-body.small {
        height: 150px;
        overflow-y: auto;
    }
    .widget-body.no-padding {
        padding: 0;
    }
    .widget-icon {
        background: #30426a;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        margin-right: 15px;
        i {
            line-height: 66px;
            color: #ffffff;
            font-size: 30px;
        }
    }
    .widget-content {
        .title {
            font-size: 28px;
            display: block;
        }
    }
}
.widget .widget-body.no-padding .error, .widget .widget-body.no-padding .message {
    padding: 20px;
}


docs: fix navbar style

docs: fix navbar style

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,latin-ext,cyrillic-ext,cyrillic);
// bootstrap customization
@import "./variables.less";

// bootstrap
@import (npm) "twbs/less/mixins.less";
@import (npm) "twbs/less/normalize.less";
@import (npm) "twbs/less/print.less";
@import (npm) "twbs/less/scaffolding.less";
@import (npm) "twbs/less/type.less";
@import (npm) "twbs/less/code.less";
@import (npm) "twbs/less/grid.less";
@import (npm) "twbs/less/tables.less";
@import (npm) "twbs/less/forms.less";
@import (npm) "twbs/less/buttons.less";
@import (npm) "twbs/less/component-animations.less";
@import (npm) "twbs/less/glyphicons.less";
@import (npm) "twbs/less/dropdowns.less";
@import (npm) "twbs/less/button-groups.less";
@import (npm) "twbs/less/input-groups.less";
@import (npm) "twbs/less/navs.less";
@import (npm) "twbs/less/navbar.less";
@import (npm) "twbs/less/breadcrumbs.less";
@import (npm) "twbs/less/pagination.less";
@import (npm) "twbs/less/pager.less";
@import (npm) "twbs/less/labels.less";
@import (npm) "twbs/less/badges.less";
@import (npm) "twbs/less/jumbotron.less";
@import (npm) "twbs/less/thumbnails.less";
@import (npm) "twbs/less/alerts.less";
@import (npm) "twbs/less/progress-bars.less";
@import (npm) "twbs/less/media.less";
@import (npm) "twbs/less/list-group.less";
@import (npm) "twbs/less/panels.less";
@import (npm) "twbs/less/wells.less";
@import (npm) "twbs/less/close.less";
@import (npm) "twbs/less/modals.less";
@import (npm) "twbs/less/tooltip.less";
@import (npm) "twbs/less/popovers.less";
@import (npm) "twbs/less/carousel.less";
@import (npm) "twbs/less/utilities.less";
@import (npm) "twbs/less/responsive-utilities.less";

// react-forms bootstrap theme
@import (npm) "react-forms/themes/bootstrap/";
@import (npm) "react-forms/themes/bootstrap/RadioButtonGroup";
@import (npm) "react-forms/themes/bootstrap/CheckboxGroup";

@color-base-0: #16193B;
@color-base-1: #35478C;
@color-base-2: #4E7AC7;
@color-base-3: #7FB2F0;
@color-base-4: #ADD5F7;

html, body {
  font-family: 'Open Sans', sans-serif;
}

body {
  padding-top: 50px;
}

p {
  code, a {
    margin: 0 2px;
  }
}

pre, code {
  border: none;
  background: lighten(@color-base-4, 15%);
  color: darken(@color-base-2, 10%);
}

.PageHeader > .container,
.PageContent {
  max-width: 920px;
}

.NavigationBar {
  @color: lighten(@color-base-4, 20%);
  @background: @color-base-2;
  @background-hover: darken(@background, 10%);
  @border: 1px solid @background-hover;

  background: @background;
  border-bottom: @border;

  &.navbar-default .navbar-brand {
    font-weight: bold;
  }

  .nav li {
    cursor: default;
  }

  &.navbar-default li.dropdown {
    & > .dropdown-menu a {
      color: @background;
      &:hover {
        color: @color;
      }
    }

    &:hover {
      & > .dropdown-menu {
        display: block;
      }
    }
  }

  &.navbar-default {
    .navbar-header, li {
      & > a {
        color: @color;
      }
      &:hover > a {
        background: @background-hover;
        color: @color;
      }
    }
  }
}

.Page {
  .PageHeader {
    background: @color-base-4;
    color: lighten(@color-base-4, 20%);
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: left;
    border-bottom: 1px solid darken(@color-base-4, 10%);

    .title {
      font-size: 36px;
    }
    .tagline {
      font-size: 16px;
    }
  }

  .PageContent {
    padding-top: 60px;
    padding-bottom: 60px;
    width: 80%;
    margin: 0 auto;
  }
}

.Demo {
  .DemoHeader {
    background: @gray-lighter;
    color: @gray-light;
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 24px;
    text-align: left;
  }

  .DemoStage {
    padding: 0 20px;
    width: 80%;
    margin: 0 auto;

    .title {
      padding-bottom: 40px;
    }
  }
}

.Section {
  padding-bottom: 20px;

  .SectionRow {
  }

  & > .SectionTitle {
    padding-bottom: 20px;
  }
}

.ShowValue {
  .ShowValueValue > .text,
  .ShowValueComponent > .text {
    font-size: 80%;
  }

  .ShowValueValue {
    padding: 10px 0;

    .value {
      border: none;
      background: #fff;
      color: @gray-light;
    }
  }
}

/**
 * Form styling
 */

.Form {
  padding: 15px;
}

.FormErrors {
}

.UndoFormDemo {
  .Form {
    position: relative;
    padding-top: 30px;
  }
  .UndoControls {
    .user-select(none);
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 150%;
    button {
      border: none;
      background: transparent;
    }
  }
}

.ArrayFormDemo {

  .ArrayEditor {
    .Item {
      position: relative;
      padding-right: 40px;
    }
    .Remove {
      color: @gray-lighter;
      font-size: 190%;
      position: absolute;
      top: 0;
      right: 15px;
      background: none;
      border: none;

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

.SortableRepeatingFieldset {
  .react-forms-repeating-fieldset-item {
    position: relative;
  }

  .SortablePlaceholder {
    .form-group();
    height: 30px;
    width: 100%;
    background: @gray-lighter;
  }
  .SortableHandle {
    background: lighten(@gray-lighter, 2%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;
    height: 100%;
    cursor: move;
  }
  &.SortableActive {
    cursor: move;
    .SortableHandle {
      display: none !important;
    }
  }
}

.API {
  h4 {
    margin-bottom: 20px;
    color: @color-base-4;
  }
  background: lighten(@color-base-4, 15%);
  padding: 30px;
}

.APIDoc {
  .sig pre, .description {
    padding: 0;
  }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,latin-ext,cyrillic-ext,cyrillic);
// bootstrap customization
@import "./variables.less";

// bootstrap
@import (npm) "twbs/less/mixins.less";
@import (npm) "twbs/less/normalize.less";
@import (npm) "twbs/less/print.less";
@import (npm) "twbs/less/scaffolding.less";
@import (npm) "twbs/less/type.less";
@import (npm) "twbs/less/code.less";
@import (npm) "twbs/less/grid.less";
@import (npm) "twbs/less/tables.less";
@import (npm) "twbs/less/forms.less";
@import (npm) "twbs/less/buttons.less";
@import (npm) "twbs/less/component-animations.less";
@import (npm) "twbs/less/glyphicons.less";
@import (npm) "twbs/less/dropdowns.less";
@import (npm) "twbs/less/button-groups.less";
@import (npm) "twbs/less/input-groups.less";
@import (npm) "twbs/less/navs.less";
@import (npm) "twbs/less/navbar.less";
@import (npm) "twbs/less/breadcrumbs.less";
@import (npm) "twbs/less/pagination.less";
@import (npm) "twbs/less/pager.less";
@import (npm) "twbs/less/labels.less";
@import (npm) "twbs/less/badges.less";
@import (npm) "twbs/less/jumbotron.less";
@import (npm) "twbs/less/thumbnails.less";
@import (npm) "twbs/less/alerts.less";
@import (npm) "twbs/less/progress-bars.less";
@import (npm) "twbs/less/media.less";
@import (npm) "twbs/less/list-group.less";
@import (npm) "twbs/less/panels.less";
@import (npm) "twbs/less/wells.less";
@import (npm) "twbs/less/close.less";
@import (npm) "twbs/less/modals.less";
@import (npm) "twbs/less/tooltip.less";
@import (npm) "twbs/less/popovers.less";
@import (npm) "twbs/less/carousel.less";
@import (npm) "twbs/less/utilities.less";
@import (npm) "twbs/less/responsive-utilities.less";

// react-forms bootstrap theme
@import (npm) "react-forms/themes/bootstrap/";
@import (npm) "react-forms/themes/bootstrap/RadioButtonGroup";
@import (npm) "react-forms/themes/bootstrap/CheckboxGroup";

@color-base-0: #16193B;
@color-base-1: #35478C;
@color-base-2: #4E7AC7;
@color-base-3: #7FB2F0;
@color-base-4: #ADD5F7;

html, body {
  font-family: 'Open Sans', sans-serif;
}

body {
  padding-top: 50px;
}

p {
  code, a {
    margin: 0 2px;
  }
}

pre, code {
  border: none;
  background: lighten(@color-base-4, 15%);
  color: darken(@color-base-2, 10%);
}

.PageHeader > .container,
.PageContent {
  max-width: 920px;
}

.NavigationBar {
  @color: lighten(@color-base-4, 20%);
  @background: @color-base-2;
  @background-hover: darken(@background, 10%);
  @border: 1px solid @background-hover;

  background: @background;
  border-bottom: @border;

  &.navbar-default .navbar-brand {
    font-weight: bold;
  }

  .nav li {
    cursor: default;
  }

  &.navbar-default li.dropdown {
    & > .dropdown-menu a {
      color: @background;
      &:hover {
        color: @color;
      }
    }

    &:hover {
      & > .dropdown-menu {
        display: block;
      }
    }
  }

  &.navbar-default .navbar-brand,
  &.navbar-default li > a {
    color: @color;

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

.Page {
  .PageHeader {
    background: @color-base-4;
    color: lighten(@color-base-4, 20%);
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: left;
    border-bottom: 1px solid darken(@color-base-4, 10%);

    .title {
      font-size: 36px;
    }
    .tagline {
      font-size: 16px;
    }
  }

  .PageContent {
    padding-top: 60px;
    padding-bottom: 60px;
    width: 80%;
    margin: 0 auto;
  }
}

.Demo {
  .DemoHeader {
    background: @gray-lighter;
    color: @gray-light;
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 24px;
    text-align: left;
  }

  .DemoStage {
    padding: 0 20px;
    width: 80%;
    margin: 0 auto;

    .title {
      padding-bottom: 40px;
    }
  }
}

.Section {
  padding-bottom: 20px;

  .SectionRow {
  }

  & > .SectionTitle {
    padding-bottom: 20px;
  }
}

.ShowValue {
  .ShowValueValue > .text,
  .ShowValueComponent > .text {
    font-size: 80%;
  }

  .ShowValueValue {
    padding: 10px 0;

    .value {
      border: none;
      background: #fff;
      color: @gray-light;
    }
  }
}

/**
 * Form styling
 */

.Form {
  padding: 15px;
}

.FormErrors {
}

.UndoFormDemo {
  .Form {
    position: relative;
    padding-top: 30px;
  }
  .UndoControls {
    .user-select(none);
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 150%;
    button {
      border: none;
      background: transparent;
    }
  }
}

.ArrayFormDemo {

  .ArrayEditor {
    .Item {
      position: relative;
      padding-right: 40px;
    }
    .Remove {
      color: @gray-lighter;
      font-size: 190%;
      position: absolute;
      top: 0;
      right: 15px;
      background: none;
      border: none;

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

.SortableRepeatingFieldset {
  .react-forms-repeating-fieldset-item {
    position: relative;
  }

  .SortablePlaceholder {
    .form-group();
    height: 30px;
    width: 100%;
    background: @gray-lighter;
  }
  .SortableHandle {
    background: lighten(@gray-lighter, 2%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;
    height: 100%;
    cursor: move;
  }
  &.SortableActive {
    cursor: move;
    .SortableHandle {
      display: none !important;
    }
  }
}

.API {
  h4 {
    margin-bottom: 20px;
    color: @color-base-4;
  }
  background: lighten(@color-base-4, 15%);
  padding: 30px;
}

.APIDoc {
  .sig pre, .description {
    padding: 0;
  }
}


[bug 889426] Large images displayed in AoA

@import 'variables.less';
@import 'vendors.less';

#infinite-scroll {
  text-align: center;
}

#refresh-busy {
  display: none;
}

#stats {
  margin-top: 30px;

  > p,
  > span {
    color: @textLightGrey;
    font-size: 13px;
    margin: 5px 10px;

    > strong {
      color: @textGrey;
    }
  }

  > span {
    float: right;
  }
}

#steps {
  .btn {
    margin-top: 8px;
  }

  ol {
    list-style: none;
    margin: 82px 0 0 0;
    padding: 0;

    li {
      counter-increment: item;
      float: left;
      font-family: @OpenSansLight;
      font-size: 22px;
      padding: 40px 0 0 0;
      position: relative;

      &:before {
        background: #fff;
        .border-radius(13px);
        content: counter(item);
        height: 26px;
        left: 0;
        line-height: 26px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 26px;
      }
    }
  }
}
#tweet-tools {
  float: right;
  margin: 20px 0;
}

#tweets {
  list-style: none;
  margin: 0;
  padding: 0;

  .replies {
    margin: 20px 40px 40px 40px;
  }

  .tweet {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;

    .avatar {
      float: left;

      img {
        width: 48px;
        height: 48px;
      }
    }

    .tweet-contents {
      font-size: 13px;
      margin-left: 58px;

      p {
        margin: 6px 0 10px 0;
      }

      .reply-button {
        background: @iconsSprite -49px -1789px no-repeat;
        color: @textBlue;
        cursor: pointer;
        float: left;
        padding-left: 24px;
        margin-right: 10px;

        &:hover {
          color: @textDarkBlue;
          text-decoration: underline;
        }
      }

      .reply-count {
        color: @textGreen;
        cursor: pointer;
        float: left;
      }

      .remove-tweet {
        float: right;
      }

      .tweet-time,
      .tweet-time:visited,
      .tweet-time:hover {
        color: @textLightGrey;
        float: right;
      }

      .user-meta,
      .user-meta:visited,
      .user-meta:hover {
        color: @textGrey;
        font-family: @OpenSansLight;
        font-size: 20px;
      }
    }
  }
}

#top-aoa-contributors {
  background: white;
  padding: 10px 15px;

  h2 {
    margin: 0 0 5px 0;
  }

  .aoa-contributor {
    margin-bottom: 15px;
    position: relative;

    .avatar {
      float: left;
      position: relative;
      top: 8px;
      width: 48px;
      height: 48px;
      background: #fff;
      margin-right: 8px;
      .box-shadow(0px 0px 2px 1px rgba(0, 0, 0, 0.2));
    }

    .user-meta {
      display: block;
      padding-left: 60px;

      .twittername {
        color: @textGrey;
        font-family: @OpenSansLight;
        font-size: 20px;
        display: block;
      }
    }

    .stat {
      display: inline-block;
      margin: 3px;
      font-weight: bold;
      color: #333;

      .count {
        font-size: 1.1en;
        display: block;
        margin-top: -4px;
      }
      .timeperiod {
        font-size: 0.7em;
        text-transform: uppercase;
        display: block;
        margin-top: -3px;
      }
    }
  }
}

/*
*   Modal Styles
*   TODO: Restyle the modals
*/

#twitter-logout {
  display: inline;
}

#twitter-modal {
  text-align: left;
}

#twitter-modal h4 {
  font-size: 135%;
  margin-bottom: 5px;
}

#twitter-modal p {
  margin: 0 0 10px 0;
}

.btn.register {
  margin: 0 0 0 14px;
}

.btn.signin-twitter {
  float: none;
  width: 300px;
}

#reply-container {
  background-color: #fff;
  font-family: Verdana, sans-serif;
  margin: 0 auto;
  text-align: left;
  top: 86px;
}

#reply-container,
#reply-container #replies {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#initial-tweet img {
  border: 1px solid #bbb;
  float: left;
}

#initial-tweet .box {
  background: #fff;
  border: 1px solid #aaa;
  color: #69645b;
  display: block;
  font-size: 80%;
  margin-left: 70px;
  padding: 6px 9px 10px 9px;
  text-align: left;
}

#initial-tweet a.twittername {
  color: #2276bb;
  font-weight: bold;
  text-decoration: none;
}

#initial-tweet a.avatar {
  display: inline;
}

#initial-tweet .text {
  padding-top: 4px;
}

#initial-tweet #arrow {
  border: 0;
  left: 75px;
  position: absolute;
  top: 60px;
}

#reply-container h4 {
  color: #4b4740;
  font-family: Verdana, sans-serif;
  font-size: 125%;
  font-weight: normal;
  margin-bottom: 15px;
}

#reply-container #replies {
  background: #8fc1da;
  background: -moz-linear-gradient(center top, #8fc1da, #e5f1f7) repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#8fc1da), to(#e5f1f7));
  margin-top: 20px;
  padding: 15px 20px;
}

#reply-container h3.ui-accordion-header {
  background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  margin: 0 0 9px 0;
  padding: 4px 0 5px 24px;
}

#reply-container h3.ui-accordion-header a {
  color: #69645b;
  display: block;
}

#reply-container h3.ui-accordion-header a:hover {
  text-decoration: none;
}

#reply-container #replies ul {
  list-style-type: none;
  margin: 0 0 10px 24px;
}

#reply-container #replies li a {
  color: #0489b7;
  display: block;
  padding-bottom: 2px;
}

#reply-container #no-responses a {
  color: #447BC4;
}

#reply-container h3.ui-accordion-header.ui-state-default {
  background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-active {
  background: #f0f0f0 url('../img/customercare/expander-open.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-default a {
  color: #69645b;
  font-weight: normal;
}

#reply-container h3.ui-accordion-header.ui-state-active a {
  color: #69645b;
  font-weight: bold;
}

#accordion .ui-widget-content {
  background: none;
  border: none;
}

.topics .snippet {
  display: none;
}

#reply {
  padding-bottom: 34px;
}
#reply .desc {
  color: #69645B;
  font-size: 85%;
  margin-bottom: 10px;
  width: 340px;
}

#reply-message {
  background: #fff;
  border: 1px solid #aaa;
  height: 65px;
  font-size: .9em;
  padding: 10px 15px;
  width:325px;
}

#reply #reply-arrow {
  display: inline;
  left: 30px;
  position: relative;
  top: 5px;
}

#error-message,
#submit-message {
  color: #4b4740;
  display: none;
  float: left;
  font-weight: bold;
  height: 21px;
  margin-top: 14px;
}

#submit-message {
  background: url('../img/customercare/reply-check.png') right top no-repeat;
  padding-right: 23px;
  padding-top: 3px;
}

#error-message {
  background: url('../img/customercare/notification-error.png') right 4px no-repeat;
  padding-right: 20px;
}

#reply .container {
  position: relative;
  top: -12px;
}

#reply .submitButton {
  background: -moz-linear-gradient(center top, #eed052 15px, #ebb04f 18px, #e79f30, #e0752b);
/* color-stop percentages according to height */
  background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #eed052), color-stop(.5, #ebb04f), color-stop(.75, #e79f30), to(#e0752b));
  border-left: 1px solid #d4661a;
  border-right: 1px solid #d4661a;
  border-top: 1px solid #d19f7c;
  border-bottom: 1px solid #ba5c1c;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 5px #777;
  -moz-box-shadow: 0 0 5px #777;
  color: #b01a04;
  cursor: pointer;
  float: right;
  height: 36px;
  line-height: 36px;
  margin-top: 10px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  width: 140px;
}

#submit-busy {
  display: none;
  height: 13px;
  padding-left: 5px;
  width: 13px;
}

#reply .submitButton.busy {
  background: -moz-linear-gradient(center top, #ccc 15px, #ccc 18px, #aaa, #aaa);
  background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #ccc), color-stop(.5, #ccc), color-stop(.75, #aaa), to(#aaa));
  border-color: #aaa;
  color: #666;
}

#reply .submitButton.busy #submit-busy {
  display: inline;
}

#reply .character-counter {
  color: #fff;
  float: right;
  font-weight: bold;
  font-size: 24px;
  position: relative;
  top: 33px;
  width: 50px;
}

@import 'variables.less';
@import 'vendors.less';

#infinite-scroll {
  text-align: center;
}

#refresh-busy {
  display: none;
}

#stats {
  margin-top: 30px;

  > p,
  > span {
    color: @textLightGrey;
    font-size: 13px;
    margin: 5px 10px;

    > strong {
      color: @textGrey;
    }
  }

  > span {
    float: right;
  }
}

#steps {
  .btn {
    margin-top: 8px;
  }

  ol {
    list-style: none;
    margin: 82px 0 0 0;
    padding: 0;

    li {
      counter-increment: item;
      float: left;
      font-family: @OpenSansLight;
      font-size: 22px;
      padding: 40px 0 0 0;
      position: relative;

      &:before {
        background: #fff;
        .border-radius(13px);
        content: counter(item);
        height: 26px;
        left: 0;
        line-height: 26px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 26px;
      }
    }
  }
}
#tweet-tools {
  float: right;
  margin: 20px 0;
}

#tweets {
  list-style: none;
  margin: 0;
  padding: 0;

  .replies {
    margin: 20px 40px 40px 40px;
  }

  .tweet {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;

    .avatar {
      float: left;
    }

    .tweet-contents {
      font-size: 13px;
      margin-left: 58px;

      p {
        margin: 6px 0 10px 0;
      }

      .reply-button {
        background: @iconsSprite -49px -1789px no-repeat;
        color: @textBlue;
        cursor: pointer;
        float: left;
        padding-left: 24px;
        margin-right: 10px;

        &:hover {
          color: @textDarkBlue;
          text-decoration: underline;
        }
      }

      .reply-count {
        color: @textGreen;
        cursor: pointer;
        float: left;
      }

      .remove-tweet {
        float: right;
      }

      .tweet-time,
      .tweet-time:visited,
      .tweet-time:hover {
        color: @textLightGrey;
        float: right;
      }

      .user-meta,
      .user-meta:visited,
      .user-meta:hover {
        color: @textGrey;
        font-family: @OpenSansLight;
        font-size: 20px;
      }
    }
  }
}

#top-aoa-contributors {
  background: white;
  padding: 10px 15px;

  h2 {
    margin: 0 0 5px 0;
  }

  .aoa-contributor {
    margin-bottom: 15px;
    position: relative;

    .avatar {
      float: left;
      position: relative;
      top: 8px;
      width: 48px;
      height: 48px;
      background: #fff;
      margin-right: 8px;
      .box-shadow(0px 0px 2px 1px rgba(0, 0, 0, 0.2));
    }

    .user-meta {
      display: block;
      padding-left: 60px;

      .twittername {
        color: @textGrey;
        font-family: @OpenSansLight;
        font-size: 20px;
        display: block;
      }
    }

    .stat {
      display: inline-block;
      margin: 3px;
      font-weight: bold;
      color: #333;

      .count {
        font-size: 1.1en;
        display: block;
        margin-top: -4px;
      }
      .timeperiod {
        font-size: 0.7em;
        text-transform: uppercase;
        display: block;
        margin-top: -3px;
      }
    }
  }
}

/*
*   Modal Styles
*   TODO: Restyle the modals
*/

#twitter-logout {
  display: inline;
}

#twitter-modal {
  text-align: left;
}

#twitter-modal h4 {
  font-size: 135%;
  margin-bottom: 5px;
}

#twitter-modal p {
  margin: 0 0 10px 0;
}

.btn.register {
  margin: 0 0 0 14px;
}

.btn.signin-twitter {
  float: none;
  width: 300px;
}

#reply-container {
  background-color: #fff;
  font-family: Verdana, sans-serif;
  margin: 0 auto;
  text-align: left;
  top: 86px;
}

#reply-container,
#reply-container #replies {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#initial-tweet img {
  border: 1px solid #bbb;
  float: left;
}

#initial-tweet .box {
  background: #fff;
  border: 1px solid #aaa;
  color: #69645b;
  display: block;
  font-size: 80%;
  margin-left: 70px;
  padding: 6px 9px 10px 9px;
  text-align: left;
}

#initial-tweet a.twittername {
  color: #2276bb;
  font-weight: bold;
  text-decoration: none;
}

#initial-tweet a.avatar {
  display: inline;
}

#initial-tweet .text {
  padding-top: 4px;
}

#initial-tweet #arrow {
  border: 0;
  left: 75px;
  position: absolute;
  top: 60px;
}

#reply-container h4 {
  color: #4b4740;
  font-family: Verdana, sans-serif;
  font-size: 125%;
  font-weight: normal;
  margin-bottom: 15px;
}

#reply-container #replies {
  background: #8fc1da;
  background: -moz-linear-gradient(center top, #8fc1da, #e5f1f7) repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#8fc1da), to(#e5f1f7));
  margin-top: 20px;
  padding: 15px 20px;
}

#reply-container h3.ui-accordion-header {
  background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  margin: 0 0 9px 0;
  padding: 4px 0 5px 24px;
}

#reply-container h3.ui-accordion-header a {
  color: #69645b;
  display: block;
}

#reply-container h3.ui-accordion-header a:hover {
  text-decoration: none;
}

#reply-container #replies ul {
  list-style-type: none;
  margin: 0 0 10px 24px;
}

#reply-container #replies li a {
  color: #0489b7;
  display: block;
  padding-bottom: 2px;
}

#reply-container #no-responses a {
  color: #447BC4;
}

#reply-container h3.ui-accordion-header.ui-state-default {
  background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-active {
  background: #f0f0f0 url('../img/customercare/expander-open.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-default a {
  color: #69645b;
  font-weight: normal;
}

#reply-container h3.ui-accordion-header.ui-state-active a {
  color: #69645b;
  font-weight: bold;
}

#accordion .ui-widget-content {
  background: none;
  border: none;
}

.topics .snippet {
  display: none;
}

#reply {
  padding-bottom: 34px;
}
#reply .desc {
  color: #69645B;
  font-size: 85%;
  margin-bottom: 10px;
  width: 340px;
}

#reply-message {
  background: #fff;
  border: 1px solid #aaa;
  height: 65px;
  font-size: .9em;
  padding: 10px 15px;
  width:325px;
}

#reply #reply-arrow {
  display: inline;
  left: 30px;
  position: relative;
  top: 5px;
}

#error-message,
#submit-message {
  color: #4b4740;
  display: none;
  float: left;
  font-weight: bold;
  height: 21px;
  margin-top: 14px;
}

#submit-message {
  background: url('../img/customercare/reply-check.png') right top no-repeat;
  padding-right: 23px;
  padding-top: 3px;
}

#error-message {
  background: url('../img/customercare/notification-error.png') right 4px no-repeat;
  padding-right: 20px;
}

#reply .container {
  position: relative;
  top: -12px;
}

#reply .submitButton {
  background: -moz-linear-gradient(center top, #eed052 15px, #ebb04f 18px, #e79f30, #e0752b);
/* color-stop percentages according to height */
  background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #eed052), color-stop(.5, #ebb04f), color-stop(.75, #e79f30), to(#e0752b));
  border-left: 1px solid #d4661a;
  border-right: 1px solid #d4661a;
  border-top: 1px solid #d19f7c;
  border-bottom: 1px solid #ba5c1c;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 5px #777;
  -moz-box-shadow: 0 0 5px #777;
  color: #b01a04;
  cursor: pointer;
  float: right;
  height: 36px;
  line-height: 36px;
  margin-top: 10px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  width: 140px;
}

#submit-busy {
  display: none;
  height: 13px;
  padding-left: 5px;
  width: 13px;
}

#reply .submitButton.busy {
  background: -moz-linear-gradient(center top, #ccc 15px, #ccc 18px, #aaa, #aaa);
  background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #ccc), color-stop(.5, #ccc), color-stop(.75, #aaa), to(#aaa));
  border-color: #aaa;
  color: #666;
}

#reply .submitButton.busy #submit-busy {
  display: inline;
}

#reply .character-counter {
  color: #fff;
  float: right;
  font-weight: bold;
  font-size: 24px;
  position: relative;
  top: 33px;
  width: 50px;
}


Updating main.less

Updating main.less

@import "bootstrap/bootstrap.less";
@import "variables.less";
@import "clearsans.less";
@import "theme.less";
@import "icons.less";
@import "icons-filled.less";
@import "retina.less";
@import "setup.less";
@import "radial.less";
@import "header.less";
@import "containers.less";
@import "container-modal.less";

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  font-family: 'Clear Sans', sans-serif;

  cursor: default;
  img {
    pointer-events: none;
  }
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  margin: 3px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: none;
}

::-webkit-scrollbar-thumb {
  border: 3px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  width: 7px;
  border-radius: 8px;
  background-color: rgba(0,0,0,0.2);
}

.popover {
  font-family: 'Clear Sans', sans-serif;

  color: @gray-normal;
  font-weight: 400;
  font-size: 13px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
  border: 1px solid #ddd;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes translatewave {
  from {
    -webkit-transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(20px);
  }
}

@-webkit-keyframes translatedownload {
  0% {
    -webkit-transform: translateY(6px);
    opacity: 0;
  }
  25% {
    opacity: 1;
    -webkit-transform: translateY(6px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }
}

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


create or edit document route association layout

* do not specify a padding different from the other boxes
* do not use % value (rendering problem on firefox + we do not want a variable padding, do we?)
* simply CSS

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


img margins

img margins

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


Add search.less

Add search.less

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


adding a max-width to callouts to break up the 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/pradeepmurugesan/incubator-freemarker-docgen.git/'


optimized contrast component

optimized contrast component

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


fixed the dumb ol issue that I thought I fixed before with the indent.  @tvoltier found it with his hawk eyes.

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

/* Styles for jsTree control */
/* (these are based on jsTree's default theme .css file, so they are not very LESS-like) */

.jstree-brackets li,
.jstree-brackets ins { background-image:url("styles/images/jsTreeSprites.png"); background-repeat:no-repeat; background-color:transparent; }
.jstree-brackets li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-brackets li.jstree-last { background:transparent; }
.jstree-brackets .jstree-open > ins { background-position:-72px 0; }
.jstree-brackets .jstree-closed > ins { background-position:-54px 0; }
.jstree-brackets .jstree-leaf > ins { background-position:-36px 0; }

/* Make the links in the JS tree the width of the container
 * by shifting the off the screen by negative margin and moving the
 * content back by pushing the padding. The icons are positioned absolute
 * relative to the containing list item so the sit above the a's background.
 * This also means we need to include the size of the sprite in the padding
 * so the text ends up back in the same spot visually
 */
.jstree-brackets li > a {
    padding-left: @spriteSize18 + 10000;
    margin-left: -10000px;
    display: block;
}

.jstree li {
    position: relative;
}

.jstree-brackets li {
    line-height: 10px;
    vertical-align: baseline;
    a {
        color: #BBB;
        font-size: 13px;
        cursor: default;

        &.jstree-clicked {
            color: #fff;
            font-weight: @font-weight-semibold;
        }
    }
    .extension a {
        color: #8e9a9d;
    }
    &.jstree-closed, &.jstree-open {
        margin-left: 10px;
        > a {
            color: #fff;
            font-weight: @font-weight-semibold;
        }
    }
    &.jstree-leaf {
        margin-left: 10px;
    }
}

.jstree ins {
    position: absolute;
}

.jstree-brackets a .jstree-icon { background-position:-56px -19px; }
.jstree-brackets a.jstree-loading .jstree-icon { background:url("styles/images/throbber.gif") center center no-repeat !important; }

.jstree-brackets li > a {
    padding-top: 3px;
    padding-bottom: 3px;
}
.jstree-brackets li > ins {
    margin-top: 2px;
    margin-bottom: 2px;
}

.jstree-brackets .jstree-no-dots li,
.jstree-brackets .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-brackets .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-brackets .jstree-no-dots .jstree-closed > ins { background-position:0 0; }

.jstree-brackets .jstree-no-icons a .jstree-icon { display:none; }

.jstree-brackets .jstree-search { font-style:italic; }

.jstree-brackets .jstree-no-icons .jstree-checkbox { display:inline-block; }
.jstree-brackets .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }

#vakata-dragged.jstree-brackets ins { background:transparent !important; }
#vakata-dragged.jstree-brackets .jstree-ok { background:url("styles/images/jsTreeSprites.png") -2px -53px no-repeat !important; }
#vakata-dragged.jstree-brackets .jstree-invalid { background:url("styles/images/jsTreeSprites.png") -18px -53px no-repeat !important; }
#jstree-marker.jstree-brackets { background:url("styles/images/jsTreeSprites.png") -41px -57px no-repeat !important; text-indent:-100px; }

.jstree-brackets a.jstree-search { color:aqua; }
.jstree-brackets .jstree-locked a { color:silver; cursor:default; }

.jstree-brackets .jstree-rename-input { color: black; }

#vakata-contextmenu.jstree-brackets-context,
#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
#vakata-contextmenu.jstree-brackets-context li { }
#vakata-contextmenu.jstree-brackets-context a { color:black; }
#vakata-contextmenu.jstree-brackets-context a:hover,
#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a,
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
#vakata-contextmenu.jstree-brackets-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
#vakata-contextmenu.jstree-brackets-context li ul { margin-left:-4px; }

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

/* Styles for jsTree control */
/* (these are based on jsTree's default theme .css file, so they are not very LESS-like) */

.jstree-brackets li,
.jstree-brackets ins { background-image:url("styles/images/jsTreeSprites.png"); background-repeat:no-repeat; background-color:transparent; }
.jstree-brackets li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-brackets li.jstree-last { background:transparent; }
.jstree-brackets .jstree-open > ins { background-position:-72px 0; }
.jstree-brackets .jstree-closed > ins { background-position:-54px 0; }
.jstree-brackets .jstree-leaf > ins { background-position:-36px 0; }

/* Make the links in the JS tree the width of the container
 * by shifting the off the screen by negative margin and moving the
 * content back by pushing the padding. The icons are positioned absolute
 * relative to the containing list item so the sit above the a's background.
 * This also means we need to include the size of the sprite in the padding
 * so the text ends up back in the same spot visually
 */
.jstree-brackets li > a {
    padding-left: @spriteSize18 + 10000;
    margin-left: -10000px;
    display: block;
}

.jstree li {
    position: relative;
}

.jstree-brackets li {
    line-height: 10px;
    vertical-align: baseline;
    a {
        color: #BBB;
        font-size: 13px;
        cursor: default;

        &.jstree-clicked {
            color: #fff;
            font-weight: @font-weight-semibold;
        }
    }
    .extension a {
        color: #8e9a9d;
    }
    &.jstree-closed, &.jstree-open {
        margin-left: 10px;
        > a {
            color: #fff;
            font-weight: @font-weight-semibold;
        }
    }
}

.jstree ins {
    position: absolute;
}

.jstree-brackets a .jstree-icon { background-position:-56px -19px; }
.jstree-brackets a.jstree-loading .jstree-icon { background:url("styles/images/throbber.gif") center center no-repeat !important; }

.jstree-brackets li > a {
    padding-top: 3px;
    padding-bottom: 3px;
}
.jstree-brackets li > ins {
    margin-top: 2px;
    margin-bottom: 2px;
}

.jstree-brackets .jstree-no-dots li,
.jstree-brackets .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-brackets .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-brackets .jstree-no-dots .jstree-closed > ins { background-position:0 0; }

.jstree-brackets .jstree-no-icons a .jstree-icon { display:none; }

.jstree-brackets .jstree-search { font-style:italic; }

.jstree-brackets .jstree-no-icons .jstree-checkbox { display:inline-block; }
.jstree-brackets .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }

#vakata-dragged.jstree-brackets ins { background:transparent !important; }
#vakata-dragged.jstree-brackets .jstree-ok { background:url("styles/images/jsTreeSprites.png") -2px -53px no-repeat !important; }
#vakata-dragged.jstree-brackets .jstree-invalid { background:url("styles/images/jsTreeSprites.png") -18px -53px no-repeat !important; }
#jstree-marker.jstree-brackets { background:url("styles/images/jsTreeSprites.png") -41px -57px no-repeat !important; text-indent:-100px; }

.jstree-brackets a.jstree-search { color:aqua; }
.jstree-brackets .jstree-locked a { color:silver; cursor:default; }

.jstree-brackets .jstree-rename-input { color: black; }

#vakata-contextmenu.jstree-brackets-context,
#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
#vakata-contextmenu.jstree-brackets-context li { }
#vakata-contextmenu.jstree-brackets-context a { color:black; }
#vakata-contextmenu.jstree-brackets-context a:hover,
#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a,
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
#vakata-contextmenu.jstree-brackets-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
#vakata-contextmenu.jstree-brackets-context li ul { margin-left:-4px; }


Remove iframe's border on email preview

Remove iframe's border on email preview

error: pathspec 'layout/default/Component/EmailPreview/default.less' did not match any file(s) known to git


increase line height. also prevent file names from wrapping lines.

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;
    border-right: 1px solid #4e5153;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simpleToolbarLayout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;
    }
}

/* Menu-related styles */
.toolbar .nav {
    @menubar-top-padding: 8px;
    @menubar-bottom-padding: 6px;
    @menubar-h-padding: 9px;
    @item-highlight-color: #e0f0fa;

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 16px;

                padding: 1px 10px 1px 6px; // slightly less padding on left to account for checkmark
                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.selected::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
    white-space: nowrap;
}

.btn {
    font-size: 17px;
    font-weight: @font-weight-semibold;
    color: #454545;

    &:hover {
        background-position: 0 15px;
        background-color: #fff;
    }

    &.primary {
        background-color: @blue;
    }
}

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;
    border-right: 1px solid #4e5153;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simpleToolbarLayout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;
    }
}

/* Menu-related styles */
.toolbar .nav {
    @menubar-top-padding: 8px;
    @menubar-bottom-padding: 6px;
    @menubar-h-padding: 9px;
    @item-highlight-color: #e0f0fa;

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 16px;

                padding: 1px 10px 1px 6px; // slightly less padding on left to account for checkmark
                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.selected::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 17px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
}

.btn {
    font-size: 17px;
    font-weight: @font-weight-semibold;
    color: #454545;

    &:hover {
        background-position: 0 15px;
        background-color: #fff;
    }

    &.primary {
        background-color: @blue;
    }
}