/**
 *    Copyright 2015 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/>.
 *
 */
.osu-nav {
  &__menu {
    list-style: none;
    margin: 0 (-@spacing / 2);
    padding: 0;
    display: flex;
  }

  &__link {
    padding: 0 (@spacing / 2);
    font-size: 14px;

    &--active {
      font-weight: 700;
    }

    &--large {
      font-size: 22px;
    }

    &--title {
      &::after {
        content: '›';
        margin-left: @spacing;
      }
    }
  }

  &__title-menu {
    position: absolute;
    left: (-@spacing / 2);
    top: 0;
    width: 100%;
    display: flex;
  }
}

Fix alignment to username on the right side as well

/**
 *    Copyright 2015 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/>.
 *
 */
.osu-nav {
  &__menu {
    list-style: none;
    margin: 0 (-@spacing / 2);
    padding: 0;
    display: flex;
  }

  &__link {
    padding: 0 (@spacing / 2);
    font-size: 14px;

    &--active {
      font-weight: 700;
    }

    &--large {
      font-size: 22px;
    }

    &--title {
      &::after {
        content: '›';
        margin-left: @spacing;
      }
    }
  }

  &__title-menu {
    position: absolute;
    left: (-@spacing / 2);
    top: (@spacing / 2);
    width: 100%;
    display: flex;
  }
}


.reference-book {
  .toc {
    max-height: 100%;
    overflow-y: scroll;
    a {
      #fonts > .sans();
      color: @tutor-black;
        display: block;
        &:hover {
          background-color: @tutor-neutral-bright;
          text-decoration: initial;
        }
        &.active {
          background-color: @tutor-neutral-light;
          text-decoration: initial;
        }
    }
    li {
      list-style-type: none;
      #fonts > .sans(1.3rem);
      border-top: 1px dotted @tutor-neutral;
      a {
        color: @tutor-black;
        padding: 5px;
      }
    }
    ul { padding-left: 0rem; }

    ul[data-depth='1'] a{
      #fonts > .sans(1.5rem);
      padding-left: 1rem;
    }
    ul[data-depth='2'] a{
      #fonts > .sans(1.4rem);
      padding-left: 2rem;
    }
    ul[data-depth='3'] a{
      #fonts > .sans(1.3rem);
      padding-left: 3rem;
    }
    ul[data-depth='4'] a{
      #fonts > .sans(1.2rem);
      padding-left: 4rem;
    }
  }
  .content {
    .toc {
      li { list-style-type: none; }
    }
  }
}

Use looping mixin for stying the TOC levels

.reference-book {
  .toc-indented-levels(@depth) when (@depth > 0) {
    .toc-indented-levels((@depth - 1));
    ul[data-depth='@{depth}'] a{
      #fonts > .sans( unit((1.6 - (@depth / 10)),rem) );
      padding-left: unit(@depth, rem);
    }
  }
  .toc {
    max-height: 100%;
    overflow-y: scroll;
    a {
      #fonts > .sans();
      color: @tutor-black;
        display: block;
        &:hover {
          background-color: @tutor-neutral-bright;
          text-decoration: initial;
        }
        &.active {
          background-color: @tutor-neutral-light;
          text-decoration: initial;
        }
    }
    li {
      list-style-type: none;
      #fonts > .sans(1.3rem);
      border-top: 1px dotted @tutor-neutral;
      a {
        color: @tutor-black;
        padding: 5px;
      }
    }
    ul { padding-left: 0rem; }
    .toc-indented-levels(4);
  }
  .content {
    .toc {
      li { list-style-type: none; }
    }
  }
}


@import "shared/colors.less";

#my-face {
  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border: 2px @black solid;
  background-color: @black;
  box-shadow: 0 0 0 0.5em @primary-darker;

  margin-bottom: 1rem;
}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}

Fix border color for face

@import "shared/colors.less";

#my-face {
  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border: 2px @black solid;
  background-color: @black;
  box-shadow: 0 0 0 0.5em @primary-dark;

  margin-bottom: 1rem;
}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}


.graph-canvas {
  width: 100%;
  height: 100%;

  & > .graph {
    width: 100%;
    height: 100%;
    // position: relative;
  }

  ol.breadcrumbs {
    height: 35px;
    line-height: 35px;
    margin: 0;

    list-style: none;
    background-color: #f2f2f2; //TODO: replace with upcoming variables.

    & > li {
      display: inline-block;

      &:after {
        content: '>';
        margin: 0 0.5em;
      }

      &:last-child:after {
        content: '';
      }
    }
  }

  .color-bar {
    height: 10px;
    background-color: #2b2b2b;
  }

  .navigation-controls {
    position: absolute;
    left: 40px;
    bottom: 40px;

    .zoom-btn {
      width: 45px;
      height: 40px;

      margin: 5px;
    }
  }
}

Fix overflowing vertically by using flexbox layout

.graph-canvas {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  & > .graph {
    align-self: stretch;

    /* fill remaining space */
    flex-grow: 1;
  }

  ol.breadcrumbs {
    height: 35px;
    line-height: 35px;
    margin: 0;

    list-style: none;
    background-color: #f2f2f2; //TODO: replace with upcoming variables.

    & > li {
      display: inline-block;

      &:after {
        content: '>';
        margin: 0 0.5em;
      }

      &:last-child:after {
        content: '';
      }
    }
  }

  .color-bar {
    height: 10px;

    /* Overridden with inline style except on root*/
    background-color: #2b2b2b;
  }

  .navigation-controls {
    position: absolute;
    left: 40px;
    bottom: 40px;

    .zoom-btn {
      width: 45px;
      height: 40px;

      margin: 5px;
    }
  }
}


.fact-new {
  position: relative;
  z-index: 1; // should be lower than Twitter tooltip z-index

  .finish-popover {
    position: relative;
  }
}

.fact-new-fact-container {
  font-size: 14px;
  overflow: hidden;
}

Use variable instead of actual size

@import "twitter/bootstrap/variables";

.fact-new {
  position: relative;
  z-index: 1; // should be lower than Twitter tooltip z-index

  .finish-popover {
    position: relative;
  }
}

.fact-new-fact-container {
  font-size: @baseFactFontSize;
  overflow: hidden;
}


@import "variables.less";
@import "normalize.less";

.nju-app {
    width: 100%;
    height: 100%;

    * {
        box-sizing: border-box;
        outline: none;
    }

    html {
        font-family: @font-family;
        font-size: @font-size-base;
    }

    .base {
        font-size: @font-size-base;
    }

    h1, .h1 {
        font-size: @font-size-h1;
        font-weight: bold;
    }

    h2, .h2 {
        font-size: @font-size-h2;
        font-weight: bold;
    }

    h3, .h3 {
        font-size: @font-size-h3;
        font-weight: bold;
    }

    small .small {
        font-size: @font-size-small;
    }
}

@import "theme.less";

Set margin 0 to hx.

@import "variables.less";
@import "normalize.less";

.nju-app {
    width: 100%;
    height: 100%;

    * {
        box-sizing: border-box;
        outline: none;
    }

    html {
        font-family: @font-family;
        font-size: @font-size-base;
    }

    .base {
        font-size: @font-size-base;
    }

    h1, h2, h3 {
        margin: 0;
    }

    h1, .h1 {
        font-size: @font-size-h1;
        font-weight: bold;
    }

    h2, .h2 {
        font-size: @font-size-h2;
        font-weight: bold;
    }

    h3, .h3 {
        font-size: @font-size-h3;
        font-weight: bold;
    }

    small .small {
        font-size: @font-size-small;
    }
}

@import "theme.less";


.scrollable-container {
  transition: width @transition-speed;
  overflow-x: hidden;
  overflow-y: scroll;
  // 15px is the approximate width of the scrollbar in OSX.
  // javascript is the most reliable way to hide it when pure css options fail
  width: @preview-phone-width;
  &.has-scrollbar-15 { width: @preview-phone-width + 15px; }
  box-sizing: content-box;

  &:hover {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }
}

.preview-tablet-mode {
  .scrollable-container {
    width: @preview-tablet-width;
    &.has-scrollbar-15 { width: @preview-tablet-width + 15px; }
  }
}

// Hiding scrollbars for the different browsers, generally only works on windows.
.scrollable-container::-webkit-scrollbar { width: 0 !important }
.scrollable-container { -ms-overflow-style: none; }
.scrollable-container { overflow: -moz-scrollbars-none; }

Allow firefox to scroll live preview

.scrollable-container {
  transition: width @transition-speed;
  overflow-x: hidden;
  overflow-y: scroll;
  // 15px is the approximate width of the scrollbar in OSX.
  // javascript is the most reliable way to hide it when pure css options fail
  width: @preview-phone-width;
  &.has-scrollbar-15 { width: @preview-phone-width + 15px; }
  box-sizing: content-box;

  &:hover {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }
}

.preview-tablet-mode {
  .scrollable-container {
    width: @preview-tablet-width;
    &.has-scrollbar-15 { width: @preview-tablet-width + 15px; }
  }
}

// Hiding scrollbars for the different browsers, generally only works on windows.
.scrollable-container::-webkit-scrollbar { width: 0 !important }
.scrollable-container { -ms-overflow-style: none; }
@-moz-document url-prefix() {
    .scrollable-container { overflow-y: auto; }
}


.session-view {
  position: fixed;
  width: 100%;
  height: calc(~"100vh - 85px");
}

.close-well-button {
  position: relative;
  right: -10px;
  top: -15px;
}

.split-1 {
  padding-left: 15px;
}

.split-2 {
  padding-right: 15px;
  padding-bottom: 15px;
}

:host ::ng-deep split-gutter {
  background-color: white !important;
}

Remove bottom padding from split2

.session-view {
  position: fixed;
  width: 100%;
  height: calc(~"100vh - 85px");
}

.close-well-button {
  position: relative;
  right: -10px;
  top: -15px;
}

.split-1 {
  padding-left: 15px;
}

.split-2 {
  padding-right: 15px;
}

:host ::ng-deep split-gutter {
  background-color: white !important;
}


