@import (reference) "./unselectable.less";
@import (reference) "./variables.less";
@import (reference) "./colortheme-all.less";

.leftside-menu-category_main() {
    .unselectable_make();
    padding: 5px 15px;
    margin: 15px 0;
    cursor: pointer;
    height: @variables_bar-height;
    .fa, .cptools {
        display: inline-flex;
        justify-content: center;
        margin-right: 5px;
        min-width: 25px;
    }
    &:hover {
        background: rgba(0,0,0,0.05);
    }
    &.cp-leftside-active {
        background: @cp_sidebar-left-active;
    }
}

Fix hover color in sidebar

@import (reference) "./unselectable.less";
@import (reference) "./variables.less";
@import (reference) "./colortheme-all.less";

.leftside-menu-category_main() {
    .unselectable_make();
    padding: 5px 15px;
    margin: 15px 0;
    cursor: pointer;
    height: @variables_bar-height;
    .fa, .cptools {
        display: inline-flex;
        justify-content: center;
        margin-right: 5px;
        min-width: 25px;
    }
    &:hover {
        background: fade(@cryptpad_text_col, 10%);
    }
    &.cp-leftside-active {
        background: @cp_sidebar-left-active;
    }
}


// Buttons
.colorize-button(@color, @border-color) {
  background: @color;
  border-color: @border-color;

  &:hover,
  &:focus,
  &:active,
  &.active {
    background: darken(@color, 15%, 'relative');
    border-color: darken(@border-color, 15%, 'relative');
  }
}

.colorize-ghost-button(@color) {
  border-color: @color;
  color: @color;

  &:hover,
  &:focus,
  &:active,
  &.active {
    border-color: darken(@color, 15%, 'relative');
    color: darken(@color, 15%, 'relative');
  }
}

Change hover style of Topic button

// Buttons
.colorize-button(@color, @border-color) {
  background: @color;
  border-color: @border-color;

  &:hover,
  &:focus,
  &:active,
  &.active {
    background: darken(@color, 15%, 'relative');
    border-color: darken(@border-color, 15%, 'relative');
  }
}

.colorize-ghost-button(@color) {
  border-color: @color;
  color: @color;

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


/*---------------------------------------------------
  LESS Manifest
  ---------------------------------------------------*/

@import (reference) "../components/lesshat/build/lesshat.less";
@import (reference) "_variables.less";
@import (reference) "_mixins.less";
@import "_utilities.less";
@import "_base.less";
@import "_overrides.less";

Add comment explaining behavior of automatic LESS compilation

/*---------------------------------------------------
  LESS Manifest
  ---------------------------------------------------*/

/*
  Propeller will process any LESS files in this folder,
  generating CSS files from them in expanded (.css)
  and minified (.min.css) flavors.

  LESS files preceeded with an underscore (i.e. _base.less)
  will be ignored. Propeller assumes these files
  are partials that are being imported into a
  manifest file (i.e. styles.css).

  LESS files in nested folders will be handled as well.
*/

@import (reference) "../components/lesshat/build/lesshat.less";
@import (reference) "_variables.less";
@import (reference) "_mixins.less";
@import "_utilities.less";
@import "_base.less";
@import "_overrides.less";


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

button {
    cursor: pointer;
    font-family: inherit;
}

html, body {
    -webkit-font-smoothing: antialiased;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    -webkit-appearance: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/** CUSTOM **/

.nowrap {
    white-space: nowrap;
}

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

Fix select border-radius on Mac

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

button {
    cursor: pointer;
    font-family: inherit;
}

html, body {
    -webkit-font-smoothing: antialiased;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/** CUSTOM **/

.nowrap {
    white-space: nowrap;
}

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


.statusbar {
  padding: 0;
  .flex-container;
  height: .25in;
  border: 1px solid black;

}

.statusbar-size-normal {
  width: 1in;
}

.statusbar-size-thin {
    height: .05in;
}

.statusbar-size-large {
  width: 1.8in;
}

.statusbar-NO_RESULT, .statusbar-NORESULT {
  background-color: @c-status-noresult;
}

.statusbar-PASS {
  background-color: @c-status-pass;
}

.statusbar-PASSED_ON_RETRY {
  background-color: @c-status-passedonretry;
}

.statusbar-BROKEN_TEST, .statusbar-BROKENTEST {
  background-color: @c-status-broken;
}

.statusbar-SKIPPED {
  background-color: @c-status-skip;
}

.statusbar-FAIL {
  background-color: @c-status-fail;
}

Add color code for nottested status bar

.statusbar {
  padding: 0;
  .flex-container;
  height: .25in;
  border: 1px solid black;

}

.statusbar-size-normal {
  width: 1in;
}

.statusbar-size-thin {
    height: .05in;
}

.statusbar-size-large {
  width: 1.8in;
}

.statusbar-NO_RESULT, .statusbar-NORESULT {
  background-color: @c-status-noresult;
}

.statusbar-PASS {
  background-color: @c-status-pass;
}

.statusbar-PASSED_ON_RETRY {
  background-color: @c-status-passedonretry;
}

.statusbar-BROKEN_TEST, .statusbar-BROKENTEST {
  background-color: @c-status-broken;
}

.statusbar-NOT_TESTED {
  background-color: @c-status-nottested;
}

.statusbar-SKIPPED {
  background-color: @c-status-skip;
}

.statusbar-FAIL {
  background-color: @c-status-fail;
}


/**
* Source View Styles
* Includes only the styles that need to decorate an editor
**/

@import "ui-variables";

// Breakpoint marker
.breakpoint {
  @breakpoint-size: .5em;
  background: fade(darken(@background-color-info, 10%), 90%);

  height: @breakpoint-size !important;
  width: @breakpoint-size;
  border-radius: 50%;
  margin: .45em .25em 0;

  &.is-pending {
    background: darken(@background-color-warning, 25%);
  }
}

.gutter-container > .gutter[gutter-name="delve-breakpoints"] {
  .delve-breakpoint {
    .breakpoint();
  }
}

.line.delve-cur-scope {
  background: fade(@background-color-info, 15%) !important;
}

Allow for breakpoint gutters w/ embedded ids

/**
* Source View Styles
* Includes only the styles that need to decorate an editor
**/

@import "ui-variables";

// Breakpoint marker
.breakpoint {
  @breakpoint-size: .5em;
  background: fade(darken(@background-color-info, 10%), 90%);

  height: @breakpoint-size !important;
  width: @breakpoint-size;
  border-radius: 50%;
  margin: .45em .25em 0;

  &.is-pending {
    background: darken(@background-color-warning, 25%);
  }
}

.gutter-container > .gutter[gutter-name^="delve-breakpoints"] {
  .delve-breakpoint {
    .breakpoint();
  }
}

.line.delve-cur-scope {
  background: fade(@background-color-info, 15%) !important;
}


html, body, #app {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto @md-pad;
  padding: 0 @md-pad 1rem;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: -@md-pad 0 @md-pad -@md-pad;

  & > div {
    padding: 1em 2em 0 1em;
  }

  .content {
    flex: 1;
  }

  .aside {
    flex: 0 0 auto;
    width: 33.33%;
    padding-right: 0;
  }
}

.box {
  padding-top: 15px;
  margin-bottom: 15px;
  border-style: solid;
  border-radius: 5px;
  border-width: 2px;
  border-color: @darkgrey;
}

Hide horizontal overflow in content

html, body, #app {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto @md-pad;
  padding: 0 @md-pad 1rem;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: -@md-pad 0 @md-pad -@md-pad;

  & > div {
    padding: 1em 2em 0 1em;
  }

  .content {
    flex: 1;
    overflow-x: hidden;
  }

  .aside {
    flex: 0 0 auto;
    width: 33.33%;
    padding-right: 0;
  }
}

.box {
  padding-top: 15px;
  margin-bottom: 15px;
  border-style: solid;
  border-radius: 5px;
  border-width: 2px;
  border-color: @darkgrey;
}


.sketch-picker {
  .flexbox-fix {
    flex-direction: row;
  }
  .flexbox-fix > div {
    display: initial;
  }
}

.c-color-block {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px @primary-grey solid;
  border-radius: 3px;
  vertical-align: middle;
  margin: @extra-small-spacer @medium-spacer @medium-spacer @extra-small-spacer;

  &.s-selected {
    border: 2px @primary-red solid;
  }

  &:hover {
    border-color: @hover-grey;
  }
}

.c-styles-chooser-colors {
  flex-flow: row wrap;
  justify-content: space-between;
}

Add top margin to color picker section

.sketch-picker {
  .flexbox-fix {
    flex-direction: row;
  }
  .flexbox-fix > div {
    display: initial;
  }
}

.c-color-block {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px @primary-grey solid;
  border-radius: 3px;
  vertical-align: middle;
  margin: @extra-small-spacer @medium-spacer @medium-spacer @extra-small-spacer;

  &.s-selected {
    border: 2px @primary-red solid;
  }

  &:hover {
    border-color: @hover-grey;
  }
}

.c-styles-chooser-colors {
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: @medium-spacer;
}


@import "ui-variables";

.table-edit {
  position: relative;
  -webkit-flex-direction: column;
  display: -webkit-flex;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    display: -webkit-flex;
    -webkit-flex: 1;
  }

  .hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
  }

  &.demo {
    position: absolute;
  }
}

.table-edit-content, .table-edit-header-row {
  position: relative;
  width: 100%;
}

.table-edit-row {
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.table-edit-cell, .table-edit-header-cell {
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.table-edit-header {
  display: -webkit-flex;
  top: 0;
  left: 0;
  right: 0;
}

Add styles for active table cell, rows and columns

@import "ui-variables";

.table-edit {
  position: relative;
  -webkit-flex-direction: column;
  display: -webkit-flex;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    display: -webkit-flex;
    -webkit-flex: 1;
  }

  .hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
  }

  &.demo {
    position: absolute;
  }
}

.table-edit-content, .table-edit-header-row {
  position: relative;
  width: 100%;
}

