.settings-view {
    .packages .search-container {
        margin-bottom: 2rem;
    }

    .package-card {
        background-color: fade(@text-color, 5%);
        border-radius: @component-border-radius;
        margin-bottom: 1.5rem;
        .z-depth-1;

        &.disabled {
            background-color: fade(@text-color, 5%);
            opacity: .5;
        }

        &:hover {
            background-color: fade(@text-color, 5%);
        }

        .btn-group {
            box-shadow: none;

            .status-indicator {
                min-width: 2px;
                width: 2px;
            }
        }

        .meta-controls {
            .install-button, .uninstall-button {
                &.is-installing, &.is-uninstalling {
                    font-size: 0;
                    padding: 0;
                    width: 2rem;
                    height: 2rem;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                    background: none;
                    border: .125rem solid @base-color;
                    border-right-color: transparent;

                    &::before {
                        animation: spin 1s linear infinite reverse;
                        margin: 0;
                        position: relative;
                        top: -.125rem;
                        vertical-align: middle;
                    }

                    &:hover {
                        box-shadow: none;
                    }
                }
            }

            .install-button.is-installing::before {
                transform-origin: .5rem .5rem;
            }

            .uninstall-button.is-uninstalling::before {
                transform-origin: .375rem .5rem;
            }
        }
    }
}

Fix icon jiggle when installing and un-installing pacakges

.settings-view {
    .packages .search-container {
        margin-bottom: 2rem;
    }

    .package-card {
        background-color: fade(@text-color, 5%);
        border-radius: @component-border-radius;
        margin-bottom: 1.5rem;
        .z-depth-1;

        &.disabled {
            background-color: fade(@text-color, 5%);
            opacity: .5;
        }

        &:hover {
            background-color: fade(@text-color, 5%);
        }

        .btn-group {
            box-shadow: none;

            .status-indicator {
                min-width: 2px;
                width: 2px;
            }
        }

        .meta-controls {
            .install-button, .uninstall-button {
                // Use px units to avoid icon jiggle
                &.is-installing, &.is-uninstalling {
                    animation: spin 1s linear infinite;
                    background: none;
                    border: 2px solid @base-color;
                    border-radius: 50%;
                    border-right-color: transparent;
                    font-size: 0;
                    height: 32px;
                    padding: 0;
                    width: 32px;

                    &::before {
                        animation: spin 1s linear infinite reverse;
                        height: 16px;
                        margin: 0;
                        position: relative;
                        vertical-align: middle;
                        width: 16px;
                    }

                    &:hover {
                        box-shadow: none;
                    }
                }
            }
        }
    }
}


@import "variables";

.github-Project {
  display: flex;
  align-items: center;
  padding: @component-padding/2 @component-padding;
  border-bottom: 1px solid @base-border-color;

  &-path {
    flex: 1;
    margin-left: @component-padding;
  }

  &-avatar {
    width: 23px;
    height: 23px;
    border-radius: @component-border-radius;
  }

  &-lock.btn {
    width: 40px;
    height: 20px;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;

    border: none;
    background-color: transparent;
    background-image: none;

    &:active, &:hover {
      background-color: transparent;
      background-image: none;
    }
  }

  .icon {
    padding: 0;
    margin: 0;
    line-height: 1em;
    fill: @text-color;

    &:hover {
      fill: @text-color-highlight;
    }

    &.icon-unlock {
      width: 21px;
      height: 17px;
      padding-left: 1px;
    }
  }
}

Hide git and GitHub tab avatar alt text when offline

@import "variables";

.github-Project {
  display: flex;
  align-items: center;
  padding: @component-padding/2 @component-padding;
  border-bottom: 1px solid @base-border-color;

  &-path {
    flex: 1;
    margin-left: @component-padding;
  }

  &-avatar {
    width: 23px;
    height: 23px;
    border-radius: @component-border-radius;
    color: transparent;
    overflow: hidden;
  }

  &-lock.btn {
    width: 40px;
    height: 20px;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;

    border: none;
    background-color: transparent;
    background-image: none;

    &:active, &:hover {
      background-color: transparent;
      background-image: none;
    }
  }

  .icon {
    padding: 0;
    margin: 0;
    line-height: 1em;
    fill: @text-color;

    &:hover {
      fill: @text-color-highlight;
    }

    &.icon-unlock {
      width: 21px;
      height: 17px;
      padding-left: 1px;
    }
  }
}


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

.beatmap-discussion-new-float {
  @top: beatmap-discussion-new-float;
  // counter the padding from parent
  margin-top: -10px;
  margin-bottom: 10px;
  pointer-events: none;

  &--pinned {
    position: sticky;
    z-index: 1;
    // top will be calulated by the component.
  }

  &__content {
    padding-top: 10px;
    pointer-events: initial;
  }

  &__floatable {
    .own-layer();
    width: 100%;
  }
}

Fix invisible gap on pinned beatmap discussion box

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

.beatmap-discussion-new-float {
  @top: beatmap-discussion-new-float;
  // counter the padding from parent
  margin-top: -10px;
  margin-bottom: 10px;
  pointer-events: none;

  &--pinned {
    position: sticky;
    z-index: 1;
    // top will be calulated by the component.
  }

  &__content {
    pointer-events: initial;
  }

  &__floatable {
    .own-layer();
    width: 100%;
  }
}


.main-nav{
  margin: 1rem 1rem 0;
  &__items{
    text-align: center;
    margin: 0;
    padding: 0;
  }
  &__item{
    display: inline-block;
  }
}

Scale down menu button padding

.main-nav{
  margin: 1rem 1rem 0;
  &__items{
    text-align: center;
    margin: 0;
    padding: 0;
    .button__link {
      padding: 0.6em 0.8em;
    }
  }
  &__item{
    display: inline-block;
  }
}


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

div.fact-view {
  color: @baseFontColor;
  font-size: 14px;
  line-height: 19px;

  padding: 20px 0 10px;

  position: relative;
  .clearfix();

  border-bottom: 1px solid @baseBorderColor;

  #close {
    z-index: 2147483647;
    position: absolute;
    top: 3px;
    right: 4px;
    .opacity(.50);
  }
}

#activity_for_channel div.fact-view {
  padding: 10px 0 0;
}

Make sure a hand cursor is shown when hovering over the modal close button in the client.

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

div.fact-view {
  color: @baseFontColor;
  font-size: 14px;
  line-height: 19px;

  padding: 20px 0 10px;

  position: relative;
  .clearfix();

  border-bottom: 1px solid @baseBorderColor;

  #close {
    z-index: 2147483647;
    position: absolute;
    top: 3px;
    right: 4px;
    .opacity(.50);
    cursor: pointer;
  }
}

#activity_for_channel div.fact-view {
  padding: 10px 0 0;
}


/**
* Stats
* ============================================================================
*/

.team-stats {
  margin: -21px -20px 20px;
  box-shadow: inset 0 1px 0 lighten(@trim, 1), inset 0 -1px 0 lighten(@trim, 3);
  background: darken(@bgColor, 0);

  .stat-column {
    padding: 20px 20px 18px;
    line-height: 1;

    &.good, &.bad {
      color: #fff;
      .count-label {
        opacity: .7;
      }
    }

    &.good {
      background: @green;
    }

    &.bad {
      background: @red;
    }
  }

  .count {
    font-size: 30px;
    display: block;
    margin-bottom: 6px;
  }

  .count-label {
    font-size: 16px;
    opacity: .4;
  }
}

.project-chart {
  .loading {
    margin: 0;
    min-height: 93px;
  }
  .chart-wrapper {
    position: relative;
    .date-legend {
      top: 0;
      left: 0;
      position: absolute;
      color: @gray-light;
      background: #fff;
      padding: 2px;
      opacity: 0.8;
      font-size: 11px;
    }
  }
}

Decrease line height on date

/**
* Stats
* ============================================================================
*/

.team-stats {
  margin: -21px -20px 20px;
  box-shadow: inset 0 1px 0 lighten(@trim, 1), inset 0 -1px 0 lighten(@trim, 3);
  background: darken(@bgColor, 0);

  .stat-column {
    padding: 20px 20px 18px;
    line-height: 1;

    &.good, &.bad {
      color: #fff;
      .count-label {
        opacity: .7;
      }
    }

    &.good {
      background: @green;
    }

    &.bad {
      background: @red;
    }
  }

  .count {
    font-size: 30px;
    display: block;
    margin-bottom: 6px;
  }

  .count-label {
    font-size: 16px;
    opacity: .4;
  }
}

.project-chart {
  .loading {
    margin: 0;
    min-height: 93px;
  }
  .chart-wrapper {
    position: relative;
    .date-legend {
      top: 0;
      left: 0;
      position: absolute;
      color: @gray-light;
      background: #fff;
      padding: 2px;
      opacity: 0.8;
      font-size: 11px;
      line-height: 1;
    }
  }
}


.move-in-out {
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-out;
    &.v-leave {
        transform: translateX(100%);
        opacity: 0;
    }
    &.v-enter {
        transform: translateX(-100%);
        opacity: 0;
    }
}

Disable transition x transform pending spec for navigation flows vs. modal windows

.move-in-out {
    transition: transform 0.2s ease-in-out, opacity 0.3s ease-out;
    &.v-leave {
        // transform: translateX(100%);
        opacity: 0;
    }
    &.v-enter {
        // transform: translateX(-100%);
        opacity: 0;
    }
}


@import "../../../../delite/themes/bootstrap/includes";

@star-icon-size: 40px;
@star-icon-full: "\2605";
@star-icon-full-color: @brand-primary;
@star-icon-empty: "\2606";
@star-icon-empty-color: @brand-primary;
@star-icon-disabled-color: @gray-light;

@import "../StarRating_template";

Make the star size a multiple of the @font-size-base.

@import "../../../../delite/themes/bootstrap/includes";

@star-icon-size: ceil((@font-size-base * 2.85));
@star-icon-full: "\2605";
@star-icon-full-color: @brand-primary;
@star-icon-empty: "\2606";
@star-icon-empty-color: @brand-primary;
@star-icon-disabled-color: @gray-light;

@import "../StarRating_template";