.ol-tabs {
  // Overrides for nav.less
  .nav-tabs {
    border: 0!important;
    margin-bottom: @margin-md;
    margin-top: -@line-height-computed; //- adjusted for portal-name
    padding: @padding-lg 0 @padding-md;
    text-align: center;
  }

  a {
    color: @link-color;
    &:hover {
      background-color: transparent!important;
      border: 0!important;
      color: @link-hover-color!important;
    }
  }

  li {
    display: inline-block;
    float: none;
    a {
      border: 0;
    }
  }

  li.active > a {
    background-color: transparent!important;
    border: 0!important;
    border-bottom: 1px solid @accent-color-secondary!important;
    color: @accent-color-secondary!important;
    &:hover {
      color: @accent-color-secondary!important;
    }
  }
  .tab-content:extend(.container) {
    background-color: transparent!important;
    border: none!important;
  }
}

Fix tab link hover styles applying to all children

.ol-tabs {
  // Overrides for nav.less
  .nav-tabs {
    border: 0!important;
    margin-bottom: @margin-md;
    margin-top: -@line-height-computed; //- adjusted for portal-name
    padding: @padding-lg 0 @padding-md;
    text-align: center;

    a {
      color: @link-color;
      &:hover {
        background-color: transparent!important;
        border: 0!important;
        color: @link-hover-color!important;
      }
    }
  }

  li {
    display: inline-block;
    float: none;
    a {
      border: 0;
    }
  }

  li.active > a {
    background-color: transparent!important;
    border: 0!important;
    border-bottom: 1px solid @accent-color-secondary!important;
    color: @accent-color-secondary!important;
    &:hover {
      color: @accent-color-secondary!important;
    }
  }
  .tab-content:extend(.container) {
    background-color: transparent!important;
    border: none!important;
  }
}


.icons_main() {
    li {
        display: inline-block;
        margin: 10px 10px;
        width: 140px;
        height: 140px;
        text-align: center;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 5px;
        padding-bottom: 5px;

        .cp-icons-name {
            width: 100%;
            height: 24px;
            margin: 0;
            display: inline-block;
            font-size: 14px;
            //align-items: center;
            //justify-content: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
        &.cp-icons-element-selected {
            background-color: white;
            color: #666;
        }
        .fa {
            display: block;
            font-size: 64px;
            margin: 18px 0;
            text-align: center;
            &.listonly {
                display: none;
            }
        }
    }
}

Fix invisible selection in the pad creation modal

.icons_main() {
    li {
        display: inline-block;
        margin: 10px 10px;
        width: 140px;
        height: 140px;
        text-align: center;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 5px;
        padding-bottom: 5px;

        .cp-icons-name {
            width: 100%;
            height: 24px;
            margin: 0;
            display: inline-block;
            font-size: 14px;
            //align-items: center;
            //justify-content: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
        &.cp-icons-element-selected {
            background-color: rgba(0,0,0,0.2);
            color: #666;
        }
        .fa {
            display: block;
            font-size: 64px;
            margin: 18px 0;
            text-align: center;
            &.listonly {
                display: none;
            }
        }
    }
}


// Blockquote
// ----------------------------------------------------------------------------/
blockquote {
	.margin-bottom(@blockquote-leading, @unit: rem);
	.font-size(@blockquote-font-size);
	font-family: @blockquote-font-family;
	font-style: @blockquote-font-style;

	small:before {
		content: "— ";
	}

	small {
		display: inline-block;
		width: 100%;
		.font-size(@small-font-size, @blockquote-font-size);
	}
}

Change small display to block

// Blockquote
// ----------------------------------------------------------------------------/
blockquote {
	.margin-bottom(@blockquote-leading, @unit: rem);
	.font-size(@blockquote-font-size);
	font-family: @blockquote-font-family;
	font-style: @blockquote-font-style;

	small:before {
		content: "— ";
	}

	small {
		display: block;
		width: 100%;
		.font-size(@small-font-size, @blockquote-font-size);
	}
}


// Panels

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
  border-color: @border;

  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;

    &.clickable {
      cursor: pointer;
      transition: background-color 300ms ease;

      &:hover {
        background-color: darken(@heading-bg-color, 5%);
      }
    }

    + .panel-collapse > .panel-body {
      border-top-color: @border;
    }
    .badge {
      color: @heading-bg-color;
      background-color: @heading-text-color;
    }
  }
  & > .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: @border;
    }
  }
}

Apply "font-weight: bold" to clickable panel headers

// Panels

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
  border-color: @border;

  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;

    &.clickable {
      cursor: pointer;
      transition: background-color 300ms ease;
      font-weight: bold;

      &:hover {
        background-color: darken(@heading-bg-color, 5%);
      }
    }

    + .panel-collapse > .panel-body {
      border-top-color: @border;
    }
    .badge {
      color: @heading-bg-color;
      background-color: @heading-text-color;
    }
  }
  & > .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: @border;
    }
  }
}


.emojionearea.emojionearea-standalone {
    // Hide the standalone button/display as we only use the picker itself
    .emojionearea-editor,
    .emojionearea-button {
        display: none;
    }
}

.ComposerBody-emojioneareaContainer {
    height: 0;

    // Same margins as .TextEditor-controls
    // So the position of the picker is relative to the border of the composer, even when the avatar is shown on the side
    @media @tablet-up {
        margin: 0 -20px 0 -105px;
        padding: 0 20px;
    }
}

Fix white pixel showing up above "post reply" button

// Hide the standalone button/display as we only use the picker itself
.emojionearea.emojionearea-standalone {
    border: none;

    .emojionearea-editor,
    .emojionearea-button {
        display: none;
    }
}

.ComposerBody-emojioneareaContainer {
    height: 0;

    // Same margins as .TextEditor-controls
    // So the position of the picker is relative to the border of the composer, even when the avatar is shown on the side
    @media @tablet-up {
        margin: 0 -20px 0 -105px;
        padding: 0 20px;
    }
}


body {
    font-family: sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 1.5em;
}

.container {
    width: 95%;
    max-width: 800px;
    margin: 40px auto;
}

p {
    margin-bottom: 1em;
}

.big {
    font-weight: bold;
    font-size: 36px;
    color: #000;
}

Improve homepage layout on small screens

body {
    font-family: sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 1.5em;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 40px auto;
}

p {
    margin-bottom: 1em;
}

.big {
    font-weight: bold;
    font-size: 36px;
    color: #000;
}


.list-items .list-item {
  .font-s2;

  // Layout of list-item children
  .display(flex);
  .flex-wrap(wrap);
  width: 100%;

  .checkbox {
    .flex(0, 0, 44px);
  }

  span, textarea {
    .flex(1);
  }

  span {
    padding: 14px 0;
  }

  // Style of list-item children
  textarea {
    background: transparent;
    cursor: pointer;
    height: auto;
    overflow-y: hidden;
    resize: none;

    &:focus { cursor: text; }
  }

  .avatar {
    height: 25px;
    margin: 5px 0;
    border-radius: 50%;
  }

  // Border between list items
  & + .list-item { border-top: 1px solid #f0f9fb; }
}

Increase input textarea on focus.

.list-items .list-item {
  .font-s2;

  // Layout of list-item children
  .display(flex);
  .flex-wrap(wrap);
  width: 100%;

  .checkbox {
    .flex(0, 0, 44px);
  }

  span, textarea {
    .flex(1);
  }

  span {
    padding: 14px 0;
  }

  // Style of list-item children
  textarea {
    background: transparent;
    cursor: pointer;
    height: 53px;
    overflow-y: hidden;
    resize: none;
    .transition( all 300ms ease-out );

    &:focus {
      cursor: text;
      height: 120px;
    }
  }

  .avatar {
    height: 25px;
    margin: 5px 0;
    border-radius: 50%;
  }

  // Border between list items
  & + .list-item { border-top: 1px solid #f0f9fb; }
}


//
// Footer
// --------------------------------------------------
// Custom footer styles

// Local variables
//
// Which are meant to be used only in this module. »Global« variables are stored
// in /assets/less/<%= templateProps.theme %>/variables.less
@mm_footer-height: 40px;
@mm_footer-bg: #f5f5f5;

// Local mixins
//
// Which are meant to be used only in this module. »Global« mixins are stored
// in /assets/less/<%= templateProps.theme %>/mixins.less

// Called in scaffolding.less
.mm_footer-htmlProps() {
	position: relative;
	min-height: 100%;
}

// Called in scaffolding.less
.mm_footer-bodyProps() {
	// Margin bottom by footer height
	margin-bottom: @mm_footer-height;
}

// Styles
//

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	// Set the fixed height of the footer here
	height: 60px;
	background-color: #f5f5f5;
	> .container {
		padding-right: 15px;
		padding-left: 15px;
	}
	.footer-text { margin: 20px 0; }
}

Improve use of variables in footer example

//
// Footer
// --------------------------------------------------
// Custom footer styles

// Local variables
//
// Which are meant to be used only in this module. »Global« variables are stored
// in /assets/less/theme/variables.less
@mm_footer-height: 60px;
@mm_footer-text-margin: 20px;
@mm_footer-bg: #f5f5f5;

// Local mixins
//
// Which are meant to be used only in this module. »Global« mixins are stored
// in /assets/less/theme/mixins.less

// Called in scaffolding.less
.mm_footer-htmlProps() {
	position: relative;
	min-height: 100%;
}

// Called in scaffolding.less
.mm_footer-bodyProps() {
	// Margin bottom by footer height
	margin-bottom: (@mm_footer-height - @mm_footer-text-margin);
}

// Styles
//

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	// Set the fixed height of the footer here
	height: @mm_footer-height;
	background-color: #f5f5f5;
	> .container {
		padding-right: 15px;
		padding-left: 15px;
	}
	.footer-text { margin: @mm_footer-text-margin 0; }
}


@import "//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css";
@import "flex-mixins.less";

html, body, .container-fluid {
  height: 100%;
}

.pull-bottom {
  height: 100%;
}

