#tabs {
    margin: 0;
    padding: 6px;
    vertical-align: top;
    color: @rohpod-text;
    background-color: @rohpod-ui-background;
    list-style: none;

    .selected {
        background-color: lighten(@rohpod-ui-background, 8%);
    }

    > li {
        display: inline-block;
        padding: 6px;
        background-color: @rohpod-ui-background;
        cursor: default;

        &:hover {
            background-color: lighten(@rohpod-ui-background, 16%);
        }

        > .tab-name {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: top;
            max-width: 80px;
            min-width: 50px;
        }

        @media screen and (min-width: 512px) {
            > .tab-name {
                max-width: 150px;
                min-width: 50px;
            }
        }

        > .tab-close {
            display: inline-block;
            padding: 2px;
            margin-left: 4px;
            width: 16px;
            float: right;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            color: darken(@rohpod-text, 50%);

            &:hover {
                color: @rohpod-text;
                background-color: @rohpod-buttons;
            }
        }
    }
}

Fix tab rendering in IE11

#tabs {
    margin: 0;
    padding: 6px;
    vertical-align: top;
    color: @rohpod-text;
    background-color: @rohpod-ui-background;
    list-style: none;
    overflow: hidden;

    .selected {
        background-color: lighten(@rohpod-ui-background, 8%);
    }

    > li {
        display: inline-block;
        padding: 6px;
        background-color: @rohpod-ui-background;
        cursor: default;

        &:hover {
            background-color: lighten(@rohpod-ui-background, 16%);
        }

        > .tab-name {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: top;
            max-width: 80px;
            min-width: 50px;
        }

        @media screen and (min-width: 512px) {
            > .tab-name {
                max-width: 150px;
                min-width: 50px;
            }
        }

        > .tab-close {
            display: inline-block;
            padding: 2px;
            margin-left: 4px;
            width: 16px;
            float: right;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            color: darken(@rohpod-text, 50%);

            &:hover {
                color: @rohpod-text;
                background-color: @rohpod-buttons;
            }
        }
    }
}


.vim-mode.command-mode:not(.mini) {
  .cursor, .cursor.blink-off {
    border: 0;
    background-color: white;
    visibility: visible;
    opacity: 0.5;
  }
}

Use syntax variable for cursor color

@import "syntax-variables";

.vim-mode.command-mode:not(.mini) {
  .cursor, .cursor.blink-off {
    border: 0;
    background-color: @syntax-cursor-color;
    visibility: visible;
    opacity: 0.5;
  }
}


.btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle; // match .btn alignment given font-size hack above
    > .btn {
        position: relative;
        float: left;
        // Bring the "active" button to the front
        &:hover,
        &:focus,
        &:active,
        &.active {
          z-index: 2;
        }
    }

    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: -1px;
    }

    > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
        border-radius: 0;
    }

    > .btn:first-child {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    > .btn:last-child {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
    // Offset the first child's margin
    margin-left: -5px;
    &:extend(.clearfix all);

    .btn,
    .btn-group,
    .input-group {
        float: left;
    }

    > .btn,
    > .btn-group,
    > .input-group {
        margin-left: 5px;
    }
}

Fix radius on button group with only one button

.btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle; // match .btn alignment given font-size hack above
    > .btn {
        position: relative;
        float: left;
        // Bring the "active" button to the front
        &:hover,
        &:focus,
        &:active,
        &.active {
          z-index: 2;
        }
    }

    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: -1px;
    }

    > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
        border-radius: 0;
    }

    > .btn:not(:last-child):first-child {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    > .btn:not(:first-child):last-child {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
    // Offset the first child's margin
    margin-left: -5px;
    &:extend(.clearfix all);

    .btn,
    .btn-group,
    .input-group {
        float: left;
    }

    > .btn,
    > .btn-group,
    > .input-group {
        margin-left: 5px;
    }
}


// Buttons

// Color
.btn-color(@bg, @color, @border: transparent, @active-bg: darken(@bg, 10%), @active-color: @color, @active-border: darken(@border, 12%)) {
  color: @color;
  background-color: @bg;
  border-color: @border;

  &.active,
  &:hover,
  &:focus {
    color: @active-color;
    background-color: @active-bg;
    border-color: @active-border;
  }
}

Update the mixin for buttons

// Buttons

// Color
.btn-color(@bg, @color, @border: transparent, @active-bg: darken(@bg, 10%), @active-color: @color, @active-border: darken(@border, 10%)) {
  color: @color;
  background-color: @bg;
  border-color: @border;

  &.active,
  &:hover,
  &:focus {
    color: @active-color;
    background-color: @active-bg;
    border-color: @active-border;
  }
}


.profile__image {
  float: left;
  margin-right: 10px;
}

.profile__h3 {
  margin: 8px 0 0 0;
}

.btn-secondary {
  background: #fff;
  border: 1px solid #bbb !important;
}

.profile__cointainer {
  .well {
    .form-group:last-of-type {
      margin-bottom: 0;
    }
  }
}

Move global style out from local file

.profile__image {
  float: left;
  margin-right: 10px;
}

.profile__h3 {
  margin: 8px 0 0 0;
}

.profile__cointainer {
  .well {
    .form-group:last-of-type {
      margin-bottom: 0;
    }
  }
}


.nuclide-workspace-views-toggle-button .nuclide-workspace-views-toggle-button-inner {
    background-color: @base-color;
}

.nuclide-workspace-views-panel {
    position: relative;

    &-handle {
        position: absolute;
        opacity: 0;
        z-index: 10;

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

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

        .bottom & {
            top: 0;
        }

        .top & {
            bottom: 0;
        }

        .left & {
            right: 0;
        }

        .right & {
            left: 0;
        }
    }
}

Add animations to Nuclide's panels

.nuclide-workspace-views {
    &-toggle-button .nuclide-workspace-views-toggle-button-inner {
        background-color: @base-color;
    }

    &-panel {
        position: relative;

        &-handle {
            position: absolute;
            opacity: 0;
            z-index: 10;

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

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

            .bottom & {
                top: 0;
            }

            .top & {
                bottom: 0;
            }

            .left & {
                right: 0;
            }

            .right & {
                left: 0;
            }
        }
    }

    .amu-use-animations & {
        &-panel-mask:not(:active) {
            transition:
                height 250ms @md-timing-function,
                width 250ms @md-timing-function;
        }
    }
}


.dropdown-menu { border: 1px solid @tutor-neutral-light; }

Hide menu option for QuestionLibrary

.dropdown-menu {

  border: 1px solid @tutor-neutral-light;

  // The QuestionLibrary is hidden until it's ready for release
  // it's re-enabled below when spy mode is engaged
  [data-name=viewQuestionsLibrary] {
    display: none;
  }

}

// enable the Question Library link when spy mode is active
// This and the above 'display: none' should be removed when the
// Question Library is released
.openstax-debug-content.is-enabled {
  .dropdown-menu [data-name=viewQuestionsLibrary] { display: block; }
}


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

.beatmap-basic-stats {
  display: flex;
  justify-content: space-between;
  margin: -5px -10px;
  font-weight: 700;
  font-size: @font-size--normal;
  color: @yellow-light;

  &__entry {
    display: flex;
    flex: none;
    padding: 5px 5px;
    align-items: center;
  }

  &__entry-icon {
    width: 24px;
    height: 24px;

    background-size: contain;

    margin-right: 3px;
  }
}

Fix margin for basic map stats

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

.beatmap-basic-stats {
  display: flex;
  justify-content: space-between;
  margin: -5px -5px;
  font-weight: 700;
  font-size: @font-size--normal;
  color: @yellow-light;

  &__entry {
    display: flex;
    flex: none;
    padding: 5px 5px;
    align-items: center;
  }

  &__entry-icon {
    width: 24px;
    height: 24px;

    background-size: contain;

    margin-right: 3px;
  }
}


// Contextual backgrounds

.bg-variant(@color) {
  background-color: @color;
  a&:hover {
    background-color: darken(@color, 10%);
  }
}

Make .bg-variant adjust :focus color in addition to :hover color

// Contextual backgrounds

.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}


/* Variables */

@font-size:16px;
@menuFontSize:@font-size;
@smallerMenuFontSize: (@menuFontSize - 2px);
@borderRadius: 4px;
@social-icons:url('../images/social_mono_32x32.png');
@founder-icon-1:url('../images/minobr_48x48.png');
@founder-icon-2:url('../images/mcx_48x48.png');
@logo-title-text-shadow:none;
@logo-title-motto-shadow:none;
@logo-title-motto-color:#fff;
@header-background:linear-gradient(to bottom, @color-primary-4 0%, @color-primary-4 30px, @color-primary-3 30px,  @color-primary-3 100%);
@footer-main-background:@color-secondary-1-3;
@float-button-opacity:0.75;
@float-button-opacity-hover:1;

Return gradient to a11y header bg

/* Variables */

@font-size:16px;
@menuFontSize:@font-size;
@smallerMenuFontSize: (@menuFontSize - 2px);
@borderRadius: 4px;
@social-icons:url('../images/social_mono_32x32.png');
@founder-icon-1:url('../images/minobr_48x48.png');
@founder-icon-2:url('../images/mcx_48x48.png');
@logo-title-text-shadow:none;
@logo-title-motto-shadow:none;
@logo-title-motto-color:#fff;
@header-background:linear-gradient(to bottom, @color-primary-4 0%, @color-primary-4 30px, @color-primary-3 30px,  @color-primary-2 100%);
@footer-main-background:@color-secondary-1-3;
@float-button-opacity:0.75;
@float-button-opacity-hover:1;


[placeholder]:empty::after {
  color: @colorInputPlaceholder;
  content: attr(placeholder);
  pointer-events: none;
}

Fix caret positioning bug that makes the contenteditabe unusable in FF (still causes a small bug)

[placeholder]:empty::before {
  color: @colorInputPlaceholder;
  content: attr(placeholder);
  pointer-events: none;
  position: absolute;
}


.outcome-alignment-rating {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
        border-radius: 2em;
        font-size: 2em;
        text-align: center;
        width: 55%;
        cursor: pointer;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}

Fix compact-style rating being shown in label for non-compact

