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

.forum-list {
  padding-top: 10px;
  padding-bottom: 10px;
  .default-gutter-v2();

  &__button {
    flex: none;
    margin: 2px 5px;
  }

  &__buttons {
    flex: wrap;
    margin: -2px -5px;
    display: none;

    @media @desktop {
      display: flex;
    }
  }

  &__menu {
    margin-left: auto;

    @media @desktop {
      display :none;
    }
  }

  &__menu-button {
    .reset-input();
    .circle(30px);
    .center-content();
    .default-text-shadow();
    background-color: @osu-colour-blue-2;
  }

  &__header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }

  &__items {
    margin-top: 10px;
    list-style: none;
    padding: 0;
  }
}

Fix forum menu on mobile

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

.forum-list {
  padding-top: 10px;
  padding-bottom: 10px;
  .default-gutter-v2();

  &__button {
    flex: none;
    margin: 2px 5px;
  }

  &__buttons {
    flex: wrap;
    margin: -2px -5px;
    display: none;

    @media @desktop {
      display: flex;
    }
  }

  &__menu {
    margin-left: auto;
    position: relative;

    @media @desktop {
      display :none;
    }
  }

  &__menu-button {
    .reset-input();
    .circle(30px);
    .center-content();
    .default-text-shadow();
    background-color: @osu-colour-blue-2;
  }

  &__header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }

  &__items {
    margin-top: 10px;
    list-style: none;
    padding: 0;
  }
}


@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;


/*****************************************************************************/
/* PageTitleShow: Style */
/*****************************************************************************/
.hover-page-title {
  position: relative;
}

.hover-page-title:first-child {
  border: 1px dotted rgba(0,0,0,0);
}

.hover-page-title:first-child:hover {
  border: 1px dotted silver;
  border-radius: 5px;

  .page-title-actions {
    display: block;
  }
}

.page-title-actions {
  position: absolute;
  right: 0px;
  top: 0px;
  display: none;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgba(225, 225, 225, .9);
  padding-left: 7px;
  padding-right: 7px;

  a {
    text-decoration: none;
  }
}

.title-border:first-child {
  border: 1px dotted silver;
  border-radius: 5px;
}

Improve a bit highlighting of page settings

/*****************************************************************************/
/* PageTitleShow: Style */
/*****************************************************************************/
.hover-page-title {
  position: relative;
}

.hover-page-title:first-child {
  border: 1px dotted rgba(0,0,0,0);
}

.hover-page-title:first-child:hover {
  border: 1px dotted silver;
  border-radius: 5px;

  .page-title-actions {
    display: block;
  }
}

.page-title-actions {
  position: absolute;
  right: 0px;
  top: 0px;
  display: none;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgba(225, 225, 225, .9);
  padding-left: 7px;
  padding-right: 7px;

  a {
    text-decoration: none;
  }
}

.title-border:first-child {
  border: 1px solid #eeeeee;
  border-radius: 5px;
}


// index.less is the entry for all styles.
@import './reset.css';
@import './global.less';
@import '~antd/dist/antd.less';
@import '../features/home/style.less';
@import '../features/common/style.less';
@import '../features/rekit-cmds/style.less';
@import '../features/diagram/style.less';
@import '../features/rekit-tools/style.less';

Use antd css to improve performance.

// index.less is the entry for all styles.
@import './reset.css';
@import './global.less';
@import '~antd/dist/antd.css';
@import '../features/home/style.less';
@import '../features/common/style.less';
@import '../features/rekit-cmds/style.less';
@import '../features/diagram/style.less';
@import '../features/rekit-tools/style.less';


.store-column {
  display: flex;
  flex-direction: column;
}

.store-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.store-column--full-width {
  width: 100%;
}

.store-support-osu {
  display: flex;
  &.row {
    margin: 20px; // TODO: placeholder
  }
}

.store-support-osu__textual-info {
  margin: 8px 20px;  // TODO: placeholder
}

.store-support-osu__user {
  display: flex;
  width: 100%;
  &.store-support-osu__user--searching {
    display: none;
  }
}

.store-support-osu--disabled {
  .js-slider {
    .ui-slider-handle {
      background-color: gray;
      border-radius: 50%;
    }
    &.ui-slider {
      background-color: lightgray;
      .ui-slider-range {
        background-color: gray;
      }
    }
  }
}

.ui-slider {
  .ui-slider-pip {
    position: absolute;
    margin-top: 8px;
    text-align: center;
    .ui-slider-label {
      padding: 8px;
      margin-left: -100%;
      cursor: pointer;
      &:empty {
        display: none;
      }
    }
  }
}

Increase the click area of the slider labels.

.store-column {
  display: flex;
  flex-direction: column;
}

.store-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.store-column--full-width {
  width: 100%;
}

.store-support-osu {
  display: flex;
  &.row {
    margin: 20px; // TODO: placeholder
  }
}

.store-support-osu__textual-info {
  margin: 8px 20px;  // TODO: placeholder
}

.store-support-osu__user {
  display: flex;
  width: 100%;
  &.store-support-osu__user--searching {
    display: none;
  }
}

.store-support-osu--disabled {
  .js-slider {
    .ui-slider-handle {
      background-color: gray;
      border-radius: 50%;
    }
    &.ui-slider {
      background-color: lightgray;
      .ui-slider-range {
        background-color: gray;
      }
    }
  }
}

.ui-slider {
  .ui-slider-pip {
    position: absolute;
    margin-top: 8px;
    text-align: center;
    .ui-slider-label {
      padding: 16px;
      margin-left: -100%;
      cursor: pointer;
      &:empty {
        display: none;
      }
    }
  }
}


@import "ui-variables";

// .editor.editor-colors .gutter .line-number {
//   &.php-debug-breakpoint {
//     color: #fff;
//     background-color: #0F0;
//   }
// }

.gutter .line-numbers .php-debug-breakpoint {
    color: #fff;
    background-color: #0F0;
}

.debug-break {

  background-color: fade(@background-color-success,25%);

}

Fix breakpoints not showing up on macosx

@import "ui-variables";

// .editor.editor-colors .gutter .line-number {
//   &.php-debug-breakpoint {
//     color: #fff;
//     background-color: #0F0;
//   }
// }

.gutter .line-number .php-debug-breakpoint {
    color: #fff;
    background-color: #0F0;
}

.debug-break {

  background-color: fade(@background-color-success,25%);

}


/**
 * @module <$=pageName$>
 * @author <$=author$>
 * @date <$=date$>
 * */

Add Default Font Configuration for Mobile Page.

/**
 * @module <$=pageName$>
 * @author <$=author$>
 * @date <$=date$>
 * */

//REF: https://github.com/AlloyTeam/Mars/blob/master/solutions/font-family.md
//Only for mobile devices
body {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}


#charts-container {
    display: flex;
    flex-direction: column;
    width: 100%;

  #primary-container {
    flex: 5;
  }

  .secondary-container {
    flex: 1;
  }

  #x-axis-row {
    flex: 0 0 @x-axis-height;
    display: flex;
    flex-direction: row;

    #x-axis-container {
      flex: 1;
      height: @x-axis-height;
      margin-right: @y-axis-width
    }
  }

  #navbar-row {
    flex: 0 0.5 @navigator-height;
    display: flex;
    flex-direction: row;

    #navbar-container {
      flex: 1;
      max-height: @navigator-height;
      margin-right: @y-axis-width;

      .cartesian-chart {
        display: block;
      }
    }
  }
}

Fix issue for unlimited primary container width

#charts-container {
    display: flex;
    flex-direction: column;
    width: 100%;

  #primary-container {
    width: 100%;
    flex: 5;
  }

  .secondary-container {
    flex: 1;
  }

  #x-axis-row {
    flex: 0 0 @x-axis-height;
    display: flex;
    flex-direction: row;

    #x-axis-container {
      flex: 1;
      height: @x-axis-height;
      margin-right: @y-axis-width
    }
  }

  #navbar-row {
    flex: 0 0.5 @navigator-height;
    display: flex;
    flex-direction: row;

    #navbar-container {
      flex: 1;
      max-height: @navigator-height;
      margin-right: @y-axis-width;

      .cartesian-chart {
        display: block;
      }
    }
  }
}


.editor-stats-wrapper {
  padding: 5px;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 9999;
}

.editor-stats {
  height: 50px;
  width: 100%;
  background: #1d1f21;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  .bar {
    fill: rgba(255, 255, 255, 0.2);
    shape-rendering: crispedges;

    &.max {
      fill: rgba(0, 163, 255, 1);
    }
  }

  text {
    font-size: 10px;
    fill: rgba(255, 255, 255, 0.2);
    font-family: Courier;
  }

  .minor text {
    display: none;
  }

  line {
    stroke: #ccc;
    stroke-opacity: 0.05;
    stroke-width: 1px;
    shape-rendering: crispedges;
  }

  path.domain {
    display: none;
  }
}

Remove z-index on editor stats

.editor-stats-wrapper {
  padding: 5px;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.editor-stats {
  height: 50px;
  width: 100%;
  background: #1d1f21;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  .bar {
    fill: rgba(255, 255, 255, 0.2);
    shape-rendering: crispedges;

    &.max {
      fill: rgba(0, 163, 255, 1);
    }
  }

  text {
    font-size: 10px;
    fill: rgba(255, 255, 255, 0.2);
    font-family: Courier;
  }

  .minor text {
    display: none;
  }

  line {
    stroke: #ccc;
    stroke-opacity: 0.05;
    stroke-width: 1px;
    shape-rendering: crispedges;
  }

  path.domain {
    display: none;
  }
}


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