.container-fluid {
  padding: 15px;
  .flex();
  .flex-direction(column);

  #chat-messages {
    flex: 1;

    @message-margin: 10px;
    .message(@bgcolor) {
      max-width: 50%;
      background-color: @bgcolor;
    }

    .eoger {
      .message(#80B3FF);
      margin-left: @message-margin;
    }

    .visitor {
      .message(#FFC2CE);
      margin-right: @message-margin;
    }
  }

  #chat-input {
    margin-top: 5px;

    form {
      .flex;

      input {
        flex: 1;
      }

      button {
        margin-left: 5px;
      }
    }
  }
}

Fix : chat wasn't filling all height

@import "//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css";
@import "flex-mixins.less";

html, body, #app, .container-fluid {
  height: 100%;
}

.pull-bottom {
  height: 100%;
}

.container-fluid {
  padding: 15px;
  .flex();
  .flex-direction(column);

  #chat-messages {
    flex: 1;

    @message-margin: 10px;
    .message(@bgcolor) {
      max-width: 50%;
      background-color: @bgcolor;
    }

    .eoger {
      .message(#80B3FF);
      margin-left: @message-margin;
    }

    .visitor {
      .message(#FFC2CE);
      margin-right: @message-margin;
    }
  }

  #chat-input {
    margin-top: 5px;

    form {
      .flex;

      input {
        flex: 1;
      }

      button {
        margin-left: 5px;
      }
    }
  }
}


.syntax--text.syntax--tex.syntax--latex .syntax--markup.syntax--other.syntax--math {
  color: @syntax-color-snippet
}

Apply style when also embedded

.syntax--markup.syntax--other.syntax--math.syntax--latex {
  color: @syntax-color-snippet
}


.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;
    }
  });
});


.components {
}

.component {
    background: #f6f6f6;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    display: flex;
    padding: 20px 0 20px 40px;
    text-decoration: none;
    width: 100%;

    &--warn:before {
        content: 'LOL';
    }

    &--error {
        // background: rgba(255, 0, 0, .2);
    }

    &__name {
        font-size: 1.2rem;
        font-weight: 600;
        text-transform: uppercase;
    }
}

Remove old status classes, add icon. Small visual adjustments

.components {
}

.component {
    align-items: center;
    background: #f6f6f6;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    display: flex;
    font-size: 18px;
    padding: 20px 0;
    text-decoration: none;
    width: 100%;

    &__status {
        text-align: center;
        width: 50px;
    }

    &__name {
        font-size: 1.2rem;
        font-weight: 600;
        text-transform: uppercase;
        width: 150px;
    }
}


@import "mixins.less";
@import "variables.less";

/**
 * Scrollable is our basis for a board.
 */
.scrollable {
	.wrapper {
		height:   100%;
		overflow: hidden;
		position: relative;

		background-color: @gray-light;
	}

	.minimap {
		width:  @ticket-width;
		height: @ticket-height;

		top:      8;
		right:    8;
		position: absolute;

		border: 1px solid;

		border-color:     @gray-light;
		background-color: @white;

		z-index: @layer-ui;

		.marker {
			z-index:  @layer-ui + 1;
			position: absolute;

			.transition(all, .2s);
		}

		.cursor {
			z-index:          @layer-ui + 2;
			background-color: fade(@gray-light, 40%);
		}
	}
}

/**
 * Board is a scrollable element.
 */
.board {
	background-color: @white;
}

Make markers unclickable, so they wont block the cursor.

@import "mixins.less";
@import "variables.less";

/**
 * Scrollable is our basis for a board.
 */
.scrollable {
	.wrapper {
		height:   100%;
		overflow: hidden;
		position: relative;

		background-color: @gray-light;
	}

	.minimap {
		width:  @ticket-width;
		height: @ticket-height;

		top:      8;
		right:    8;
		position: absolute;

		border: 1px solid;

		border-color:     @gray-light;
		background-color: @white;

		z-index: @layer-ui;

		.marker {
			z-index:  @layer-ui + 1;
			position: absolute;

			pointer-events: none;

			.transition(all, .2s);
		}

		.cursor {
			z-index:          @layer-ui + 2;
			background-color: fade(@gray-light, 40%);
		}
	}
}

/**
 * Board is a scrollable element.
 */
.board {
	background-color: @white;
}


@import "ui-variables";

// Pane-items are things that go inside a pane. Like the UI-Demo, the
// settings-view, the archive-view, the image-view. Etc. Basically a non-
// editor resource with a tab.
atom-pane-container {
  display: -webkit-flex;
  -webkit-flex: 1;

  atom-pane-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: column;
  }

  atom-pane-axis.horizontal {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: row;
  }

  atom-pane {
    position: relative;
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: column;
    overflow: hidden;

    .item-views {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;
      min-width: 0;
      position: relative;

      > *, > atom-text-editor.react > * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        color: @text-color;
        background-color: @pane-item-background-color;
      }
    }
  }
}

Revert "Remove .pane-item selector from core"

@import "ui-variables";

// Pane-items are things that go inside a pane. Like the UI-Demo, the
// settings-view, the archive-view, the image-view. Etc. Basically a non-
// editor resource with a tab.
atom-pane-container {
  display: -webkit-flex;
  -webkit-flex: 1;

  atom-pane-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: column;
  }

  atom-pane-axis.horizontal {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: row;
  }

  atom-pane {
    position: relative;
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: column;
    overflow: hidden;

    .item-views {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;
      min-width: 0;
      position: relative;

      .pane-item {
        color: @text-color;
        background-color: @pane-item-background-color;
      }

      > *, > atom-text-editor.react > * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}


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

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

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

      color: @grayDark;

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

      span {
        vertical-align: middle;
      }

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

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

        &:hover {
          cursor: default;
        }
      }

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

        color: @grayLight;
      }

      &:hover {
        cursor: pointer;

        color: @grayDarker;
        text-decoration: underline;

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

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

Update active tab icon color and text hover

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

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

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

      color: @grayDark;

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

      span {
        vertical-align: middle;
      }

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

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

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

        &:hover {
          cursor: default;
          text-decoration: none;
        }
      }

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

        color: @grayLight;
      }

      &:hover {
        cursor: pointer;

        color: @grayDarker;
        text-decoration: underline;

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

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


@import "ui-variables";

.atom-rip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  z-index: 10000000;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;

  background-color: #F4D03F;
  background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

  h1, h2 {
    color: white;
    text-align: center;
    font-family: 'Nanum Square', sans-serif;
  }

  h1 {
    font-size: 5vw;
  }

  h2 {
    font-size: 2.5vw;
    margin-top: 1vw;
  }
}

.atom-rip-timer {
  font-size: 1vw;
  color: whitesmoke;
}

Fix status bar UI error

@import "ui-variables";

.atom-rip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  z-index: 10000000;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;

  background-color: #F4D03F;
  background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

  h1, h2 {
    color: white;
    text-align: center;
    font-family: 'Nanum Square', sans-serif;
  }

  h1 {
    font-size: 5vw;
  }

  h2 {
    font-size: 2.5vw;
    margin-top: 1vw;
  }

  .atom-rip-timer {
    font-size: 1vw;
    color: whitesmoke;
  }
}


.hentry {
  margin-bottom: 10px;

  .single & {
    margin-bottom: 30px;
  }
}

.hentry header {
  .entry-title {
    margin-top: 0;

    .single & {
      margin-top: 20px;
    }
  }
}

.hentry .entry-meta {
  margin-bottom: 20px;
  background-color: @gray-lighter;

  .updated {
    margin-left: 4px;
    line-height: 24px;
  }

  .addthis_sharing_toolbox {
    margin: 4px 2px 0 0;
  }
}

.hentry .entry-summary {
  margin-bottom: 20px;
}

Change the AddThis counter style

.hentry {
  margin-bottom: 10px;

  .single & {
    margin-bottom: 30px;
  }
}

.hentry header {
  .entry-title {
    margin-top: 0;

    .single & {
      margin-top: 20px;
    }
  }
}

.hentry .entry-meta {
  margin-bottom: 20px;
  background-color: @gray-lighter;

  .updated {
    margin-left: 4px;
    line-height: 24px;
  }

  .addthis_sharing_toolbox {
    margin: 4px 2px 0 0;

    .at_flat_counter {
      margin: 0 1px 0 3px;
      background: #fff;
    }

    .at_flat_counter:after {
      border-color: transparent;
    }
  }
}

.hentry .entry-summary {
  margin-bottom: 20px;
}


// This file has fallback variables. It specifies the syntax variables that
// themes must implement.

// Colors

@syntax-background-color: #fff;
@syntax-text-color: #333;

@syntax-color-added: #00f;
@syntax-color-ignored: #333;
@syntax-color-modified: #0f0;
@syntax-color-renamed: #333;
@syntax-color-removed: #f00;

Drop text segment from color

// This file has fallback variables. It specifies the syntax variables that
// themes must implement.

// Colors

@syntax-background-color: #fff;
@syntax-color: #333;

@syntax-color-added: #00f;
@syntax-color-ignored: #333;
@syntax-color-modified: #0f0;
@syntax-color-renamed: #333;
@syntax-color-removed: #f00;


#navbar .navbar-inner .container .nav li.dropdown#all_touchui_settings li #psucontrol_indicator:before {
	content: '\f0e7';
}

Add PSUControl on/off class and color theming support.

@psucontrol-on-color: #00FF00;
@psucontrol-off-color: #808080;

#navbar .navbar-inner .container .nav li.dropdown#all_touchui_settings li #psucontrol_indicator {
    &:before {
        content: '\f0e7';
    }

    &.on {
        color: @psucontrol-on-color;
    }

    &.off {
        color: @psucontrol-off-color;
    }
}


.factlink, .factlink-site {
  footer {
  color: #777;
    border: none;
    margin-top: 1em;
    margin-bottom: 2em;
    a.bookmarklet {
      cursor: move;
    }
    ul {
      text-align: right;
      li {
        display: inline;
        &:not(:last-child):after {
          content: " | ";
        }
      }
    }
  }
}

Use a little inset on the footer texts

