@import "stylesheets/atom";
@import "stylesheets/buttons";
@import "stylesheets/editor";
@import "stylesheets/git";
@import "stylesheets/lists";
@import "stylesheets/messages";
@import "stylesheets/nav";
@import "stylesheets/overlays";
@import "stylesheets/panels";
@import "stylesheets/panes";
@import "stylesheets/progress";
@import "stylesheets/sites";
@import "stylesheets/tabs";
@import "stylesheets/text";
@import "stylesheets/tooltips";
@import "stylesheets/tree-view";
@import "stylesheets/utilities";
@import "stylesheets/settings";

.icons(@icons) when (@icons = true) {
  @import "stylesheets/icons";
}
/**
 * Set below to false to not import Seti-UI icons.
 * Requries View -> Reload after changing value.
 * Mainly to use with file-icons package.
*/
.icons(true);

Store package style sheets in the styles/ directory instead of stylesheets/ in the color-picker package

@import "styles/atom";
@import "styles/buttons";
@import "styles/editor";
@import "styles/git";
@import "styles/lists";
@import "styles/messages";
@import "styles/nav";
@import "styles/overlays";
@import "styles/panels";
@import "styles/panes";
@import "styles/progress";
@import "styles/sites";
@import "styles/tabs";
@import "styles/text";
@import "styles/tooltips";
@import "styles/tree-view";
@import "styles/utilities";
@import "styles/settings";

.icons(@icons) when (@icons = true) {
  @import "styles/icons";
}
/**
 * Set below to false to not import Seti-UI icons.
 * Requries View -> Reload after changing value.
 * Mainly to use with file-icons package.
*/
.icons(true);


@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";

.archive-view {
  margin: 0;
  padding: 0;
  overflow: auto;
  position: relative;
  display: -webkit-flex;
  @icon-margin: @line-height-base / 4;

  .archive-container {
    height:100%;
    width: 100%;

    .loading-message {
      margin: 5px;

      .octicon(hourglass);

      &:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .tree {
      padding: 0 5px 5px 5px;
    }

    .entry {
      margin: 5px;

      > .entry {
        padding-left: 15px;
      }

      span.file {
        display: inline-block;
        padding: 5px;

        &:before {
          padding-right: @icon-margin;
        }

        .octicon(file-text);

        &.symlink {
          .octicon(file-symlink-file);
        }
      }

      span.directory {
        display: inline-block;
        padding: 5px 0 0 5px;

        &:before {
          margin-right: @icon-margin;
        }

        .octicon(file-directory);
      }
    }
  }
}

Drop extension from import path

@import "bootstrap/less/variables";
@import "octicon-mixins";

.archive-view {
  margin: 0;
  padding: 0;
  overflow: auto;
  position: relative;
  display: -webkit-flex;
  @icon-margin: @line-height-base / 4;

  .archive-container {
    height:100%;
    width: 100%;

    .loading-message {
      margin: 5px;

      .octicon(hourglass);

      &:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .tree {
      padding: 0 5px 5px 5px;
    }

    .entry {
      margin: 5px;

      > .entry {
        padding-left: 15px;
      }

      span.file {
        display: inline-block;
        padding: 5px;

        &:before {
          padding-right: @icon-margin;
        }

        .octicon(file-text);

        &.symlink {
          .octicon(file-symlink-file);
        }
      }

      span.directory {
        display: inline-block;
        padding: 5px 0 0 5px;

        &:before {
          margin-right: @icon-margin;
        }

        .octicon(file-directory);
      }
    }
  }
}


::-webkit-scrollbar {
  width: @scrollbar-width;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  border: none;
  box-shadow: none;
}

Set scrollbar horizontal height to match vertical (for webkit)

::-webkit-scrollbar {
  width: @scrollbar-width;
  height: @scrollbar-width;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  border: none;
  box-shadow: none;
}


#tool-list {
  overflow-y: scroll;
}

// .tools-panel-dropdown {
//   height: 100%;
// }

.col-left {
  padding-left: 0px;
  padding-right: 8px;
}

.col-middle {
  padding-left: 4px;
  padding-right: 4px;
}

.col-right {
  padding-right: 0px;
  padding-left: 8px;
}

.tool-list-item {
  padding-left: 0.8em;
  padding-right: 0.8em;
}

.compact {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.dropdown-div {
  // dropdown calculates its width from the parent div
  position: unset;
}

//noinspection CssInvalidPseudoSelector
:host ::ng-deep .dropdown-menu {
  left: 45px !important;
  right: 45px;
  box-shadow: 0 5px 30px 0 #555;
}

.hidden-dropdown-button {
  visibility: hidden;
  position: absolute;
}

Fix dropdown width for ie

#tool-list {
  overflow-y: scroll;
}

// .tools-panel-dropdown {
//   height: 100%;
// }

.col-left {
  padding-left: 0px;
  padding-right: 8px;
}

.col-middle {
  padding-left: 4px;
  padding-right: 4px;
}

.col-right {
  padding-right: 0px;
  padding-left: 8px;
}

.tool-list-item {
  padding-left: 0.8em;
  padding-right: 0.8em;
}

.compact {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.dropdown-div {
  // dropdown calculates its width from the parent div
  position: unset;
  width: 100%;
}

//noinspection CssInvalidPseudoSelector
:host ::ng-deep .dropdown-menu {
  left: 45px !important;
  right: 45px;
  box-shadow: 0 5px 30px 0 #555;
}

.hidden-dropdown-button {
  visibility: hidden;
  position: absolute;
}


.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol

    > li {
      display: block;
      flex-grow: 1;
      padding: 10px 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});

Fix card tab heading height

.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol

    > li {
      display: block;
      flex-grow: 1;
      padding: 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});


/*
 * Your Stylesheet
 */

@import 'ui-variables';

// Ensure that workspace is distinguishable from tab bar and status bar
// (when no tabs are open)
atom-workspace {
  background-color: @base-background-color;
}

// De-italicize all syntax components which Monokai italicizes
atom-text-editor::shadow {
  .storage.type,
  .entity.other.inherited-class,
  .variable.parameter,
  .support.type,
  .support.class {
    font-style: normal;
  }
}

Hide Linter tabs to conserve space in status bar

/*
 * Your Stylesheet
 */

@import 'ui-variables';

// Ensure that workspace is distinguishable from tab bar and status bar
// (when no tabs are open)
atom-workspace {
  background-color: @base-background-color;
}

// De-italicize all syntax components which Monokai italicizes
atom-text-editor::shadow {
  .storage.type,
  .entity.other.inherited-class,
  .variable.parameter,
  .support.type,
  .support.class {
    font-style: normal;
  }
}

// Hide Linter file tabs to conserve space in status bar
linter-bottom-tab {
  display: none;
}


// Teaser ------------------------------------------------------------------