.table-edit-row {
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.table-edit-cell, .table-edit-header-cell {
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 100%;
}

.table-edit-row.active, .table-edit-cell.active-column, .table-edit-header-cell.active {
  background: @background-color-highlight;
}

.table-edit-cell.active {
  background: @background-color-highlight;
}

.table-edit-header {
  display: -webkit-flex;
  top: 0;
  left: 0;
  right: 0;
}


.modal-header {
  padding: @modal-title-padding @availity-modal-padding;
  background-color: @availity-modal-header-bg-color;
  .border-top-radius(@availity-modal-input-border-radius);
}

.modal-footer {
  border-top: 0;
  background-color: @availity-modal-footer-bg-color;
  .border-bottom-radius(@availity-modal-input-border-radius);
}

Apply same padding to modal-footer and modal-header

.modal-header {
  padding: @modal-title-padding @availity-modal-padding;
  background-color: @availity-modal-header-bg-color;
  .border-top-radius(@availity-modal-input-border-radius);
}

.modal-footer {
  border-top: 0;
  padding: @modal-title-padding @availity-modal-padding;
  background-color: @availity-modal-footer-bg-color;
  .border-bottom-radius(@availity-modal-input-border-radius);
}


// Bootstrap
// =========

// We copy the bootstrap.less file locally, so you can modify includes as well
// as variables. See the files in the 'bootstrap' folder for more information.

@import "bootstrap/bootstrap.less";

// Site Styles
// ===========

// Either include your additional less files here, or define your styles below

Add media query stubs matching bootstrap's.

// Bootstrap
// =========

// We copy the bootstrap.less file locally, so you can modify includes as well
// as variables. See the files in the 'bootstrap' folder for more information.

@import "bootstrap/bootstrap.less";

// Site Styles
// ===========

// Either include your additional less files here, or define your styles below

// Media Queries matched to Bootstrap
// ==================================

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {}

/* Very small screens only. */
@media (max-width: @screen-xs-max) {}

/* Small screens only. */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {}

/* Medium screens only. */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {}

/* Large screens and up. */
@media (min-width: @screen-lg-min) {}


.text-large {
	font-family: Arial, sans-serif;
	font-size: 1.5em;
	line-height: 1.4em;
}

.text-default {
	font-family: Arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
}

.box-sizing {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.b-input {
	.box-sizing;
	.text-default;
	border: 0;
	-webkit-appearance: none;
	background: @white;
	height: 2em;
	padding: 2px;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}

.button-text (@percent: 100%) {
	font-weight: bold;
	color: lighten(@white, @percent);
}

Set font sizes in px not em. Fixes issues with site body having different font-size to CMS

.text-large {
	font-family: Arial, sans-serif;
	font-size: 24px;
	line-height: 1.4em;
}

.text-default {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4em;
}

.box-sizing {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.b-input {
	.box-sizing;
	.text-default;
	border: 0;
	-webkit-appearance: none;
	background: @white;
	height: 2em;
	padding: 2px;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}

.button-text (@percent: 100%) {
	font-weight: bold;
	color: lighten(@white, @percent);
}


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

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

  dl {
    margin-bottom: 0;

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

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

      &:last-child {
        border: none;
      }

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

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

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

Reduce padding for ul elements

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

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

  dl {
    margin-bottom: 0;

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

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

      &:last-child {
        border: none;
      }

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

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

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

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


// Panels

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

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

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

Change panel mixin to include a 'clickable' class for panel headers

// Panels

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

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

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

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

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


@import "_tools.aspect-ratio.less";
@import "shared/fonts.less";
@import "shared/colors.less";
@import "shared/z-index.less";
@import "shared/sizes.less";
@import "shared/borders.less";

@import "_components.faceted-data.less";

#location-slideshow {

  .info {
    position: relative;
    z-index: @zMid;

    line-height: 1;

    color: @black;

    background-color: rgba(255, 255, 255, 0.8);

    margin: 1em;
    padding: 0.5em;
  }

  .info:empty {
    display: none;
  }

  .image-container {
    .aspect-ratio(100, 85);

    border: @border;
  }

}

Use yellow as a background colour to map image

@import "_tools.aspect-ratio.less";
@import "shared/fonts.less";
@import "shared/colors.less";
@import "shared/z-index.less";
@import "shared/sizes.less";
@import "shared/borders.less";

@import "_components.faceted-data.less";

#location-slideshow {

  .info {
    position: relative;
    z-index: @zMid;

    line-height: 1;

    color: @black;

    background-color: rgba(255, 255, 255, 0.8);

    margin: 1em;
    padding: 0.5em;
  }

  .info:empty {
    display: none;
  }

  .image-container {
    .aspect-ratio(100, 85);

    background-color: #faefca;
  }

}


/* ------------------------------------------------------
  Tool Bar
  <https://atom.io/packages/tool-bar>
  ---------------------------------------------------- */
.tool-bar {
  // Make it look the same as other panels
  background-color: @level-3-color;
  border: none;

  // Just a single border + more spacing
  &.tool-bar-horizontal .tool-bar-spacer {
    border-left: 0 none;
    margin-left: .5em;
    margin-right: .5em;
  }
  &.tool-bar-vertical .tool-bar-spacer {
    border-bottom: 0 none;
    margin-top: .5em;
    margin-bottom: .5em;
  }

  // Only show button styles on hover
  button.tool-bar-btn {
    background-color: @level-3-color;
    background-image: none;
    border-color: @level-3-color;
  }

  // Customize icon size
  &.tool-bar-12px .tool-bar-btn::before {
    font-size:16px;
  }
}

Update disabled toolbar button styles

/* ------------------------------------------------------
  Tool Bar
  <https://atom.io/packages/tool-bar>
  ---------------------------------------------------- */
.tool-bar {
  // Make it look the same as other panels
  background-color: @level-3-color;
  border: none;

  // Just a single border + more spacing
  &.tool-bar-horizontal .tool-bar-spacer {
    border-left: 0 none;
    margin-left: .5em;
    margin-right: .5em;
  }
  &.tool-bar-vertical .tool-bar-spacer {
    border-bottom: 0 none;
    margin-top: .5em;
    margin-bottom: .5em;
  }

  // Only show button styles on hover
  button.tool-bar-btn {
    background-color: @level-3-color;
    background-image: none;
    border-color: @level-3-color;
    &.disabled {
      color: @tab-text-color;
      &:hover,
      &:focus,
      &:active {
        border-color: @level-3-color;
        color: @tab-text-color;
        background-color: @level-3-color;
        background-image: none;
        border-color: @level-3-color;
        cursor: default;
        box-shadow: none;
      }
    }
  }

  // Customize icon size
  &.tool-bar-12px .tool-bar-btn {
    margin: 2px 4px;
    &::before {
      font-size: 18px;
      line-height: 25px;
    }
  }
}


img.emoji {
  height: 1.5em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.3em;
}

.EmojiDropdown {
  max-width: 500px;
  max-height: 200px;
  overflow: auto;
  position: absolute;
  margin: 5px 0 !important;

  > li > button {
    color: @text-color;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 45px;

    .emoji {
      float: left;
      margin-left: -30px;
    }
  }
}

.ComposerBody-emojiWrapper {
  position: relative;
}

Fix downscaled image rendering in chrome

img.emoji {
  height: 1.5em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.3em;
  image-rendering: -webkit-optimize-contrast;
}

.EmojiDropdown {
  max-width: 500px;
  max-height: 200px;
  overflow: auto;
  position: absolute;
  margin: 5px 0 !important;

  > li > button {
    color: @text-color;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 45px;

    .emoji {
      float: left;
      margin-left: -30px;
    }
  }
}

.ComposerBody-emojiWrapper {
  position: relative;
}


.overridden-hint-wrapper {
    font-style: italic;

    .lead-text {
        &:before {
            color: #eb5202;
            content: '\e623';
            font-family: "Admin Icons";
            display: inline-block;
            margin-right: 0.5em;
        }
    }

    .override-scope {
        cursor: pointer;
        line-height: 40px; //improve touch experience
        position: relative;

        &:before {
            font-family: "Admin Icons";
            font-style: normal;
            content: '\e616';
            font-size: 1.8rem;
            position: absolute;
            right: 1.3rem;
        }

        &.open {
            border-bottom: none; //remove native accordion border so following .override-value can have it

            &:before {
                content: '\e615'; //set icon to close arrow
            }
        }
    }

    .override-value {
        &.visible {
            display: block;
        }

        //move native accordion left whitespace from margin to padding
        margin-left: 0;
        padding-left: 40px;
    }
}

Improve touch behavior and fix hint text overlap

.overridden-hint-wrapper {
    font-style: italic;

    .lead-text {
        &:before {
            color: #eb5202;
            content: '\e623';
            font-family: "Admin Icons";
            display: inline-block;
            margin-right: 0.5em;
        }
    }

    .override-scope {
        cursor: pointer;
        line-height: 40px; //improve touch experience
        position: relative;
        padding-right: 4rem; //prevent arrow from overlapping text

        &:before {
            font-family: "Admin Icons";
            font-style: normal;
            content: '\e616';
            font-size: 1.8rem;
            position: absolute;
            right: 1.3rem;
        }

        &.open {
            border-bottom: none; //remove native accordion border so following .override-value can have it

            &:before {
                content: '\e615'; //set icon to close arrow
            }
        }
    }

    .override-value {
        &.visible {
            display: block;
        }

        //move native accordion left whitespace from margin to padding
        margin-left: 0;
        padding-left: 40px;
    }
}


@import "syntax-variables";

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

.vim-mode.command-mode:not(.mini) {
  .cursor, .cursor.blink-off {
    .block-cursor(hidden);
  }

  &.editor.is-focused {
    .cursor, .cursor.blink-off {
      .block-cursor;
    }
  }
}
.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;
}

Apply block-cursor styling in .operator-pending-mode

@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 {
  .cursor, .cursor.blink-off {
    .block-cursor(hidden);
  }

  &.editor.is-focused {
    .cursor, .cursor.blink-off {
      .block-cursor;
    }
  }
}
.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;
}


// 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";
/**
 * Highlight editor odd lines.
 * https://github.com/atom/atom/issues/4829
 */
.generate-stripes(@i:0) when (@i < 10) {
  atom-text-editor:not([mini])::shadow .lines .line.cursor-line[data-screen-row$="@{i}"],
  atom-text-editor:not([mini])::shadow .lines .line[data-screen-row$="@{i}"] {
    background: rgba(0, 0, 0, 0.3);
  }
  .generate-stripes((@i + 2));
}
.generate-stripes();
/**
 * Style for background element.
 */
.flickr-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
  z-index: 10000;
}
/**
 * Style to hide background element.
 */