@import '../echo.variables';
@import '../echo.variables.monobook';

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

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

		&:after {
			top: 5px;
		}
	}

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

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

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

Move the badges down a bit in Monobook

@import '../echo.variables';
@import '../echo.variables.monobook';

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

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

		&:after {
			top: 3px;
		}
	}

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

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

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


// OSC VARIABLES
// --------------------------------------------------

// Page width
@oscarpagewidth: 960px;
// Image height
@imagecontainerheight: 165px;

@form-actions-bg-color: #f5f5f5;
@form-actions-border-color: #e5e5e5;

// Custom colors
@white: #fff;
@black: #000;

Make max width wider for large devices

// OSC VARIABLES
// --------------------------------------------------

// Page width
@oscarpagewidth: 1280px;
// Image height
@imagecontainerheight: 165px;

@form-actions-bg-color: #f5f5f5;
@form-actions-border-color: #e5e5e5;

// Custom colors
@white: #fff;
@black: #000;


pre[data-add-editor="true"], textarea[data-add-editor="true"] {}

.editor {
  width: 100%;
  min-height: 600px;
}

textarea[data-add-editor="false"] {
  min-height: 50em;
}

Set editor textbox font to monospace.

pre[data-add-editor="true"], textarea[data-add-editor="true"] {}

.editor {
  width: 100%;
  min-height: 600px;
}

textarea[data-add-editor="false"] {
  min-height: 50em;
  font-family: monospace;
}


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

#main-wrapper .profile {
  margin: 25px 0 0;

  .profile-information-item {
    margin-bottom: 1.25em;

    .profile-information-label {
      font-weight: bold;
      display: block;
      color: @metaFontColor;
      margin-bottom: 2px;
    }
    .profile-information-field {
      font-size: 13px;
    }
    .empty-state {
      color: @metaFontColor;
    }
  }

  .profile-box-container {
    width: 50%;
    float: left;
  }

  .top-channels-region, .profile-information {
    background: @backgroundGray;
    padding: 10px 20px 20px;
    border: 1px solid @mutedBorderColor;
    .border-radius(3px);
    text-shadow: 0 1px 0 #fff;
  }
  .profile-information {
    margin-left: 10px;
  }
  .top-channels-region {
    margin-right: 10px;
  }
}

Fix showMore on profile page

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

#main-wrapper .profile {
  margin: 25px 0 0;

  .profile-information-item {
    margin-bottom: 1.25em;

    .profile-information-label {
      font-weight: bold;
      display: block;
      color: @metaFontColor;
      margin-bottom: 2px;
    }
    .profile-information-field {
      font-size: 13px;
    }
    .empty-state {
      color: @metaFontColor;
    }
  }

  .profile-box-container {
    width: 50%;
    float: left;
  }

  .top-channels-region, .profile-information {
    background: @backgroundGray;
    padding: 10px 20px 20px;
    border: 1px solid @mutedBorderColor;
    .border-radius(3px);
    text-shadow: 0 1px 0 #fff;
    .clearfix();
  }
  .profile-information {
    margin-left: 10px;
  }
  .top-channels-region {
    margin-right: 10px;
  }
}


.mw-echo-ui-paginationWidget {
	display: table;

	&-row {
		display: table-row;
	}

	&-label,
	&-start,
	&-direction {
		display: table-cell;
		vertical-align: middle;
	}

	&-label {
		padding: 0 0.5em;
		white-space: nowrap;
	}
}

Fix navigation controls wrapping on Notifications page

.mw-echo-ui-paginationWidget {
	display: table;

	&-row {
		display: table-row;
	}

	&-label,
	&-start,
	&-direction {
		display: table-cell;
		vertical-align: middle;
	}

	&-direction {
		white-space: nowrap;
	}

	&-label {
		padding: 0 0.5em;
		white-space: nowrap;
	}
}


/*****************************************************************************/
/* PagesShow: Style */
/*****************************************************************************/
.hover-paragraph {
  position: relative;
}

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

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

  .edit-paragraph-action {
    display: block;
  }
}

.edit-paragraph-action {
  position: absolute;
  right: 0px;
  top: 0px;
  display: none;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgba(225, 225, 225, .8);
  padding-left: 7px;
  padding-right: 7px;
}


.v1-badge {
	&:extend(.label);
	&:extend(.label-default);
	vertical-align: 11%;
	padding: 2px 3px 1px;
	margin: 0 6px;
	&:before {
		content: "V1";
	}
}

Adjust vertical padding on V1 badge

.v1-badge {
	&:extend(.label);
	&:extend(.label-default);
	vertical-align: 11%;
	padding: 1px 3px;
	margin: 0 6px;
	&:before {
		content: "V1";
	}
}


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

.profile-achievements {
  &__percentage {
    float: right;
  }

  &__list {
    text-align: center;
  }
}

Fix aligments in recent achievements

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

.profile-achievements {
  &__percentage {
    display: block;
    text-align: right;
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}


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

.home-welcome-page {
  background-color: #333;
  color: #777;
  height: 100%;
  text-align: center;
  position: relative;

  .content-container {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  h2 {
    color: #777;
  }

  img {
    opacity: 0.2;
    width: 200px;
  }

  a {
    opacity: 0.8;
  }
}

Change welcome page bg color.

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

.home-welcome-page {
  background-color: #222;
  color: #777;
  height: 100%;
  text-align: center;
  position: relative;

  .content-container {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  h2 {
    color: #777;
  }

  img {
    opacity: 0.2;
    width: 200px;
  }

  a {
    opacity: 0.8;
  }
}


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

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

// Base styles
// --------------------------------------------------
// Independent of design (shared definitions).
// base.less is meant to be used for different themes for one customer.
@import "base.less";

// Corporate Design
// --------------------------------------------------
@import "customerName.less";

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

Add »divider« comment which remains in compiled CSS

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

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

/**
 * --------------------------------------------------
 * Here begins our own CSS in the rendered CSS file.
 */

// Base styles
// --------------------------------------------------
// Independent of design (shared definitions).
// base.less is meant to be used for different themes for one customer.
@import "base.less";

// Corporate Design
// --------------------------------------------------
@import "customerName.less";

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


/* Modalbox
---------------------------------------------------------------------------------- */

.source_modal_box {
    background: #fff;
    }

    .source_modal_title {
        font-size: 22px;
        margin: 20px 0 5px 0;
        }

    .source_modal_close {
        position: absolute;
        top: 10px;
        right: 10px;

        color: #fff;
        border-radius: 30px;
        background: #605F61;
        font-size: 20px;
        display: inline-block;
        line-height: 0px;
        padding: 9px 3px;
        cursor: pointer;
        }

        .source_modal_close:before {
            content: "×";
            }

/* /Modalbox
---------------------------------------------------------------------------------- */

Fix close button in search window.

/* Modalbox
---------------------------------------------------------------------------------- */

.source_modal_box {
    background: #fff;
    }

    .source_modal_title {
        font-size: 22px;
        margin: 20px 0 5px 0;
        }

    .source_modal_close {
        position: absolute;
        top: 10px;
        right: 10px;

        color: #fff;
        border-radius: 30px;
        background: #605F61;
        font-size: 20px !important;
        display: inline-block;
        line-height: 0px !important;
        padding: 9px 3px;
        cursor: pointer;
        }

        .source_modal_close:before {
            content: "×";
            }

/* /Modalbox
---------------------------------------------------------------------------------- */


.mw-echo-ui-notificationOptionWidget {
	#p-personal & a,
	#p-personal & a.new {
		// In modern, the hover color is white, which is unhelpful.
		color: #666666;
		text-decoration: none;
	}
}

// Override personal tools padding for links
#p-personal li .mw-echo-state a {
	padding: 0 0 0 0;
}

Make the footer links readable in Modern

.mw-echo-ui-notificationOptionWidget {
	#p-personal & a,
	#p-personal & a.new {
		// In modern, the hover color is white, which is unhelpful.
		color: #666666;
		text-decoration: none;
	}

}

#p-personal .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a {
	color: #666666;
}

// Override personal tools padding for links
#p-personal li .mw-echo-state a {
	padding: 0 0 0 0;
}


@import "./colors";

@io-panel-height: 250px;

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

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

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

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

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

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

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}

Allow for a smaller min width

@import "./colors";

@io-panel-height: 250px;

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

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

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

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

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

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

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}


component {

  .formNav {
    margin: 15px 0;

    .step {
      display: inline-block;

      .stepTransition {
        display: inline-block;
        width: 100px;
        background: #ccc;
        height: 3px;
        position: relative;
        top: -5px
      }

      .stepPoint {
        border: solid 3px #ccc;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background: #ccc;
        color: #eee;
        font-size: 18px;
      }

      &.active {

        .stepTransition {
          background: #0D3D65;
        }

        .stepPoint {
          border-color: #0D3D65;
          background: #0D3D65;
          color: #fff;
        }
      }

      &.current {
        .stepPoint {
          border-color: #0D3D65;
          background: #fff;
          color: #000;
        }
      }
    }

    .formNavTitle {
      font-size: 26px;
      margin-bottom: 15px;
    }
  }
}

Clean up styles for phone support of Create page. Mostly just be ok looking for people poking around.

component {

  .formNav {
    margin: 15px 0;

    .step {
      display: inline-block;

      .stepTransition {
        display: inline-block;
        width: 100px;
        background: #ccc;
        height: 3px;
        position: relative;
        top: -5px
      }

      .stepPoint {
        border: solid 3px #ccc;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background: #ccc;
        color: #eee;
        font-size: 18px;
      }

      &.active {

        .stepTransition {
          background: #0D3D65;
        }

        .stepPoint {
          border-color: #0D3D65;
          background: #0D3D65;
          color: #fff;
        }
      }

      &.current {
        .stepPoint {
          border-color: #0D3D65;
          background: #fff;
          color: #000;
        }
      }
    }

    .formNavTitle {
      font-size: 26px;
      margin-bottom: 15px;
    }
  }
}

@media (max-width: 600px) {
  component {
    .formNav {
      .step {
        .stepTransition {
          width: 10px;
        }
      }
    }
  }
}