// Full width wrapper
#flash {
  padding-top: 20px;
  padding-bottom: 15px;
  background: url("@{imgPath}/flash_bg.png");
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #146CD2;
  text-shadow: 0 -1px 0 black;
  .box-shadow(inset 0 -8px 10px rgba(0,0,0,0.3));

  a { color: #7CBEF3; }
  a:hover { color: #FFEC5C; text-decoration: underline; }
  a:visited { color: #880088; }
}

Use the link colors Carlos intended

// Teaser ------------------------------------------------------------------

// Full width wrapper
#flash {
  padding-top: 20px;
  padding-bottom: 15px;
  background: url("@{imgPath}/flash_bg.png");
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #146CD2;
  text-shadow: 0 -1px 0 black;
  .box-shadow(inset 0 -8px 10px rgba(0,0,0,0.3));

  a { color: #FFEC5C; text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
  a:visited { color: #ccc; }
}


@import "../lib/TagLabel.less";
@import "../lib/TagIcon.less";

@import "TagCloud.less";
@import "TagDiscussionModal.less";
@import "TagTiles.less";

.DiscussionHero {
  .item-title {
    display: block;
    margin-top: 15px;
  }
}
.TagLinkButton.child {
  @media @tablet-up {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  margin-left: 10px;

  .TagIcon {
    display: none;
  }
}
.DiscussionComposer-changeTags {
  margin-right: 15px;
  vertical-align: 2px;
}
.DiscussionListItem-info > .item-tags {
  margin-right: 4px;
  opacity: 1;
}
@media @tablet-up {
  .IndexPage, .UserPage {
    .DiscussionListItem-info > .item-tags {
      float: right;
      margin-top: -12px;
      margin-right: 0;
    }
  }
}
@media @desktop-up {
  .TagsPage {
    .sideNav {
      .sideNav--horizontal();
      float: none;
      width: auto;
      padding-top: 0;

      &:after {
        display: none;
      }
    }
    .sideNavOffset {
      margin: 15px 0 0;
    }
  }
}

Fix Tags page "start a discussion" button having a fixed width in Firefox

@import "../lib/TagLabel.less";
@import "../lib/TagIcon.less";

@import "TagCloud.less";
@import "TagDiscussionModal.less";
@import "TagTiles.less";

.DiscussionHero {
  .item-title {
    display: block;
    margin-top: 15px;
  }
}
.TagLinkButton.child {
  @media @tablet-up {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  margin-left: 10px;

  .TagIcon {
    display: none;
  }
}
.DiscussionComposer-changeTags {
  margin-right: 15px;
  vertical-align: 2px;
}
.DiscussionListItem-info > .item-tags {
  margin-right: 4px;
  opacity: 1;
}
@media @tablet-up {
  .IndexPage, .UserPage {
    .DiscussionListItem-info > .item-tags {
      float: right;
      margin-top: -12px;
      margin-right: 0;
    }
  }
}
@media @desktop-up {
  .TagsPage {
    .sideNav {
      .sideNav--horizontal();
      float: none;
      width: auto;
      padding-top: 0;

      &:after {
        display: none;
      }
    }
    .sideNavOffset {
      margin: 15px 0 0;
    }
  }
  .TagsPage-nav .item-newDiscussion .Button {
    width: auto;
  }
}


@import "bootstrap/mixins";
@import "bootstrap/variables";

.full-width() {
    margin: 0 -15px 0;
}

#container #main-wrapper .content {

  .conversations,
  .messages ul {
    li {
      .full-width();
      padding: 15px;
      border-bottom: 1px solid @baseBorderColor;

      .avatar {
        float: left;
        img {
          width: 48px;
          height: 48px;
          .border-radius(3px);
        }
      }

      .message {
        padding: 0 0 0 58px;
        margin: -4px 0 0 0;

        .user-profile-link {
          font-weight: bold;
        }

        .user-profile-link-dummy {
          font-weight: bold;
          color: @headingFontColor;
          font-size: 13px;
        }

        .meta {
          float: right;
          color: @mutedFontColor;
        }

        .text {
          width: 475px;
          font-size: 12px;
          color: @baseFontColor;
          word-wrap: break-word;
          i {
            opacity: 0.65;
          }
        }
      }
    }
  }

  .conversation {
    .reply {
      padding-top: 15px;

      textarea {
        width: 654px;
      }

      .submit {
        float: right;
      }
    }
  }

  .conversations {
    margin-bottom: -15px;
    li:last-child { border-bottom: 1px solid transparent; }
  }
}

Revert "Fixed font color in conversations"

@import "bootstrap/mixins";
@import "bootstrap/variables";

.full-width() {
    margin: 0 -15px 0;
}

#container #main-wrapper .content {

  .conversations,
  .messages ul {
    li {
      .full-width();
      padding: 15px;
      border-bottom: 1px solid @baseBorderColor;

      .avatar {
        float: left;
        img {
          width: 48px;
          height: 48px;
          .border-radius(3px);
        }
      }

      .message {
        padding: 0 0 0 58px;
        margin: -4px 0 0 0;

        .user-profile-link {
          font-weight: bold;
        }

        .user-profile-link-dummy {
          font-weight: bold;
          color: @headingFontColor;
          font-size: 13px;
        }

        .meta {
          float: right;
          color: @mutedFontColor;
        }

        .text {
          width: 475px;
          font-size: 12px;
          color: @metaFontColor;
          word-wrap: break-word;
          i {
            opacity: 0.65;
          }
        }
      }
    }
  }

  .conversation {
    .reply {
      padding-top: 15px;

      textarea {
        width: 654px;
      }

      .submit {
        float: right;
      }
    }
  }

  .conversations {
    margin-bottom: -15px;
    li:last-child { border-bottom: 1px solid transparent; }
  }
}


.ns("frontend.components.pages.user-settings", {
  .ui("Page", {}, {
    .el("main-content", {
      padding-top: 15px;

      .table-row-icon {
        // We should be using the .action-button-styles mixin in pieces/table.less
        // Need to discuss how to include a mixin in multiple components
        width: 18px;
        margin: 0 auto;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
        color: @grayLight;
      }
    });
  });
});

Remove .table-row-icon and add .org-flex-container

.ns("frontend.components.pages.user-settings", {
  .ui("Page", {}, {
    .el("main-content", {
      padding-top: 15px;

      .org-flex-container {
        .flexy(center);

        > .vcs-icon {
          width: @fontSizeLarge;
          margin-right: 10px;
        }
      }
    });
  });
});


body {
  margin-top: 42px;
}

.body-container {
  margin-top: 30px;
}

.bodycontent {
  border-left: 1px solid #cdcdcd;
}

h1 {
  font-size: 1.8em;
  font-weight: 700;
  margin-top: 0px;
}

h2 {
  font-size: 1.4em;
  margin-top: 1em;
  margin-bottom: .3em;
  font-weight: 700;
}

h3 {
  font-size: 1.1em;
  margin-bottom: .8em;
  margin-top: 1em;
  font-weight: 700;
}

Hide gutter borders on mobile

body {
  margin-top: 42px;
}

.body-container {
  margin-top: 30px;
}

.bodycontent {
  border-left: 1px solid #cdcdcd;

  @media (max-width: @screen-sm-max) {
    border-left: none;
  }
}

h1 {
  font-size: 1.8em;
  font-weight: 700;
  margin-top: 0px;
}

h2 {
  font-size: 1.4em;
  margin-top: 1em;
  margin-bottom: .3em;
  font-weight: 700;
}

h3 {
  font-size: 1.1em;
  margin-bottom: .8em;
  margin-top: 1em;
  font-weight: 700;
}


& when (@message-enabled) {

  .message {

    // Align the icon next to content
    align-items: flex-start;
    display: flex;

    &-icon {
      fill: currentColor;
      flex: 0 0 auto;
      margin-right: @alert-icon-margin-right;
    }

    &-content {
      flex: 1 1 auto;
      word-break: break-word;

      // Remove top margin from the first child so we're not reliant on flush-top
      > :first-child {
        margin-top: 0;
      }

      // Remove bottom margin from the last child so we're not reliant on flush-bottom
      > :last-child {
        margin-bottom: 0;
      }
    }

    // Make message content the same color by default
    a,
    p,
    ul,
    li,
    h1,
    h2,
    h3,
    h4,
    h5 {
      color: inherit;
    }
  }
}

Rename alert variable to message variable

& when (@message-enabled) {

  .message {

    // Align the icon next to content
    align-items: flex-start;
    display: flex;

    &-icon {
      fill: currentColor;
      flex: 0 0 auto;
      margin-right: @message-icon-margin-right;
    }

    &-content {
      flex: 1 1 auto;
      word-break: break-word;

      // Remove top margin from the first child so we're not reliant on flush-top
      > :first-child {
        margin-top: 0;
      }

      // Remove bottom margin from the last child so we're not reliant on flush-bottom
      > :last-child {
        margin-bottom: 0;
      }
    }

    // Make message content the same color by default
    a,
    p,
    ul,
    li,
    h1,
    h2,
    h3,
    h4,
    h5 {
      color: inherit;
    }
  }
}


// reset summernote styles
.note > .note-editor
{
  @padding-left: 14px;

  font-family: 'Helvetica Neue', 'Arial', 'Courier New', 'Lucida Sans', 'Tahoma';
  border: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
  font-weight: normal;

  .note-toolbar
  {
    background: white !important;
    border-bottom: 1px solid @border-color;
    padding: 0 @padding-left;

    button
    {
      border: none !important;
    }
  }

  .note-title
  {
    border: none;
    font-size: 18px;
    font-weight: normal;
    padding: 8px @padding-left 8px @padding-left;
    outline: none;
  }

  .note-editing-area
  {
    flex-grow: 1;
    display: flex;
    overflow-x: scroll;
    overflow-y: scroll;
    padding: 6px @padding-left;

    .note-editable
    {
      padding: 0;
    }

    .note-placeholder
    {
      padding: 0;
    }
  }
}

Fix bug, set min width of editing area

// reset summernote styles
.note > .note-editor
{
  @padding-left: 14px;

  font-family: 'Helvetica Neue', 'Arial', 'Courier New', 'Lucida Sans', 'Tahoma';
  border: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
  font-weight: normal;

  .note-toolbar
  {
    background: white !important;
    border-bottom: 1px solid @border-color;
    padding: 0 @padding-left;

    button
    {
      border: none !important;
    }
  }

  .note-title
  {
    border: none;
    font-size: 18px;
    font-weight: normal;
    padding: 8px @padding-left 8px @padding-left;
    outline: none;
  }

  .note-editing-area
  {
    flex-grow: 1;
    display: flex;
    overflow-x: scroll;
    overflow-y: scroll;
    padding: 6px @padding-left;

    .note-editable
    {
      min-width: 1px;
      padding: 0;
    }

    .note-placeholder
    {
      padding: 0;
    }
  }
}


.form {
    min-width: 510px;
}

.row {
    margin-bottom: 10px;

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

.comment {
    min-height: 40px;
    max-width: 500px;
}

Add minimal styles for help text

@import '~styles/variables.less';
@import '~styles/mixins.less';

.form {
    min-width: 510px;
}

.row {
    margin-bottom: 10px;

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

.comment {
    min-height: 40px;
    max-width: 500px;

    & > *:first-child {
        margin-top: 0;
    }

    & > *:last-child {
        margin-bottom: 0;
    }

    code {
        padding: 2px 5px;
        background-color: #eee;
        border-radius: 3px;
        color: #c00;
    }

    a {
        color: @linkColor;
        text-decoration: none;

        &:focus,
        &:hover {
            text-decoration: underline;
        }
    }
}


/**
 * Styles for message-center service
 * @link https://github.com/mateu-aguilo-bosch/message-center
 */
#mc-messages-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: @navbar-height;
  text-align: center;
  .font-brand-regular();
  z-index: @zindex-modal+11;

  .alert {
    font-size: @font-size-large;
    margin: 0;

    // Animation:
    opacity: 0.9;
    transition: all linear 0.4s;
    &.ng-enter {
      opacity: 0;
    }
    &.ng-leave-active {
      opacity: 0;
    }
  }
}

Make notification close button mobile friendly

/**
 * Styles for message-center service
 * @link https://github.com/mateu-aguilo-bosch/message-center
 */
#mc-messages-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: @navbar-height;
  text-align: center;
  .font-brand-regular();
  z-index: @zindex-modal+11;

  .alert {
    font-size: @font-size-large;
    margin: 0;

    // Animation:
    opacity: 0.9;
    transition: all linear 0.4s;
    &.ng-enter {
      opacity: 0;
    }
    &.ng-leave-active {
      opacity: 0;
    }
  }
  .close {
    font-size: 35px;
    margin-top: -5px;
  }
}


@import "variables";

.git-FilePatchListView {
  &:empty:before {
    content:'No changes';
    display: block;
    padding: @component-padding;
    text-align: center;
    color: @text-color-subtle;
    font-style: italic;
  }

  &-item {
    -webkit-user-select: none;
    display: flex;
    align-items: flex-start;
    padding: @component-padding/2 @component-padding;
    box-shadow:inset @separator-border-color 0 -1px 0;
    cursor:default;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
  }

  &-path {
    flex: 1;
  }
}

//
// States
// -----------------------------------------

.git-StagedChanges, .git-UnstagedChanges, .git-MergeConflictPaths {
  &.is-focused {
    .git-FilePatchListView-item.is-selected {
      background: @background-color-highlight;
      color: @text-color-highlight;
      box-shadow: @pane-item-background-color 0 -1px 0;
      :focus & {
        background: @background-color-selected;
        color: @text-color-selected;
      }
    }
  }
}

Add margin to 2nd MergeConflictPaths icon

@import "variables";

.git-FilePatchListView {
  &:empty:before {
    content:'No changes';
    display: block;
    padding: @component-padding;
    text-align: center;
    color: @text-color-subtle;
    font-style: italic;
  }

  &-item {
    -webkit-user-select: none;
    display: flex;
    align-items: flex-start;
    padding: @component-padding/2 @component-padding;
    box-shadow:inset @separator-border-color 0 -1px 0;
    cursor:default;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
  }

  &-path {
    flex: 1;
  }
}

.git-MergeConflictPaths .git-FilePatchListView-icon:last-child {
  margin-left: @component-padding / 2;
}

//
// States
// -----------------------------------------

.git-StagedChanges, .git-UnstagedChanges, .git-MergeConflictPaths {
  &.is-focused {
    .git-FilePatchListView-item.is-selected {
      background: @background-color-highlight;
      color: @text-color-highlight;
      box-shadow: @pane-item-background-color 0 -1px 0;
      :focus & {
        background: @background-color-selected;
        color: @text-color-selected;
      }
    }
  }
}


@import 'bootstrap/less/bootstrap.less';

@icon-font-path:          "../styles/fonts/";

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.hero-unit {
    margin: 50px auto 0 auto;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

#main-pixel {
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}

Add styles for masonry wall

@import 'bootstrap/less/bootstrap.less';

@icon-font-path:          "../styles/fonts/";

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.hero-unit {
    margin: 50px auto 0 auto;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

#main-pixel {
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}

.wall_container .grid-sizer { width: 50%; }
.wall_container .item { width: 49%; }
.wall_container .item.w2 { width: 40%; }


// THIS FILE SHOULD OUTPUT NOTHING!
//
// As this file is included in many places (for variable/mixin access),
// it must output nothing for performance reasons.
//
// IF IT'S NOT A MIXIN OR VARIABLE, IT DOESN'T GO HERE!

// not the most up to date method, but works in IE7
.image-replaced() {
    text-indent: 120%; // extra 20% to account for fancy fonts that may overhang
    white-space: nowrap;
    overflow: hidden;
}

// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
// File-names should follow:
//  example.png
//  example-high-res.png
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "-high-res" + match; })`;
    @media @highdpi {
        background-image: url("@{at2x_path}");
        -webkit-background-size: @w @h;
                background-size: @w @h;
    }
}

Update @highdip to use single quotes

// THIS FILE SHOULD OUTPUT NOTHING!
//
// As this file is included in many places (for variable/mixin access),
// it must output nothing for performance reasons.
//
// IF IT'S NOT A MIXIN OR VARIABLE, IT DOESN'T GO HERE!

// not the most up to date method, but works in IE7
.image-replaced() {
    text-indent: 120%; // extra 20% to account for fancy fonts that may overhang
    white-space: nowrap;
    overflow: hidden;
}

// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
// File-names should follow:
//  example.png
//  example-high-res.png
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "-high-res" + match; })`;
    @media @highdpi {
        background-image: url('@{at2x_path}');
        -webkit-background-size: @w @h;
                background-size: @w @h;
    }
}