.media-footer > .metadata {
  position: relative;

  dl {
    margin-bottom: 0;

    > dt {
      padding: 10px 0;
      width: 225px;
      text-align: left;
      color: @gray-dark;
    }

    > dd {
      margin: 0;
      border-bottom: 1px solid @gray-lighter;

      &:last-child {
        border: none;
      }

      > div {
        padding: 10px 10px 10px 225px;

        > ul {
          padding: 0 0 0 15px;
        }
      }
    }
  }

  .name {
    &::after {
      content: ",";
    }

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

Use child selectors when possible

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

.media-footer > .metadata {
  position: relative;

  > div > dl {
    margin-bottom: 0;

    > dt {
      padding: 10px 0;
      width: 225px;
      text-align: left;
      color: @gray-dark;
    }

    > dd {
      margin: 0;
      border-bottom: 1px solid @gray-lighter;

      &:last-child {
        border: none;
      }

      > div {
        padding: 10px 10px 10px 225px;

        > ul {
          padding: 0 0 0 15px;
        }

        > .name {
          &::after {
            content: ",";
          }

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


// Variables

@theme-color: #1ad68f;
@light-gray: #ddd;
@dark-gray: #333;
@text-color: @dark-gray;
@light-text-color: lighten(@text-color, 20%);

// Functional

@footer-background: @dark-gray;
@footer-foreground: @dark-gray;
@header-background: white;
@header-foreground: @theme-color;
@body-background: white;

@brand-primary: @theme-color;

Refactor CSS to use more bootstrap.

// Variables

@theme-color: #1ad68f;
@light-text-color: @gray-light;
@border-color: #ddd;

// Functional

@footer-bg: @body-bg;
@footer-fg: @gray-dark;
@header-bg: @body-bg;
@header-fg: @theme-color;

// Bootstrap overrides
@brand-primary: @theme-color;
@nav-tabs-border-color: @border-color;
@table-border-color: @border-color;


//TODO this shouldn't be here
div.bloom-page{
    border-bottom: 0 !important;
    display: none !important; //we don't show unless we're selected

    transition: opacity 0.5s;
}

html,body{
    height:100%;
    width:100%;
}

#root{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    //border: solid 1px orange;
}

#scaler{
    transform-origin: left top;
     //border: solid 1px red;
}

#pageViewer{
     display: flex;
     flex-direction: row;
     //when we do the transform: scale(n), which is done via code, we want
     //to still stick to the upper left corner
     transform-origin: left top 0px;
}

body{
     overflow: hidden;
}
.bloom-page.currentPage{
    display: block !important;
}
.bloom-page::after{
    content:'';
}

.numberedPage:after{
  content: '' !important;
}

Make image use more of the screen in landscape

//TODO this shouldn't be here
div.bloom-page{
    border-bottom: 0 !important;
    display: none !important; //we don't show unless we're selected

    transition: opacity 0.5s;
}

html,body{
    height:100%;
    width:100%;
}

#root{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    //border: solid 1px orange;
}

#scaler{
    transform-origin: left top;
     //border: solid 1px red;
}

#pageViewer{
     display: flex;
     flex-direction: row;
     //when we do the transform: scale(n), which is done via code, we want
     //to still stick to the upper left corner
     transform-origin: left top 0px;
}

body{
     overflow: hidden;
}
.bloom-page.currentPage{
    display: block !important;
}
.bloom-page::after{
    content:'';
}

.numberedPage:after{
  content: '' !important;
}

.Device16x9Landscape .marginBox {
    background-color: black;

    .split-pane.horizontal-percent > .split-pane-component.position-top{
        margin-bottom: 0;
    }

    .bloom-imageContainer{
        //the basePage.css has a "- 3px" that leaves the bottom of the screen unused
        height: calc(100%) !important;
    }
}


@import "../../capsule/view/theme/default/stylesheet/_mixins";
@import "_mixin.less";
@import "_ui.less";
@import "_theme.less";
@import "_menu.less";

Comment out theme and menu include.

@import "../../capsule/view/theme/default/stylesheet/_mixins";
@import "_mixin.less";
@import "_ui.less";
// @import "_theme.less";
// @import "_menu.less";


.province-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    &.our-side {
        justify-content: flex-end;
        margin: auto;
    }
}

.province-deck {
    margin: 5px;

    &.our-side {
        justify-content: flex-start;
    }

    .popup {
        position: absolute;
        min-height: 92px;
        min-width: 168px;
        left: 90px;
        top: -75px;

        .inner {
            columns: 2;
            min-height: 128px;

            .card-wrapper {
                margin: 5px 0 0 0;
            }
        }

        &.hidden {
            display: none;
        }

    }
}

Use flex layout in province deck popup

.province-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    &.our-side {
        justify-content: flex-end;
        margin: auto;
    }
}

.province-deck {
    margin: 5px;

    &.our-side {
        justify-content: flex-start;
    }

    .popup {
        position: absolute;
        min-height: 92px;
        min-width: 180px;
        left: 90px;
        top: -75px;

        .inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: flex-start;
            min-height: 128px;

            .card-wrapper {
                margin: 5px 0 0 0;
            }
        }

        &.hidden {
            display: none;
        }
    }

    &.large {
        .popup {
            min-width: 240px
        }
    }

    &.x-large {
        .popup {
            min-width: 320px
        }
    }
}


/* ========================================================================== *\
   Utilities -> Positions ($utilities-positions)
\* ========================================================================== */

//
// pos = position
// a   = absolute
// f   = fixed
// r   = relative
// s   = static
//

.posa {
  position: absolute !important;
}

.posf {
  position: fixed !important;
}

.posr {
  position: relative !important;
}

.poss {
  position: static !important;
}

.screens({
  .xs-posa {
    position: absolute !important;
  }

  .xs-posf {
    position: fixed !important;
  }

  .xs-posr {
    position: relative !important;
  }

  .xs-poss {
    position: static !important;
  }
},{
  .sm-posa {
    position: absolute !important;
  }

  .sm-posf {
    position: fixed !important;
  }

  .sm-posr {
    position: relative !important;
  }

  .sm-poss {
    position: static !important;
  }
},{
  .md-posa {
    position: absolute !important;
  }

  .md-posf {
    position: fixed !important;
  }

  .md-posr {
    position: relative !important;
  }

  .md-poss {
    position: static !important;
  }
},{
  .lg-posa {
    position: absolute !important;
  }

  .lg-posf {
    position: fixed !important;
  }

  .lg-posr {
    position: relative !important;
  }

  .lg-poss {
    position: static !important;
  }
},{
  .xl-posa {
    position: absolute !important;
  }

  .xl-posf {
    position: fixed !important;
  }

  .xl-posr {
    position: relative !important;
  }

  .xl-poss {
    position: static !important;
  }
},{
  .xxl-posa {
    position: absolute !important;
  }

  .xxl-posf {
    position: fixed !important;
  }

  .xxl-posr {
    position: relative !important;
  }

  .xxl-poss {
    position: static !important;
  }
});

Use mixin to generate position breakpoint classes

/* ========================================================================== *\
   Utilities -> Positions ($utilities-positions)
\* ========================================================================== */

//
// pos = position
// a   = absolute
// f   = fixed
// r   = relative
// s   = static
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}posa {
    position: absolute !important;
  }

  .@{breakpoint-prefix}posf {
    position: fixed !important;
  }

  .@{breakpoint-prefix}posr {
    position: relative !important;
  }

  .@{breakpoint-prefix}poss {
    position: static !important;
  }
});


.analytics .widget-item .content.accounts-cash-balance {
  .tall-widget();

  .data-container {
    height: ~"calc(@{impac-big-widget-size} - 20px)";
    width: 100%;
    display: flex;
  }

  .left-panel {
    flex: 0;
    min-width: 180px;
    overflow: auto;
  }

  #cash-balance-legend {

    .header {

      .group-item {
        display: flex;
        align-items: center;
        min-height: 45px;
        margin: 3px;
        font-size: 13px;
        padding: 3px;
        cursor: pointer;
        user-select: none;
        &:hover {
          background-color: @impac-widget-menus-hover-background-color;
        }
        i {
          font-size: 19px;
          padding: 4px;
          margin-top: 1px
        }
        span { color: @impac-widget-text-color; }
      }
    }
  }

  .right-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);

    .top-bar {
      flex: 0;
      min-height: 50px;
    }

    // Highchart container
    #cashBalanceChart {
      flex: 1;
    }
  }
}

Remove box-shadow from cash balance chart container

.analytics .widget-item .content.accounts-cash-balance {
  .tall-widget();

  .data-container {
    height: ~"calc(@{impac-big-widget-size} - 20px)";
    width: 100%;
    display: flex;
  }

  .left-panel {
    flex: 0;
    min-width: 180px;
    overflow: auto;
  }

  #cash-balance-legend {

    .header {

      .group-item {
        display: flex;
        align-items: center;
        min-height: 45px;
        margin: 3px;
        font-size: 13px;
        padding: 3px;
        cursor: pointer;
        user-select: none;
        &:hover {
          background-color: @impac-widget-menus-hover-background-color;
        }
        i {
          font-size: 19px;
          padding: 4px;
          margin-top: 1px
        }
        span { color: @impac-widget-text-color; }
      }
    }
  }

  .right-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;

    .top-bar {
      flex: 0;
      min-height: 50px;
    }

    // Highchart container
    #cashBalanceChart {
      flex: 1;
    }
  }
}


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

@font-face { .octicon-font(); }

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

atom-workspace {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  color: @text-color;
  background-color: @app-background-color;
  font: menu;
  font-family: @font-family;
  font-size: inherit;
  line-height: inherit;

  atom-workspace-axis.horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  atom-workspace-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}

Use menu font on root element too

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

@font-face { .octicon-font(); }

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

atom-workspace {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  color: @text-color;
  background-color: @app-background-color;
  font: menu;
  font-family: @font-family;
  font-size: inherit;
  line-height: inherit;

  atom-workspace-axis.horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  atom-workspace-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}


.modal {
  position: absolute;
  z-index: 100;
  width: 80vw;
  margin: 20px 10vw ;
  transform: translateY(calc(~'-100% - 80px'));
  transition: transform 300ms;
  &__check {
    display: none;
  }
  &__outside {
    opacity: 0;
    background: @first;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100vw;
    height: 0;
    cursor: pointer;
    transition: opacity 300ms;
  }
  &__check:checked ~ .modal {
    transform: translateY(0);
    &__outside {
      height: 100vh;
      opacity: 0.5;
    }
  }
}

Hide add post button on mobile

.modal {
  position: absolute;
  z-index: 100;
  width: 80vw;
  margin: 20px 10vw ;
  transform: translateY(calc(~'-100% - 80px'));
  transition: transform 300ms;
  &__check {
    display: none;
  }
  &__outside {
    opacity: 0;
    background: @first;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100vw;
    height: 0;
    cursor: pointer;
    transition: opacity 300ms;
  }
  &__check:checked ~ .modal {
    transform: translateY(0);
    &__outside {
      height: 100vh;
      opacity: 0.5;
    }
  }
  &__button {
    display: none;
  }
  @media @media-m-min {
    display: block;
  }
}


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

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

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

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

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

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

