@import "bower_components/ionicons/less/ionicons.less";

@footer-height: 100px;

html, body {
    height: 100%;
    min-height: 600px;
    background: #f0f0f0;
}
.wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -@footer-height;
    overflow: auto;
}
.push, footer {
    height: @footer-height;
    margin-top: 0;
}
footer {
    background: #1B1C1F;
    border: 0;

    a, a:hover {
        color: white;
    }
}
footer * {
    line-height: inherit;
}
.top-menu {
    background: #1a1a1a;
}

.ember-view {
    height: 100%;
}

.sub-logo {
    color: #EEE;
}

// Vendor overrides:

.ink-alert {
    color: white;
}

.ion {
    margin-right: 4px;
}

// Page-specific:

// Index
.index {
    h1 {
        color: white;
    }

    .wrap {
        background: url(/assets/images/pattern.gif);
        text-align: center;
    }

    .ink-button {
        font-size: larger;
    }
}

Fix selector for error message styling

@import "bower_components/ionicons/less/ionicons.less";

@footer-height: 100px;

html, body {
    height: 100%;
    min-height: 600px;
    background: #f0f0f0;
}
.wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -@footer-height;
    overflow: auto;
}
.push, footer {
    height: @footer-height;
    margin-top: 0;
}
footer {
    background: #1B1C1F;
    border: 0;

    a, a:hover {
        color: white;
    }
}
footer * {
    line-height: inherit;
}
.top-menu {
    background: #1a1a1a;
}

.ember-view {
    height: 100%;
}

.sub-logo {
    color: #EEE;
}

// Vendor overrides:

.ink-alert.basic.error {
    color: white;
}

.ion {
    margin-right: 4px;
}

// Page-specific:

// Index
.index {
    h1 {
        color: white;
    }

    .wrap {
        background: url(/assets/images/pattern.gif);
        text-align: center;
    }

    .ink-button {
        font-size: larger;
    }
}


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

.gallery-tile-row {

  .grid-list {
    height: 350px;
  }

  .grid-container {
    border: 1px solid @light-grey;
    position: relative;
  }

  .caption {
    padding: 10px;
    position: absolute;
    bottom: 0;
    background-color: @bg-darker-transparent;
    margin-bottom: 0;
    color: white;
    width: 100%;
  }

  .image-container {
    img {
      width: 100%;
      height: 100%;
    }
  }

  h5 {
    font-family: 'Amiri', serif;
    font-weight: 700;
    color: @text-dark;
  }

  :lang(ml){
    font-weight: 500;
  }
}

@media (min-width: 1200px) {
  .gallery-tile-row {
    .col-lg-3 {
      width: 20%;
    }
  }
}

Update resource page thumbnail styling

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

.gallery-tile-row {

  .grid-list {
    margin: 40px 0;
    height: 350px;
  }

  .grid-container {
    border: 1px solid @light-grey;
    position: absolute;
    bottom: 0;
  }

  .caption {
    border-top: 1px solid @light-grey;
    padding: 10px;
    margin: 0;
    color: @text-dark;
    width: 100%;
  }

  .image-container {
    img {
      width: 100%;
      height: 100%;
    }
  }

  h5 {
    font-family: 'Amiri', serif;
    font-weight: 700;
    color: @text-dark;
  }

  :lang(ml){
    font-weight: 500;
  }
}

@media (min-width: 1200px) {
  .gallery-tile-row {
    .col-lg-3 {
      width: 20%;
    }
  }
}


@import "ui-variables";
@import 'octicon-utf-codes';

linter-new-panel {
  display: block;
  max-height: 500px;

  .panel-heading {
    display: flex;
    flex-direction: row;
    width: 100%;

    .heading-status {
      margin-left: 50px;

      > span {
        padding-left: 5px;
      }
    }

    .heading-icons {
      justify-content: flex-end;
      margin-left: auto;
      cursor: pointer;
      span:first-child {
        padding-right: 10px;
      }
    }
  }

  .panel-body {
    padding: 5px;
    max-height: 88px;
    overflow-x: scroll;
    &.hide {
      display: none;
    }
  }

  [hidden] {
    display: none;
  }
}

linter-bottom-status {
  &.status-success {
    color: @background-color-success;
  }
  &.status-error {
    color: @background-color-error;
  }
}

Enable linter tooltips to overflow

@import "ui-variables";
@import 'octicon-utf-codes';

linter-new-panel {
  display: block;
  max-height: 500px;

  .panel-heading {
    display: flex;
    flex-direction: row;
    width: 100%;

    .heading-status {
      margin-left: 50px;

      > span {
        padding-left: 5px;
      }
    }

    .heading-icons {
      justify-content: flex-end;
      margin-left: auto;
      cursor: pointer;
      span:first-child {
        padding-right: 10px;
      }
    }
  }

  .panel-body {
    padding: 5px;
    max-height: 88px;
    overflow-x: scroll;
    &.hide {
      display: none;
    }
  }

  [hidden] {
    display: none;
  }
}

linter-bottom-status {
  &.status-success {
    color: @background-color-success;
  }
  &.status-error {
    color: @background-color-error;
  }
}

// Make linter tooltips overflow
atom-text-editor::shadow  .gutter[gutter-name="linter-ui-default"] {
  z-index: 1;
  overflow: visible;
}


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

.beatmapset-beatmap-picker {
  display: flex;
  flex-wrap: wrap;

  width: 250px;

  &__beatmap {
    width: 25px;
    height: 25px;

    padding: 3px;

    .default-border-radius;

    cursor: pointer;

    &--active, &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}

Remove underline from beatmap picker icons on chrome

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

.beatmapset-beatmap-picker {
  display: flex;
  flex-wrap: wrap;

  width: 250px;

  &__beatmap {
    width: 25px;
    height: 25px;

    padding: 3px;

    color: transparent;

    .default-border-radius;

    cursor: pointer;

    &--active, &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}


@error: #df922c;
@missing: #df2c2c;

.row-color( @color ) when (iscolor( @color )) {
    color: @color;

    input {
        border: 1px solid @color;
    }
}

.row {
    display: table;

    &.error { .row-color( @error ); }
    &.missing { .row-color( @missing ); }

    label {
        position: relative;
        margin-right: 1.3em;
        display: inline-block;
    }

    &.required label:after {
        content: '*';
        position: absolute;
        right: -1em;
        line-height: 1.6em;
        vertical-align: bottom;
        color: @missing;
    }
}

.errors {
    margin: 0 0 1em;
    padding: 0.6em 0;
    list-style: none;
    border-right: 2px solid @error;
    text-align: right;

    li:after {
        content: '-';
        margin-left: 0.4em;
        margin-right: -.5px;
        font-weight: 600;
    }
}

Fix gap for errors in default theme

@error: #df922c;
@missing: #df2c2c;

.row-color( @color ) when (iscolor( @color )) {
    color: @color;

    input {
        border: 1px solid @color;
    }
}

.row {
    display: table;

    &.error { .row-color( @error ); }
    &.missing { .row-color( @missing ); }

    label {
        position: relative;
        margin-right: 1.3em;
        display: inline-block;
    }

    &.required label:after {
        content: '*';
        position: absolute;
        right: -1em;
        line-height: 1.6em;
        vertical-align: bottom;
        color: @missing;
    }
}

.errors {
    margin: 0 0 1em;
    padding: 0.6em 0;
    list-style: none;
    border-right: 2px solid @error;
    text-align: right;

    li:after {
        content: '-';
        margin-left: 0.4em;
        margin-right: -1px;
        font-weight: 600;
    }
}


// Language syntax highlighting

.@{s}comment,
.@{s}brace,
.@{s}punctuation
{ .fg-1(); }

.@{s}comment.@{s}documentation
{ .uno-2(); }

// Default, Will be used by all languages when no other scope is defined
.@{s}source
{ .uno-1(); }

// Language entities -----------------------------------

.@{s}function   { .uno-1(); }
.@{s}method     { .uno-1(); }
.@{s}tag        { .uno-1(); }
.@{s}import     { .uno-1(); }
.@{s}snippet    { .uno-1(); }
.@{s}attribute  { .uno-2(); }

.@{s}constant   { .duo-1(); }
.@{s}property   { .duo-1(); }
.@{s}keyword    { .duo-1(); }

.@{s}class      { .tri-1(); }
.@{s}variable   { .tri-1(); }
.@{s}value      { .tri-1(); }

// Special case -----------------------------------

.@{s}comment {
  font-style: italic;
  & > * {
    color: inherit;
  }
}

.@{s}bold {
  font-weight: bold;
}

.@{s}italic {
  font-style: italic;
}

Add `string` and `attribute-name` scopes

// Language syntax highlighting

.@{s}comment,
.@{s}brace,
.@{s}punctuation
{ .fg-1(); }

.@{s}comment.@{s}documentation
{ .uno-2(); }

// Default, Will be used by all languages when no other scope is defined
.@{s}source
{ .uno-1(); }

// Language entities -----------------------------------

.@{s}function       { .uno-1(); }
.@{s}method         { .uno-1(); }
.@{s}tag            { .uno-1(); }
.@{s}import         { .uno-1(); }
.@{s}snippet        { .uno-1(); }
.@{s}attribute      { .uno-2(); }
.@{s}attribute-name { .uno-2(); }

.@{s}constant   { .duo-1(); }
.@{s}property   { .duo-1(); }
.@{s}keyword    { .duo-1(); }

.@{s}class      { .tri-1(); }
.@{s}variable   { .tri-1(); }
.@{s}value      { .tri-1(); }
.@{s}string     { .tri-1(); }

// Special case -----------------------------------

.@{s}comment {
  font-style: italic;
  & > * {
    color: inherit;
  }
}

.@{s}bold {
  font-weight: bold;
}

.@{s}italic {
  font-style: italic;
}


atom-workspace {
  // One Dark/One Light
  &.theme-one-dark-ui,
  &.theme-one-light-ui {
    // Find in Project
    .preview-pane .path.list-nested-item {
      .icon-book,
      .icon-file-media,
      .icon-file-text {
        &:before {
          top: 0;
        }
      }
    }
  }

  // Atom Material
  &.theme-atom-material-ui {
    // Tab Bar
    .tab-bar .tab {
      .title:before {
        margin-left: 0;
        margin-right: 5px !important;
        position: relative;
        vertical-align: middle;
      }

      .title.icon:before {
        vertical-align: text-bottom;
      }
    }

    .icon-file-directory {
      &:before {
        margin-right: 10px !important;
      }
    }

    .icon-file-text,
    .icon-book {
      &:before {
        top: 6px;
      }
    }
  }
}

Add theme override for Seti

atom-workspace {
  // One Dark/One Light
  &.theme-one-dark-ui,
  &.theme-one-light-ui {
    // Find in Project
    .preview-pane .path.list-nested-item {
      .icon-book,
      .icon-file-media,
      .icon-file-text {
        &:before {
          top: 0;
        }
      }
    }
  }

  // Atom Material
  &.theme-atom-material-ui {
    // Tab Bar
    .tab-bar .tab {
      .title:before {
        margin-left: 0;
        margin-right: 5px !important;
        position: relative;
        vertical-align: middle;
      }

      .title.icon:before {
        vertical-align: text-bottom;
      }
    }

    .icon-file-directory {
      &:before {
        margin-right: 10px !important;
      }
    }

    .icon-file-text,
    .icon-book {
      &:before {
        top: 6px;
      }
    }
  }

  // Seti
  &.theme-seti-ui {
    // Tab Bar
    .tab-bar .tab {
      .title:before {
        float: none;
        margin-left: 0;
        margin-right: 5px !important;
        position: relative;
        vertical-align: middle;
      }

      .title.icon:before {
        margin-top: 0;
        vertical-align: middle;
      }
    }

    .name.icon.icon-repo:before {
      top: -3px;
    }
  }
}


// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @gray-lighter;
    background-color: lighten(@background, 10%);
        border-color: darken(@border, 12%);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}

Use base color for btn:hover color

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @gray-lighter;
    background-color: @background;
        border-color: darken(@border, 12%);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}