.outcome-alignment-rating {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .compact-rating {
    border-radius: 2em;
    font-size: 2em;
    text-align: center;
    width: 55%;
    cursor: pointer;
  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}


.task-ilo-alignment-rater {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .compact-rating {
    border-radius: 2em;
    font-size: 2em;
    text-align: center;
    width: 55%;
    cursor: pointer;
    margin: 0 auto;
  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}

Fix size of alignment rater compact view icon

.task-ilo-alignment-rater {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .compact-rating {
    border-radius: 2em;
    font-size: 2em;
    text-align: center;
    width: 1.5em;
    cursor: pointer;
    margin: 0 auto;
  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}


.github-StubItem-github-tab-controller {
  flex: 1;
  display: flex;
}

.github-GithubTabController {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;

  &-content {
    flex: 1;
    display: flex;
  }

  &-no-remotes {
    margin: 10px;
    font-size: @font-size * 1.25;
  }

  .github-RemoteSelector {
    font-size: @font-size * 1.25;

    p {
      text-align: center;
      margin: 10px;
    }

    ul {
      list-style: none;
      padding-left: 1em;
    }

    a {
      color: @text-color-info;
    }
  }
}

Set flex-direction: column to center LoadingView

.github-StubItem-github-tab-controller {
  flex: 1;
  display: flex;
}

.github-GithubTabController {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &-no-remotes {
    margin: 10px;
    font-size: @font-size * 1.25;
  }

  .github-RemoteSelector {
    font-size: @font-size * 1.25;

    p {
      text-align: center;
      margin: 10px;
    }

    ul {
      list-style: none;
      padding-left: 1em;
    }

    a {
      color: @text-color-info;
    }
  }
}


@import "ui-variables";

:host(:host) .gutter .line-number {
  &.latex-error {
    border-left: 2px solid @background-color-error;
    padding-left: ~"calc(0.5em - 2px)";
  }
  &.latex-warning {
    border-left: 2px solid @background-color-warning;
    padding-left: ~"calc(0.5em - 2px)";
  }
  &.latex-info {
    border-left: 2px solid @background-color-info;
    padding-left: ~"calc(0.5em - 2px)";
  }
}

Remove usage of the Shadow DOM

@import "ui-variables";

atom-text-editor .gutter .line-number {
  &.latex-error {
    border-left: 2px solid @background-color-error;
    padding-left: ~"calc(0.5em - 2px)";
  }
  &.latex-warning {
    border-left: 2px solid @background-color-warning;
    padding-left: ~"calc(0.5em - 2px)";
  }
  &.latex-info {
    border-left: 2px solid @background-color-info;
    padding-left: ~"calc(0.5em - 2px)";
  }
}


// Navigation bar

// Variables
@navbar-bg:                            #f9f9f9;
@navbar-breakpoint:                    @grid-breakpoint-sm;
@navbar-item-padding:                  15px;

.navbar-component {
  background-color: @navbar-bg;

  .navbar-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;

    @media (min-width: @navbar-breakpoint) {
      margin-right: -@navbar-item-padding;
      margin-left: -@navbar-item-padding;
      flex-direction: row;
      align-items: center;
    }

    & > a {
      display: block;
      padding: @navbar-item-padding;
    }
  }
}

Update navbar component (color and position)

// Navigation bar

// Variables
@navbar-bg:                            #f9f9f9;
@navbar-breakpoint:                    @grid-breakpoint-sm;
@navbar-item-padding:                  15px;

@navbar-item-color:                    @body-color;
@navbar-item-active-color:             @brand-primary;

.navbar-component {
  background-color: @navbar-bg;

  .navbar-list {
    display: flex;
    flex-basis: 100%;
    flex-flow: column nowrap;
    justify-content: center;

    @media (min-width: @navbar-breakpoint) {
      margin-right: -@navbar-item-padding;
      margin-left: -@navbar-item-padding;
      flex-direction: row;
      justify-content: flex-start;
    }

    & > a {
      display: block;
      padding: @navbar-item-padding;
      color: @navbar-item-color;
      text-align: center;

      &:hover,
      &:focus {
        color: @navbar-item-active-color;
      }
    }
  }
}


// Place all the styles related to the Events controller here.
// They will automatically be included in application.css.
// You can use Less here: http://lesscss.org/

form.event textarea {
  width: 570px;
}

Remove top padding on event titles to align with register buttons

// Place all the styles related to the Events controller here.
// They will automatically be included in application.css.
// You can use Less here: http://lesscss.org/

form.event textarea {
  width: 570px;
}

.event-title {
  margin-top: 0;
}


* {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" on, "calt" on;
}

atom-text-editor {
  font-family: 'Monoid', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 100%;
  .cursor-line {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
}

.tab-bar .tab .title {
  //font-family: 'Monoid', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
  font-size: 120%;
}

atom-text-editor::shadow {
  .cursor-line {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
}

Fix font sizing, remove shadow DOM since 1.13 out of beta

* {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" on, "calt" on;
}

atom-text-editor {
  font-family: 'Monoid', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 13px;
  text-rendering: optimizeLegibility;
  .cursor-line {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
}

.tab-bar .tab .title {
  //font-family: 'Monoid', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
  font-size: 120%;
}

//not sure turning off ligatures for find-and-replace box is
//really necessary, trying it out.
div.find-and-replace atom-text-editor .line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}


@import '../../../less/desktop.less';

.gmf-displayquerywindow {
  width: 36rem;
  max-width: 36rem;
}

Allow horizontal scrolling in query details window

@import '../../../less/desktop.less';

.gmf-displayquerywindow {
  width: 36rem;
  max-width: 36rem;
}

.gmf-displayquerywindow .gmf-displayquerywindow-details {
  overflow-x: auto;
}

::-webkit-scrollbar {
  height: @half-app-margin;
}


.ui-content-list {
    .item-file {
        padding: 5px;

        p {
            margin: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.component-tab-results {
    padding: 4px;
    .user-select(text);

    .results-header {
        margin-bottom: 20px;
    }
    .results-footer {
        margin-top: 20px;
    }
    .results-body {
        .result-file {
            margin: 10px 0px;

            .file-lines {
                list-style: none;
                margin: 0px;
                padding: 0px;
                margin-left: 20px;

                .number {
                    color: @color-9;
                    width: 40px;
                    text-align: right;
                    display: inline-block;
                }

                .separator {
                    white-space: pre;
                    display: inline-block;
                    width: 20px;
                    text-align: left;
                }
            }
        }
    }
}

Improve padding in results tab

.ui-content-list {
    .item-file {
        padding: 5px;

        p {
            margin: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.component-tab-results {
    padding: 4px 8px;
    .user-select(text);

    .results-header {
        margin-bottom: 20px;
    }
    .results-footer {
        margin-top: 20px;
    }
    .results-body {
        .result-file {
            margin: 10px 0px;

            .file-lines {
                list-style: none;
                margin: 0px;
                padding: 0px;
                margin-left: 20px;

                .number {
                    color: @color-9;
                    width: 40px;
                    text-align: right;
                    display: inline-block;
                }

                .separator {
                    white-space: pre;
                    display: inline-block;
                    width: 20px;
                    text-align: left;
                }
            }
        }
    }
}


/* ==========================================================================
   Main navigation bar
   ========================================================================== */

.navbar .brand {
  background-image: asset-url("header-crown.png");
  background-position: 0 0.25em;
  background-repeat: no-repeat;
  color: #fff;
  font-family: "GillSans", "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 0;
  padding-left: 2em;
}

.navbar-inner {
  background: #000; /* black */
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  box-shadow: none;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
  background: none;
}

Add environment colours and apply to nav border

/* ==========================================================================
   Main navigation bar
   ========================================================================== */

.navbar .brand {
  background-image: asset-url("header-crown.png");
  background-position: 0 0.25em;
  background-repeat: no-repeat;
  color: #fff;
  font-family: "GillSans", "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 0;
  padding-left: 2em;
}

.navbar-inner {
  background: #000; /* black */
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  box-shadow: none;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
  background: none;
}

/* Environment indicators
   ========================================================================== */

@production-color: #df3034; /* Red */
@preview-color: #ffbf47;    /* Orange */
@dev-color: #bfc1c3;        /* Grey */

.environment-production .navbar-inner {
  border-bottom-color: @production-color;
}

.environment-preview .navbar-inner {
  border-bottom-color: @preview-color;
}

.environment-dev .navbar-inner {
  border-bottom-color: @dev-color;
}


/**
 * module: example
 * creator:
 */
.mod-example {
	.icon:before {
		// With sprites
		//.sprite();
		//.s-icon-paperclip();
		margin-right: 1em;
		float: left;

		// Without sprites
		display: inline-block;
		content: '';
		width: 2em;
		height: 2em;
		background-image: url('@{path-img}/icon-paperclip.png');
		background-size: 2em 2em;
	}
	code {
		padding: .1em;
		background-color: #eeeeff;
		font-style: italic;
		color: #666;
		text-shadow: none;
	}
	p {
		margin: .7em 0;
		line-height: 1.4em;
		color: #222;
		text-shadow: 0.09em 0.07em 0.05em #fafafa;
	}
	.exmpl {
		margin-left: 2em;
	}
}
/* END module: example */

Fix missing digit in text-shadow

/**
 * module: example
 * creator:
 */
.mod-example {
	.icon:before {
		// With sprites
		//.sprite();
		//.s-icon-paperclip();
		margin-right: 1em;
		float: left;

		// Without sprites
		display: inline-block;
		content: '';
		width: 2em;
		height: 2em;
		background-image: url('@{path-img}/icon-paperclip.png');
		background-size: 2em 2em;
	}
	code {
		padding: .1em;
		background-color: #eeeeff;
		font-style: italic;
		color: #666;
		text-shadow: none;
	}
	p {
		margin: .7em 0;
		line-height: 1.4em;
		color: #222;
		text-shadow: 0.09em 0.07em 0.025em #fafafa;
	}
	.exmpl {
		margin-left: 2em;
	}
}
/* END module: example */


@import "~gmf/less/vars.less";

@profile-height: 20rem;
.gmf-profile-container {
  position: relative;
  overflow: hidden;
  @profile-legend-width: 15rem;
  padding: @app-margin;
  border-top: solid 1px black;
  background-color: white;
  height: @profile-height;
  display: flex;

  .ngeo-profile {
    width: ~"calc(100% - @{profile-legend-width})";
    background-color: #f5f5f5;
  }

  .gmf-profile-legend {
    list-style-type: none;
    width: @profile-legend-width;
    padding: @app-margin;
  }

  .gmf-profile-export {
    position: absolute;
    right: @app-margin;
    bottom: @app-margin;
  }

  .gmf-profile-error {
    width: 100%;
  }

  .close {
    height: 1rem;
  }
}

.gmf-profile-chart-active main {
  height: calc(~'100%' - @profile-height);
}

Fix css class for gmf-contextualdata

@import "~gmf/less/vars.less";

@profile-height: 20rem;
.panel.gmf-profile-container {
  position: relative;
  overflow: hidden;
  @profile-legend-width: 15rem;
  padding: @app-margin;
  border-top: solid 1px black;
  background-color: white;
  height: @profile-height;
  display: flex;

  .ngeo-profile {
    width: ~"calc(100% - @{profile-legend-width})";
    background-color: #f5f5f5;
  }

  .gmf-profile-legend {
    list-style-type: none;
    width: @profile-legend-width;
    padding: @app-margin;
  }

  .gmf-profile-export {
    position: absolute;
    right: @app-margin;
    bottom: @app-margin;
  }

  .gmf-profile-error {
    width: 100%;
  }

  .close {
    height: 1rem;
  }
}

.gmf-profile-chart-active main {
  height: calc(~'100%' - @profile-height);
}


@import "ui-variables";
@import "syntax-variables";

// Variables to define style
@editor-font: "PragmataPro", "SFMono-Regular", "SF Mono Regular";
@editor-font-size: 14px;
@line-height: 1.2;

@ui-font: ".SFNSText-Regular", "San Francisco Text", "Cantarell", "Segoe UI";
@ui-font-size: @editor-font-size - 2;
@tab-bar-height: @ui-font-size + 16;

// Setup editor font and size
atom-text-editor {
    font-family: @editor-font;
    font-size: @editor-font-size;
    line-height: @line-height;
    padding-top: 2px;
}

// Customize UI
.theme-one-dark-ui, .theme-one-light-ui {
    font-family: @ui-font;
    font-size: @ui-font-size;
}

atom-text-editor::shadow {
    // Make wrap guide and invisible characters slightly transparent
    .invisible-character, .indent-guide, .wrap-guide { opacity: 0.5; }

    // Smaller line numbers
    .line-numbers .line-number {
        font-size: @editor-font-size * 0.8;
        line-height: @editor-font-size * @line-height;
    }

    .highlights .highlight-selected.light-theme .region {
        border-color: fadeout(@syntax-text-color, 60%);
    }
}

Fix fonts in Atom ui

@import "ui-variables";
@import "syntax-variables";

// Variables to define style
@editor-font: "PragmataPro", "SFMono-Regular", "SF Mono Regular";
@editor-font-size: 14px;
@line-height: 1.2;

@ui-font-size: @editor-font-size - 2;
@tab-bar-height: @ui-font-size + 16;

// Setup editor font and size
atom-text-editor {
    font-family: @editor-font;
    font-size: @editor-font-size;
    line-height: @line-height;
    padding-top: 2px;
}

// Customize UI
.theme-one-dark-ui, .theme-one-light-ui {
    font-size: @ui-font-size;
}

atom-text-editor::shadow {
    // Make wrap guide and invisible characters slightly transparent
    .invisible-character, .indent-guide, .wrap-guide { opacity: 0.5; }

    // Smaller line numbers
    .line-numbers .line-number {
        font-size: @editor-font-size * 0.8;
        line-height: @editor-font-size * @line-height;
    }

    .highlights .highlight-selected.light-theme .region {
        border-color: fadeout(@syntax-text-color, 60%);
    }
}


@import "variables";

.github-StubItem-git,
.github-Git-root {
  flex: 1;
  display: flex;
}

.github-Git {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: @font-family;
  font-size: @font-size;
  color: @text-color;
  -webkit-user-select: none;
  cursor: default;

  &.no-repository {
    padding: @component-padding * 3;
    text-align: center;
  }

  &.is-loading {
    color: @text-color-subtle;
  }

  &.no-repository {
    display: flex;
    justify-content: center;
    font-size: 1.25em;

    > * {
      margin: @component-padding 0;
    }

    .btn.btn-primary {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-LargeIcon:before {
    margin-right: 0;
    margin-bottom: 30px;
    width: auto;
    height: auto;
    font-size: 6em;
    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
  }
}

Remove unnecessary style block 🎨

@import "variables";

.github-StubItem-git,
.github-Git-root {
  flex: 1;
  display: flex;
}

.github-Git {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: @font-family;
  font-size: @font-size;
  color: @text-color;
  -webkit-user-select: none;
  cursor: default;

  &.is-loading {
    color: @text-color-subtle;
  }

  &.no-repository {
    display: flex;
    justify-content: center;
    font-size: 1.25em;
    padding: @component-padding * 3;
    text-align: center;

    > * {
      margin: @component-padding 0;
    }

    .btn.btn-primary {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-LargeIcon:before {
    margin-right: 0;
    margin-bottom: 30px;
    width: auto;
    height: auto;
    font-size: 6em;
    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
  }
}


@import "./colors";

@io-panel-height: 250px;

.delve-io-panel {
  height: @io-panel-height;

  &:not(.dragged) {
    transition: height .45s ease-in-out;
  }
}

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  min-width: 100px;

  background: @term-bg;
  overflow-y: scroll;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-resizer {
  height: 5px;
  width: 100%;
  display: block;

  cursor: row-resize;
}

.delve-io-panel-resizer {
  width: 5px;
  background-color: @term-border-color;
  height: 100%;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.75em;
  width: 100%;
  padding: 0 1.5em;

  .delve-io-action {
    float: right;
    margin: 0 1em;
  }
}

Add border radius to panels

@import "./colors";

@io-panel-height: 250px;

.delve-io-panel {
  height: @io-panel-height;

  &:not(.dragged) {
    transition: height .45s ease-in-out;
  }
}

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  min-width: 100px;
  border-radius: 2px;

  background: @term-bg;
  overflow-y: scroll;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-resizer {
  height: 5px;
  width: 100%;
  display: block;

  cursor: row-resize;
}

.delve-io-panel-resizer {
  width: 5px;
  background-color: @term-border-color;
  height: 100%;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.75em;
  width: 100%;
  padding: 0 1.5em;

  .delve-io-action {
    float: right;
    margin: 0 1em;
  }
}


.openstax-animated-focus-input(){
  box-shadow: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid @openstax-neutral-light;
  padding-left: 0;
  padding-right: 0;
  transition: all 0.3s ease;
  background: linear-gradient(to bottom, white 96%, @tutor-primary 4%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 0px 100%;
  &:focus,
  &.focus {
    outline:none;
    outline:none;
    background-position: 0 0;
    background-size: 100% 100%;
  }
}

Switch tutor with openstax since it's in shared

.openstax-animated-focus-input(){
  box-shadow: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid @openstax-neutral-light;
  padding-left: 0;
  padding-right: 0;
  transition: all 0.3s ease;
  background: linear-gradient(to bottom, white 96%, @openstax-primary 4%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 0px 100%;
  &:focus,
  &.focus {
    outline:none;
    outline:none;
    background-position: 0 0;
    background-size: 100% 100%;
  }
}


@import (reference) '../../styles/main';
@import '../../styles/variables';

.xuiCard {
  background-color: white;
  color: white;
  @media (max-width: @screen-phone) {
    opacity: 1;
  }

  .xuiCard-image {
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    @media (max-width: @screen-phone) {
      background-image: none !important;
    }

    > img {
      width: 100%;
      text-align: center;
      height: 50px;
      margin: 30px 0;
      opacity: 1;

      @media (max-width: @screen-phone) {
        margin: 10px 0;
        opacity: 1;
      }
    }
  }
  .xuiCard-title {
    .xui-number;
    padding: 8px 8px 0;
    line-height: normal;
    background-color: @xui-purple1;
    margin-bottom: -1px;
  }
  .xuiCard-content {
    .xui-label;
    height: auto;
    padding: 0 8px 8px;
    background-color: @xui-purple1;
    border-radius: 0 0 3px 3px;

    @media (max-width: @screen-phone) {
      height: 40px;
    }
  }
}

Set the card content height to avoid cards with different heights

@import (reference) '../../styles/main';
@import '../../styles/variables';

.xuiCard {
  background-color: white;
  color: white;
  @media (max-width: @screen-phone) {
    opacity: 1;
  }

  .xuiCard-image {
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    @media (max-width: @screen-phone) {
      background-image: none !important;
    }

    > img {
      width: 100%;
      text-align: center;
      height: 50px;
      margin: 30px 0;
      opacity: 1;

      @media (max-width: @screen-phone) {
        margin: 10px 0;
        opacity: 1;
      }
    }
  }
  .xuiCard-title {
    .xui-number;
    padding: 8px 8px 0;
    line-height: normal;
    background-color: @xui-purple1;
    margin-bottom: -1px;
  }
  .xuiCard-content {
    .xui-label;
    height: 45px;
    padding: 0 8px 8px;
    background-color: @xui-purple1;
    border-radius: 0 0 3px 3px;

    @media (max-width: @screen-phone) {
      height: 40px;
    }
  }
}


body {
  padding: 24px;
}

body a, body a:hover, body a:visited {
  color: #7381a9;
  cursor: pointer;
}

.banner {
  display: none;
}

.domain {
  color: #000;
}

.header {
  padding-bottom: 12px;
}

.heading {
  margin-bottom: 0;
}

.heading a {
  text-decoration: none;
}

.subheading {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

.menu {
  padding-top: 6px;
}

.metaphor {
  padding: 12px 0;
}

.m4Cite {
  display: block;
  text-align: right;
  margin-right: 12px;
}

Fix github link issue on mobile

body {
  padding: 24px;
}

body a, body a:hover, body a:visited {
  color: #7381a9;
  cursor: pointer;
}

.banner {
  display: none;
}

.domain {
  color: #000;
}

.header {
  padding-bottom: 12px;
}

.heading {
  margin-bottom: 0;
}

.heading a {
  text-decoration: none;
}

.subheading {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

.menu {
  padding-top: 6px;
  position: relative;
  z-index: 1;
}

.metaphor {
  padding: 12px 0;
}

.m4Cite {
  display: block;
  text-align: right;
  margin-right: 12px;
}


.ns("frontend.components.pieces.empty-state", {
  .ui("important", {
    font-weight: 600;
  });

  .ui("empty-state", {
    padding: 15px;
    text-align: center;

    > .icon {
      margin-bottom: 20px;

      font-size: 60px;
      line-height: 1;
      color: @grayLighter;

      .octicon,
      .material-icons {
        // OVERRIDE--ICON-STYLE
        font-size: inherit;
        color: inherit;
        margin-left: 0;
      }
    }

    > .heading {
      font-size: @fontSizeLargest;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    > .subheading {
      font-size: @fontSizeMedium;
    }

    > .action {
      margin-top: 30px;
    }
  });
});

Add missing >s and document non-exemplary code

.ns("frontend.components.pieces.empty-state", {
  .ui("important", {
    font-weight: 600;
  });

  .ui("empty-state", {
    padding: 15px;
    text-align: center;

    > .icon {
      margin-bottom: 20px;

      font-size: 60px;
      line-height: 1;
      color: @grayLighter;

      // WARNING: Non-exemplary code. This styles a node which this component
      // does not render. The icon is often an .octicon or a .material-icons,
      // but these are styled across the app (and shouldn\'t be). This block
      // resets their style, so we don\'t have to do it in every place we pass
      // one in. When they\'re no longer styled app-wide, this block can go
      // away.
      // OVERRIDE--ICON-STYLE
      > .octicon,
      > .material-icons {
        font-size: inherit;
        color: inherit;
        margin-left: 0;
      }
    }

    > .heading {
      font-size: @fontSizeLargest;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    > .subheading {
      font-size: @fontSizeMedium;
    }

    > .action {
      margin-top: 30px;
    }
  });
});


@import (less)"~normalize.css/normalize.css";

@import "./typography";
@import "./colors";

// Reset the box-sizing
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before,
*:after {
  box-sizing: border-box;
}

html, #bshed {
  height: 100%;
}

// Not sure if I should be using this or not...
html {
  -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // font-size: @base-font-size;
  font-size: 10px;
}

body {
  height: 100%;
  color: @primary-text-color;
  background-color: @canvas-color;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  // font-size: @body-1-font-size;

  min-width: 400px;
  overflow-x: hidden;
  overflow-y: scroll;

  .body-1-font;
}

a {
  text-decoration: none;
}

Set weight to body font

@import (less)"~normalize.css/normalize.css";

@import "./typography";
@import "./colors";

// Reset the box-sizing
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before,
*:after {
  box-sizing: border-box;
}

html, #bshed {
  height: 100%;
}

// Not sure if I should be using this or not...
html {
  -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // font-size: @base-font-size;
  font-size: 10px;
}

body {
  height: 100%;
  color: @primary-text-color;
  background-color: @canvas-color;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 400;

  // font-size: @body-1-font-size;

  min-width: 400px;
  overflow-x: hidden;
  overflow-y: scroll;

  .body-1-font;
}

a {
  text-decoration: none;
}


/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*/

.markdown-preview {
	background-color: rgb(20,20,20);
	color: rgb(200,200,200);

	h1, h2, h3, h4, h5, h6 {
		color: rgb(220,220,220)
	}

	code, tt {
		border: 1px solid #101010;
		background-color: #202020;
		color: #a0a0a0
	}
}

.term2 {
	.terminal {
		font-size: 11px;
	}
}

Make indent guides in atom more subtle

/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*/

.markdown-preview {
	background-color: rgb(20,20,20);
	color: rgb(200,200,200);

	h1, h2, h3, h4, h5, h6 {
		color: rgb(220,220,220)
	}

	code, tt {
		border: 1px solid #101010;
		background-color: #202020;
		color: #a0a0a0
	}
}

.term2 {
	.terminal {
		font-size: 11px;
	}
}

.indent-guide-improved {
	background-color: rgb(50, 50, 50);
	&.indent-guide-stack {
		background-color: rgb(70, 70, 70);
		&.indent-guide-active {
			background-color: rgb(120, 120, 120);
		}
	}
}


.atom-yarn-output {
  pre {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 15px;
    height: 100%;
    font-size: @font-size;
    line-height: 1.5;
    white-space: normal;
    background-color: inherit;
  }
  .line {
    margin: 0 0 3px;
    white-space: pre;
  }
}

Enable horizontal scrolling in output pane

.atom-yarn-output {
  pre {
    overflow: scroll;
    padding: 15px;
    height: 100%;
    font-size: @font-size;
    line-height: 1.5;
    white-space: normal;
    background-color: inherit;
  }
  .line {
    margin: 0 0 3px;
    white-space: pre;
  }
}


@root-path: 'atom://fonts-cjk/resources';

.font(@name, @weight, @style, @file) {
  @font-path: '@{root-path}/@{file}';
  @font-face {
    font-family: @name;
    font-weight: @weight;
    font-style: @style;
    src: local(@name), url(@font-path);
  }
}

[data-fonts-cjk-editorFont] {
  atom-text-editor.editor {
    font-family: var(--fonts-cjk-editorFont);
  }
}

[data-fonts-cjk-markdownPreviewFont] {
  .markdown-preview {
    font-family: var(--fonts-cjk-markdownPreviewFont) !important;
  }
}

[data-fonts-cjk-workspaceFont] {
  atom-workspace,
  .settings-view,
  .github-Panel {
    font-family: var(--fonts-cjk-workspaceFont) !important;
  }
}

Use semicolon in LESS mixins

@root-path: 'atom://fonts-cjk/resources';

.font(@name; @weight; @style; @file) {
  @font-path: '@{root-path}/@{file}';
  @font-face {
    font-family: @name;
    font-weight: @weight;
    font-style: @style;
    src: local(@name), url(@font-path);
  }
}

[data-fonts-cjk-editorFont] {
  atom-text-editor.editor {
    font-family: var(--fonts-cjk-editorFont);
  }
}

[data-fonts-cjk-markdownPreviewFont] {
  .markdown-preview {
    font-family: var(--fonts-cjk-markdownPreviewFont) !important;
  }
}

[data-fonts-cjk-workspaceFont] {
  atom-workspace,
  .settings-view,
  .github-Panel {
    font-family: var(--fonts-cjk-workspaceFont) !important;
  }
}


@import "ui-variables";

// Status Bar --------------------

.tester-go-status-bar {
  color: @text-color-success;
  &:hover {
    color: lighten(@text-color-success, 15%);
  }

  &.test-status-unknown {
    color: @text-color-info;
  }

  &.test-status-pending {
    color: @text-color-warning;
  }

  &.test-status-success {
    color: @text-color-success;
  }

  &.test-status-fail {
    color: @text-color-error;
  }
}

// Panel --------------------

.tester-go-panel {

  .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .panel-button {
    color: inherit;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: default;

    &:hover {
      color: @text-color-highlight;
    }
    &:active {
      color: @text-color-subtle;
    }

    &:before {
      margin-right: 0;
    }
  }
}

Add max height + overflow scrolling

@import "ui-variables";

// Status Bar --------------------

.tester-go-status-bar {
  color: @text-color-success;
  &:hover {
    color: lighten(@text-color-success, 15%);
  }

  &.test-status-unknown {
    color: @text-color-info;
  }

  &.test-status-pending {
    color: @text-color-warning;
  }

  &.test-status-success {
    color: @text-color-success;
  }

  &.test-status-fail {
    color: @text-color-error;
  }
}

// Panel --------------------

.tester-go-panel {

  .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .panel-button {
    color: inherit;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: default;

    &:hover {
      color: @text-color-highlight;
    }
    &:active {
      color: @text-color-subtle;
    }

    &:before {
      margin-right: 0;
    }
  }

  .panel-body {
    max-height: 200px;
    overflow: auto;
  }
}


.qn-Input[type], // Fix for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  line-height: @scale-FontSize--05;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  margin: 0;

  &:focus {
    .focus();
    // Fixes for specificity issues.
    border-color: @color-Interactive--400;
  }
}

.qn-Input {

  &--disabled[type], // Fix for specificity issues.
  &[disabled][type], // Fix for specificity issues.
  fieldset[disabled] &[type], // Fix for specificity issues.
  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea[type], // Fix for specificity issues.
  &--textarea {
    line-height: 1.4;
    min-height: 10em;
  }
}

Set textarea line-height to scale ratio

.qn-Input[type], // Fix for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  line-height: @scale-FontSize--05;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  margin: 0;

  &:focus {
    .focus();
    // Fixes for specificity issues.
    border-color: @color-Interactive--400;
  }
}

.qn-Input {

  &--disabled[type], // Fix for specificity issues.
  &[disabled][type], // Fix for specificity issues.
  fieldset[disabled] &[type], // Fix for specificity issues.
  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea[type], // Fix for specificity issues.
  &--textarea {
    line-height: @scale-FontSize--20;
    min-height: 10em;
  }
}


/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/**
 * For information on how to skin uPortal
 * @see docs/SKINNING_UPORTAL.md
 */

/** DO NOT REMOVE OR ALTER THESE INCLUDES **/
@import "defaultSkin/less/variables.less";
@import "common/common.less";
@import "view/view.less"
/*******************************************/

@import "defaultSkin/less/skin.less";

Add missing semicolon to less import

/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/**
 * For information on how to skin uPortal
 * @see docs/SKINNING_UPORTAL.md
 */

/** DO NOT REMOVE OR ALTER THESE INCLUDES **/
@import "defaultSkin/less/variables.less";
@import "common/common.less";
@import "view/view.less";
/*******************************************/

@import "defaultSkin/less/skin.less";


body {
    padding-bottom: 50px;
}
.fa {
    width: 15px;
}
#donation-new {
    ol {
        background-color: #f5f5f5;
        padding-bottom: 10px;
        padding-top: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        border: 1px solid;
    }
    blockquote {
        font-size: 14px;
    }
}
h1 {
    background-color: #fedc00;
    padding: 1em;
    color: black;
}

Add style for status label

body {
    padding-bottom: 50px;
}
.fa {
    width: 15px;
}
#donation-new {
    ol {
        background-color: #f5f5f5;
        padding-bottom: 10px;
        padding-top: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        border: 1px solid;
    }
    blockquote {
        font-size: 14px;
    }
}
h1 {
    background-color: #fedc00;
    padding: 1em;
    color: black;
}
.status-accept {
    background-color: #87b87f;
}
.status-sent {
    background-color: #428bca;
}
.status-return {
    background-color: #d15b47;
}
.status-done {
    background-color: #ffb752;
}
.status-cancel {
    background-color: #abbac3;
}


/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * Uncomment the examples below to test or add your own CSS or Less.
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}

Add back link to the Less docs

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * Uncomment the examples below to try it out. Or add your own CSS or Less.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}


.umb-tree-root {
  border: 2px solid transparent;

  &-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 20px;
    color: @gray-2;
    height: @editorHeaderHeight;
  }

  h1 {
    font-size: 18.75px;
    font-weight: 600;
    margin: 0;
    width: 100%;
    display: flex;
  }

  .umb-options {
    align-self: center;
  }
}

Fix tree root font being larger than it used to be

.umb-tree-root {
  border: 2px solid transparent;

  &-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 20px;
    color: @gray-2;
    height: @editorHeaderHeight;
  }

  h1 {
    font-size: @baseFontSize;
    font-weight: 700;
    margin: 0;
    width: 100%;
    display: flex;
  }

  .umb-options {
    align-self: center;
  }
}


@import "syntax-variables";
.choose-pane {
  background-color: rgba(112,182,101,.1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: @syntax-text-color;
  font-size: 10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
  width: 100%;
  &::after {
    font-size: 14px;
  }
  &.active {
    background-color: rgba(0,0,0,0.5);
    color: fade(@syntax-text-color,50);
    &::after {
      content: 'Current Pane';
    }
  }
  &.last-focused {
    &::after {
      content: 'Last Focused';
    }
  }
}

#choose-pane-editor {
  background-color: inherit;
  border: none;
  width: 100%;
  height: 0px;
  font-weight: normal;
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
  &.is-focused {
    box-shadow: none;
  }
}

Remove current pane and last focused label

@import "syntax-variables";
.choose-pane {
  background-color: rgba(112,182,101,.1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: @syntax-text-color;
  font-size: 10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
  width: 100%;
  &::after {
    font-size: 14px;
  }
  &.active {
    background-color: rgba(0,0,0,0.5);
    color: fade(@syntax-text-color,50);
  }
  &.last-focused {
  }
}

#choose-pane-editor {
  background-color: inherit;
  border: none;
  width: 100%;
  height: 0px;
  font-weight: normal;
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
  &.is-focused {
    box-shadow: none;
  }
}


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

.evidence-vote-relevance {
  display: inline-block;
  width: @votePadding;
}

.comment-votes-container {
  display: table-cell;
  vertical-align: top;
}

.comment-votes {
  margin: 0 7px;
  margin-top: @votePadding;
  text-align: center;
}

.comment-votes.disabled {
  >.comment-vote-up,
  >.comment-vote-down {
    color: @grayLighter;
    &:hover {
      background: none;
    }
  }
}

.comment-vote-amount {
  display: inline-block;
  text-align: center;
  font-weight: 600;
}

.comment-vote-up,
.comment-vote-down {
  padding: 0px 1px 1px;
  font-size: 10px;
  display: inline-block;
  color: @grayLight;
  border-radius:4px;
  &:hover{
    color: @grayDark;
    background: @grayLighter;
  }
  &.evidence-active {
    background: @grayLighter;
    color: @grayDark;
  }
}

Change color of active up/down vote

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

.evidence-vote-relevance {
  display: inline-block;
  width: @votePadding;
}

.comment-votes-container {
  display: table-cell;
  vertical-align: top;
}

.comment-votes {
  margin: 0 7px;
  margin-top: @votePadding;
  text-align: center;
}

.comment-votes.disabled {
  >.comment-vote-up,
  >.comment-vote-down {
    color: @grayLighter;
    &:hover {
      background: none;
    }
  }
}

.comment-vote-amount {
  display: inline-block;
  text-align: center;
  font-weight: 600;
}

.comment-vote-up,
.comment-vote-down {
  padding: 0px 1px 1px;
  font-size: 10px;
  display: inline-block;
  color: @grayLight;
  border-radius:4px;
  &:hover{
    color: @grayDark;
    background: @grayLighter;
  }
  &.evidence-active {
    background: @grayLighter;
    color: @blue;
  }
}


@root-path: 'atom://fonts-cjk/resources';

.font-face (@name, @weight, @style, @file) {
  @font-path: '@{root-path}/@{file}';
  @font-face {
    font-family: @name;
    font-weight: @weight;
    font-style: @style;
    src: local(@name), url(@font-path);
  }
}

[data-fonts-cjk-editorFont] {
  atom-text-editor.editor {
    font-family: var(--fonts-cjk-editorFont);
  }
}

[data-fonts-cjk-markdownPreviewFont] {
  .markdown-preview {
    font-family: var(--fonts-cjk-markdownPreviewFont) !important;
  }
}

[data-fonts-cjk-workspaceFont] {
  atom-workspace,
  .settings-view,
  .github-Panel {
    font-family: var(--fonts-cjk-workspaceFont) !important;
  }
}

Add system default font as fallback

@root-path: 'atom://fonts-cjk/resources';

.font-face (@name, @weight, @style, @file) {
  @font-path: '@{root-path}/@{file}';
  @font-face {
    font-family: @name;
    font-weight: @weight;
    font-style: @style;
    src: local(@name), url(@font-path);
  }
}

[data-fonts-cjk-editorFont] {
  atom-text-editor.editor {
    font-family: var(--fonts-cjk-editorFont), monospace;
  }
}

[data-fonts-cjk-markdownPreviewFont] {
  .markdown-preview {
    font-family: var(--fonts-cjk-markdownPreviewFont), sans-serif !important;
  }
}

[data-fonts-cjk-workspaceFont] {
  atom-workspace,
  .settings-view,
  .github-Panel {
    font-family: var(--fonts-cjk-workspaceFont), sans-serif !important;
  }
}


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

@import 'codemirror';

body {
	color: #222;
}

textarea {
	width: 100%;
	height: 140px;
	font: 14px/18px Courier;
}

body {
	padding-top: 60px;
}

.container, .content {
/* 	border: 1px solid #eee; */
}

.buttons {
	margin-top: 10px;
}

.btn {
	margin-left: 6px;
}

.btn:first-of-type {
	margin-left: 0;
}

.buttons .status {
	color: #888;
	margin-left: 4px;
}

#content {
/* 	padding: 40px 0; */
/* 	color: blue; */
}

/*  Directory  */

#root ul {
	list-style-type: none;
}

.CodeMirror {
	border: 1px solid #888;
}

Add some padding-bottom to body

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

@import 'codemirror';

body {
	color: #222;
	padding-top: 60px;
	padding-bottom: 60px;
}

textarea {
	width: 100%;
	height: 140px;
	font: 14px/18px Courier;
}

.container, .content {
/* 	border: 1px solid #eee; */
}

.buttons {
	margin-top: 10px;
}

.btn {
	margin-left: 6px;
}

.btn:first-of-type {
	margin-left: 0;
}

.buttons .status {
	color: #888;
	margin-left: 4px;
}

#content {
/* 	padding: 40px 0; */
/* 	color: blue; */
}

/*  Directory  */

#root ul {
	list-style-type: none;
}

.CodeMirror {
	border: 1px solid #888;
}


.status-display {
  svg {
    height: 300px;
    width: 100%;

    .water {
      stroke: #1ca8dd;
      stroke-width: 3px;
      fill: none;
      opacity: .6;
    }

    .measurement {
      font-size: 11px;
      font-weight: bold;
      // fill: #a9aebd;
      fill: #333;
    }

    .aquarium,
    .sump {
      fill: none;
      stroke-width: 2px;
      stroke: #000;
    }

    .lights {
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #777;
      }
    }

    .pump {
      fill: none;
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #a94442;
      }
    }

    .aquarium-return,
    .sump-return {
      fill: none;
      stroke: #000;
    }

    .aquarium-return {
      stroke-width: 5px;
    }

    .sump-return {
      stroke-width: 3px;
    }
  }
}

Hide lights path when lights are off

.status-display {
  svg {
    height: 300px;
    width: 100%;

    .water {
      stroke: #1ca8dd;
      stroke-width: 3px;
      fill: none;
      opacity: .6;
    }

    .measurement {
      font-size: 11px;
      font-weight: bold;
      // fill: #a9aebd;
      fill: #333;
    }

    .aquarium,
    .sump {
      fill: none;
      stroke-width: 2px;
      stroke: #000;
    }

    .lights {
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: none;
      }
    }

    .pump {
      fill: none;
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #a94442;
      }
    }

    .aquarium-return,
    .sump-return {
      fill: none;
      stroke: #000;
    }

    .aquarium-return {
      stroke-width: 5px;
    }

    .sump-return {
      stroke-width: 3px;
    }
  }
}


.squatch-container-popup {
  .box-shadow(0 2px 4px rgba(0,0,0,.5));
  background: @white;
  height: 486px;
  overflow: hidden;

  &,
  #squatch-panel {
    background: @white;
  }

  // Box shadow alternative for lesser "browsers"
  html.lt-ie9 & {
    border: 1px solid @gray-lighter;
  }
}

.squatch-header-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: @blue;
  font-size: @font-size-xs;

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

.squatch-actions {
  .translate(0, 0);
  .transition-transform(.3s cubic-bezier(0,0,.58,1));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: @white;
  text-align: center;
  padding: 15px @body-padding 0;

  #squatch-panel.open + & {
    .translate(0, 81px);

    html.lt-ie9 & {
      display: none;
    }
  }
}