.navbar {
    margin-bottom: 0;
}

// .container {
//     max-width:1170px;
// }

#footer {
    background-color: #f3f3f3;
    height: 40px;
    padding-top: 20px;
    .container {
    }
}

#login_form {
    #div_id_login, #div_id_password {
        width: 80%;
        margin: 0 auto;

        #id_login, #id_password {
            width: 100%;
        }
    }
    #div_id_remember {
        width: 75%;
        margin: 0 auto;
    }
    #login_buttons {
        width: 200px;
        margin: 0 auto;
    }
}

.socialaccount_ballot {
    li {
        text-align: center;
    }
}

Fix up greta's path breadcrumb

.navbar {
    margin-bottom: 0;
}

#path-breadcrumb {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer {
    background-color: #f3f3f3;
    height: 40px;
    padding-top: 20px;
    .container {
    }
}

#login_form {
    #div_id_login, #div_id_password {
        width: 80%;
        margin: 0 auto;

        #id_login, #id_password {
            width: 100%;
        }
    }
    #div_id_remember {
        width: 75%;
        margin: 0 auto;
    }
    #login_buttons {
        width: 200px;
        margin: 0 auto;
    }
}

.socialaccount_ballot {
    li {
        text-align: center;
    }
}


// Grid System
// ----------------------------------------------------------------------------/
.grid(@columns; @prefix; @index: 1;) when (@index =< @columns) {
    .@{prefix}@{index} {
        grid-column: span @index;
    }

    .grid(@columns, @prefix, (@index + 1));
}

.grid-responsive(@columns; @prefix; @index: 1;) when (@index =< @columns) {
    .@{prefix}@{grid-column-class}@{index} {
        grid-column: span @index;
    }

    .grid-responsive(@columns, @prefix, (@index + 1));
}

.grid-child(@columns; @prefix;) when (1 =< @columns) {
    .@{prefix}@{grid-column-class}@{index} {
        grid-column: span @index;
    }

    .grid-child((@columns - 1), @prefix);
}

Switch comma to semicolon on mixins

// Grid System
// ----------------------------------------------------------------------------/
.grid(@columns; @prefix; @index: 1;) when (@index =< @columns) {
    .@{prefix}@{index} {
        grid-column: span @index;
    }

    .grid(@columns; @prefix; (@index + 1));
}

.grid-responsive(@columns; @prefix; @index: 1;) when (@index =< @columns) {
    .@{prefix}@{grid-column-class}@{index} {
        grid-column: span @index;
    }

    .grid-responsive(@columns; @prefix; (@index + 1));
}

.grid-child(@columns; @prefix;) when (1 =< @columns) {
    .@{prefix}@{grid-column-class}@{index} {
        grid-column: span @index;
    }

    .grid-child((@columns - 1); @prefix);
}


// Teaser ------------------------------------------------------------------

// Full width wrapper
#features {
  position: relative;
  z-index: 1;
  background: url("@{imgPath}/outer/bg_pattern.png");

  // Header
  & > header {
    .container;
    padding: 10px 0;
    text-shadow: 0 1px 0 rgba(255,255,255,1);

    h2 {
      font-size: 42px;
      text-align: center;
      color: @blueDarker;
    }

    p {

    }
  } // /Header

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

// Sections
.tour {
  width: 300px;
  min-height: 220px;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  position: relative;
  zoom: 1;
  *display: inline;
  _height: 220px;

  i {
    position: absolute;
    font-size: 35px;
    top: -4px;
    left: -25px;
    color: #2F5F9E;
    z-index: 1;
  }

  // Tour text
  figcaption {
    padding-left: 20px;
    position: relative;
    z-index: 10;

    h2 {
      color: @blueDark;
      margin: 0;
    }

    p {
      line-height: 22px;
    }

  } // /Tour text
} // /Tour

Change block height Use DRY variable

// Teaser ------------------------------------------------------------------

// Full width wrapper
#features {
  position: relative;
  z-index: 1;
  background: url("@{imgPath}/outer/bg_pattern.png");

  // Header
  & > header {
    .container;
    padding: 10px 0;
    text-shadow: 0 1px 0 rgba(255,255,255,1);

    h2 {
      font-size: 42px;
      text-align: center;
      color: @blueDarker;
    }

    p {

    }
  } // /Header

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

// Sections
.tour {
  @ib-height: 160px;

  width: 300px;
  min-height: @ib-height;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  position: relative;
  zoom: 1;
  *display: inline;
  _height: @ib-height;

  i {
    position: absolute;
    font-size: 35px;
    top: -4px;
    left: -25px;
    color: #2F5F9E;
    z-index: 1;
  }

  // Tour text
  figcaption {
    padding-left: 20px;
    position: relative;
    z-index: 10;

    h2 {
      color: @blueDark;
      margin: 0;
    }

    p {
      line-height: 22px;
    }

  } // /Tour text
} // /Tour


@import '../echo.variables';
@import '../echo.variables.monobook';

#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
	text-transform: none;
	font-weight: normal;
	&, .oo-ui-popupWidget a {
		color: #333;
	}
	// Badge
	> .oo-ui-buttonElement-button {
		&:hover {
			.oo-ui-labelElement-label {
				color: black !important;
			}
		}
	}

	// Footer
	.oo-ui-popupWidget-footer {
		// Override text-align that monobook uses for #p-personal li
		text-align: left;
	}

}

Make footer notice link blue in Monobook

@import '../echo.variables';
@import '../echo.variables.monobook';

#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
	text-transform: none;
	font-weight: normal;
	&, .oo-ui-popupWidget a.oo-ui-buttonElement-button {
		color: #333;
	}
	// Badge
	> .oo-ui-buttonElement-button {
		&:hover {
			.oo-ui-labelElement-label {
				color: black !important;
			}
		}
	}

	// Footer
	.oo-ui-popupWidget-footer {
		// Override text-align that monobook uses for #p-personal li
		text-align: left;
	}

}


//**
// Mixins
//**

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

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

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

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

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

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

Fix formatting and remove strange characters.

//**
// Mixins
//**
@import 'variables';

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

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

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

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

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

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


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

.factlink-modal {

    .learn-more {
        padding: 15px;
        background: #f5f5f5;

        .learn-more-btn-sign-in {
            margin-right: 5px;
        }

        .learn-more-btn-learn-more {
            margin-left: 5px;
            margin-right: 5px;
        }
    }

    .learn-more-bottom {
        // 14px at the top to fall just over the border when "unsure" is selected
        margin: 14px -15px -15px -15px;
        border-top: 1px solid @baseBorderColor;
        .border-bottom-radius(5px);
    }

    .learn-more-popup {
        position: absolute;
        top: -80px;

        // stole this from factlink_modal.css.less
        left: 0;

        width: 560px;

        border: 1px solid #a6a6a6;
        .border-radius(5px);
        .background-clip(padding-box);

        .box-shadow(0 0 0 5px rgba(0, 0, 0, .15));
    }
}

Set tab size to 2 (@janpaul123)


.squatch-container-embed,
.squatch-container-demo_embed {
  .squatch-header-close,
  .squatch-actions,
  [data-close-panel] {
    display: none;
  }

  // Show `No Referrals Yet...` when no referrals in embed mode
  .squatch-actions[data-referrals="0"][data-referrals="0"] {
    display: block;
  }
}

// Styling for portal
.squatch-container-demo_embed {
  border-radius: 4px;
  border: 1px solid @gray-light;
  box-sizing: content-box;
}

Add white background to embed mode

.squatch-container-embed,
.squatch-container-demo_embed {
  .squatch-header-close,
  .squatch-actions,
  [data-close-panel] {
    display: none;
  }

  background-color: @white;

  // Show `No Referrals Yet...` when no referrals in embed mode
  .squatch-actions[data-referrals="0"][data-referrals="0"] {
    display: block;
  }
}

// Styling for portal
.squatch-container-demo_embed {
  border-radius: 4px;
  border: 1px solid @gray-light;
  box-sizing: content-box;
}


.visible-when-chrome,
.visible-when-firefox,
.visible-when-unsupported-browser { display: none; }

html {
  &.chrome              { .visible-when-chrome              { display: block; } }
  &.firefox             { .visible-when-firefox             { display: block; } }
  &.unsupported-browser { .visible-when-unsupported-browser { display: block; } }
}

html.chrome {
  .should-install-chrome-extension { display: none; }

  &.chrome_extension_installed {
    .chrome-extension-installed {
      display: inline;
    }
  }
  &.chrome_extension_not_installed {
    .should-install-chrome-extension {
      display: inline;
    }
  }
}

html.firefox {
  .should-install-firefox-extension { display: none; }
}

Add correct behaviour for .should-install-firefox-extension

.visible-when-chrome,
.visible-when-firefox,
.visible-when-unsupported-browser { display: none; }

html {
  &.chrome              { .visible-when-chrome              { display: block; } }
  &.firefox             { .visible-when-firefox             { display: block; } }
  &.unsupported-browser { .visible-when-unsupported-browser { display: block; } }
}

html.chrome {
  .should-install-chrome-extension { display: none; }

  &.chrome_extension_installed {
    .chrome-extension-installed {
      display: inline;
    }
  }
  &.chrome_extension_not_installed {
    .should-install-chrome-extension {
      display: inline;
    }
  }
}

html.firefox {
  .should-install-firefox-extension { display: inline; }

  &.firefox_extension_installed {
    .should-install-firefox-extension { display: none; }
  }
}


.learning-guide {

  .guide-heading {
    .row();
  }

  @media (min-width: @screen-lg-min) {
    .info { .pull-right(); }
  }

  @media (max-width: @screen-lg-min) {
    .info {
      clear: left;
      .guide-group-key { margin-top: 1rem; }
    }
  }

  .chapter-panel {
    .row();
    // use flex display unless the columns should collapse
    // this allows the height of the colums to match so the
    // border will extend the complete height
    @media (min-width: @screen-md-min) {
      .flex-display();
    }

    .chapter-heading {
      .make-xs-column(12);
      .make-md-column(4);
      .make-lg-column(3);

      @media (max-width: @screen-md-min) {
        border-right: 0px;
      }
    }
    .sections {
      .make-xs-column(12);
      .make-md-column(8);
      .make-lg-column(9);

      .section {
        .make-xs-column(12);
        .make-sm-column(6);
        .make-lg-column(4);
      }
    }
  }

}