@import (reference) "~styles/widget.less";
@import (less) "~react-json-inspector/json-inspector.css";

.a0-trywebtask {
    .a0-widget();
}

Fix overflowing hover backgrounds for json inspector

@import (reference) "~styles/widget.less";
@import (less) "~react-json-inspector/json-inspector.css";

.a0-trywebtask {
    .a0-widget();

    .json-inspector {
        max-height: 200px;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .json-inspector__value {
        word-wrap: break-word;
    }

    .json-inspector__line:after {
        z-index: auto;
    }
}


.leaflet-popup {
  .leaflet-popup-content-wrapper {
    .leaflet-popup-content {
      .unit-name {
        background-color: #cccccc;
        filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
                progid:DXImageTransform.Microsoft.glow(color=#ffffff, strength=3);
      }
    }
  }
}

Fix IE weird search input rendering.

.leaflet-popup {
  .leaflet-popup-content-wrapper {
    .leaflet-popup-content {
      .unit-name {
        background-color: #cccccc;
        filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
                progid:DXImageTransform.Microsoft.glow(color=#ffffff, strength=3);
      }
    }
  }
}

.service-sidebar {
  .header {
    input {
      line-height: 0.4;
    }
  }
}


.asciinema-player {
  .start-prompt {
    .player-overlay;

    z-index: 20;
    cursor: pointer;

    .play-button {
      font-size: 0px;
    }

    .play-button {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      color: white;

      display: table;
      width: 100%;
      height: 100%;

      div {
        vertical-align: middle;
        display: table-cell;

        span {
          width: 80px;
          height: 40px;
          display: inline-block;
        }
      }
    }
  }
}

Fix vertical alignment of big play button

.asciinema-player {
  .start-prompt {
    .player-overlay;

    z-index: 20;
    cursor: pointer;

    .play-button {
      font-size: 0px;
    }

    .play-button {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      color: white;

      display: table;
      width: 100%;
      height: 100%;

      div {
        vertical-align: middle;
        display: table-cell;

        span {
          width: 80px;
          height: 80px;
          display: inline-block;

          svg {
            vertical-align: initial;
          }
        }
      }
    }
  }
}


@import "../../../../../styles/variables.less";

.search .results .breadcrumbs {
  margin-bottom: 15px;

  .breadcrumb {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 10px 10px 10px;

    &:last-child {
      margin-right: 0;
    }

    &:hover .remove {
      opacity: 1;
    }

    .remove {
      position: absolute;
      top: -10px;
      left: -10px;
      padding: 3px;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      font-size: 1rem;
      line-height: 1rem;
      text-align: center;
      color: @gray-lightest;
      background-color: @gray-dark;
      opacity: 0;

      &:hover {
        opacity: 1;
      }
    }

    .limit, .value {
      display: inline-block;
      padding: 8px 15px;
    }

    .limit {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      background-color: rgba(red(@brand-highlight), green(@brand-highlight), blue(@brand-highlight), 0.5);
    }
  }
}

Fix breadcrumb remove button positioning

@import "../../../../../styles/variables.less";

.search .results .breadcrumbs {
  margin-bottom: 15px;

  .breadcrumb {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 10px 10px 10px;

    &:last-child {
      margin-right: 0;
    }

    &:hover .remove {
      opacity: 1;
    }

    .remove {
      position: absolute;
      top: -10px;
      left: -10px;
      padding: 3px;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      font-size: 1rem;
      line-height: 1rem;
      text-align: center;
      color: @gray-lightest;
      background-color: @gray-dark;
      opacity: 0;

      &:hover {
        opacity: 1;
      }

      .glyphicon {
        vertical-align: middle;
      }
    }

    .limit, .value {
      display: inline-block;
      padding: 8px 15px;
    }

    .limit {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      background-color: rgba(red(@brand-highlight), green(@brand-highlight), blue(@brand-highlight), 0.5);
    }
  }
}


@appicon-height-preview: 130px;
@appicon-icon-height-preview: @appicon-height-preview - 40px;

.appicon {
  min-height: @appicon-height-preview;
  margin-bottom: 10px;

  .appicon-title {
    height: 30px;
    bottom: 7px;
    h3 {
      font-size: 14px;
      font-weight: 300;
    }
  }

  .appicon-icon {
    margin-left: -@appicon-icon-height-preview/2;
    width: @appicon-icon-height-preview;
    height: @appicon-icon-height-preview;
    line-height: @appicon-icon-height-preview;
    font-size: @appicon-icon-height-preview;
  }
}

.appicon-start, .appicon-sync {
  .appicon-title {
    height: 21px;
  }
}

Remove header from preview app

@appicon-height-preview: 130px;
@appicon-icon-height-preview: @appicon-height-preview - 40px;

.appicon {
  min-height: @appicon-height-preview;
  margin-bottom: 10px;

  .appicon-title {
    height: 30px;
    bottom: 7px;
    h3 {
      font-size: 14px;
      font-weight: 300;
    }
  }

  .appicon-icon {
    margin-left: -@appicon-icon-height-preview/2;
    width: @appicon-icon-height-preview;
    height: @appicon-icon-height-preview;
    line-height: @appicon-icon-height-preview;
    font-size: @appicon-icon-height-preview;
  }
}

.appicon-start, .appicon-sync {
  .appicon-title {
    height: 21px;
  }
}

.container-appicons .page-header-apps {
  display: none;
}


@import (reference) '~app/less/mixins/clearfix';
@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';
@import (reference) '~app/less/animations/voteBounce';

.CommentsPage__replyForm {
  margin: 0 @grid-size * 1.5;
}

.CommentReplyForm {
  &__textarea {
    width: 100%;
    height: 10em;
  }

  textarea {
    width: 100%;
    height: 100%;

    .themeify({
      border: @theme-border;
    });
  }

  &__close {
    margin-top: 2px;
    padding: 0.5em 0 0;
    float: left;

    &[class*=" icon-"], &[class*=" icon-"]:visited {
      color: @neutral;
      font-size: 32px;
      font-weight: 800;
    }
  }

  &__button {
    float: right;
    margin: @grid-size 0 0;
  }

  &__error {
    color: @ban-red;
    padding: @half-grid-size;
  }

   &__footer {
     .clearfix;
   }
}

Align commentReply close button with submit button

@import (reference) '~app/less/mixins/clearfix';
@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';
@import (reference) '~app/less/animations/voteBounce';

.CommentsPage__replyForm {
  margin: 0 @grid-size * 1.5;
}

.CommentReplyForm {
  &__textarea {
    width: 100%;
    height: 10em;
  }

  textarea {
    width: 100%;
    height: 100%;

    .themeify({
      border: @theme-border;
    });
  }

  &__close {
    padding: 0;
    float: left;

    &[class*=" icon-"], &[class*=" icon-"]:visited {
      color: @neutral;
      font-size: 32px;
      font-weight: 800;
    }
  }

  &__button {
    float: right;
    margin: @grid-size 0 0;
  }

  &__error {
    color: @ban-red;
    padding: @half-grid-size;
  }

   &__footer {
     .clearfix;
   }
}


@import "colors.less";
@import "bootstrap-v3.3.0/variables.less";

@grid-float-breakpoint: @screen-md;

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

#cover {
    background: #333 url(../img/homepage/hero.png) no-repeat center top;
    height: 500px;
    overflow: hidden;
    text-align: center;

    .hero {
        color: #fff;
        margin-top: 60px;

        h1 {
            font-weight: bold;
            font-size: 36px;
            line-height: 40px;
            margin-bottom: 10px;
        }

        h2 {
            font-weight: normal;
            font-size: 18px;
            line-height: 30px;
            margin-bottom: 30px;
        }

        a {
            transition: 0.5s;
        }
    }
}

#footer {
    padding-top: 6px;
    text-align: center;

    nav {
        background-color: white;
        border-color: white;
    }

    a {
        color: @footer-link;

        &:hover {
            text-decoration: underline;
        }
    }
}

Reduce top padding as well.

@import "colors.less";
@import "bootstrap-v3.3.0/variables.less";

@grid-float-breakpoint: @screen-md;

body {
    padding-top: 20px;
    padding-bottom: 20px;
}

#cover {
    background: #333 url(../img/homepage/hero.png) no-repeat center top;
    height: 500px;
    overflow: hidden;
    text-align: center;

    .hero {
        color: #fff;
        margin-top: 60px;

        h1 {
            font-weight: bold;
            font-size: 36px;
            line-height: 40px;
            margin-bottom: 10px;
        }

        h2 {
            font-weight: normal;
            font-size: 18px;
            line-height: 30px;
            margin-bottom: 30px;
        }

        a {
            transition: 0.5s;
        }
    }
}

#footer {
    padding-top: 6px;
    text-align: center;

    nav {
        background-color: white;
        border-color: white;
    }

    a {
        color: @footer-link;

        &:hover {
            text-decoration: underline;
        }
    }
}


// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -1px;
}
.atom-dock-toggle-button.right {
  margin-right: -1px;
}
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
  margin-bottom: -1px;
}

Fix dock toggle button position

// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -2px;
}
.atom-dock-toggle-button.right {
  margin-right: -2px;
}
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
  margin-bottom: -1px;
}