.flickr-background-hided {
  display: none;
}

Set z-index of background lower than notifications

// 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";
/**
 * Highlight editor odd lines.
 * https://github.com/atom/atom/issues/4829
 */
.generate-stripes(@i:0) when (@i < 10) {
  atom-text-editor:not([mini])::shadow .lines .line.cursor-line[data-screen-row$="@{i}"],
  atom-text-editor:not([mini])::shadow .lines .line[data-screen-row$="@{i}"] {
    background: rgba(0, 0, 0, 0.3);
  }
  .generate-stripes((@i + 2));
}
.generate-stripes();
/**
 * Style for background element.
 */
.flickr-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}
/**
 * Style to hide background element.
 */
.flickr-background-hided {
  display: none;
}


@import 'bootstrap.less';

@header-bg: #094d75;
@icon-font-path: "fonts/";

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background-color: darken(@header-bg, 10%);
}

.navbar-content {
  .make-md-column-offset(2);
  .make-md-column(8);
}

.jumbotron {
  #gradient > .vertical(@header-bg; darken(@header-bg, 2%); 50%; 50%);
  background-size: 100% 4px;
  background-color: @header-bg;
  background-repeat: repeat-y;
  color: white;
  text-align: center;
}

div.sphinxsidebar {
  margin-left: 0;
}

// Keep content not too wide for better readability.
.content {
  .make-md-column-offset(2);
  .make-md-column(8);
}

.footer {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid @gray-lighter;
  text-align: center;
}

// TODO: check if this is needed
/*.github-btn {
  border: 0;
  overflow: hidden;
}
.public-func dd {
  margin-left: 0;
}*/

// Indent descriptions of classes, defines and functions.
.class dd, .define dd, .function dd {
  margin-left: 30px;
}

Make sure the navbar content is not shifted because of scrollbars

@import 'bootstrap.less';

@header-bg: #094d75;
@icon-font-path: "fonts/";

html {
  overflow-y: scroll;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background-color: darken(@header-bg, 10%);
}

.navbar-content {
  .make-md-column-offset(2);
  .make-md-column(8);
}

.jumbotron {
  #gradient > .vertical(@header-bg; darken(@header-bg, 2%); 50%; 50%);
  background-size: 100% 4px;
  background-color: @header-bg;
  background-repeat: repeat-y;
  color: white;
  text-align: center;
}

div.sphinxsidebar {
  margin-left: 0;
}

// Keep content not too wide for better readability.
.content {
  .make-md-column-offset(2);
  .make-md-column(8);
}

.footer {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid @gray-lighter;
  text-align: center;
}

// TODO: check if this is needed
/*.github-btn {
  border: 0;
  overflow: hidden;
}
.public-func dd {
  margin-left: 0;
}*/

// Indent descriptions of classes, defines and functions.
.class dd, .define dd, .function dd {
  margin-left: 30px;
}


body.prices {

  header {
    background: @prices-accent !important;
  }

  footer {
    //background: @blog-accent !important;
  }

  div.icon {
    background: @prices-accent;
  }

  .default-content {
    max-width: 960px;
  }

  .category-selection {
    margin: 0 auto;
    .clearfix();
    display: flex;
    justify-content: center;

    label {
      display: block;
      float: left;
      width: 100px !important;
      height: 100px !important;
      background: @grey;
      margin: 10px;
      padding: 10px;

      svg {
        fill: @white !important;
      }
    }

    label.active {
      outline: 4px solid black;
    }
  }

  h2 {
    .font-body-h1();
  }

  .category-name {
    text-align: left;
    opacity: 1;
  }

  .category-selection label input{
    display: none;
  }

  .category-sections {

    section {
      display: none;
    }

    .active {
      display: block !important;
    }
  }

}

Make the category icons look bettter

body.prices {

  header {
    background: @prices-accent !important;
  }

  footer {
    //background: @blog-accent !important;
  }

  div.icon {
    background: @prices-accent;
  }

  .default-content {
    max-width: 960px;
  }

  .category-selection {
    margin: 0 auto;
    .clearfix();
    display: flex;
    justify-content: center;

    label {
      .transition(0.25s);
      opacity: 0.5;
      display: block;
      float: left;
      width: 100px !important;
      height: 100px !important;
      background: @grey;
      margin: 10px;
      padding: 10px;
      outline: 4px solid transparent;
      background: @prices-accent;

      svg {
        fill: @white !important;
      }
    }

    label:hover {
      opacity: 0.8
    }

    label.active {
      outline: 4px solid black;
      opacity: 0.8;
    }
  }

  h2 {
    .font-body-h1();
  }

  .category-name {
    text-align: left;
    opacity: 1;
  }

  .category-selection label input{
    display: none;
  }

  .category-sections {

    section {
      display: none;
    }

    .active {
      display: block !important;
    }
  }

}


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

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

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

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

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

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

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

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

Kill the left margin on the slider pip

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

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

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

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

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

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

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

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


//
// Breadcrumbs
// --------------------------------------------------

.breadcrumb {
  padding: 8px 15px;
  margin: 0 0 @line-height-base;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: @border-radius-base;
  > li {
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    &:after {
      display: inline-block;
      content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
      padding: 0 5px;
      color: #ccc;
    }
  }
  > .active {
    color: @grayLight;
  }
}

Remove breadcrumb divider after last element

//
// Breadcrumbs
// --------------------------------------------------

.breadcrumb {
  padding: 8px 15px;
  margin: 0 0 @line-height-base;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: @border-radius-base;
  > li {
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    &:after {
      display: inline-block;
      content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
      padding: 0 5px;
      color: #ccc;
    }
    &:last-child:after {
      content: ""; // No divider after last element
    }
  }
  > .active {
    color: @grayLight;
  }
}


@logoSize: 400px;

.empty-logo {
  display: block;
  width: @logoSize;
  height: @logoSize;
  background: url("/images/theme/empty-logo-inverse.svg");
  background-size: @logoSize @logoSize;
}

.empty-logo > h1 {
  font-size: 32pt;
  position: relative;
  top: @logoSize/2 - 46;
  left: @logoSize * 0.25;
  margin: 0px;
  text-align: left;
  font-family: JosefinSans;
}

Allow for lots of blank vertical space in logo

@logoSize: 400px;
@logoPosition: @logoSize - 100;

.empty-logo {
  display: block;
  width: @logoSize;
  height: @logoPosition;
  background: url("/images/theme/empty-logo-inverse.svg");
  background-size: @logoSize @logoSize;
  background-position: left center;
}

.empty-logo > h1 {
  font-size: 32pt;
  position: relative;
  top: @logoPosition/2 - 46;
  left: @logoSize * 0.25;
  margin: 0px;
  text-align: left;
  font-family: JosefinSans;
  font-weight: bold;
}


/* === Login screen === */
.login-screen-content {
    background: #fff;
    .login-screen-title, .list-block, .content-block, .list-block-label {
        max-width: 480px;
        margin: 25px auto;
    }
    .list-block ul {
        .hairline-remove(top);
        .hairline-remove(bottom);
        background: none;
    }
    .list-block-label {
        text-align: center;
    }
}
.login-screen-title {
    text-align: center;
    font-size: 30px;
}

Correct font size for heading

/* === Login screen === */
.login-screen-content {
    background: #fff;
    .login-screen-title, .list-block, .content-block, .list-block-label {
        max-width: 480px;
        margin: 25px auto;
    }
    .list-block ul {
        .hairline-remove(top);
        .hairline-remove(bottom);
        background: none;
    }
    .list-block-label {
        text-align: center;
    }
}
.login-screen-title {
    text-align: center;
    font-size: 34px;
}


@import "color.less";
@import "properties.less";
@import "page-content.less";

section.navbar-extension {
  padding: 0 @navbar-padding @navbar-padding @navbar-padding;
  margin-bottom: 0px; // Usual section margin replaced by padding
  display: flex;
  flex-direction: row;
  height: 125%;
  @media screen and (max-width: 425px) {
    // Move response list lower on small screens
    flex-direction: column;
    height: 500%;
  }
}

section.navbar-extension > div.settings {
  h1 {
    display: inline-block;
  }
  span.em-dash::after {
    content: '—';
  }
  #change-username {
    font-size: 1em;
  }
  @avatar-img-height: 128px;
  img {
    height: @avatar-img-height;
    width: @avatar-img-height;
    display: inline-block;
  }
  div.avatar-text-container {
    line-height: @avatar-img-height;
    vertical-align: top;
    display: inline-block;
  }
}

section.navbar-extension > div.user-videos {
  margin-left: 16px; // Leave some space from the settings
  flex-grow: 1;
  flex-shrink: 1;
  @media screen and (max-width: 768px) {
    flex-shrink: 2;
  }
  display: flex;
  align-items: center;
  overflow-x: auto;
}

Use fixed size vs %

@import "color.less";
@import "properties.less";
@import "page-content.less";

section.navbar-extension {
  padding: 0 @navbar-padding @navbar-padding @navbar-padding;
  margin-bottom: 0px; // Usual section margin replaced by padding
  display: flex;
  flex-direction: row;
  @extension-height: 900px; // Arbitrary
  height: @extension-height;
  @media screen and (max-width: 425px) {
    // Move response list lower on small screens
    flex-direction: column;
    height: @extension-height * 5;
  }
}

section.navbar-extension > div.settings {
  h1 {
    display: inline-block;
  }
  span.em-dash::after {
    content: '—';
  }
  #change-username {
    font-size: 1em;
  }
  @avatar-img-height: 128px;
  img {
    height: @avatar-img-height;
    width: @avatar-img-height;
    display: inline-block;
  }
  div.avatar-text-container {
    line-height: @avatar-img-height;
    vertical-align: top;
    display: inline-block;
  }
}

section.navbar-extension > div.user-videos {
  margin-left: 16px; // Leave some space from the settings
  flex-grow: 1;
  flex-shrink: 1;
  @media screen and (max-width: 768px) {
    flex-shrink: 2;
  }
  display: flex;
  align-items: center;
  overflow-x: auto;
}