Disable mobile view on popups

.squatch-container-popup {
  .box-shadow(0 2px 4px rgba(0,0,0,.5));
  background: @white;
  height: 486px;
  overflow: hidden;

  // Disable responsive view on popup temporarily.
  // This is due to the popup being displayed inconsistently - with responsive styles activated, sometimes the mobile view will be displayed, even on a desktop monitor with more than 500 pixels width. The solution may be to set the iframe width to the full browser width, rather than the width of the widget theme.
  // TODO: Find a solution for this and enable responsive styles again.
  width: @container-width;

  &,
  #squatch-panel {
    background: @white;
  }

  // Box shadow alternative for lesser "browsers"
  html.lt-ie9 & {
    border: 1px solid @gray-lighter;
  }
}

.squatch-header-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: @blue;
  font-size: @font-size-xs;

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

.squatch-actions {
  .translate(0, 0);
  .transition-transform(.3s cubic-bezier(0,0,.58,1));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: @white;
  text-align: center;
  padding: 15px @body-padding 0;

  #squatch-panel.open + & {
    .translate(0, 81px);

    html.lt-ie9 & {
      display: none;
    }
  }
}


// Clearfix
.clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

Sort properties in clearfix mixin

// Clearfix
.clearfix() {
  &::after {
    display: table;
    clear: both;
    content: "";
  }
}