#edit {
    padding: 88px 0 0 0;

    a.add {
        display: block;
        width: 95%;
        height: 44px;

        margin: 2.5%;
        border: 1px dashed @highlight;
        background-color: transparent;

        color: @highlight;
        font-size: 2em;
        text-align: center;
        text-decoration: none;
    }

    #blocks {
        transform: scale(0.95, 0.95);
        margin-top: -45px;

        div, a {
            display: block;
            border: 1px dashed @highlight;
            margin: 10px 0;
            text-decoration: none;
        }
    }
}

Resolve issue with 'blocks' section top positioning in edit mode. Resolves GH-97

#edit {
    padding: 88px 0 0 0;

    a.add {
        display: block;
        width: 95%;
        height: 44px;

        margin: 15px 2.5% 20px 2.5%;
        border: 1px dashed @highlight;
        background-color: transparent;

        color: @highlight;
        font-size: 2em;
        text-align: center;
        text-decoration: none;
    }

    #blocks {
        position: absolute;
        top: 160px;
        transform: scale(0.95, 1.0);

        div, a {
            display: block;
            border: 1px dashed @highlight;
            margin-bottom: 15px;
            text-decoration: none;

            img {
                margin-bottom: -4px;
            }
        }
    }
}


@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-scrollable {
		overflow-y: auto;
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}

Apply webkit GPU hack to scrollable panels

@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-scrollable {
		overflow-y: auto;
		/* Make scrolling smooth */
		.oo-ui-force-webkit-gpu();
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}


.modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}

Correct modal overlay colour per @jenskanis' design

.modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(240, 240, 240, 0.7);
  z-index: 100;
  display: none;
}


.visualization-panel {
  padding-top: 15px;
}

Update parameter view on every selection change

.visualization-panel {
  padding-top: 15px;

  /*
  Keep the scroll position when changing visualizations

  During initialization, visualizations may show only one status text line if anything. This would make the page
  shorter and forces the browser to scroll it upwards. This min-height makes sure that the page is always long enough
  to keep its scroll position. Value of 100vh should be always enough, because if the user would have scrolled more than
  that, the tabs wouldn't be visible anymore and it wouldn't be possible to change the visualization.
   */
  min-height: 100vh;
}


// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.changelog-entry {
  display: flex;
  font-size: @font-size--title-small-3;
  padding: 5px 0 5px 1em; // 1em to accomodate title-icon
  flex-direction: column;

  @media @desktop {
    padding-left: 0;
  }

  &__icon {
    opacity: 0.5;
    font-size: 0.7em;
  }

  &__link {
    color: @osu-colour-l1;

    &:hover {
      color: white;
    }
  }

  &__row {
    word-wrap: break-word;

    &--message {
      margin-top: 2px;
    }
  }

  &__title {
    &--major {
      color: @yellow;
    }

    code {
      .default-border-radius();
      background-color: @osu-colour-b6;
      padding: 1px 4px;
    }
  }

  &__title-icon {
    position: absolute;
    margin-left: -1em;
  }

  &__user {
    font-size: @font-size--normal;
    padding-left: 10px;
  }

  &__user-link {
    font-weight: bold;
  }
}

Make changelog backtick escape less black

// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.changelog-entry {
  display: flex;
  font-size: @font-size--title-small-3;
  padding: 5px 0 5px 1em; // 1em to accomodate title-icon
  flex-direction: column;

  @media @desktop {
    padding-left: 0;
  }

  &__icon {
    opacity: 0.5;
    font-size: 0.7em;
  }

  &__link {
    color: @osu-colour-l1;

    &:hover {
      color: white;
    }
  }

  &__row {
    word-wrap: break-word;

    &--message {
      margin-top: 2px;
    }
  }

  &__title {
    &--major {
      color: @yellow;
    }

    code {
      .default-border-radius();
      background-color: @osu-colour-b5;
      padding: 1px 4px;
    }
  }

  &__title-icon {
    position: absolute;
    margin-left: -1em;
  }

  &__user {
    font-size: @font-size--normal;
    padding-left: 10px;
  }

  &__user-link {
    font-weight: bold;
  }
}


// Global Markdown Preview styles

.markdown-preview {
  atom-text-editor {
    // only show scrollbars on hover
    .scrollbars-visible-always &::shadow {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: hidden;
      }
    }
    .scrollbars-visible-always &:hover::shadow {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: visible;
      }
    }
  }

  // move task list checkboxes
  .task-list-item-checkbox {
    position: absolute;
    margin: .25em 0 0 -1.4em;
  }
}

.markdown-spinner {
  margin: auto;
  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: top center;
  padding-top: 70px;
  text-align: center;
}

Stop using shadow DOM selectors

// Global Markdown Preview styles

.markdown-preview {
  atom-text-editor {
    // only show scrollbars on hover
    .scrollbars-visible-always {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: hidden;
      }
    }
    .scrollbars-visible-always &:hover {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: visible;
      }
    }
  }

  // move task list checkboxes
  .task-list-item-checkbox {
    position: absolute;
    margin: .25em 0 0 -1.4em;
  }
}

.markdown-spinner {
  margin: auto;
  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: top center;
  padding-top: 70px;
  text-align: center;
}


@import "mixins.less";

.video-modal {
    .modal-header {
        min-height: 0;
        height: 0;
        .close {
            position: absolute;
            top: -50px;
            right: -10px;
            opacity: .5;
            .transition(@transitionIn);
            &:active,
            &:hover,
            &:focus {
                opacity: 1;
                .transition(@transitionIn);
            }
        }
    }
    .modal-body {
        padding: 0;
        iframe {
            display: block;
        }
    }
    .modal-content {
        position: relative;
        top: 50px;
    }
}

@media (min-width: @screen-sm-min) {
   .video-modal {
        .modal-dialog {
            width: 853px;
        }
            .modal-content {
                top: auto;
            }
    }
}

Fix insensitive share buttons in youtube video

@import "mixins.less";

.video-modal {
    &.modal.in .modal-dialog {
        // turn off translate in video modal as it is insensitising some YouTube videos
          -webkit-transform: none;
              -ms-transform: none; // IE9 only
                  transform: none;
    }
    .modal-header {
        min-height: 0;
        height: 0;
        .close {
            position: absolute;
            top: -50px;
            right: -10px;
            opacity: .5;
            .transition(@transitionIn);
            &:active,
            &:hover,
            &:focus {
                opacity: 1;
                .transition(@transitionIn);
            }
        }
    }
    .modal-body {
        padding: 0;
        iframe {
            display: block;
        }
    }
    .modal-content {
        position: relative;
        top: 50px;
    }
}

@media (min-width: @screen-sm-min) {
   .video-modal {
        .modal-dialog {
            width: 853px;
        }
            .modal-content {
                top: auto;
            }
    }
}


/*==============================General Menu style============================*/
  /* Responsive Navigation Basic Style
  ===============================================================================================*/
#menu {
  display: none;
}
@media screen and (max-width: 768px) {
  #menu {
    display: block;
    background: #dddddd;
    font-size: 1.35em;
    text-align: right;
    cursor: pointer;
    padding: 5px;

    & span {
      margin-right: 10px;
    }
  }

  #nav {
    display: none;

    & ul {
      margin: 0 auto;
      padding: 2%;
      background-color: #dddddd;
    }

    & li {
      width: 100%;
      display: block;
    }
  }
}


#form-result {
  text-align: center;
  span {
    line-height: 240px;
    color: @highlight;
  }
  button {
    display: none;
    margin: 0 auto;
  }
}

form {
  .formfield {
    margin: @size auto;
    width: 200px;
  }
  .submitfield {
    vertical-align: bottom;
    margin-top: @size;
    text-align: center;
  }
  .form-input-error {
    color: @highlight;
    line-height: 150%;
  }
  .submit {
    cursor: pointer;
    &:hover {
      @media (min-width: @tablet) {
        transition-duration: .5s;
        color: @highlight;
      }
    }
  }
  input{
    padding: 10px;
    border: none;
    border-bottom: solid 2px @bg;
    transition: border 0.3s;
    background-color: transparent;
    color: white;
    &[type="checkbox"] {
      vertical-align: middle;
    }
    &:not([type="checkbox"]) {
      width: 180px;
    }
    &:focus {
      outline: none !important;
      border-bottom: solid 2px @highlight;
    }
  }
}

#community-apply-info {
  width: 270px;
  margin: 0 auto;
  h2 {
    font-style: italic;
    line-height: 200%;
    text-align: center;
  }
}

Fix for safari input border radius

#form-result {
  text-align: center;
  span {
    line-height: 240px;
    color: @highlight;
  }
  button {
    display: none;
    margin: 0 auto;
  }
}

form {
  .formfield {
    margin: @size auto;
    width: 200px;
  }
  .submitfield {
    vertical-align: bottom;
    margin-top: @size;
    text-align: center;
  }
  .form-input-error {
    color: @highlight;
    line-height: 150%;
  }
  .submit {
    cursor: pointer;
    &:hover {
      @media (min-width: @tablet) {
        transition-duration: .5s;
        color: @highlight;
      }
    }
  }
  input{
    padding: 10px;
    border: none;
    border-bottom: solid 2px @bg;
    transition: border 0.3s;
    background-color: transparent;
    color: white;
    border-radius: 0px;
    &[type="checkbox"] {
      vertical-align: middle;
    }
    &:not([type="checkbox"]) {
      width: 180px;
    }
    &:focus {
      outline: none !important;
      border-bottom: solid 2px @highlight;
    }
  }
}

#community-apply-info {
  width: 270px;
  margin: 0 auto;
  h2 {
    font-style: italic;
    line-height: 200%;
    text-align: center;
  }
}


// Title --------------------------------------------------------------------

#title {
  height: 116px;
  background: url("@{imgPath}/blocks/title/title_bg.png") repeat-x;

  h1 {
    margin: 0;
    .container;
    color: #fff;
    font-size: 42px;
    line-height: 116px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  }
}

Add subtle shadow for capable browsers through pseudoelement

// Title --------------------------------------------------------------------

#title {
  height: 116px;
  background: url("@{imgPath}/blocks/title/title_bg.png") repeat-x;

  h1 {
    margin: 0;
    .container;
    color: #fff;
    font-size: 42px;
    line-height: 116px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  }

  &:after {
    content: '';
    #gradient > .vertical (rgba(0,0,0,0.08), rgba(0,0,0,0));
    background-color: transparent;
    display: block;
    height: 50px;
    width: 100%;
    z-index: 10;
    position: absolute;
  }
}


.custom-logo {
    max-height: @grid-gutter-width - 10;
    width: auto;
    max-width: 100%;
    height: auto;
}

.page-header{
    border-bottom: transparent;
    margin-top: 0;
    margin-bottom: @grid-gutter-width/4;
}

.archive{

    .page-title{
        font-size: @font-size-h2;
    }

    .entry-title{
        font-size: @font-size-h3;
    }

}

.page-title,
.entry-title{
    margin-top: 0;
    .text-uppercase;
    letter-spacing: @letter-spacing-small;
}