Add a border onto the bottom of the chapter

.learning-guide {

  .guide-heading {
    .row();
  }

  @media (min-width: @screen-lg-min) {
    .info { .pull-right(); }
  }

  @media (max-width: @screen-lg-min) {
    .info {
      clear: left;
      .guide-group-key { margin-top: 1rem; }
    }
    .weaker .explanation p {
      display: inline;
      & + p { margin-left: 1rem; }
    }
  }

  .chapter-panel {
    .row();
    // use flex display unless the columns should collapse
    // this allows the height of the colums to match so the
    // border will extend the complete height
    @media (min-width: @screen-md-min) {
      .flex-display();
    }

    .chapter-heading {
      .make-xs-column(12);
      .make-md-column(4);
      .make-lg-column(3);

      @media (max-width: @screen-md-min) {
        border-right: 0px;
        border-bottom: 1px solid @tutor-neutral-light;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
      }
    }
    .sections {
      .make-xs-column(12);
      .make-md-column(8);
      .make-lg-column(9);

      .section {
        .make-xs-column(12);
        .make-sm-column(6);
        .make-lg-column(4);
      }
    }
  }

}


/*
*   main.<% if (cssOption === 'LESS') { %>less<% } else if (cssOption === 'SCSS') { %>scss<% } %>
*   Import all desired LESS files here
*/

// Base (variables, mixins, etc)<% if (useBorderBox) { %>
@import 'base/_box-sizing';<% } %><% if (ieSupport) { %>
@import 'base/_ie8';<% } %>
@import 'base/_mixins';
@import 'base/_reset';
@import 'base/_variables';<% if (!ieSupport && !useBootstrap) { %>
@import 'base/_print';<% } %>

// Third-Party (Vendor)
<% if (!useBootstrap) { %>
@import 'vendor/_normalize';<% } %><% if (cssOption === 'SCSS') { %>
<% if (useBootstrap) { %>@import 'vendor/_bootstrap';
<% } %><% if (useBourbon) { %>@import 'vendor/_bourbon';<% } %><% } else { %>
<% if (useBootstrap) { %>@import 'vendor/_bootstrap';
<% } %><% if (useLesshat) { %>@import 'vendor/_lesshat';<% } %><% } %><% if (useFontAwesome) { %>
@import 'vendor/_font-awesome';<% } %>

// Partials
@import 'partials/_header';
@import 'partials/_footer';

Prepare style template for write/rewrite enhancement

/*
*   main.<% if (cssOption === 'LESS') { %>less<% } else if (cssOption === 'SCSS') { %>scss<% } %>
*   Import all desired LESS files here
*/

// Base (variables, mixins, etc)<% if (useBorderBox) { %>
@import 'base/_box-sizing';<% } %><% if (ieSupport) { %>
@import 'base/_ie8';<% } %>
@import 'base/_mixins';
@import 'base/_reset';
@import 'base/_variables';<% if (!ieSupport && !useBootstrap) { %>
@import 'base/_print';<% } %>
// end base build

// Third-Party (Vendor)
<% if (!useBootstrap) { %>
@import 'vendor/_normalize';<% } %><% if (cssOption === 'SCSS') { %>
<% if (useBootstrap) { %>@import 'vendor/_bootstrap';
<% } %><% if (useBourbon) { %>@import 'vendor/_bourbon';<% } %><% } else { %>
<% if (useBootstrap) { %>@import 'vendor/_bootstrap';
<% } %><% if (useLesshat) { %>@import 'vendor/_lesshat';<% } %><% } %><% if (useFontAwesome) { %>
@import 'vendor/_font-awesome';<% } %>
// end vendor build

// Partials
@import 'partials/_header';
@import 'partials/_footer';
// end partial build


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

* {
  box-sizing: border-box;
}

html,body{
  font-family: @font-family;
  background: @gray-darkerr;
  overflow-x: hidden;
}

.tabs{
  width: 100%;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid @gray-darker;
}

.tabs-wrapper{
  text-align: center;
  margin-left:auto;
}

.tabs button{
  height: 10px;
  background: none;
  outline: none;
  border:none;
  > svg{fill: @gray-lighterr;}
  &.hidden {
    display: inline;
    > svg{fill: @gray-darker;}
  }
}
#app {
  margin: 0 auto;
  width: 60%;
}

Remove width to fit for more nodes into row

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

* {
  box-sizing: border-box;
}

html,body{
  font-family: @font-family;
  background: @gray-darkerr;
  overflow-x: hidden;
}

.tabs{
  width: 100%;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid @gray-darker;
}

.tabs-wrapper{
  text-align: center;
  margin-left:auto;
}

.tabs button{
  height: 10px;
  background: none;
  outline: none;
  border:none;
  > svg{fill: @gray-lighterr;}
  &.hidden {
    display: inline;
    > svg{fill: @gray-darker;}
  }
}
#app {
  margin: 0 auto;
}


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

.beatmapset-discussion-message {
  @_top: beatmapset-discussion-message;
  display: inline;
  color: white;

  // TODO: remove once default link style becomes... default
  a {
    .link-default();
  }

  // extra specificity here to override the above rule
  & > &__timestamp {
    .link-plain();

    border-radius: @border-radius-large;
    padding: 1px 5px;
    background-color: @osu-colour-b6;
    font-weight: 600;
    font-size: 85%;
    color: @osu-colour-f1;

    .link-hover({
      background-color: @osu-colour-b5;
      color: @osu-colour-l1;
    });
  }
}

Fix styling on timestamps nested under bold/italic/etc tags

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

.beatmapset-discussion-message {
  @_top: beatmapset-discussion-message;
  display: inline;
  color: white;

  &__timestamp {
    .link-plain();

    border-radius: @border-radius-large;
    padding: 1px 5px;
    background-color: @osu-colour-b6;
    font-weight: 600;
    font-size: 85%;
    color: @osu-colour-f1;

    .link-hover({
      background-color: @osu-colour-b5;
      color: @osu-colour-l1;
    });
  }
}


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

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

#container {

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

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

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

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

    z-index: 101;
    position: relative;

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

Add fixed position for help text in tour

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

.help-text-container  {
  position: fixed;
  top: 70px;

  > div {
    display: none;
    position: absolute;
    width: 198px;
    z-index: @max-z-index;
    h4 { padding-bottom: 6px; }
  }
}

#container {

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

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

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

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

    z-index: 101;
    position: relative;

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


@import "mixins/mixins";

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

  span.help-inline.avatar {
    vertical-align:top;
    color: @metaFontColor;
    width: 290px;
  }

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

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

    a img {
      width: 16px;
      height: 16px;
      margin-top: -4px;
      margin-right: 5px;
    }
  }

  .help-inline {
    display: inline-block;
    padding-left: 5px;
  }

  .disabled-email {
    cursor: not-allowed;
    background-color: @inputDisabledBackground;
  }

  .edit-user-delete-container {
    border-top: 1px solid @mutedBorderColor;
    padding-top: 20px;
  }

  .edit-user-delete-link {
    float: right;
    color: @buttonDangerBackground;

    &:hover {
      color: darken(@buttonDangerBackground, 5);
    }
  }
}

.notification-settings {
  margin-top: 20px;
}

.user-edit-username {
  width: 202px;
}

#delete-form:not(:target) {
  display: none;
}

Fix margin on settingd page

@import "mixins/mixins";

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

  span.help-inline.avatar {
    vertical-align:top;
    color: @metaFontColor;
    width: 290px;
  }

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

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

    a img {
      width: 16px;
      height: 16px;
      margin-top: -4px;
      margin-right: 5px;
    }
  }

  .help-inline {
    display: inline-block;
    padding-left: 5px;
  }

  .disabled-email {
    cursor: not-allowed;
    background-color: @inputDisabledBackground;
  }

  .edit-user-delete-container {
    border-top: 1px solid @mutedBorderColor;
    padding-top: 20px;
  }

  .edit-user-delete-link {
    float: right;
    color: @buttonDangerBackground;

    &:hover {
      color: darken(@buttonDangerBackground, 5);
    }
  }
}

.notification-settings {
  margin-top: 20px;
}

.user-edit-username {
  width: 202px;
}

.edit-user-form {
  margin-bottom: 20px;
}

#delete-form:not(:target) {
  display: none;
}


a.external:after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75em;
  line-height: initial;
  display: inline-block;
  text-decoration: none;
  padding-left: 2px;
  position: relative;
  top: -0.5em;
}

Set line-height in external link

a.external:after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75em;
  line-height: 0;
  display: inline-block;
  text-decoration: none;
  padding-left: 2px;
  position: relative;
  top: -0.5em;
}


/*
 * These styles are applied to the editor.
 */

@line-height: 18px;
@line-color: #eaeeee;

.richTextEditor {
    border: 0;
    margin: 0;
    padding: 0px 7px;

    font-family: Ubuntu;
    outline: none;
    resize: none;

    font-size: 14px;
    line-height: @line-height;
    background-color: white;

    background-image:
        linear-gradient(180deg,
                        transparent,
                        transparent (@line-height - 2),
                        @line-color (@line-height - 2),
                        @line-color (@line-height - 1),
                        transparent (@line-height - 1),
                        transparent);
    background-size: 100% @line-height;

    h1 {
        position: relative;
        margin: @line-height 0;
        font: 20px/@line-height @font-family-serif;
        color: @dyanote-green;
    }

    h1:first-child, ul:first-child {
        margin-top: 0;
    }

    ul {
        margin: 0 0 @line-height 0;
    }

    a {
        cursor: pointer;
        color: @dyanote-blue;
        text-decoration: underline;
    }

    em, i {
        // For some reasons italic makes lines bigger.
        line-height: @line-height - 1px;
    }
}

Fix style of overflowing note

/*
 * These styles are applied to the editor.
 */

@line-height: 18px;
@line-color: #eaeeee;