Change the @alt-font from volkhorn to volkhov

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

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

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

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

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

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


@import "ui-variables";

:focus {
  outline: none;
}

.pull-center {
  margin-left: auto;
  margin-right: auto;
}

.padded {
  padding: @component-padding;
}

.block {
  display: block;
  margin-bottom: @component-padding;
}
div > .block:last-child {
  margin-bottom: 0;
}

.inline-block, .inline-block-tight {
  display: inline-block;
  vertical-align: middle;
}
.inline-block {
  margin-right: @component-padding;
}
.inline-block-tight {
  margin-right: @component-padding/2;
}
div > .inline-block:last-child, div > .inline-block-tight:last-child {
  margin-right: 0;
}

Use left margin in inline-blocks to the right

@import "ui-variables";

:focus {
  outline: none;
}

.pull-center {
  margin-left: auto;
  margin-right: auto;
}

.padded {
  padding: @component-padding;
}

.block {
  display: block;
  margin-bottom: @component-padding;
}
div > .block:last-child {
  margin-bottom: 0;
}

.inline-block, .inline-block-tight {
  display: inline-block;
  vertical-align: middle;
}
.inline-block {
  margin-right: @component-padding;
}
.inline-block-tight {
  margin-right: @component-padding/2;
}
div > .inline-block:last-child,
div > .inline-block-tight:last-child {
  margin-right: 0;
}

// Use left margin when it's in a float: right element.
// Sets the margin correctly when inline blocks are hidden and shown.
.pull-right {
  .inline-block {
    margin-right: 0;
    margin-left: @component-padding;
  }
  .inline-block-tight {
    margin-right: 0;
    margin-left: @component-padding/2;
  }

  > .inline-block:first-child,
  > .inline-block-tight:first-child {
    margin-left: 0;
  }
}


// Set a default icon for pinned tabs (when file-icons is not active)
.tab.pinned-tab[data-type="TextEditor"] > :not([class*="-icon"])::before,
.tab.pinned-tab[data-type="ImageEditor"] > :not([class*="-icon"])::before {
  display: inline-block;
  font-family: 'Octicons Regular';
  font-size: medium;
  font-style: normal !important;
  left: -76px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.tab.pinned-tab[data-type="TextEditor"] > :not([class*="-icon"])::before {
  content: '\f011';
}

.tab.pinned-tab[data-type="ImageEditor"] > :not([class*="-icon"])::before {
  content: '\f012';
}

Add missing icon to tabs without an icon

// Set a default icon for pinned tabs (when file-icons is not active)
.tab.pinned-tab[data-type="Object"] > :not([class*="-icon"])::before,
.tab.pinned-tab[data-type="ImageEditor"] > :not([class*="-icon"])::before,
.tab.pinned-tab[data-type="TextEditor"] > :not([class*="-icon"])::before, {
  display: inline-block;
  font-family: 'Octicons Regular';
  font-size: medium;
  font-style: normal !important;
  left: -76px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.tab.pinned-tab[data-type="Object"] > :not([class*="-icon"])::before {
  content: '\f011'; // https://octicons.github.com/icon/file/
}

.tab.pinned-tab[data-type="ImageEditor"] > :not([class*="-icon"])::before {
  content: '\f012'; // https://octicons.github.com/icon/file-media/
}

.tab.pinned-tab[data-type="TextEditor"] > :not([class*="-icon"])::before {
  content: '\f011'; // https://octicons.github.com/icon/file/
}


select, button, a, a:visited { -webkit-tap-highlight-color:rgba(0,0,0,0); border:none; -webkit-appearance: none; text-decoration:none; color:inherit; }

body {
    -webkit-text-size-adjust: none;
}

// Mixin
.box-sizing {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
///

div {
  // applying this to divs prevents transtion flicker in ios
  -webkit-transform-style:preserve-3d;
  -webkit-perspective:0px;
  -webkit-backface-visibility: hidden;
}

#flight {
  -webkit-transform-style:flat!important;
  -webkit-perspective:0px!important;
  -webkit-backface-visibility: hidden;
}

header {
  .box-sizing;
  left:0;
  padding:0;
  text-align:center;
  width:100%;
  height:50px;
  z-index:2;
  -webkit-user-select: none;
	-webkit-touch-callout: none;
}

.panel {
  display: none;
  height:100%;
  left:0;
  position: absolute;
  top:0;
  width:100%;
  .box-sizing;
    &.visible {
      display: block;
    }
}

Add .btn class to stop stop highlight list.

select, button, a, a:visited, .btn { -webkit-tap-highlight-color:rgba(0,0,0,0); border:none; -webkit-appearance: none; text-decoration:none; color:inherit; }

body {
    -webkit-text-size-adjust: none;
}

// Mixin
.box-sizing {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
///

div {
  // applying this to divs prevents transtion flicker in ios
  -webkit-transform-style:preserve-3d;
  -webkit-perspective:0px;
  -webkit-backface-visibility: hidden;
}

#flight {
  -webkit-transform-style:flat!important;
  -webkit-perspective:0px!important;
  -webkit-backface-visibility: hidden;
}

header {
  .box-sizing;
  left:0;
  padding:0;
  text-align:center;
  width:100%;
  height:50px;
  z-index:2;
  -webkit-user-select: none;
	-webkit-touch-callout: none;
}

.panel {
  display: none;
  height:100%;
  left:0;
  position: absolute;
  top:0;
  width:100%;
  .box-sizing;
    &.visible {
      display: block;
    }
}


// Article view
#content .title {
  & > h1 {
    font-size: 32px;
    text-align: left;
    line-height: 36px;
  }

  p {
    font-size: 14px;
    text-align: left;
    color: @gray;
    margin-top: 0;
  }

  hr {
    margin: 0.5em 0 1.5em;
  }
}

#content {
  article {
    background: white;
    margin-bottom: 50px;
    padding: 25px 30px;
    border: 1px solid #E0E0E0;
    .border-radius;
  }

  .doc {
    & > h1 {
      text-align: left;
      font-size: 1.9em;
      line-height: 1em;
      color: #222;
    }

    h6 { margin: 0; }

    p {
      font-size: 14px;
      line-height: 20px;
    }

    li {
      list-style: none;
      line-height: 26px;
    }

  }
}

Add ordered & unordered list styles

// Article view
#content .title {
  & > h1 {
    font-size: 32px;
    text-align: left;
    line-height: 36px;
  }

  p {
    font-size: 14px;
    text-align: left;
    color: @gray;
    margin-top: 0;
  }

  hr {
    margin: 0.5em 0 1.5em;
  }
}

#content {
  article {
    background: white;
    margin-bottom: 50px;
    padding: 25px 30px;
    border: 1px solid #E0E0E0;
    .border-radius;
  }

  .doc {
    & > h1 {
      text-align: left;
      font-size: 1.9em;
      line-height: 1em;
      color: #222;
    }

    h6 { margin: 0; }

    p {
      font-size: 14px;
      line-height: 20px;
    }

    li {
      line-height: 26px;
    }

    ul li {
      padding-left: 5px;

      &:before {
        text-indent: -2.7em;
      }
    }

    ol {
      counter-reset: ordered;
      padding-left: 16px;
      list-style: none;

      li { padding: 3px 0; }

      li::before {
        content: counter(ordered);
        counter-increment: ordered;
        background: #0F5391;
        color: white;
        border-radius: 13px;
        width: 18px;
        height: 18px;
        display: inline-block;
        text-align: center;
        margin-right: 15px;
        font-size: 11px;
        font-weight: bold;
        line-height: 17px;
    }
  }

  }
}


html, body {
  margin: 0;
  padding: 0;
  background: #444;
  overflow: hidden;
}

#boids {
}

Add radial gradient to background, cuz it looks nice

@backgroundDark: #222;
@backgroundLight: #444;

html, body {
  margin: 0;
  padding: 0;
  background: @backgroundLight;
  background: -moz-radial-gradient(center, circle cover, @backgroundLight 0%, @backgroundDark 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@backgroundLight), color-stop(100%,@backgroundDark)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, circle cover, @backgroundLight 0%,@backgroundDark 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, circle cover, @backgroundLight 0%,@backgroundDark 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, circle cover, @backgroundLight 0%,@backgroundDark 100%); /* IE10+ */
  background: radial-gradient(circle at center, @backgroundLight 0%,@backgroundDark 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@backgroundLight', endColorstr='@backgroundDark',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  overflow: hidden;
}

#boids {
}


.error {

  h2, h3 {
    opacity: 0.5;
    max-width: 70%;
    font-style: italic;
    font-size: 32px;
    text-align: center;
  }

  h1 {
    font-size: 120px;
    line-height: 100px;
  }

  p {
    font-size: 48px;
    font-weight: normal;
    line-height: 48px;
    padding: 50px 0px;
    text-align: center;
  }
}

Fix the font formatting to use 1em rather than pixels for line-height

.error {

  h2, h3 {
    opacity: 0.5;
    max-width: 70%;
    font-style: italic;
    font-size: 32px;
    text-align: center;
  }

  h1 {
    font-size: 120px;
    line-height: 100px;
  }

  p {
    font-size: 48px;
    font-weight: normal;
    line-height: 1em;
    padding: 50px 0px;
    text-align: center;
  }
}


//
// Administration
// --------------------------------------------------

.admin-menu{
  .make-xs-column(5);
  .make-sm-column(3);
}

.admin-category, #admin-page-content{
  .make-xs-column(7);
  .make-sm-column(9);
}

Make the Administration sections from the left side narrower on Flamingo.

//
// Administration
// --------------------------------------------------

.admin-menu{
  .make-xs-column(5);
  .make-sm-column(3);

  max-width: 300px;
}

.admin-category, #admin-page-content{
  .make-xs-column(7);
  .make-sm-column(9);
}


.ui-autocomplete
{
  background: none;
  background-color: @apos-white;
  .apos-drop-shadow;

  .ui-menu-item
  {
    color: @apos-primary;
    background-color: @apos-light;
    border: none;
    padding: @apos-padding-1;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
  }

  .ui-menu-item-wrapper {
    padding: 10px;
    background: transparent;
    border: none;
  }

  .ui-state-active,
  .ui-state-active:hover,
  .ui-widget-content .ui-state-active,
  .ui-widget-content .ui-state-active:hover
  {
    border: none;
    color: @apos-white;
    background: none;
    background-color: @apos-primary;
    font-weight: 600;
    margin: 0;
  }

}

