/**
 *    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/>.
 */

.profile-detail-mobile {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  @media @desktop {
    display: none;
  }

  &__item {
    padding: 5px;
    flex: none;
    width: 50%;

    &--rank-chart {
      width: 100%;
      height: 100px;
    }

    &--half {
      width: 25%;
    }
  }
}

Adjust padding on profile detail mobile

/**
 *    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/>.
 */

.profile-detail-mobile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  padding: @gutter-v2;

  @media @desktop {
    display: none;
  }

  &__item {
    grid-column-end: span 2;

    &--rank-chart {
      grid-column-end: span 4;
      height: 100px;
    }

    &--half {
      grid-column-end: span 1;
    }
  }
}


@import 'core/less/common';
@import "core/less/z-index-globals";

@animation-duration: 0.3s;

:host {
	position: fixed;
	z-index: @z-index-overlay-overview;
	font-size: 12px;
	min-width: 250px;
	user-select: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity @animation-duration, visibility calc(~"@{animation-duration} + 0.1s");

	.overlay-overview {
		background-color: white;
		box-shadow: 0 0 15px 0 #2e2d46;
		border: 2px white solid;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}

	.transparent {
		background-color: transparent;
		width: 100%;
		height: 0;
		transition: height @animation-duration;
	}

	&.show {
		visibility: visible;
		opacity: 1;

		.transparent {
			// This will be the visible gap between this popup and the drop below it
			height: 20px;
		}
	}
}

img {
	height: 150px;
}

footer {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

Fix preview popup vertical position by 1px

@import 'core/less/common';
@import "core/less/z-index-globals";

@animation-duration: 0.3s;

:host {
	position: fixed;
	z-index: @z-index-overlay-overview;
	font-size: 12px;
	min-width: 250px;
	user-select: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(~"1px - 100%"));
	transition: opacity @animation-duration, visibility calc(~"@{animation-duration} + 0.1s");

	.overlay-overview {
		background-color: white;
		box-shadow: 0 0 15px 0 #2e2d46;
		border: 2px white solid;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}

	.transparent {
		background-color: transparent;
		width: 100%;
		height: 0;
		transition: height @animation-duration;
	}

	&.show {
		visibility: visible;
		opacity: 1;

		.transparent {
			// This will be the visible gap between this popup and the drop below it
			height: 20px;
		}
	}
}

img {
	height: 150px;
}

footer {
	width: 100%;
	display: flex;
	justify-content: space-between;
}


@timepicker-prefix: ~"w-timepicker";

.@{timepicker-prefix} {
  overflow: hidden;
  border-radius: 4px;
  &-input.disabled &-close-btn {
    display: none;
  }
  &-input &-close-btn {
    display: none;
    margin: 0 3px;
    color: #A5A5A5;
    cursor: pointer;
    &:hover {
      color: #393E48;
    }
  }
  &-input:hover &-close-btn {
    display: flex;
  }
}

Disable the hide clear button.

@timepicker-prefix: ~"w-timepicker";

.@{timepicker-prefix} {
  overflow: hidden;
  border-radius: 4px;
  &-input.disabled &-close-btn {
    display: none;
  }
  &-input &-close-btn {
    display: none;
    margin: 0 3px;
    color: #A5A5A5;
    cursor: pointer;
    &:hover {
      color: #393E48;
    }
  }
  &-input:not(.disabled):hover &-close-btn {
    display: flex;
  }
}


@import "ui-variables";

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

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

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

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

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

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

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

Remove .pane-item selector from core

@import "ui-variables";

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

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

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

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

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

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


@app-margin: 13px;
@nav-bg: white;
@color2: #69aa6f; // green
@color3: #e2e3df; // grey light
@nav-header-bg: darken(@nav-bg, 50%);
@nav-links: darken(@nav-bg, 50%);
@map-tools-bg-color: white;
@map-tools-color: black;
@map-tools-size: 29px;
@onhover-color: darken(@nav-bg, 20%);
@search-result-font-color: black;

// Z-indexes
@below-content-index: 1;
@content-index: 2;
@above-content-index: 3;

@nav-width: 260px;

Use grey instead of green for map mask

@app-margin: 13px;
@nav-bg: white;
@color2: #555; // grey
@color3: #e2e3df; // grey light
@nav-header-bg: darken(@nav-bg, 50%);
@nav-links: darken(@nav-bg, 50%);
@map-tools-bg-color: white;
@map-tools-color: black;
@map-tools-size: 29px;
@onhover-color: darken(@nav-bg, 20%);
@search-result-font-color: black;

// Z-indexes
@below-content-index: 1;
@content-index: 2;
@above-content-index: 3;

@nav-width: 260px;


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

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

  .checkbox { .flex(0, 0, 44px); }
  input[type="text"] { .flex(1); }
  .delete-item { .flex(0, 0, 3rem); }

  // Style of list-item children
  input[type="text"] {
    background: transparent;
    cursor: pointer;

    &:focus { cursor: text; }
  }

  .delete-item {
    color: @color-medium-rare;
    line-height: 3rem;
    text-align: center;

    &:hover { color: @color-primary; }
    &:active { color: @color-well; }
    .icon-trash { font-size: 1.1em; }
  }

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

  // Checked
  &.checked {
    input[type="text"] {
      color: @color-medium-rare;
      text-decoration: line-through;
    }

    .delete-item { display: inline-block; }
  }

  // Editing
  .delete-item { display: none; }
  &.editing .delete-item { display: inline-block; }
}

Change cursor to pointer on checkbox hover

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

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

  .checkbox {
    .flex(0, 0, 44px);
    cursor: pointer;
  }
  input[type="text"] { .flex(1); }
  .delete-item { .flex(0, 0, 3rem); }

  // Style of list-item children
  input[type="text"] {
    background: transparent;
    cursor: pointer;

    &:focus { cursor: text; }
  }

  .delete-item {
    color: @color-medium-rare;
    line-height: 3rem;
    text-align: center;

    &:hover { color: @color-primary; }
    &:active { color: @color-well; }
    .icon-trash { font-size: 1.1em; }
  }

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

  // Checked
  &.checked {
    input[type="text"] {
      color: @color-medium-rare;
      text-decoration: line-through;
    }

    .delete-item { display: inline-block; }
  }

  // Editing
  .delete-item { display: none; }
  &.editing .delete-item { display: inline-block; }
}


.sd-card-draftboard {

  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;

  .sd-board-grid {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background-color: #fafafa;
    background-size: @grid-size @grid-size;
    background-position: top top;
    background-image:
      linear-gradient(to right, #eee 1px, transparent 1px),
      linear-gradient(to bottom, #eee 1px, transparent 1px);
  }

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

  .grouping {
    box-shadow: 0 0 4px 4px blue;
    z-index: 19;
  }
}

Fix inset shadow issue in FF

.sd-card-draftboard {

  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;

  .sd-board-grid {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background-color: #fafafa;
    background-size: @grid-size @grid-size;
    background-position: top top;
    background-image:
      linear-gradient(to right, #eee 1px, transparent 1px),
      linear-gradient(to bottom, #eee 1px, transparent 1px);
  }

  .sd-board-inset-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }

  .grouping {
    box-shadow: 0 0 4px 4px blue;
    z-index: 19;
  }
}


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

.mw-echo-ui-bundledNotificationGroupWidget {

	&:not(:first-child) {
		margin-top: @bundle-group-padding;
	}

	&-title {
		font-weight: bold;
		color: #666666;
		margin-bottom: @bundle-group-padding;
	}

	.mw-echo-ui-notificationsWidget {
		margin-bottom: @bundle-group-padding / 2;
	}

	.mw-echo-ui-notificationItemWidget {
		padding: 0.5em;
		border: 1px solid #DDDDDD;

		&:not(:last-child) {
			border-bottom: 0;
		}

		&-icon img {
			height: 1.5em;
			width: 1.5em;
		}

		&-content {
			padding-left: 0.5em + 1.5em;
		}

		&-markAsReadButton {
			padding-top: 0;
		}
	}
}

Use padding instead of margin to separate cross-wiki sections from each other

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

.mw-echo-ui-bundledNotificationGroupWidget {

	&:not(:first-child) {
		padding-top: @bundle-group-padding;
	}

	&-title {
		font-weight: bold;
		color: #666666;
		margin-bottom: @bundle-group-padding;
	}

	.mw-echo-ui-notificationsWidget {
		margin-bottom: @bundle-group-padding / 2;
	}

	.mw-echo-ui-notificationItemWidget {
		padding: 0.5em;
		border: 1px solid #DDDDDD;

		&:not(:last-child) {
			border-bottom: 0;
		}

		&-icon img {
			height: 1.5em;
			width: 1.5em;
		}

		&-content {
			padding-left: 0.5em + 1.5em;
		}

		&-markAsReadButton {
			padding-top: 0;
		}
	}
}


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

#header {
  max-width: @max-viewport-width;
  background-color: white;
  z-index: 1;
}

Fix import path by removing one extra layer.

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

#header {
  max-width: @max-viewport-width;
  background-color: white;
  z-index: 1;
}


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

  path {
    stroke: @closing-colour !important;  // Important avoids the tick mark css overwriting
    fill: @closing-colour;
  }
}

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

Update close line styles to remove need to use important for path stroke

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

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

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


.NotificationsDropdown {
  .Dropdown-menu {
    padding: 0;
    overflow: hidden;

    .NotificationList-content {
      max-height: 70vh;
      overflow: auto;
    }
  }
  & .Dropdown-toggle .Button-label {
    margin-left: 7px;
  }
}
@media @tablet-up {
  .NotificationsDropdown {
    .Dropdown-menu {
      width: 425px;
    }
    .Dropdown-toggle {
      .Button--icon();
    }
  }
}

.NotificationsDropdown .Dropdown-toggle.new .Button-icon {
  color: @header-color;
}