#shoutbox-content, #shoutbox-archive-content {
    font-size: 14px;
    height: 200px;
    overflow-y: scroll;
}

#shoutbox-archive-content {
    height: 300px;
}

#shoutbox-content p, #shoutbox-archive-content p {
    margin: 0;
}

.shoutbox-user.shoutbox-user-admin {
    color: red;
}

.shoutbox-user {
    font-weight: bold;
    color: inherit;
}

.shoutbox-user-image {
    display: none;
}

.shoutbox-timestamp {
    color: darkgrey;
}

#shoutbox .btn-group {
    margin-top: 5px;
}

.shoutbox-shout-option {
    font-size: inherit;
    color: inherit;
    opacity: 0.4;
    padding-left: 2px!important;
}

#shoutbox-settings-menu span {
    width: 15px;
}

.shoutbox-admin {
  &-feature {
    opacity: 1;
    transition: opacity 0.3s;
    &.disabled {
      opacity: 0.5;
    }

    & .feature-icon {
      opacity: 0.8;
    }
  }
}

Reorder the styling a bit, enabling avatars for now

#shoutbox {
  &-content, &-archive-content {
    font-size: 14px;
    height: 200px;
    overflow-y: scroll;

    & p {
      margin: 0;
    }
  }

  &-settings-menu span {
    width: 15px;
  }

  & .btn-group {
    margin-top: 5px;
  }
}