.vs_ui_checkbox {
  font-family: inherit;
  color:black;
}

.vs_ui_checkbox label {
  padding: 9px 35px 0px 16px;
  height: 40px;
  border-top: 1px solid #CCCCCC;
}

.vs_ui_checkbox label:nth-of-type(1) {
  border: none;
}

input[type="checkbox"]:active + label,
.vs_ui_checkbox label:active
{
  .base_background_selected;
}

.vs_ui_checkbox label::after
{
  color: @grey;
  display: block;
  width: 28px;
  height: 28px;
  right: 5px;

  font: 28px/31px "FontAwesome";

  .translateY(-45%);
  content: "\f096";
}

input[type="checkbox"]:checked + label::after
{
  content: "\f046";
  color: @blue;
}

input[type="checkbox"]:active + label::after,
.vs_ui_checkbox label:active::after
{
  color: @blue;
}

Fix bug with CSS input configuration side effect

.vs_ui_checkbox {
  font-family: inherit;
  color:black;
}

.vs_ui_checkbox label {
  padding: 9px 35px 0px 16px;
  height: 40px;
  border-top: 1px solid #CCCCCC;
}

.vs_ui_checkbox label:nth-of-type(1) {
  border: none;
}

.vs_ui_checkbox input[type="checkbox"]:active + label,
.vs_ui_checkbox label:active
{
  .base_background_selected;
}

.vs_ui_checkbox label::after
{
  color: @grey;
  display: block;
  width: 28px;
  height: 28px;
  right: 5px;

  font: 28px/31px "FontAwesome";

  .translateY(-45%);
  content: "\f096";
}

.vs_ui_checkbox nput[type="checkbox"]:checked + label::after
{
  content: "\f046";
  color: @blue;
}

.vs_ui_checkbox input[type="checkbox"]:active + label::after,
.vs_ui_checkbox label:active::after
{
  color: @blue;
}


/**
 * Hutmap less code
 */

@deps: "../../../../../deps";
@bootstrap: "@{deps}/bootstrap/less";

@import "@{bootstrap}/reset.less";
@import "@{bootstrap}/variables.less";
@import "@{bootstrap}/mixins.less";
@import "@{bootstrap}/carousel.less";
@import "@{bootstrap}/modals.less";
@import "@{bootstrap}/alerts.less";
@import "@{bootstrap}/close.less";
@import "@{bootstrap}/navbar.less";
@import "@{bootstrap}/navs.less";
@import "@{bootstrap}/type.less";
@import "@{bootstrap}/tooltip.less";
@import "@{bootstrap}/dropdowns.less";
@import "@{bootstrap}/popovers.less";

// Override bootstrap icons
@import "@{deps}/Font-Awesome/less/font-awesome.less";

// Override bootstrap and FontAwesome vars and set some of our own
@import "variables.less";

@import "type.less";
@import "images.less";

@import "common.less";
@import "base.less";
@import "home.less";
@import "map.less";
@import "hut_new.less";
@import "about.less";

@import "modules/show_hide_slider.less";

Change path to deps folder

/**
 * Hutmap less code
 */

@deps: "../../../../deps";
@bootstrap: "@{deps}/bootstrap/less";

@import "@{bootstrap}/reset.less";
@import "@{bootstrap}/variables.less";
@import "@{bootstrap}/mixins.less";
@import "@{bootstrap}/carousel.less";
@import "@{bootstrap}/modals.less";
@import "@{bootstrap}/alerts.less";
@import "@{bootstrap}/close.less";
@import "@{bootstrap}/navbar.less";
@import "@{bootstrap}/navs.less";
@import "@{bootstrap}/type.less";
@import "@{bootstrap}/tooltip.less";
@import "@{bootstrap}/dropdowns.less";
@import "@{bootstrap}/popovers.less";

// Override bootstrap icons
@import "@{deps}/Font-Awesome/less/font-awesome.less";

// Override bootstrap and FontAwesome vars and set some of our own
@import "variables.less";

@import "type.less";
@import "images.less";

@import "common.less";
@import "base.less";
@import "home.less";
@import "map.less";
@import "hut_new.less";
@import "about.less";

@import "modules/show_hide_slider.less";


.repeater-thumbnail {
	border: 1px solid #ddd;
	color: #666;
	float: left;
	font-size: 12px;
	height: 130px;
	line-height: 36px;
	margin: 10px 12px;
	text-align: center;
	width: 100px;

	-webkit-box-shadow: 0 1px 4px 0 #ddd;
	box-shadow: 0 1px 4px 0 #ddd;

	img {
		display: block;
		margin-top: 12px;
	}

	&-cont {
		height: 100%;
		overflow-y: auto;
		padding: 10px;
		width: 100%;

		div.empty {
			font-style: italic;
			padding: 20px 10px;
			text-align: center;
		}
	}
}

Simplify repeater thumbnail view item styling

.repeater-thumbnail {
	border: 1px solid #ddd;
	color: #666;
	float: left;
	height: 110px;
	margin: 8px 7px;
	text-align: center;
	width: 100px;

	img {
		display: block;
		margin-top: 10px;
		margin-bottom: 3px;
	}

	&-cont {
		height: 100%;
		overflow-y: auto;
		padding: 6px;
		width: 100%;

		div.empty {
			font-style: italic;
			padding: 20px 10px;
			text-align: center;
		}
	}
}


@import "core/normalize.less";
@import "core/material.less";

@import "core/functions.less";

@import "core/color.less";
@import "core/fonts.less";

@import "core/variables.less";

html, body, main {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    border-radius: 2px;
}

body {
    -webkit-user-select: none;
}

main {
    background-color:#f9f9f9;
    position:relative;
}

// button, input, li {
//     -webkit-app-region: no-drag;
//     cursor: pointer;
// }

Fix css bug for Main UI

@import "core/normalize.less";
@import "core/material.less";

@import "core/functions.less";

@import "core/color.less";
@import "core/fonts.less";

@import "core/variables.less";

html, body, main {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    border-radius: 2px;
}

body {
    -webkit-user-select: none;
}

main {
    background-color:#f9f9f9;
    position:relative;
}

button, input, li {
    -webkit-app-region: no-drag;
    cursor: pointer;
}


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

.notifications_main() {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    @notif-height: 50px;
    .cp-notifications-container {
        max-width: 300px;
        display: flex;
        flex-flow: column;
        .cp-notification {
            min-height: @notif-height;
            display: flex;
            .cp-notification-content {
                flex: 1;
                min-width: 0;
                p {
                    word-break: break-word;
                }
                &.cp-clickable {
                    cursor: pointer;
                    &:hover {
                        background-color: rgba(0,0,0,0.1);
                    }
                }
            }
            .cp-notification-dismiss {
                color: black;
                width: 25px;
                height: 100%;
                display: none;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover {
                    background-color: rgba(0,0,0,0.1);
                }
            }
        }
    }
}

Fix dismiss icon not center on toolbar notifs

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

.notifications_main() {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    @notif-height: 50px;
    .cp-notifications-container {
        max-width: 300px;
        display: flex;
        flex-flow: column;
        .cp-notification {
            min-height: @notif-height;
            display: flex;
            .cp-notification-content {
                flex: 1;
                align-items: stretch;
                min-width: 0;
                p {
                    word-break: break-word;
                }
                &.cp-clickable {
                    cursor: pointer;
                    &:hover {
                        background-color: rgba(0,0,0,0.1);
                    }
                }
            }
            .cp-notification-dismiss {
                color: black;
                width: 25px;
                display: none;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover {
                    background-color: rgba(0,0,0,0.1);
                }
            }
        }
    }
}


@react-dark:       #2d2d2d;
@react-light:      #f9f9f9;
@react-blue:       #61dafb;
@react-maroon:     #c05b4d;
@react-text:       #484848;
@react-light-text: #e9e9e9;
@react-code-text:  #555;
@react-code-bg:    fade(#000, 4%);

@page-margin: 0;
@page-padding: 0;
@page-max-width: 900px;
@page-sans-serif-fonts: "Helvetica Neue", Helvetica, Arial, sans-serif;

@header-padding: 10px 0;
@header-logo-size: 180px;

@search-input-font-size: 18px;
@search-input-padding: 12px 20px 12px 10px;
@search-input-header-width: 550px;

@content-padding: 10px;
@content-margin: 20px;
@content-border: 1px solid rgba(16, 16, 16, 0.1);
@content-border-radius: 3px;
@content-background: #fff;

Fix style of input search box

@react-dark:       #2d2d2d;
@react-light:      #f9f9f9;
@react-blue:       #61dafb;
@react-maroon:     #c05b4d;
@react-text:       #484848;
@react-light-text: #e9e9e9;
@react-code-text:  #555;
@react-code-bg:    fade(#000, 4%);

@page-margin: 0;
@page-padding: 0;
@page-max-width: 900px;
@page-sans-serif-fonts: "Helvetica Neue", Helvetica, Arial, sans-serif;

@header-padding: 10px 0;
@header-logo-size: 180px;

@search-input-font-size: 18px;
@search-input-padding: 12px 0;
@search-input-header-width: 580px;

@content-padding: 10px;
@content-margin: 20px;
@content-border: 1px solid rgba(16, 16, 16, 0.1);
@content-border-radius: 3px;
@content-background: #fff;


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

.fact-body {
  margin: 0 0 5px 64px;
}

div.facts .fact-body, div.activity-group .fact-body  {
  font-size: 13px;
}

li.fact-relation .fact-body > div > span {
  cursor: pointer;
}

Revert "Fixed minor styling issue."

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

.fact-body {
  margin: 0 0 5px 55px;
}

div.facts .fact-body, div.activity-group .fact-body  {
  font-size: 13px;
}

li.fact-relation .fact-body > div > span {
  cursor: pointer;
}


@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
@badge-distance-adjustment: -0.4em;

@notification-background-unseen: #dce8ff;
@notification-background-unread: white;
@notification-background-read: #f1f1f1;

@notification-text-color: #666;
@notification-body-color: #888;

@bundle-group-padding: 1em;
@notification-popup-width: 500px;

@opacity-low: 0.5;
@opacity-mid: 0.8;

Increase contrast between header and body text in notifications

@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
@badge-distance-adjustment: -0.4em;

@notification-background-unseen: #dce8ff;
@notification-background-unread: white;
@notification-background-read: #f1f1f1;

@notification-text-color: #111;
@notification-body-color: #777;

@bundle-group-padding: 1em;
@notification-popup-width: 500px;

@opacity-low: 0.5;
@opacity-mid: 0.8;


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


#bootstrap-box {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	/* background-color: #fff; */ /* panels will include this, so it's not necessary to set here, and this way, it matches the outer divs */
}

#bootstrap-box input[type="button"] {
	-webkit-appearance: button;
	cursor: pointer;
}