.factlink, .factlink-site {
  footer {
    color: #777;
    border: none;
    margin-top: 1em;
    margin-bottom: 2em;
    text-shadow: 0px -1px 1px #fff;
    a.bookmarklet {
      cursor: move;
    }
    ul {
      text-align: right;
      li {
        display: inline;
        &:not(:last-child):after {
          content: " | ";
        }
      }
    }
  }
}


.sign-in-view {
  width: 350px;
  margin-left: -175px;
  input, button, .alert {
    margin-bottom: 10px;
  }

  button {
    margin-right: 10px;
  }

  .alert:before {
    content: 'Sign in failed. ';
    font-weight: bold;
  }
  .password {
    -webkit-text-security: disc;
  }
}

Set text security on line elements only

.sign-in-view {
  width: 350px;
  margin-left: -175px;

  input, button, .alert {
    margin-bottom: 10px;
  }

  button {
    margin-right: 10px;
  }

  .alert:before {
    content: 'Sign in failed. ';
    font-weight: bold;
  }

  .password .line span {
    -webkit-text-security: disc;
  }
}


@measure-green-light: #4a6e77;
@measure-green-dark: #163843;

@measure-font-green: #2d5662;
@measure-font-black: #333;
@measure-font-link-green: #318ead;

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", Lucida, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5em;
}

.container {
    padding: 0 40px;
    width: auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

Include the bg_grain.png background texture

@measure-green-light: #4a6e77;
@measure-green-dark: #163843;

@measure-font-green: #2d5662;
@measure-font-black: #333;
@measure-font-link-green: #318ead;

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", Lucida, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5em;
    background: image-url('bg_grain.png');
}

.container {
    padding: 0 40px;
    width: auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}


.confirm-reservation-modal {
  .reservation-form {
    .well {
      margin-left: -20px;
      margin-right: -20px;
      padding: 20px;
    }

    .form-controls {
      .modal-footer();
      padding-right: 0;
      padding-bottom: 0;
    }

    .terms-and-conditions {
      .wrapped-text {
        max-height: 300px;
        overflow-y: scroll;
        margin-bottom: 10px;
        border: 1px solid @gray-light;
        padding: 10px;
      }
    }

    .terms-and-conditions-input-wrapper {
      .col-sm-offset-3 {
        margin-left: 0;
      }
      label {
        font-weight: bold;
      }
    }
  }
}

Make reservation confirmation modal wider

.confirm-reservation-modal {
  .modal-dialog {
    @media (min-width: @screen-sm-min) {
      width: 700px;
    }
  }

  .reservation-form {
    .well {
      margin-left: -20px;
      margin-right: -20px;
      padding: 20px;
    }

    .form-controls {
      .modal-footer();
      padding-right: 0;
      padding-bottom: 0;
    }

    .terms-and-conditions {
      .wrapped-text {
        max-height: 300px;
        overflow-y: scroll;
        margin-bottom: 10px;
        border: 1px solid @gray-light;
        padding: 10px;
      }
    }

    .terms-and-conditions-input-wrapper {
      .col-sm-offset-3 {
        margin-left: 0;
      }
      label {
        font-weight: bold;
      }
    }
  }
}


/*
    App-specific LESS/CSS would go here, but to make your application easier to
    maintain, you should try to minimize the use of custom CSS.

    Additionally, you can override any moonstone variables in this file. You
    can also control the theme and change it from dark to light if desired by
    adding the assignment:

    @moon-theme: 'light';
*/

body::before {
	content: "";
	display: block;
	width: 100%;
	height: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-app-region: drag;
	z-index: 10000;
}

.main-view {
}

Include description of window dragger

/*
    App-specific LESS/CSS would go here, but to make your application easier to
    maintain, you should try to minimize the use of custom CSS.

    Additionally, you can override any moonstone variables in this file. You
    can also control the theme and change it from dark to light if desired by
    adding the assignment:

    @moon-theme: 'light';
*/

/*
	The following style block adds a small invisible overlay on the top of the
	app which can be used with click-and-drag to move the app window itself
*/
body::before {
	content: "";
	display: block;
	width: 100%;
	height: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-app-region: drag;
	z-index: 10000;
}

.main-view {
}


@import "ui-variables";

.archive-editor {
  background-color: @inset-panel-background-color;
  overflow: auto;
  contain: strict;

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

    .inset-panel {
      border-width: 0;

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

    .archive-tree {
      padding: 5px;
    }
  }
}

Move containment to the archive container instead

@import "ui-variables";

.archive-editor {
  background-color: @inset-panel-background-color;
  overflow: auto;

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

    .inset-panel {
      border-width: 0;

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

      .archive-tree {
        padding: 5px;
      }
    }
  }
}


// Path Management -----------------------------------------------------------
@imgPath: "../../../img/outer";

// Libs ----------------------------------------------------------------------
@import "_shared/base";

// Blocks ------------------------------------------------------------------
@import "_blocks/header";
@import "_blocks/title";
@import "_blocks/footer";

#content { position: relative; }

#content > section {
  .container;
  padding-bottom: 75px;

  h1 {
    font-size: 92px;
    margin: 100px auto 0;
    color: #444;
    text-align: center;
    text-shadow: 0 1px 1px white;

    & + p {
      color: #444;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: 400;
      font-size: 24px;
      line-height: 54px;
      text-align: center;
      text-shadow: 0 1px 1px white;
    }
  }

  .story::before {
    content: '';
    display: block;
    position: absolute;
    background: #FAFAFA;
    background: rgba(0, 0, 0, 0.02);
    height: 225px;
    width: 100%;
    top: 75px;
    left: 0;
    border: 1px solid #E6E6E6;
  }
}

Make error background work in IE

// Path Management -----------------------------------------------------------
@imgPath: "../../../img/outer";

// Libs ----------------------------------------------------------------------
@import "_shared/base";

// Blocks ------------------------------------------------------------------
@import "_blocks/header";
@import "_blocks/title";
@import "_blocks/footer";

#content { position: relative; }

#content {
    background: #F2F2F2;
    background: rgba(0, 0, 0, 0.02);
    height: 225px;
    width: 100%;
    top: 75px;
    border: 1px solid #E6E6E6;

  & > section {
    .container;
    padding-bottom: 75px;
  }

  .story { margin-top: 28px; }

  h1 {
    font-size: 92px;
    margin: 0 auto 0;
    color: #444;
    text-align: center;
    text-shadow: 0 1px 1px white;

    & + p {
      color: #444;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: 400;
      font-size: 24px;
      line-height: 54px;
      text-align: center;
      text-shadow: 0 1px 1px white;
    }
  }
}


// Bootstrap
// -------------------------
@import "bootstrap-variables.less";
@import "../shared/bootstrap-files.less";

// Image path helper
// -------------------------
@imgPath: "../../img";

#app {
   //background:  url(../../../img/outer/bg_pattern.png);
   min-width: 960px;

   // Fix for the intercom help button obscuring text
   padding-bottom: 70px;
}

// Basic Typography
h1 {
  color: #1c508b;
}
h2 {
  color: #366aa4;
}
@import "../shared/variables.less";
@import "labels.less";
@import "../shared/functions.less";
@import "terminal.less";
@import "navbar.less";
@import "builds.less";
@import "billing.less";
@import "settings.less";
@import "add-projects.less";
@import "dashboard.less";
@import "edit-project-settings.less";
@import "admin.less";
@import "org.less";
@import "../shared/general.less";

Fix the footer and the width

// Bootstrap
// -------------------------
@import "bootstrap-variables.less";
@import "../shared/bootstrap-files.less";

// Image path helper
// -------------------------
@imgPath: "../../img";

&#content {
  padding-bottom: 70px; // Fix for the intercom help button obscuring text
  min-width: 960px;
}

// Basic Typography
h1 {
  color: #1c508b;
}
h2 {
  color: #366aa4;
}

@import "../shared/variables.less";
@import "labels.less";
@import "../shared/functions.less";
@import "terminal.less";
@import "navbar.less";
@import "builds.less";
@import "billing.less";
@import "settings.less";
@import "add-projects.less";
@import "dashboard.less";
@import "edit-project-settings.less";
@import "admin.less";
@import "org.less";
@import "../shared/general.less";


// Buttons