.shoutbox {
  &-user {
    font-weight: bold;
    color: inherit;

    &.shoutbox-user-admin {
      color: red;
    }

    &-image {
      .img-circle();
      width: 15px;
      margin-right: 3px;
      //display: none;
    }
  }

  &-shout-option {
    font-size: inherit;
    color: inherit;
    opacity: 0.4;
    padding-left: 2px!important;
  }

  &-timestamp {
    color: darkgrey;
  }

  &-archive-content {
    height: 300px;
  }
}

.shoutbox-admin {
  &-feature {
    opacity: 1;
    transition: opacity 0.3s;
    &.disabled {
      opacity: 0.5;
    }

    & .feature-icon {
      opacity: 0.8;
    }
  }
}


@brand-success:             #47d165;
@brand-info:                #11bef6;
@brand-warning:             #ff754b;
@brand-danger:              #ff3160;

.has-danger {
    .redactor-editor {
        border-color: @brand-danger;
    }
}

.has-success {
    .redactor-editor {
        border-color: @brand-success;
    }
}

.has-info {
    .redactor-editor {
        border-color: @brand-info;
    }
}

.has-warning {
    .redactor-editor {
        border-color: @brand-warning;
    }
}

Correct error / context outlines

@brand-success:             #47d165;
@brand-info:                #11bef6;
@brand-warning:             #ff754b;
@brand-danger:              #ff3160;