@import "utilities/backgrounds";
@import "utilities/borders";
@import "utilities/flex";
@import "utilities/layout";
@import "utilities/links";
@import "utilities/misc";
@import "utilities/position";
@import "utilities/spacing";
@import "utilities/vue";
@import "utilities/z-index";

Remove old link utility import.

@import "utilities/backgrounds";
@import "utilities/borders";
@import "utilities/flex";
@import "utilities/layout";
@import "utilities/misc";
@import "utilities/position";
@import "utilities/spacing";
@import "utilities/vue";
@import "utilities/z-index";


@import "syntax-variables";

// Using the git-diff colors so they are visible on your syntax theme.
@red-color: @syntax-color-removed;
@green-color: @syntax-color-added;
@blue-color: @syntax-color-renamed;

@cta-green: rgb(80, 171, 89);
@cta-green-deactivated: rgba(80, 171, 89, 0.25);
@cta-blue: rgb(24, 136, 198);
@cta-blue-deactivated: rgb(24, 136, 198, 0.25);

@border-radius: 0.3rem;

@progress-bar-height: 2.75rem;

@small-logo: url('atom://kite-installer/styles/smalllogo.png');
@install-step-screenshot: url('atom://kite-installer/styles/screenshot.png');
@description-screenshot: url('atom://kite-installer/styles/plotscreenshot.png');
@show-kite-logo: url('atom://kite-installer/styles/logo.png');

Fix path to assets once in Atom environment

@import "syntax-variables";

// Using the git-diff colors so they are visible on your syntax theme.
@red-color: @syntax-color-removed;
@green-color: @syntax-color-added;
@blue-color: @syntax-color-renamed;

@cta-green: rgb(80, 171, 89);
@cta-green-deactivated: rgba(80, 171, 89, 0.25);
@cta-blue: rgb(24, 136, 198);
@cta-blue-deactivated: rgb(24, 136, 198, 0.25);

@border-radius: 0.3rem;

@progress-bar-height: 2.75rem;

@small-logo: url('atom://kite/node_modules/kite-installer/styles/smalllogo.png');
@install-step-screenshot: url('atom://kite/node_modules/kite-installer/styles/screenshot.png');
@description-screenshot: url('atom://kite/node_modules/kite-installer/styles/plotscreenshot.png');
@show-kite-logo: url('atom://kite/node_modules/kite-installer/styles/logo.png');


.@{steps-prefix-cls}-label-vertical {
  .@{steps-prefix-cls}-item {
    overflow: visible;
    &-tail {
      padding: 0 24px;
      margin-left: 48px;
    }
    &-content {
      display: block;
      text-align: center;
      margin-top: 8px;
      width: @steps-desciption-max-width;
    }
    &-icon {
      display: inline-block;
      margin-left: 36px;
    }
    &-title {
      padding-right: 0;
      &:after {
        display: none;
      }
    }
    &-description {
      text-align: left;
    }
  }
}

Fix content without vertical alignment icon when using vertical label mode; And description text-align: center;

.@{steps-prefix-cls}-label-vertical {
  .@{steps-prefix-cls}-item {
    overflow: visible;
    &-tail {
      padding: 0 24px;
      margin-left: 48px;
    }
    &-content {
      display: block;
      text-align: center;
      margin-top: 8px;
      // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
      width: (@steps-icon-size / 2 + 36px) * 2;
    }
    &-icon {
      display: inline-block;
      margin-left: 36px;
    }
    &-title {
      padding-right: 0;
      &:after {
        display: none;
      }
    }
  }
}


.apos-ui
{

  .apos-pager
  {
    display: inline-block;
    padding: @apos-padding-1;
    .apos-rounded;
    background-color: @apos-light;
    font-size: 14px;
  }

  .apos-pager-number
  {
    padding: @apos-padding-1 4px;
    a
    {
      text-decoration: none;
      color: @apos-black;
    }
    &.apos-active
    {
      color: @apos-mid;
    }
    &.apos-last:after
    {
      content: ' (Last)';
    }
  }

}

Move padding from span to a to make each pager number more clickable

.apos-ui
{

  .apos-pager
  {
    display: inline-block;
    padding: @apos-padding-1;
    .apos-rounded;
    background-color: @apos-light;
    font-size: 14px;
  }

  .apos-pager-number
  {
    a
    {
      padding: @apos-padding-1 4px;
      text-decoration: none;
      color: @apos-black;
    }
    &.apos-active
    {
      color: @apos-mid;
    }
    &.apos-last:after
    {
      content: ' (Last)';
    }
  }

}


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

.media-footer {
  margin: 0 60px 60px 60px;

  > ul {
    margin: 0 0 40px 0;
    padding: 0 0 0 30px;
    font-size: 0;
    list-style-type: none;
    color: @link-color;
    border-bottom: 1px solid @gray-light;

    > li {
      display: inline-block;
      padding: 7px 10px;
      margin-right: 3px;
      font-size: 1.4rem;
      background-color: @gray-lightest;
      cursor: pointer;
      .user-select(none);

      > .tab-title {
        margin-left: 2px;
        vertical-align: middle;

        &::after {
          font-weight: bold;
          margin-left: 5px;
          vertical-align: top;
          content: "+";
        }
      }

      &.active {
        color: @gray-lightest;
        background-color: @link-color;

        > .tab-title::after {
          content: "\2212"; // − (−)
        }
      }
    }
  }

  > div {
    display: none;
    background-color: white;
  }

  > .license, > .last-edit {
    display: block;
    font-size: 1.2rem;
    color: @gray-medium;
  }
}

Add border and spacing at bottom

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

.media-footer {
  margin: 0 60px 60px 60px;

  > ul {
    margin: 0 0 40px 0;
    padding: 0 0 0 30px;
    font-size: 0;
    list-style-type: none;
    color: @link-color;
    border-bottom: 1px solid @gray-light;

    > li {
      display: inline-block;
      padding: 7px 10px;
      margin-right: 3px;
      font-size: 1.4rem;
      background-color: @gray-lightest;
      cursor: pointer;
      .user-select(none);

      > .tab-title {
        margin-left: 2px;
        vertical-align: middle;

        &::after {
          font-weight: bold;
          margin-left: 5px;
          vertical-align: top;
          content: "+";
        }
      }

      &.active {
        color: @gray-lightest;
        background-color: @link-color;

        > .tab-title::after {
          content: "\2212"; // − (−)
        }
      }
    }
  }

  > div {
    display: none;
    padding-bottom: 40px;
    margin-bottom: 40px;
    background-color: white;
    border-bottom: 1px solid @gray-light;
  }

  > .license, > .last-edit {
    display: block;
    font-size: 1.2rem;
    color: @gray-medium;
  }
}


@import "ui-variables";

// Pattern matching; ish is cray.
// http://lesscss.org/#-pattern-matching-and-guard-expressions
.text(normal) {
  font-weight: normal;
  color: @text-color;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
  text-shadow: none;
}
.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.text(selected) {
  font-weight: normal;
  color: @text-color-selected;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}

.text(info) {
  color: @text-color-info;
  text-shadow: none;
}
.text(success) {
  color: @text-color-success;
  text-shadow: none;
}
.text(warning) {
  color: @text-color-warning;
  text-shadow: none;
}
.text(error) {
  color: @text-color-error;
  text-shadow: none;
}

Remove text shadow on selected items

@import "ui-variables";

// Pattern matching; ish is cray.
// http://lesscss.org/#-pattern-matching-and-guard-expressions
.text(normal) {
  font-weight: normal;
  color: @text-color;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
  text-shadow: none;
}
.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.text(selected) {
  font-weight: normal;
  color: @text-color-selected;
  text-shadow: none;
}

.text(info) {
  color: @text-color-info;
  text-shadow: none;
}
.text(success) {
  color: @text-color-success;
  text-shadow: none;
}
.text(warning) {
  color: @text-color-warning;
  text-shadow: none;
}
.text(error) {
  color: @text-color-error;
  text-shadow: none;
}


.color-switcher {
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 10;

	&-button {
		display: block;
		width: 50px;
		height: 50px;
		border: none;
		margin: 10px 0;
		transform: translateX(120%);

		&.first {
			background: #49645d;
			border-radius: 50% 60% 35% 35%;
		}

		&.second {
			background: green;
			border-radius: 60% 50% 35% 35%;
		}

		&.third {
			background: black;
			border-radius: 35% 50% 60% 35%;
		}
	}
}