#bootstrap-box input[disabled] {
	cursor: default;
}

#bootstrap-box {
	@import (less) "../../bower_components/bootstrap/less/bootstrap.less";
	@import (less) "../../bower_components/bootstrap/less/theme.less";
	@import (less) "./bootstrap-xl.less";
}

Fix font in bootstrap pages.

#bootstrap-box {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	/* background-color: #fff; */ /* panels will include this, so it's not necessary to set here, and this way, it matches the outer divs */
}

#bootstrap-box input[type="button"] {
	-webkit-appearance: button;
	cursor: pointer;
}

#bootstrap-box input[disabled] {
	cursor: default;
}

#bootstrap-box {
	@import (less) "../../bower_components/bootstrap/less/bootstrap.less";
	@import (less) "../../bower_components/bootstrap/less/theme.less";
	@import (less) "./bootstrap-xl.less";
}

/* LabKey changed it's default font to Roboto, which screws with bolding of text. This changes it back */
#bootstrap-box div {
	font-family: Arial, Helvetica, sans-serif;
}


.rx_simpleeditor {
	width: 100%;
	min-height: 60px;
	box-sizing: border-box;
	resize: vertical;
	overflow-y: auto;
	&.light {
		border: 1px solid #c4c4c4;
		background: #fff;
		padding: 10px;
	}
	&.dark {
		border-color: #111;
		background: #333;
		color: #fff;
	}
	iframe {
		max-width: 100%;
		padding: 5px 0;
	}
	img {
		max-width: 50%;
		padding: 5px 0;
	}
	img.thumbnail {
		max-width: 160px;
	}
}

Fix ugly border around contenteditable div in Chrome

.rx_simpleeditor {
	width: 100%;
	min-height: 60px;
	box-sizing: border-box;
	outline: 0 solid transparent;
	resize: vertical;
	overflow-y: auto;
	&.light {
		border: 1px solid #c4c4c4;
		background: #fff;
		padding: 10px;
	}
	&.dark {
		border-color: #111;
		background: #333;
		color: #fff;
	}
	iframe {
		max-width: 100%;
		padding: 5px 0;
	}
	img {
		max-width: 50%;
		padding: 5px 0;
	}
	img.thumbnail {
		max-width: 160px;
	}
}


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

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

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

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

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

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

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

Fix issue with not being logged in.

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

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

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

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

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

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

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


#divInformation {
    table.table
    {
        > tbody > tr > td:nth-child(1) {
            width: 30%;
            min-width: 250px;
        }
        > tbody > tr > td:nth-child(2) {
            width: 25%;
        }
        > tbody > tr > td:nth-child(2) {
            width: 45%;
        }
    }
    table.table.info-numeric
    {
        > thead > tr > th:nth-child(2) {
            text-align: right;
        }
        > tbody > tr > td:nth-child(2) {
            width: 150px;
        }
    }
    table.table.info-boolean
    {
        > thead > tr > th:nth-child(2) {
            text-align: center;
        }
        > tbody > tr > td:nth-child(2) {
            width: 150px;
        }
        .semaphore {
            color: @orange;
            font-size: 1.4em;
        }
        .semaphore.success {
            color: @nephritis;
        }
        .semaphore.disabled {
            color: @asbestos;
            font-size: 0.7em;
        }
    }
}

Align right on the Information page

#divInformation {
    table.table
    {
        > tbody > tr > td:nth-child(1) {
            width: 30%;
            min-width: 250px;
        }
        > tbody > tr > td:nth-child(2) {
            width: 25%;
        }
        > tbody > tr > td:nth-child(2) {
            width: 45%;
        }
    }
    table.table.info-numeric
    {
        > thead > tr > th:nth-child(2) {
            text-align: right;
        }
        > tbody > tr > td:nth-child(2) {
            width: 150px;
        }
    }
    table.table.info-boolean
    {
        > thead > tr > th:nth-child(2) {
            text-align: right;
        }
        > tbody > tr > td:nth-child(2) {
            text-align: right;
            width: 150px;
        }
        .semaphore {
            color: @orange;
            font-size: 1.4em;
        }
        .semaphore.success {
            color: @nephritis;
        }
        .semaphore.disabled {
            color: @asbestos;
            font-size: 0.7em;
        }
    }
}


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

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

p {
  margin: 0;
}

/**
 * Webkit buttons, inputs and textarea set "-webkit-font-smoothing: auto"
 */
button, input, textarea {
  -webkit-font-smoothing: inherit;
}

/**
 * Form fields should inherit color (removed in normalize v4.0.0)
 */
button,
input,
select,
textarea {
  color: inherit;
}

::-ms-clear {
  width: 0;
  height: 0;
}

::-ms-reveal {
  width: 0;
  height: 0;
}

Exclude select from color inheritance

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

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

p {
  margin: 0;
}

/**
 * Webkit buttons, inputs and textarea set "-webkit-font-smoothing: auto"
 */
button, input, textarea {
  -webkit-font-smoothing: inherit;
}

/**
 * Form fields should inherit color (removed in normalize v4.0.0)
 */
button,
input,
textarea {
  color: inherit;
}

::-ms-clear {
  width: 0;
  height: 0;
}

::-ms-reveal {
  width: 0;
  height: 0;
}


//
// Table Pager Core
// --------------------------------------------------

.table-pager {
    text-align: right;

    .table-pager-group.group2 {
        float: left;
    }

    .btn {
        min-width: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .floating-group {
        display: inline-block;
    }
}

caption[data-table-pager-loading-info="true"] {
    .spinner-floating {
        display: inline-block;
    }
}

Fix button size of table pager on ios

//
// Table Pager Core
// --------------------------------------------------

.table-pager {
    text-align: right;

    .table-pager-group.group2 {
        float: left;
    }

    .btn {
        min-width: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .floating-group {
        display: inline-block;
    }
}

caption[data-table-pager-loading-info="true"] {
    .spinner-floating {
        display: inline-block;
    }
}


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

.home-outline-resizer {
  position: absolute;
  top: 32px;
  z-index: 9999;
  right: 200px;
  bottom: 0;
  width: 10px;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0);

  &.is-dragging {
    cursor: col-resize;
    left: 0 !important;
    width: 100%;
  }

  .true-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    width: 4px;
    cursor: col-resize;
  }
}

Fix resizer overlaps editor scroller.

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

.home-outline-resizer {
  position: absolute;
  top: 32px;
  z-index: 9999;
  right: 200px;
  bottom: 0;
  width: 0;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0);

  &.is-dragging {
    cursor: col-resize;
    left: 0 !important;
    width: 100%;
  }

  .true-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    width: 4px;
    cursor: col-resize;
  }
}


/** @define MainMenu */

.MainMenu {
  @menu-breakpoint: 871px;

  display: flex;

  background-color: white;
  margin: 0;

  @media screen and (max-width: @menu-breakpoint) {
    position: relative;
    transition: height 0.5s ease-out;
    justify-content: flex-start;
    flex-direction: column;
    height: 58px;
    overflow: hidden;

    &.Menu--open {
        height: 523px !important;
        // border-bottom: solid thin black;
    }

    &--portal.Menu--open {
        height: 290px !important;
    }

  }

  @media screen and (min-width: @menu-breakpoint + 1px) {
      padding: 0 1rem;
  }

  &-menuContainer {
      display: flex;
  }

  &-toggle {
    @media screen and (min-width: @menu-breakpoint + 1px) {
      display: none;
    }
    display: flex;
    margin-left: auto;
  }

  &--fixedTop {
      width: 100%;
      z-index: 1040;
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
  }

}

Fix toggle button always showing up

/** @define MainMenu */

.MainMenu {
  @menu-breakpoint: 871px;

  display: flex;

  background-color: white;
  margin: 0;

  @media screen and (max-width: @menu-breakpoint) {
    position: relative;
    transition: height 0.5s ease-out;
    justify-content: flex-start;
    flex-direction: column;
    height: 58px;
    overflow: hidden;

    &.Menu--open {
        height: 523px !important;
        // border-bottom: solid thin black;
    }

    &--portal.Menu--open {
        height: 290px !important;
    }

  }

  @media screen and (min-width: (@menu-breakpoint + 1px)) {
      padding: 0 1rem;
  }

  &-menuContainer {
      display: flex;
  }

  &-toggle {
    display: flex;
    @media screen and (min-width: (@menu-breakpoint + 1px)) {
      display: none;
    }
    margin-left: auto;
  }

  &--fixedTop {
      width: 100%;
      z-index: 1040;
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
  }

}


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

#feedback_button {
  position: fixed;
  top: 230px;
  background: @linkColor;
  cursor: pointer;
  .rotate(270deg);

  width: 78px;
  height: 30px;
  left: -34px;

  #font > .sans-serif(normal, @baseFontSize, 36px);
  text-align: center;

  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0);

  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);

  .custom-radius(0, 8px, 8px, 0);

  a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    &:hover {
      text-decoration: none;
    }
  }
}

Move feedback button to front

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

#feedback_button {
  position: fixed;
  top: 230px;
  background: @linkColor;
  cursor: pointer;
  .rotate(270deg);
  z-index: 1000;

  width: 78px;
  height: 30px;
  left: -34px;

  #font > .sans-serif(normal, @baseFontSize, 36px);
  text-align: center;

  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0);

  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);

  .custom-radius(0, 8px, 8px, 0);

  a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    &:hover {
      text-decoration: none;
    }
  }
}


/* ==============
 * Task File List (table)
 * ==============
 */
.task-file-list {
  tr {
    .btn {
      float: right;
      opacity: 0;
      margin-top: -@horizontal-spacing-unit;
      margin-bottom: -@horizontal-spacing-unit;
    }

    &:hover {
      .btn {
        opacity: 1;
      }
    }
  }
}