.btn {
  display: inline-block;
  padding: @btn-padding-y @btn-padding-x;
  font-size: @btn-font-size;
  line-height: @line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: @global-radius;
  transition: all .25s ease-in-out;
  appearance: none;

  &:focus,
  &:hover {
    text-decoration: none;
    outline: none;
  }

  // Disabled button
  &.disabled,
  &:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

// Default button
.btn-default {
  .btn-color(@btn-default-bg, @btn-default-color, @btn-default-border);
}

// Primary button
.btn-primary {
  .btn-color(@btn-primary-bg, @btn-primary-color, @btn-primary-border);
}

// Secondary button
.btn-secondary {
  .btn-color(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
}

// Transparent button
.btn-transparent {
  background-color: transparent;
  border-color: transparent;

  &:focus,
  &:hover {
    color: lighten(@body-color, 30);
    background-color: transparent;
    border-color: transparent;
  }
}

Remove extra properties from .btn-transparent

// Buttons

.btn {
  display: inline-block;
  padding: @btn-padding-y @btn-padding-x;
  font-size: @btn-font-size;
  line-height: @line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: @global-radius;
  transition: all .25s ease-in-out;
  appearance: none;

  &:focus,
  &:hover {
    text-decoration: none;
    outline: none;
  }

  // Disabled button
  &.disabled,
  &:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

// Default button
.btn-default {
  .btn-color(@btn-default-bg, @btn-default-color, @btn-default-border);
}

// Primary button
.btn-primary {
  .btn-color(@btn-primary-bg, @btn-primary-color, @btn-primary-border);
}

// Secondary button
.btn-secondary {
  .btn-color(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
}

// Transparent button
.btn-transparent {
  background-color: transparent;

  &:focus,
  &:hover {
    color: lighten(@body-color, 30);
    background-color: transparent;
  }
}


.filter-list {
  label {
    font-weight: normal;
  }
  .search-group {
    display: flex;
  }
  .search-query {
    margin-right: 20px;
  }
  .search-add .btn, .btn-search {
    border-left: unset;
    background: #f5f9fb;
  }
  .saved-searches button {
    border-right: unset;
  }
  .search-filter {
    border-bottom: 1px solid #f5f9fb;
    padding: 10px;
  }
  .searches-save {
    margin: 8px 5px 5px;
  }
}

Fix css issue with flex box in latest chrome

.filter-list {
  label {
    font-weight: normal;
  }
  .search-group {
    display: flex;
  }
  .search-query {
    margin-right: 20px;
    flex-basis: 100%;
  }
  .search-add .btn, .btn-search {
    border-left: unset;
    background: #f5f9fb;
  }
  .saved-searches button {
    border-right: unset;
  }
  .search-filter {
    border-bottom: 1px solid #f5f9fb;
    padding: 10px;
  }
  .searches-save {
    margin: 8px 5px 5px;
  }
}


.grid-toolbar {
  .action.btn {
    height: 27px;
    margin-right: 5px;
    padding: 0 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  a.action.btn {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    i {
      font: @baseFontSize/26px 'FontAwesome';
      color: @btnTextColor;
      &.hide-text {
        .hide-text();
      }
      &:before {
        line-height: 26px;
        margin: 0;
      }
    }
  }
}

Migrate Data Grid Column Manager in AE project

.grid-toolbar {
  .action.btn {
    height: 27px;
    margin-right: 5px;
    padding: 0 5px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.grid-toolbar .actions-panel.pull-right {
  /* hide text label for actions in right panel */
  .action {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    [class^="icon-"], [class*=" icon-"] {
      font: @baseFontSize/26px 'FontAwesome';
      color: @btnTextColor;
      &.hide-text {
        .hide-text();
      }
      &:before {
        line-height: 26px;
        margin: 0;
      }
    }
  }
}


.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      // TODO This is a bad componentization. When icons are
      // componentized we should give them this styling, but until then ...
      > div > .banner-alert-icon {
        margin-right: 11px;
      }

      > .banner-dismiss {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  });
});

Fix the layout of the dismiss icon in the top banner

.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      // TODO This is a bad componentization. When icons are
      // componentized we should give them this styling, but until then ...

      .flexy(row, space-between);

      > div > .banner-alert-icon {
        margin-right: 11px;
      }

      > .banner-dismiss {
        cursor: pointer;
      }
    }
  });
});


.bold {
    font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.normal {
  color: #dddddd;
  font-weight: normal;
  text-decoration: none;
}

.self {
  color: #5d5d5d;
}

.black {
  color: #4a4a4a;
}

.red {
  color: #d08356;
}

.green {
  //color: #a2a96f;
  color: rgb(0,223,0);
}

.yellow {
  color: #e3d96f;
}

.blue {
  color: #8a9597;
}

.magenta {
  color: #be96b3;
}

.cyan {
  color: #74dad9;
}

.white {
  color: #ffffff;
}

.black-bg {
  background: #4a4a4a;
}

.red-bg {
  background: #d08356;
}

.green-bg {
  background: #a2a96f;
}

.yellow-bg {
  background: #e3d96f;
}

.blue-bg {
  background: #8a9597;
}

.magenta-bg {
  background: #be96b3;
}

.cyan-bg {
  background: #74dad9;
}

.white-bg {
  background: #ffffff;
}

Make blue color more blue

.bold {
    font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.normal {
  color: #dddddd;
  font-weight: normal;
  text-decoration: none;
}

.self {
  color: #5d5d5d;
}

.black {
  color: #4a4a4a;
}

.red {
  color: #d08356;
}

.green {
  //color: #a2a96f;
  color: rgb(0,223,0);
}

.yellow {
  color: #e3d96f;
}

.blue {
  color: #99aaff;
}

.magenta {
  color: #be96b3;
}

.cyan {
  color: #74dad9;
}

.white {
  color: #ffffff;
}

.black-bg {
  background: #4a4a4a;
}

.red-bg {
  background: #d08356;
}

.green-bg {
  background: #a2a96f;
}

.yellow-bg {
  background: #e3d96f;
}

.blue-bg {
  background: #8a9597;
}

.magenta-bg {
  background: #be96b3;
}

.cyan-bg {
  background: #74dad9;
}

.white-bg {
  background: #ffffff;
}


@primary-navbar-bg:                   yellow;
@primary-navbar-color:                yellow;
@primary-navbar-active-bg:            darken(@primary-navbar-bg, 0%);
@primary-navbar-active-color:         green;

Fix issue with the custom admin ui nav bar styling.

@primary-navbar-bg:                   green;
@secondary-navbar-bg:                 lightgreen;


.umb-toggle-group {
    .umb-toggle-group-item {
        display: flex;
        border-bottom: 1px solid @gray-9;
        padding: 7px 0;
    }

    .umb-toggle-group-item:last-of-type {
        border-bottom: none;
    }

    .umb-toggle-group-item__toggle {
        padding-right: 20px;
        cursor: pointer;
    }

    .umb-toggle-group-item__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        cursor: pointer;
    }

    .umb-toggle-group-item--disabled .umb-toggle-group-item__toggle,
    .umb-toggle-group-item--disabled .umb-toggle-group-item__content {
        cursor: not-allowed;
        opacity: 0.8;
    }

    .umb-toggle-group-item__description {
        font-size: 13px;
        color: @gray-4;
    }
}

Make toggle group labels clickable and aligned correctly

.umb-toggle-group {
    .umb-toggle-group-item {
        display: flex;
        border-bottom: 1px solid @gray-9;
        padding: 7px 0;
    }

    .umb-toggle-group-item:last-of-type {
        border-bottom: none;
    }

    .umb-toggle-group-item__toggle {
        padding-right: 20px;
        cursor: pointer;
    }

    .umb-toggle-group-item__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        cursor: pointer;

        label {
          padding: unset;
          margin: unset;
          pointer-events: none;
        }
    }

    .umb-toggle-group-item--disabled .umb-toggle-group-item__toggle,
    .umb-toggle-group-item--disabled .umb-toggle-group-item__content {
        cursor: not-allowed;
        opacity: 0.8;
    }

    .umb-toggle-group-item__description {
        font-size: 13px;
        color: @gray-4;
    }
}


@import "base";
@import "key";

.bar text {
    fill: #fff;

    &.hidden {
        display: none;
    }
}

Set font size for bar values

@import "base";
@import "key";

.bar text {
    fill: #fff;
    font-size: 12px;

    &.hidden {
        display: none;
    }
}


/* Content.less */

@font-family: Verdana, Arial, Helvetica, sans-serif;
@font-size: 11px;

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: @font-family;
	font-size: @font-size;
	scrollbar-3dlight-color: #F0F0EE;
	scrollbar-arrow-color: #676662;
	scrollbar-base-color: #F0F0EE;
	scrollbar-darkshadow-color: #DDDDDD;
	scrollbar-face-color: #E0E0DD;
	scrollbar-highlight-color: #F0F0EE;
	scrollbar-shadow-color: #F0F0EE;
	scrollbar-track-color: #F5F5F5;
}

td, th {
	font-family: @font-family;
	font-size: @font-size;
}

p {
  margin: 0;
  clear: both;
}
@import "Mixins.less";
@import "Content.Objects.less";

Add a 1px margin around images. When using the autoresize plugin and selecting an image, the outline was getting clipped. This will fix the clipping

/* Content.less */

@font-family: Verdana, Arial, Helvetica, sans-serif;
@font-size: 11px;

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: @font-family;
	font-size: @font-size;
	scrollbar-3dlight-color: #F0F0EE;
	scrollbar-arrow-color: #676662;
	scrollbar-base-color: #F0F0EE;
	scrollbar-darkshadow-color: #DDDDDD;
	scrollbar-face-color: #E0E0DD;
	scrollbar-highlight-color: #F0F0EE;
	scrollbar-shadow-color: #F0F0EE;
	scrollbar-track-color: #F5F5F5;
}

td, th {
	font-family: @font-family;
	font-size: @font-size;
}

/* Seapine-specific */
p {
  margin: 0;
  clear: both;
}

img {
  margin: 1px;
}
/* END Seapine */

@import "Mixins.less";
@import "Content.Objects.less";


.tutorial-container, .api-container {
  padding-top: 10px;

  .main-content {

    margin-bottom: 6rem;
    font-size: 1.2rem;
    p,
    li,
    h1,
    h2,
    h3,
    hr {
      max-width: 640px;
    }

    ol {
      list-style: decimal outside;
      margin-left: 2rem;
    }

    ul {
      list-style: disc outside;
      // margin-left: 2rem;

      &.first-get-started {
        margin-left: 0;
      }
    }
  }
}

@media (max-width: 767px) {
  .tutorial-container {
    .main-content {
      font-size: 1rem;
    }
  }
}

Change margin-left for unordered lists.

.tutorial-container, .api-container {
  padding-top: 10px;

  .main-content {

    margin-bottom: 6rem;
    font-size: 1.2rem;
    p,
    li,
    h1,
    h2,
    h3,
    hr {
      max-width: 640px;
    }

    ol {
      list-style: decimal outside;
      margin-left: 2rem;
    }

    ul {
      list-style: disc outside;
      margin-left: 2rem;

      &.first-get-started {
        margin-left: 0;
      }
    }
  }
}

@media (max-width: 767px) {
  .tutorial-container {
    .main-content {
      font-size: 1rem;
    }
  }
}


/* == Scale control == */

/* Scale Line style */
.leaflet-control-scale.leaflet-control .leaflet-control-scale-line {
	background-color: transparent;
	padding: 0 5px;
	font-size: 10px;
	font-family: sans-serif;
}

.leaflet-right.leaflet-bottom {

	/** Override initial properties */
	.leaflet-control.leaflet-control-scale {
		float: left;
		clear: none;
		margin: 1px 5px;
		line-height: initial;

		.leaflet-control-scale-line {

			/* Scale Line style on hover */
			&:hover {
				border-color: #000;
				cursor: pointer;
			}

			/** Override initial properties */
			&:not( :first-child ) {
				border: 1px solid #999;
				border-color: #000;
				border-top: 0;
				margin-top: 0;
			}
		}
	}
}