Remove outline form color switcher

.color-switcher {
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 10;

	&-button {
		display: block;
		width: 50px;
		height: 50px;
		border: none;
		margin: 10px 0;
		transform: translateX(120%);

		&:focus {
			outline: none;
		}

		&.first {
			background: #49645d;
			border-radius: 50% 60% 35% 35%;
		}

		&.second {
			background: green;
			border-radius: 60% 50% 35% 35%;
		}

		&.third {
			background: black;
			border-radius: 35% 50% 60% 35%;
		}
	}
}


@import (reference) '../../../../assets/stylesheets/shared/osio.less';

.env-card-title {
  text-transform: capitalize;
}

.resource-card {
  background: lightgrey;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.resource-card-body {
  font-size: .8em;
}

.resource-title {
  color: black;
  cursor: pointer;
}

Use patternfly colors for apps styling

@import (reference) '../../../../assets/stylesheets/shared/osio.less';

.env-card-title {
  text-transform: capitalize;
}

.resource-card {
  background: @color-pf-black-300;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.resource-card-body {
  font-size: .8em;
}

.resource-title {
  color: @color-pf-black;
  cursor: pointer;
}


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

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

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

    .loading-message {
      margin: 5px;

      .mini-icon(hourglass);

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

    .tree {
      padding: 5px;
    }

    .entry {
      margin: 5px;

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

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

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

        .mini-icon(text-file);

        &.symlink {
          .mini-icon(symlink);
        }
      }

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

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

        .mini-icon(directory);
      }
    }
  }
}

Add top padding to directories

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

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

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

    .loading-message {
      margin: 5px;

      .mini-icon(hourglass);

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

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

    .entry {
      margin: 5px;

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

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

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

        .mini-icon(text-file);

        &.symlink {
          .mini-icon(symlink);
        }
      }

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

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

        .mini-icon(directory);
      }
    }
  }
}


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

html, body {
  height: 100%;
}

body {
  background: @white;
  overflow-y: scroll;

  #body-wrapper {
    min-height: 100%;
    position: relative;
  }

  #body {
    position: relative;
  }

  #left-column {
    .box-sizing(border-box);
  }

}

.fixed {
  #left-column {
    .style-scrollbars;
    position: fixed;
    height: 100%;
    top: 50px;
    padding-bottom: 50px;
    overflow-y: scroll;
  }

  #main-column {
    position: relative;
    left: 240px;
  }
}

Disable horizontal-scroll for channel listing

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

html, body {
  height: 100%;
}

body {
  background: @white;
  overflow-y: scroll;

  #body-wrapper {
    min-height: 100%;
    position: relative;
  }

  #body {
    position: relative;
  }

  #left-column {
    .box-sizing(border-box);
  }

}

.fixed {
  #left-column {
    .style-scrollbars;
    position: fixed;
    height: 100%;
    top: 50px;
    padding-bottom: 50px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  #main-column {
    position: relative;
    left: 240px;
  }
}


// Bootstrap Core
@import "../../bootstrap/less/bootstrap.less";

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

// Base styles independent of design (shared definitions)
// base.less is meant to be used for different themes for one customer.
// Delete this if unneded.
@import "base.less";

// Corporate Designs
@import "customerName.less";

////////// Do NOT insert style-definitions here! //////////

Fix Path to bootstrap sources.

// Bootstrap Core
@import "../../libs/bootstrap/less/bootstrap.less";

@icon-font-path: "../../libs/bootstrap/fonts/";

// Base styles independent of design (shared definitions)
// base.less is meant to be used for different themes for one customer.
// Delete this if unneded.
@import "base.less";

// Corporate Designs
@import "customerName.less";

////////// Do NOT insert style-definitions here! //////////


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

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

.list-result {
    .result-title {
        font-size: @font-size-large;
    }
    span {
        .display-text{
            display: inline;
        }
    }
    .inline-list li {
        list-style-type: none;
    }
}

article.search .results-container-thumbnails .result{
    overflow:hidden;
    img {
        max-height: 175px;
        margin: auto;
    }
    .img-placeholder {
        max-height: 175px;
    }
}

Remove space above `h1` and remove redundant styles.

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


/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

/*
 * Examples
 * (To see them, uncomment and save)
 */

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

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

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

Hide file icons on tab

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

/*
 * Examples
 * (To see them, uncomment and save)
 */

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

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

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

.tab .title:before {
  display: none;
}


.top-bar {
  .name h1 {
    color: white;
  }
}

form {
  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"],
  input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="time"],
  input[type="url"], textarea, select, .cleditorMain, .block-zone-container {
    margin-bottom: 1em;
  }

  .top-bar {
    margin-bottom: 0;
  }
  .blocks-container {
    margin: 0 0 !important;
  }
}

.nav-title {
  margin: 0 0 0 10px !important;
}

.user-container {
  .table {
    width: 100%;
    border-collapse: inherit;
  }
}

Add spacing to top of login

.top-bar {
  .name h1 {
    color: white;
  }
}

form {
  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"],
  input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="time"],
  input[type="url"], textarea, select, .cleditorMain, .block-zone-container {
    margin-bottom: 1em;
  }

  .top-bar {
    margin-bottom: 0;
  }
  .blocks-container {
    margin: 0 0 !important;
  }
}

.fullpage-login {
  margin-top: 50px;
}

.nav-title {
  margin: 0 0 0 10px !important;
}

.user-container {
  .table {
    width: 100%;
    border-collapse: inherit;
  }
}


body {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

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

p {
  margin: 0;
}

Add reset for "-webkit-font-smoothing" on "button

body {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

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

p {
  margin: 0;
}

/**
 * Webkit buttons set "-webkit-font-smoothing: auto"
 */
button {
  -webkit-font-smoothing: inherit;
}


.Contact {
  margin-top: -0.1em;
  margin-bottom: 0.4em;

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

  .IconContainer,
  .TextContainer {
    vertical-align: middle;
  }

  .IconContainer {
    font-size: 2.25em;
    width: 1.25em;
    height: 1em;
    line-height: 1.0;
  }

  .TextContainer {
    font-size: 1.125em;
  }

  // 500px logo
  .icon-500px {
    margin-top: -0.1em;
    display: block;

    &:before {
      font-family: sans-serif;
      content: "5∞";
      font-weight: 900;
      font-size: 0.7em;
    }
  }
}

Fix 500px logo vertical alignment

.Contact {
  margin-top: -0.1em;
  margin-bottom: 0.4em;

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

  .IconContainer,
  .TextContainer {
    vertical-align: middle;
  }

  .IconContainer {
    font-size: 2.25em;
    width: 1.25em;
    height: 1em;
    line-height: 1.0;
  }

  .TextContainer {
    font-size: 1.125em;
  }

  // 500px logo
  .icon-500px {
    margin-top: -0.055em;
    display: block;

    &:before {
      font-family: sans-serif;
      content: "5∞";
      font-weight: 900;
      font-size: 0.7em;
    }
  }
}


@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: "";
          }
        }
      }
    }
  }
}

Simplify rules for styling names

@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:not(:last-child)::after {
          content: ",";
        }
      }
    }
  }
}


.framework-perseus {
    .perseus-group {
        // We don't want group text to be centered, so we
        // set the group width to 100% so that a centered
        // group is the same as an uncentered group, and
        // its text still ends up all on the left.
        width: 100%;

        .group-icon {
            position: absolute;
            top: 50%;
            margin-left: -20px;
        }
    }
}

Fix Sequence widget's green checkmark positioning.

.framework-perseus {
    .perseus-group {
        position: relative;

        // We don't want group text to be centered, so we
        // set the group width to 100% so that a centered
        // group is the same as an uncentered group, and
        // its text still ends up all on the left.
        width: 100%;

        .group-icon {
            font-size: 14px;
            position: absolute;
            top: 50%;
            top: ~"calc(50% - 7px)";
            margin-left: -20px;
        }
    }
}


// One Dark

[theme-one-dark-ui-layoutmode],
[theme-one-light-ui-layoutmode] {
  .list-group,
  .list-tree {
    .icon::before {
      vertical-align: bottom;
    }
  }
}

atom-workspace.theme-atom-material-ui {
  // Tab Bar
  .tab-bar .tab {
    .title:before {
      margin-left: 0;
      margin-right: 5px !important;
      position: relative;
      vertical-align: middle;
    }

    .icon-tools:before {
      vertical-align: text-bottom;
    }
  }

  .icon-file-directory {
    &:before {
      margin-right: 10px !important;
    }
  }

  .icon-file-text,
  .icon-book {
    &:before {
      top: 6px;
    }
  }
}

Fix spacing in `atom-material-ui` for other non-custom icons

// One Dark

[theme-one-dark-ui-layoutmode],
[theme-one-light-ui-layoutmode] {
  .list-group,
  .list-tree {
    .icon::before {
      vertical-align: bottom;
    }
  }
}

atom-workspace.theme-atom-material-ui {
  // Tab Bar
  .tab-bar .tab {
    .title:before {
      margin-left: 0;
      margin-right: 5px !important;
      position: relative;
      vertical-align: middle;
    }

    .title.icon:before {
      vertical-align: text-bottom;
    }
  }

  .icon-file-directory {
    &:before {
      margin-right: 10px !important;
    }
  }

  .icon-file-text,
  .icon-book {
    &:before {
      top: 6px;
    }
  }
}


// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------

// Body reset
// ----------

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

// Links
// -----

a {
  color: @linkColor;
  text-decoration: none;
}
a:hover {
  color: @linkColorHover;
  text-decoration: underline;
}

a.disabled {
	.opacity(50);
	color: @gray !important;
}

a.disabled:hover{
	// background: transparent !important;
	color: @gray !important;
}

// Images
// -------------------------

// Rounded corners
.img-rounded {
  .border-radius(6px);
}

// Add polaroid-esque trim
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .box-shadow(0 1px 3px rgba(0,0,0,.1));
}