.richTextEditor {
    border: 0;
    margin: 0;
    padding: 0px 7px;

    font-family: Ubuntu;
    outline: none;
    resize: none;
    overflow: auto;

    font-size: 14px;
    line-height: @line-height;
    background-color: white;

    background-image:
        linear-gradient(180deg,
                        transparent,
                        transparent (@line-height - 2),
                        @line-color (@line-height - 2),
                        @line-color (@line-height - 1),
                        transparent (@line-height - 1),
                        transparent);
    background-size: 100% @line-height;

    h1 {
        position: relative;
        margin: @line-height 0;
        font: 20px/@line-height @font-family-serif;
        color: @dyanote-green;
    }

    h1:first-child, ul:first-child {
        margin-top: 0;
    }

    ul {
        margin: 0 0 @line-height 0;
    }

    a {
        cursor: pointer;
        color: @dyanote-blue;
        text-decoration: underline;
    }

    em, i {
        // For some reasons italic makes lines bigger.
        line-height: @line-height - 1px;
    }
}


/*
* grids.less
*
*/

@headerHeight: 75px;

// our grid is 26 columns - total 1155px
@gridColumns: 26;
@gridColumnWidth: 30px;
@gridGutterWidth: 15px;

// main is our main content area underneath the header
@mainWidth: 1155px;
@mainMinHeight: 581px;
@mainVerticalPadding: 60px;
@mainMargin: 18px;

// content is our main content area where most data for the current page is displayed
@pageTitleWidth: @gridGutterWidth * 65;
@contentBackground: @white;
@lineRuleBackground: @gray3;

Revert back background color for now

/*
* grids.less
*
*/

@headerHeight: 75px;

// our grid is 26 columns - total 1155px
@gridColumns: 26;
@gridColumnWidth: 30px;
@gridGutterWidth: 15px;

// main is our main content area underneath the header
@mainWidth: 1155px;
@mainMinHeight: 581px;
@mainVerticalPadding: 60px;
@mainMargin: 18px;

// content is our main content area where most data for the current page is displayed
@pageTitleWidth: @gridGutterWidth * 65;
@contentBackground: @gray1;
@lineRuleBackground: @gray3;


.Main {

  @media @xs {
    padding: 0 2em 2em;
    font-size: @ratio-Scale--05;
  }

  @media @md {
    font-size: @ratio-Scale--10;
  }

  h1 {
    font-size: @ratio-Scale--30;
  }

  h2 {
    font-size: @ratio-Scale--20;
  }

  h3 {
    font-size: @ratio-Scale--10;
    line-height: @ratio-Scale--15;
  }

  p,
  ul {
    font-size: @ratio-Scale--10;
    line-height: @ratio-Scale--15;
    margin-top: 0;
  }

  h1,
  h2,
  h3 {
    margin: 1.5em 0 0;

    @media @xs {
      margin-top: 2em;
    }

    @media @md {
      margin-top: 3em;
    }

    > a {
      text-decoration: underline;

      &,
      &:visited {
        color: @color-Text;
      }
    }

    + p,
    + ul {
      margin-top: 1em;
    }
  }

  h1 + h2,
  h2 + h3 {
    margin-top: 1em;

    @media @xs {
      margin-top: 2em;
    }
  }

  time {
    white-space: nowrap;
  }
}

Reduce unordered list left indent.

.Main {

  @media @xs {
    padding: 0 2em 2em;
    font-size: @ratio-Scale--05;
  }

  @media @md {
    font-size: @ratio-Scale--10;
  }

  h1 {
    font-size: @ratio-Scale--30;
  }

  h2 {
    font-size: @ratio-Scale--20;
  }

  h3 {
    font-size: @ratio-Scale--10;
    line-height: @ratio-Scale--15;
  }

  p,
  ul {
    font-size: @ratio-Scale--10;
    line-height: @ratio-Scale--15;
    margin-top: 0;
  }

  ul {
    padding-left: 1em;
  }

  h1,
  h2,
  h3 {
    margin: 1.5em 0 0;

    @media @xs {
      margin-top: 2em;
    }

    @media @md {
      margin-top: 3em;
    }

    > a {
      text-decoration: underline;

      &,
      &:visited {
        color: @color-Text;
      }
    }

    + p,
    + ul {
      margin-top: 1em;
    }
  }

  h1 + h2,
  h2 + h3 {
    margin-top: 1em;

    @media @xs {
      margin-top: 2em;
    }
  }

  time {
    white-space: nowrap;
  }
}


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

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

@header-letter-spacing: 2px;

@line-height: 1.35;

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

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

Make font size more accessible

@fallback-font-size: 100%;
@scaling-font-size: ~"max(100%, 0.8rem + 0.5vw + 0.5vh)";

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

@header-letter-spacing: 2px;

@line-height: 1.35;

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

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


@import "../../wwwroot/lib/bootstrap/less/bootstrap.less";
@import "variables.less";
@import "bootswatch.less";
@import "../../wwwroot/lib/bootstrap/less/utilities.less";

Fix lint warnings for less

@import '../../wwwroot/lib/bootstrap/less/bootstrap';
@import 'variables';
@import 'bootswatch';
@import '../../wwwroot/lib/bootstrap/less/utilities';


.ui.black.launch.right.attached.fixed.button {
  top  : 0px;
  left : -2px;
  width: 44px;
  z-index: 9999;
  position: fixed;
}

Move menu button a little to the bottom

.ui.black.launch.right.attached.fixed.button {
  top  : 3em;
  left : -2px;
  width: 44px;
  z-index: 9999;
  position: fixed;
}


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

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

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

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

Fix tree root font being larger than it used to be

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

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

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

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


@green: #00FF00;
@grey: #AAAAAA;
@red: #FF0000;

@smallest: 16px;
@smaller: 24px;
@small: 32px;
@big: 40px;
@bigger: 48px;
@biggest: 64px;

#word-cloud {
  margin: 0 auto;
  padding: 2em 0;
  font: 100% Arial, sans-serif;
}

dd.positive {
  color: @green;
}

dd.neutral {
  color: @grey;
}

dd.negative {
  color: @red;
}

#word-cloud span {
  margin: 0 5px;
}

#word-cloud span.sentiment-positive {
  color: @green;
}

#word-cloud span.sentiment-neutral {
  color: @grey;
}

#word-cloud span.sentiment-negative {
  color: @red;
}

#word-cloud .word-1 {
  font-size: @smallest;
}

#word-cloud .word-2 {
  font-size: @smaller;
}

#word-cloud .word-3 {
  font-size: @small;
}

#word-cloud .word-4 {
  font-size: @big;
}

#word-cloud .word-5 {
  font-size: @bigger;
}

#word-cloud .word-6 {
  font-size: @biggest;
}

Change font sizes in word cloud.

@green: #00FF00;
@grey: #AAAAAA;
@red: #FF0000;

@smallest: 12px;
@smaller: 26px;
@small: 36px;
@big: 48px;
@bigger: 64px;
@biggest: 80px;

#word-cloud {
  margin: 0 auto;
  padding: 2em 0;
  font: 100% Arial, sans-serif;
}

dd.positive {
  color: @green;
}

dd.neutral {
  color: @grey;
}

dd.negative {
  color: @red;
}

#word-cloud span {
  margin: 0 5px;
}

#word-cloud span.sentiment-positive {
  color: @green;
}

#word-cloud span.sentiment-neutral {
  color: @grey;
}

#word-cloud span.sentiment-negative {
  color: @red;
}

#word-cloud .word-1 {
  font-size: @smallest;
}

#word-cloud .word-2 {
  font-size: @smaller;
}

#word-cloud .word-3 {
  font-size: @small;
}

#word-cloud .word-4 {
  font-size: @big;
}

#word-cloud .word-5 {
  font-size: @bigger;
}

#word-cloud .word-6 {
  font-size: @biggest;
}


@import (reference) '../../../assets/stylesheets/shared/osio.less';
.spaces-page {
  position: relative;
  margin-top: 20px;
  >main {
    .user-attributes {
      list-style: none;
      text-align: center;
      img {
        height: 250px;
        max-width: 100%;
      }
    }
    >section {
      position: relative;
      align-items: stretch;
      height: 100vh;
      .row {
        margin-right: 0;
        margin-left: 0;
      }
      .contents {
        overflow: auto;
        align-items: stretch;
      }
    }
  }
}
.spaces-list-page {
  padding-top: 20px;
  .spaces-list-wrap {
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 0;
    .space-item {
      border-top: 1px solid;
      border-top-color: @color-pf-black-300;
    }
  }
}

Fix space display height to reactivate infinite scrolling

@import (reference) '../../../assets/stylesheets/shared/osio.less';
.spaces-page {
  position: relative;
  margin-top: 20px;
  >main {
    .user-attributes {
      list-style: none;
      text-align: center;
      img {
        height: 250px;
        max-width: 100%;
      }
    }
    >section {
      position: relative;
      align-items: stretch;
      height: 100vh;
      .row {
        margin-right: 0;
        margin-left: 0;
      }
      .contents {
        overflow: auto;
        align-items: stretch;
      }
    }
  }
}
.spaces-list-page {
  padding-top: 20px;
  .spaces-list-wrap {
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 0;

    @media (min-width: @screen-lg-min) { height: 600px; }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { height: 600px; }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 600px; }
    @media (max-width: @screen-xs-min) { height: 500px; }

    .space-item {
      border-top: 1px solid;
      border-top-color: @color-pf-black-300;
    }
  }
}


/* Fonts */

@fontFamily: 'Lato', sans-serif;

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic);

@font-face {
  font-family: 'Roadgeek';
  src: url(/fonts/roadgeek-2005-engschrift.otf);
}

body,
button,
a.button-like,
input,
select,
textarea,
option {
  font-family: @fontFamily;
}

Load fonts over HTTP or HTTPS

/* Fonts */

@fontFamily: 'Lato', sans-serif;