Fix text color in default state

.ui-autocomplete
{
  background: none;
  background-color: @apos-white;
  .apos-drop-shadow;

  .ui-menu-item
  {
    color: @apos-black;
    background-color: @apos-light;
    border: none;
    padding: @apos-padding-1;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
  }

  .ui-menu-item-wrapper {
    padding: 10px;
    background: transparent;
    border: none;
  }

  .ui-state-active,
  .ui-state-active:hover,
  .ui-widget-content .ui-state-active,
  .ui-widget-content .ui-state-active:hover
  {
    border: none;
    color: @apos-white;
    background: none;
    background-color: @apos-primary;
    font-weight: 600;
    margin: 0;
  }

}


/* ========================================================================== *\
   Utilities -> Vertical Alignment ($utilities-vertical-alignment)
\* ========================================================================== */

//
// Vertical alignment
//
// va = vertical-align
// t  = top
// b  = bottom
// m  = middle
//

.vat {
  vertical-align: top !important;
}

.vab {
  vertical-align: bottom !important;
}

.vam {
  vertical-align: middle !important;
}

.screens({
  .xs-vat {
    vertical-align: top !important;
  }

  .xs-vab {
    vertical-align: bottom !important;
  }

  .xs-vam {
    vertical-align: middle !important;
  }
},{
  .sm-vat {
    vertical-align: top !important;
  }

  .sm-vab {
    vertical-align: bottom !important;
  }

  .sm-vam {
    vertical-align: middle !important;
  }
},{
  .md-vat {
    vertical-align: top !important;
  }

  .md-vab {
    vertical-align: bottom !important;
  }

  .md-vam {
    vertical-align: middle !important;
  }
},{
  .lg-vat {
    vertical-align: top !important;
  }

  .lg-vab {
    vertical-align: bottom !important;
  }

  .lg-vam {
    vertical-align: middle !important;
  }
},{
  .xl-vat {
    vertical-align: top !important;
  }

  .xl-vab {
    vertical-align: bottom !important;
  }

  .xl-vam {
    vertical-align: middle !important;
  }
},{
  .xxl-vat {
    vertical-align: top !important;
  }

  .xxl-vab {
    vertical-align: bottom !important;
  }

  .xxl-vam {
    vertical-align: middle !important;
  }
});

Use mixin to generate vertical alignment breakpoint classes

/* ========================================================================== *\
   Utilities -> Vertical Alignment ($utilities-vertical-alignment)
\* ========================================================================== */

//
// Vertical alignment
//
// va = vertical-align
// t  = top
// b  = bottom
// m  = middle
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}vat {
    vertical-align: top !important;
  }

  .@{breakpoint-prefix}vab {
    vertical-align: bottom !important;
  }

  .@{breakpoint-prefix}vam {
    vertical-align: middle !important;
  }
});


@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
    position: relative;
    min-height: 100%;
}

p, li, dt, dd, td, th, details, button, form, a, div, details {
  font-family: Raleway, sans-serif;
}

h1 {
    margin-top: 0;
}

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

header.navbar.navbar-inverse {
    background-color: @brand-primary;
}

select.form-control.styled-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent url('/images/dropdown.png') right @padding-small-horizontal center no-repeat;
    padding-right: @padding-small-horizontal * 2;
}

select.form-control.styled-select::-ms-expand {
    display: none;
}

Fix padding issue in `styled-select`.

@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
    position: relative;
    min-height: 100%;
}

p, li, dt, dd, td, th, details, button, form, a, div, details {
  font-family: Raleway, sans-serif;
}

h1 {
    margin-top: 0;
}

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

header.navbar.navbar-inverse {
    background-color: @brand-primary;
}

select.form-control.styled-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent url('/images/dropdown.png') right @padding-small-horizontal center no-repeat;
    padding-left: @padding-small-horizontal;
    padding-right: @padding-small-horizontal * 2;
}

select.form-control.styled-select::-ms-expand {
    display: none;
}


@first: #49645d;
@second: #fdf7eb;
@third: #3e6fa5;

@import "global/index";

Fix no new line error


.ng-cloak {
    display: none !important;
}

.menu-header {
  min-height: 200px;
  .user-avatar {
    border-radius: 99%;
    overflow: hidden;
    width: 64px;
    height: 64px;
    display: inline-block;
    background-size: cover;
  }
  div {
    font-size: small;
  }
}

.md-breadcrumb {
  div {
    display: inline-block;
  }
  .md-button {
    min-width: 0px;
    font-size: 20px;
    text-transform: none;
  }
}

md-sidenav {
  min-width: 260px;
  max-width: 260px;
  width: 260px;
  overflow-x: hidden;
}

md-content.content-home {
  background-image: url(/images/bg.jpg);
  md-content {
    background-color: transparent;
  }
}

Add Font and Hide Scrollbar

.ng-cloak {
    display: none !important;
}

.menu-header {
  min-height: 200px;
  .user-avatar {
    border-radius: 99%;
    overflow: hidden;
    width: 64px;
    height: 64px;
    display: inline-block;
    background-size: cover;
  }
  div {
    font-size: small;
  }
}

.md-breadcrumb {
  div {
    display: inline-block;
  }
  .md-button {
    min-width: 0px;
    font-size: 20px;
    text-transform: none;
  }
}

md-sidenav {
  min-width: 260px;
  max-width: 260px;
  width: 260px;
  overflow-x: hidden;
}

md-content.content-home {
  background-image: url(/images/bg.jpg);
  md-content {
    background-color: transparent;
  }
}

body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

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


@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;

  padding: 0.5rem;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 1em;
}

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

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

Make my face scale with viewport height

@import "shared/sizes.less";
@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;

  padding: 0.5rem;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 2rem;
  margin-top: -1rem;

  width: auto;
  max-height: calc(100vh - 7rem);
}

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

  #my-face {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;

    max-height: calc(100vh - 9rem);
  }

}

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

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


// Settings
@bowerDir: "bower_components";
@npmDir: "node_modules";

// Core
@import "_variables";

// Mixins
@import "mixins/**";

// Library
@import "library/_normalize";
@import "library/_print";

// Package managers
@import "@{bowerDir}/xy-flexbox/xy";

// Modules
@import "modules/**";
@import "components/**";
@import "partials/**";
@import "pages/**";

// SVG sprite
@import (optional) "build/styles/sprite.less";

Remove svg sprite from Less


.input {
  width: 100%;
  background-color: transparent;
  color: #000000;
  font-size: inherit;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #000000;
  cursor: pointer;

  &:focus {
    background-color: #c9d6df;
    border: 0;
    outline: 0;
  }
}

.invalid {
  outline: 2px solid red;
  border-bottom: 0;

  &:focus {
    outline: 2px solid red;
  }
}

Update invalid state style for inputs

.input {
  width: 100%;
  background-color: transparent;
  color: #000000;
  font-size: inherit;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #000000;
  cursor: pointer;

  &:focus {
    background-color: #c9d6df;
    border: 0;
    border-bottom: 2px solid #00bd00;
    outline: 0;

    &.invalid {
      border-bottom: 2px solid #ff0000;
    }
  }
}