// Perfect circle
.img-circle {
  .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}

Remove background on disabled links

// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------

// Body reset
// ----------

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

// Links
// -----

a {
  color: @linkColor;
  text-decoration: none;
}
a:hover {
  color: @linkColorHover;
  text-decoration: underline;
}

a.disabled {
	.opacity(50);
	color: @gray !important;
}

a.disabled:hover{
	background: transparent !important;
	color: @gray !important;
}

// Images
// -------------------------

// Rounded corners
.img-rounded {
  .border-radius(6px);
}

// Add polaroid-esque trim
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .box-shadow(0 1px 3px rgba(0,0,0,.1));
}

// Perfect circle
.img-circle {
  .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}


.mw-kartographer {
	display: inline-block;
}

.mw-kartographer-responsive {
	width: 100%;
	min-width: 200px;

	.mw-kartographer-responder {
		position: relative;
	}

	.mw-kartographer-map {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.mw-kartographer-mapDialog-map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mw-kartographer-error {
	background: #ffc0cb;
}

a.mw-kartographer-link {
	cursor: pointer;
}

.mw-kartographer-autostyled {
	color: #fff;
}

.leaflet-bar a {
	background-position: center center;
}

Fix map overlapping on mobile

.mw-kartographer {
	display: inline-block;
}

.mw-kartographer-responsive {
	width: 100%;
	min-width: 200px;

	.mw-kartographer-responder {
		position: relative;
	}

	.mw-kartographer-map {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 0;
	}
}

.mw-kartographer-mapDialog-map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mw-kartographer-error {
	background: #ffc0cb;
}

a.mw-kartographer-link {
	cursor: pointer;
}

.mw-kartographer-autostyled {
	color: #fff;
}

.leaflet-bar a {
	background-position: center center;
}


[data-apos-ajax-infinite-scroll] {
  display: block;
  visibility: hidden;
}

Make button as small as possible

[data-apos-ajax-infinite-scroll] {
  display: block;
  visibility: hidden;
  height: 0;
  border: 0;
  margin: 0;
  padding: 0;
}


@import "../include/variables.less";
@import "../../vendor/bootstrap/variables.less";
@import "../../vendor/bootstrap/mixins.less";

*.ccm-content-editor-snippet {
  .border-radius(2px);
  border: 1px solid #eee;
  padding: 4px;
  display: inline-block;
  background-color: #FDFFCE;
  font-family: @font-family-sans-serif;
}

.redactor_ccm-block-content-editor-composer {
  border: 1px solid #eee;
  background: white;
  padding: 10px;
  .border-bottom-radius(4px);
}

.ccm-block-edit-inline-active .redactor_box {
  background: transparent;
}

.redactor_editor td {
  border: solid 1px rgb(51, 51, 51);
  min-width: 10px;
  min-height: 10px;
}

Add th to table styling, just in case.

@import "../include/variables.less";
@import "../../vendor/bootstrap/variables.less";
@import "../../vendor/bootstrap/mixins.less";

*.ccm-content-editor-snippet {
  .border-radius(2px);
  border: 1px solid #eee;
  padding: 4px;
  display: inline-block;
  background-color: #FDFFCE;
  font-family: @font-family-sans-serif;
}

.redactor_ccm-block-content-editor-composer {
  border: 1px solid #eee;
  background: white;
  padding: 10px;
  .border-bottom-radius(4px);
}

.ccm-block-edit-inline-active .redactor_box {
  background: transparent;
}

.redactor_editor {
  > td, th {
    border: solid 1px rgb(51, 51, 51);
    min-width: 10px;
    min-height: 10px;
  }
}


.left,
.align.left,
.align-left /* @deprecated */
{
	text-align: left;
}

.align.center,
.align-center /* @deprecated */
{
    text-align: center;
}

.right,
.align.right,
.align-right /* @deprecated */
{
	text-align: right;
}

.middle,
.align.middle,
.align-middle /* @deprecated */
{
    vertical-align: middle;
}

.top,
.align.top,
.align-top /* @deprecated  */
{
    vertical-align: top;
}

.bottom,
.align.bottom,
.align-bottom /* @deprecated */
{
    vertical-align: bottom;
}

.scroll
{
    overflow: auto;
}

.underline
{
	text-decoration: underline;
}

div.mask
{
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	position: absolute;
	flex: 1;
    opacity: 0.8;
    background-image: ~"url(../images/loading.gif)";
    background-repeat: no-repeat;
    background-position: center;
}

.color
{
	&.red
	{
		color: red;
	}
}

Remove the position absolute from the mask element

.left,
.align.left,
.align-left /* @deprecated */
{
	text-align: left;
}

.align.center,
.align-center /* @deprecated */
{
    text-align: center;
}

.right,
.align.right,
.align-right /* @deprecated */
{
	text-align: right;
}

.middle,
.align.middle,
.align-middle /* @deprecated */
{
    vertical-align: middle;
}

.top,
.align.top,
.align-top /* @deprecated  */
{
    vertical-align: top;
}

.bottom,
.align.bottom,
.align-bottom /* @deprecated */
{
    vertical-align: bottom;
}

.scroll
{
    overflow: auto;
}

.underline
{
	text-decoration: underline;
}

div.mask
{
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	flex: 1;
    opacity: 0.8;
    background-image: ~"url(../images/loading.gif)";
    background-repeat: no-repeat;
    background-position: center;
}

.color
{
	&.red
	{
		color: red;
	}
}


.mb-home {

}

.mb-section-header {
  color: #999;
}

.mb-home-section {
  height: 180px;

  .section-content {
    height: 140px;
    overflow-x: scroll;
    overflow-y: hidden;

    .movie-covers {
      width: 1600px;

      .movie-cover {
        width: 100px;
        height: 140px;
        background-size: cover;
        display: inline-block;
      }
    }
  }
}

Add margin for movie cover

.mb-home {

}

.mb-section-header {
  color: #999;
}

.mb-home-section {
  height: 180px;

  .section-content {
    height: 130px;
    overflow-x: scroll;
    overflow-y: hidden;

    .movie-covers {
      width: 1600px;
      a {
        display: inline-block;
        width: 100px;
        height: 130px;
        .movie-cover {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
        }
        &:not(:last-child) {
          margin-right: 2px;
        }
      }
    }
  }
}


/*
 * The MIT License (MIT)
 * Copyright (c) 2016 Heat Ledger Ltd.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * */

trader-volume {
  font-size: 13px;
  opacity: 0.6;
  margin-bottom: 6px;
  margin-right: 70px;
  .label {
    margin-right: 6px;
  }
  .value {
    margin-right: 24px;
  }
}

Make volume bar more compact

/*
 * The MIT License (MIT)
 * Copyright (c) 2016 Heat Ledger Ltd.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * */

trader-volume {
  font-size: 13px;
  opacity: 0.6;
  margin-bottom: 0px;
  margin-right: 0px;
  .label {
    margin-right: 6px;
  }
  .value {
    margin-right: 24px;
  }
}


@import "bootstrap/less/bootstrap.less";
@import "checkbox.less";
@import "fixtures.less";

body {
  padding-top:50px;
}

#masthead {
  min-height:250px;
}

#masthead h1 {
  font-size: 30px;
  line-height: 1;
  padding-top:20px;
}

#masthead .well {
  margin-top:8%;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 50px;
  }
}

.navbar-bright {
  background-color:#111155;
  color:#fff;

}

.affix-top,.affix{
  position: static;
}

@media (min-width: 979px) {

  #sidebar {
    background: #892D42;
    font-weight: 600;
  }

  #sidebar li a {
    color: white;
  }

  #sidebar li a:hover {
    background: #4ca3de;
    color: black;
  }

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
  }

  #sidebar li.active {
    background: #4ca3de;
    color: black;
    border:0 #eee solid;
    border-right-width:5px;
  }

}

Fix whiting on side of sidebar.

@import "bootstrap/less/bootstrap.less";
@import "checkbox.less";
@import "fixtures.less";

body {
  padding-top:50px;
}

#masthead {
  min-height:250px;
}

#masthead h1 {
  font-size: 30px;
  line-height: 1;
  padding-top:20px;
}

#masthead .well {
  margin-top:8%;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 50px;
  }
}

.navbar-bright {
  background-color:#111155;
  color:#fff;

}

.affix-top,.affix{
  position: static;
}

@media (min-width: 979px) {

  #sidebar {
    background: #892D42;
    font-weight: 600;
  }

  #sidebar li a {
    color: white;
  }

  #sidebar li a:hover {
    background: #4ca3de;
    color: black;
  }

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
  }

  #sidebar li.active {
    background: #4ca3de;
    color: black;
    border:0 #eee solid;
  }

}


@share-button-width: 32px;
@share-button-height: 32px;

.bg-position(@ordinal) {
    background-position: -@share-button-width * @ordinal 0px;
}

.addthis_sharing_toolbox {
    .at-share-tbx-element .at-share-btn {
        margin: 0px 15px;
    }

    .at-share-btn {
        .at15nc {
            background: url("../img/share-buttons-sprite.png") no-repeat;

            &.at15t_facebook {
                .bg-position(0);
            }
            &.at15t_google_plusone_share {
                .bg-position(1);
            }
            &.at15t_twitter {
                .bg-position(2);
            }
            &.at15t_linkedin {
                .bg-position(3);
            }
            &.at15t_blogger {
                .bg-position(4);
            }
            &.at15t_pinterest_share {
                .bg-position(5);
            }
            &.at15t_vk {
                .bg-position(6);
            }

            &:active, &:hover {
                background-position-y: -@share-button-height;
            }
        }
    }
}

Fix hover state for share buttons in FF;

@share-button-width: 32px;
@share-button-height: 32px;

.bg-position(@ordinal) {
    background-position: -@share-button-width * @ordinal 0px;
    &:active, &:hover {
        background-position: -@share-button-width * @ordinal -@share-button-height;
    }
}