Update page title styling within .archive

.custom-logo {
    max-height: @grid-gutter-width - 10;
    width: auto;
    max-width: 100%;
    height: auto;
}

.page-header{
    border-bottom: transparent;
    margin-top: 0;
    margin-bottom: @grid-gutter-width/4;
}

.archive{

    .author-title,
    .entry-title{
        font-size: @font-size-h3;
    }

}

.page-title,
.entry-title{
    margin-top: 0;
    .text-uppercase;
    letter-spacing: @letter-spacing-small;
}


footer {
    position: fixed;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 45px;
    border-top: 1px solid #E7E7E7;
    background-color: white;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

footer ul li {
    float: left;
    width: 33.3%;
    height: 42px;

    text-align: center;
    font-size: 8pt;
    font-weight: normal;
    border-bottom: 3px solid white;
}

footer a {
    display: block;
    width: 100%;
    height: 100%;
}

footer svg {
    margin-top: 10px;
}

footer li.active {
    border-bottom-color: #32B2D2;
}

footer li g {
    fill: #3B4E5B;
}

footer li.active g {
    fill: #32B2D2;
}

Fix spacing on active indicator within tabbar

footer {
    position: fixed;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 45px;
    border-top: 1px solid #E7E7E7;
    background-color: white;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

footer ul li {
    float: left;
    width: 33.3%;
    height: 44px;

    text-align: center;
    font-size: 8pt;
    font-weight: normal;
    border-bottom: 3px solid white;
}

footer a {
    display: block;
    width: 100%;
    height: 100%;
}

footer svg {
    margin-top: 10px;
}

footer li.active {
    border-bottom-color: #32B2D2;
}

footer li g {
    fill: #3B4E5B;
}

footer li.active g {
    fill: #32B2D2;
}


@import "base/normalize.less";
@import "base/preboot.less";
@import "base/mixins.less";
@import "../../node_modules/font-awesome/less/font-awesome.less";

@import "website/variables.less";
@import "website/languages.less";
@import "website/header.less";
@import "website/dropdown.less";
@import "website/alerts.less";
@import "website/summary.less";
@import "website/body.less";
@import "website/buttons.less";
@import "website/markup.less";
@import "website/navigation.less";
@import "website/glossary.less";

* {
    .box-sizing(border-box);
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

html, body {
    height: 100%;
}

html {
    font-size: 62.5%;
}

body {
    text-rendering: optimizeLegibility;
    font-smoothing: antialiased;
    font-family: @font-family-base;
    font-size: @font-size-base;
    letter-spacing: .2px;
    .text-adjust(100%);
}

Make fonts nicer on Macs

@import "base/normalize.less";
@import "base/preboot.less";
@import "base/mixins.less";
@import "../../node_modules/font-awesome/less/font-awesome.less";

@import "website/variables.less";
@import "website/languages.less";
@import "website/header.less";
@import "website/dropdown.less";
@import "website/alerts.less";
@import "website/summary.less";
@import "website/body.less";
@import "website/buttons.less";
@import "website/markup.less";
@import "website/navigation.less";
@import "website/glossary.less";

* {
    .box-sizing(border-box);
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
}

a {
    text-decoration: none;
}

html, body {
    height: 100%;
}

html {
    font-size: 62.5%;
}

body {
    text-rendering: optimizeLegibility;
    font-family: @font-family-base;
    font-size: @font-size-base;
    letter-spacing: .2px;
    .text-adjust(100%);
}


.learning-guide-section() {

  #fonts > .sans(1.4rem, 1.4rem);

  .heading {
    .flex-display();
    .number {
      margin-right: 0.5rem;
    }
    .title {
      .flex(1);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .progress-bar-button {
    margin-top: 0px;
    width: 100%;
  }

  .amount-worked {
    .flex-display();
    .justify-content(flex-end);
    font-size: 1rem;
    .count {
      color: @tutor-neutral;
      letter-spacing: 0.05rem;
      &.chapter {
        margin-top: 10px;
      }
    }
  }

  .progress {
    height: 0.8rem;
    .progress-bar {
      .learning-guide-colors();
    }
  }
}

Add a little margin on non-practicing progress bar

.learning-guide-section() {

  #fonts > .sans(1.4rem, 1.4rem);

  // if the .progress is a direct desendant then it's not inside a button
  > .progress {
    margin: 0.5rem 0;
  }

  .heading {
    .flex-display();
    .number {
      margin-right: 0.5rem;
    }
    .title {
      .flex(1);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .progress-bar-button {
    margin-top: 0px;
    width: 100%;
  }
  .amount-worked {
    .flex-display();
    .justify-content(flex-end);
    font-size: 1rem;
    .count {
      color: @tutor-neutral;
      letter-spacing: 0.05rem;
      &.chapter {
        margin-top: 10px;
      }
    }
  }

  .progress {
    height: 0.8rem;
    .progress-bar {
      .learning-guide-colors();
    }
  }
}


.c {
  &.preprocessor,
  &.include,
  &.function,
  {
    color: @syntax-code;
  }

  &.string {
    color: @syntax-content;
  }

  &.meta {
    color: @syntax-fg;

    &.parens {
      color: @syntax-accent;
    }
  }

  &.storage {
    &.modifier { // static, const
      color: @syntax-code-darker;
    }

    &.type { // char, int, struct
      color: @syntax-code-darker;
    }
  }

  &.entity {
    &.name { // function-name

    }
  }

  &.keyword {
    font-weight: bold;
  }

  &.control {}

  &.import {}

  &.punctuation {
    color: inherit;
    opacity: 0.5;
    font-weight: normal;
  }
}

Add C support for Arduino stuff

.c {
  &.meta {
    color: @syntax-fg;

    &.parens {
      color: @syntax-accent;
    }
  }

  &.preprocessor,
  &.include,
  &.function,
  &.initialization .variable,
  {
    color: @syntax-code;
  }

  &.string {
    color: @syntax-content;
  }

  &.storage {
    &.modifier { // static, const
      color: @syntax-code-darker;
    }

    &.type { // char, int, struct
      color: @syntax-code-darker;
    }
  }

  &.entity {
    &.name { // function-name

    }
  }

  &.keyword {
    // font-weight: bold;
  }

  &.control {
    font-weight: bold;
  }

  &.import {
    font-weight: normal;
  }

  &.punctuation {
    color: inherit;
    opacity: 0.5;
    font-weight: normal;
  }
}


@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-scrollable {
		overflow: auto;
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}

Add overflow:hidden to framed panels

@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-framed {
		overflow: hidden;
	}

	&-scrollable {
		overflow: auto;
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}


@import "ui-variables";

@godoc-bg: lighten(@overlay-background-color, 15%);

.godoc-tooltip {
  white-space: pre-wrap;
  border: @overlay-border-color;
  margin-top: 4px;
  display: flex;
  border-radius: @component-border-radius * 1.5;
  border-top-left-radius: 0;
  box-shadow: 0 1px 3px hsla(0, 0, 0%, 0.4);
  color: @godoc-bg;
  background: @text-color;
  padding: 4px;
  overflow-y: auto; // TODO: still not getting scroll bars...
  //max-width: 800px;

  transition: opacity 300ms;
  &.transparent {
    opacity: 0.2;
  }

  &::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    border: 4px solid;
    border-color: transparent transparent @text-color @text-color;
  }
}

.close {
  text-shadow: none;
}

#godoc-progress {
  visibility: hidden;
}

// When the "godoc-in-progress" class is applied,
// the progress indicator is visible and the actual
// doc message is hidden.

#godoc-message.godoc-in-progress {
  visibility: hidden;
}

#godoc-progress.godoc-in-progress {
  visibility: visible;
}

Clean up layout of tooltip.

@import "ui-variables";

@godoc-bg: lighten(@overlay-background-color, 15%);

.godoc-tooltip {
  white-space: pre-wrap;
  border: @overlay-border-color;
  margin-top: 4px;
  display: flex;
  border-radius: @component-border-radius * 1.5;
  border-top-left-radius: 0;
  box-shadow: 0 1px 3px hsla(0, 0, 0%, 0.4);
  color: @godoc-bg;
  background: @text-color;
  padding: 4px;
  overflow-y: auto; // TODO: still not getting scroll bars...
  //max-width: 800px;

  transition: opacity 300ms;
  &.transparent {
    opacity: 0.2;
  }

  &::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    border: 4px solid;
    border-color: transparent transparent @text-color @text-color;
  }
}

.close {
  text-shadow: none;
}

#godoc-progress {
  display: none;

  &.godoc-in-progress {
    display: block;
    padding-right: 35px;
  }
}

// When the "godoc-in-progress" class is applied,
// the progress indicator is visible and the actual
// doc message is not displayed.

#godoc-message.godoc-in-progress {
  display: none;
}


@pink: #FF5792;

@blue: #50CDBB;
@lightBlue: lighten(@blue, 10%);
@darkBlue: darken(@blue, 50%);

@transparent: fade(white, 0%);

// bootstrap overrides

// common bootstrap overrides
@jumbotron-bg: fade(@blue, 65%);
@jumbotron-color: white;

// navbar related bootstrap overrides
@navbar-default-toggle-hover-bg: @lightBlue;
@navbar-default-toggle-icon-bar-bg: @pink;
@navbar-default-toggle-border-color: @blue;
@navbar-default-link-color: white;
@navbar-default-link-hover-color: @pink;
@navbar-default-link-hover-bg: @transparent;
@navbar-default-link-active-color: @pink;
@navbar-default-link-active-bg: @transparent;

Set jumbotron color to full blue

@pink: #FF5792;

@blue: #50CDBB;
@lightBlue: lighten(@blue, 10%);
@darkBlue: darken(@blue, 50%);

@transparent: fade(white, 0%);

// bootstrap overrides

// common bootstrap overrides
@jumbotron-bg: @blue;
@jumbotron-color: white;

// navbar related bootstrap overrides
@navbar-default-toggle-hover-bg: @lightBlue;
@navbar-default-toggle-icon-bar-bg: @pink;
@navbar-default-toggle-border-color: @blue;
@navbar-default-link-color: white;
@navbar-default-link-hover-color: @pink;
@navbar-default-link-hover-bg: @transparent;
@navbar-default-link-active-color: @pink;
@navbar-default-link-active-bg: @transparent;


.tips-now-or-later {
  .joyride-tooltip__ {
    &footer {
      width: 220px;
    }

    &button {
      &--primary {
        float: left;
      }

      &--skip {
        float: right;
        padding: 6px 12px;
        margin: 0;
        color: @openstax-neutral-light;
      }
    }
  }
}

Change "View later" to dark blue

.tips-now-or-later {
  .joyride-tooltip__ {
    &footer {
      width: 220px;
    }

    &button {
      &--primary {
        float: left;
      }

      &--skip {
        float: right;
        padding: 6px 12px;
        margin: 0;
        color: @tutor-dark-blue;
      }
    }
  }
}