@import url(//fonts.googleapis.com/css?family=Lato:300,400,700,300italic);

@font-face {
  font-family: 'Roadgeek';
  src: url(/fonts/roadgeek-2005-engschrift.otf);
}

body,
button,
a.button-like,
input,
select,
textarea,
option {
  font-family: @fontFamily;
}


@import "ui-variables";

.git-line-modified {
  color: @text-color-warning;
}

.git-line-added {
  color: @text-color-info;
}

.git-line-removed {
  color: @text-color-error;
}

Use syntax vars. Use border as git diff rather than text color

@import "syntax-variables";

.editor {
  .gutter .line-number {
    &.git-line-modified {
      border-left: 2px solid @syntax-color-modified;
      padding-left: ~"calc(0.5em - 2px)";
    }

    &.git-line-added {
      border-left: 2px solid @syntax-color-added;
      padding-left: ~"calc(0.5em - 2px)";
    }

    &.git-line-removed {
      border-left: 2px solid @syntax-color-removed;
      padding-left: ~"calc(0.5em - 2px)";
    }
  }
}


// If you are developing a project that makes use of Dojo's built-in
// widgets, you will probably want to include the two files below;
// otherwise, you can remove them.
@import url('../../dojo/resources/dojo.css');
@import url('../../dijit/themes/claro/claro.css');

// The following includes the central variables and mixins used for generating
// the Claro theme's CSS resources; it may be useful for custom apps as well.
@import '../../dijit/themes/claro/variables';

Improve dojo.css / claro.css comments

// Import a base stylesheet; if you have your own instead, you can remove this.
@import url('../../dojo/resources/dojo.css');

// Import the Claro theme for skinning Dijit widgets; this can be swapped for
// another theme, or removed if the app doesn't use Dijit.
@import url('../../dijit/themes/claro/claro.css');

// The following includes the central variables and mixins used for generating
// the Claro theme's CSS resources; it may be useful for custom apps as well.
@import '../../dijit/themes/claro/variables';


.no-select() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tutor-background-image(@img) { background-image:url("../resources/images/@{img}"); }

Correct path for tutor-background-image mixin

.no-select() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tutor-background-image(@img) { background-image:url("@{img}"); }


@import "bootstrap.less";
@import "upfluence-oss";
@import "toggle-switch";
@import "input-container";
@import "array-input";
@import "toast";

Add missing power-select style import

@import "bootstrap.less";
@import "upfluence-oss";
@import "toggle-switch";
@import "input-container";
@import "array-input";
@import "power-select";
@import "toast";


.map {
  background-color: #edf7f7;
  border: 3px solid #555;
  height: 400px;
  margin: 0 auto 10px;
  min-width: 320px;
  width: 70%;
}

.leaflet-control {
  &.info, &.legend {
    background: #fff;
    border: 3px solid #555;
    color: #555;
    font-size: 14px;
    padding: 10px;

    ul {
      line-height: 18px;
      margin: 0;

      li {
        padding-bottom: 1px;
      }
    }
  }

  &.info {
    width: 225px;
    min-height: 112px;

    h3 {
      font-weight: bold;
      font-size: 18px;
      margin: 0 0 10px;
      text-align: center;
    }

    ul {
      padding-left: 15px;

      .property-name {
        font-weight: bold;
        text-transform: capitalize;
      }
    }
  }

  &.legend {
    max-height: 335px;
    overflow-y: scroll;

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

      li {

        .color {
          float: left;
          width: 18px;
          height: 18px;
          margin-right: 8px;
          opacity: 0.7;
        }
      }
    }
  }
}

Hide scroll bar when it is unnecessary

.map {
  background-color: #edf7f7;
  border: 3px solid #555;
  height: 400px;
  margin: 0 auto 10px;
  min-width: 320px;
  width: 70%;
}

.leaflet-control {
  &.info, &.legend {
    background: #fff;
    border: 3px solid #555;
    color: #555;
    font-size: 14px;
    padding: 10px;

    ul {
      line-height: 18px;
      margin: 0;

      li {
        padding-bottom: 1px;
      }
    }
  }

  &.info {
    width: 225px;
    min-height: 112px;

    h3 {
      font-weight: bold;
      font-size: 18px;
      margin: 0 0 10px;
      text-align: center;
    }

    ul {
      padding-left: 15px;

      .property-name {
        font-weight: bold;
        text-transform: capitalize;
      }
    }
  }

  &.legend {
    max-height: 335px;
    overflow-y: auto;

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

      li {

        .color {
          float: left;
          width: 18px;
          height: 18px;
          margin-right: 8px;
          opacity: 0.7;
        }
      }
    }
  }
}


// Variables

@brand-primary: #fed136;
@brand-danger: #e74c3c;
@gray-darkest: #222;
@gray: #777;
@gray-lighter: #f7f7f7;
@placeholder-text: #bbbbbb;

Replace branding color with FutuGreen

// Variables

@brand-primary: #349C4A;
@brand-danger: #e74c3c;
@gray-darkest: #222;
@gray: #777;
@gray-lighter: #f7f7f7;
@placeholder-text: #bbbbbb;


@import 'font-awesome/font-awesome.less';
@fa-font-path: '../font/font-awesome';

body, input, select, button {
	font-family: Exo, sans-serif;
	font-weight: 200;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 200;
	src: local('Exo ExtraLight'), local('Exo-ExtraLight'), url(../font/Exo-ExtraLight.woff) format('woff');
}

Drop ?v=... cache busting on Font Awesome URLs (also use more minimal CSS)

body, input, select, button {
	font-family: Exo, sans-serif;
	font-weight: 200;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 200;
	src: local('Exo ExtraLight'), local('Exo-ExtraLight'),
	     url(../font/Exo-ExtraLight.woff) format('woff'),
	     url(../font/Exo-ExtraLight.ttf) format('truetype');
}