.NotificationsDropdown-unread {
  position: absolute;
  top: 1px;
  left: 17px;
  background: @header-control-color;
  color: @header-bg;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 4px 3px;
  line-height: 1em;
  border-radius: 10px;
  border: 1px solid @header-bg;
  min-width: 18px;
  height: 18px;
  text-align: center;

  @media @phone {
    left: 20px;
  }

  .new & {
    background: @header-color;
  }
}

Use box-shadow instead of border for notifications badge

.NotificationsDropdown {
  .Dropdown-menu {
    padding: 0;
    overflow: hidden;

    .NotificationList-content {
      max-height: 70vh;
      overflow: auto;
    }
  }
  & .Dropdown-toggle .Button-label {
    margin-left: 7px;
  }
}
@media @tablet-up {
  .NotificationsDropdown {
    .Dropdown-menu {
      width: 425px;
    }
    .Dropdown-toggle {
      .Button--icon();
    }
  }
}

.NotificationsDropdown .Dropdown-toggle.new .Button-icon {
  color: @header-color;
}

.NotificationsDropdown-unread {
  position: absolute;
  top: 2px;
  left: 18px;
  background: @header-control-color;
  color: @header-bg;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 4px 3px;
  line-height: 1em;
  border-radius: 10px;
  .box-shadow(0 0 0 1px @header-bg);
  min-width: 16px;
  height: 16px;
  text-align: center;

  @media @phone {
    left: 20px;
  }

  .new & {
    background: @header-color;
  }
}


.events__content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
//
// .events__search {
//
// }
//
.events__map-container {
  flex: 4;
  position: relative;
}

// .event__map {
//   height: 100%;
//   width: 100%;
// }
//
.events__list {
  flex: 2;
  display: flex;
  flex-direction: column;
}
//
.events__list-ul {
  overflow-y: auto;
  list-style-type: none;
  padding: 0px;
}
//
// .events__list-ul--li {
//   width: 100%;
//   margin: 0px;
// }

Add styling to main component on events list

.events {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.events__content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
//
// .events__search {
//
// }
//
.events__map-container {
  flex: 4;
  position: relative;
}

// .event__map {
//   height: 100%;
//   width: 100%;
// }
//
.events__list {
  flex: 2;
  display: flex;
  flex-direction: column;
}
//
.events__list-ul {
  overflow-y: auto;
  list-style-type: none;
  padding: 0px;
}
//
// .events__list-ul--li {
//   width: 100%;
//   margin: 0px;
// }


@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./mixin";
@import "./search-input";

// Input styles
.@{ant-prefix}-input {
  .input;
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  .input-group(~"@{ant-prefix}-input");
  &-wrapper {
    display: inline-block;
    vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
  }
}

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .input-affix-wrapper(~"@{ant-prefix}-input");

  // https://github.com/ant-design/ant-design/issues/6144
  .@{ant-prefix}-input {
    min-height: 100%;  // use min-height, assume that no smaller height to override
  }
}

Make Input with addons same default width 100% with Input

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./mixin";
@import "./search-input";

// Input styles
.@{ant-prefix}-input {
  .input;
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  .input-group(~"@{ant-prefix}-input");
  &-wrapper {
    display: inline-block;
    vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
    width: 100%;
  }
}

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .input-affix-wrapper(~"@{ant-prefix}-input");

  // https://github.com/ant-design/ant-design/issues/6144
  .@{ant-prefix}-input {
    min-height: 100%;  // use min-height, assume that no smaller height to override
  }
}


.post-thumbnail{
    max-width: 100%;
}

.entry-content{

    figure{
        max-width: 100%;
        margin: @grid-gutter-width/2;

        figcaption{
            margin: 0 @grid-gutter-width/2;
        }

        img{
            margin: 0 @grid-gutter-width/2 @grid-gutter-width/4;
            height: auto;
        }
    }

    img{
        margin: @grid-gutter-width/2;
        max-width: 100%;
        height: auto;
    }
}

.thumbnail {
    border: transparent;
    background: transparent;
    padding: @grid-gutter-width/6 0;
}

.thumbnail-sm {
    img {
        max-height: @grid-gutter-width*2;
    }
}

Update .wp-caption and add styling for .wp-post-image and .avatar

.wp-post-image,
.post-thumbnail{
    max-width: 100%;
    height: auto;
}

.entry-content{

    .wp-caption{
        margin-left: 0;
        margin-right: 0;
    }

    figure{
        max-width: 100%;
        margin: @grid-gutter-width/2;

        figcaption{
            margin: 0 @grid-gutter-width/2;
        }

        img{
            margin: 0 @grid-gutter-width/2 @grid-gutter-width/4;
            height: auto;
        }
    }

    img{
        margin: @grid-gutter-width/2;
        max-width: 100%;
        height: auto;
    }
}

.thumbnail {
    border: transparent;
    background: transparent;
    padding: @grid-gutter-width/6 0;
}

.thumbnail-sm {
    img {
        max-height: @grid-gutter-width*2;
    }
}

.avatar{
    border-radius: 50%;
}


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

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

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

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

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

Add th to table styling, just in case.

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

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

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

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

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


ul.tags {
  padding: 0;
  margin-bottom: @layout-margin-mini;
  li {
    display: inline-block;
    margin-right: @layout-margin-mini;
    margin-bottom: @layout-margin-mini;
    padding: 6px 10px 3px;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    text-transform: uppercase;
    background-color: @green;
    color: @tag-color;
  }

  .tag-area {
    background-color: @tag-area;
  }

  .tag-living {
    background-color: @tag-living;
  }

  .tag-traffic {
    background-color: @tag-traffic;
  }

  &.small {
    li {
      margin-right: 3px;
      font-size: 10px;
      line-height: 10px;
    }
  }
}

Use better colors in hearing tags

ul.tags {
  padding: 0;
  margin-bottom: @layout-margin-mini;
  li {
    display: inline-block;
    margin-right: @layout-margin-mini;
    margin-bottom: @layout-margin-mini;
    padding: 6px 10px 3px;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    text-transform: uppercase;
    background-color: @green;
    color: @tag-color;
  }

  .tag-area {
    background-color: @blue-darker;
  }

  .tag-living {
    background-color: @blue;
  }

  .tag-traffic {
    background-color: @green;
  }

  &.small {
    li {
      margin-right: 3px;
      font-size: 10px;
      line-height: 10px;
    }
  }
}


form.choose-second-factor-type {

    div.row {
        margin: 2em 1em;
    }

    div.logo {
        img {
            max-height: 75px;
        }
    }

    div.title {
        font-size: @font-size-large;
        font-weight: 500;
    }
}

Fix logo layout in XS viewports

form.choose-second-factor-type {

    div.row {
        margin: 2em 1em;
    }

    div.logo {
        img {
            max-height: 75px;
        }
        @media(max-width:767px){
            img {
                max-height: none;
                max-width: 75px;
            }
        }
    }

    div.title {
        font-size: @font-size-large;
        font-weight: 500;
    }
}


.location-popout {
  @color: #ffffff;
  color: @color;
  background: #f47921;
  position: relative;

  .close-popout {
    border: 4px solid @color;
    border-radius: 100px;
    color: @color;
    content: '+';
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);

    i {
      position: absolute;
      top: -14px;
      right: 1px;
      font-size: 31px;
    }

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

  .name {
    a {
      color: @color;
      text-decoration: none;
    }
  }

  .address {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  &.hidden {
    width: 0;
  }

  .address {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .hours {
    text-transform: lowercase;
  }

}

Add fancy box shadow to popover

.location-popout {
  @color: #ffffff;
  color: @color;
  background: #f47921;
  position: relative;
  box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.51);
  z-index: 100;
  height: 100%;

  .close-popout {
    border: 4px solid @color;
    border-radius: 100px;
    color: @color;
    content: '+';
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);

    i {
      position: absolute;
      top: -14px;
      right: 1px;
      font-size: 31px;
    }

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

  .name {
    a {
      color: @color;
      text-decoration: none;
    }
  }

  .address {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  &.hidden {
    width: 0;
  }

  .address {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .hours {
    text-transform: lowercase;
  }

}


@theme-color: #366AA2;
@emission: niptech;

@import "_nipcommon-main";

Change to new niptech color

@theme-color: #00578A;
@emission: niptech;

@import "_nipcommon-main";


#navbar {
    .above;
    .bkg(#EEE);
    .dock-top(fixed, 48px);
    .pad(4px);
    .user-select-none;
    border-bottom: 2px solid @lightGrey;

    .logo {
        .dock-left(absolute, 48px);
        .img-logo;
        .no-outline;
        margin: 4px;

        &:hover, &:focus {
            -webkit-filter: brightness(110%);
            filter: brightness(110%);
        }
    }

    h1 {
        .fill(absolute);
        .single-line(ellipsis);
        color: #C4C4C4;
        font: 600 28px/40px @baseFont;
        margin: 6px 64px 6px 64px;
    }
}

Use a more compact SVG glyph-style version of the logo.

#navbar {
    .above;
    .bkg(#EEE);
    .dock-top(fixed, 48px);
    .pad(4px);
    .user-select-none;
    border-bottom: 2px solid @lightGrey;

    .logo {
        .dock-left(absolute, 40px);
        .img-logo-glyph;
        .no-outline;
        margin: 8px;

        &:hover, &:focus {
            -webkit-filter: brightness(110%);
            filter: brightness(110%);
        }
    }

    h1 {
        .fill(absolute);
        .single-line(ellipsis);
        color: #C4C4C4;
        font: 600 28px/40px @baseFont;
        margin: 6px 64px 6px 64px;
    }
}

#account {
    .block;
    .dock-right(absolute, 128px);
    .no-underline;
    .text-center;
    border-left: 3px solid @lightGrey;
    color: #AAA;
    margin: 8px 0;

    p, b { margin: 2px 4px; }

    b {
        .block;
        .single-line;
        color: #BBB;
    }
}


#tabBar {
    position: fixed;
    left: 0;
    bottom: 0;

    width: 100%;
    height: @tabBar-height;
    border-top: 1px solid @lightGrey;
    background-color: @white;
}

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

#tabBar ul li {
    float: left;
    width: 33.3%;
    height: 46px;

    text-align: center;
    font-size: 8pt;
    font-weight: normal;
}