@orange: #EF6C00;
@grey: #FAFAFA;

@green: #008744;
@blue: #0057e7;
@red: #d62d20;
@yellow: #ffa700;
@white: #eee;

@darkprimary: #222326;
@darksecondary: #121314;

Update to the new GPM orange color

@orange: #FF5722;
@grey: #FAFAFA;

@green: #008744;
@blue: #0057e7;
@red: #d62d20;
@yellow: #ffa700;
@white: #eee;

@darkprimary: #222326;
@darksecondary: #121314;


.work-in-physics {
  margin-top: 20px;
  padding: 0 140px;

  &:before {
    content: "Work in Physics";
    #fonts > .sans(3.2rem, 3.2rem);
    font-weight: 900;
    color: @physics-color-primary;
    background: #232e66;
    padding: 10px 20px;
  }

  div[data-type="title"] {
    margin: 10px 0 20px 0;
    padding: 10px 20px;
    #fonts > .sans(2rem, 2.4rem);
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    background: @physics-background-secondary;

    &:before {content: "\2014  ";} //em dash space

    &:after {content: "  \2014";} // space em dash

  }

  figure {
    width: 100%;
    margin: 0;
    img {
      width: 100%;
    }
  }

  div[data-type="title"] + figure + p {
    .tutor-reading-first-letter();
  }

}

Use first-of-type vs sibling selectors

.work-in-physics {
  margin-top: 20px;
  padding: 0 140px;

  &:before {
    content: "Work in Physics";
    #fonts > .sans(3.2rem, 3.2rem);
    font-weight: 900;
    color: @physics-color-primary;
    background: #232e66;
    padding: 10px 20px;
  }

  div[data-type="title"] {
    margin: 10px 0 20px 0;
    padding: 10px 20px;
    #fonts > .sans(2rem, 2.4rem);
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    background: @physics-background-secondary;

    &:before {content: "\2014  ";} //em dash space

    &:after {content: "  \2014";} // space em dash

  }

  figure {
    width: 100%;
    margin: 0;
    img {
      width: 100%;
    }
  }
  > p:first-of-type {
    .tutor-reading-first-letter();
  }

}


.item-text {
	.text {
		&.option--text-style-big { .recipe--font-text-big; }
		&.option--text-style-normal { .recipe--font-text-normal; }
		&.option--text-style-small { .recipe--font-text-small; }
		// OPTION: Text Alignment
		&.option--text-alignment-left > * { .recipe--text-alignment-left; }
		&.option--text-alignment-center > * { .recipe--text-alignment-center; }
		&.option--text-alignment-right > * { .recipe--text-alignment-right; }
	}
}

Add missing placeholder style for text item

.item-text {
	.text {
		&.option--text-style-big { .recipe--font-text-big; }
		&.option--text-style-normal { .recipe--font-text-normal; }
		&.option--text-style-small { .recipe--font-text-small; }
		// OPTION: Text Alignment
		&.option--text-alignment-left > * { .recipe--text-alignment-left; }
		&.option--text-alignment-center > * { .recipe--text-alignment-center; }
		&.option--text-alignment-right > * { .recipe--text-alignment-right; }
	}
	.text.no-text {
		height: 135px;
		border-top: 15px solid @border;
		border-bottom: 15px solid @border;
		position: relative;

		&:before,
		&:after {
			content: '';
			display: block;
			position: absolute;
			left:0;
			height: 45px;
			border-top: 15px solid @border;
			border-bottom: 15px solid @border;
		}
		&:before {
			top:15px;
			width: 90%;
		}
		&:after {
			top:45px;
			width: 80%;
		}
	}
}


@import '../../echo.variables';
@import '../../echo.mixins';

.mw-echo-ui-footerNoticeWidget {
	padding: 0.5em;
	border-bottom: 1px solid #DDDDDD;
	white-space: normal;

	&-row {
		display: table-row;
	}

	&-dismiss,
	&-info,
	&-label {
		display: table-cell;
	}

	&-label {
		width: 100%;
	}

	&-icon {
		padding-right: 0.5em;
	}

	&-dismiss,
	&-info {
		.mw-echo-ui-mixin-hover-opacity();

		.oo-ui-iconElement-icon {
			width: 1.3em !important;
			height: 1.3em !important;
		}
	}
}

Increase line-height for survey to 16px

@import '../../echo.variables';
@import '../../echo.mixins';

.mw-echo-ui-footerNoticeWidget {
	padding: 0.5em;
	border-bottom: 1px solid #DDDDDD;
	white-space: normal;
	line-height: 16px;

	&-row {
		display: table-row;
	}

	&-dismiss,
	&-info,
	&-label {
		display: table-cell;
	}

	&-label {
		width: 100%;
	}

	&-icon {
		padding-right: 0.5em;
	}

	&-dismiss,
	&-info {
		.mw-echo-ui-mixin-hover-opacity();

		.oo-ui-iconElement-icon {
			width: 1.3em !important;
			height: 1.3em !important;
		}
	}
}


.squatch-container-hosted,
.squatch-container-mobile {
  .squatch-header-close,
  .squatch-actions,
  [data-close-panel] {
    display: none;
  }

  // Show `No Referrals Yet...` when no referrals in embed mode
  .squatch-actions[data-referrals="0"][data-referrals="0"] {
    display: block;
  }

  .fbMobile {
    display: none;
    @media (max-width: @screen-sm-max) {
      display: block;
    }
  }

  .fbShare {
    @media (max-width: @screen-sm-max) {
      display: none;
    }
  }

  .twMobile {
    display: none;
    @media (max-width: @screen-sm-max) {
      display: block;
    }
  }

  .fbShare {
    @media (max-width: @screen-sm-max) {
      display: none;
    }
  }
}

Add display rules for buttons in hosted widget

.squatch-container-hosted,
.squatch-container-mobile {
  .squatch-header-close,
  .squatch-actions,
  [data-close-panel] {
    display: none;
  }

  // Show `No Referrals Yet...` when no referrals in embed mode
  .squatch-actions[data-referrals="0"][data-referrals="0"] {
    display: block;
  }

  .fbMobile {
    display: none;

    &.mobile-and-desktop,
    &.mobile-only {
      @media (max-width: @screen-sm-max) {
        display: block;
      }
    }

    &.hidden,
    &.desktop-only {
      @media (max-width: @screen-sm-max) {
        display: none;
      }
    }
  }

  .fbShare {
    @media (max-width: @screen-sm-max) {
      display: none;
    }
  }

  .twMobile {
    display: none;

    &.mobile-and-desktop,
    &.mobile-only {
      @media (max-width: @screen-sm-max) {
        display: block;
      }
    }

    &.hidden,
    &.desktop-only {
      @media (max-width: @screen-sm-max) {
        display: none;
      }
    }
  }

  .twShare {
    @media (max-width: @screen-sm-max) {
      display: none;
    }
  }
}


@import "ui-variables";

// Override bootstrap styles here.
.panel {
  border-radius: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;

  .panel-heading {
    border-radius: 0;
  }
}

Move some panel styles into core

@import "ui-variables";

// Override bootstrap styles here.
.panel {
  border-radius: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;

  &.bordered {
    .panel-heading {
      border-radius: @component-border-radius @component-border-radius 0 0;
    }
  }
}

.inset-panel {
  .panel-heading {
    border-radius: @component-border-radius @component-border-radius 0 0;
  }
}

.panel-heading {
  margin: 0;

  border-radius: 0;

  font-size: @font-size;
  line-height: 1;

  .btn {
    @btn-height: @component-line-height - 5px;
    height: @btn-height;
    line-height: @btn-height;
    font-size: @font-size - 2px;
    position: relative;
    top: -5px;
  }
}


.SideNav {
  position: fixed;
  z-index:10;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding-top: 55px;
  display: inline-block;
  background-color: @white;
  font-size: @font-size-base + 3px;
  .translate(-110%, 0);
  box-shadow: 2px 0 10px 0 rgba(0,0,0,0.42);

  &.opened {
    .translate(0, 0);
  }
}

  .SideNav-ul {
    padding-left: 16px;
  }

    .SideNav-dropdown {
      max-height: 38px;
      overflow-y: hidden;
      position: relative;

      > .SideNav-button {
        margin-left: 16px;
      }

      &.opened {
        max-height: none;

        > .SideNav-ul {
          max-height: 280px;
          overflow-y: auto;
        }
      }
    }

      .SideNav-dropdown > .SideNav-ul:after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: 0;
        left: 7px;
        border-left: @gray-border;
      }

        .SideNav-button {
          padding: 8px 20px 8px 4px;
          display: block;
        }

        .SideNav-button, .SideNav-button:hover {
          color: inherit;
          text-decoration: none;
        }

Fix the left sidenav for old android / other phones

.SideNav {
  position: fixed;
  z-index:10;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding-top: 55px;
  display: inline-block;
  background-color: @white;
  font-size: @font-size-base + 3px;
  left: -110%;
  box-shadow: 2px 0 10px 0 rgba(0,0,0,0.42);

  &.opened {
    left: 0;
  }
}

  .SideNav-ul {
    padding-left: 16px;
  }

    .SideNav-dropdown {
      max-height: 38px;
      overflow-y: hidden;
      position: relative;

      > .SideNav-button {
        margin-left: 16px;
      }

      &.opened {
        max-height: none;

        > .SideNav-ul {
          max-height: 280px;
          overflow-y: auto;
        }
      }
    }

      .SideNav-dropdown > .SideNav-ul:after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: 0;
        left: 7px;
        border-left: @gray-border;
      }

        .SideNav-button {
          padding: 8px 20px 8px 4px;
          display: block;
        }

        .SideNav-button, .SideNav-button:hover {
          color: inherit;
          text-decoration: none;
        }


.currency-dropdown {
  width: 80px;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  text-align: center;
  option {
    padding: 0;
  }
}

Fix dropdown weird position on Chrome

.currency-dropdown {
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
  option {
    padding: 0;
  }
}


// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Link (anchor) styles

.ms-Link {
  color: @ms-color-themePrimary;
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus {
    color: @ms-color-themeDarker;
  }

  &:active {
    color: @ms-color-themePrimary;
  }
}

//== Modifier: Hero Links
//
.ms-Link.ms-Link--hero {
  font-family: @ms-font-family-semilight;
  padding: 2px 8px 4px;
}

Add ms-font-m class to link to change to medium text size

// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Link (anchor) styles

.ms-Link {
  .ms-font-m;
  .ms-u-normalize;
  color: @ms-color-themePrimary;
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus {
    color: @ms-color-themeDarker;
  }

  &:active {
    color: @ms-color-themePrimary;
  }
}

//== Modifier: Hero Links
//
.ms-Link.ms-Link--hero {
  padding: 2px 8px 4px;
}


@import "mixins.less";