@font-face {
	font-family: 'FontAwesome';
	font-weight: normal;
	font-style: normal;
	src: url(../font/font-awesome/fontawesome-webfont.eot);
	src: url(../font/font-awesome/fontawesome-webfont.eot#iefix) format('embedded-opentype'),
	     url(../font/font-awesome/fontawesome-webfont.woff) format('woff'),
	     url(../font/font-awesome/fontawesome-webfont.ttf) format('truetype'),
	     url(../font/font-awesome/fontawesome-webfont.svg#fontawesomeregular) format('svg');
}

@import 'font-awesome/variables';
@import 'font-awesome/mixins';
@import 'font-awesome/core';
//@import 'font-awesome/larger';
//@import 'font-awesome/fixed-width';
//@import 'font-awesome/list';
//@import 'font-awesome/bordered-pulled';
//@import 'font-awesome/spinning';
//@import 'font-awesome/rotated-flipped';
//@import 'font-awesome/stacked';
@import 'font-awesome/icons';


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

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

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

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

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

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

.scroll
{
    overflow: auto;
}

.underline
{
	text-decoration: underline;
}

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

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

Add the flex and position absolute to the mask element

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

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

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

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

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

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

.scroll
{
    overflow: auto;
}

.underline
{
	text-decoration: underline;
}

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

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


.query-builder {
    .group-conditions {
        margin: @padding-small-vertical 0 @padding-small-vertical @padding-large-horizontal;
    }

    input.form-control.condition-value {
        width: unset;
        display: inline-block;
    }

    select.operator,
    select.field,
    select.comparator {
        display: inline-block;
        background-color: #fff;
    }

    select.operator,
    select.field {
        width: 80px;
    }

    select.comparator {
        width: 50px;
    }
}

Add lines to represent structure of query in UI.

.query-builder {
    .group-conditions {
        margin: @padding-small-vertical 0 @padding-small-vertical 30px;
    }

    .rules-list {
        padding: 0 0 0 30px;
        position: relative;

        > * {
            position: relative;

            &::before,
            &::after {
                position: absolute;
                left: -30px;
                width: 30px;
                height: ~"calc(50% + 6px)";
                border: solid @input-border;
                content: "";
            }

            &::before {
                border-width: 0 0 2px 2px;
                top: -6px;
            }

            &::after {
                border-width: 0 0 0 2px;
                top: 50%;
            }

            &:first-child::before {
                height: ~"calc(50% + 8px)";
                top: -6px;
            }

            &:last-child::after {
                display: none;
            }
        }
    }

    .group,
    .condition {
        position: relative;
        margin: @padding-small-vertical 0;
        border: 1px solid @gray-lighter;
        border-radius: @border-radius-small;
        padding: @padding-small-vertical @padding-small-horizontal;
    }

    .condition {
        background-color: #fff;
    }

    input.form-control.condition-value {
        width: unset;
        display: inline-block;
    }

    select.operator,
    select.field,
    select.comparator {
        display: inline-block;
        background-color: #fff;
        width: unset;
    }
}


/* ==========================================================================
   Minima: OffCanvas
   ========================================================================== */

@offcanvas-transition-speed: .2s;

[data-offcanvas-fixed] {
  transition: @offcanvas-transition-speed all;
}

.OffCanvas {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  &.is-open {
    overflow: hidden;

    .OffCanvas-overlay {
      display: block;
    }
  }
}

.OffCanvas-page {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: @offcanvas-transition-speed all;
}

.OffCanvas-panel {
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  transition: @offcanvas-transition-speed all;
  z-index: 20;
}

.OffCanvas-overlay {
  background: rgba(0,0,0,.3);
  bottom: 0;
  cursor: pointer;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

Allow overflow when off-canvas is open and position overlay fixed. Fixes issuere page would jump to the top when off-canvas is closed.

/* ==========================================================================
   Minima: OffCanvas
   ========================================================================== */

@offcanvas-transition-speed: .2s;

[data-offcanvas-fixed] {
  transition: @offcanvas-transition-speed all;
}

.OffCanvas {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  &.is-open {
    .OffCanvas-overlay {
      display: block;
    }
  }
}

.OffCanvas-page {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: @offcanvas-transition-speed all;
}

.OffCanvas-panel {
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  transition: @offcanvas-transition-speed all;
  z-index: 20;
}

.OffCanvas-overlay {
  background: rgba(0,0,0,.3);
  bottom: 0;
  cursor: pointer;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}


.autocomplete-plus {
  ol.list-group {
    li.emoji {
      .label {
        opacity: 0.8;
      }
    }
  }
}

Fix issue that emoji was dimmed

.autocomplete-plus.popover-list ol.list-group li.emoji .label {
  opacity: 0.8;
}


//
// Code (inline and blocK)
// --------------------------------------------------

// Inline and block code styles
code,
kbd,
pre,
samp {
  font-family: @font-family-monospace;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: @code-color;
  background-color: @code-bg;
  white-space: nowrap;
  border-radius: @border-radius-base;
}

// Blocks of code
pre {
  display: block;
  padding: ((@line-height-computed - 1) / 2);
  margin: 0 0 (@line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: @pre-color;
  background-color: @pre-bg;
  border: 1px solid @pre-border-color;
  border-radius: @border-radius-base;

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: @pre-scrollable-max-height;
  overflow-y: scroll;
}

Change upper case to lower case

//
// Code (inline and block)
// --------------------------------------------------

// Inline and block code styles
code,
kbd,
pre,
samp {
  font-family: @font-family-monospace;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: @code-color;
  background-color: @code-bg;
  white-space: nowrap;
  border-radius: @border-radius-base;
}

// Blocks of code
pre {
  display: block;
  padding: ((@line-height-computed - 1) / 2);
  margin: 0 0 (@line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: @pre-color;
  background-color: @pre-bg;
  border: 1px solid @pre-border-color;
  border-radius: @border-radius-base;

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: @pre-scrollable-max-height;
  overflow-y: scroll;
}


body {
  padding-bottom: 40px;
  padding-top: @navbar-height + 20px;
}

#content {
  margin-top: (@grid-gutter-width / 2);
  padding: (@grid-gutter-width / 2);
}

Reduce a bit a whitespace on top.

body {
  padding-bottom: 40px;
  padding-top: @navbar-height;
}

#content {
  margin-top: (@grid-gutter-width / 2);
  padding: (@grid-gutter-width / 2);
}


.enroll-or-login {

  display: flex;

  > div {
    flex: 1;
    padding: 0 10px;
  }

  .login {
    h3 { font-size: 2rem; }
    p {
      font-size: 1.8rem;
      text-align: center;
    }

  }

  .new-registration {
    hr { display: none; }
    border-left: 1px solid @openstax-neutral-light;
    .code-wrapper {
      margin-left: 10%;
      width: 80%;
    }

  }

}

Adjust headers so their size matches

.enroll-or-login {

  display: flex;

  > div {
    flex: 1;
    padding: 0 10px;
  }

  h3 { font-size: 2.4rem; }

  .login {
    p {
      font-size: 1.8rem;
      text-align: center;
    }

  }

  .new-registration {
    hr { display: none; }
    border-left: 1px solid @openstax-neutral-light;
    .code-wrapper {
      margin-left: 10%;
      width: 80%;
    }

  }

}


.text-green {
  color: @green !important;
}

.text-yellow {
  color: @yellow !important;
}

.text-gray {
  color: @gray-light !important;
}

.text-black {
  color: @black !important;
}

Hide 's' when reward unit is 1

.text-green {
  color: @green !important;
}

.text-yellow {
  color: @yellow !important;
}

.text-gray {
  color: @gray-light !important;
}

.text-black {
  color: @black !important;
}

.hidden-1 {
  .hidden;
}


/* @group Colors */

@licon-color: #555;
@licon-bg: transparent;
@licon-bg-hover: #eee;
@licon-bg-active: #ccc;

@licon-border-color: #ddd;

/* @end Colors */

/* @group Sizes */

@licon-size-base: 36px;
@licon-size-small: 24px;
@licon-size-large: 48px;

@licon-line-width-base: 2px;
@licon-line-width-small: 2px;
@licon-line-width-large: 4px;

@licon-border-width-base: 1px;
@licon-border-width-small: @licon-border-width-base;
@licon-border-width-large: @licon-border-width-base;

@licon-border-radius-base: 4px;
@licon-border-radius-small: 2px;
@licon-border-radius-large: 6px;

/* @end Sizes */

Set background color to white

/* @group Colors */

@licon-color: #555;
@licon-bg: #fff;
@licon-bg-hover: #eee;
@licon-bg-active: #ccc;

@licon-border-color: #ddd;

/* @end Colors */

/* @group Sizes */

@licon-size-base: 36px;
@licon-size-small: 24px;
@licon-size-large: 48px;

@licon-line-width-base: 2px;
@licon-line-width-small: 2px;
@licon-line-width-large: 4px;

@licon-border-width-base: 1px;
@licon-border-width-small: @licon-border-width-base;
@licon-border-width-large: @licon-border-width-base;

@licon-border-radius-base: 4px;
@licon-border-radius-small: 2px;
@licon-border-radius-large: 6px;

/* @end Sizes */


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

.ignore-in-parent-frame {

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

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

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

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

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

  pre {
    white-space: normal;
  }

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

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

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

  body.heightDetermined {
    overflow-y: hidden;
  }

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

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

}

Break words to ensure messages wrap, fall back to horizontal scrolling of messages

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

.ignore-in-parent-frame {

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

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

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

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

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

  pre {
    white-space: normal;
  }

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

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

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

  body.heightDetermined {
    overflow-y: hidden;
  }

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

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

}


@pmSingleMargin: 60px;
@pmPanelMargin: 40px;

html.pm-single {
  header nav {
    display: none;
  }

  header {
  }

  #status {
    display: none;
  }
}

.single {
  padding: 20px 0;
  > p, > div, > form, > hr,
  group > p, group > div, group > form, group > hr {
    margin-left: @pmSingleMargin;
    margin-right: @pmSingleMargin;
  }
}

.panel {
  > table td:first-child, > table th:first-child {
    padding-left: @pmPanelMargin;
  }
}

Add styles for panel content when there is a menu.

@pmSingleMargin: 60px;
@pmPanelMargin: 40px;

html.pm-single {
  header nav {
    display: none;
  }

  header {
  }

  #status {
    display: none;
  }
}

.single {
  padding: 20px 0;
  > p, > div, > form, > hr,
  group > p, group > div, group > form, group > hr {
    margin-left: @pmSingleMargin;
    margin-right: @pmSingleMargin;
  }
}

.panel {
  > table td:first-child, > table th:first-child {
    padding-left: @pmPanelMargin;
  }
  > p, > div, > form, > hr,
  group > p, group > div, group > form, group > hr {
    padding-left: @pmPanelMargin;
  }
}


i {
  &.ico {
    .flexy(center, center);
    svg {
      width: @baseFontSize;
      height: @baseFontSize;
      // &.busy-light,
      &.spinner {
        .animation(clockwise 600ms infinite linear);
        .animation-bezier(0.42, 0, 0.58, 1);
        fill: @grayLighter;
      }
      &.repo {
        width: 18px;
        height: auto;
        fill: @grayDark;
        stroke: @grayDark;
      }
      fill: none;
    }
    .ico-logo {
      fill: @blueDark;
    }
    .ico-pass {
      fill: @green;
    }
    .ico-fail {
      fill: @redLight;
    }
    .ico-queued {
      fill: @grayLight;
    }
    .slim_circle {
      stroke-linecap: round;
      stroke-width: 20;
    }
  }
}

Speed up and change timing function of spinner

i {
  &.ico {
    .flexy(center, center);
    svg {
      width: @baseFontSize;
      height: @baseFontSize;
      // &.busy-light,
      &.spinner {
        .animation(clockwise 450ms infinite cubic-bezier(.5,.42,.41,1.7));
        .animation-bezier(0.42, 0, 0.58, 1);
        fill: @grayLighter;
      }
      &.repo {
        width: 18px;
        height: auto;
        fill: @grayDark;
        stroke: @grayDark;
      }
      fill: none;
    }
    .ico-logo {
      fill: @blueDark;
    }
    .ico-pass {
      fill: @green;
    }
    .ico-fail {
      fill: @redLight;
    }
    .ico-queued {
      fill: @grayLight;
    }
    .slim_circle {
      stroke-linecap: round;
      stroke-width: 20;
    }
  }
}


/*
 * UI Buttons / toolbars
 */
.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
  background: @hw-orange;
  border: 1px solid @hw-orange-border;
	color: #fff;//@hw-orange-text;
}

// Make Default buttons orange
//button,
//input[type='submit'],
.patrollink,
input#wpDiff,
input#wpPreview,
input#wpSave {
  margin-right: 10px;
  .hwbutton();
}
// Some buttons are actually gray...
input#wpDiff,
input#wpPreview {
  .hwbutton-secondary();
}

div.patrollink {
  float: right;
  margin: 10px 0 0 10px;
  font-size: 0;
  a {
    display: inline-block;
    padding: 0 10px;
    line-height: 24px;
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
  }
}

Fix styles for edit button

/*
 * UI Buttons / toolbars
 */
.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
  background: @hw-orange;
  border: 1px solid @hw-orange-border;
	color: @hw-orange-text;
  // Sometimes buttons have "more" menu (with white background):
  // don't mess up color of links inside drop menu.
  .mw-more-menu {
    &, a {
      color: #888;
    }
  }
}

// Edit button dropdown tweaks
.mw-main-edit-button {
  .mw-more-icon {
    top: 0;
  }
}

// Give Default buttons HW appearance
// These buttons will appear orange (Dec 2016)
//button,
//input[type='submit'],
.patrollink,
input#wpDiff,
input#wpPreview,
input#wpSave {
  margin-right: 10px;
  .hwbutton();
}
// Some buttons are actually gray...
input#wpDiff,
input#wpPreview {
  .hwbutton-secondary();
}

div.patrollink {
  float: right;
  margin: 10px 0 0 10px;
  font-size: 0;
  a {
    display: inline-block;
    padding: 0 10px;
    line-height: 24px;
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
  }
}


div.dataset-tooltip {
  position: absolute;
  text-align: center;
  padding: 2px 5px 2px 5px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #333333;
  border: 0;
  border-radius: 8px;
  pointer-events: none;
}

div.dataset-tooltip-triangle {
  position: absolute;
  text-align: left;
  padding: 0;
  box-sizing: border-box;
  display: inline;
  font-size: 14px;
  border: 0;
  line-height: 1;
  color: #333333;
  transform: scale(1.7, 1);
  pointer-events: none;
}