Apply more forcefully the noflip LTR dir for the scale

/* == Scale control == */

/* Scale Line style */
.leaflet-control-scale.leaflet-control .leaflet-control-scale-line {
	background-color: transparent;
	padding: 0 5px;
	font-size: 10px;
	font-family: sans-serif;
}

.leaflet-right.leaflet-bottom {

	/** Override initial properties */
	.leaflet-control.leaflet-control-scale {
		float: left;
		clear: none;
		margin: 1px 5px;
		line-height: initial;

		.leaflet-control-scale-line {
			// Should never flip, since '10km' etc is not
			// currently translateable in leaflet itself
			/* @noflip */
			direction: ltr;

			/* Scale Line style on hover */
			&:hover {
				border-color: #000;
				cursor: pointer;
			}

			/** Override initial properties */
			&:not( :first-child ) {
				border: 1px solid #999;
				border-color: #000;
				border-top: 0;
				margin-top: 0;
			}
		}
	}
}


@fallback-font-size: 100%;
@scaling-font-size: calc(80% + 1vmin);

@font-family-title: "Alegreya Sans SC", serif;
@font-family-main: "Alegreya Sans", serif;
@font-family-monospace: "Courier New", Courier, monospace;

@header-letter-spacing: 2px;

@line-height: 1.35;

@font-weight__body-bold: 700;
@font-weight__body-normal: 400;

@font-weight__title-bold: 800;
@font-weight__title-normal: 500;

Use clamp for font scaling

@fallback-font-size: 100%;
@scaling-font-size: ~"max(100%, 3vmin)";

@font-family-title: "Alegreya Sans SC", serif;
@font-family-main: "Alegreya Sans", serif;
@font-family-monospace: "Courier New", Courier, monospace;

@header-letter-spacing: 2px;

@line-height: 1.35;

@font-weight__body-bold: 700;
@font-weight__body-normal: 400;

@font-weight__title-bold: 800;
@font-weight__title-normal: 500;


/*
 * Your Stylesheet
 */

@import 'ui-variables';

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

Add styling for empty workspace

/*
 * Your Stylesheet
 */

@import 'ui-variables';

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

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


/**
 * skin: skin-example-alternate, extends module: example
 * creator:
 */
.skin-example-alternate {
	.bd {
		background-color: rgba(55,77,111,.5);
	}
}
/* END skin: alternate, extends module: example */

Use a property for the example skin that is actually applied

/**
 * skin: skin-example-alternate, extends module: example
 * creator:
 */
.skin-example-alternate {
	.wf-box {
		outline-color: hotpink;
	}
}
/* END skin: alternate, extends module: example */


#codebox .layout-lateralbar {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: @codeboxMenubarWidth+@codeboxLateralbarWidth;
	background: @codeboxLateralbarBackground;
	box-shadow: inset -8px 0px 9px -9px #000000;
	color: @codeboxLateralbarColor;

	.lateral-menu {
		position: absolute;
		left: 0px;
		width: @codeboxMenubarWidth;
		top: 0px;
		bottom: 0px;

		.menu-section {
			margin-bottom: 10px;

			&.menu-bottom {
				position: absolute;
				bottom: 0px;
				margin: 0px;
			}
		}
	}

	.lateral-body {
		position: absolute;
		top: 0px;
		left: @codeboxMenubarWidth;
		bottom: 0px;
		width: @codeboxLateralbarWidth;
		overflow-y: auto;
		overflow-x: hidden;

		.component-searchbar {
			display: none;
		}

		>.files {
			margin: 4px 0px;
			font-size: 15px;
		}
	}

	&.mode-search {
		.lateral-body .component-searchbar {
			display: block;
		}
	}
}

Correct display of search bar

#codebox .layout-lateralbar {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: @codeboxMenubarWidth+@codeboxLateralbarWidth;
	background: @codeboxLateralbarBackground;
	box-shadow: inset -8px 0px 9px -9px #000000;
	color: @codeboxLateralbarColor;

	.lateral-menu {
		position: absolute;
		left: 0px;
		width: @codeboxMenubarWidth;
		top: 0px;
		bottom: 0px;

		.menu-section {
			margin-bottom: 10px;

			&.menu-bottom {
				position: absolute;
				bottom: 0px;
				margin: 0px;
			}
		}
	}

	.lateral-body {
		position: absolute;
		top: 0px;
		left: @codeboxMenubarWidth;
		bottom: 0px;
		width: @codeboxLateralbarWidth;
		overflow-y: auto;
		overflow-x: hidden;

		.searchbar {
			display: none;
		}

		>.files {
			margin: 4px 0px;
			font-size: 15px;
		}
	}

	&.mode-search {
		.lateral-body .searchbar {
			display: block;
		}
	}
}


@import '../../styles/mixins';

.config-deps-manager {
  height: 100%;
  border-top: 1px solid #000;
  padding: 20px;
  position: relative;
  .deps-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300px;
    padding: 20px;
    overflow: auto;
    .scroll-style();

    .note {
      color: fade(white, 50%);
      min-width: 700px;
    max-width: 900px;
    }
  }
  .common-output-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 888;
    border-top: 1px solid #000;
    background-color: #111;
    .scroll-style();

  }

}

Add top border for output panel.

@import '../../styles/mixins';

.config-deps-manager {
  height: 100%;
  border-top: 1px solid #000;
  padding: 20px;
  position: relative;
  .deps-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300px;
    padding: 20px;
    overflow: auto;
    .scroll-style();

    .note {
      color: fade(white, 50%);
      min-width: 700px;
    max-width: 900px;
    }
  }
  .common-output-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 888;
    border-top: 1px solid #666;
    background-color: #111;
    .scroll-style();

  }

}


// Atom Dark UI theme

@import "styles/ui-variables.less";
@import "styles/ui-mixins.less";

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

Fix incorrect theme name in comment

// Atom Light UI theme

@import "styles/ui-variables.less";
@import "styles/ui-mixins.less";

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


/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

Add global transition text and block elements

/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

/* Global Transition ==================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
	.transition(all .2s ease);
}


html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0; padding: 0;
}

body {
  font-family: Lato, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: @color-tungsten;
  background-color: @color-smoke;
  font-kerning: auto;
}

code, pre {
  font-smoothing: subpixel-antialiased;
  letter-spacing: 0px;
}

#ALM-sidebar {
  z-index: 10;
  border-right: 1px solid;
  border-right-color: @color-stone;
}

.app-view {
  display: block;
  position: relative;
  min-width: @min-width;
  width: 100%;
  overflow-y: hidden;

  .tooltip-fake {
    position: absolute;
    width: 106px;
    height: 34px;
    top: 0;
    left: 0;
  }
}

Add webkit-specific tag to antialias property

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0; padding: 0;
}

body {
  font-family: Lato, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: @color-tungsten;
  background-color: @color-smoke;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
}

code, pre {
  -webkit-font-smoothing: subpixel-antialiased;
  letter-spacing: 0px;
}

#ALM-sidebar {
  z-index: 10;
  border-right: 1px solid;
  border-right-color: @color-stone;
}

.app-view {
  display: block;
  position: relative;
  min-width: @min-width;
  width: 100%;
  overflow-y: hidden;

  .tooltip-fake {
    position: absolute;
    width: 106px;
    height: 34px;
    top: 0;
    left: 0;
  }
}


.beta-opt-in-wrapper {
	min-height: 400px;
}

.beta-opt-in {
	.form-group {
		margin-top: 15px;
	}
}

.beta-feature-badge {
	&:extend(.label);
	&:extend(.label-warning);
	padding-bottom: 2px;
	margin-left: 12px;
}

Tweak style of the beta-feature-badge class.

.beta-opt-in-wrapper {
	min-height: 400px;
}

.beta-opt-in {
	.form-group {
		margin-top: 15px;
	}
}

.beta-feature-badge {
	&:extend(.label);
	&:extend(.label-warning);
	vertical-align: 11%;
	padding-bottom: 4px;
	padding-top: 2px;
	margin-left: 12px;
}


@import (reference) '~app/less/variables';

.Wiki {
  padding: @grid-size;

  &__loading-error {
    font-size: @font-size-h4;
    word-wrap: break-word; // in practice this will break the subredditName
    // into multiple lines if needed
  }

  &__try-logging-in {
    margin-top: 2 * @grid-size;
  }
}

Hide table of contents for wikis

@import (reference) '~app/less/variables';

.Wiki {
  padding: @grid-size;

  &__loading-error {
    font-size: @font-size-h4;
    word-wrap: break-word; // in practice this will break the subredditName
    // into multiple lines if needed
  }

  &__try-logging-in {
    margin-top: 2 * @grid-size;
  }

  // Currently, TOC links lead to 404s because the platform router
  // can't handle the anchor links in the table of contents.
  &__content .toc {
    display: none;
  }
}


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

.minimap {
  .highlight-selected {
    -webkit-transform-origin: top left;
  }
  .marker .region {
    position: absolute;
    pointer-events: none;
  }

  .highlight-selected .marker .region {
    border-radius: 2px;
    box-sizing: content-box;
    padding: 0 0px;
    margin: -1px 0 0 0;
    background-color: fadeout(@text-color-highlight, 50%);
  }
}

Implement using a syntax variable for highlights

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

.minimap {
  .highlight-selected {
    -webkit-transform-origin: top left;
  }
  .marker .region {
    position: absolute;
    pointer-events: none;
  }

  .highlight-selected .marker .region {
    border-radius: 2px;
    box-sizing: content-box;
    padding: 0 0px;
    margin: -1px 0 0 0;
    background-color: @syntax-result-marker-color-selected;
  }
}


@import 'impress.md.less';
@import 'dartsduino-doc.less';

Add some required styles in sample.less

@import 'impress.md.less';
@import 'sample.less';
@import 'dartsduino-doc.less';


.badge {
    font-size: 13px;
    display: inline-block;
    color:#fff;
    background: #8e8e93;
    border-radius: 20px;
    padding: 0px 6px;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    .item-after & {
        min-width: 20px;
    }
    .icon & {
        position: absolute;
        left: 100%;
        margin-left: -10px;
        top: -2px;
        font-size: 10px;
        line-height: 16px;
        height: 16px;
        border-radius: 16px;
        padding: 0px 4px;
        min-width: 16px;
        font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
}

Fix badge for F7 icons

.badge {
    font-size: 13px;
    display: inline-block;
    color:#fff;
    background: #8e8e93;
    border-radius: 20px;
    padding: 0px 6px;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    .item-after & {
        min-width: 20px;
    }
    .icon &, .f7-icons &, .framework7-icons & {
        position: absolute;
        left: 100%;
        margin-left: -10px;
        top: -2px;
        font-size: 10px;
        line-height: 16px;
        height: 16px;
        border-radius: 16px;
        padding: 0px 4px;
        min-width: 16px;
        font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
}


/* This class is for the widget subarea inside the widget_area and after
   the prompt div. */