.form {
  .box-sizing(border-box);

  h1, h2 {
    text-align: center;
    color: @darkGrey;
    font-size: 1.5em;
    font-weight: 200;
  }

  input, button {
    .box-sizing(border-box);
    border: 3px solid #eee;
    width: 100%;
    font-size: 1.2em;
    margin: 0.5em 0;
    padding: 1em;
    clear: both;
    -webkit-appearance: none;
    border-radius: 0;
  }

  button {
    background-color: @primary;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    cursor: pointer;
  }

  button:hover, button:active, button:focus {
    background-color: @primaryDark;
  }

  input:focus, button:focus {
    border-color: @primary;
    outline: 0;
  }

  p {
    text-align: center;
  }

  .errors {
    position: relative;

    li {
      color: @errorRed;
      right: 1.5em;
      bottom: 2em;
      position: absolute;
      width: auto;
      display: inline-block;
    }
  }
}

Use dark grey for input focus border

@import "mixins.less";

.form {
  .box-sizing(border-box);

  h1, h2 {
    text-align: center;
    color: @darkGrey;
    font-size: 1.5em;
    font-weight: 200;
  }

  input, button {
    .box-sizing(border-box);
    border: 3px solid #eee;
    width: 100%;
    font-size: 1.2em;
    margin: 0.5em 0;
    padding: 1em;
    clear: both;
    -webkit-appearance: none;
    border-radius: 0;
  }

  button {
    background-color: @primary;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    cursor: pointer;
  }

  button:hover, button:active, button:focus {
    background-color: @primaryDark;
  }

  input:focus, button:focus {
    border-color: @darkGrey;
    outline: 0;
  }

  p {
    text-align: center;
  }

  .errors {
    position: relative;

    li {
      color: @errorRed;
      right: 1.5em;
      bottom: 2em;
      position: absolute;
      width: auto;
      display: inline-block;
    }
  }
}


[data-apos-widget="apostrophe-rich-text"]
{
  // Specific positioning of widget controls for rich text widgets.
  >.apos-ui
  {
    >.apos-area-widget-controls--context
    {
      top: auto;
      bottom: 100%;
    }
    >.apos-area-widget-controls--data
    {
      left: auto;
      bottom: auto;
      top: 0;
      transform: translateY(-50%);
      right: @apos-padding-1;
    }
  }
  // When a rich text widget is active, we don't want to show any additional
  // nested Apostrophe admin elements.
  &.apos-active .apos-ui { display: none; }
  // Rich texts have an empty state with a min-height and a background color.
  &.apos-empty
  {
    min-height: 100px;
    background-color: @apos-light;
    .apos-area-widget-controls { opacity: 1; }
  }
  // A focus state for rich text widgets while editing.
  >[data-rich-text]:focus
  {
    outline: @apos-green dashed 1px;
  }
}

[data-apos-widget-wrapper="apostrophe-rich-text"]:hover { z-index: @apos-z-index-6; }

Add rich text styling in Apostrophe modals for most common tags

[data-apos-widget="apostrophe-rich-text"]
{
  // Specific positioning of widget controls for rich text widgets.
  >.apos-ui
  {
    >.apos-area-widget-controls--context
    {
      top: auto;
      bottom: 100%;
    }
    >.apos-area-widget-controls--data
    {
      left: auto;
      bottom: auto;
      top: 0;
      transform: translateY(-50%);
      right: @apos-padding-1;
    }
  }
  // When a rich text widget is active, we don't want to show any additional
  // nested Apostrophe admin elements.
  &.apos-active .apos-ui { display: none; }
  // Rich texts have an empty state with a min-height and a background color.
  &.apos-empty
  {
    min-height: 100px;
    background-color: @apos-light;
    .apos-area-widget-controls { opacity: 1; }
  }
  // A focus state for rich text widgets while editing.
  >[data-rich-text]:focus
  {
    outline: @apos-green dashed 1px;
  }
}

[data-apos-widget-wrapper="apostrophe-rich-text"]:hover { z-index: @apos-z-index-6; }

.apos-modal-body [data-rich-text]
{
  p {
    margin: 10px 0;
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
  b, strong {
    font-weight: bold;
  }
  em, i {
    font-style: italic;
  }
  ul {
    margin-left: 30px;
    list-style-type: disc;
  }
  ol {
    margin-left: 30px;
    list-style-type: decimal;
  }
}


// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media @highdpi {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }
}

Use replace to add @2x to path string

// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

  @media @highdpi {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }
}


.github-Panel {
    .github-CommitView, .github-CommitView > *,
    .github-CommitView atom-text-editor {
        background: darken(@app-background-color, 1.5%);
    }
    .github-CommitView-button {
        background-color: @base-color;

        &[disabled] {
            background-color: transparent;
        }

        &[disabled]:hover {
            box-shadow: none;
            color: inherit;
        }
    }
}

Add empty line to separate selectors


//
// Component animations
// --------------------------------------------------

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition(height .35s ease);

  &.in {
    height: auto;
  }
}

Add comment about opacity mixin not being used

//
// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition(height .35s ease);

  &.in {
    height: auto;
  }
}


.question {

  .move-question {
    float: right;
    font-size: 2rem;
    margin: 0 10px;
  }

  .remove-question {
    float: right;
    color: @red;
    margin-top: 0.7rem;
    i {
      margin-right: 10px;
    }
  }

  textarea {
    display: block;
    margin-bottom: 2rem;
    width: 100%;
    height: 8rem;
  }

  li.correct-answer {
    label {
      color: @green;
    }
    textarea {
      border-color: @green;
    }
  }

  .answer-actions {
    > a {
      margin-left: 10px;
      cursor: pointer;
      line-height: 2rem;

      &.is-correct {
        color: @openstax-neutral;
      }
      &.is-correct.correct-answer {
        color: @green;
      }

      i.fa {
        font-size: 2rem;
      }
    }
  }

  .tags select {
    width: 100%;
    margin-bottom: 1rem;
  }

  p.add-exercise {
    width: 100%;
    margin-bottom: 2em;
    a {
      font-size: 2rem;
      color: white;
      text-align: center;

      i {
        margin-right: 10px;
      }
    }
  }
}

Remove block style from textarea

.question {

  .move-question {
    float: right;
    font-size: 2rem;
    margin: 0 10px;
  }

  .remove-question {
    float: right;
    color: @red;
    margin-top: 0.7rem;
    i {
      margin-right: 10px;
    }
  }

  textarea {
    margin-bottom: 2rem;
    width: 100%;
    height: 8rem;
  }

  li.correct-answer {
    label {
      color: @green;
    }
    textarea {
      border-color: @green;
    }
  }

  .answer-actions {
    > a {
      margin-left: 10px;
      cursor: pointer;
      line-height: 2rem;

      &.is-correct {
        color: @openstax-neutral;
      }
      &.is-correct.correct-answer {
        color: @green;
      }

      i.fa {
        font-size: 2rem;
      }
    }
  }

  .tags select {
    width: 100%;
    margin-bottom: 1rem;
  }

  p.add-exercise {
    width: 100%;
    margin-bottom: 2em;
    a {
      font-size: 2rem;
      color: white;
      text-align: center;

      i {
        margin-right: 10px;
      }
    }
  }
}


i.close-icon {
  .fa;
  .fa-3x;
  cursor: pointer;
  &:before {
    content: @fa-var-times-circle;
  }
}

Move icon to top-right of panel

i.close-icon {
  .fa;
  .fa-3x;
  cursor: pointer;
  // position pointer to the top right of content
  float: right;
  margin-right: -(@concept-coach-base-y-padding/2);
  margin-top: -@concept-coach-base-x-padding;
  &:before {
    content: @fa-var-times-circle;
  }
}


//= require bootstrap
//= require_tree ./base

@import "bootstrap/mixins";

body {
  min-width: 960px;
  .background();
}

Use bootstrap also in base

// *= require_tree ./twitter
//= require bootstrap
//= require_tree ./base

@import "bootstrap/mixins";

body {
  min-width: 960px;
  .background();
}


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

.icon-fancy {
  .btn-bg();
  .default-box-shadow();
  .center-content();
  .circle(100px);
  background-color: @pink;
  padding: 8px 5px 5px; // manual alignment
  border: 10px solid #fff;
  color: #fff;
  font-size: 50px; // icon size
  transition: .25s all;

  .link-hover({
    color: #fff;
    text-decoration: none;
  });

  &:focus {
    .thick-box-shadow();
  }

  &:hover {
    .thicker-box-shadow();
  }

  &:active {
    .default-box-shadow();
  }
}

Reduce size of heart icon in bottom purchase link

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

.icon-fancy {
  .btn-bg();
  .default-box-shadow();
  .center-content();
  .circle(100px);
  background-color: @pink;
  padding: 8px 5px 5px; // manual alignment
  border: 10px solid #fff;
  color: #fff;
  font-size: 40px; // icon size
  transition: .25s all;

  .link-hover({
    color: #fff;
    text-decoration: none;
  });

  &:focus {
    .thick-box-shadow();
  }

  &:hover {
    .thicker-box-shadow();
  }

  &:active {
    .default-box-shadow();
  }
}


//
// Grid
// --------------------------------------------------

.column {
  .pull-left;
}

.full {
  .make-xs-column(12);
}
.half {
  .make-xs-column(12);
  .make-sm-column(6);
}
.third {
  .make-xs-column(12);
  .make-sm-column(4);
}

Revert "XWIKI-12560: .half CSS class does not work anymore."


// Justify Everything

.justified {
  display: table;
  width: 100%;
  > * {
    display: table-cell;
    width: 1%;
    float: none !important;
  }
}

Fix display table in Firefox

// Justify Everything

.justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  > * {
    display: table-cell;
    width: 1%;
    float: none !important;
  }
}


/**
 * font ligatures
 * https://github.com/tonsky/FiraCode/wiki/Atom-instructions
 */
atom-text-editor {
  text-rendering: optimizeLegibility;
}

/* less visible flow coverage underline */
atom-text-editor .nuclide-diagnostics-gutter-ui-highlight-warning > .region {
    border-bottom: 1px dashed rgba(235, 222, 11, 0.1);
}

/* (almost) hide ; in JS  */
atom-text-editor .syntax--js.syntax--punctuation.syntax--terminator {
  opacity: 0.4;
}

Adjust flow nuclide diagnostics color

/**
 * font ligatures
 * https://github.com/tonsky/FiraCode/wiki/Atom-instructions
 */
atom-text-editor {
  text-rendering: optimizeLegibility;
}

/* less visible flow coverage underline */
atom-text-editor .nuclide-diagnostics-gutter-ui-highlight-warning > .region {
  border-bottom: 1px dashed rgba(235, 222, 11, 0.4);
}

/* (almost) hide ; in JS  */
atom-text-editor .syntax--js.syntax--punctuation.syntax--terminator {
  opacity: 0.4;
}