.addthis_sharing_toolbox {
    .at-share-tbx-element .at-share-btn {
        margin: 0px 15px;
    }

    .at-share-btn {
        .at15nc {
            background: url("../img/share-buttons-sprite.png") no-repeat;

            &.at15t_facebook {
                .bg-position(0);
            }
            &.at15t_google_plusone_share {
                .bg-position(1);
            }
            &.at15t_twitter {
                .bg-position(2);
            }
            &.at15t_linkedin {
                .bg-position(3);
            }
            &.at15t_blogger {
                .bg-position(4);
            }
            &.at15t_pinterest_share {
                .bg-position(5);
            }
            &.at15t_vk {
                .bg-position(6);
            }
        }
    }
}


@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

Remove background color of content

@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

.content {
  background-color: transparent;
}


.modal-backdrop {
    background: rgba(0, 0, 0, 0.55);
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: @gb-zindex-modal;
}

.modalSize(@size) {
    width: @size;
    margin: 30px auto;
}

.modal {
    border: 1px solid @gb-modal-border;
    border-radius: @gb-modal-radius;
    background: @gb-modal-background;
    .box-shadow(@gb-modal-shadow);

    .modal-heading {
        padding: @gb-modal-padding;
        border-bottom: 1px solid @gb-modal-innerborder;

        h4 {
            margin: 0px;
        }
    }

    .modal-body {
        padding: @gb-modal-padding;
    }

    .modal-footer {
        border-top: 1px solid @gb-modal-innerborder;
        padding: @gb-modal-padding;
        text-align: right;
    }

    .modalSize(@gb-modal-size-medium);

    &.modal-sm {
        .modalSize(@gb-modal-size-small);
    }
    &.modal-lg {
        .modalSize(@gb-modal-size-large);
    }
}

Handle buttons on modal footer

.modal-backdrop {
    background: rgba(0, 0, 0, 0.55);
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: @gb-zindex-modal;
}

.modalSize(@size) {
    width: @size;
    margin: 30px auto;
}

.modal {
    border: 1px solid @gb-modal-border;
    border-radius: @gb-modal-radius;
    background: @gb-modal-background;
    .box-shadow(@gb-modal-shadow);

    .modal-heading {
        padding: @gb-modal-padding;
        border-bottom: 1px solid @gb-modal-innerborder;

        h4 {
            margin: 0px;
        }
    }

    .modal-body {
        padding: @gb-modal-padding;
    }

    .modal-footer {
        border-top: 1px solid @gb-modal-innerborder;
        padding: @gb-modal-padding;
        text-align: right;

        .btn+.btn {
            margin-bottom: 0;
            margin-left: 5px;
        }
    }

    .modalSize(@gb-modal-size-medium);

    &.modal-sm {
        .modalSize(@gb-modal-size-small);
    }
    &.modal-lg {
        .modalSize(@gb-modal-size-large);
    }
}


// Base Print Stlyes
// --------------------------------------------------

@page {
	size: auto;
	margin: 2cm 1cm;
}

@media print {
	body {
		font-family: Garamond, Georgia, 'Times New Roman', serif;
		background: white;
		font-size: 90%;
		line-height: 115%;
		letter-spacing: -0.15em;
		color: #404040;
	}
	aside, nav, [role="navigation"], img {
		display: none;
	}
	h1 {
		font-size: 140%
	}
	body, main, footer {
		clear: both;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
	}
}

Fix typo and add newline at end of file.

// Base Print Styles
// --------------------------------------------------

@page {
	size: auto;
	margin: 2cm 1cm;
}

@media print {
	body {
		font-family: Garamond, Georgia, 'Times New Roman', serif;
		background: white;
		font-size: 90%;
		line-height: 115%;
		letter-spacing: -0.15em;
		color: #404040;
	}
	aside, nav, [role="navigation"], img {
		display: none;
	}
	h1 {
		font-size: 140%
	}
	body, main, footer {
		clear: both;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
	}
}


header {
    color: ~"{{ page.brand.color_header_text }}";

    // We have a background image - assign it.
    background-color: ~"{{ page.brand.color_header_background }}";
    background-image: ~"{% if page.brand.header_background %} url('{{ page.brand.header_background.url }}') {% else %} none {% endif %}";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    a {
        color: ~"{{ page.brand.color_header_links }}";
        opacity: 0.9;

        &:hover,
        &:focus {
            opacity: 1;
            color: ~"{{ page.brand.color_header_links }}";
        }

        &:not([href]) {
            color: ~"{{ page.brand.color_header_text }}";
            text-decoration: none;
        }
    }

}

Split header v.s. body colours for blockquote and hr

header {
    color: ~"{{ page.brand.color_header_text }}";

    // We have a background image - assign it.
    background-color: ~"{{ page.brand.color_header_background }}";
    background-image: ~"{% if page.brand.header_background %} url('{{ page.brand.header_background.url }}') {% else %} none {% endif %}";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    a {
        color: ~"{{ page.brand.color_header_links }}";
        opacity: 0.9;

        &:hover,
        &:focus {
            opacity: 1;
            color: ~"{{ page.brand.color_header_links }}";
        }

        &:not([href]) {
            color: ~"{{ page.brand.color_header_text }}";
            text-decoration: none;
        }
    }

    hr { border-top-color: ~"{{ page.brand.color_header_text }}"; }

    blockquote:before { background-color: ~"{{ page.brand.color_header_text }}"; }
}


.badge-sticky {
  background: #d13e32;
}
.discussion-stickied-post {
  & .post-icon, & .post-activity-info, & .post-activity-info a {
    color: #d13e32;
  }
}
.discussion-excerpt {
  margin-top: 8px;
  margin-right: 20px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5em;
  color: @fl-body-muted-color;
  background: @fl-body-secondary-color;
  border-radius: @border-radius-base;
  padding: 10px 15px;
  border-bottom: 2px dotted @fl-body-bg;

  .discussion-summary .info > li& {
    display: block;

    .paned & {
      display: none;
    }
    @media @phone {
      display: none;
    }
  }
}

Remove box from excerpts again

.badge-sticky {
  background: #d13e32;
}
.discussion-stickied-post {
  & .post-icon, & .post-activity-info, & .post-activity-info a {
    color: #d13e32;
  }
}
.discussion-excerpt {
  margin-top: 8px;
  margin-right: 20px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5em;
  color: @fl-body-muted-more-color;

  .discussion-summary .info > li& {
    display: block;

    .paned & {
      display: none;
    }
    @media @phone {
      display: none;
    }
  }
}


#header {
	margin-top: 30px;
}

#footer {
	margin-top: 30px;
	border-top: 1px solid #eeeeee;
	padding-top: 30px;
	color: #777777;
}

.gallery-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

Update site css to saoye style

#header {
	margin-top: 30px;
}

#footer {
	margin-top: 30px;
	border-top: 1px solid #eeeeee;
	padding-top: 30px;
	color: #777777;
}

.gallery-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 0px;
	padding-right: 0px;
}

.container-post {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}


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

Correct import for capsule mixins.

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


// This file has fallback colors. It specifies the color variables all themes
// must implement.

@background-color-1: #fff;

Add in the fallback ui colors.

// This file has fallback colors. It specifies the color variables all themes
// must implement.

// Colors should be chosen mostly for their utility in packages. We dont want
// people to have to think about what colors to use. The thinking is that they
// will be able to follow some guidelines, and generally get something that
// looks reasonable.

// Least subtle -> most subtle
@text-color-1: #333;
@text-color-2: #444;
@text-color-3: #555;

// For text on dark/colored background's
@text-alt-color-1: #fff;
@text-alt-color-2: #fff;
@text-alt-color-3: #fff;

// Least subtle -> most subtle
@text-color-subtle-1: #777;
@text-color-subtle-2: #999;
@text-color-subtle-3: #ccc;

// Main bg you should use, a darker alt, and a lighter alt
@background-color-1: #f4f4f4;
@background-color-2: #eee;
@background-color-3: #fff;

// Highlight color for background corresponding in index to background-color
@background-highlight-color-1: rgba(0, 0, 0, .2);
@background-highlight-color-2: rgba(0, 0, 0, .2);
@background-highlight-color-3: rgba(0, 0, 0, .2);

// Border color for background corresponding in index to background-color.
@border-color-1: #eee;
@border-color-2: #ccc;
@border-color-3: #f5f5f5;

// Bright color, darker then lighter.
// Info colors are generally blue
@accent-color-info-1: #0098ff;
@accent-color-info-2: #5293d8;
@accent-color-info-3: #66a6ff;

// Bright color, darker then lighter.
// Error colors are generally red/orange
@accent-color-error-1: #ff4800;
@accent-color-error-2: #f78a46;
@accent-color-error-3: #ffa275;

// Bright color, darker then lighter.
// Success colors are generally green
@accent-color-success-1: #1fe977;
@accent-color-success-2: #17ca65;
@accent-color-success-3: #58f79d;


@dominant: rgb(255, 200, 0);
@recessive: lighten(@dominant, 47%);
@edge: black;
@text: spin(darken(@dominant, 40%), 50);

body {
  background-color: @dominant;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: @text;
  line-height: 1.33;
}

.outer-frame {
  width: 60em;
  margin: 2em auto 0 auto;
  padding: 1em;
  overflow: auto;
  background-color: @recessive;
  border: 0.2em solid @edge;
  border-radius: 1em;
  box-shadow: 1em 1em @edge;
}

.qualities {
  width: 25%;
  float: left;
  padding: 1em;
  border: 0.1em solid @edge;
  border-radius: 0.5em;
}

.persona {
  width: 100%;
  border-top: 0.3em solid @edge;
  border-bottom: 0.3em solid @edge;
  margin-left: -25%;
  background-color: @dominant;
  transform: rotateZ(-30deg);
  text-align: center;
  font-size: 2em;
}

Use rems Instead of ems

@dominant: rgb(255, 200, 0);
@recessive: lighten(@dominant, 47%);
@edge: black;
@text: spin(darken(@dominant, 40%), 50);

html {
  background-color: @dominant;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: @text;
  line-height: 1.33;
}

.outer-frame {
  width: 60rem;
  margin: 2rem auto 0 auto;
  padding: 1rem;
  overflow: auto;
  background-color: @recessive;
  border: 0.2rem solid @edge;
  border-radius: 1rem;
  box-shadow: 1rem 1rem @edge;
}