#workflowvisualization {

  overflow: hidden;

  .selected-dataset {
    stroke-width: 2;
  }

  .hovering-dataset {
    stroke-width: 2;
  }

  .selected-job {
    stroke-width: 2;
  }

  .hovering-job {
    stroke-width: 2;
  }
}

.node {
  stroke: black;
  stroke-width: 1px;
}

.link {
  stroke: #555;
}

.full-size {
  height: 100%;
  width:  100%;
}

Fix the workflow size in Safari

div.dataset-tooltip {
  position: absolute;
  text-align: center;
  padding: 2px 5px 2px 5px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #333333;
  border: 0;
  border-radius: 8px;
  pointer-events: none;
}

div.dataset-tooltip-triangle {
  position: absolute;
  text-align: left;
  padding: 0;
  box-sizing: border-box;
  display: inline;
  font-size: 14px;
  border: 0;
  line-height: 1;
  color: #333333;
  transform: scale(1.7, 1);
  pointer-events: none;
}

#workflowvisualization {

  overflow: hidden;

  .selected-dataset {
    stroke-width: 2;
  }

  .hovering-dataset {
    stroke-width: 2;
  }

  .selected-job {
    stroke-width: 2;
  }

  .hovering-job {
    stroke-width: 2;
  }
}

.node {
  stroke: black;
  stroke-width: 1px;
}

.link {
  stroke: #555;
}

.full-size {
  height: 100%;
  width:  100%;
}

// otherwise Safari shows too small workflow on the page load
svg {
  position: absolute;
}


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

.search-forum-options {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;

  &__input-group {
    display: block;
    margin: 10px auto;
    width: 100%;

    // reset global label style
    text-transform: initial;
    font-weight: initial;

    @media @desktop {
      width: 300px;
      position: relative;
    }

    &--buttons {
      display: flex;

      @media @desktop {
        padding-left: 40px;
        padding-right: 40px;
      }
    }
  }

  &__label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    white-space: nowrap;

    @media @desktop {
      position: absolute;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 0;
      top: 0;
      right: 100%;
      height: 100%;
    }
  }
}

Add some paddings for mobile search form

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

.search-forum-options {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;

  &__input-group {
    display: block;
    margin: 10px auto;
    width: 100%;
    padding: 0 10px;

    // reset global label style
    text-transform: initial;
    font-weight: initial;

    @media @desktop {
      width: 300px;
      position: relative;
    }

    &--buttons {
      display: flex;
      padding-left: 5px; // remaining 5px is provided by the buttons themselves
      padding-right: $padding-left;

      @media @desktop {
        padding-left: 40px;
        padding-right: 40px;
      }
    }
  }

  &__label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    white-space: nowrap;

    @media @desktop {
      position: absolute;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 0;
      top: 0;
      right: 100%;
      height: 100%;
    }
  }
}


.post {
  padding: 22.5px;
  background-color: white;
  margin-bottom: 1px;
  border-left: 3px solid #F9FAFB;
  border-right: 3px solid #F9FAFB;

  &.upvoted {
    border-color: #4E86FE;
    .upvote {
      color: #4E86FE;
    }
  }

  &.downvoted {
    border-color: #FC6748;
    .downvote {
      color: #FC6748;
    }
  }

  .title {
    display: inline-block;
    margin-top: 3px;
    font-size: 1.5rem;
    color: #303540;
  }

  .caption {
    margin-top: 3px;
    color: #DDE0E6;
  }
}

Remove blue from right side of screen

.post {
  padding: 22.5px;
  background-color: white;
  margin-bottom: 1px;
  border-left: 3px solid #F9FAFB;

  &.upvoted {
    border-color: #4E86FE;
    .upvote {
      color: #4E86FE;
    }
  }

  &.downvoted {
    border-color: #FC6748;
    .downvote {
      color: #FC6748;
    }
  }

  .title {
    display: inline-block;
    margin-top: 3px;
    font-size: 1.5rem;
    color: #303540;
  }

  .caption {
    margin-top: 3px;
    color: #DDE0E6;
  }
}


.feedback-float-toolbar {
  @media (min-width: @screen-lg-max) {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 2;
    border-top-left-radius: 1em;
    margin: 0;
  }
  @media (max-width: @screen-lg-max) and (min-width: @screen-md-min) {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    border-top-right-radius: 1em;
    margin: 0;
  }
  margin: 3em 0;
  border-radius: 0;
  text-align: center;

  label {
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
  }
  button, a {
    display: inline-block;
  }
}

Fix target grade overlapping tutor feedback toolbar

.feedback-float-toolbar {
  @media (min-width: @screen-lg-max) {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
    border-top-left-radius: 1em;
    margin: 0;
  }
  @media (max-width: @screen-lg-max) and (min-width: @screen-md-min) {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    border-top-right-radius: 1em;
    margin: 0;
  }
  margin: 3em 0;
  border-radius: 0;
  text-align: center;

  label {
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
  }
  button, a {
    display: inline-block;
  }
}


.findInPageMatch {
    background-color: rgba(255, 204, 51, 0.3) !important;
    color: black !important;
    border-radius: 2px !important;
}

.findInPageMatch_Focus {
    background-color: rgba(255, 204, 51, 1.0) !important;
}

Increase specificity of find-in-page selection indication CSS so it can assert itself over the newly aggressive theme CSS.

.content span.findInPageMatch {
    background-color: rgba(255, 204, 51, 0.3) !important;
    color: black !important;
    border-radius: 2px !important;
}

.content span.findInPageMatch_Focus {
    background-color: rgba(255, 204, 51, 1.0) !important;
}


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

.minimap {
  .git-line-modified{
    background: fadeOut(@syntax-color-modified, 50%);
  }

  .git-line-added {
    background: fadeOut(@syntax-color-added, 40%);
  }

  .git-line-removed {
    background: fadeOut(@syntax-color-removed, 30%);
  }
}

Update to new URL in atom-dark-ui repo

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

.minimap {
  .git-line-modified{
    background: fadeOut(@syntax-color-modified, 50%);
  }

  .git-line-added {
    background: fadeOut(@syntax-color-added, 40%);
  }

  .git-line-removed {
    background: fadeOut(@syntax-color-removed, 30%);
  }
}


a,
a:visited {
  text-decoration: underline !important;
}
a[href]:after {
  content: "";
}
a[class~="icons-holder-text"],
a[class~="icons-holder-text"]:visited,
a[class~="accordion-toggle"],
a[class~="accordion-toggle"]:visited {
  text-decoration: none !important;
}
.actions-container,
.widget-actions-container {
  white-space: nowrap;
}
table.grid {
  th.select-all-header-cell,
  td.select-row-cell,
  th.action-column,
  td.action-cell {
    display: none;
  }
}
.filter-box {
  padding-left: 20px;
  .filter-list {
    display: none;
  }
  .filter-item {
    a,
    a:visited {
      text-decoration: none !important;
    }
  }
}
.grid-toolbar {
  .pagination {
    li:first-child,
    li:last-child {
      display: none;
    }
    input[type="number"] {
      border: 0;
      padding-top: 5px;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

Fix .scrollable-container in print version

a,
a:visited {
  text-decoration: underline !important;
}
a[href]:after {
  content: "";
}
a[class~="icons-holder-text"],
a[class~="icons-holder-text"]:visited,
a[class~="accordion-toggle"],
a[class~="accordion-toggle"]:visited {
  text-decoration: none !important;
}
.actions-container,
.widget-actions-container {
  white-space: nowrap;
}
table.grid {
  th.select-all-header-cell,
  td.select-row-cell,
  th.action-column,
  td.action-cell {
    display: none;
  }
}
.filter-box {
  padding-left: 20px;
  .filter-list {
    display: none;
  }
  .filter-item {
    a,
    a:visited {
      text-decoration: none !important;
    }
  }
}
.grid-toolbar {
  .pagination {
    li:first-child,
    li:last-child {
      display: none;
    }
    input[type="number"] {
      border: 0;
      padding-top: 5px;
      padding-left: 0;
      padding-right: 0;
    }
  }
}
.scrollable-container {
  height: auto !important;
}


/**
 * Containers
 */

.clearfix {
	zoom: 1;
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}

.gutterless {
	padding-left: 0px;
	padding-right: 0px;
}

.gutter {
	padding-left: @default-gutter-size;
	padding-right: @default-gutter-size;
}

.padded {
	padding: @default-gutter-size;
}

/**
 * Text & Font
 */

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.text-light {
	font-weight: 300;
}
.text-normal {
	font-weight: 400;
}
.text-bold {
	font-weight: 700;
}

Change strong font-weight in .text-light class

/**
 * Containers
 */

.clearfix {
	zoom: 1;
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}

.gutterless {
	padding-left: 0px;
	padding-right: 0px;
}

.gutter {
	padding-left: @default-gutter-size;
	padding-right: @default-gutter-size;
}

.padded {
	padding: @default-gutter-size;
}

/**
 * Text & Font
 */

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.text-light {
	font-weight: 300;
	strong {
		font-weight: 400;
	}
}
.text-normal {
	font-weight: 400;
}
.text-bold {
	font-weight: 700;
}


// This file left here as a placeholder
// to keep the build passing. Will be
// removed on the next card.

Implement linter for css naming conventions

/** @define Component */

.Component {
    &-title {
        diddy: doo;
    }
    .diddy {
        dah: doody;
    }
    doo: dah;
}


/**
 * Trove Box Theme
 */
@import "resources/bootstrap/less/bootstrap";
@import "resources/bootstrap/less/responsive";
@import "variables";
@import "typography";
@import "buttons";
@import "messages";
@import "template";

@import "components/header";
@import "components/userbadge";
@import "components/photo-grid";
@import "components/photo-detail";
@import "components/lightbox";

Remove responsive style until we have header finished

/**
 * Trove Box Theme
 */
@import "resources/bootstrap/less/bootstrap";
//@import "resources/bootstrap/less/responsive";
@import "variables";
@import "typography";
@import "buttons";
@import "messages";
@import "template";

@import "components/header";
@import "components/userbadge";
@import "components/photo-grid";
@import "components/photo-detail";
@import "components/lightbox";