@media print {
    .header h3, nav, footer {
        display: none;
    }
    nav > div {
        display: none;
    }
    .navbar-header {
        display: none;
    }

    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
    }
    h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 14pt;
        margin-top: 25px;
    }

    aside h2 {
        font-size: 18pt;
    }

    ul {
        margin: 0;
    }

    li {
        content: "» ";
    }
    /*@page :left {
        margin: 0.4cm;
    }

    @page :right {
        margin: 0.4cm;
    }*/
}

Check pointing adding rpint stylesheet for facility detailed view

@media print {
    nav, footer {
        display: none;
    }
    nav > div {
        display: none;
    }
    .navbar-header {
        display: none;
    }
    .action-btn {
        display: none;
    }
    span > button {
        display: none;
    }

    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
    }
    h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 14pt;
        margin-top: 25px;
    }
    h3 {
        font-size: 24pt;
        margin-top: 0px;
    }

    h3 span {
        font-size: 26pt;
    }

    aside h2 {
        font-size: 18pt;
    }

    ul {
        margin: 0;
    }

    li {
        content: "» ";
    }
    /*@page :left {
        margin: 0.4cm;
    }

    @page :right {
        margin: 0.4cm;
    }*/
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.casefile {
}

.casefile textarea.description {
  width: 100%;
  max-width: 100%;
}

.casefile button:focus {
  font-weight: bold;
}

.casefile .tagged-code {
  font-family: monospace;
  font-weight: bold;
}

Move modal action buttons to the right

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.casefile {
}

.casefile textarea.description {
  width: 100%;
  max-width: 100%;
}

.casefile .actions {
  text-align: right;
}

.casefile button:focus {
  font-weight: bold;
}

.casefile .tagged-code {
  font-family: monospace;
  font-weight: bold;
}


// Typography
// --------------------------------------------------

@base-font: 'source-sans-pro', sans-serif;
@heading-font: @base-font;
@caption-font: @base-font;
@code-font: 'source-code-pro', monospace;
@alt-font: 'volkorn', serif;

@doc-font-size: 16;
@doc-line-height: 24;

// set-up the body font-size / line-height
body {
	margin-top: 0px + @doc-line-height;
	font-size: 0px + @doc-font-size;
}

// Colors
// --------------------------------------------------

@body-color      		: #ebebeb;
@text-color      		: #222;
@base-color 	 		: #343434;
@comp-color 	 		: spin(@base-color, 180);
@border-color    		: @base-color;
@white           		: #fff;
@black           		: #000;
@accent-color    		: @black;
@link-color 		    : #222;

Change the @alt-font from volkhorn to volkhov

// Typography
// --------------------------------------------------

@base-font: 'source-sans-pro', sans-serif;
@heading-font: @base-font;
@caption-font: @base-font;
@code-font: 'source-code-pro', monospace;
@alt-font: 'volkhov', serif;

@doc-font-size: 16;
@doc-line-height: 24;

// set-up the body font-size / line-height
body {
	margin-top: 0px + @doc-line-height;
	font-size: 0px + @doc-font-size;
}

// Colors
// --------------------------------------------------

@body-color      		: #ebebeb;
@text-color      		: #222;
@base-color 	 		: #343434;
@comp-color 	 		: spin(@base-color, 180);
@border-color    		: @base-color;
@white           		: #fff;
@black           		: #000;
@accent-color    		: @black;
@link-color 		    : #222;


#codebox {
    .cb-lateralbar {
        position: absolute;
        top: @codeboxMenubarHeight;
        left: 0px;
        bottom: 0px;
        width: @codeboxLateralbarWidth;
        .transition(width @lateralTransitionSpeed);
        .user-select(none);

        .lateral-commands {
            position: absolute;
            left: 0px;
            right: 0px;
            width: @codeboxToolbarWidth;
            top: 0px;
            bottom: 0px;
            height: 100%;
            z-index: 20;
            background: @codeboxBodyBackground;
        }

        .lateral-body {
            position: absolute;
            top: 0px;
            left: @codeboxToolbarWidth;
            bottom: 0px;
            right: 0px;
            overflow-y: auto;
            overflow-x: hidden;
            .transition(all @lateralTransitionSpeed);
            z-index: 1;
            color: #000;
            text-shadow: none;
            background: @codeboxBodyBackground;
        }

        .lateral-operations {
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 10;
        }
    }
}

Fix operations display in lateral bar

#codebox {
    .cb-lateralbar {
        position: absolute;
        top: @codeboxMenubarHeight;
        left: 0px;
        bottom: 0px;
        width: @codeboxLateralbarWidth;
        .transition(width @lateralTransitionSpeed);
        .user-select(none);

        .lateral-commands {
            position: absolute;
            left: 0px;
            right: 0px;
            width: @codeboxToolbarWidth;
            top: 0px;
            bottom: 0px;
            height: 100%;
            background: @codeboxBodyBackground;
        }

        .lateral-body {
            position: absolute;
            top: 0px;
            left: @codeboxToolbarWidth;
            bottom: 0px;
            right: 0px;
            overflow-y: auto;
            overflow-x: hidden;
            .transition(all @lateralTransitionSpeed);
            z-index: 1;
            color: #000;
            text-shadow: none;
            background: @codeboxBodyBackground;
        }

        .lateral-operations {
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 10;
        }
    }
}


@import "/client/lib/bootstrap/custom.bootstrap.import.less";

.makerspaces {
  #map {
    width: 100%;
    height: 500px;
    margin: @line-height-computed 0;
  }
  .leaflet-container {
    font-family: @font-family-sans-serif;
    .leaflet-popup-content {
      h2 {
        font-weight: bold;
      }
      address {
        margin-bottom: 5px;
      }
    }
  }
}

Use our own link color for map popups

@import "/client/lib/bootstrap/custom.bootstrap.import.less";

.makerspaces {
  #map {
    width: 100%;
    height: 500px;
    margin: @line-height-computed 0;
  }
  .leaflet-container {
    font-family: @font-family-sans-serif;
    .leaflet-popup-content {
      h2 {
        font-weight: bold;
      }
      address {
        margin-bottom: 5px;
      }
      a {
        color: @link-color;
      }
    }
  }
}


#content-wrapper{
	min-height: 800px;
}

#iron-router-progress {
    background-color : #FFE11A;
    box-shadow       : 0 0 5px #FFE11A;
}

Fix misalignment of Expert name in mobile navigation

#content-wrapper{
	min-height: 800px;
}

#iron-router-progress {
    background-color : #FFE11A;
    box-shadow       : 0 0 5px #FFE11A;
}

.nav > li > p {
    margin: 0;
    padding: 10px 15px;
}

@media screen and (min-width:768px) {
    .nav > li > p {
        padding: 15px;
    }
}


.order-create {
    .cells {
        @media (min-width: @screen-md-min) {
            display: flex;
        }
    }
    .line-cell {
        padding: 5px 0px;
        display: inline-block;
        width: 100%;

        @media (min-width: @screen-md-min) {
            padding: 0px 8px;
            flex: 1 auto;
            align-self: flex-end;

            &.line-type-select {
                width: 160px;
                min-width: 160px;
            }

            &.delete {
                flex: 0 auto;
                width: auto;
                padding: 0;
            }

            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 0;
            }
        }

        label {
            font-size: 1.2rem;
            font-weight: 400;
            margin-bottom: 3px;
        }
        a {
            display: block;
            line-height: 1.2;
            font-weight: 400;
        }
    }
}

Add footer styles for order-creator

.order-create {
    .cells {
        @media (min-width: @screen-md-min) {
            display: flex;
        }
    }
    .line-cell {
        padding: 5px 0px;
        display: inline-block;
        width: 100%;

        @media (min-width: @screen-md-min) {
            padding: 0px 8px;
            flex: 1 auto;
            align-self: flex-end;

            &.line-type-select {
                width: 160px;
                min-width: 160px;
            }

            &.delete {
                flex: 0 auto;
                width: auto;
                padding: 0;
            }

            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 0;
            }
        }

        label {
            font-size: 1.2rem;
            font-weight: 400;
            margin-bottom: 3px;
        }
        a {
            display: block;
            line-height: 1.2;
            font-weight: 400;
        }
    }
    #order-tool-container {
        padding-bottom: 50px;
    }
    .order-footer {
        z-index: 10;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        background: #fff;
        border-top: 1px solid @border-color;
        text-align: right;
        .text {
            display: inline-block;
            vertical-align: middle;
            margin-right: 25px;
            h2 {
                margin: 0;
            }
        }
        .proceed-button {
            vertical-align: middle;
            display: inline-block;
        }
    }
}


@import "ui-variables";

.incompatible-packages {
  background-color: @pane-item-background-color;
  overflow-y: scroll;

  .incompatible-package {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #d1d1d2;
    background-color: #fafafa;
    overflow: hidden;

    .badge {
      margin-left: 1em;
    }

    .heading {
      margin-top: 0px;
    }

    ul {
      padding-left: 1em;
    }

    li {
      list-style-type: none;
    }

    pre {
      margin-top: 2em;
      max-height: 25em;
      overflow: scroll;
      color: @text-color-error;
    }
  }
}

.incompatible-packages-status {
  padding-left: 2px;
}

Use UI variables on container

@import "ui-variables";

.incompatible-packages {
  background-color: @pane-item-background-color;
  overflow-y: scroll;

  .incompatible-package {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid @base-border-color;
    background-color: lighten(@tool-panel-background-color, 8%);
    overflow: hidden;

    .badge {
      margin-left: 1em;
    }

    .heading {
      margin-top: 0px;
    }

    ul {
      padding-left: 1em;
    }

    li {
      list-style-type: none;
    }

    pre {
      margin-top: 2em;
      max-height: 25em;
      overflow: scroll;
      color: @text-color-error;
    }
  }
}

.incompatible-packages-status {
  padding-left: 2px;
}


@search-sidebar-bg: rgba(255, 255, 255, 0.98);
@search-sidebar-percentage-width: 40%;
@search-sidebar-max-width: 580px;
@search-sidebar-min-breakpoint: 900px; // Used to pointpoint map objects relative to the sidebar
@search-sidebar-max-breakpoint: 1450px; // Used to pointpoint map objects relative to the sidebar
@search-sidebar-min-width: 360px;
@search-toolbar-opacity: 0.95;
@search-controls-gap-mobile: 6px;
@search-message-width: 300px;
@search-sidebar-toggle-height: 46px;
@map-toolbar-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

Make search sidebar slightly more narrow

@search-sidebar-bg: rgba(255, 255, 255, 0.98);
@search-sidebar-percentage-width: 35%;
@search-sidebar-max-width: 500px;
@search-sidebar-min-breakpoint: 900px; // Used to pointpoint map objects relative to the sidebar
@search-sidebar-max-breakpoint: 1450px; // Used to pointpoint map objects relative to the sidebar
@search-sidebar-min-width: 360px;
@search-toolbar-opacity: 0.95;
@search-controls-gap-mobile: 6px;
@search-message-width: 300px;
@search-sidebar-toggle-height: 46px;
@map-toolbar-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);