Adjust task file list styles

/* ==============
 * Task File List (table)
 * ==============
 */
.task-file-list {

  margin-top: @base-spacing-unit * 3;

  tr {
    .btn {
      float: right;
      opacity: 0;
      margin-top: -@horizontal-spacing-unit;
      margin-bottom: -@horizontal-spacing-unit;
    }

    &:hover {
      .btn {
        opacity: 1;
      }
    }
  }
}


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

@sectionHeadHeight: 60px;  // Keep in sync with `GridSection.tsx`

.GridSection-head {
    height: @sectionHeadHeight;
    padding: 20px 0 0 10px;

    color: @blue-grey-200;
    font-size: 32px;
    font-weight: 200;
}

.GridSection-toggleSelection {
    color: inherit !important;
    font-size: @selectionButtonSize !important;
    margin: 0 0 3px 20px;
    visibility: hidden;

    .GridSection-head:hover &,
    &.isAlwaysVisible {
        visibility: visible;
    }

    .SvgIcon {
        margin: 0 !important;
    }
}

.GridSection-body {
    position: relative;
}

.GridSection-dummyBox {
    position: absolute;
    background-color: @blue-grey-900;
}

Adjust styling of section heads to work better for small sections

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

@sectionHeadHeight: 60px;  // Keep in sync with `GridSection.tsx`

.GridSection-head {
    height: @sectionHeadHeight;
    padding: 20px 0 0 10px;

    color: @blue-grey-200;
    font-size: 25px;
    font-weight: 200;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.GridSection-toggleSelection {
    color: inherit !important;
    font-size: @selectionButtonSize !important;
    margin: 0 0 3px 20px;
    visibility: hidden;

    .GridSection-head:hover &,
    &.isAlwaysVisible {
        visibility: visible;
    }

    .SvgIcon {
        margin: 0 !important;
    }
}

.GridSection-body {
    position: relative;
}

.GridSection-dummyBox {
    position: absolute;
    background-color: @blue-grey-900;
}


/* ==========================================================================
   Tablular data
   http://developers.whatwg.org/tabular-data.html
   ========================================================================== */

table {
	font-size: 1rem;
	margin: 1.5em 0 1.5em -0.5em; /* 24px 0 24px -8px */
	border-collapse: collapse;
	border-spacing: 0;
	ol,
	ul {
		list-style-position: inside;
	}
}

caption {
	color: @c-neutral;
	caption-side: bottom;
	font-size: 0.875rem; /* 14px */
	line-height: 1.1429; /* 16px */
	text-align: left;
	margin: 1rem 0; /* 16px 0 */
}

td,
th {
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: 0.25rem 2rem 0.25rem 0.5rem; /* 4px 32px 4px 4px */
}
th {
	line-height: 1.25;
	background-color: rgba(0,0,0,0.05);
}

Tweak styling of lists within tables

/* ==========================================================================
   Tablular data
   http://developers.whatwg.org/tabular-data.html
   ========================================================================== */

table {
	font-size: 1rem;
	margin: 1.5em 0 1.5em -0.5em; /* 24px 0 24px -8px */
	border-collapse: collapse;
	border-spacing: 0;
	ol,
	ul {
		margin-left: 1.5em;
	}
}

caption {
	color: @c-neutral;
	caption-side: bottom;
	font-size: 0.875rem; /* 14px */
	line-height: 1.1429; /* 16px */
	text-align: left;
	margin: 1rem 0; /* 16px 0 */
}

td,
th {
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: 0.25rem 2rem 0.25rem 0.5rem; /* 4px 32px 4px 4px */
}
th {
	line-height: 1.25;
	background-color: rgba(0,0,0,0.05);
}


/*  Basic elements  */
body {
	.background-color(@colorBg);
	background-attachment: fixed;
	background-position: top center;
}

a:link, a:visited  {
	.link;
}

a:hover {
	.link_hover;
}

h1 {
	.font( 18px, @fontFamilyHeading, @colorFgHeading );
	letter-spacing: 1px;
	margin: 7px 0;
	.nowrap;
}

h2 {
	.font( 15px, @fontFamilyHeading, @colorFgHeading );
	.nowrap;
}

h3 {
	.font( 13px, @fontFamilyHeading, @colorFgHeading );
	.nowrap;
}

h4 {
	.font(@fontSize, @fontFamily, @colorFg );
	margin: 8px 0 2px 0;
	.nowrap;
}

hr {
	height: 1px;
	.border(@colorFgBorderShy);
	border-width: 1px 0 0 0;
}

body, p, input, table, textarea, select, button {
	.font(@fontSize, @fontFamily, @colorFg );
}

strong {
	font-weight: bold;
}

small {
	font-size: @fontSizeSmall;
}

Fix button font; fixed it

/*  Basic elements  */
body {
	.background-color(@colorBg);
	background-attachment: fixed;
	background-position: top center;
}

a:link, a:visited  {
	.link;
}

a:hover {
	.link_hover;
}

h1 {
	.font( 18px, @fontFamilyHeading, @colorFgHeading );
	letter-spacing: 1px;
	margin: 7px 0;
	.nowrap;
}

h2 {
	.font( 15px, @fontFamilyHeading, @colorFgHeading );
	.nowrap;
}

h3 {
	.font( 13px, @fontFamilyHeading, @colorFgHeading );
	.nowrap;
}

h4 {
	.font(@fontSize, @fontFamily, @colorFg );
	margin: 8px 0 2px 0;
	.nowrap;
}

hr {
	height: 1px;
	.border(@colorFgBorderShy);
	border-width: 1px 0 0 0;
}

body, p, input, table, textarea, select {
	.font(@fontSize, @fontFamily, @colorFg );
}

strong {
	font-weight: bold;
}

small {
	font-size: @fontSizeSmall;
}


/* =========================================================================

    Project: <%= projectName %>
    Author: <%= projectAuthor %>
    Last updated: @@timestamp
@@toc

   ========================================================================= */

// Vendor Dependencies<% if (!features.useBootstrap) { %>
@import "normalize.css/normalize.scss";<% } %>

// Authored Dependencies
@import "setup/variables";
@import "setup/mixins";<% if (features.useSprites) { %>
@import "setup/sprites";<% } %>

// Common styles & layouts
@import "common/base";
@import "common/utilities";
@import "common/layout";<% if (isWP) { %>
@import "common/wordpress";<% } %>

// Components

Change normalize extension for less styles

/* =========================================================================

    Project: <%= projectName %>
    Author: <%= projectAuthor %>
    Last updated: @@timestamp
@@toc

   ========================================================================= */

// Vendor Dependencies<% if (!features.useBootstrap) { %>
@import "normalize.css/normalize.less";<% } %>

// Authored Dependencies
@import "setup/variables";
@import "setup/mixins";<% if (features.useSprites) { %>
@import "setup/sprites";<% } %>

// Common styles & layouts
@import "common/base";
@import "common/utilities";
@import "common/layout";<% if (isWP) { %>
@import "common/wordpress";<% } %>

// Components


@import 'common';