body {
  font-family: "Open Sans", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

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

.title {
  text-align: center;
}

.grid {
  display: flex;
  flex-direction: column;
}

.year {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.week {
  border: 1px solid lightgray;
  height: 8px;
  width: 8px;
  margin: 4px;
}

Fix size of year line

body {
  font-family: "Open Sans", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

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

.title {
  text-align: center;
}

@week-box-size: 8px;
@week-box-margin: 4px;
@year-line-length: 52 * (@week-box-size + (2 * @week-box-margin));
.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.year {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: @year-line-length;
}

.week {
  border: 1px solid lightgray;
  height: @week-box-size;
  width: @week-box-size;
  margin: @week-box-margin;
}


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

atom-text-editor {
  font-family: 'Monoid', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
  font-size: 100%;
  .cursor-line {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
}

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

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

Fix spec for editor font, tab-bar

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

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

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

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


html, body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

@import 'content';
@import 'details';
@import 'toolbar';
@import 'search';

Add breakpoint variable to Less

html, body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

@sm: 600px; // Matches Angular Material's sm size

@import 'content';
@import 'details';
@import 'toolbar';
@import 'search';


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

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

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

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

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

Revert "Add system default font as fallback"

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

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

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

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

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


// Using CSS property order as described loosely here:
//    http://markdotto.com/2011/11/29/css-property-order/.
// - positioning
// - display
// - box model (height, padding, margin, ...)
// - visual (font, color, background, border, box-shadow, ...)

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

html {
    height: 100%;
    font-family: @font-family-main;
    font-size: @font-size;
    line-height: @line-height;
}

body {
    .bg-color(@color-main);
    height: 100%;
}

// general styling
@import "font-styles.less";
@import "header.less";
@import "content.less";
@import "footer.less";
@import "utilities.less";

// page-specific styling
@import "external-account.less";
@import "theme-swatches.less";

Fix scrollbar issue during navigation animation.

// Using CSS property order as described loosely here:
//    http://markdotto.com/2011/11/29/css-property-order/.
// - positioning
// - display
// - box model (height, padding, margin, ...)
// - visual (font, color, background, border, box-shadow, ...)

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

html {
    height: 100%;
    font-family: @font-family-main;
    font-size: @font-size;
    line-height: @line-height;
}

body {
    .bg-color(@color-main);
    height: 100%;
    overflow-x: hidden; // to prevent scrollbar from occuring on tall pages
}

// general styling
@import "font-styles.less";
@import "header.less";
@import "content.less";
@import "footer.less";
@import "utilities.less";

// page-specific styling
@import "external-account.less";
@import "theme-swatches.less";


@kube-path: "../../bower_components/kube/less";

@import "@{kube-path}/mixins.less";
@import "elements.less";
@import "variables.less";

@media (min-width: 767px) {
    body {
        background: url('/img/bg.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

// Hide elements before loading
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
  display: none !important;
}

// Cube override. Ubuntu font looks bad bold at smaller sizes
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

Put the global progress bar on the bottom of the screen.

@kube-path: "../../bower_components/kube/less";

@import "@{kube-path}/mixins.less";
@import "elements.less";
@import "variables.less";

@media (min-width: 767px) {
    body {
        background: url('/img/bg.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

// Hide elements before loading
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
  display: none !important;
}

// Kube override. Ubuntu font looks bad bold at smaller sizes
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

// Kube override, put progress bar on bottom
body > #tools-progress {
    bottom: 0px;
    top: auto;
}


// 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";

atom-workspace .horizontal .vertical {
  position: relative;
}

background-tips {
  display: block;

  ul {
    -webkit-user-select: none;
    cursor: default;

    li {
      opacity: 0;
      padding: 0 30px;
      transition: opacity .3s;

      .keystroke {
        border: 2px solid;
        padding: 0 @component-padding/2;
        border-radius: @component-border-radius * 3;
        font-family: Helvetica, Arial, sans-serif;
      }
    }
  }

  .fade-in {
    opacity: 1;
  }
}

Fix top padding on keystroke

// 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";

atom-workspace .horizontal .vertical {
  position: relative;
}

background-tips {
  display: block;

  ul {
    -webkit-user-select: none;
    cursor: default;

    li {
      opacity: 0;
      padding: 0 30px;
      transition: opacity .3s;

      .keystroke {
        border: 2px solid;
        padding: @component-padding/2 @component-padding/2 0;
        border-radius: @component-border-radius * 3;
        font-family: Helvetica, Arial, sans-serif;
      }
    }
  }

  .fade-in {
    opacity: 1;
  }
}


@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow: @style @c;
}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div {
    .box-shadow(0 0 5px, 30%)
  }
}


// global override for non no-center
svg.nvd3-svg {
  margin: 0 auto;
  // display: inline-block;
}

Remove issue with tooltip being pushed to bottom

// global override for non no-center
svg.nvd3-svg {
  margin: 0 auto;
  // display: inline-block; // need to fix this for FF
}


.modal {

	.modal-dialog {

	}

	.modal-content {
		box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	}

	.modal-title {
		font-size: 16px;
		color: @gray-dark;
		line-height: 1.2;
	}

	.modal-header, .modal-footer {
		border-top: 1px solid #CACCCF;
		background-color: @gray-lighter;
		padding: 10px 9px 9px 12px;
		border-bottom: 1px solid #ddd;
	}

	.modal-header {
		border-radius: 5px 5px 0 0;
	}

	.modal-footer {
		border-radius: 0 0 5px 5px;
	}

	.modal-body {

	}

	.modal-footer .btn-default[data-dismiss=modal] {
		float: left;
		background: transparent !important;
		box-shadow: none;
		border: none;
		color: @brand-primary;

		&:hover {
			background: transparent !important;
		}
	}
}

.modal-backdrop {
	background-color: #000;

  &.in { .opacity(.65); }

}

Update modal with slight drop shadow

.modal {

	.modal-dialog {

	}

	.modal-content {
		box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	}

	.modal-title {
		font-size: 16px;
		color: @gray-dark;
		line-height: 1.2;
	}

	.modal-header, .modal-footer {
		border-top: 1px solid #E1E2E5;
		background-color: @gray-lighter;
		padding: 9px 9px 8px 12px;
	}

	.modal-header {
		border-radius: 5px 5px 0 0;
	}

	.modal-footer {
		border-radius: 0 0 5px 5px;
	}

	.modal-body {
		box-shadow: inset 0 7px 7px -9px #AFB0B2;
	}

	.modal-footer .btn-default[data-dismiss=modal] {
		float: left;
		background: transparent !important;
		box-shadow: none;
		border: none;
		color: @brand-primary;
		padding-left: 0;

		&:hover {
			background: transparent !important;
		}
	}
}

.modal-backdrop {
	background-color: #000;

  &.in { .opacity(.65); }

}


@import "variables";

.github-PanelEtchWrapper {
  flex: 1;
  display: flex;
  min-width: 0;
}

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

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

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

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

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

    .git-logo-path {
      fill: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
    }
  }
}

Make bottom-docked Git panel look a little :sparkles:

@import "variables";

.github-PanelEtchWrapper {
  flex: 1;
  display: flex;
  min-width: 0;
}

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

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

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

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

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

    .git-logo-path {
      fill: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
    }
  }
}

atom-dock.bottom {
  .github-Panel {
    flex-direction: row;
  }
  .github-StagingView {
    flex-direction: row;
    flex: 2;
  }
  .github-StagedChanges {
    border-left: 1px solid @base-border-color;
    border-right: 1px solid @base-border-color;
  }
  .github-StagingView-group:first-child .github-StagingView-header {
    border-top: 1px solid @base-border-color;
  }
  .github-CommitView {
    flex: 1;
  }
}


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

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

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  overflow: visible \9;
  .transition(height .35s ease);
  &.in {
    height: auto;
  }
}

Fix bug Collapse broken in IE

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

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

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


body {
  font-family: "Helvetica Neue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-weight: 300;
}

bit-panel p {
  padding: 10px;
}

Add some padding to the body so thing aren't so squished

body {
  font-family: "Helvetica Neue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-weight: 300;
  padding: 40px 0;
}

bit-panel p {
  padding: 10px;
}


.content-info {
	background-color: #444;
	color: @brand-secondary;
	padding: 1em 0;
	margin-top: 1em;
}

Change footer background color and add border top

.content-info {
	background-color: #333;
	border-top: 4px solid @brand-primary;
	color: #FFF;
	padding: 1em 0;
	margin-top: 1em;
}


p {
  margin-top: 0.75em;
}