.qualities {
  width: 25%;
  float: left;
  padding: 1rem;
  border: 0.1rem solid @edge;
  border-radius: 0.5rem;
}

.persona {
  width: 100%;
  border-top: 0.3rem solid @edge;
  border-bottom: 0.3rem solid @edge;
  margin-left: -25%;
  background-color: @dominant;
  transform: rotateZ(-30deg);
  text-align: center;
  font-size: 2rem;
}


@import "syntax-variables";

.block-cursor(@visibility: visible) {
  border: 0;
  background-color: @syntax-cursor-color;
  visibility: @visibility;
  opacity: 0.5;
}

.vim-mode.command-mode, .vim-mode.operator-pending-mode, .vim-mode.visual-mode {
  .cursor, .cursor.blink-off {
    .block-cursor(hidden);
  }

  &.editor.is-focused {
    .cursor, .cursor.blink-off {
      .block-cursor;
    }
  }
}

.vim-mode.visual-mode {
  .cursor.hidden-cursor {
    display: block;
  }
}

.command-mode-input .editor.mini {
  background-color: inherit;
  border: none;
  width: 100%;
  font-weight: normal;
  color: #aaaaaa;
  text-shadow: 0 -1px 0 #333333;
  // see also the commandModeInputViewFontSize setting.
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
}

.command-mode-input .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}

Remove text shadow and use correct variable for mini-editor

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

.block-cursor(@visibility: visible) {
  border: 0;
  background-color: @syntax-cursor-color;
  visibility: @visibility;
  opacity: 0.5;
}

.vim-mode.command-mode, .vim-mode.operator-pending-mode, .vim-mode.visual-mode {
  .cursor, .cursor.blink-off {
    .block-cursor(hidden);
  }

  &.editor.is-focused {
    .cursor, .cursor.blink-off {
      .block-cursor;
    }
  }
}

.vim-mode.visual-mode {
  .cursor.hidden-cursor {
    display: block;
  }
}

.command-mode-input .editor.mini {
  background-color: inherit;
  border: none;
  width: 100%;
  font-weight: normal;
  color: @text-color;
  // see also the commandModeInputViewFontSize setting.
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
}

.command-mode-input .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}


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

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

#container #main-wrapper .content {

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

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

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

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

        .user-profile-link-dummy {
          font-weight: bold;
          color: @linkColor;
        }

        .meta {
          float: right;
          color: #ccc;
        }

        .text {
          width: 475px;
          word-wrap: break-word;
          i {
            opacity: 0.65;
          }
        }
      }
    }
  }

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

      textarea {
        width: 654px;
      }

      .submit {
        float: right;
      }
    }
  }

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

Fix avatar size to prevent most of the jumping of the interface

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

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

#container #main-wrapper .content {

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

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

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

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

        .user-profile-link-dummy {
          font-weight: bold;
          color: @linkColor;
        }

        .meta {
          float: right;
          color: #ccc;
        }

        .text {
          width: 475px;
          word-wrap: break-word;
          i {
            opacity: 0.65;
          }
        }
      }
    }
  }

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

      textarea {
        width: 654px;
      }

      .submit {
        float: right;
      }
    }
  }

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


.bk-data-table {
  // TODO: this should be configured for all widgets
  font-size: 11px;
}

.bk-cell-index {
  border-right-color: silver;
  border-right-style: solid;
  background: #f5f5f5;
  color: gray;
  text-align: right;
}

.bk-slick-row.selected .bk-cell-index {
  background-color: transparent;
}

.bk-cell-editor {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: transparent;
}

.bk-cell-editor-string {}

.bk-cell-editor-text {}

.bk-cell-editor-select {}

.bk-cell-editor-percent {}

.bk-cell-editor-checkbox {}

.bk-cell-editor-int {}

.bk-cell-editor-number {}

.bk-cell-editor-time {}

.bk-cell-editor-date {}

Make cell padding consistent despite different editors

.bk-data-table {
  // TODO: this should be configured for all widgets
  font-size: 11px;
}

.bk-cell-index {
  border-right-color: silver;
  border-right-style: solid;
  background: #f5f5f5;
  color: gray;
  text-align: right;
}

.bk-slick-row.selected .bk-cell-index {
  background-color: transparent;
}

.default-cell-padding {
  padding-left: 4px;
  padding-right: 4px;
}

.bk-slick-cell {
  .default-cell-padding;
}

.bk-slick-cell.editable {
  padding-left: 0;
  padding-right: 0;
}

.bk-cell-editor {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: transparent;
}

.bk-cell-editor-string {
  .default-cell-padding;
}

.bk-cell-editor-text {}

.bk-cell-editor-select {}

.bk-cell-editor-percent {}

.bk-cell-editor-checkbox {}

.bk-cell-editor-int {
  .default-cell-padding;
}

.bk-cell-editor-number {
  .default-cell-padding;
}

.bk-cell-editor-time {}

.bk-cell-editor-date {}


[data-component="frontend.components.insights/build-status-bar-chart"] {
  @tick-color: #999999;

  height: 100%;
  margin: 0 auto;

  > svg {
    width: 100%;
    height: 100%;

    .axis path,
    .axis line {
      fill: none;
      stroke: #999;
      shape-rendering: crispEdges;
    }

    .grid-lines line.horizontal {
      stroke: #e5e5e5;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }

    rect {
      &.success {
        fill: #42c88a;
      }

      &.failed {
        fill: #ed5c5c;
      }

      &.canceled {
        fill: #999999;
      }

      &.queue {
        fill: #e6d9f2;
      }
    }

    .legend text {
      fill: @gray-light-v2;
    }

    .axis line,
    .grid-lines line.horizontal {
      stroke-width: .6;
    }
  }

  .y-axis {
    .tick {
      line {
        visibility: hidden;
      }

      text {
        fill: @tick-color;
        font-size: 10px;
      }
    }

    > path.domain {
      visibility: hidden;
    }
  }
}

Move things out of parent because they broke

[data-component="frontend.components.insights/build-status-bar-chart"] {
  @tick-color: #999999;

  height: 100%;
  margin: 0 auto;

  > svg {
    width: 100%;
    height: 100%;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #999;
    shape-rendering: crispEdges;
  }

  .grid-lines line.horizontal {
    stroke: #e5e5e5;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
  }

  .y-axis {
    .tick {
      line {
        visibility: hidden;
      }

      text {
        fill: @tick-color;
        font-size: 10px;
      }
    }

    > path.domain {
      visibility: hidden;
    }
  }

  rect {
    &.success {
      fill: #42c88a;
    }

    &.failed {
      fill: #ed5c5c;
    }

    &.canceled {
      fill: #999999;
    }

    &.queue {
      fill: #e6d9f2;
    }
  }

  .legend text {
    fill: @gray-light-v2;
  }

  .axis line,
  .grid-lines line.horizontal {
    stroke-width: .6;
  }
}


.cta-container {
  width: 200px;
  height: 38px;
}

Change height of cta button

// Core variables and mixins
@import "../libs/bootstrap/less/_variables.less";
@import "../libs/bootstrap/less/_mixins.less";

// Reset and dependencies
@import "../libs/bootstrap/less/_normalize.less";
@import "../libs/bootstrap/less/_print.less";

// Core CSS
@import "../libs/bootstrap/less/_scaffolding.less";
@import "../libs/bootstrap/less/_type.less";
@import "../libs/bootstrap/less/_grid.less";
@import "../libs/bootstrap/less/_tables.less";
@import "../libs/bootstrap/less/_forms.less";
@import "../libs/bootstrap/less/_buttons.less";
@import "../libs/bootstrap/less/_input-groups.less";

// Components
@import "../libs/bootstrap/less/_component-animations.less";
@import "../libs/bootstrap/less/_labels.less";

// Utility classes
@import "../libs/bootstrap/less/_utilities.less";
@import "../libs/bootstrap/less/_responsive-utilities.less";

// Theme Base
@import '_variables.less';
@import '_base.less';
@import '_shims.less';

// Components
@import '_attribution.less';
@import '_buttons.less';
@import '_icons.less';
@import '_input-groups.less';
@import '_panel.less';
@import '_referrals.less';
@import '_share.less';
@import '_stats.less';

// Atomic Classes
@import '_atomic.less';

// Theme Modes
@import 'modes/_embed.less';
@import 'modes/_popup.less';
@import 'modes/_hosted.less';

.cta-container {
  width: 200px;
  height: 38px;
}


.osftp-status-busy {
  color: yellow;
  font-weight: bold !important;
}

.osftp-status-done {
  color: green;
  font-weight: bold !important;
}

.osftp-status-error {
  color: red;
  font-weight: bold !important;
}

Change yellow to orange bc Dan cant see ...

.osftp-status-busy {
  color: orange;
  font-weight: bold !important;
}

.osftp-status-done {
  color: green;
  font-weight: bold !important;
}

.osftp-status-error {
  color: red;
  font-weight: bold !important;
}


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

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

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

    thead, tfoot {
      display: none;
    }

    tbody {
      display: block;

      > tr {
        display: block;

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

        > td {
          &:first-child {
            border-left: none;
            border-right: none;
            border-bottom: none;
          }

          &:not(:first-child) {
            border: none;
          }

          display: block;

          &[role] {
            .clearfix();

            &: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;
      }
    }
  }
}

Fix borders - necessary when using captions

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

.table-collapse {
  @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;

          &[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;
      }
    }
  }
}


.markdown-preview.markdown-preview {
    background-color: @markdown-preview-background-color;
    color: @markdown-preview-text-color;
    border: @markdown-preview-background-color solid @markdown-preview-border-color;
    .markdown-body {
        color: @markdown-preview-text-color;
        word-wrap: normal;
    }
}

.markdown-preview:not([data-use-github-style]) {
	strong {
        color: @markdown-preview-text-color;
    }
    a {
        color: #3392C9;
        font-weight: 600;
    }
    h1, h2, h3, h4, h5, h6 {
        color: @markdown-preview-text-color;
    };
	h1, h2 {
		border-bottom: 1px solid @lighter-gray !important;
		margin-top: 20px !important;
	}
	h4 {
		font-size: 17px;
		margin-top: 16px;
	}
	hr {
		margin: 0 10px;
		border: 2px solid @lighter-gray;
	}
	atom-text-editor {
		background: @theme-background-color;
		color: @lighter-gray;
	}
	p {
		font-size: 16px;
		margin-bottom: 18px;
	}
}