.oo-ui-window {
	&-frame {
		.oo-ui-box-sizing( border-box );
	}

	&-content {
		// This lets the -content element take focus in Firefox when a child element is clicked
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		// Element takes focus when opened, so hide outline
		&:focus {
			outline: 0;
		}
	}

	&-head,
	&-foot {
		.oo-ui-unselectable();
	}

	&-body {
		margin: 0;
		padding: 0;
		background: none;
	}

	&-overlay {
		position: absolute;
		top: 0;
		/* @noflip */
		left: 0;
	}

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

Add overflow:hidden to dialog content

@import 'common';

.oo-ui-window {
	&-frame {
		.oo-ui-box-sizing( border-box );
	}

	&-content {
		// This lets the -content element take focus in Firefox when a child element is clicked
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		overflow: hidden;

		// Element takes focus when opened, so hide outline
		&:focus {
			outline: 0;
		}
	}

	&-head,
	&-foot {
		.oo-ui-unselectable();
	}

	&-body {
		margin: 0;
		padding: 0;
		background: none;
	}

	&-overlay {
		position: absolute;
		top: 0;
		/* @noflip */
		left: 0;
	}

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


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

.pane-item {
  .panel {
    border-color: fadeout(@inset-panel-border-color, 30%);
  }
}

.panes {
  .pane {
    background-color: @app-background-color;

    &:focus .item-views {
      box-shadow: inset 0 0 7px #6aa5e9;
    }
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}

Use slightly darker background color rather than glow to indicate focus

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

.pane-item {
  .panel {
    border-color: fadeout(@inset-panel-border-color, 30%);
  }
}

.panes {
  .pane {
    background-color: lighten(@app-background-color, 4%);

    &:focus {
      background-color: @app-background-color;
    }
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}


.bws-icon {
    position: absolute;
    display: block;
    left: @bws-sidebar-width;
    top: 114px;
    width: 40px;
    height: 40px;
    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
        no-repeat center center;
    box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.content-visible .bws-icon {
    left: @bws-sidebar-width + @bws-panel-width;
}

Add a z-index to get the minimize button over the topology

.bws-icon {
    position: absolute;
    display: block;
    left: @bws-sidebar-width;
    top: 114px;
    width: 40px;
    height: 40px;
    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
        no-repeat center center;
    box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 10;
}
.content-visible .bws-icon {
    left: @bws-sidebar-width + @bws-panel-width;
}


// A Bootstrap button that goes well with uploadButton
// Simply add the btn-upload class to hide the normal browse button

.btn-upload {
  position: relative;
  overflow: hidden;

  input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    filter: ~"alpha(opacity=0)";
    transform: translate(-300px, 0) scale(4);
    font-size: 23px;
    direction: ltr;
    cursor: pointer;
  }
}

// Fix for IE 6
* html .btn-upload {
  line-height: 24px;
  margin: 1px -3px 0 0;
}

// Fix for IE 7
* + html .btn-upload {
  padding: 2px 15px;
  margin: 1px 0 0 0;
}

Make upload button the size it should be

// A Bootstrap button that goes well with uploadButton
// Simply add the btn-upload class to hide the normal browse button

.btn-upload {
  position: relative;
  display: inline-block;
  overflow: hidden;

  input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    filter: ~"alpha(opacity=0)";
    transform: translate(-300px, 0) scale(4);
    -webkit-transform: translate(-300px, 0) scale(4);
    -ms-transform: translate(-300px, 0) scale(4);
    -o-transform: translate(-300px, 0) scale(4);
    font-size: 23px;
    direction: ltr;
    cursor: pointer;
  }
}

// Fix for IE 6
* html .btn-upload {
  line-height: 24px;
  margin: 1px -3px 0 0;
}

// Fix for IE 7
* + html .btn-upload {
  padding: 2px 15px;
  margin: 1px 0 0 0;
}


/* Scroller Page Controls */
.moon-icon-button.moon-paging-button {
	position:absolute;
	z-index:150;
	text-align: center;
	line-height: 40px;
	background: transparent;
	opacity: 1;
}
.moon-icon-button.moon-paging-button.hidden {
	opacity: 0;
}
.moon-icon-button.moon-paging-button.top {
	top: 0px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.moon-icon-button.moon-paging-button.right {
	right: 0px;
}
.moon-icon-button.moon-paging-button.bottom {
	bottom: 0px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.moon-icon-button.moon-paging-button.left {
	left: 0px;
}

Use Miso for paging control arrows.

/* Scroller Page Controls */
.moon-icon-button.moon-paging-button {
	position:absolute;
	z-index:150;
	text-align: center;
	line-height: 40px;
	background: transparent;
	opacity: 1;
	font-family: @moon-alt-font-family;
}
.moon-icon-button.moon-paging-button.hidden {
	opacity: 0;
}
.moon-icon-button.moon-paging-button.top {
	top: 0px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.moon-icon-button.moon-paging-button.right {
	right: 0px;
}
.moon-icon-button.moon-paging-button.bottom {
	bottom: 0px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.moon-icon-button.moon-paging-button.left {
	left: 0px;
}


@import '../../custom/custom.less';

.kss-markup {
  &.folded-example {
    pre {
      max-height: 2em;
      opacity: 0.4;
      overflow: hidden !important;
    }
  }
}

.kss-description td, .kss-description th {
  padding: 5px;
}

.kss-menubar {
  @media screen and (min-width: @screen-md-min) {
    .kss-sidebar-inner {
      position: fixed;
      top: 0px;
      margin-left: -2%;
      width: 230px;
    }
  }
  @media screen and (max-width: @screen-sm-max) {
    .kss-menu-item {
      font-size: 20px !important;
      line-height: 1.5 !important;
      .kss-name {
        white-space: normal !important;
      }
    }
  }
}

.kss-content {
  margin-left: none !important;
}

Apply styles to ref number

@import '../../custom/custom.less';

.kss-markup {
  &.folded-example {
    pre {
      max-height: 2em;
      opacity: 0.4;
      overflow: hidden !important;
    }
  }
}

.kss-description td, .kss-description th {
  padding: 5px;
}

.kss-menubar {
  @media screen and (min-width: @screen-md-min) {
    .kss-sidebar-inner {
      position: fixed;
      top: 0px;
      margin-left: -2%;
      width: 230px;
    }
  }
  @media screen and (max-width: @screen-sm-max) {
    .kss-menu-item {
      font-size: 20px !important;
      line-height: 1.5 !important;
      .kss-name, .kss-ref {
        white-space: normal !important;
      }
    }
  }
}

.kss-content {
  margin-left: none !important;
}


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

@brand-primary: #9FB6CC;
@brand-secondary: #D3DBE3;

.gmf-theme-selector li {
  flex-direction: column;
}

@theme-selector-columns: 3;

Remove legend background and border in desktop_alt

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

@brand-primary: #9FB6CC;
@brand-secondary: #D3DBE3;

.gmf-theme-selector li {
  flex-direction: column;
}

.gmf-layertree-node .gmf-layertree-legend {
  border: none;
  background-color: transparent;
}

@theme-selector-columns: 3;


.containers-listing {
    width: 100%;
}

.containers-listing i.fa-cube,
.content-filter i.fa-cube {
    position: relative;
    font-size: 22px;
}

.containers-listing .console-ct {
    min-height: 310px;
}

Fix position of reset button in container terminal

.containers-listing {
    width: 100%;
}

.containers-listing i.fa-cube,
.content-filter i.fa-cube {
    position: relative;
    font-size: 22px;
}

.containers-listing .console-ct {
    min-height: 310px;
}

kubernetes-container-terminal .terminal-actions {
    position: relative;
    z-index: auto;
}


.component-dialog {
    .modal-dialog .modal-content {
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        border-radius: 1px;
    }

    &.large {
        .modal-dialog {
            width: 100%;
            padding: 20px;
        }
    }
}

.modal-backdrop {
    background: #fff;
}

.dialog-login {
    img {
        max-width: 100%;
    }

    .intro {
        margin-bottom: 30px;
    }
}

Improve size of large modals

.component-dialog {
    .modal-dialog .modal-content {
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        border-radius: 1px;
    }

    &.large {
        .modal-dialog {
            width: 100%;
            max-width: 1200px;
            padding: 20px;
        }
    }
}

.modal-backdrop {
    background: #fff;
}

.dialog-login {
    img {
        max-width: 100%;
    }

    .intro {
        margin-bottom: 30px;
    }
}


.app-view {
  .alm-entity-list {
    .actions() {
      width: 100%;
      margin-bottom: @general-margin;
      .filtering {
        width: 300px;
        float: left;
      }
    }
    &-actions {
      .actions;
    }
    .alm-table-top {
      .actions;
    }
    .alm-pagination {
      float: right;
      &-text {
        display: inline;
        vertical-align: middle;
        color: @color-tungsten;
        font-weight: 300;
        margin-right: 5px;
      }
      &-symbol {
        color: @color-piston;
        font-family: @fontAwesome;
        &.backward::before {
          content: '\f104';
        }
        &.forward::before {
          content: '\f105';
        }
      }
    }
  }

}

Add contrast between enabled and disabled pagination control buttons.

.app-view {
  .alm-entity-list {
    .actions() {
      width: 100%;
      margin-bottom: @general-margin;
      .filtering {
        width: 300px;
        float: left;
      }
    }
    &-actions {
      .actions;
    }
    .alm-table-top {
      .actions;
    }
    .alm-pagination {
      float: right;
      &-text {
        display: inline;
        vertical-align: middle;
        color: @color-tungsten;
        font-weight: 300;
        margin-right: 5px;
      }
      &-symbol {
        color: @color-cobalt;
        font-family: @fontAwesome;
        &.backward::before {
          content: '\f104';
        }
        &.forward::before {
          content: '\f105';
        }
      }
    }
  }

}


.overlay {
  &.grasp-seasons {
    position: fixed;
    background-color: transparent;
    text-align: center;

    &.main{
      top: 10px;
      left: 10px;
      width: 795px;
      height: 600px;
    }
    &.small-top{
      top: 10px;
      left: 815px;
      width: 395px;
      height: 300px;
    }
    &.small-bottom{
      top: 340px;
      left: 815px;
      width: 395px;
      height: 300px;
    }
    &.active{
      background-color: transparent;
    }
      .hands-view{
        background-color:transparent;
      }
      .instructions {
        top: auto;
        bottom: 0;
        margin-bottom:4px;
        font-size: 1.3em;
        padding: 3px 10px 3px 3px;
        text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
      }
  }
}

Fix css for small bottom pane view

.overlay {
  &.grasp-seasons {
    position: fixed;
    background-color: transparent;
    text-align: center;

    &.main{
      top: 10px;
      left: 10px;
      width: 795px;
      height: 600px;
    }
    &.small-top{
      top: 10px;
      left: 815px;
      width: 395px;
      height: 300px;
    }
    &.small-bottom{
      top: 315px;
      left: 815px;
      width: 395px;
      height: 300px;
    }
    &.active{
      background-color: transparent;
    }
      .hands-view{
        background-color:transparent;
      }
      .instructions {
        top: auto;
        bottom: 0;
        margin-bottom:4px;
        font-size: 1.3em;
        padding: 3px 10px 3px 3px;
        text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
      }
  }
}


//
// Tooltips
// --------------------------------------------------

[data-tooltip] {
	position: relative;
	cursor: pointer;
	.inline-block();

	&:before,
	&:after {
		.transition(all 0.2s ease-out);
		position: absolute;
		visibility: hidden;
		opacity: 0;
	}

	&:before {
		.arrow-up(7px, @textColor);
		content: '';
		left: 50%;
		margin-left: -3.25px;
		z-index: 10001;
		bottom: -10px;
	}
	&:after {
		.box-sizing(border-box);
		content: attr(data-tooltip);
		padding: 0.5em 0.75em;
		border-radius: 3px;
		font-size: 0.875em;
		z-index: 10000;
		left: 50%;
		margin-left: -5em;
		margin-top: 10px;
		width: 10em;
		line-height: 120%;
		background: @textColor;
		color: @baseColor;
	}
	&:hover:before,
	&:hover:after {
		visibility: visible;
		opacity: 1;
	}

}

Move to top tooltips, fix pseudo hover state

//
// Tooltips
// --------------------------------------------------

[data-tooltip] {
	position: relative;
	height: 100%;
	cursor: pointer;
	.inline-block();

	&:before,
	&:after {
		.transition(all 0.2s ease-out);
		position: absolute;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	&:before {
		.arrow-down(7px, @textColor);
		content: '';
		top: 0;
		left: 50%;
		margin-left: -3.25px;
		z-index: 10001;
		bottom: -10px;
	}
	&:after {
		.box-sizing(border-box);
		content: attr(data-tooltip);
		padding: 0.5em 0.75em;
		border-radius: 3px;
		font-size: 0.95em;
		z-index: 10000;
		left: 50%;
		bottom: 100%;
		margin-left: -7.5em;
		margin-top: 10px;
		width: 15em;
		line-height: 120%;
		background: @textColor;
		color: @baseColor;
	}
	&:hover:before,
	&:hover:after {
		visibility: visible;
		opacity: 1;
	}
}


//
// see: http://csswizardry.com/2013/04/shame-css/
//
#app {
  .aside-item {
    + .tooltip {
      display: none !important;
    }
  }
}
.inspector {
  .flex(0 0 auto);
  height: 100vh;
  overflow-y: auto;
  padding: 0 1em;
  color: @grayDark;
}

[role="button"] {
  cursor: pointer;
}
//
// To any unfortunate soul that happens upon the following hack... please forgive me...
//
// NOTE: find a better place for this, perhaps in shared styles,
// and get rid of the id (moved from the overly-strict "outer" directory)

.home.page {
  .backface-visibility(hidden);
  .home-practice svg[class*="logo"] { .backface-visibility(hidden); }
}

Make some of the tooltips work.

//
// see: http://csswizardry.com/2013/04/shame-css/
//
.inspector {
  .flex(0 0 auto);
  height: 100vh;
  overflow-y: auto;
  padding: 0 1em;
  color: @grayDark;
}

[role="button"] {
  cursor: pointer;
}
//
// To any unfortunate soul that happens upon the following hack... please forgive me...
//
// NOTE: find a better place for this, perhaps in shared styles,
// and get rid of the id (moved from the overly-strict "outer" directory)

.home.page {
  .backface-visibility(hidden);
  .home-practice svg[class*="logo"] { .backface-visibility(hidden); }
}


.Alert {
  padding: 12px 16px;
  border-radius: @border-radius;
  background: @alert-bg;
  line-height: 1.5;

  &, .Button, .Button:hover {
    color: @alert-color;
  }
}
.Alert--error {
  background: @alert-error-bg;

  &, a, a:hover, .Button, .Button:hover {
    color: @alert-error-color;
  }
}
.Alert--success {
  background: @alert-success-bg;

  &, a, a:hover, .Button, .Button:hover {
    color: @alert-success-color;
  }
  a, a:hover {
    text-decoration: underline;
  }
}
.Alert-controls {
  list-style-type: none;
  padding: 0;
  margin: 0 -8px 0 8px;
  display: inline-block;

  > li {
    display: inline-block;
    margin: 0 5px;

    > a, > .Button {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: bold;

      &.disabled {
        cursor: default;
        text-decoration: none;
        opacity: 0.5;
      }
      &:hover {
        text-decoration: underline;
      }
    }

    > .Button {
      margin: -10px;
      vertical-align: 0;
    }
  }
}

Make alert control color consistent on focus

.Alert {
  padding: 12px 16px;
  border-radius: @border-radius;
  line-height: 1.5;

  .Alert--color(@alert-color, @alert-bg);
}
.Alert--error {
  .Alert--color(@alert-error-color, @alert-error-bg);
}
.Alert--success {
  .Alert--color(@alert-success-color, @alert-success-bg);

  a, a:hover {
    text-decoration: underline;
  }
}
.Alert--color(@color; @background) {
  background: @background;

  &,
  a,
  a:hover,
  .Button,
  .Button:hover,
  .Button:active,
  .Button.active,
  .Button:focus,
  .Button.focus {
    color: @color;
  }
}
.Alert-controls {
  list-style-type: none;
  padding: 0;
  margin: 0 -8px 0 8px;
  display: inline-block;

  > li {
    display: inline-block;
    margin: 0 5px;

    > a, > .Button {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: bold;

      &.disabled {
        cursor: default;
        text-decoration: none;
        opacity: 0.5;
      }
      &:hover {
        text-decoration: underline;
      }
    }

    > .Button {
      margin: -10px;
      vertical-align: 0;
    }
  }
}


@import (once) "./colortheme.less";

.history_main () {
    .cp-toolbar-history {
        display: none;
        text-align: center;
        * {
            font: @colortheme_app-font;
        }
        .cp-toolbar-history-next {
            display: inline-block;
            vertical-align: middle;
            margin: 20px;
        }
        .cp-toolbar-history-previous {
            display: inline-block;
            vertical-align: middle;
            margin: 20px;
        }
        .cp-toolbar-history-goto {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            input { width: 75px; }
        }
        .cp-toolbar-history-goto-input {
            padding-left: 5px;
            margin-left: 5px;
            vertical-align: middle;
        }
        button {
            color: inherit;
            background-color: rgba(0,0,0,0.2);
            &:hover {
                background-color: rgba(0,0,0,0.4);
            }
        }
        .cp-toolbar-history-close {
            background: white;
            color: black;
            margin-top: 5px;
            &:hover {
                background-color: #e6e6e6;
            }
        }
        .fa-spinner {
            font-size: 66px;
        }
    }
}

Fix history mode not centered

@import (once) "./colortheme.less";

.history_main () {
    .cp-toolbar-history {
        display: none;
        text-align: center;
        width: 100%;
        * {
            font: @colortheme_app-font;
        }
        .cp-toolbar-history-next {
            display: inline-block;
            vertical-align: middle;
            margin: 20px;
        }
        .cp-toolbar-history-previous {
            display: inline-block;
            vertical-align: middle;
            margin: 20px;
        }
        .cp-toolbar-history-goto {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            input { width: 75px; }
        }
        .cp-toolbar-history-goto-input {
            padding-left: 5px;
            margin-left: 5px;
            vertical-align: middle;
        }
        button {
            color: inherit;
            background-color: rgba(0,0,0,0.2);
            &:hover {
                background-color: rgba(0,0,0,0.4);
            }
        }
        .cp-toolbar-history-close {
            background: white;
            color: black;
            margin-top: 5px;
            &:hover {
                background-color: #e6e6e6;
            }
        }
        .fa-spinner {
            font-size: 66px;
        }
    }
}


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

    z-index: 20;
    cursor: pointer;

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

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

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

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

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

Make overlay play button smaller

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

    z-index: 20;
    cursor: pointer;

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

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

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

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

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


.markdown-preview atom-text-editor .indent-guide {
  box-shadow: none;
}

atom-panel.modal:after {
  background: #000000;
  opacity: 0.7;
}

atom-text-editor .line-number > .absolute {
  display: none;
}

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

body.dev-mode {
  span[is="status-bar-launch-mode"] {
    display: none !important;
  }

  .title-bar {
    border: 1px solid rgba(255,0,0,0.5);
    background-color: rgba(255,0,0,0.2);
    color: black;
  }

  &.is-blurred {
    .title-bar {
      border: 1px solid rgba(255,0,0,0.3);
      background-color: rgba(255,0,0,0.1);
      color: rgba(0,0,0,0.5);
    }
  }

  > .dev-mode-indicator {
    font-size: 78pt;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: rgba(255,0,0,0.1);
    font-weight: bolder;
  }
}

Disable ligatures on the current line

.markdown-preview atom-text-editor .indent-guide {
  box-shadow: none;
}

atom-panel.modal:after {
  background: #000000;
  opacity: 0.7;
}

atom-text-editor .line-number > .absolute {
  display: none;
}

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

atom-text-editor .line.cursor-line {
  font-feature-settings: normal;
  font-variant-ligatures: none;
}

body.dev-mode {
  span[is="status-bar-launch-mode"] {
    display: none !important;
  }

  .title-bar {
    border: 1px solid rgba(255,0,0,0.5);
    background-color: rgba(255,0,0,0.2);
    color: black;
  }

  &.is-blurred {
    .title-bar {
      border: 1px solid rgba(255,0,0,0.3);
      background-color: rgba(255,0,0,0.1);
      color: rgba(0,0,0,0.5);
    }
  }

  > .dev-mode-indicator {
    font-size: 78pt;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: rgba(255,0,0,0.1);
    font-weight: bolder;
  }
}


.cb-panels {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;

    .component-tab {
        width: 100%;
        max-width: 100%;

        .inner {
            max-width: 100%;
            text-transform: uppercase;
            font-weight: 800;
            font-size: 13px;
            opacity: 0.65;
            line-height: 28px;
        }
    }

    .tabs-section-header, .tabs-section-content {
        background: inherit !important;
        color: inherit !important;
    }
}

Improve panel section design: resizer and delimiter

.cb-panels {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;

    .component-grid .grid-section {
        @resizerHeight: 6px;

        .grid-section-content.with-bar-v {
            bottom: @resizerHeight;
        }

        .grid-resize-bar-v {
            box-shadow: 0px -2px 4px rgba(0,0,0, 0.08);
            border-top: 1px solid rgba(0,0,0, 0.16);
            height: @resizerHeight;

            &:after {
                position: absolute;
                width: 30px;
                background: rgba(0, 0, 0, 0.08);
                top: 1px;
                bottom: 1px;
                left: 50%;
                margin-left: -15px;
                content: " ";
            }
        }
    }

    .component-tab {
        width: 100%;
        max-width: 100%;
        background: transparent !important;

        .inner {
            max-width: 100%;
            text-transform: uppercase;
            font-weight: 800;
            font-size: 13px;
            opacity: 0.65;
            line-height: 28px;
        }
    }

    .tabs-section-header, .tabs-section-content {
        background: inherit !important;
        color: inherit !important;
    }
}


/* 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|Buenard: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 'shadows';
@import 'overrides';
@import 'variables';

html {
  height: 100%;

  body {
    height: 100%;

    font-family: Buenard, serif;
    font-size: 14px;

    background: @shostakovich;

    .btn {
      font-family: 'Cinzel', serif;
    }

    > article {
      height: 100%;

      > section {
        position: absolute;
        width: 100%;
        height: 100%;

        > .fill {
          display: table;
          width: 100%;
          height: 100%;

          > .fill-content {
            display: table-cell;
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
    }

    &.hidden-left {
      left: -100%;
    }

    &.hidden-right {
      left: 100%;
    }
  }
}

Allow each card to scroll vertically, but inhibit side-to-side (which we will control).

/* 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|Buenard: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 'shadows';
@import 'overrides';
@import 'variables';

html {
  height: 100%;

  body {
    height: 100%;
    overflow: hidden;

    font-family: Buenard, serif;
    font-size: 14px;

    background: @shostakovich;

    .btn {
      font-family: 'Cinzel', serif;
    }

    > article {
      height: 100%;

      > section {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow-y: auto;

        > .fill {
          display: table;
          width: 100%;
          height: 100%;

          > .fill-content {
            display: table-cell;
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
    }

    &.hidden-left {
      left: -100%;
    }

    &.hidden-right {
      left: 100%;
    }
  }
}