figure {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

code {
  font-family: @font-family-monospace;
  background-color: @grey-light;
  color: @black;
  text-decoration: none;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

sup {
  font-size: small;
  vertical-align: super;
}

ol, ul {
  margin-left: 2em;
  margin-top: 0.5em;
}

ul {
  list-decoration-style: circle;
}

ol {
  list-style-type: decimal;
}

Use better typography for sup

p {
  margin-top: 0.75em;
}

figure {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

code {
  font-family: @font-family-monospace;
  background-color: @grey-light;
  color: @black;
  text-decoration: none;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

sup {
  font-size: small;
  vertical-align: super;
}

@supports (font-variant-position: super) {
  sup {
    font-size: inherit;
    vertical-align: initial;
    font-variant-position: super;
  }
}

ol, ul {
  margin-left: 2em;
  margin-top: 0.5em;
}

ul {
  list-decoration-style: circle;
}

ol {
  list-style-type: decimal;
}


@import "../../capsule/view/theme/default/stylesheet/_mixins";
@import "_mixin.less";
@import "_ui.less";
// @import "_theme.less";
// @import "_menu.less";

Add theme and menu back into less stylesheet.

@import "../../capsule/view/theme/default/stylesheet/_mixins";
@import "_mixin.less";
@import "_ui.less";
@import "_theme.less";
@import "_menu.less";


//**
// Mixins
//**

.BodyColor () {
    	background-color: @color_01;
    	color: @color_05;
}

.LinkColor () {
    	color: @color_03;
}

.LinkHoverColor () {
    	color: @color_02;
}

.HeaderColor () {
 	background-color: white;
}

.ArticleColor () {
   	background: white;
    	a, a:link, a:visited {
        		color: @color_03;
    	}
    	a:hover, a:focus {
        		color: @color_02;
    	}
}

.PostTitleColor () {
    	background-color: @color_03;
    	color: white;
    	a, a:link, a:visited {
        		color: white;
		text-decoration: none;
    	}
    	a:hover, a:focus {
        		color: @color_01;
    	}
}

Change link colour and text decoration.

//**
// Mixins
//**

.BodyColor () {
    	background-color: @color_01;
    	color: @color_05;
}

.LinkColor () {
    	color: @grain_04;
  text-decoration: none;
}

.LinkHoverColor () {
    	color: @color_02;
  text-decoration: none;
}

.HeaderColor () {
 	background-color: white;
}

.ArticleColor () {
   	background: white;
    	a, a:link, a:visited {
        		color: @grain_04;
          text-decoration: none;
    	}
    	a:hover, a:focus {
        		color: @color_02;
    	}
}

.PostTitleColor () {
    	background-color: @color_03;
    	color: white;
    	a, a:link, a:visited {
        		color: white;
		text-decoration: none;
    	}
    	a:hover, a:focus {
        		color: @color_01;
    	}
}


@import '~openstax-react-components/resources/styles/main';
@import './components/shared';
@import './components/concept-coach/index';
@import './components/task/index';
@import './components/exercise/index';
@import './components/progress/index';
@import './components/reactive/index';
@import './components/course/index';
@import './components/user/index';

@import "@{bootstrap-path}/navs";
@import "@{bootstrap-path}/navbar";

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

.concept-coach-wrapper {
  width: 100%;
  height: 100%;
}

Move all styles inside wrapper selector

// All styles are included inside the wrapper selector
// This ensures CC specific styles do not alter
// the appearance of the website that's embedding CC
.concept-coach-wrapper {
  width: 100%;
  height: 100%;

  @import '~openstax-react-components/resources/styles/main';
  @import './components/shared';
  @import './components/concept-coach/index';
  @import './components/task/index';
  @import './components/exercise/index';
  @import './components/progress/index';
  @import './components/reactive/index';
  @import './components/course/index';
  @import './components/user/index';

  @import "@{bootstrap-path}/navs";
  @import "@{bootstrap-path}/navbar";

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


/*
 * This file is part of e-Giełda.
 * Copyright (C) 2014-2015  Mateusz Maćkowski and Tomasz Zieliński
 *
 * e-Giełda is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with e-Giełda.  If not, see <http://www.gnu.org/licenses/>.
 */

//
// Classes that set element display
//

.visible-print-inline {
  display: none;
}

@media print {
  .hidden-print {
    display: none !important;
  }

  .visible-print-inline {
    display: inline;
  }
}

Fix one-page printing on Firefox

/*
 * This file is part of e-Giełda.
 * Copyright (C) 2014-2015  Mateusz Maćkowski and Tomasz Zieliński
 *
 * e-Giełda is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with e-Giełda.  If not, see <http://www.gnu.org/licenses/>.
 */

//
// Classes that set element display
//

.visible-print-inline {
  display: none;
}

@media print {
  // Firefox one-page printing fix
  * {
    overflow: visible !important;
  }

  .hidden-print {
    display: none !important;
  }

  .visible-print-inline {
    display: inline;
  }
}


@charset "UTF-8";

@import "lib/lesshat.less";

@import "lib/breakpoints.less";
@import "lib/colors.less";
@import "lib/fonts.less";

#monthwidget {

    caption {
        background-color: mix(@ui09, @page-background, 95%);
        color: #fff;

        a {
            color:#fff;
        }
    }

    td, th {
        text-align:center;
        text-transform:uppercase;
    }

}

h4 {
    background-color: mix(@ui09, @page-background, 95%);
    color: #fff;

    a {
        color:#fff;
    }
}

Hide the search help, for now

@charset "UTF-8";

@import "lib/lesshat.less";

@import "lib/breakpoints.less";
@import "lib/colors.less";
@import "lib/fonts.less";

#monthwidget {

    caption {
        background-color: mix(@ui09, @page-background, 95%);
        color: #fff;

        a {
            color:#fff;
        }
    }

    td, th {
        text-align:center;
        text-transform:uppercase;
    }

}

h4 {
    background-color: mix(@ui09, @page-background, 95%);
    color: #fff;

    a {
        color:#fff;
    }
}

#search_help {
    display:none;
}


.comments-box {
    max-width: 40em;
    padding: 1em;

    .comments {
        padding-top: 1em;

        .actions {
            transition: 1s background-color;
        }
    }

    .avatar-initials {
        background-color: #FFFFFF;
    }

    .avatar-image {
        height: initial;
    }

    textarea.create-comment {
        max-height: 9em !important;
    }

    .loadmore-action.button {
        margin-top: 2em;
    }
}

Add styles when a comment is editable

.comments-box {
    max-width: 40em;
    padding: 1em;

    @navy: #001F3F;

    .comments {
        padding-top: 1em;
        transition: 1s background-color;
    }

    .avatar-initials {
        background-color: #FFFFFF;
    }

    .avatar-image {
        height: initial;
    }

    textarea.create-comment {
        max-height: 9em !important;
    }

    .loadmore-action.button {
        margin-top: 2em;
    }

    div[contenteditable=true] {
        background-color: @navy;
        border-radius: 3px;
        color: white;
        opacity: 0.8;
    }
}


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

.top-fact {
  .new-design-white-block-with-shadow();
  .new-design-font();
  position: relative;
  padding: 35px 35px 25px;

  &:before {
    content: '';
    z-index: -10;
    position: absolute;
    top:0; bottom:0; right:0; left:0;
    .new-design-extra-opacity-shadow();
    .new-design-border-radius();
  }
}

.top-fact-user-heading {
  position: absolute;
  top: -10px;
  left: 35px;
}

.top-fact-text {
  font-size: @topFactFontSize;
  line-height: @topFactFontSize * 1.5;
  margin-bottom: 25px;
}

.top-fact-controls {
  position: relative;
}

.top-fact-time-ago {
  position: absolute;
  top: 2px;
  right: 0;
  color: @mutedFontColor;
}

Fix top-fact padding according design

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

.top-fact {
  .new-design-white-block-with-shadow();
  .new-design-font();
  position: relative;
  padding: 30px 35px 25px;

  &:before {
    content: '';
    z-index: -10;
    position: absolute;
    top:0; bottom:0; right:0; left:0;
    .new-design-extra-opacity-shadow();
    .new-design-border-radius();
  }
}

.top-fact-user-heading {
  position: absolute;
  top: -10px;
  left: 35px;
}

.top-fact-text {
  font-size: @topFactFontSize;
  line-height: @topFactFontSize * 1.5;
  margin-bottom: 25px;
}

.top-fact-controls {
  position: relative;
}

.top-fact-time-ago {
  position: absolute;
  top: 2px;
  right: 0;
  color: @mutedFontColor;
}


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

  .background {
    stroke: @gridline-colour;
  }
  .annotations {
    .annotation line {
      stroke: @gridline-colour;
      stroke-dasharray: 5px 2px;
    }
  }
  .x-axis {
    path {
      stroke: @gridline-colour;
    }
  }

  &.secondary-rsi {
    .right-handle {
      text {
        display: none;
      }
    }
  }

  .rsi {
    stroke: @rsi-line-colour;
    stroke-width: @stroke-width;

    .annotation line {
      shape-rendering: crispEdges;
    }
  }

  .macd-divergence {
    .bar {
      stroke: @primary-blue;
      fill: @secondary-grey;
    }
  }

  .macd-signal {
    .line {
      stroke: @macd-signal-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .macd {
    .line {
      stroke: @macd-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .zero {
    .annotation line {
      visibility: hidden;
    }
  }

  .bar {
    stroke: @primary-blue;
    fill: @secondary-grey;
  }
}

Update RSI annotation dash frequency

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

  .background {
    stroke: @gridline-colour;
  }
  .annotations {
    .annotation line {
      stroke: @gridline-colour;
      stroke-dasharray: 8;
    }
  }
  .x-axis {
    path {
      stroke: @gridline-colour;
    }
  }

  &.secondary-rsi {
    .right-handle {
      text {
        display: none;
      }
    }
  }

  .rsi {
    stroke: @rsi-line-colour;
    stroke-width: @stroke-width;

    .annotation line {
      shape-rendering: crispEdges;
    }
  }

  .macd-divergence {
    .bar {
      stroke: @primary-blue;
      fill: @secondary-grey;
    }
  }

  .macd-signal {
    .line {
      stroke: @macd-signal-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .macd {
    .line {
      stroke: @macd-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .zero {
    .annotation line {
      visibility: hidden;
    }
  }

  .bar {
    stroke: @primary-blue;
    fill: @secondary-grey;
  }
}


// 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";
#grind-app {
  width: 360px;
}
.grd-horizontal-list {
  display: flex;
}
.top-menu-button {
  i {
    cursor: pointer;
  }
}
.top-menu-item {
  padding: 10px;
  border-bottom: 1px solid @base-border-color;
  background: @button-background-color;
  cursor: pointer;
  &:hover {
    background: @button-background-color-hover;
  }
}

Use lighter menu item background

// 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";
#grind-app {
  width: 360px;
}
.grd-horizontal-list {
  display: flex;
}
.top-menu-button {
  i {
    cursor: pointer;
  }
}
.top-menu-item {
  padding: 10px;
  border-bottom: 1px solid @base-border-color;
  background: @base-background-color;
  cursor: pointer;
  &:hover {
    background: @background-color-highlight;
  }
}


.sd-card-ace {
  height: 100%;
  > div { height: 100%; }

  .ace_scroller.ace_scroll-left {
    box-shadow: 9px 0 8px -8px rgba(0, 0, 0, 0.25) inset;
  }

  .sd-ace-inset-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25) inset;
    pointer-events: none;
  }

  .ace_active-line {
    background-color: transparent !important;
  }
}

Revert "Remove active line highlighting"

.sd-card-ace {
  height: 100%;
  > div { height: 100%; }

  .ace_scroller.ace_scroll-left {
    box-shadow: 9px 0 8px -8px rgba(0, 0, 0, 0.25) inset;
  }

  .sd-ace-inset-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25) inset;
    pointer-events: none;
  }
}


@import "/vendor/styles/bootstrap/bootstrap.less";

@import "/vendor/styles/fontawesome/font-awesome.less";

body {
	padding-top: 40px;
	position: relative;
}

#content {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
}

#channels {
	width: 230px;
	overflow: hidden;
	position: fixed;

	top: 40px;
	left: 0;

	padding-left: 10px;
	padding-top: 10px;
}

#feed-container {
	position: absolute;
	overflow-y: auto;

	right: 0;
	left: 250px;

	padding-right: 10px;
	padding-top: 10px;
}

.feed-selected {
	border-style: solid;
	border-color: red;
	border-width: 3px;
}

.feed-outer {
	padding-top: 50px;
	margin-top: -50px;
}

.feed-item {
}

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
}

}

Add padding to each feed body and also overflow: auto to make floats layout correctly.

@import "/vendor/styles/bootstrap/bootstrap.less";

@import "/vendor/styles/fontawesome/font-awesome.less";

body {
	padding-top: 40px;
	position: relative;
}

#content {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
}

#channels {
	width: 230px;
	overflow: hidden;
	position: fixed;

	top: 40px;
	left: 0;

	padding-left: 10px;
	padding-top: 10px;
}

#feed-container {
	position: absolute;
	overflow-y: auto;

	right: 0;
	left: 250px;

	padding-right: 10px;
	padding-top: 10px;
}

.feed-selected {
	border-style: solid;
	border-color: red;
	border-width: 3px;
}

.feed-outer {
	padding-top: 50px;
	margin-top: -50px;
}

.feed-item {
}

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
}

.feed-body {
	padding-top: 5px;
	padding-bottom: 5px;

	overflow: auto;
}


.x-media-type-icon(@media-type; @add-title; @color; @char) {
  @mt-selector: ~"[data-media-type='@{media-type}']";
  @{mt-selector} > .icon-content::before { color: @color; content: @char; }
  @{mt-selector} > .add-content-title::before { content: "New " @add-title; color: black; }
}