Improve link rendering in Markdown Preview

.markdown-preview.markdown-preview {
    background-color: @markdown-preview-background-color;
    color: @markdown-preview-text-color;
    border: @markdown-preview-background-color solid @markdown-preview-border-color;
    .markdown-body {
        color: @markdown-preview-text-color;
        word-wrap: normal;
    }
}

.markdown-preview:not([data-use-github-style]) {
	strong {
        color: @markdown-preview-text-color;
    }
    a {
        color: #3093EE;
        font-weight: normal;
    }
    h1, h2, h3, h4, h5, h6 {
        color: @markdown-preview-text-color;
    };
	h1, h2 {
		border-bottom: 1px solid @lighter-gray !important;
		margin-top: 20px !important;
	}
	h4 {
		font-size: 17px;
		margin-top: 16px;
	}
	hr {
		margin: 0 10px;
		border: 2px solid @lighter-gray;
	}
	atom-text-editor {
		background: @theme-background-color;
		color: @lighter-gray;
	}
	p {
		font-size: 16px;
		margin-bottom: 18px;
	}
}


@import "../../styles/custom.less";
@import "../../styles/mixins.less";

.Topic {
  .btn;
  .btn-primary;
  .btn-ghost;

  .colorize-ghost-button(@green);

  font-size: 14px;
  border-radius: @btn-height-base;
  border-width: 2px;
}

.Topic--favorite {
  .colorize-ghost-button(@orange)
}

Use small size for topic buttons

@import "../../styles/custom.less";
@import "../../styles/mixins.less";

.Topic {
  .btn;
  .btn-primary;
  .btn-ghost;

  .colorize-ghost-button(@green);

  height: @btn-height-sm;
  font-size: 14px;
  border-radius: @btn-height-sm;
  border-width: 2px;
}

.Topic--favorite {
  .colorize-ghost-button(@orange)
}


.umb-sub-views {

  .umb-sub-views-action-bar {
    margin-bottom: 20px;
  }

  .umb-sub-views-action-bar .btn-link {
    padding-left: 0;
    padding-right: 0;
    &:focus {
      outline: none;
      text-decoration: none;
    }
  }

  .umb-sub-views-nav {
    float: right;
    margin: 0;
    .umb-sub-views-nav-item {
      display: inline-block;
      margin-left: 15px;
      &.is-active {
        .btn-link {
          color: @blue !important;
        }
      }
    }
  }

  .umb-sub-views-tools {
    float: left;
    margin: 0;
    .umb-sub-views-tool {
      display: inline-block;
      margin-right: 15px;
    }
  }

}

Add more margin to the bottom of sub views nav

.umb-sub-views {

  .umb-sub-views-action-bar {
    margin-bottom: 40px;
  }

  .umb-sub-views-action-bar .btn-link {
    padding-left: 0;
    padding-right: 0;
    &:focus {
      outline: none;
      text-decoration: none;
    }
  }

  .umb-sub-views-nav {
    float: right;
    margin: 0;
    .umb-sub-views-nav-item {
      display: inline-block;
      margin-left: 15px;
      &.is-active {
        .btn-link {
          color: @blue !important;
        }
      }
    }
  }

  .umb-sub-views-tools {
    float: left;
    margin: 0;
    .umb-sub-views-tool {
      display: inline-block;
      margin-right: 15px;
    }
  }

}


// Color Palette

// Greyscale
@white: #FFFFFF;
@black: #000000;
@lighter-grey: #F1F1F1;
@light-grey: #ABABAB;
@dark-grey: #707070;

// Greens
@lighter-green: #ECF8EC;
@light-green: #4FAD38;
@dark-green: #234D19;

// Reds
@lighter-red: #FF8080;
@light-red: #FF1A1A;
@dark-red: #CC0000;

Make `dark-green` one shade lighter.

// Color Palette

// Greyscale
@white: #FFFFFF;
@black: #000000;
@lighter-grey: #F1F1F1;
@light-grey: #ABABAB;
@dark-grey: #707070;

// Greens
@lighter-green: #ECF8EC;
@light-green: #4FAD38;
@dark-green: #2C601F;

// Reds
@lighter-red: #FF8080;
@light-red: #FF1A1A;
@dark-red: #CC0000;


.oo-ui-menuToolGroup {
	border-color: rgba(0,0,0,0.1);

	&.oo-ui-widget-enabled {
		&:hover {
			border-color: rgba(0,0,0,0.2);
		}
	}

	&.oo-ui-popupToolGroup-active {
		border-color: rgba(0,0,0,0.25);
	}

	.oo-ui-tool {
		&.oo-ui-widget-enabled {
			&:hover {
				background-color: #e1f3ff;
			}
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link .oo-ui-tool-title {
				color: #ccc;
			}

			.oo-ui-tool-link .oo-ui-iconedElement-icon {
				opacity: 0.2;
			}
		}
	}

	&.oo-ui-widget-disabled {
		color: #ccc;
		text-shadow: 0 1px 1px #fff;
		border-color: #ddd;
		background-color: #f3f3f3;

		.oo-ui-indicatedElement-indicator,
		.oo-ui-iconedElement-icon {
			opacity: 0.2;
		}
	}
}

Remove grey background from disabled MenuToolgrop in apex

.oo-ui-menuToolGroup {
	border-color: rgba(0,0,0,0.1);

	&.oo-ui-widget-enabled {
		&:hover {
			border-color: rgba(0,0,0,0.2);
		}
	}

	&.oo-ui-popupToolGroup-active {
		border-color: rgba(0,0,0,0.25);
	}

	.oo-ui-tool {
		&.oo-ui-widget-enabled {
			&:hover {
				background-color: #e1f3ff;
			}
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link .oo-ui-tool-title {
				color: #ccc;
			}

			.oo-ui-tool-link .oo-ui-iconedElement-icon {
				opacity: 0.2;
			}
		}
	}

	&.oo-ui-widget-disabled {
		color: #ccc;
		text-shadow: 0 1px 1px #fff;
		border-color: rgba(0,0,0,0.05);

		.oo-ui-indicatedElement-indicator,
		.oo-ui-iconedElement-icon {
			opacity: 0.2;
		}
	}
}


// 2column-specific styles
// --------------------------

.form-2column {

    // Float the labels left
    /*.control-label {
      float: left;
      width: 100px;
      [for='fos_user_registration_form_accept_toc']{
          width: 180px;
      }
    }*/

    // set padding for labels
    .help-block {
       //padding-left: 100px;
    }

    //set error color
    p.error{
      color: #CC3333;
    }

    //set inputs width
    /*
    input[type='text'],
    input[type='password'],
    input[type='email']{
      width: 65%;
    }
    */
    input, textarea, select {
      width: inherit;
    }

    .column {
        float: left;
        width: 350px;
    }

    .control-group {
        display: block;
        clear: both;
        margin-bottom: 10px;

        label {
            float: left;
            width: 30%;
        }
        div.controls {
            float: left;
            width: 70%;
            margin-bottom: 10px;

            input,
            textarea,
            select {
                width: inherit;
            }
        }
    }
}

//General help-block
p.help-block.error{
    color: #CC3333;
}

Fix de css del form de edición de cuenta

// 2column-specific styles
// --------------------------

.form-2column {

    // Float the labels left
    /*.control-label {
      float: left;
      width: 100px;
      [for='fos_user_registration_form_accept_toc']{
          width: 180px;
      }
    }*/

    // set padding for labels
    .help-block {
       //padding-left: 100px;
    }

    //set error color
    p.error{
      color: #CC3333;
    }

    //set inputs width
    /*
    input[type='text'],
    input[type='password'],
    input[type='email']{
      width: 65%;
    }
    */
    input, textarea, select {
      width: inherit;
    }

    .column {
        float: left;
        width: 350px;
        margin: 0;
        padding: 0;
    }

    .control-group {
        display: block;
        clear: both;
        margin-bottom: 10px;

        label {
            float: left;
            width: 30%;
        }
        div.controls {
            float: left;
            width: 70%;
            margin-bottom: 10px;

            input,
            textarea,
            select {
                width: inherit;
            }
        }
    }
}

//General help-block
p.help-block.error{
    color: #CC3333;
}


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

// Circle colors
// -------------------------
@blueDarker:            #1b4f8a;
@blueDark:              #366aa4;
@blue:                  #586e8a;
@blueLight:             #d7dce3;
@blueLighter:           #eff2f6;

// Typography
// -------------------------
@sansFontFamily:        "Open Sans", sans-serif;
@baseFontSize:          15px;
@headingsFontFamily:    "Lato", sans-serif;

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

// Legacy imports
@import "shared/grid";
@import "shared/blocks/header";
@import "outer/home/teaser";
@import "outer/home/features";

// Navbar
.navbar {
  background: #134374;

  .container {
    height: 50px;
  }
}

.navbar-inner {
  margin-top: 4px;

  .navbar-inverse & {
    background-color: #4e7297;
    background-image: url("@{imgPath}/navbar-texture.png");
    background-position-y: 1px;
    border-bottom: 1px solid #214062;
    border-top: 1px solid #0d2e50;
  }
}

Add glyphicons to images Update glyphicon paths

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

// Circle colors
// -------------------------
@blueDarker:            #1b4f8a;
@blueDark:              #366aa4;
@blue:                  #586e8a;
@blueLight:             #d7dce3;
@blueLighter:           #eff2f6;

// Typography
// -------------------------
@sansFontFamily:        "Open Sans", sans-serif;
@baseFontSize:          15px;
@headingsFontFamily:    "Lato", sans-serif;

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

// Sprite icons path
// -------------------------
@iconSpritePath:          "@{imgPath}/glyphicons-halflings.png";
@iconWhiteSpritePath:     "@{imgPath}/glyphicons-halflings-white.png";

// Legacy imports
@import "shared/grid";
@import "shared/blocks/header";
@import "outer/home/teaser";
@import "outer/home/features";