div.widget_subarea {
    padding: 0.44em 0.4em 0.4em 1px;
    margin-left: 6px;
    .box-flex1();
}

Adjust weidget box so widget_subarea aligns with codecell

div.widget_area {
    page-break-inside: avoid;
    .hbox();
}

/* This class is for the widget subarea inside the widget_area and after
   the prompt div. */
div.widget_subarea {
    padding: 0.44em 0.4em 0.4em 1px;
    margin-left: 6px;
    .box-flex1();
}


@import "../ABC-Reader-XMatter/ABC-Reader-XMatter.less";

@XMatterPackName: "ABC Reader Device";

//- On a phone, these will need to be smaller or they'll take up the whole page
.licenseDetails,
.bottomCredits,
.brandingCredits {
    font-size: small;
}

.bottomRow {
    // keeps the "Donated Property - Not For Sale" notice from being off of the bottom of the page.
    margin-bottom: 15px;
}

Remove font-size setting which was making font larger rather than smaller

@import "../ABC-Reader-XMatter/ABC-Reader-XMatter.less";

@XMatterPackName: "ABC Reader Device";

.bottomRow {
    // keeps the "Donated Property - Not For Sale" notice from being off of the bottom of the page.
    margin-bottom: 15px;
}


@import '../abstracts/theme.less';

.page-footer {
  background-color: var(--breadcrumbs-bg);
  border-top: 1px solid var(--breadcrumbs-border);
  width: 100%;
  clear: both;
  font-size: var(--font-size-sm);
}

.page-footer .container-fluid {
  padding: 0;
}

.page-footer__flex-row {
  min-height: 3.5rem;
  display: block;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.page-footer__flex-row > * {
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
}

.page-footer__footer-id-placeholder {
  flex: 1;
  flex-wrap: wrap;
}

.page-footer span {
  display: inline-block;
}

.page-footer__links {
  &:not(:last-child) {
    border-right: 1px solid var(--breadcrumbs-bg);
  }
}

.page-footer a {
  .link-dark();
  font-weight: 600;
}

Fix admin monitor JS showing in footer

@import '../abstracts/theme.less';

.page-footer {
  background-color: var(--breadcrumbs-bg);
  border-top: 1px solid var(--breadcrumbs-border);
  width: 100%;
  clear: both;
  font-size: var(--font-size-sm);
}

.page-footer .container-fluid {
  padding: 0;
}

.page-footer__flex-row {
  min-height: 3.5rem;
  display: block;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.page-footer__flex-row > *:not(script) {
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
}

.page-footer__footer-id-placeholder {
  flex: 1;
  flex-wrap: wrap;
}

.page-footer span {
  display: inline-block;
}

.page-footer__links {
  &:not(:last-child) {
    border-right: 1px solid var(--breadcrumbs-bg);
  }
}

.page-footer a {
  .link-dark();
  font-weight: 600;
}


@import "ui-variables";

.archive-editor {
  background-color: @inset-panel-background-color;
  overflow: auto;

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

    .inset-panel {
      border-width: 0;

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

    .archive-tree {
      padding: 5px;
    }
  }
}

Mark Archive View as contain: strict

@import "ui-variables";

.archive-editor {
  background-color: @inset-panel-background-color;
  overflow: auto;
  contain: strict;

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

    .inset-panel {
      border-width: 0;

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

    .archive-tree {
      padding: 5px;
    }
  }
}


@media only screen and (max-width: 767px) {

  .alignnone,
  .alignleft,
  .alignright,
  .aligncenter {
    float: none;
    display: block;
    margin: 0 auto @baseFontMargin;
  }

}

Update to changes from satushtml 1.5.0. Added styles for comments.

@media only screen and (max-width: 767px) {

  .alignnone,
  .alignleft,
  .alignright,
  .aligncenter {
    float: none;
    display: block;
    margin: 0 auto @baseFontMargin;
  }

}

@media only screen and (max-width: 479px) {

  .comment-list .children {
    padding-left: 10px;
  }

  .comment-list .children li {
    padding-left: 20px;
  }

  .comment header .avatar,
  .comment header h3 {
    float: none;
    margin: 3px 0 0;
  }

  .comment header h3 time span {
    display: block;
  }

}


//
// Modals
// Material Design element Dialogs
// --------------------------------------------------
.modal-content {
  .shadow-z-5();
  border-radius: 2px;
  border: none;
  // Modal header
  // Top section of the modal w/ title and dismiss
  .modal-header {
    border-bottom: none;
    padding-top:    24px;
    padding-right:  24px;
    padding-bottom: 0px;
    padding-left:   24px;
  }
  // Modal body
  // Where all modal content resides (sibling of .modal-header and .modal-footer)
  .modal-body {
    padding-top:    0px;
    padding-right:  24px;
    padding-bottom: 16px;
    padding-left:   24px;
  }
  // Footer (for actions)
  .modal-footer {
    border-top: none;
    padding: 7px;
    button {
      margin: 0;
      padding-left: 16px;
      padding-right: 16px;
      width: auto;
      &.pull-left {
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        left: -5px;
      }
    }
    button+button {
      margin-bottom: 16px;
    }
  }
  .modal-body + .modal-footer {
    padding-top: 0;
  }
}
.modal-backdrop {
  background: rgba(0,0,0,0.3);
}

Fix padding issue for dialogs according Material design guide lines

//
// Modals
// Material Design element Dialogs
// --------------------------------------------------
.modal-content {
  .shadow-z-5();
  border-radius: 2px;
  border: none;
  // Modal header
  // Top section of the modal w/ title and dismiss
  .modal-header {
    border-bottom: none;
    padding-top:    24px;
    padding-right:  24px;
    padding-bottom: 0px;
    padding-left:   24px;
  }
  // Modal body
  // Where all modal content resides (sibling of .modal-header and .modal-footer)
  .modal-body {
    padding-top:    24px;
    padding-right:  24px;
    padding-bottom: 16px;
    padding-left:   24px;
  }
  // Footer (for actions)
  .modal-footer {
    border-top: none;
    padding: 7px;
    button {
      margin: 0;
      padding-left: 16px;
      padding-right: 16px;
      width: auto;
      &.pull-left {
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        left: -5px;
      }
    }
    button+button {
      margin-bottom: 16px;
    }
  }
  .modal-body + .modal-footer {
    padding-top: 0;
  }
}
.modal-backdrop {
  background: rgba(0,0,0,0.3);
}


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

* {
	outline: 0;
}

html, body {
	height: 100%;
}

fieldset.hrText {
	border: 1px solid lightgray;
	border-width: 1px 0 0;
	display: block;
	text-align: center;
}

fieldset.hrText legend {
	display: block;
	width: auto;
	font-size: 1em;
	color: gray;
	border: none;
	padding: 5px 10px;
}

Edit styling of hrText class

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

* {
	outline: 0;
}

html, body {
	height: 100%;
}

fieldset.hrText {
	display: block;
	margin: 20px 0;
	border: 1px solid lightgray;
	border-width: 1px 0 0;
	text-align: center;
}

fieldset.hrText legend {
	display: block;
	width: auto;
	margin: 0;
	padding: 5px 10px;
	border: none;
	font-size: 1em;
	color: gray;
}


article {
  margin: 0 auto;
}

article .content {
  & > :first-child {
    margin-top: 0;
  }

  .top-item {
    margin-top: 0;
  }

  font-family: @font-family-main;
  font-size: 1rem;
  font-weight: @font-weight__body-normal;

  text-align: left;

  padding-top: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 30vh;

  line-height: @line-height;
  word-wrap: break-word;

}

article nav a {
  display: inline;

  text-decoration: underline;

  padding: 0;
  margin: 0;
}

article nav a:hover {
  text-decoration: none;
}

@media (max-width: @mobile-breakpoint) {

  article {
    margin: 0;
  }

  article .content {
    font-size: calc(0.85rem + 1vmin);
    padding: 6vmin;
  }

}

Remove small width font sizing

article {
  margin: 0 auto;
}

article .content {
  & > :first-child {
    margin-top: 0;
  }

  .top-item {
    margin-top: 0;
  }

  font-family: @font-family-main;
  font-size: 1rem;
  font-weight: @font-weight__body-normal;

  text-align: left;

  padding-top: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 30vh;

  line-height: @line-height;
  word-wrap: break-word;

}

article nav a {
  display: inline;

  text-decoration: underline;

  padding: 0;
  margin: 0;
}

article nav a:hover {
  text-decoration: none;
}

@media (max-width: @mobile-breakpoint) {

  article {
    margin: 0;
  }

  article .content {
    padding: 6vmin;
  }

}


/*
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license
 */

.cookiealert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 999;
  opacity: 0;
  border-radius: 0;
  transform: translateY(100%);
  transition: all 500ms ease-out;
  color: #ecf0f1;
  background: rgba(0, 2, 4, 0.1373);

  &.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
  }

  a {
    text-decoration: underline;

    &.alert-link {
      color: #ecf0f1;
    }
  }

  .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
  }
}

Fix background color of cookie alert

/*
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license
 */