.x-media-type-icon('application/xhtml+xml';              "Content";   #00c; "\f0f6"); /* icon-file-alt */
.x-media-type-icon('application/oebps-package+xml';      "Book";      #c00; "\f02d"); /* icon-book */
.x-media-type-icon('application/vnd.org.cnx.section';    "Chapter";   #999; ""); /* icon-folder-open */

Hide the "Add Book" dropdown from the workspace/picker

.x-media-type-icon(@media-type; @add-title; @color; @char) {
  @mt-selector: ~"[data-media-type='@{media-type}']";
  @{mt-selector} > .icon-content::before { color: @color; content: @char; }
  @{mt-selector} > .add-content-title::before { content: "New " @add-title; color: black; }
}

.x-media-type-icon('application/xhtml+xml';              "Content";   #00c; "\f0f6"); /* icon-file-alt */
.x-media-type-icon('application/oebps-package+xml';      "Book";      #c00; "\f02d"); /* icon-book */
.x-media-type-icon('application/vnd.org.cnx.section';    "Chapter";   #999; ""); /* icon-folder-open */

// Hide the "Add Book" dropdown from the workspace
#workspace {
  .add-content { display: none; }
}


// TODO: get rid of duplication - figure out how to cleanly share bootstrap across files.

@containerWidth: 958px;
@navbarHeight: 39px;
@logoHeight: 100px;
@logoMargin: 20px;
@navbarBackground: #009ea6; // hdoPrimaryColor

#HeaderNavigation {
    position: relative;
    margin: 0 auto;
    width: @containerWidth;
    .pull-up {
        position: absolute;
        right: 0;
        top: 0;
    }
    .subnav {
        margin-top: 0;
        padding-top: @logoHeight + @logoMargin * 2;
        &.subnav-fixed {
            background-color: @navbarBackground;
            left: 0;
            padding-top: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
            .subnav-inner {
                margin: 0 auto;
                width: @containerWidth;
            }
        }
    }
    &.header-fixed {
        margin-bottom: @navbarHeight;
    }
}

Add issue link to hacks/ie

// TODO: get rid of duplication - figure out how to cleanly share bootstrap across files.
// See https://github.com/holderdeord/hdo-site/issues/204

@containerWidth: 958px;
@navbarHeight: 39px;
@logoHeight: 100px;
@logoMargin: 20px;
@navbarBackground: #009ea6; // hdoPrimaryColor

#HeaderNavigation {
    position: relative;
    margin: 0 auto;
    width: @containerWidth;
    .pull-up {
        position: absolute;
        right: 0;
        top: 0;
    }
    .subnav {
        margin-top: 0;
        padding-top: @logoHeight + @logoMargin * 2;
        &.subnav-fixed {
            background-color: @navbarBackground;
            left: 0;
            padding-top: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
            .subnav-inner {
                margin: 0 auto;
                width: @containerWidth;
            }
        }
    }
    &.header-fixed {
        margin-bottom: @navbarHeight;
    }
}


@import 'variables.less';

.mb-jaw-bone {
  background: black;
  position: relative;

  .content {
    width: 100%;
    height: 100%;
  }

  .close-button {
    color: @link-hover-color;
    display: block;
    position: absolute;
    right: @mb-app-padding;
    top: @mb-app-padding;
    z-index: 99;

    .fa {
      margin: 0;
      padding: 0;
    }
  }
}

Add shadow to close button

@import 'variables.less';

.mb-jaw-bone {
  background: black;
  position: relative;

  .content {
    width: 100%;
    height: 100%;
  }

  .close-button {
    color: @link-hover-color;
    display: block;
    position: absolute;
    right: @mb-app-padding;
    top: @mb-app-padding;
    z-index: 99;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }
}


@import "../bootstrap/less/bootstrap.less";
@import "../bootstrap/less/theme.less";
@import "mw-overrides.less";

// Override Bootstrap variables

@font-family-sans-serif: "Segoe UI", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Droid Serif", "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Droid Mono", "Courier New", monospace;
@font-size-base: 16px;
@font-size-h1: floor((@font-size-base * 2.0));
@font-size-h2: floor((@font-size-base * 1.4));
@font-size-h3: floor((@font-size-base * 1.2));
@font-size-h4: floor((@font-size-base * 1.0));
@heading-color: @brand-primary;

// Additional style definitions

body {
        margin-top: 50px; // accomodate fixed-top navbar
}

.footer {
        margin-top: @padding-large-vertical * 2;
}

Fix typo, increase line height.

@import "../bootstrap/less/bootstrap.less";
@import "../bootstrap/less/theme.less";
@import "mw-overrides.less";

// Override Bootstrap variables

@font-family-sans-serif: "Segoe UI", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Droid Serif", "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Droid Mono", "Courier New", monospace;
@font-size-base: 16px;
@font-size-h1: floor((@font-size-base * 2.0));
@font-size-h2: floor((@font-size-base * 1.4));
@font-size-h3: floor((@font-size-base * 1.2));
@font-size-h4: floor((@font-size-base * 1.0));
@headings-color: @brand-primary;
@line-height-base: 1.5;

// Additional style definitions

body {
        margin-top: 50px; // accomodate fixed-top navbar
}

.footer {
        margin-top: @padding-large-vertical * 2;
}


@font-face {
  font-family: Ahamono;
  src: url("../assets/fonts/AHAMONO-Monospaced.ttf");
}

body {
  font-family: "Ahamono", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing-page-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 40px;

  object {
    height: 171px;
    width: 370px;
  }
}

.waster-soundcloud {
  margin-top: 80px;
}

/* Media Queries */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  .landing-page-logo {
    object {
      height: 355px;
      width: 770px;
    }
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Add more margin-top for landing page on mobile

@font-face {
  font-family: Ahamono;
  src: url("../assets/fonts/AHAMONO-Monospaced.ttf");
}

body {
  font-family: "Ahamono", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing-page-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 80px;

  object {
    height: 171px;
    width: 370px;
  }
}

.waster-soundcloud {
  margin-top: 40px;
}

/* Media Queries */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  .landing-page-logo {
    margin-top: 40px;

    object {
      height: 355px;
      width: 770px;
    }
  }

  .waster-soundcloud {
    margin-top: 80px;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


@import (npm) "inconsolata";
@import (npm) "code-mirror/codemirror";

pre code, pre, pre span {
  font-family: 'Inconsolata' monospace;
  font-size: 17px;
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
  line-height: 1.2;
}
pre {
  padding: 4px;
}
.CodeMirror {
  font-size: 17px;
  font-family: 'Inconsolata' monospace;
}

.CodeMirror {
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

pre, .CodeMirror, .code {
  border: 2px solid grey;
  background: white;
  border-radius: 0;
  margin-bottom: 10px;
}

.read-only-code-mirror .CodeMirror-cursor {
  visibility: hidden !important;
}

Add 4px padding for the options section too

@import (npm) "inconsolata";
@import (npm) "code-mirror/codemirror";

pre code, pre, pre span {
  font-family: 'Inconsolata' monospace;
  font-size: 17px;
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
  line-height: 1.2;
}
pre, .code {
  padding: 4px;
}
.CodeMirror {
  font-size: 17px;
  font-family: 'Inconsolata' monospace;
}

.CodeMirror {
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

pre, .CodeMirror, .code {
  border: 2px solid grey;
  background: white;
  border-radius: 0;
  margin-bottom: 10px;
}

.read-only-code-mirror .CodeMirror-cursor {
  visibility: hidden !important;
}


@import "ui-variables";

.tooltip {
    @tip-background-color: @white;
    @tip-text-color: #333;
    white-space: nowrap;

    .keystroke {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        color: #777;
        padding-left: 2px;
    }

    &.in {
        opacity: 1;
    }

    .tooltip-inner {
        line-height: 19px;
        border-radius: @component-border-radius;
        background-color: @tip-background-color;
        color: @tip-text-color;
        white-space: nowrap;
        max-width: none;
    }

    &.top .tooltip-arrow {
        border-top-color: @tip-background-color;
    }

    &.top-left .tooltip-arrow {
        border-top-color: @tip-background-color;
    }

    &.top-right .tooltip-arrow {
        border-top-color: @tip-background-color;
    }

    &.right .tooltip-arrow {
        border-right-color: @tip-background-color;
    }

    &.left .tooltip-arrow {
        border-left-color: @tip-background-color;
    }

    &.bottom .tooltip-arrow {
        border-bottom-color: @tip-background-color;
    }

    &.bottom-left .tooltip-arrow {
        border-bottom-color: @tip-background-color;
    }

    &.bottom-right .tooltip-arrow {
        border-bottom-color: @tip-background-color;
    }
}

Add reference import to 'index.less'


@import "/vendor/styles/bootstrap/bootstrap.less";

@import "/vendor/styles/fontawesome/font-awesome.less";

body {
	margin: 10px;
}

#channels {
	width: 230px;
	overflow: hidden;
	position: absolute;

	bottom: 0;
	top: 0;
	left: 0;

	padding-left: 10px;
	padding-top: 10px;
}

#feed-body {
	position: absolute;
	overflow-y: auto;

	bottom: 0;
	top: 0;
	right: 0;
	left: 250px;
}

Add a class to show selected feed items

@import "/vendor/styles/bootstrap/bootstrap.less";

@import "/vendor/styles/fontawesome/font-awesome.less";

body {
	margin: 10px;
}

#channels {
	width: 230px;
	overflow: hidden;
	position: absolute;

	bottom: 0;
	top: 0;
	left: 0;

	padding-left: 10px;
	padding-top: 10px;
}

#feed-body {
	position: absolute;
	overflow-y: auto;

	bottom: 0;
	top: 0;
	right: 0;
	left: 250px;

	padding-right: 10px;
	padding-top: 10px;
}

.feed-selected {
	border-style: solid;
	border-color: red;
	border-width: 3px;
}

.feed-item {
}


//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Table of contents
//

.mce-toc {
  //
}

.mce-toc h2 {
  //
}

.mce-toc li {
  //
}

Add the missing toc content styles

//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Table of contents
//

.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}


// Bootstrap v3.0
// Responsive Tables (collapses when max-width of screen is less than grid-float-breakpoint)

.table-collapse {
  tbody {
    > tr > td.collapse-toggle {
      display: none;
      padding: 4px 4px 0 0;
    }
  }

  @media (max-width: @grid-float-breakpoint) {
    display: block;

    caption {
      display: block;
      .clearfix();
    }

    thead, tfoot {
      display: none;
    }

    tbody {
      display: block;

      > tr {
        display: block;
        border-top: 1px solid @table-border-color;

        &:first-child {
          border-top: none;
        }

        > td {
          border: none;
          display: block;

          &.collapse-toggle {
            display: block;
            float: right;
          }

          &.collapse {
            display: none;
          }

          &[role] {
            &:before {
              content: attr(role);
              display: block;
              float: left;
              width: (@component-offset-horizontal - 20);
              padding-right: 20px;
              clear: left;
              text-align: right;
              font-weight: bold;
              .text-overflow();
            }
          }
        }
      }
    }

    &.table-bordered {
      border: none; // Remove border from table and apply to tbody

      tbody {
        border: 1px solid @table-border-color;
      }
    }
  }
}

Remove clearfix from table caption

// Bootstrap v3.0
// Responsive Tables (collapses when max-width of screen is less than grid-float-breakpoint)

.table-collapse {
  tbody {
    > tr > td.collapse-toggle {
      display: none;
      padding: 4px 4px 0 0;
    }
  }

  @media (max-width: @grid-float-breakpoint) {
    display: block;

    caption {
      display: block;
    }

    thead, tfoot {
      display: none;
    }

    tbody {
      display: block;

      > tr {
        display: block;
        border-top: 1px solid @table-border-color;

        &:first-child {
          border-top: none;
        }

        > td {
          border: none;
          display: block;

          &.collapse-toggle {
            display: block;
            float: right;
          }

          &.collapse {
            display: none;
          }

          &[role] {
            &:before {
              content: attr(role);
              display: block;
              float: left;
              width: (@component-offset-horizontal - 20);
              padding-right: 20px;
              clear: left;
              text-align: right;
              font-weight: bold;
              .text-overflow();
            }
          }
        }
      }
    }

    &.table-bordered {
      border: none; // Remove border from table and apply to tbody

      tbody {
        border: 1px solid @table-border-color;
      }
    }
  }
}


/*
  LESS file for Drupal styles.
  If you have shared drupal/ckan styles consider moving them to dgu-shared.less .
*/

Remove top whitespace above body in drupal.

/*
  LESS file for Drupal styles.
  If you have shared drupal/ckan styles consider moving them to dgu-shared.less .
*/

body {
 padding-top: 0;  // Remove the inherited whitespace above the body from style.css in bootstrap theme.
 }


// smartphone
@media (max-width:767px) {}

// tablet
@media (min-width:768px) {}

// desktop
@media (min-width:992px) {}

// large desktop
@media (min-width:1200px) {}

Set color for nav icon bar under mobile view

.tetris-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}

// smartphone
@media (max-width:767px) {}

// tablet
@media (min-width:768px) {}

// desktop
@media (min-width:992px) {}

// large desktop
@media (min-width:1200px) {}


/**
 * veryfizzyjelly blog
 * --
 * Collates all the different less files
 */

// Normalize
@import 'normalize.less';

// Core Includes
@import 'vars.less';
@import 'nav.less';
@import 'type.less';

// Base Stuff
body {
  margin: 0;
  padding: 0;
}

Sort out the import list for the main less file

/**
 * veryfizzyjelly blog
 * --
 * Collates all the different less files
 */

// Normalize
@import 'normalize';

// Core Includes
@import 'vars';
@import 'base';
@import 'mixins';
@import 'utils';
@import 'nav';
@import 'type';

// Base Stuff
body {
  margin: 0;
  padding: 0;
}


.events__list {
  flex: 1;
  overflow-y: auto;
}

.map {
  flex: 2;
  position: relative;
}

.event__container-map-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

Add border to map page

.events__list {
  flex: 1;
  overflow-y: auto;
}

.map {
  flex: 2;
  position: relative;
}

.event__container-map-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid #d2d8de;
}