.has-danger {
    .redactor-box {
        border: 1px solid @brand-danger;
    }
}

.has-success {
    .redactor-box {
        border: 1px solid @brand-success;
    }
}

.has-info {
    .redactor-box {
        border: 1px solid @brand-info;
    }
}

.has-warning {
    .redactor-box {
        border: 1px solid @brand-warning;
    }
}


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

/* stylelint-disable no-descending-specificity */
.mw-echo-ui-menuItemWidget {
	&:hover {
		text-decoration: none;
	}

	> .oo-ui-labelElement-label {
		// Override link colour
		color: @color-base;
		// Set max-width so buttons are truncated
		max-width: 25em;
	}

	&-prioritized {
		.mw-echo-ui-mixin-hover-opacity();
		display: inline-block;
		// Remove left padding up to icon, 11/14
		margin-left: -0.78571429em;
	}

	&-dynamic-action {
		&:hover {
			background-color: @background-color-base;
		}

		> .oo-ui-labelElement-label {
			white-space: normal;
			overflow: visible;
		}

		&.oo-ui-iconElement > .oo-ui-iconElement-icon {
			// Limit to single line height, 32/14
			height: 2.28571em;
		}

		.mw-echo-ui-menuItemWidget-description {
			color: #54595d;
			display: block;
			padding-top: 1em;
		}
	}

	.mw-echo-ui-actionMenuPopupWidget-menu:hover {
		background-color: #eaecf0;
	}
}

Remove light background from dynamic-action hover state

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

/* stylelint-disable no-descending-specificity */
.mw-echo-ui-menuItemWidget {
	&:hover {
		text-decoration: none;
	}

	> .oo-ui-labelElement-label {
		// Override link colour
		color: @color-base;
		// Set max-width so buttons are truncated
		max-width: 25em;
	}

	&-prioritized {
		.mw-echo-ui-mixin-hover-opacity();
		display: inline-block;
		// Remove left padding up to icon, 11/14
		margin-left: -0.78571429em;
	}

	&-dynamic-action {
		> .oo-ui-labelElement-label {
			white-space: normal;
			overflow: visible;
		}

		&.oo-ui-iconElement > .oo-ui-iconElement-icon {
			// Limit to single line height, 32/14
			height: 2.28571em;
		}

		.mw-echo-ui-menuItemWidget-description {
			color: #54595d;
			display: block;
			padding-top: 1em;
		}
	}

	.mw-echo-ui-actionMenuPopupWidget-menu:hover {
		background-color: #eaecf0;
	}
}


@import 'variables/ui-variables';
@import 'ui-variables';

.ignore-in-parent-frame {

  html, body {
    font-family: "Nylas-FaktPro", "Helvetica", "Lucidia Grande", sans-serif;
    font-size: 16px;
    line-height: 1.5;

    color: @text-color;
    background-color: transparent !important;
    border: 0;
    margin: 0;
    padding: 0;

    -webkit-text-size-adjust: auto;
    word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;
  }

  strong, b, .bold {
    font-weight: 600;
  }

  body {
    padding: 0;
    margin: auto;
    max-width: 840px;
    overflow-y: hidden;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
  }

  pre {
    white-space: normal;
  }

  a {
    color: @text-color-link;
  }

  a:hover {
    color: @text-color-link-hover;
  }

  a:visited {
    color: darken(@text-color-link, 10%);
  }
  a img {
    border-bottom: 0;
  }

  body.heightDetermined {
    overflow-y: hidden;
  }

  div,pre {
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    border: 0;
  }

}

Remove img height:auto; causing images to stretch based on their intrinsic size

@import 'variables/ui-variables';
@import 'ui-variables';

.ignore-in-parent-frame {

  html, body {
    font-family: "Nylas-FaktPro", "Helvetica", "Lucidia Grande", sans-serif;
    font-size: 16px;
    line-height: 1.5;

    color: @text-color;
    background-color: transparent !important;
    border: 0;
    margin: 0;
    padding: 0;

    -webkit-text-size-adjust: auto;
    word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;
  }

  strong, b, .bold {
    font-weight: 600;
  }

  body {
    padding: 0;
    margin: auto;
    max-width: 840px;
    overflow-y: hidden;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
  }

  pre {
    white-space: normal;
  }

  a {
    color: @text-color-link;
  }

  a:hover {
    color: @text-color-link-hover;
  }

  a:visited {
    color: darken(@text-color-link, 10%);
  }
  a img {
    border-bottom: 0;
  }

  body.heightDetermined {
    overflow-y: hidden;
  }

  div,pre {
    max-width: 100%;
  }

  img {
    max-width: 100%;
    border: 0;
  }

}


div.needs-list {
  div.need {
    position: relative;
    list-style: none;
    margin-bottom: 10px;
    border-radius: 4px;

    div.welcomeCard {
      text-align: center;
    }
    form.respond {
      display: none;
    }
  }
}

div.panel {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 4px 4px 20px #DDD;
  textarea {
    width: 95%;
  }
  .panel-footer {
    background-color: #fff;
    a:hover {
      text-decoration: none;
    }
  }
  i {
    font-size: 130%;
    padding-right: 5px;
  }
}
.newNeed {
  p.red {
    color: red;
  }
  textarea {
    height: 80px;
  }
}

a.need-content {
  text-decoration: none;
  color: #333;
  display: block;
  min-height: 100px;
}

.needListing .panel {
  height: 160px;
  position: relative;
  .panel-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
}

Fix responsive display of need

div.needs-list {
  div.need {
    position: relative;
    list-style: none;
    margin-bottom: 10px;
    border-radius: 4px;

    div.welcomeCard {
      text-align: center;
    }
    form.respond {
      display: none;
    }
  }
}

div.panel {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 4px 4px 20px #DDD;
  textarea {
    width: 95%;
  }
  .panel-footer {
    background-color: #fff;
    a:hover {
      text-decoration: none;
    }
  }
  i {
    font-size: 130%;
    padding-right: 5px;
  }
}
.newNeed {
  p.red {
    color: red;
  }
  textarea {
    height: 80px;
  }
}

a.need-content {
  text-decoration: none;
  color: #333;
  display: block;
  min-height: 100px;
}

.needListing .panel {
  height: 150px;
  position: relative;
  .panel-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
  @media (max-width: 1197px) {
    height: 170px;
  }
  @media (max-width: 992px) {
    height: 120px;
  }
  @media (max-width: 600px) {
    height: 150px;
  }
}


// Some measurements and sizes

@grid-unit:8px;
@font-unit:4px;
@root-font-size:3 * @font-unit;

@row:4rem;
@column:8rem;
@row-pad:.75rem;
@column-pad:.75rem;

@small-text:.75rem;
@normal-text:1rem;
@medium-text:1.25rem;
@large-text:1.5rem;
@huge-text:2rem;

@thin-border:1px;
@medium-border:(1rem / 4);
@thick-border:(1rem / 3);

@button-width:(@root-font-size * 3);

Change font size a bit; Rows are now 56px

// Some measurements and sizes

/*@grid-unit:8px;*/
/*@font-unit:4px;*/
@root-font-size:14px;

@row:4rem;
@column:2 * @row;
@row-pad:.75rem;
@column-pad:.75rem;

@small-text:.75rem;
@normal-text:1rem;
@medium-text:1.25rem;
@large-text:1.5rem;
@huge-text:2rem;

@thin-border:1px;
@medium-border:(1rem / 4);
@thick-border:(1rem / 3);

@button-width:(@root-font-size * 3);


html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

// Alignment
.text-left		{ text-align: left !important; }
.text-center	{ text-align: center !important; }
.text-right		{ text-align: right !important; }
.pull-left    { float: left !important; }
.pull-right    { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }

.clearfix {
	.clearfix;
}

Add text-hide, hide, show, and invisible.

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

// Alignment
.text-left		{ text-align: left !important; }
.text-center	{ text-align: center !important; }
.text-right		{ text-align: right !important; }
.text-hide		{ font: 0/0 a; color: transparent; text-shadow: none;}

.pull-left    	{ float: left !important; }
.pull-right    	{ float: right !important; }
.center-block 	{ display: block; margin-left: auto; margin-right: auto; }

.hide	 		{ display: none !important; }
.show	 		{ display: block !important; }
.invisible 		{ visibility: hidden; }