.cookiealert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 999;
  opacity: 0;
  border-radius: 0;
  transform: translateY(100%);
  transition: all 500ms ease-out;
  color: #ecf0f1;
  background: rgba(0, 2, 4, 0.8627);

  &.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
  }

  a {
    text-decoration: underline;

    &.alert-link {
      color: #ecf0f1;
    }
  }

  .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
  }
}


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

.help-text-container > div {
  display: none;
  position: absolute;
  width: 198px;
  z-index: 2048;
  h4 { padding-bottom: 6px; }
}

#container {

  #background {
    background: image-url("chrome.png");
    position: absolute;

    top: -35px;
    left: -56px;

    z-index:100;
    height: 720px;
    width: 800px;
  }

  #create-your-first-factlink {
    & > * { #font > .serif(); }
    padding: 32px 72px;
    text-align: center;
    margin-top: 70px;

    z-index: 101;
    position: relative;

    h1 {
      font-size: 36px;
      font-weight: 100;
      padding: 0 0 8px;
    }
    p { text-align: left; }
  }
}

Change z-index of help text

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

.help-text-container > div {
  display: none;
  position: absolute;
  width: 198px;
  z-index: 124;
  h4 { padding-bottom: 6px; }
}

#container {

  #background {
    background: image-url("chrome.png");
    position: absolute;

    top: -35px;
    left: -56px;

    z-index:100;
    height: 720px;
    width: 800px;
  }

  #create-your-first-factlink {
    & > * { #font > .serif(); }
    padding: 32px 72px;
    text-align: center;
    margin-top: 70px;

    z-index: 101;
    position: relative;

    h1 {
      font-size: 36px;
      font-weight: 100;
      padding: 0 0 8px;
    }
    p { text-align: left; }
  }
}


.note-frame * {
  .box-sizing(border-box);
  color: #000;
}

Remove the asterisk selector from Lite UI

.note-frame {
  .box-sizing(border-box);
  color: #000;
}


/**
 * elements.less
 */

md-card {
    display: block;     // override default card styling to inherit height of children
}

md-card-header {        // override default card header styling
    display: block !important;
    padding: 0px !important;
}

md-content.layout-padding {
    top: @navbar-height;
}

.page-header {
    md-icon.header-icon {
        background-image: url(../../images/ic_movie_black_24px.svg);
        margin: 0px 10px 0px 20px;
    }

    .header-title {
        vertical-align: middle;
    }
}

Add margin below md-card element to format bottom of page

/**
 * elements.less
 */

md-card {
    display: block;     // override default card styling to inherit height of children
    margin-bottom: 24px;    // add bottom margin below card
}

md-card-header {        // override default card header styling
    display: block !important;
    padding: 0px !important;
}

md-content.layout-padding {
    top: @navbar-height;
}

.page-header {
    md-icon.header-icon {
        background-image: url(../../images/ic_movie_black_24px.svg);
        margin: 0px 10px 0px 20px;
    }

    .header-title {
        vertical-align: middle;
    }
}


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

atom-text-editor::shadow {
  .gutter[gutter-name="blame"] {
    border-right: 1px solid @base-border-color;
  }
  .blame-gutter {
    width: 100%;
    .blame-gutter-inner {

      padding: 0 5px;
      box-sizing: border-box;

      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      width: 100%;
      text-align: left;

      &.blame-odd {
       background-color: rgba(255, 255, 255, 0.02)
      }

      &.blame-even {
       background-color: rgba(0, 0, 0, 0.02)
      }

      .blame-gutter-handle {
        position: absolute;
        width: 4px;
        height: 100%;
        right: 0;
        top: 0;
        cursor: col-resize;
      }

      .icon-copy {
        .octicon(clippy);
        cursor: pointer;
        padding-right: 5px;
      }

      .icon-copy:hover {
        color: @text-color-info;
      }
    }
  }
 }

Move copy icon to right of the line (thanks to @josa42). Icon is always the same size as font

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

atom-text-editor::shadow {
  .gutter[gutter-name="blame"] {
    border-right: 1px solid @base-border-color;
  }
  .blame-gutter {
    width: 100%;
    .blame-gutter-inner {

      padding: 0 25px 0 5px;
      box-sizing: border-box;

      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      width: 100%;
      text-align: left;

      &.blame-odd {
       background-color: rgba(255, 255, 255, 0.02)
      }

      &.blame-even {
       background-color: rgba(0, 0, 0, 0.02)
      }

      .blame-gutter-handle {
        position: absolute;
        width: 4px;
        height: 100%;
        right: 0;
        top: 0;
        cursor: col-resize;
      }

      .icon-copy {
        .octicon(clippy, @size: 1em);
        cursor: pointer;
        padding-right: 5px;
        position: absolute;
        right: 0;
      }

      .icon-copy:hover {
        color: @text-color-info;
      }
    }
  }
 }


/* Bootstrap base styles */
@import "vendor/custom.bootstrap.mixins.import.less";
@import "vendor/custom.bootstrap.import.less";

/* Project styles */
@import "_colors.import.less";
@import "_sizes.import.less";

body {
  background: #FFF;
  color: #FF3e00;
  margin: 0;
  padding: 0;
}

.container {
  width: 1920px;
  height: 1080px;
  background-image: url("/images/map-base.jpg");
  margin: 0;
  padding: 0;
}

.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
}

svg {
  fill: transparent;
  stroke: #333;
  display: block;
  stroke-width: 2;
}

.location-markers {
  position: absolute;
  top: 0;
  right: 0;
}

Make it ieasier to spot cities

/* Bootstrap base styles */
@import "vendor/custom.bootstrap.mixins.import.less";
@import "vendor/custom.bootstrap.import.less";

/* Project styles */
@import "_colors.import.less";
@import "_sizes.import.less";

body {
  background: #FFF;
  color: #FF3e00;
  margin: 0;
  padding: 0;
}

.container {
  width: 1920px;
  height: 1080px;
  background-image: url("/images/map-base.jpg");
  margin: 0;
  padding: 0;
}

.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
}

svg {
  fill: transparent;
  stroke: #333;
  display: block;
  stroke-width: 2;
}

.location-markers {
  position: absolute;
  top: 0;
  right: 0;
}

.cities {
  fill: white;
}


// Math Rendering
// Hides all data-math elements, but still reserves their space in the DOM.
// when .MathJax renders them, it'll be inside a .MathJax element which is displayed
[data-math]{
    visibility: hidden;

    .MathJax {
      visibility: visible;
    }
}

// KaTeX 1.0.2 generates both HTML and MathML
//
// Hide the HTML and use MathJax for rendering
// TODO: Decide whether to remove KaTeX (involves additional code for MathJax)
.has-html .katex > .katex-html { display: none; }

// HACK: Override some odd properties being directly added on to 2 MathJax-related elements
.MathJax .math {
  > span {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;

    > span {
      position: static !important;
    }
  }
}

Remove static positioning from mathjax spans


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

// @import "ui-variables";
// @import "tree-view";

.term3 {
  overflow: hidden;
  .terminal {
    padding: 0;
    overflow: auto;
    > div {
      white-space: pre;
      > span {
        display: inline-block;
        line-height: inherit;
        height: inherit;
        font-weight: normal !important;
      }
    }

    .terminal-cursor {
      background-color: #fff;
    }

    span {
      white-space: pre;
    }
  }
}

.floobits-terminal {
  padding: 8px;
  font-family: Menlo, "Deja Vu Sans Mono", Consolas, monospace;
  div {
    white-space: nowrap;
  }
}

terminal-list-view {
  display: flex;
  margin-top: 10px;
  .header {
    img {
      width: 22px;
      padding-right: 5px;
    }
    margin-left: 21px;
  }
  ul {
    margin-left: -24px;
    list-style-type: none;
    margin-top: 5px;
  }
}

Move top margin to the header

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

// @import "ui-variables";
// @import "tree-view";

.term3 {
  overflow: hidden;
  .terminal {
    padding: 0;
    overflow: auto;
    > div {
      white-space: pre;
      > span {
        display: inline-block;
        line-height: inherit;
        height: inherit;
        font-weight: normal !important;
      }
    }

    .terminal-cursor {
      background-color: #fff;
    }

    span {
      white-space: pre;
    }
  }
}

.floobits-terminal {
  padding: 8px;
  font-family: Menlo, "Deja Vu Sans Mono", Consolas, monospace;
  div {
    white-space: nowrap;
  }
}

terminal-list-view {
  display: flex;
  .header {
    margin-top: 10px;
    img {
      width: 22px;
      padding-right: 5px;
    }
    margin-left: 21px;
  }
  ul {
    margin-left: -24px;
    list-style-type: none;
    margin-top: 5px;
  }
}


.SquareButton {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: @blue;

  &.m-disabled {
    background-color: @pale-grey;
  }

  &.m-danger {
    background-color: @ban-red;
  }

  &__content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1.5;
    color: @off-white;
    letter-spacing: 1.6;
  }
}

Apply nightmode theme to disabled square buttons

.SquareButton {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: @blue;

  &.m-disabled {
    .themeify({
      background-color: @theme-line-color;
    });
  }

  &.m-danger {
    background-color: @ban-red;
  }

  &__content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1.5;
    color: @off-white;
    letter-spacing: 1.6;
  }
}


.api-credentials {
    margin-bottom: 2em;
}

.api-input {
    input[type=text] {
        box-shadow: none;
        text-align: left;
        font-size: 1.5em;
        width: 78%;
    }
    label {
      font-weight: bold;
      display: block;
      width: 10%;
      float: left;
      padding: 0.4em;
    }
}

Remove float from api-key labels

.api-credentials {
    margin-bottom: 2em;
}

.api-input {
    input[type=text] {
        box-shadow: none;
        text-align: left;
        font-size: 1.5em;
        width: 78%;
    }
    label {
      font-weight: bold;
      display: block;
      padding: 0.4em;
    }
}


/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    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/>.
 */

.js-react-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: @z-index--blackout;
}

Fix z-index of modal dialog

/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    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/>.
 */

.js-react-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: @z-index--blackout-visible;
}


/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

Add global transition text and block elements

/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

/* Global Transition ==================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
	.transition(all .2s ease);
}