.y-axis {
  .closeLine {
    text {
      fill: @font-colour;
      font-size: @font-size-base;
      font-weight: @font-weight-base;
      line-height: @line-height-base;
    }

    &.tick > path {
      stroke: @closing-colour;
      fill: @closing-colour;
    }
  }
}

.plot-area {
  .annotation > line {
    stroke: @closing-colour;
  }
}

Update close line annotation dash frequency

.y-axis {
  .closeLine {
    text {
      fill: @font-colour;
      font-size: @font-size-base;
      font-weight: @font-weight-base;
      line-height: @line-height-base;
    }

    &.tick > path {
      stroke: @closing-colour;
      fill: @closing-colour;
    }
  }
}

.plot-area {
  .annotation > line {
    stroke: @closing-colour;
    stroke-dasharray: 4;
  }
}


@charset "UTF-8";

@import "lib/lesshat.less";

@import "lib/breakpoints.less";
@import "lib/colors.less";
@import "lib/fonts.less";

#monthwidget {

    caption {
        background-color: mix(@ui09, @page-background, 95%);
        color: #fff;

        a {
            color:#fff;
        }
    }

    td, th {
        text-align:center;
        text-transform:uppercase;
    }
}

.band-nav {
    ul {
        li {
            display:inline;
        }
    }

    .wdn-inner-wrapper {
        border-bottom: 1px solid darken(@page-background, 20%);
    }

}

h4 {
    background-color: mix(@ui09, @page-background, 95%);
    color: #fff;

    a {
        color:#fff;
    }
}

#search_help {
    display:none;
}

Align event heading with monthwidget caption

@charset "UTF-8";

@import "lib/lesshat.less";

@import "lib/breakpoints.less";
@import "lib/colors.less";
@import "lib/fonts.less";

#monthwidget {

    caption {
        background-color: mix(@ui09, @page-background, 95%);
        color: #fff;

        a {
            color:#fff;
        }
    }

    td, th {
        text-align:center;
        text-transform:uppercase;
    }
}

.band-nav {
    ul {
        li {
            display:inline;
        }
    }

    .wdn-inner-wrapper {
        border-bottom: 1px solid darken(@page-background, 20%);
    }

}

.band-results {
    h4 {
        margin:0 0 1rem;
    }
}

h4 {
    background-color: mix(@ui09, @page-background, 95%);
    color: #fff;

    a {
        color:#fff;
    }
}

#search_help {
    display:none;
}


/* ==========================================================================
   Capital Framework
   Notifications Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables

@notification-bg:             #f7f8f9; // @gray-10
@notification-bg-success:     #e2efd8; // @green-20
@notification-bg-warning:     #fff0dd; // @gold-20
@notification-bg-error:       #f7e0d9; // @red-20

@notification-border:         #b4b5b6; // @gray-40
@notification-border-success: #20aa3f; // @green
@notification-border-warning: #ff9e1b; // @gold
@notification-border-error:   #d14124; // @red

@notification-icon:           #5a5d61; // @gray
@notification-icon-success:   #20aa3f; // @green
@notification-icon-warning:   #ff9e1b; // @gold
@notification-icon-error:     #d14124; // @red

// Sizing variables

@notification-padding__px: 15px;

//
// Import external dependencies
//

@import (less) '../../cf-core/src/cf-core.less';
@import (less) '../../cf-icons/src/cf-icons.less';

//
// Molecules
//

@import (less) './molecules/notification.less';

Set color variable names directly

/* ==========================================================================
   Capital Framework
   Notifications Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables

@notification-bg:             @gray-10;
@notification-bg-success:     @green-20;
@notification-bg-warning:     @gold-20;
@notification-bg-error:       @red-20;

@notification-border:         @gray-40;
@notification-border-success: @green;
@notification-border-warning: @gold;
@notification-border-error:   @red;

@notification-icon:           @gray;
@notification-icon-success:   @green;
@notification-icon-warning:   @gold;
@notification-icon-error:     @red;

// Sizing variables

@notification-padding__px:    15px;

//
// Import external dependencies
//

@import (less) '../../cf-core/src/cf-core.less';
@import (less) '../../cf-icons/src/cf-icons.less';

//
// Molecules
//

@import (less) './molecules/notification.less';


.click-heading {
   cursor: pointer;
}

.width-limit {
   max-width: 350px;
   margin: 0px -1px; // This is to compensate for the 1px border on the column
}

.info-tag {
   padding-right: 10px;
   font-weight: bold;
}

.info-tag > a:hover {
   text-decoration: none;
}

.avatar {
   width: @avatar-width;
}

button.navbar-btn {
   margin:8px;
}

@avatar-width: 22px;

Make column headings larger on mobile view

.click-heading {
   cursor: pointer;

   @media @mobile {
      padding: 15px;
   }
}

.width-limit {
   max-width: 350px;
   margin: 0px -1px; // This is to compensate for the 1px border on the column
}

.info-tag {
   padding-right: 10px;
   font-weight: bold;
}

.info-tag > a:hover {
   text-decoration: none;
}

.avatar {
   width: @avatar-width;
}

button.navbar-btn {
   margin:8px;
}

@avatar-width: 22px;


.discussion2 {
  padding: 90px 0 0;
}

Make evidence a little narrower than top-fact as per new design.

.discussion2 {
  padding: 90px 0 0;
}

.evidence-region {
  margin: 0 16px;
}


@import "~uiw-iconfont/fonts/w-iconfont.less";

.w-icon-spin:before {
  animation: loading-circle 1s infinite linear;
}
[class^="w-icon-"], [class*=" w-icon-"] {
  line-height: initial;
  display: inline-block;
  // vertical-align: middle;
  font-style: normal;
  vertical-align: middle;
  text-align: center;
  text-transform: none;
}
[class^="w-icon-"]:before, {
  display: block;
}

@keyframes loading-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Modify the icon font file name.

@import "~uiw-iconfont/fonts/w-icon.less";

.w-icon-spin:before {
  animation: loading-circle 1s infinite linear;
}
[class^="w-icon-"], [class*=" w-icon-"] {
  line-height: initial;
  display: inline-block;
  // vertical-align: middle;
  font-style: normal;
  vertical-align: middle;
  text-align: center;
  text-transform: none;
}
[class^="w-icon-"]:before, {
  display: block;
}

@keyframes loading-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


// 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";

.dart-tools {
}

.line-number {
  &.dart-analysis-info {
    color: @text-color-warning;
  }
}

.dart-analysis-info {
  .region {
    border-bottom: 1px dotted fadeout(@text-color-warning, 30%);
  }
  // border-bottom-style: dotted;
  // border-bottom-width: 1px;
  // border-bottom-color: fadeout(@text-color-warning, 30%);
}

Add more stylesheets for common Dart analyzer categories

// 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";

.dart-tools {
}

.line-number {
  &.dart-analysis-info {
    color: @text-color-info;
  }
  &.dart-analysis-warning {
    color: @text-color-warning;
  }
  &.dart-analysis-error {
    color: @text-color-error
  }

}

.dart-analysis-info {
  .region {
    border-bottom: 1px dotted fadeout(@text-color-info, 30%);
  }
  // border-bottom-style: dotted;
  // border-bottom-width: 1px;
  // border-bottom-color: fadeout(@text-color-warning, 30%);
}
.dart-analysis-warning {
  .region {
    border-bottom: 1px dotted fadeout(@text-color-warning, 30%);
  }
}

.dart-analysis-error {
  .region {
    border-bottom: 1px dotted fadeout(@text-color-error, 30%);
  }
}