.clearfix {
	.clearfix;
}


notification-center {
  position: fixed;
  right: 0;
  width: 500px;
  max-width: ~'calc(100% - 53px)';
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #6EADC1;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25);
  z-index: 100;

  .kuiEventBody__message {
    p:last-child {
      margin: 0;
    };
  };

  .notification-stack {
    &:last-child {
      padding-bottom: 0;
    };

    pre {
      margin: 0;
    };
  };
};

Fix overflow works to scroll

notification-center {
  position: fixed;
  right: 0;
  width: 500px;
  max-width: ~'calc(100% - 53px)';
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #6EADC1;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25);
  overflow-y: scroll;
  z-index: 100;

  .kuiEventBody__message {
    p:last-child {
      margin: 0;
    };
  };

  .notification-stack {
    &:last-child {
      padding-bottom: 0;
    };

    pre {
      margin: 0;
    };
  };
};


@import "bootstrap/mixins";

.auto-complete-input-container {
  background: white;
  border: 1px solid #ccc;
  .box-sizing(border-box);
  color: @baseFontColor;
  line-height: 18px;
  padding: 7px 9px 5px;
  position: relative;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 3px, 0.10);

  input.typeahead {
    padding: 5px;
    margin: -5px;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
  }

  a.button {
    display: none;
    float: right;
  }
}

.auto-complete {
  .auto-complete-loading-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
  }

  &.auto-complete-loading .auto-complete-loading-indicator {
    display: inline-block;
  }
}

.auto-complete {
  margin-bottom: 10px;

  &.disabled {
    .auto-complete-input-container {
      background-color: #eee;
      border-color: #ddd;
      cursor: not-allowed;
    }
  }

  &.hide-input .auto-complete-input-container {
    display: none;
  }
}

Use new design font also in auto complete input

@import "bootstrap/mixins";

.auto-complete-input-container {
  background: white;
  border: 1px solid #ccc;
  .box-sizing(border-box);
  color: @baseFontColor;
  line-height: 18px;
  padding: 7px 9px 5px;
  position: relative;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 3px, 0.10);

  input.typeahead {
    padding: 5px;
    margin: -5px;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    .new-design-font();
    font-weight: normal;
  }

  a.button {
    display: none;
    float: right;
  }
}

.auto-complete {
  .auto-complete-loading-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
  }

  &.auto-complete-loading .auto-complete-loading-indicator {
    display: inline-block;
  }
}

.auto-complete {
  margin-bottom: 10px;

  &.disabled {
    .auto-complete-input-container {
      background-color: #eee;
      border-color: #ddd;
      cursor: not-allowed;
    }
  }

  &.hide-input .auto-complete-input-container {
    display: none;
  }
}


.qn-App {
  .textShadow();
  border: 0.1em solid @color-Border;
  color: @color-Text--900;
  line-height: 1;
  margin: 5%;

  ::selection {
    background-color: @color-Interactive--150;
  }

  &-error {
    border-top: unit(1/16, em) solid @color-Border;
    padding: 0 1em;
  }

  &-empty {
    background-color: @color-Base--150;
    margin: 0;
    padding: 1em 0;
    text-align: center;
  }

  &-body {
    border-top: unit(1/16, em) solid @color-Border;
    display: flex;
  }

  &-nav {
    min-width: 12em;
  }

  &-content {
    border-left: unit(1/16, em) solid @color-Border;
    flex: 1;
    max-width: 40em;
  }
}

Fix value used for border width

.qn-App {
  .textShadow();
  border: unit(1/16, em) solid @color-Border;
  color: @color-Text--900;
  line-height: 1;
  margin: 5%;

  ::selection {
    background-color: @color-Interactive--150;
  }

  &-error {
    border-top: unit(1/16, em) solid @color-Border;
    padding: 0 1em;
  }

  &-empty {
    background-color: @color-Base--150;
    margin: 0;
    padding: 1em 0;
    text-align: center;
  }

  &-body {
    border-top: unit(1/16, em) solid @color-Border;
    display: flex;
  }

  &-nav {
    min-width: 12em;
  }

  &-content {
    border-left: unit(1/16, em) solid @color-Border;
    flex: 1;
    max-width: 40em;
  }
}


.apos-login-page
{
  background-color: @apos-primary;
}

.apos-login.apos-ui
{
  margin: 0 auto;
  max-width: 300px;
  background-color: @apos-light;
  padding: @apos-padding-2;
  .apos-drop-shadow;

  .apos-login-title
  {
    margin-bottom: @apos-margin-2;
  }

  .apos-field-input
  {
    background-color: @apos-white;
  }

  .apos-login-submit .apos-button
  {
    width: 100%;
  }
}

Add margin top to login page style

.apos-login-page
{
  background-color: @apos-primary;
  .apos-refreshable { margin-top: 100px; }
}

.apos-login.apos-ui
{
  margin: 0 auto;
  max-width: 300px;
  background-color: @apos-light;
  padding: @apos-padding-2;
  .apos-drop-shadow;

  .apos-login-title
  {
    margin-bottom: @apos-margin-2;
  }

  .apos-field-input
  {
    background-color: @apos-white;
  }

  .apos-login-submit .apos-button
  {
    width: 100%;
  }
}


@import "twitter/bootstrap/variables";

// Links
@linkColor:                       #5e8ba6;
@linkColorHover:                  darken(@linkColor, 15);

@whiteDarker:                     #FBFAFA;
@lightYellow:                     #ffffe1;

@navbarBackground:                white;
@navbarBackgroundHighlight:       @grayLighter;

Make lightDark a little bit darker (so you can see it on Samsung screens)

@import "twitter/bootstrap/variables";

// Links
@linkColor:                       #5e8ba6;
@linkColorHover:                  darken(@linkColor, 15);

@whiteDarker:                     #F4F4F4;
@lightYellow:                     #ffffe1;

@navbarBackground:                white;
@navbarBackgroundHighlight:       @grayLighter;


@import 'layertree.less';

nav.nav-left .gmf-layertree-node a[data-toggle] {
  //override rule: nav.nav-left a[data-toggle] padding-right: 4rem
  padding-right: 0;
}

.gmf-layertree-node {
  .sortable-handle {
    display: none;
  }
  .extra-actions {
    display: none;
  }
}

Add a separator above the layer tree

@import 'layertree.less';

gmf-layertree {
  border-top: 1px solid @back-color;
}

nav.nav-left .gmf-layertree-node a[data-toggle] {
  //override rule: nav.nav-left a[data-toggle] padding-right: 4rem
  padding-right: 0;
}

.gmf-layertree-node {
  .sortable-handle {
    display: none;
  }
  .extra-actions {
    display: none;
  }
}


@import "ui-variables";

dafny-workbench-status {
  .dafny-status {
    margin-top: 1px;
  }
  .dafny-status.running {
    color: @text-color-info;
    cursor: wait;
    margin-bottom: 5px;
    vertical-align: middle;
  }
  .dafny-status.stopped {
    color: @text-color-warning;
  }
  .dafny-status.no-attempt {
    color: @text-color-warning;
  }
  .dafny-status.successful {
    color: @text-color-success;
  }
  .dafny-status.unsuccessful {
    color: @text-color-error;
  }
}

Remove unnecessary class name duplication

@import "ui-variables";

dafny-workbench-status {
  .dafny-status {
    margin-top: 1px;
    &.running {
      color: @text-color-info;
      cursor: wait;
      margin-bottom: 5px;
      vertical-align: middle;
    }
    &.stopped {
      color: @text-color-warning;
    }
    &.no-attempt {
      color: @text-color-warning;
    }
    &.successful {
      color: @text-color-success;
    }
    &.unsuccessful {
      color: @text-color-error;
    }
  }
}


// InteractionDesignAndEvaluation.less

@import (less) '../../components/Header/HeaderWithWhiteText.less';
@import (less) '../../components/Footer/FooterForColorFulPage.less';

@backgroundColor: #353535;

header .NavigationBar,
.Header .NavigationBar,
.InteractionDesignAndEvaluation {
  background-color: @backgroundColor;
}

header,
.Header {
  .NavigationBar {
    border-bottom: 1px solid @backgroundColor;
  }
}

.InteractionDesignAndEvaluation {
  color: white;

  h2 {
    color: #e3e3e3; // #cfcfcf;
  }

  .InfoBox {
    h3 {
      color: #cfcfcf;
    }

    p {
      color: #8e8e8e !important; // #494949;
    }
  }
}

Remove custom styles from IDE project page

// InteractionDesignAndEvaluation.less

.InteractionDesignAndEvaluation {

}


.font-face(ProximaNova300, ProximaNova, 300);
.font-face(ProximaNova400, ProximaNova, 400);
.font-face(ProximaNova700, ProximaNova, 700);

.font-face(Roboto-Light, Roboto, 300); // Light
.font-face(Roboto-Regular, Roboto, 400); // Normal
.font-face(Roboto-Medium, Roboto, 500); // Medium
.font-face(Roboto-Bold, Roboto, 700); // Bold

.font-face(RobotoMonoThin, RobotoMono, Light);
.font-face(RobotoMonoRegular, RobotoMono, Regular);
.font-face(RobotoMonoBold, RobotoMono, Bold);

Fix Roboto Mono font weights

.font-face(ProximaNova300, ProximaNova, 300);
.font-face(ProximaNova400, ProximaNova, 400);
.font-face(ProximaNova700, ProximaNova, 700);

.font-face(Roboto-Light, Roboto, 300); // Light
.font-face(Roboto-Regular, Roboto, 400); // Normal
.font-face(Roboto-Medium, Roboto, 500); // Medium
.font-face(Roboto-Bold, Roboto, 700); // Bold

.font-face(RobotoMonoRegular, RobotoMono, 400);
.font-face(RobotoMonoMedium, RobotoMono, 500);
.font-face(RobotoMonoBold, RobotoMono, 700);


@import (reference) "gradient";

.splitbar() {
  @border: darken(@pane-background, 10%);

  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    background: @border;
    left: 10px;
    top: 0;
  }
}

.ui-resizable-handle.ui-resizable-e {
  width: 20px;
  right: -10px;
}
.ui-resizable-handle.ui-resizable-w {
  width: 20px;
  left: -10px;
}

Fix scrollbar not accesible in search results because of pane resizer

@import (reference) "gradient";

.splitbar() {
  @border: darken(@pane-background, 10%);

  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    background: @border;
    top: 0;
  }
}