#tabBar a {
    display: block;
    width: 100%;
    height: 100%;
}

#tabBar svg {
    margin-top: 10px;
}

#tabBar .bigButton {
    margin-top: -25px;
    width: 65px;
    height: 65px;
    margin-right: 17px;
}

#tabBar li g {
    fill: @black;
}

#tabBar li.active g {
    fill: @highlight;
}

Fix alignment of 'bigButton' in tab bar

#tabBar {
    position: fixed;
    left: 0;
    bottom: 0;

    width: 100%;
    height: @tabBar-height;
    border-top: 1px solid @lightGrey;
    background-color: @white;
}

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

#tabBar ul li {
    float: left;
    width: 33.3%;
    height: 46px;

    text-align: center;
    font-size: 8pt;
    font-weight: normal;
}

#tabBar a {
    display: block;
    width: 100%;
    height: 100%;
}

#tabBar svg {
    margin-top: 10px;
}

#tabBar .bigButton {
    margin-top: -25px;
    width: 65px;
    height: 65px;
    margin-right: 4px;
}

#tabBar li g {
    fill: @black;
}

#tabBar li.active g {
    fill: @highlight;
}


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

:global {
    html {
        -webkit-font-smoothing: antialiased;
    }

    body {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        font-family: 'Segoe UI', sans-serif;
    }

    h1 {
        font-weight: 100;
        font-size: 42px;
        line-height: 50px;
    }

    h2 {
        font-weight: 300;
        font-size: 32px;
        line-height: 40px;
    }

    h3 {
        font-weight: 500;
        font-size: 16px;
        line-height: 25px;
    }

    .x-large {
        font-size: 18px;
        line-height: 25px;
    }

    .large {
        font-size: 16px;
        line-height: 20px;
    }

    .small {
        font-size: 12px;
        line-height: 15px;
    }

    a {
        color: @link-color;
        text-decoration: none;

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

Enable text-decoration by default for links

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

:global {
    html {
        -webkit-font-smoothing: antialiased;
    }

    body {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        font-family: 'Segoe UI', sans-serif;
    }

    h1 {
        font-weight: 100;
        font-size: 42px;
        line-height: 50px;
    }

    h2 {
        font-weight: 300;
        font-size: 32px;
        line-height: 40px;
    }

    h3 {
        font-weight: 500;
        font-size: 16px;
        line-height: 25px;
    }

    .x-large {
        font-size: 18px;
        line-height: 25px;
    }

    .large {
        font-size: 16px;
        line-height: 20px;
    }

    .small {
        font-size: 12px;
        line-height: 15px;
    }

    a {
        color: @link-color;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}


@import 'bootstrap/less/bootstrap.less';

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.hero-unit {
    margin: 50px auto 0 auto;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

#main-pixel {
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}

Fix bootstrap font dir path

@import 'bootstrap/less/bootstrap.less';

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

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.hero-unit {
    margin: 50px auto 0 auto;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

#main-pixel {
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}


.umb-sub-views-nav {
  list-style: none;
  display: flex;
  margin: 0;
}

.umb-sub-views-nav-item {
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  display: block;
}

.umb-sub-views-nav-item:hover,
.umb-sub-views-nav-item:focus {
  text-decoration: none;
}

.umb-sub-views-nav-item.is-active {
  color: @blue;
}

.umb-sub-views-nav-item .icon {
  font-size: 24px;
  display: block;
  text-align: center;
}

.umb-sub-views-nav-item-text {
  font-size: 11px;
}

Remove navigation item outline on click in some browsers

.umb-sub-views-nav {
  list-style: none;
  display: flex;
  margin: 0;
}

.umb-sub-views-nav-item {
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  display: block;
}

.umb-sub-views-nav-item:focus {
  outline: none;
}

.umb-sub-views-nav-item:hover,
.umb-sub-views-nav-item:focus {
  text-decoration: none;
}

.umb-sub-views-nav-item.is-active {
  color: @blue;
}

.umb-sub-views-nav-item .icon {
  font-size: 24px;
  display: block;
  text-align: center;
}

.umb-sub-views-nav-item-text {
  font-size: 11px;
}


.createEvent__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 15% 50px 15%;
  background-color: #fff;
  border: 1px solid #EFF2F5;
  word-wrap: break-word;
}

.createEvent__form {
}

.createEvent__container-content {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.createEvent__container-div {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.createEvent__container-header {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  width: 100%;
}

.createEvent__container-subheader {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.createEvent__container-section {
  margin-left: 20px;
  margin-bottom: 10px;
}

.createEvent__container-section-image {
  margin-left: 0px;
}

.createEvent__container-field {
  margin: 5px 0 2px 0;
}

.createEvent__container-input {
  width: 80%;
  border: none;
  line-height: 20px;
}

.createEvent__image-container {
  display: flex;
}

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

Reduce size of image upload

.createEvent__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 15% 50px 15%;
  background-color: #fff;
  border: 1px solid #EFF2F5;
  word-wrap: break-word;
}

.createEvent__form {
}

.createEvent__container-content {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.createEvent__container-div {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.createEvent__container-header {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  width: 100%;
}

.createEvent__container-subheader {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.createEvent__container-section {
  margin-left: 20px;
  margin-bottom: 10px;
}

.createEvent__container-section-image {
  margin-left: 0px;
}

.createEvent__container-field {
  margin: 5px 0 2px 0;
}

.createEvent__container-input {
  width: 80%;
  border: none;
  line-height: 20px;
}

.createEvent__image-container {
  display: flex;
}

.createEvent__image {
  height: 60%;
  width: 60%;
}


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

.mw-echo-ui-toggleReadCircleButtonWidget {
	&-circle {
		border-radius: 50%;
		min-width: 10px;
		width: @bundle-group-padding;
		min-height: 10px;
		height: @bundle-group-padding;
		margin: @bundle-group-padding;
		.box-sizing( border-box );

		// Mark as read
		background-color: #36c;
		border: 0;

		// Mark as unread
		&-unread {
			background-color: #eaecf0;
			border: 1px solid @grey-light;
		}
	}

	&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
		// Mark as read
		background-color: #447ff5;

		// Mark as unread
		&-unread {
			background-color: #c8ccd1;
		}
	}
}

Fix 'unread' dot top padding regression

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

.mw-echo-ui-toggleReadCircleButtonWidget {
	&-circle {
		border-radius: 50%;
		min-width: 10px;
		width: @bundle-group-padding;
		min-height: 10px;
		height: @bundle-group-padding;
		margin: @bundle-group-padding;
		.box-sizing( border-box );

		// Mark as read
		background-color: #36c;
		border: 0;

		// Mark as unread
		&-unread {
			background-color: #eaecf0;
			border: 1px solid @grey-light;
		}
	}

	// Override OOUI specific rule for frameless buttons that adds a ~2.5em padding-top
	&.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
		padding-top: 0;
	}

	&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
		// Mark as read
		background-color: #447ff5;

		// Mark as unread
		&-unread {
			background-color: #c8ccd1;
		}
	}
}


.Body {
  color: @color-Text;
  font-family: Georgia, serif;
  font-size: 100%;
  line-height: @ratio-Scale--15;
  margin: 0;
  padding: 0;
  text-size-adjust: 100%;

  @media @md and @sm-height {
    font-size: @ratio-Scale--05;
  }

  &--fontsLoaded {
    font-family: 'Merriweather', Georgia, serif;

    .Code {
      font-family: 'Inconsolata', 'Lucida Sans Typewriter', monospace;
    }
  }

  &-part {
    padding: 5%;

    &--constrain {
      box-sizing: content-box;
      max-width: 45em;
    }
  }
}

Adjust content spacing for viewport size, keeping fallback

.Body {
  color: @color-Text;
  font-family: Georgia, serif;
  font-size: 100%;
  line-height: @ratio-Scale--15;
  margin: 0;
  padding: 0;
  text-size-adjust: 100%;

  @media @md and @sm-height {
    font-size: @ratio-Scale--05;
  }

  &--fontsLoaded {
    font-family: 'Merriweather', Georgia, serif;

    .Code {
      font-family: 'Inconsolata', 'Lucida Sans Typewriter', monospace;
    }
  }

  &-part {
    padding: 5%;
    padding: 5vmin 5%;

    &--constrain {
      box-sizing: content-box;
      max-width: 45em;
    }
  }
}


/**
 *    Copyright 2015-2017 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-extra-user-page-editor {
  flex: 1 0 auto;

  width: 100%;
  resize: none;
  border: none;
  outline: none;
  min-height: 200px;
  font-family: @font-family-monospace;
}

Allow resizing me! input box

/**
 *    Copyright 2015-2017 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-extra-user-page-editor {
  flex: 1 0 auto;

  width: 100%;
  resize: vertical;
  border: none;
  outline: none;
  min-height: 200px;
  font-family: @font-family-monospace;
}


.Button {
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 0.1em #fff, inset 0 0 0 0.25em @color-Link--bg;
  display: block;
  padding: 0.75em 1em;
  text-align: center;

  @media @xs {
    display: inline-block;
  }

  &--clear {
    box-shadow: inset 0 0 0 0.1em #fff;
  }
}

Change unit values to fractions

.Button {
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 unit(1/16, em) #fff, inset 0 0 0 unit(4/16, em) @color-Link--bg;
  display: block;
  padding: 0.75em 1em;
  text-align: center;

  @media @xs {
    display: inline-block;
  }

  &--clear {
    box-shadow: inset 0 0 0 unit(1/16, em) #fff;
  }
}


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


.source.json {
  .meta.structure.dictionary.json {
    & > .string.quoted.json, .punctuation.string {
      color: @red;
    }

    & > .value.json > .string.quoted.json,
    & > .value.json > .string.quoted.json > .punctuation {
      color: @green;
    }
  }
}

Fix an issue with JSPON nested strings

.source.json {
  .meta.structure.dictionary.json {
    & > .string.quoted.json {
      & > .punctuation.string {
        color: @red;
      }
      color: @red;
    }
  }

  .meta.structure.dictionary.json, .meta.structure.array.json {
    & > .value.json > .string.quoted.json,
    & > .value.json > .string.quoted.json > .punctuation {
      color: @green;
    }
  }
}


@menuTextColor: #c2c2c2;

#main-menu {
	display: none;
	position: absolute;
	height: 100%;
	width: 90%;
	background-color: #363636;
	box-shadow: 5px 0 5px rgba(0,0,0,.3);
	z-index: 999;

	li {

		font-size: 12px;
		color:@menuTextColor;
		padding: 0;
		margin: 0;
		border-bottom: solid 1px #303030;

		a {
			color:@menuTextColor;
			text-decoration: none;
			display: block;
			margin: 0;
			padding: 10px;
			line-height: 30px;
		}

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

	.account-holder {

	}
}

Add menu close button styling.

@menuTextColor: #c2c2c2;

#main-menu {
	display: none;
	position: absolute;
	height: 100%;
	width: 90%;
	background-color: #363636;
	box-shadow: 5px 0 5px rgba(0,0,0,.3);
	z-index: 999;

	li {

		font-size: 12px;
		color:@menuTextColor;
		padding: 0;
		margin: 0;
		border-bottom: solid 1px #303030;

		a {
			color:@menuTextColor;
			text-decoration: none;
			display: block;
			margin: 0;
			padding: 10px;
			line-height: 30px;
		}

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

	.account-holder {

		.close {
		 	background-color: #3b3b3b;
			border-radius: 2px;
			border: solid 1px #303030;
			.box-shadow (none);
			.box-shadow (inset 0px 1px 0px #494949);
			display: block;
			height: 29px;
			padding: 0;
			position: absolute;
			margin-top: 10px;
			right: -4px;
			width: 29px;
		}
	}
}


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

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

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

  &.in {
    height: auto;
  }
}

Add comment about opacity mixin not being used

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

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.

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

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

  &.in {
    height: auto;
  }
}


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

.ensime {
}

.ensime-log-view {
  overflow: auto; // doesn't scroll otherwise
  cursor: text;

  > ul {
    cursor: text;
  }
}

.ensime-tooltip {
  position: absolute;
  z-index:100;
  padding: 5px 8px 3px 8px;
  font-family: Consolas, monospace;
  font-size: 9pt;
  line-height: 12pt;
  text-align: left;
  white-space: pre;

  &:empty {
    display: none;
  }
}

.ensime-status {
  color : @text-color-info;
}

.am-panel {
  font-size : larger;
}

.line-message div {
  color : @text-color;
}

.line-message div.highlight-error {
  color : @text-color-selected;
}

.line-message div.highlight-warning {
  color : @text-color-selected;
}

Return error window output to default font size.

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

.ensime {
}

.ensime-log-view {
  overflow: auto; // doesn't scroll otherwise
  cursor: text;

  > ul {
    cursor: text;
  }
}

.ensime-tooltip {
  position: absolute;
  z-index:100;
  padding: 5px 8px 3px 8px;
  font-family: Consolas, monospace;
  font-size: 9pt;
  line-height: 12pt;
  text-align: left;
  white-space: pre;

  &:empty {
    display: none;
  }
}

.ensime-status {
  color : @text-color-info;
}

.line-message div {
  color : @text-color;
}

.line-message div.highlight-error {
  color : @text-color-selected;
}

.line-message div.highlight-warning {
  color : @text-color-selected;
}


/* Search Bar */
.search-bar {
    width: 100%;
    max-width: 300px;
    background: @gb-pagehead-search-background;
    border: 1px solid @gb-pagehead-search-border;
    border-radius: @gb-pagehead-search-border-radius;
    color: @gb-pagehead-search-color;
    position: relative;
    cursor: text;

    .Icon {
        position: absolute;
        left: 8px;
        line-height: 34px;
        color: inherit;
    }

    input {
        color: inherit;
        border: none;
        .box-shadow(none);
        height: 34px;
        padding-left: 30px;
        background: transparent;
    }
}

Fix text color in search bar

/* Search Bar */
.search-bar {
    width: 100%;
    max-width: 300px;
    background: @gb-pagehead-search-background;
    border: 1px solid @gb-pagehead-search-border;
    border-radius: @gb-pagehead-search-border-radius;
    color: @gb-pagehead-search-color;
    position: relative;
    cursor: text;

    .Icon {
        position: absolute;
        left: 8px;
        line-height: 32px;
        color: inherit;
    }

    input {
        border: none;
        .box-shadow(none);
        height: 34px;
        padding-left: 30px;
        background: transparent;
    }
}


@import 'variables';

.mb-search-bar {
  position: relative;

  @inactive-color: #555;

  .icon-search {
    position: absolute;
    left: 5px;
    top: 3px;
    color: @inactive-color;
  }

  input {
    padding-left: 20px;
    width: 120px;
    border-color: @inactive-color;

    &:focus {
      width: 240px;
    }

    &:focus + .icon-search {
      color: @text-color;
    }
  }
}

Change width of search bar

@import 'variables';

.mb-search-bar {
  position: relative;

  @inactive-color: #555;

  .icon-search {
    position: absolute;
    left: 5px;
    top: 3px;
    color: @inactive-color;
  }

  input {
    padding-left: 20px;
    width: 150px;
    border-color: @inactive-color;

    &:focus {
      width: 250px;
    }

    &:focus + .icon-search {
      color: @text-color;
    }
  }
}


container {
  margin-bottom: 10px;

  header {
    text-align: left;
    color: #eee;
    background: #0D3D65;
    padding: 5px 50px;

    a:link, a:visited {
      color: white;
      text-decoration: none;

      &:hover {
        color: #ccc;
      }
    }

    h1 {
      margin: 0;
      padding: 8px 0;
      font-size: 30px;
      font-weight: 300;
      letter-spacing: 5px;
      text-shadow: 0 0 3px #000;

      &:before {
        content: ' ';
        background: url('../logo.jpg');
        background-size: contain;
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 25px;
        width: 30px;
        height: 30px;
      }
    }
  }
}

Tweak to logo to look better.

container {
  margin-bottom: 10px;

  header {
    text-align: left;
    color: #eee;
    background: #0D3D65;
    padding: 5px 50px;

    a:link, a:visited {
      color: white;
      text-decoration: none;

      &:hover {
        color: #ccc;
      }
    }

    h1 {
      margin: 0;
      padding: 8px 0;
      font-size: 30px;
      font-weight: 300;
      letter-spacing: 5px;
      text-shadow: 0 0 3px #000;

      &:before {
        content: ' ';
        background: url('../logo.jpg') center;
        background-size: cover;
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 25px;
        width: 70px;
        height: 35px;
      }
    }
  }
}


@import "../lib/TagLabel.less";
@import "../lib/TagIcon.less";

@import "TagCloud.less";
@import "TagDiscussionModal.less";
@import "TagTiles.less";

.DiscussionHero {
  .item-title {
    display: block;
    margin-top: 15px;
  }
}
.TagLinkButton.child {
  @media @tablet-up {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  margin-left: 10px;

  .TagIcon {
    display: none;
  }
}
.DiscussionComposer-changeTags {
  margin-right: 15px;
  vertical-align: 2px;
}
.DiscussionListItem-info > .item-tags {
  margin-right: 4px;
  opacity: 1;
}
@media @tablet-up {
  .IndexPage, .UserPage {
    .DiscussionListItem-info > .item-tags {
      float: right;
      margin-top: -12px;
      margin-right: 0;
    }
  }
}
@media @desktop-up {
  .TagsPage {
    .sideNav {
      .sideNav--horizontal();
      float: none;
      width: auto;
      padding-top: 0;

      &:after {
        display: none;
      }
    }
    .sideNavOffset {
      margin: 15px 0 0;
    }
  }
}

Fix Tags page "start a discussion" button having a fixed width in Firefox

@import "../lib/TagLabel.less";
@import "../lib/TagIcon.less";

@import "TagCloud.less";
@import "TagDiscussionModal.less";
@import "TagTiles.less";

.DiscussionHero {
  .item-title {
    display: block;
    margin-top: 15px;
  }
}
.TagLinkButton.child {
  @media @tablet-up {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  margin-left: 10px;

  .TagIcon {
    display: none;
  }
}
.DiscussionComposer-changeTags {
  margin-right: 15px;
  vertical-align: 2px;
}
.DiscussionListItem-info > .item-tags {
  margin-right: 4px;
  opacity: 1;
}
@media @tablet-up {
  .IndexPage, .UserPage {
    .DiscussionListItem-info > .item-tags {
      float: right;
      margin-top: -12px;
      margin-right: 0;
    }
  }
}
@media @desktop-up {
  .TagsPage {
    .sideNav {
      .sideNav--horizontal();
      float: none;
      width: auto;
      padding-top: 0;

      &:after {
        display: none;
      }
    }
    .sideNavOffset {
      margin: 15px 0 0;
    }
  }
  .TagsPage-nav .item-newDiscussion .Button {
    width: auto;
  }
}


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

// Variables
@imgPath: "../../img";

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

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

// Navbar
.navbar {
  background: #134374;

  .container {
    height: 50px;
  }
}

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

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

Use submodule bootstrap Override variables locally

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

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

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

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

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

// Navbar
.navbar {
  background: #134374;

  .container {
    height: 50px;
  }
}

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

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


.tab-bar {
  .active {
    background-color: darken(@base, 5%) !important;
    &:after {
      border-bottom-color: transparent !important;
    }
    .title {
      color: @text;
      background-color: darken(@base, 5%) !important;
    }
  }
}

Fix active tab glitch on atom dark and light ui theme

.tab-bar {
  .active {
    background-color: darken(@base, 5%) !important;
    &:after {
      border-bottom-color: transparent !important;
    }
    .title {
      color: @text;
      background-color: darken(@base, 5%) !important;
    }
  }
}
.theme-atom-dark-ui .tab-bar .active .title {
    background-color: transparent !important;
}
.theme-atom-light-ui .tab-bar .active .title {
    background-color: #f0f0f0 !important;
}


.thunderbird {
  &.thank-you-page,
  &.share-page {
    display: block;
  }
  background: #EAEFF2;
  background: -ms-radial-gradient(center,ellipse cover,#eaeff2 0,rgba(212,221,228,0.5) 60%),-ms-linear-gradient(top,#cae1f4 0,rgba(125,185,232,0) 100%);
  background: radial-gradient(ellipse at center,#eaeff2 0,rgba(212,221,228,0.5) 50%),linear-gradient(to bottom,#cae1f4 0,rgba(125,185,232,0) 100%);
  .internet-graphic {
    margin-bottom: 10px;
  }
  .additional-info-page {
    background: #F6F8F9;
  }
  .header {
    margin: 10px auto 0;
    h1 {
      text-align: center;
    }
    img {
      max-width: 280px;
    }
    .tb-logo {
      margin-bottom: -30px;
      max-width: 280px;
    }
  }
  .submit-btn {
    background-color: #3D99F9;
    &:hover {
      background-color: #53A0F0;
    }
  }
  .disclaimers {
    padding: 0 5px;
    margin: 0 auto;
    border-radius: 0;
    background: transparent;
    p {
      color: #999;
      font-size: 12px;
      line-height: normal;
    }
  }
}

Align the Thunderbird looks (colors, bg) with current general Mozilla looks.

.thunderbird {
  &.thank-you-page,
  &.share-page {
    display: block;
  }
  .internet-graphic {
    margin-bottom: 10px;
  }
  .additional-info-page {
    background: #EAEFF2;
  }
  .header {
    margin: 10px auto 0;
    h1 {
      text-align: center;
    }
    img {
      max-width: 280px;
    }
    .tb-logo {
      margin-bottom: -30px;
      max-width: 280px;
    }
  }
  .submit-btn {
    background-color: #3D99F9;
    &:hover {
      background-color: #53A0F0;
    }
  }
}


@ulWidth: 256px;
@ulHeight: 32px;
@ulPadding: 4px;

.user-list {
    background-color: darken( @rohpod-background, 3% );

    > div {
        display: inline-block;
        width: @ulWidth;
        height: @ulHeight;
        padding: @ulPadding;
        white-space: nowrap;

        > div {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            width: ( @ulWidth - @ulHeight );
            padding-left: @ulPadding;
            color: #80B4DC;

            &[data-color=ingame] {
                color: @rohpod-user-in-game;
            }

            &[data-color=web] {
                color: @rohpod-user-web;
            }

            &[data-rank=Owner]:before {
                content: '\2605\00a0';
                color: #FECB00;
            }

            &[data-rank=Officer]:before {
                content: '\2605\00a0';
                color: #FECB00;
            }

            &[data-rank=Moderator]:before {
                content: '\2605\00a0';
                color: #CFCFCF;
            }
        }
    }

    img {
        width: @ulHeight;
        height: @ulHeight;
        vertical-align: text-top;
        float: left;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;

        &:hover {
            text-decoration: underline !important;
        }
    }
}

Fix avatar sizes in user list

@ulWidth: 256px;
@ulHeight: 32px;
@ulPadding: 4px;

.user-list {
    background-color: darken( @rohpod-background, 3% );

    > div {
        display: inline-block;
        width: @ulWidth;
        height: @ulHeight;
        padding: @ulPadding;
        white-space: nowrap;

        > div {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            width: ( @ulWidth - @ulHeight );
            padding-left: @ulPadding;
            color: #80B4DC;

            &[data-color=ingame] {
                color: @rohpod-user-in-game;
            }

            &[data-color=web] {
                color: @rohpod-user-web;
            }

            &[data-rank=Owner]:before {
                content: '\2605\00a0';
                color: #FECB00;
            }

            &[data-rank=Officer]:before {
                content: '\2605\00a0';
                color: #FECB00;
            }

            &[data-rank=Moderator]:before {
                content: '\2605\00a0';
                color: #CFCFCF;
            }
        }
    }

    img {
        width: @ulHeight !important;
        height: @ulHeight !important;
        vertical-align: text-top;
        float: left;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;

        &:hover {
            text-decoration: underline !important;
        }
    }
}


.hero-unit {
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  height: 45rem;
  justify-content: center;
  text-align: center;
  @media (min-width: @screen-md-min) {
    margin-right: -(@grid-gutter-width / 2);
  }
  .learn-more {
    font-size: 1.6rem;
    color: @white;
    a {
      color: inherit;
      cursor: pointer;
      font-weight: 600;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  h1 {
    text-shadow: rgba(0, 0, 0, 0.6) 0 .2rem .1rem;
    margin: 0 auto 0.8rem;
    max-width: 40rem;
    @media (min-width: @screen-teensy) {
      max-width: 49rem;
    }
    @media screen and (min-width: @screen-sm-min) {
      max-width: 60rem;
    }
    @media screen and (min-width: @screen-md-min) {
      max-width: 70rem;
    }
  }

  h2 {
    margin: 0;
    font-size: 3rem;
  }

  .btn-awsm {
    min-width: 15rem;
  }
}

Revert ""Learn more" link on clubs page has wonky hover state"

.hero-unit {
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  height: 45rem;
  justify-content: center;
  text-align: center;
  @media (min-width: @screen-md-min) {
    margin-right: -(@grid-gutter-width / 2);
  }
  .learn-more {
    font-size: 1.6rem;
    font-weight: 600;
    color: @white;
    a {
      color: inherit;
      text-decoration: underline;
      cursor: pointer;
      &:hover {
        text-decoration: none;
      }
    }
  }
  h1 {
    text-shadow: rgba(0, 0, 0, 0.6) 0 .2rem .1rem;
    margin: 0 auto 0.8rem;
    max-width: 40rem;
    @media (min-width: @screen-teensy) {
      max-width: 49rem;
    }
    @media screen and (min-width: @screen-sm-min) {
      max-width: 60rem;
    }
    @media screen and (min-width: @screen-md-min) {
      max-width: 70rem;
    }
  }

  h2 {
    margin: 0;
    font-size: 3rem;
  }

  .btn-awsm {
    min-width: 15rem;
  }
}


//These are the variables used throughout the application. This is where
//overwrites that are not specific to components should be maintained.

// Font-awesome var overwrite for referencing Bootstrap CDN font files directly
@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts";

Remove font-awesome font path variable overwrite


.note {
    background-color: @bg_gray;
    padding: 1em;
    padding-left: -40px; /* 40px is the amount of indentation per ol level
                            This makes notes look flush with their parent */
    h4 {
      margin-top: 0;
    }
}
.footnote-box {
    background-color: @bg_gray;
    padding: 1.5em;
    margin-left: 20px;

    h5 {
      margin-top: 0;
      font-family: "Lato Bold";
    }

    .footnotes {
      border: none;

        li {
            border: none;

            p {
                margin: 0 0 1em 1.5em;
            }
        }
    }
}

Use font mixin and adjust line height

.note {
    background-color: @bg_gray;
    padding: 1em;
    padding-left: -40px; /* 40px is the amount of indentation per ol level
                            This makes notes look flush with their parent */
    h4 {
      margin-top: 0;
    }
}
.footnote-box {
    background-color: @bg_gray;
    padding: 1.5em;
    margin-left: 20px;

    h5 {
      margin-top: 0;
      .font-bold;
    }

    .footnotes {
      border: none;

        li {
            border: none;

            p {
                line-height: 1.65em;
                margin: 0 0 1em 1.5em;
            }
        }
    }
}


@import "ui-variables";

#root-view {
  background-color: @app-background-color;
  border-top: 1px solid rgba(0, 0, 0, .4);
}

Update root-view id to workspace

@import "ui-variables";

#workspace {
  background-color: @app-background-color;
  border-top: 1px solid rgba(0, 0, 0, .4);
}


.breadcrumbs {
  color: #9d9d9d;
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;

  &-shift {
    margin-left: -3px;
  }

  &--user {
    color: #000;
    font-weight: 500;
  }
}

.breadcrumbs__body {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  height: 100%;
}

.breadcrumbs__item {
  padding: 0 17px;
  display: flex;
  align-items: center;

  &--narrow {
    padding: 0;

    .tag {
      max-width: none;
    }
  }
}

.breadcrumbs__title {
  &:extend(.font-light);
  padding: 0;
  overflow: hidden;
  height: 100%;
  text-overflow: ellipsis;
  background-color: #fff;
  color: #000;
}

.breadcrumbs__avatar {
  align-self: center;
  box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.08);
}

.breadcrumbs__short-view {
  background-color: #fff;
}

Make the header content semi-transparent

.breadcrumbs {
  color: #9d9d9d;
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;

  &-shift {
    margin-left: -3px;
  }

  &--user {
    color: #000;
    font-weight: 500;
  }
}

.breadcrumbs__body {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  height: 100%;
}

.breadcrumbs__item {
  padding: 0 17px;
  display: flex;
  align-items: center;

  &--narrow {
    padding: 0;

    .tag {
      max-width: none;
    }
  }
}

.breadcrumbs__title {
  &:extend(.font-light);
  padding: 0;
  overflow: hidden;
  height: 100%;
  text-overflow: ellipsis;
  background-color: #fff;
  color: #000;

  &:only-child {
    padding-left: 17px;
  }
}

.breadcrumbs__avatar {
  align-self: center;
  box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.08);
}

.breadcrumbs__short-view {
  background-color: #fff;
}


@table-enabled: true;

/*
 * Table Colors
 */

@table-cell-highlight-color: @neutral;
@table-cell-hover-color: #f9f9fa;

Use consistent color value for background

@table-enabled: true;

/*
 * Table Colors
 */

@table-cell-highlight-color: @neutral;
@table-cell-hover-color: color-lighten(@neutral, 97);


@import "variables";

.github-CommitView {
  padding: @component-padding;
  border-top: 1px solid @base-border-color;
  flex: 0 0 auto;

  &-editor {
    height: 100px;
    border: 1px solid @input-border-color;
    border-radius: @component-border-radius;
    overflow: auto;
    padding: @component-padding / 2;
    background-color: @syntax-background-color;

    atom-text-editor {
      height: 100%;
      font-size: @font-size;
      .cursor-line {
        background-color: transparent;
      }
    }
  }

  &-bar {
    display: flex;
    align-items: center;
    margin-top: @component-padding;
  }

  &-label {
    margin-right: @component-padding;
  }

  &-button {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    &.is-secondary {
      flex: 0 1 auto;
      margin-right: @component-padding;
    }
  }

  &-remaining-characters {
    width: 1.25em;
    text-align: right;
    margin-left: @component-padding;
    color: @text-color-subtle;

    &.is-warning { color: @text-color-warning; }
    &.is-error   { color: @text-color-error; }
  }
}

Move CommitView-editor styles to atom-text-editor

@import "variables";

.github-CommitView {
  padding: @component-padding;
  border-top: 1px solid @base-border-color;
  flex: 0 0 auto;

  &-editor atom-text-editor {
    height: 100px;
    font-size: @font-size;
    border: 1px solid @input-border-color;
    border-radius: @component-border-radius;
    padding: @component-padding / 2;
    background-color: @syntax-background-color;
    .cursor-line.cursor-line.cursor-line {
      background-color: transparent;
    }
  }

  &-bar {
    display: flex;
    align-items: center;
    margin-top: @component-padding;
  }

  &-label {
    margin-right: @component-padding;
  }

  &-button {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    &.is-secondary {
      flex: 0 1 auto;
      margin-right: @component-padding;
    }
  }

  &-remaining-characters {
    width: 1.25em;
    text-align: right;
    margin-left: @component-padding;
    color: @text-color-subtle;

    &.is-warning { color: @text-color-warning; }
    &.is-error   { color: @text-color-error; }
  }
}


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

.line-number {
  &.debugger-execution-line {
    opacity: 1;

    .icon-right {
      visibility: visible;
      opacity: 1;
      color: @text-color-info;

      &::before {
        content: @arrow-right
      }
    }
  }

  &.debugger-breakpoint-line {
    .icon-right {
      visibility: visible;
      opacity: 1;
      color: @text-color-info;

      &::before {
        content: @stop
      }
    }
  }
}

Make CSS priority of execution line higher than breakpoint line

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

.line-number {
  &.debugger-breakpoint-line {
    .icon-right {
      visibility: visible;
      opacity: 1;
      color: @text-color-info;

      &::before {
        content: @stop
      }
    }
  }

  &.debugger-execution-line {
    opacity: 1;

    .icon-right {
      visibility: visible;
      opacity: 1;
      color: @text-color-info;

      &::before {
        content: @arrow-right
      }
    }
  }
}


.resource-info {
  .favorite-button {
    float: right;
    font-size: 32px;
  }

  h1 {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .lead {
    margin-bottom: 10px;
  }

  .resource-icons {
    font-size: 20px;
  }

  .resource-images {
    margin-bottom: 10px;
    margin-top: @line-height-computed;
  }

  .details-row {
    font-weight: 600;
  }

  .resource-equipment {
    .label {
      display: inline-block;
      font-size: @font-size-small;
      padding: 0.4em;
      margin: 0.2em;
      margin-left: 0;
      & + .label {
        margin-left: 0.2em;
      }
    }
  }
  .resource-description {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

Fix favorite star alignment with header

.resource-info {
  .favorite-button {
    float: right;
    font-size: 32px;
    line-height: 32px;
    margin-top: @line-height-computed;
  }

  h1 {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .lead {
    margin-bottom: 10px;
  }

  .resource-icons {
    font-size: 20px;
  }

  .resource-images {
    margin-bottom: 10px;
    margin-top: @line-height-computed;
  }

  .details-row {
    font-weight: 600;
  }

  .resource-equipment {
    .label {
      display: inline-block;
      font-size: @font-size-small;
      padding: 0.4em;
      margin: 0.2em;
      margin-left: 0;
      & + .label {
        margin-left: 0.2em;
      }
    }
  }
  .resource-description {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}


.Post--reported {
  padding-top: 0 !important;
  border: 2px solid @primary-color;

  .Post-controls {
    display: none;
  }
}

.Post-header .item-reported {
  display: block;
  margin: 0;
}
.Post-reported {
  background: @primary-color;
  margin-top: -2px;
  margin-bottom: 20px;
  margin-left: -22px;
  margin-right: -22px;

  @media @tablet-up {
    margin-left: -22px - 90px;
    text-align: right;
  }

  padding: 10px;
  border-radius: @border-radius @border-radius 0 0;
  overflow: hidden;
  .light-contents(@color: @body-bg; @control-color: @body-bg);

  &, a {
    color: @body-bg !important;
  }
}
.Post-reported-summary {
  @media @tablet-up {
    float: left;
  }

  font-size: 14px;
  margin: 7px 10px;
  text-align: left;
  font-weight: bold;
}
.Post-reported-detail {
  font-size: 12px;
  margin-top: 5px;
  font-weight: normal;
}
.Post-reported-actions .Button {
  margin-left: 5px;
}

.ReportsDropdown .Dropdown-toggle {
  .Button-label,
  .Button-caret {
    display: none;
  }
}

Update for new post layout

.Post--reported {
  padding-top: 0 !important;
  border: 2px solid @primary-color;
}

.Post-header .item-reported {
  display: block;
  margin: 0;
}
.Post-reported {
  background: @primary-color;
  margin-top: -2px;
  margin-bottom: 20px;
  margin-left: -22px;
  margin-right: -22px;

  @media @tablet-up {
    margin-left: -22px - 85px;
    text-align: right;
  }

  padding: 10px;
  border-radius: @border-radius @border-radius 0 0;
  overflow: hidden;
  .light-contents(@color: @body-bg; @control-color: @body-bg);

  &, a {
    color: @body-bg !important;
  }
}
.Post-reported-summary {
  @media @tablet-up {
    float: left;
  }

  font-size: 14px;
  margin: 7px 10px;
  text-align: left;
  font-weight: bold;
}
.Post-reported-detail {
  font-size: 12px;
  margin-top: 5px;
  font-weight: normal;
}
.Post-reported-actions .Button {
  margin-left: 5px;
}

.ReportsDropdown .Dropdown-toggle {
  .Button-label,
  .Button-caret {
    display: none;
  }
}


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

.editbar .navbar > .container-fluid {
  > .navbar-collapse {
    height: 1px;
  }
}

Fix vertical alignment of navbar buttons

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

.editbar .navbar > .container-fluid {
  > .navbar-collapse {
    height: 1px;

    .navbar-btn {
      margin-top: 9px; // Override Bootstrap to vertically-align buttons
    }
  }
}


/*
 * Your Stylesheet
 */

@import 'ui-variables';

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

atom-text-editor:not([mini]) {
  &::shadow {
    // De-italicize all syntax components which Monokai italicizes
    .storage.type,
    .entity.other.inherited-class,
    .variable.parameter,
    .support.type,
    .support.class {
      font-style: normal;
    }
    // Make selected line more prominent
    .line.cursor-line {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}

.status-bar linter-bottom-status.inline-block {
  // Move Linter Status to the left of Encoding and Language in status bar
  // Only looks good if Position setting is "left"
  float: right;
  // Also reduce margin to converve space
  margin-right: 0;
}

linter-bottom-tab {
  // Hide Linter file tabs to conserve space in status bar
  display: none;
  // Decrease font size of file tabs to vertically center them
  // (in case I ever decide to show them again)
  font-size: 10px;
}

// Hide obtrusive overlay icon that displays when Find And Replace wraps around
.find-wrap-icon {
  display: none !important;
}

Make bracket matcher underline solid

/*
 * Your Stylesheet
 */

@import 'ui-variables';

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

atom-text-editor:not([mini]) {
  &::shadow {
    // De-italicize all syntax components which Monokai italicizes
    .storage.type,
    .entity.other.inherited-class,
    .variable.parameter,
    .support.type,
    .support.class {
      font-style: normal;
    }
    // Make selected line more prominent
    .line.cursor-line {
      background-color: rgba(255, 255, 255, 0.05);
    }
    // Make the underline under matched brackets solid rather than dotted
    .bracket-matcher .region {
      border-bottom-style: solid;
    }
  }
}

.status-bar linter-bottom-status.inline-block {
  // Move Linter Status to the left of Encoding and Language in status bar
  // Only looks good if Position setting is "left"
  float: right;
  // Also reduce margin to converve space
  margin-right: 0;
}

linter-bottom-tab {
  // Hide Linter file tabs to conserve space in status bar
  display: none;
  // Decrease font size of file tabs to vertically center them
  // (in case I ever decide to show them again)
  font-size: 10px;
}

// Hide obtrusive overlay icon that displays when Find And Replace wraps around
.find-wrap-icon {
  display: none !important;
}


.sapUiDnDGridIndicator {
	background: @sapUiDragAndDropActiveBackground;
	border: 0.125rem solid @sapUiDragAndDropActiveBorderColor;
	box-sizing: border-box;
}

Drop indicator border color is now correct

.sapUiDnDGridIndicator {
	background: @sapUiDragAndDropActiveBackground;
	border: 0.125rem solid @sapUiContentDragAndDropActiveColor;
	box-sizing: border-box;
}


.linkDivUnread {
  a:link,
  a:visited {
    color: #265c83;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
}

.linkDivRead {
  a:link,
  a:visited {
    color: #777;
    text-decoration: line-through;
  }
  a:hover {
    text-decoration: underline;
  }
}

.preventCellClick {
  position: relative;
}

.preventCellClickWrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Adjust styling of read article.

.linkDivUnread {
  a:link,
  a:visited {
    color: #265c83;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
}

.linkDivRead {
  a:link,
  a:visited {
    color: #777;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
}

.preventCellClick {
  position: relative;
}

.preventCellClickWrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}


@import "/bower_components/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "./mixins-app.less";

Add hack to support bootstrap 3.1

@import "/bower_components/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "./mixins-app.less";

// HACK: Include Bootstrap clearfix class to support extending clearfix
.clearfix {
  .clearfix();
}


@import "ui-variables";

.table-edit {
  position: relative;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    bottom: 0;
    top: 27px;
    left: 0;
    right: 0;
  }
}

.table-edit-content {
  position: relative;
}

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

.table-edit-column {
  float: left;
}

.table-edit-header {
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

Add text overflow on table cells

@import "ui-variables";

.table-edit {
  position: relative;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    bottom: 0;
    top: 27px;
    left: 0;
    right: 0;
  }
}

.table-edit-content {
  position: relative;
}

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

.table-edit-column {
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.table-edit-header {
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}


@import "ui-variables";

#atom-no-title-bar() {
    @title-bar-buttons-width: 80px; // seems to work well for many themes

    :not(.fullscreen).platform-darwin > atom-workspace {
        -webkit-app-region: drag;
        .tab-bar, .editor, .tree-view .entry {
            -webkit-app-region: no-drag;
        }

        .title-bar .title {
            display: none;
        }

        .title-bar,
        .tool-bar,
        .tool-bar button.tool-bar-btn {
            border-width: 0;
        }

        atom-workspace-axis.horizontal {
            margin-top: -@tab-height;
            background-color: @tab-bar-background-color;
        }

        atom-panel-container {
            &.left {
                margin-top: @tab-height;
            }

            &.right {
                margin-top: @tab-height;
            }
        }

        atom-panel-container.left:empty + atom-workspace-axis.vertical .pane:nth-child(1) .tab-bar {
            padding-left: @title-bar-buttons-width;
        }
    }
}

#atom-no-title-bar;

Disable drag for resize handles.

@import "ui-variables";

#atom-no-title-bar() {
    @title-bar-buttons-width: 80px; // seems to work well for many themes

    :not(.fullscreen).platform-darwin > atom-workspace {
        -webkit-app-region: drag;

        .editor,
        .tab-bar,
        .tree-view .entry,
        .tree-view-resize-handle,
        atom-pane-resize-handle
        {
            -webkit-app-region: no-drag;
        }

        .title-bar .title {
            display: none;
        }

        .title-bar,
        .tool-bar,
        .tool-bar button.tool-bar-btn {
            border-width: 0;
        }

        atom-workspace-axis.horizontal {
            margin-top: -@tab-height;
            background-color: @tab-bar-background-color;
        }

        atom-panel-container {
            &.left {
                margin-top: @tab-height;
            }

            &.right {
                margin-top: @tab-height;
            }
        }

        atom-panel-container.left:empty + atom-workspace-axis.vertical .pane:nth-child(1) .tab-bar {
            padding-left: @title-bar-buttons-width;
        }
    }
}

#atom-no-title-bar;


body {
  margin-top:20px;
}

Add responsive widths for bootstrap and treat case for margin top

@media only screen and (min-width : 320px) {}

@media only screen and (min-width : 480px) {}

@media only screen and (min-width : 768px) {
  body {
    margin-top:20px;
  }
}

@media only screen and (min-width : 992px) {}

@media only screen and (min-width : 1200px) {}

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

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

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

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

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


// Mobile first!

#learn {

  // stuff goes here

}

// Adjustments for larger screens

@media only screen and ( min-width: 768px ) {

  #learn {

    // stuff goes here

  }

}

Set up Learn More LESS for @dezzie

// Mobile first!

#learn-more {

  // stuff goes here

}

// Adjustments for larger screens

@media only screen and ( min-width: 768px ) {

  #learn-more {

    // stuff goes here

  }

}


// Represent headings and subheadings.
//
// These elements rank in importance according to the number in their name.
//
// The h1 element is said to have the highest rank,
// the h6 element has the lowest rank, and two elements with the same name
// have equal rank.
//
// Url - http://html5doctor.com/element-index/#h1

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: @font-heading;
    font-weight: bold;
    color: black;
    line-height: 1;
    margin: 0 0 0.5em 0;
}

Add missing default font-size for headings

// Represent headings and subheadings.
//
// These elements rank in importance according to the number in their name.
//
// The h1 element is said to have the highest rank,
// the h6 element has the lowest rank, and two elements with the same name
// have equal rank.
//
// Url - http://html5doctor.com/element-index/#h1

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: @font-heading;
    font-weight: bold;
    color: black;
    line-height: 1;
    margin: 0 0 0.5em 0;
}

h1 { font-size : @h1; }
h2 { font-size : @h2; }
h3 { font-size : @h3; }
h4 { font-size : @h4; }
h5 { font-size : @h5; }
h6 { font-size : @h6; }


.browse .list-group-item {
  i.type { margin-right: 6px; }
  cursor: pointer;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;

  // Right context menu
  .actions {
    right: 15px;
    z-index: 10;
    position: absolute;
    top: 6px;
  }
}

Fix hidden context menu - improved but not right yet

.browse {
  .list-group {
    overflow-x: hidden;
  }

  .list-group-item {
    i.type { margin-right: 6px; }
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;

    // Right context menu
    .actions {
      right: 15px;
      z-index: 10;
      position: absolute;
      top: 6px;
    }
  }
}


/**
 *    Copyright 2015-2017 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/>.
 */

.click-to-copy {
  @top: click-to-copy;
  .link-white();

  &--profile-link {
    .link-white();
  }

  &__icon {
    opacity: 0;
    padding-left: 5px;
    color: #999;
    cursor: pointer;

    .@{top}:hover & {
      opacity: 1;
    }
  }
}

Fix discord link colour to match profile links

/**
 *    Copyright 2015-2017 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/>.
 */

.click-to-copy {
  @top: click-to-copy;
  .link-white();

  &--profile-header-extra {
    .link-blue-light();
  }

  &__icon {
    opacity: 0;
    padding-left: 5px;
    color: #999;
    cursor: pointer;

    .@{top}:hover & {
      opacity: 1;
    }
  }
}


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

.presentation {
  height: 100%;
}

section {
  display: table;
  -moz-box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 4em;

  h1:only-child {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
}

section {
  background: #EEE;
  color: #434343;
}

.backbone {
  background: #0071B5;
  color: #FFF;
  /*border: solid 0.2em #002A41;*/
}

.ember {
  background: #F23818;
  color: #F6ECE8;
  /*border: solid 0.2em #F6ECE8;*/
}

.angular {
  background: #DD1B16;
  color: #F2F2F2;
  /*border: solid 0.2em #B3B3B3;*/
}

img {
  background: #FFF;
  padding: 0.4em;
}

Add a vendor prefix free box-sizing CSS attribute.

html, body {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
}

.presentation {
  height: 100%;
}

section {
  display: table;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 4em;

  h1:only-child {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
}

section {
  background: #EEE;
  color: #434343;
}

.backbone {
  background: #0071B5;
  color: #FFF;
  /*border: solid 0.2em #002A41;*/
}

.ember {
  background: #F23818;
  color: #F6ECE8;
  /*border: solid 0.2em #F6ECE8;*/
}

.angular {
  background: #DD1B16;
  color: #F2F2F2;
  /*border: solid 0.2em #B3B3B3;*/
}

img {
  background: #FFF;
  padding: 0.4em;
}


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

.latest {
  padding: 5px 30px;
  background-color: @brand-highlight;
}

Add underline to newer version link to make it stand out

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

.latest {
  padding: 5px 30px;
  background-color: @brand-highlight;

  a {
    text-decoration: underline;
  }
}


visualization-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);

  &:after {
    content: "−";
    margin-left: 5px;
  }

  &:empty:after {
    content: none;
  }
}

.th-title p.hidden-print {
  margin-bottom: 0;
}

.widget-wrapper {
  .body-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .body-row {
      flex: 0 1 auto;
    }

    .body-row-auto {
      flex: 1 1 auto;
    }
  }

  .spinner-container {
    position: relative;

    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .dropdown-header {
    padding: 0;

    .actions {
      position: static;
    }
  }

  .t-header.widget {
    .dropdown {
      margin-top: -15px;
      margin-right: -15px;

      .actions {
        position: static;
      }
    }
  }

  .scrollbox:empty {
    padding: 0 !important;
    font-size: 1px !important;
  }

  .widget-text {
    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }
  }
}

Make visualization name as dark as query name

visualization-name {
  font-size: 15px;
  font-weight: 500;

  &:after {
    content: "−";
    margin-left: 5px;
  }

  &:empty:after {
    content: none;
  }
}

.th-title p.hidden-print {
  margin-bottom: 0;
}

.widget-wrapper {
  .body-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .body-row {
      flex: 0 1 auto;
    }

    .body-row-auto {
      flex: 1 1 auto;
    }
  }

  .spinner-container {
    position: relative;

    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .dropdown-header {
    padding: 0;

    .actions {
      position: static;
    }
  }

  .t-header.widget {
    .dropdown {
      margin-top: -15px;
      margin-right: -15px;

      .actions {
        position: static;
      }
    }
  }

  .scrollbox:empty {
    padding: 0 !important;
    font-size: 1px !important;
  }

  .widget-text {
    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }
  }
}


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

#activity_for_channel {

  .fact-block {
    // Removes the border-bottom the .fact-block default has
    border: none;
  }

  .user-avatar img {
    .border-radius(3px);
  }

  .activity-block {
    border-bottom: 1px solid #e6e6e6;
    margin: 20px 0;
    overflow: auto;
    width: 100%;

    .left-col  {
      float: left;
      width: 32px;
    }
    .right-col {
      float: left;
      margin: 0 12px 20px;
      width: 600px;
    }

    .meta {
      color: #999;
      display: block;
      font-size: 0.9em;
      font-weight: 200;
      margin-top: 12px;
    }
  }
}

Align the avatar according to design

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

#activity_for_channel {

  .fact-block {
    // Removes the border-bottom the .fact-block default has
    border: none;
  }

  .user-avatar img {
    .border-radius(3px);
  }

  .activity-block {
    border-bottom: 1px solid #e6e6e6;
    margin: 20px 0;
    overflow: auto;
    width: 100%;

    .left-col  {
      margin: 0 0 0 4px;
      float: left;
      width: 32px;
    }
    .right-col {
      float: left;
      margin: 0 12px 20px;
      width: 600px;
    }

    .meta {
      color: #999;
      display: block;
      font-size: 0.9em;
      font-weight: 200;
      margin-top: 12px;
    }
  }
}


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

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

Fix line-height in leftside menu

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

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


.badge-sticky {
  background: #d13e32;
}
.post-discussion-stickied {
  & .post-icon, & .post-activity-info, & .post-activity-info a {
    color: #d13e32;
  }
}
.discussion-excerpt {
  display: block !important;
  margin-bottom: 10px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5em;
  color: #aaa;
}

Hide excerpt in discussion list pane + on mobile

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

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

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


@import (less) '../../../node_modules/react-datepicker/dist/react-datepicker.css';
@import (less) '../../../node_modules/fixed-data-table/dist/fixed-data-table.css';
@import '../../../node_modules/font-awesome/less/font-awesome';

@import './tutor-bootstrap';
@import './tutor-material';

Set path to external styles

@import (less) '../../../node_modules/react-datepicker/dist/react-datepicker.css';
@import (less) '../../../node_modules/fixed-data-table/dist/fixed-data-table.css';
@import '../../../node_modules/font-awesome/less/font-awesome';
@bootstrap-path: '../../../bower_components/bootstrap/less';
@material-path: '../../../bower_components/bootstrap-material-design/less';

@import './tutor-bootstrap';
@import './tutor-material';


canvas * {
  behavior: url(#default#VML)
}

Fix ie9 compatibility mode input offset.

canvas * {
  behavior: url(#default#VML)
}

input.form-control {
  margin-top: 8px !important;
}


.page-container {
  @media @desktop {
    width: 80%;
    margin: auto;
  }
}

.page-title {
  border-bottom: 1px solid #f2f2f3;
  text-align: center;
  h2 {
    margin-top: 0;
  }
  h3 {
    margin-bottom: 0;
  }
}

article {
  h2 {
    margin-bottom: 0;
  }
}

// For styling blog posts coming from BernieSanders.com official campaign
.official {
  h5 {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: @red;
    text-transform: uppercase;
    margin: 30px 0 0;
  }
  h2 {
    margin-top: 0;
  }
  // Add .com to "Bernie Sanders" link for more clarity
  p:last-child {
    color: @gray;
    font-size: 0.8em;
    a:last-child {
      &:after {
        content: '.com'
      }
    }
  }
}

Add Page Title Bottom Margin

.page-container {
  @media @desktop {
    width: 80%;
    margin: auto;
  }
}

.page-title {
  border-bottom: 1px solid #f2f2f3;
  text-align: center;
  margin-bottom: 20px;
  h2 {
    margin-top: 0;
  }
  h3 {
    margin-bottom: 0;
  }
}

article {
  h2 {
    margin-bottom: 0;
  }
}

// For styling blog posts coming from BernieSanders.com official campaign
.official {
  h5 {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: @red;
    text-transform: uppercase;
    margin: 30px 0 0;
  }
  h2 {
    margin-top: 0;
  }
  // Add .com to "Bernie Sanders" link for more clarity
  p:last-child {
    color: @gray;
    font-size: 0.8em;
    a:last-child {
      &:after {
        content: '.com'
      }
    }
  }
}


@import "variables";

.git-Panel {
  width: 300px;
  display:flex;
  flex-direction:column;
  height: 100%;

  font-family: @font-family;
  font-size: @font-size;
  color:@text-color;

  background: @pane-item-background-color;
  border-left: 1px solid @pane-item-border-color;

  &-header {
    padding:0 12px;
    width:100%;
    line-height:2.7em;
    height:2.7em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:contrast(@pane-item-background-color, darken(@pane-item-background-color, 3%), lighten(@pane-item-background-color, 3%));
    font-size: @font-size;
    font-weight:bold;
    box-shadow:inset @separator-border-color 0 -1px 0, inset @separator-border-color 0 1px 0;
  }

  &-item {
    flex: 1;

    &.is-fixed {
      flex: 0 0 auto; // Uses a fixed-height
    }
  }
}

Fix git-Panel-header from being squeezed

@import "variables";

.git-Panel {
  width: 300px;
  display:flex;
  flex-direction:column;
  height: 100%;

  font-family: @font-family;
  font-size: @font-size;
  color:@text-color;

  background: @pane-item-background-color;
  border-left: 1px solid @pane-item-border-color;

  &-header {
    flex: 0 0 auto;
    padding:0 12px;
    line-height:2.7em;
    height:2.7em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:contrast(@pane-item-background-color, darken(@pane-item-background-color, 3%), lighten(@pane-item-background-color, 3%));
    font-size: @font-size;
    font-weight:bold;
    box-shadow:inset @separator-border-color 0 -1px 0, inset @separator-border-color 0 1px 0;
  }

  &-item {
    flex: 1;

    &.is-fixed {
      flex: 0 0 auto; // Uses a fixed-height
    }
  }
}


.text-bits (@type) {
  @text-color: "text-color-@{type}";
  @bg-color: "background-color-@{type}";

  code {
    color: @@text-color;
    background: fadeout(@@bg-color, 80%);
  }

  a, a code {
    color: @@text-color;
    text-decoration: underline;
    color: darken(@@text-color, 10%);

    &:hover {
      color: darken(@@text-color, 15%);
    }
  }
}

.text-info {
  .text-bits(info);
}

.text-success {
  .text-bits(success);
}

.text-warning {
  .text-bits(warning);
}

.text-error {
  .text-bits(error);
}

Fix build issue: import ui vars.

@import "ui-variables";

.text-bits (@type) {
  @text-color: "text-color-@{type}";
  @bg-color: "background-color-@{type}";

  code {
    color: @@text-color;
    background: fadeout(@@bg-color, 80%);
  }

  a, a code {
    color: @@text-color;
    text-decoration: underline;
    color: darken(@@text-color, 10%);

    &:hover {
      color: darken(@@text-color, 15%);
    }
  }
}

.text-info {
  .text-bits(info);
}

.text-success {
  .text-bits(success);
}

.text-warning {
  .text-bits(warning);
}

.text-error {
  .text-bits(error);
}


// 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! //////////


.editor .search-results .marker .region {
  background-color: transparent;
  border: 1px solid @cyan;
}

.editor .search-results .marker.current-result .region {
  border: 1px solid @base3;
}

Add css for new find decorations

.editor .search-results .marker .region,
.editor .find-result .region {
  background-color: transparent;
  border: 1px solid @cyan;
}

.editor .search-results .marker.current-result .region,
.editor .current-result .region {
  border: 1px solid @base3;
}


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

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

.full-height {
 height: 100%;
}

.no-scroll {
  overflow: hidden;
}

/*
Disable the left border from the separator. Use :host ::ng-deep to bypass view encaplsulation, because
it doesn't work for the dynamically added vertical-split-separator component.

https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling
 */
//noinspection CssInvalidPseudoSelector
:host ::ng-deep vertical-split-separator {
  border: 0;
}

Hide the handle of the split panel

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

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

.full-height {
 height: 100%;
}

.no-scroll {
  overflow: hidden;
}

/*
Disable the left border from the separator. Use :host ::ng-deep to bypass view encaplsulation, because
it doesn't work for the dynamically added vertical-split-separator component.

https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling
 */
//noinspection CssInvalidPseudoSelector
:host ::ng-deep vertical-split-separator {
  border: 0;
}

//noinspection CssInvalidPseudoSelector
:host ::ng-deep vertical-split-separator .handle {
  display: none;
}


@import 'ui-variables';
@import 'syntax-variables';

.bubble {
  box-shadow: 0px 0px 20px 0px @syntax-text-color;
  left: 3px;
  background: rgba(33, 38, 38, 0.92);
  font-family: @font-family;
  font-size: @font-size;
  width: auto;
  padding: 10px;
  border-radius: 3px;

  .bubble-code {
    line-height: 18px;
    color: #f6f6f6;
    white-space: pre-wrap;
    padding: 5px;
    margin-top: 5px;
  }

  .diff-button {
    margin-right: 5px;
    text-align: center;
    .icon::before {
      margin: 0;
    }
  }
}

Use the editor font for showing diffs

@import 'ui-variables';
@import 'syntax-variables';

.bubble {
  box-shadow: 0px 0px 20px 0px @syntax-text-color;
  left: 3px;
  background: rgba(33, 38, 38, 0.92);
  font-family: @font-family;
  font-size: @font-size;
  width: auto;
  padding: 10px;
  border-radius: 3px;

  .bubble-code {
    line-height: 18px;
    color: #f6f6f6;
    white-space: pre-wrap;
    padding: 5px;
    margin-top: 5px;

    // Copied from https://github.com/atom/atom/blob/master/static/text-editor-light.less
    font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  }

  .diff-button {
    margin-right: 5px;
    text-align: center;
    .icon::before {
      margin: 0;
    }
  }
}