// Navbar
.navbar {
  background: #134374;

  .container {
    height: 50px;
  }
}

.navbar-inner {
  margin-top: 4px;

  .navbar-inverse & {
    background-color: #4e7297;
    background-image: url("@{imgPath}/navbar-texture.png");
    background-position-y: 1px;
    border-bottom: 1px solid #214062;
    border-top: 1px solid #0d2e50;
  }
}


/* Liberal-use alternative to Trajan. See http://joelcrawfordsmith.com/new/font/trajan for details. */
@import url('http://fonts.googleapis.com/css?family=Cinzel:400,700');
@import '../../public/vendor/bootstrap/less/bootstrap';
@import '../../public/vendor/font-awesome/less/font-awesome';

@fa-font-path: 'vendor/font-awesome/fonts';

@import 'cards';
@import 'variables';

html {
  height: 100%;

  body {
    height: 100%;

    article {
      height: 100%;
    }
  }
}

Use the paper background globally.

/* Liberal-use alternative to Trajan. See http://joelcrawfordsmith.com/new/font/trajan for details. */
@import url('http://fonts.googleapis.com/css?family=Cinzel:400,700');
@import '../../public/vendor/bootstrap/less/bootstrap';
@import '../../public/vendor/font-awesome/less/font-awesome';

@fa-font-path: 'vendor/font-awesome/fonts';

@import 'cards';
@import 'variables';

html {
  height: 100%;

  body {
    height: 100%;

    background: url('vendor/subtlepatterns/groovepaper/groovepaper.png');

    article {
      height: 100%;

//      &::after {
//        content: '';
//        background: url('vendor/subtlepatterns/groovepaper/groovepaper.png');
//        .opacity(.5);
//        top: 0;
//        left: 0;
//        width: 100%;
//        bottom:0;
//        position: absolute;
//        z-index: -1;
//      }
    }
  }
}


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

// Re-style Bootstrap Popovers
.popover {
  border: none;
  border-radius: 0;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);

  .arrow {
    border: none;

    &::after {
      border-width: 6px;
    }
  }

  &.bottom .arrow {
    top: -7px;
    left: 100%;
  }
}

Add styling for all placement directions

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

// Re-style Bootstrap Popovers
.popover {
  border: none;
  border-radius: 0;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);

  .arrow {
    border: none;

    &::after {
      border-width: 6px;
    }
  }

  &.top .arrow {
    bottom: -7px;
  }

  &.right .arrow {
    left: -7px;
  }

  &.bottom .arrow {
    top: -7px;
    left: 100%;
  }

  &.left .arrow {
    right: -7px;
  }
}


@import '../echo.variables';

/* We have to include the #pt-notifications selector due to monobook */
.mw-echo-notifications-badge {
	#pt-notifications-notice &,
	#pt-notifications-alert & {
		width: 16px;
		height: 16px;
		top: -@badge-offscreen-offset - 1px;

		&:before {
			background-size: 16px 16px;
		}

		&:after {
			top: @badge-offscreen-offset + 3px;
		}
	}

	&.oo-ui-flaggedElement-unseen,
	&.mw-echo-unseen-notifications {
		#pt-notifications-alert &:after {
			background-color: @badge-counter-background-unseen-alert;
		}

		#pt-notifications-notice &:after {
			background-color: @badge-counter-background-unseen-message;
		}
	}
}

#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
	display: inline-block;
	margin-right: 0.2em;
}

Stop badge hacks from messing up the entire page on IE 11 on MonoBook

@import '../echo.variables';

/* We have to include the #pt-notifications selector due to monobook */
.mw-echo-notifications-badge {
	#pt-notifications-notice &,
	#pt-notifications-alert & {
		display: inline-block;
		width: 16px;
		height: 16px;
		top: -@badge-offscreen-offset - 1px;

		&:before {
			background-size: 16px 16px;
		}

		&:after {
			top: @badge-offscreen-offset + 3px;
		}
	}

	&.oo-ui-flaggedElement-unseen,
	&.mw-echo-unseen-notifications {
		#pt-notifications-alert &:after {
			background-color: @badge-counter-background-unseen-alert;
		}

		#pt-notifications-notice &:after {
			background-color: @badge-counter-background-unseen-message;
		}
	}
}

#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
	margin-right: 0.2em;
}


@import "ui-variables";

* {
	box-sizing: border-box;
}

#root-view {
  background-color: @app-background-color;
}

Update root-view id to workspace

@import "ui-variables";

* {
	box-sizing: border-box;
}

#workspace {
  background-color: @app-background-color;
}


// Tables

.table-row-variant(@state; @background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.@{state},
    > th.@{state},
    &.@{state} > td,
    &.@{state} > th {
      background-color: @background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.@{state}:hover,
    > th.@{state}:hover,
    &.@{state}:hover > td,
    &.@{state}:hover > th {
      background-color: darken(@background, 5%);
    }
  }
}

Support for hovering on cell's with state

// Tables

.table-row-variant(@state; @background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.@{state},
    > th.@{state},
    &.@{state} > td,
    &.@{state} > th {
      background-color: @background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.@{state}:hover,
    > th.@{state}:hover,
    &.@{state}:hover > td,
    &:hover > .@{state},
    &.@{state}:hover > th {
      background-color: darken(@background, 5%);
    }
  }
}


@import "bootstrap/mixins";

#edit_user {
  img.avatar {
    border-radius: 3px;
  }

  span.help-inline.avatar {
    vertical-align:top;
    color: #777;
    font-size: @baseFontSize;
    width: 290px;
  }

  legend {
    border: none;
  }

  .bio {
    height: 70px;
    resize:vertical;
  }

  .social-services-buttons {
    .disconnect { display: none; }
    &:hover {
      .connected  { display: none;   }
      .disconnect { display: inline; }
    }

    .connect, .disconnect, .connected, .disconnected {
      .button {
        width: 200px;
        text-align: center;
      }
    }

    a img {
      margin: -2px 8px 0 -6px;
      width: 16px;
      height: 16px;
    }
  }
}

Fix padding/spacing issues for connect/disconnect buttons in settings

@import "bootstrap/mixins";

#edit_user {
  img.avatar {
    border-radius: 3px;
  }

  span.help-inline.avatar {
    vertical-align:top;
    color: #777;
    font-size: @baseFontSize;
    width: 290px;
  }

  legend {
    border: none;
  }

  .bio {
    height: 70px;
    resize:vertical;
  }

  .social-services-buttons {
    .disconnect { display: none; }
    &:hover {
      .connected  { display: none;   }
      .disconnect { display: inline; }
    }

    a img {
      margin: -2px 8px 0 -6px;
      width: 16px;
      height: 16px;
    }
  }
}


@darkGray: #dedede;
@lightGray: #efefef;

.hello {
  background-color: @lightGray;
  border: 1px solid @darkGray;
}

Add space to nitpick paragraphs

@darkGray: #dedede;
@lightGray: #efefef;

.hello {
  background-color: @lightGray;
  border: 1px solid @darkGray;
}

.comments blockquote p {
  margin: 10px 0;
  display: block;
}


//**
// Typography vars
//**

@default_font: 'Oxygen', Arial, Helvetica, sans-serif;
@header_font: "Lato", "PT Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;

//**
// Layout vars
//**

// Golden ratio, which makes just about anything look lovely
@golden: 1.618;

@readable_width: 36em;
@add_padding: 5 * @golden;

//**
// Color vars
//**
@color_01: #e5e5e5; //Light Grey
@color_02: #333333; //Off white
@color_03: #25dae2; //Sky Blue
@color_04: #777777; //slate
@color_05: #525252; //Dark Slate
@color_twitter: #32CCFE;
@color_facebook: #3B5999;
@color_gplus: #D44837;

Add custom colors for own theme.

//**
// Typography vars
//**

@default_font: 'Oxygen', Arial, Helvetica, sans-serif;
@header_font: "Lato", "PT Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;

//**
// Layout vars
//**

// Golden ratio, which makes just about anything look lovely
@golden: 1.618;

@readable_width: 36em;
@add_padding: 5 * @golden;

//**
// Color vars
//**
@grain_01: #5C6A00;
@grain_02: #DACA17;
@grain_03: #F9F1C0;
@grain_04: #CFBC00;

@color_01: #e5e5e5; //Light Grey
@color_02: #333333; //Off white
@color_03: #25dae2; //Sky Blue
@color_04: #777777; //slate
@color_05: #525252; //Dark Slate
@color_twitter: #32CCFE;
@color_facebook: #3B5999;
@color_gplus: #D44837;


@primary_color: #2196f3;
@secondary_color: #4caf50;

Change secondary color for ios

@primary_color: #2196f3;
@secondary_color: #00c853;


@import "ui-variables";

@keys-color: lighten(@ui-site-color-4, 5%);
@arrow-color: darken(@text-color-success, 5%);
@group-color: @text-color-info;

.which-key {
  overflow: auto;
  font-size: @font-size;

  .which-key-bindings {
    column-width: 200px;
    column-gap: 0.5rem;

    .which-key-binding {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .which-key-keys { color: @keys-color; }
      .which-key-arrow { color: @arrow-color; }
      .which-key-group { color: @group-color; }
    }
  }

  .which-key-keystrokes {
    padding-top: 0;
  }

  .which-key-keys,
  .which-key-group {
    font-weight: bold;
  }
}

Add <atom-text-editor> default font-family as fallback fonts

@import "ui-variables";

@keys-color: lighten(@ui-site-color-4, 5%);
@arrow-color: darken(@text-color-success, 5%);
@group-color: @text-color-info;

.which-key {
  overflow: auto;
  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: @font-size;

  .which-key-bindings {
    column-width: 200px;
    column-gap: 0.5rem;

    .which-key-binding {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .which-key-keys { color: @keys-color; }
      .which-key-arrow { color: @arrow-color; }
      .which-key-group { color: @group-color; }
    }
  }

  .which-key-keystrokes {
    padding-top: 0;
  }

  .which-key-keys,
  .which-key-group {
    font-weight: bold;
  }
}


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

.plantuml-preview {
}

Fix so that large uml diagrams can be scrolled