.ui-resizable-handle.ui-resizable-e {
  width: 10px;
  right: -8px;
  &:before {
    left: 2px;
  }
}
.ui-resizable-handle.ui-resizable-w {
  width: 20px;
  left: -10px;
  &:before {
    left: 10px;
  }
}


@import (reference) "../include/colortheme-all.less";
@import (reference) "../include/font.less";

html, body {
    .font_main();
    margin: 0px;
    padding: 0px;
    background-color: @cp_static-bg;
    color: @cryptpad_text_col;
    font-family: "IBM Plex Mono";
    #cp-main {

        height: 100vh;
        margin: 0px;
        width: 100%;
        padding-top: 5%;
        text-align: center;
        #cp-logo {
            display: block;
            max-width: 15%;
            margin: auto;
        }
        #cp-brand {
            font-size: 40px;
        }
        #cp-title {
            font-size: 30px;
        }
        #cp-scramble, #cp-link {
            font-size: 20px;
        }
        #cp-link {
            color: @cryptpad_color_link;
        }
    }
}

Add XXX about 404 background

@import (reference) "../include/colortheme-all.less";
@import (reference) "../include/font.less";

html, body {
    .font_main();
    margin: 0px;
    padding: 0px;
    background-color: @cp_static-bg; // XXX doesn't get applied
    color: @cryptpad_text_col;
    font-family: "IBM Plex Mono";
    #cp-main {

        height: 100vh;
        margin: 0px;
        width: 100%;
        padding-top: 5%;
        text-align: center;
        #cp-logo {
            display: block;
            max-width: 15%;
            margin: auto;
        }
        #cp-brand {
            font-size: 40px;
        }
        #cp-title {
            font-size: 30px;
        }
        #cp-scramble, #cp-link {
            font-size: 20px;
        }
        #cp-link {
            color: @cryptpad_color_link;
        }
    }
}


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

#new_session {
  position: relative;
  margin: 5px;
  width: 400px;

  img {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 95px;
    height: 20px;
  }

  form {
    fieldset {
      color: #555;
      font-size: 13px;
      padding: 5px 0 20px;
      display: block;
    }

    input[type=password], input[type=text] {
      width: 98%;
    }

    .split {
      div {
        float: left;
        width: 50%;

        label {
          display: inline-block;
        }

        &.second {
          text-align: right;
        }
      }
    }

    div.inputs {
      text-align: right;
    }
  }
}

Add centering of login screen in modal

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

.factlink-site #new_session img { display: none; }

#new_session {
  position: relative;
  margin: 24px 0;

  margin-left: 78px;
  width: 400px;

  img {
    position: absolute;
    top: 10px;
    right: 0px;
    height: 16px;
  }

  form {
    fieldset {
      color: #555;
      font-size: 13px;
      padding: 5px 0 20px;
      display: block;
    }

    input[type=password], input[type=text] {
      width: 98%;
    }

    .split {
      div {
        float: left;
        width: 50%;

        label {
          display: inline-block;
        }

        &.second {
          text-align: right;
        }
      }
    }

    div.inputs {
      text-align: right;
    }
  }
}


@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

Fix multi-line wrapping with css

@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}


// The code reads the (bloom-visibility-template-langs + collection langs + multlingual settings)
// and set this if it determines that this would normally be visible:
// Note that these two rules are overridden to produce display:flex when we are dealing
// with non-default vertical alignment.
.bloom-editable.bloom-visibility-code-on {
    // The main point of this rule is to override a display:none
    // and make the div visible. Display:flex is needed for
    // possible vertical alignment.
    display: block;
}
//If not the user can still make it visible:
.bloom-editable.bloom-visibility-user-on {
    display: block;
}
//And the user can alwyas hide it
.bloom-editable.bloom-visibility-user-off {
    display: none !important;
}

// To achieve vertical alignment, the visibility-on rules have to use display:flex
// instead of display:block to override display:none.
// It would be simpler to just use display:flex always,
// but a bug in Firefox causes bizarre behavior of up and down arrow keys in
// paragraphs inside display:flex blocks, and we want to limit this to the unusual cases.
// See BL-4781 and BL-5217
.bloom-vertical-align-center,
.bloom-vertical-align-bottom {
    .bloom-editable.bloom-visibility-code-on {
        display: flex;
    }
    .bloom-editable.bloom-visibility-user-on {
        display: flex;
    }
}

Allow vertical arrow keys when textbox is center or bottom aligned

// The code reads the (bloom-visibility-template-langs + collection langs + multlingual settings)
// and set this if it determines that this would normally be visible:
// Note that these two rules are overridden to produce display:flex when we are dealing
// with non-default vertical alignment.
.bloom-editable.bloom-visibility-code-on {
    // The main point of this rule is to override a display:none
    // and make the div visible. Display:flex is needed for
    // possible vertical alignment.
    display: block;
}
//If not the user can still make it visible:
.bloom-editable.bloom-visibility-user-on {
    display: block;
}
//And the user can alwyas hide it
.bloom-editable.bloom-visibility-user-off {
    display: none !important;
}

// To achieve vertical alignment, the visibility-on rules have to use display:flex
// instead of display:block to override display:none.
// It would be simpler to just use display:flex always,
// but a bug in Firefox causes bizarre behavior of up and down arrow keys in
// paragraphs inside display:flex blocks, and we want to limit this to the unusual cases.
// See BL-4781 and BL-5217
// UPDATE for 4.7: we can work around this by switching to display:table. See BL-8000
.bloom-vertical-align-center,
.bloom-vertical-align-bottom {
    .bloom-editable.bloom-visibility-code-on,
    .bloom-editable.bloom-visibility-user-on {
        display: table;
    }
}


label,
input {
    display: block;
}

input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    box-shadow: none;

    font-size: inherit;
    font-weight: 400;

    background: @white;
    border: 1px solid @lightGrey;
    border-radius: 0px;
}

label {
    padding: 0 10px;
    font-size: 14px;
    color: @darkGrey;
    margin-bottom: 5px;
}

.form-group {
    padding: 14px;
    margin-bottom: 4px;
}

form .form-group:last-of-type {
    margin-bottom: 0;
}

Trim margin on form groups

label,
input {
    display: block;
}

input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    box-shadow: none;

    font-size: inherit;
    font-weight: 400;

    background: @white;
    border: 1px solid @lightGrey;
    border-radius: 0px;
}

label {
    padding: 0 10px;
    font-size: 14px;
    color: @darkGrey;
    margin-bottom: 5px;
}

.form-group {
    padding: 14px;
    margin: 0;
}

form .form-group:last-of-type {
    margin-bottom: 0;
}


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

.page-extra-tabs {
  position: sticky;
  top: @navbar-height;
  z-index: @z-index--page-extra-tabs;

  @media @desktop {
    top: @nav2-height--pinned;
  }
}

Fix gap on profile page nav header on Chrome

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

.page-extra-tabs {
  position: sticky;
  --navbar-height: @navbar-height;
  // 1px overlap with navbar to prevent possible gap in some cases.
  // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=1261852
  top: calc(var(--navbar-height) - 1px);
  z-index: @z-index--page-extra-tabs;

  @media @desktop {
    --navbar-height: @nav2-height--pinned;
  }
}


.mw-echo-ui-notificationsWidget {
	&-loadingOption {
		padding: 2em;
	}
}

Add a border between the popup head and notification list

.mw-echo-ui-notificationsWidget {
	border-top: 1px solid #DDDDDD;
	&-loadingOption {
		padding: 2em;
	}
}


#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: -32px;
    }

    #blocks div {
        border: 1px dashed @highlight;
        margin: 10px 0;
    }
}

Fix rendering on blocks in edit mode

#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: -32px;

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


@font-awesome: "../vendor/font-awesome-4.2.0/less";

@import "@{font-awesome}/variables.less";
@fa-css-prefix: bk-fa;
@import "@{font-awesome}/mixins.less";
@import "@{font-awesome}/path.less";
@import "@{font-awesome}/core.less";
@import "@{font-awesome}/larger.less";
@import "@{font-awesome}/fixed-width.less";
@import "@{font-awesome}/list.less";
@import "@{font-awesome}/bordered-pulled.less";
@import "@{font-awesome}/spinning.less";
@import "@{font-awesome}/rotated-flipped.less";
@import "@{font-awesome}/stacked.less";
@import "@{font-awesome}/icons.less";

Make icons work on the server (no static pages yet)

@font-awesome: "../vendor/font-awesome-4.2.0/less";

@import "@{font-awesome}/variables.less";
@fa-css-prefix: bk-fa;
@fa-font-path:  "/bokehjs/static/js/vendor/font-awesome-4.2.0/fonts";
@import "@{font-awesome}/mixins.less";
@import "@{font-awesome}/path.less";
@import "@{font-awesome}/core.less";
@import "@{font-awesome}/larger.less";
@import "@{font-awesome}/fixed-width.less";
@import "@{font-awesome}/list.less";
@import "@{font-awesome}/bordered-pulled.less";
@import "@{font-awesome}/spinning.less";
@import "@{font-awesome}/rotated-flipped.less";
@import "@{font-awesome}/stacked.less";
@import "@{font-awesome}/icons.less";


.sidebar {
  .make-sm-column(@sidebar-sm-columns);

  .widget {
    margin-bottom: 30px;

    h4 {
      margin: 0 0 15px 0;
      padding: 10px 15px;
      color: #fff;
      background-color: @brand-primary;
    }
  }

  .widget_text {
    .textwidget {
      padding: 0 15px;
    }

    .author-image {
      padding-right: 15px;
    }

    .author-name {
      margin-top: 0;
      font-size: @font-size-large;
    }

    .author-profile {
      overflow: hidden;
    }
  }

  .widget_categories {
    ul {
      padding: 0 15px;
      list-style-type: none;
    }
  }
}

Change the author image as wrapping text around

.sidebar {
  .make-sm-column(@sidebar-sm-columns);

  .widget {
    margin-bottom: 30px;

    h4 {
      margin: 0 0 15px 0;
      padding: 10px 15px;
      color: #fff;
      background-color: @brand-primary;
    }
  }

  .widget_text {
    .textwidget {
      padding: 0 15px;
    }

    .author-image {
      padding-right: 15px;
    }

    .author-name {
      margin-top: 0;
      font-size: @font-size-large;
    }

    @media (max-width: @screen-xs-max), (min-width: @screen-md-min) {
      .author-profile {
        overflow: hidden;
      }
    }
  }

  .widget_categories {
    ul {
      padding: 0 15px;
      list-style-type: none;
    }
  }
}