.grid {
  .visible-block;
  box-lines: multiple;
  flex-flow: row wrap;

  // this is useful when we want a grid to also behave as a .row
  // this removes the clearfix that gets created from adding .row
  // removing the clearfix allows flexbox to work the way it should
  &::before, &::after {
    display: none;
  }

  .grid-item {
    .visible-block;
    flex-flow: column wrap;
    .panel {
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      .panel-content {
        display: flex;
        flex-grow: 1;
        flex-direction: column;

        > :first-child {
          flex-grow: 1;
        }
      }
    }
  }
}

.row-flex {

  &.row-flex-align-vertical-bottom {
    align-items: flex-end;
  }
}

/* Screen Size: Small (@screen-small) and above */

& when (@screen-small-enabled) {
  @media (min-width: @screen-small) {

    .grid {
      display: flex;

      .grid-item {
        display: flex;
      }
    }

  }
}

& when (@screen-x-large-enabled) {
  @media (min-width: @screen-x-large) {

    .make-grid(x-large);

  }
}

Use .make-row mixin for screen-x-large

.grid {
  .visible-block;
  box-lines: multiple;
  flex-flow: row wrap;

  // this is useful when we want a grid to also behave as a .row
  // this removes the clearfix that gets created from adding .row
  // removing the clearfix allows flexbox to work the way it should
  &::before, &::after {
    display: none;
  }

  .grid-item {
    .visible-block;
    flex-flow: column wrap;
    .panel {
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      .panel-content {
        display: flex;
        flex-grow: 1;
        flex-direction: column;

        > :first-child {
          flex-grow: 1;
        }
      }
    }
  }
}

.row-flex {

  &.row-flex-align-vertical-bottom {
    align-items: flex-end;
  }
}

/* Screen Size: Small (@screen-small) and above */

& when (@screen-small-enabled) {
  @media (min-width: @screen-small) {

    .grid {
      display: flex;

      .grid-item {
        display: flex;
      }
    }

  }
}

& when (@screen-x-large-enabled) {
  @media (min-width: @screen-x-large) {

    .make-grid(x-large);

    .row {
      .make-row(@grid-gutter-width-screen-x-large);
    }

  }
}


@import (less) "../lib/kendo-ui/styles/kendo.common.css";
@import (less) "../lib/kendo-ui/styles/kendo.default.css";
@import (less) "../lib/wingspan-forms/wingspan-forms.css";

body {
  overflow: auto;
}

div.App {
  background: #fff;
  padding: 10px;
  display:table;

  .k-state-selected {
    color: inherit;
  }

  > div {
    display:table-cell;
  }
  > pre {
    display:table-cell;
  }
}

Make state display line up vertically with top of the app

@import (less) "../lib/kendo-ui/styles/kendo.common.css";
@import (less) "../lib/kendo-ui/styles/kendo.default.css";
@import (less) "../lib/wingspan-forms/wingspan-forms.css";

body {
  overflow: auto;
}

@appPadding:10px;

div.App {
  background: #fff;
  padding:@appPadding;
  display:table;

  .k-state-selected {
    color:inherit;
  }

  > div {
    display:table-cell;
    width:50%;
    padding-right:@appPadding;
  }
  > pre {
    display:table-cell;
    position:absolute;
    top:@appPadding;
  }
}


// GitHub.com styles

// These are the GitHub Flavored Markdown styles also found on github.com.
// They can be anabled in the markdown-preview settings by turning on "Use GitHub.com styles".

@import (reference) "../assets/primer-markdown";

.markdown-preview[data-use-github-style] {

  // Includes GitHub.com styles from `../assets/primer-markdown.less`.
  // Source: https://github.com/primer/markdown/blob/master/components/markdown.scss
  .markdown-body();

  // The styles below override/complement the GitHub.com styles
  // It's needed because some markup or global styles are different
  padding: 30px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  overflow: scroll;

  a {
    color: #337ab7;
  }

  code {
    color: inherit;
  }

  atom-text-editor {
    padding: .8em 1em;
    margin-bottom: 1em;
    font-size: .85em;
    border-radius: 4px;
    overflow: auto;
  }
}

Replace source link with updated link

// GitHub.com styles

// These are the GitHub Flavored Markdown styles also found on github.com.
// They can be anabled in the markdown-preview settings by turning on "Use GitHub.com styles".

@import (reference) "../assets/primer-markdown";

.markdown-preview[data-use-github-style] {

  // Includes GitHub.com styles from `../assets/primer-markdown.less`.
  // Source: https://github.com/primer/primer/tree/master/modules/primer-markdown
  .markdown-body();

  // The styles below override/complement the GitHub.com styles
  // It's needed because some markup or global styles are different
  padding: 30px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  overflow: scroll;

  a {
    color: #337ab7;
  }

  code {
    color: inherit;
  }

  atom-text-editor {
    padding: .8em 1em;
    margin-bottom: 1em;
    font-size: .85em;
    border-radius: 4px;
    overflow: auto;
  }
}


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

  height: 100%;
  margin: 0 auto;

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

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

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

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

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

    > path.domain {
      visibility: hidden;
    }
  }

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

    &.failed {
      fill: #ed5c5c;
    }

    &.canceled {
      fill: #999999;
    }

    &.queue {
      fill: #e6d9f2;
    }
  }

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

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

Move svg styles inside svg

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

  height: 100%;
  margin: 0 auto;

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

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

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

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

      &.failed {
        fill: #ed5c5c;
      }

      &.canceled {
        fill: #999999;
      }

      &.queue {
        fill: #e6d9f2;
      }
    }

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

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

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

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

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


.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol
    overflow-x: scroll;

    > li {
      display: block;
      flex-grow: 1;
      padding: 10px 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});

Change tab-row scrolling from "scroll" to "auto"

.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol
    overflow-x: auto;

    > li {
      display: block;
      flex-grow: 1;
      padding: 10px 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});


@import "variable";
.ftep {
    .ftep-log {
        font-family: monospace;
        font-size: 0.6rem;
        overflow-x: auto;
        width: 100%;
        table {
            margin-bottom: 1rem;
            th {
                padding: 0.4rem;
                padding-left: 0;
            }
            .job-timestamp {
                font-weight: bold;
                padding: 2px 1rem 2px 0;
                vertical-align: top;
                user-select: none;
            }
            .job-message {
                background-color: transparent;
                border: none;
                margin: 0;
                padding: 2px 0;
                white-space:pre-wrap;
            }
        }
    }
}

Disable line breaks on job log timestamps.

@import "variable";
.ftep {
    .ftep-log {
        font-family: monospace;
        font-size: 0.6rem;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        table {
            margin-bottom: 1rem;
            th {
                padding: 0.4rem;
                padding-left: 0;
            }
            .job-timestamp {
                font-weight: bold;
                padding: 2px 1rem 2px 0;
                vertical-align: top;
                user-select: none;
                white-space: nowrap;
            }
            .job-message {
                background-color: transparent;
                border: none;
                margin: 0;
                padding: 2px 0;
                white-space:pre-wrap;
            }
        }
    }
}


ul {
  margin: 0;
  padding: 0;

  > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

Fix text area font in firefox, IE.

ul {
  margin: 0;
  padding: 0;

  > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}
textarea {
  font-family: inherit;
}


// CSS used on the exception report view; expects Bootstrap CSS to be present as well.

body {
  margin-top: 5px;
}

dl:not(.dl-horizontal) dd {
  margin-left: 10px;
}

td.source-location {
  text-align: right;
}

.filtered {
  color: silver;
}

td .filtered {
  margin-left: 10px;
}

.hide-filtered .filtered {
  display: none;
}

Increase the amount of inset

// CSS used on the exception report view; expects Bootstrap CSS to be present as well.

body {
  margin-top: 5px;
}

dl:not(.dl-horizontal) dd {
  margin-left: 25px;
}

td.source-location {
  text-align: right;
}

.filtered {
  color: silver;
}

td .filtered {
  margin-left: 10px;
}

.hide-filtered .filtered {
  display: none;
}


// Add custom mobile-first rules here
// Sample rules below can be removed

// Global

html,
body {
	.min-height(100%);
}
body {
	.background-gradient(#006c89, #007495, #005971, 135);
	.padding(vertical; 10%);
}

// Header

.logo {
	.crop();
	.spaced-block(@blockMarginBottom; 120px; 40px);
}

// Footer

.footer {
	.padding(top; 3);
	&__license,
	&__links {
		.font-size(1.3; 1.4em);
	}
	&__license {
		.spaced-block(1);
	}
	&__links {
		.inline-list(.8);
		.spaced(0);
		& > a {
			&:hover {
				.underline();
			}
		}
	}
}

// Index

.heading {
	.font-size(2.4);
	.max-width(75);
	.spaced();
}
.nav {
	.margin(vertical; 10px; 5);
	&__button {
		.border(light; 70%);
		.fill();
		&:hover {
			.border(@white);
		}
	}
}

Move anchor styling in sample CSS to correct position within footer class

// Add custom mobile-first rules here
// Sample rules below can be removed

// Global

html,
body {
	.min-height(100%);
}
body {
	.background-gradient(#006c89, #007495, #005971, 135);
	.padding(vertical; 10%);
}

// Header

.logo {
	.crop();
	.spaced-block(@blockMarginBottom; 120px; 40px);
}

// Footer

.footer {
	.padding(top; 3);
	a {
		&:hover {
			.underline();
		}
	}
	&__license,
	&__links {
		.font-size(1.3; 1.4em);
	}
	&__license {
		.spaced-block(1);
	}
	&__links {
		.inline-list(.8);
		.spaced(0);
	}
}

// Index

.heading {
	.font-size(2.4);
	.max-width(75);
	.spaced();
}
.nav {
	.margin(vertical; 10px; 5);
	&__button {
		.border(light; 70%);
		.fill();
		&:hover {
			.border(@white);
		}
	}
}


/* This class is for the widget subarea inside the widget_area and after
   the prompt div. */
div.widget_subarea {
    padding: 0.44em 0.4em 0.4em 1px;
    margin-left: 6px;
    .box-flex1();
}

Adjust weidget box so widget_subarea aligns with codecell

div.widget_area {
    page-break-inside: avoid;
    .hbox();
}

/* This class is for the widget subarea inside the widget_area and after
   the prompt div. */
div.widget_subarea {
    padding: 0.44em 0.4em 0.4em 1px;
    margin-left: 6px;
    .box-flex1();
}


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

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  border-radius: 0;
}

// Blocks of code
pre {
  padding: (@line-height-computed / 2);
  margin: 0 0( @line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  border-radius: 0;
}

Change upper case to lower case

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

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  border-radius: 0;
}

// Blocks of code
pre {
  padding: (@line-height-computed / 2);
  margin: 0 0( @line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  border-radius: 0;
}


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

.notification-icon {
  @top: notification-icon;
  .link-white();
  .link-plain();
  .center-content();
  display: flex;

  &--glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }

  &--mobile {
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    color: inherit;
  }

  &__count {
    font-size: @font-size--normal;
    font-weight: 500;
    margin-left: 5px;

    .@{top}--mobile & {
      font-size: @font-size--small;
      margin-left: 0;
      color: @osu-colour-c1;
      background-color: @osu-colour-d3;
      position: absolute;
      padding: 2px 5px;
      border-radius: 10000px;
      right: 2px;
      bottom: 2px;
    }
  }

  &__inbox {
    .@{top}--mobile & {
      padding-bottom: 2px;
    }
  }
}

Fix mobile menu icon alignment

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

.notification-icon {
  @top: notification-icon;
  .link-white();
  .link-plain();
  .center-content();
  display: flex;

  &--glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }

  &--mobile {
    flex-direction: column;
    color: inherit;
    height: 100%;
  }

  &__count {
    font-size: @font-size--normal;
    font-weight: 500;
    margin-left: 5px;

    .@{top}--mobile & {
      font-size: @font-size--small;
      margin-left: 0;
      color: @osu-colour-c1;
      background-color: @osu-colour-d3;
      position: absolute;
      padding: 2px 5px;
      border-radius: 10000px;
      right: 2px;
      bottom: 2px;
    }
  }

  &__inbox {
    .@{top}--mobile & {
      padding-bottom: 2px;
    }
  }
}


@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-cell {
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

Use flex-box instead of absolute positioning

@import "ui-variables";

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

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

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

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

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

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


@import (reference) "livefyre-bootstrap/src/styles/fycon-chars.less";

.lf-thread-replies {
    .hub-list-more,
    .hub-list-queue {
        width: initial;
        position: relative;
        z-index: 1;
        margin-left: 10px;
        margin-top: 20px;
    }

    .hub-list-queue.hub-more-button-holding {
        .hub-more-notification:before {
            content: '●';
            font-size: 14px;
            margin-left: 3px;
            line-height: 10px;
        }
    }
}

Fix for ie9 queue button

@import (reference) "livefyre-bootstrap/src/styles/fycon-chars.less";

.lf-thread-replies {
    .hub-list-more,
    .hub-list-queue {
        display: inline; // ie9 hack for inline-block
        zoom: 1;
        line-height: 50px;
        width: initial;
        position: relative;
        z-index: 1;
        margin-left: 10px;
        margin-top: 20px;
    }

    .hub-list-queue.hub-more-button-holding {
        .hub-more-notification:before {
            content: '●';
            font-size: 14px;
            margin-left: 3px;
            line-height: 10px;
        }
    }
}


@import "octicon-utf-codes.less";

.editor .gutter .line-number.bookmarked .icon-right {
  visibility: visible;

  &:before {
    content: @bookmark;
    color: #09C;
  }
}

.bookmarks-view {
  .bookmark {
    .line-text {
      font-family: monospace;
    }
  }
}

Update to work with the shadow dom

@import "octicon-utf-codes.less";

.editor, atom-text-editor::shadow {
  .gutter .line-number.bookmarked .icon-right {
    visibility: visible;

    &:before {
      content: @bookmark;
      color: #09C;
    }
  }
}

.bookmarks-view {
  .bookmark {
    .line-text {
      font-family: monospace;
    }
  }
}


@import (less) "../lib/kendo-ui/styles/kendo.common.css";
@import (less) "../lib/kendo-ui/styles/kendo.default.css";
@import (less) "../lib/wingspan-forms/wingspan-forms.css";

body.sandbox {
  background: #fff;
  padding: 0 10px;
  overflow: auto;

  .k-state-selected {
    color: inherit;
  }
}

Add some padding to top & bottom as well as left & right

@import (less) "../lib/kendo-ui/styles/kendo.common.css";
@import (less) "../lib/kendo-ui/styles/kendo.default.css";
@import (less) "../lib/wingspan-forms/wingspan-forms.css";

body.sandbox {
  background: #fff;
  padding: 10px;
  overflow: auto;

  .k-state-selected {
    color: inherit;
  }
}


// Content --------------------------------------------------------------------

#content {
  background: url("@{imgPath}/bg_pattern.png");

  & > section {
    background: url("@{imgPath}/about/sf_watermark.png") no-repeat top right;
    .container;
  }

  h1 {
    margin: 100px auto 0;
    color: #444;
    font-size: 48px;
    line-height: 62px;
    text-align: center;
  }

  h1 + p,
  .story p {
    margin-top: 0;
    margin-bottom: 0;
    color: @link;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,1);
  }

  .story {
    margin: 80px auto 0;
    padding: 10px 0;
    .push(2);
    .pull(2);
    border: 1px;
    border-style: dashed;
    border-color: @grayLight;
    border-left: none;
    border-right: none;

    p {
      margin-top: 18px;
      margin-bottom: 18px;
    }
  }

  hr {
    border-style: dashed;
    border-color: @grayLight;
    margin-bottom: 65px;
  }
}

Change color of our story

// Content --------------------------------------------------------------------

#content {
  background: url("@{imgPath}/bg_pattern.png");

  & > section {
    background: url("@{imgPath}/about/sf_watermark.png") no-repeat top right;
    .container;
  }

  h1 {
    margin: 100px auto 0;
    color: #444;
    font-size: 48px;
    line-height: 62px;
    text-align: center;
  }

  h1 + p,
  .story p {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,1);
  }

  h1 + p { color: @link; }

  .story {
    margin: 80px auto 0;
    padding: 10px 0;
    .push(2);
    .pull(2);
    border: 1px;
    border-style: dashed;
    border-color: @grayLight;
    border-left: none;
    border-right: none;

    p {
      margin-top: 18px;
      margin-bottom: 18px;
    }
  }

  hr {
    border-style: dashed;
    border-color: @grayLight;
    margin-bottom: 65px;
  }
}


.dwcm-autocomplete-textfield {
    .label-group {
        margin-bottom: 5px;
    }

    .dropdown-group {
        position: relative;
    }
}

.dwcm-autocomplete-dropdown {
    position: absolute;
    z-index: 1001;
    background: @white;
    width: 100%;
    left: 0px;
    top: 46px;
    list-style-type: none;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: @border-radius-base;

    li {
        padding: 8px 5px;
        border-bottom: 1px solid @gray-lighter;

        &.active {
            background: @gray-lighter;
        }

        &:hover {
            background: @gray-lighter;
            cursor: pointer;
        }

        &:last-child {
            border-bottom: none;
        }
    }
}

Add box shadow to dropdown

.dwcm-autocomplete-textfield {
    .label-group {
        margin-bottom: 5px;
    }

    .dropdown-group {
        position: relative;
    }
}

.dwcm-autocomplete-dropdown {
    position: absolute;
    z-index: 1001;
    background: @white;
    width: 100%;
    left: 0px;
    top: 46px;
    list-style-type: none;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0 0 @border-radius-base @border-radius-base;

    .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));

    li {
        padding: 8px 5px;
        border-bottom: 1px solid @gray-lighter;

        &.active {
            background: @gray-lighter;
        }

        &:hover {
            background: @gray-lighter;
            cursor: pointer;
        }

        &:last-child {
            border-bottom: none;
        }
    }
}


@media print {
  /**
   * ajouter là-dedans les éléments qui ont besoin d'être
   * resetés de manière très bourrine pour le print
   */
  body,
  html,
  #page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* cachage des éléments inutiles ! */
  .noprint {
    display: none;
  }

  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }

  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }

  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser
   * à limiter cette possibilité aux liens dans le contenu */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* ici fix propriétés particulières */

} /* end print */

Fix mineur pour la partie print

@media print {
  /**
   * ajouter là-dedans les éléments qui ont besoin d'être
   * resetés de manière très bourrine pour le print
   */
  body,
  html,
  #page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* cachage des éléments inutiles ! */
  .noprint {
    display: none;
  }

  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }

  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }

  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser
   * à limiter cette possibilité aux liens dans le contenu */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* ici fix propriétés particulières */

} /* end print */


//@import "bootstrap/less/variables";
//@import "bootstrap/less/mixins/nav-divider";
//@import "bootstrap/less/mixins/border-radius";
@import "bootstrap/less/bootstrap";
@import "selectize/src/less/selectize.bootstrap3";
@import "bootstrap/less/theme";
@import "font-awesome/less/font-awesome";

.popover-content {
  font-weight: normal;
}

td form button.close {
  float: none;
}

.twitter-typeahead .token-input.tt-input {
  height: 20px;
}

.input-group > .selectize-control > .selectize-input {
  .border-right-radius(0)
}

.input-group .selectize-input {
  vertical-align: top;
}

.hidden {
  display: none;
}

td.filterable a {
  color: @gray-dark;
}

.panel-body dl {
  margin-bottom: 0px;
}

table.collapse.in {
  display: table;
}

dl.spaced dd, dl.spaced dt {
  margin-top: 2px;
  margin-bottom: 2px;
}

Fix styling of Selectize fields and input groups

//@import "bootstrap/less/variables";
//@import "bootstrap/less/mixins/nav-divider";
//@import "bootstrap/less/mixins/border-radius";
@import "bootstrap/less/bootstrap";
@import "selectize/src/less/selectize.bootstrap3";
@import "bootstrap/less/theme";
@import "font-awesome/less/font-awesome";

.popover-content {
  font-weight: normal;
}

td form button.close {
  float: none;
}

.entity-typeahead .selectize-input {
  .border-right-radius(0)
}

.filter-tokenfield .selectize-input {
  .border-left-radius(0)
}

.input-group .selectize-input {
  vertical-align: top;
}

.hidden {
  display: none;
}

td.filterable a {
  color: @gray-dark;
}

.panel-body dl {
  margin-bottom: 0px;
}

table.collapse.in {
  display: table;
}

dl.spaced dd, dl.spaced dt {
  margin-top: 2px;
  margin-bottom: 2px;
}


@import "../../../static/variables/ui-variables";

@btn-default-bg-color:      lighten(@toolbar-background-color,4%);

@accent-primary:            #f07746;
@accent-primary-dark:       darken(#f07746, 1%);

@border-color-secondary:   lighten(@background-secondary, 10%);

@toolbar-background-color: #41403b;
@light:  rgb(246, 246, 246);

.sheet-toolbar .btn-toolbar img.content-mask {
  background-color: @light;
}

.layout-mode-popout .sheet-toolbar {
  display: none;
}

.sheet-toolbar-container {
  background-image: -webkit-linear-gradient(top,@toolbar-background-color, darken(@toolbar-background-color,5%));
  box-shadow: none;
}

.sheet-toolbar .item-back img.content-mask{
  background-color: @light;
}

.sheet-toolbar .item-back .item-back-title{
  color: @light;
}

.btn-icon img.content-mask {
  background-color:@light;
}

.btn-icon img.content-mask:hover {
  background-color:@accent-primary;
}

Update theme, fix a few strange glitches

@import "../../../static/variables/ui-variables";

@accent-primary:            #f07746;
@accent-primary-dark:       darken(#f07746, 1%);

@border-color-secondary:   lighten(@background-secondary, 10%);

@toolbar-background-color: #41403b;
@light:  rgb(246, 246, 246);

.sheet-toolbar .btn-toolbar img.content-mask {
  background-color: @light;
}

.layout-mode-popout .sheet-toolbar {
  display: none;
}

.sheet-toolbar-container {
  background-image: -webkit-linear-gradient(top,@toolbar-background-color, darken(@toolbar-background-color,5%));
  box-shadow: none;
  .btn {
    background: lighten(@toolbar-background-color,4%);
  }
  .btn.btn-toolbar {
    color: @light;
  }
  .toolbar-activity .activity-toolbar-icon {
    background: @light;
}
}

.sheet-toolbar .item-back img.content-mask{
  background-color: @light;
}

.sheet-toolbar .item-back .item-back-title{
  color: @light;
}

.sheet-toolbar .selection-bar {
  .absolute {
    border-color: lighten(@toolbar-background-color, 5%);
    background-color: darken(@toolbar-background-color, 8%);

    .inner {
      .centered {
        color: @light;
      }
    }
  }
}

.btn-icon img.content-mask {
  background-color:@light;
  color: @light;
}

.btn-icon img.content-mask:hover {
  background-color:@accent-primary;
}


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

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

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

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

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

.top-fact-controls {
  position: relative;
  z-index: 1; // Should be placed above FactWheel
}

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

Remove currently unnecessary z-index that causes it to be hard to hover the factwheel.

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

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

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

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

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

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

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


//For some reason if you use the md-select in a mdDialog the background
//is transparent, which is not helpful
md-select-menu {
  background-color: #fff;
}
.no-padding {
  padding-right: 0;
  padding-left: 0;
}

Add 'center' class for widgets

//For some reason if you use the md-select in a mdDialog the background
//is transparent, which is not helpful
md-select-menu {
  background-color: #fff;
}
.no-padding {
  padding-right: 0;
  padding-left: 0;
}
.center {
  text-align: center;
}


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

Make query details window width 50% larger

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

.gmf-displayquerywindow {
  width: 36rem;
  max-width: 36rem;
}


@import "flexible-box-model.less";
@import "notebook.less";
@import "printnotebook.less";
@import "renderedhtml.less";
@import "tooltip.less";
@import "variables.less";

Add and remove boostra squashed commit

@import "flexible-box-model.less";
@import "notebook.less";
@import "printnotebook.less";
@import "renderedhtml.less";
@import "tooltip.less";
@import "variables.less";
@import "../components/bootstrap/less/bootstrap";


.map {
  min-width: 320px;
  height: 400px;
}

.leaflet-container {
  background-color: rgba(255, 0, 0, 0);
  border: 3px solid #555;
}

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

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

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

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

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

    ul {
      padding-left: 15px;
    }
  }

  &.legend {
    ul {
      list-style: none;
      padding: 0;

      li {

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

Use light blue background + add bottom margin to map container

.map {
  min-width: 320px;
  height: 400px;
}

.leaflet-container {
  background-color: #edf7f7;
  border: 3px solid #555;
  margin-bottom: 10px;
}

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

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

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

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

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

    ul {
      padding-left: 15px;
    }
  }

  &.legend {
    ul {
      list-style: none;
      padding: 0;

      li {

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


.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: 3;
    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 board inset shadow z-indexing

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


@import "variables";

.topbar {
  display: none;
}

.opblock-colors(@background, @foreground) {
  border-color: @foreground;
  background: @background;
  .opblock-summary {
      border-color: @foreground;
  }
  .opblock-summary-method {
    background: @foreground;
  }
}

.swagger-container .swagger-ui {
  .btn.authorize {
    color: @suomifi-success-base;
    border-color: @suomifi-success-base;
  }
  .opblock.opblock-get {
    .opblock-colors(fade(@suomifi-highlight-base, 10%), @suomifi-highlight-base)
  }
  .opblock.opblock-post {
    .opblock-colors(fade(@suomifi-success-base, 10%), @suomifi-success-base)
  }
  .opblock.opblock-put {
    .opblock-colors(fade(@suomifi-warning-base, 10%), @suomifi-warning-base)
  }
  .opblock.opblock-delete {
    .opblock-colors(fade(@suomifi-alert-base, 10%), @suomifi-alert-base)
  }
}

Add text-shadow to hard to read elements

@import "variables";

.topbar {
  display: none;
}

.opblock-colors(@background, @foreground, @shadow: undefined) {
  border-color: @foreground;
  background: @background;
  .opblock-summary {
      border-color: @foreground;
  }
  .opblock-summary-method {
    background: @foreground;
  }

  .opblock-summary-method when (@shadow = true){
    text-shadow: 0 2px darken(@foreground, 5%)
  }
}

.swagger-container .swagger-ui {
  .btn.authorize {
    color: @suomifi-success-base;
    border-color: @suomifi-success-base;
  }
  .opblock.opblock-get {
    .opblock-colors(fade(@suomifi-highlight-base, 10%), @suomifi-highlight-base)
  }
  .opblock.opblock-post {
    .opblock-colors(fade(@suomifi-success-base, 10%), @suomifi-success-base, true)
  }
  .opblock.opblock-put {
    .opblock-colors(fade(@suomifi-warning-base, 10%), @suomifi-warning-base, true)
  }
  .opblock.opblock-delete {
    .opblock-colors(fade(@suomifi-alert-base, 10%), @suomifi-alert-base)
  }
}


.card-view {
    .wrapper {
       padding: 15px;
    }
    .card-item {
        white-space: nowrap;
        overflow: hidden;
        background: @gray-lighter;
        padding: 15px;

        &:hover {
            cursor: pointer;
        }

        img {
            height: 128px;
            width: 128px;
            margin: 0 auto;
            margin-bottom: 15px;
        }
        .card-info {
            margin: 0;
        }

    }
}

Fix font issues in card view on small screens

.card-view {
    .wrapper {
       padding: 15px;
    }
    .card-item {
        white-space: nowrap;
        overflow: hidden;
        background: @gray-lighter;
        padding: 15px;

        &:hover {
            cursor: pointer;
        }

        img {
            height: 128px;
            width: 128px;
            margin: 0 auto;
            margin-bottom: 15px;
        }
        .card-info {
            margin: 0;
        }

    }
}

@media (min-width: 1px) and (max-width: @screen-sm-max) {

    .card-view {
        .card-item {
            h4 {
                font-size: 15px;
            }
        }
    }
}


@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './mixin';

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

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

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .reset-component;
  .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
  }
}

.@{ant-prefix}-input-password-icon {
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    color: #333;
  }
}

@import './search-input';

Fix clear icon style in Input/Input.Search

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './mixin';

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

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

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .reset-component;
  .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
  }
}

.@{ant-prefix}-input-password-icon {
  color: @text-color-secondary;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    color: #333;
  }
}

.@{ant-prefix}-input-clear-icon {
  color: @disabled-color;
  font-size: @font-size-sm;
  vertical-align: top;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @text-color-secondary;
  }

  &:active {
    color: @text-color;
  }

  + i {
    margin-left: 6px;
  }
}

@import './search-input';


.mw-echo-ui-confirmationPopupWidget {
	position: relative;
	bottom: 1em;
	width: 100%;
	text-align: center;

	&-popup {
		display: inline-block;
		background-color: #333;
		border-radius: 0.5em;
		padding: 0.5em 1em;
		text-align: left;
		color: #fff;

		span {
			vertical-align: middle;
		}

		.oo-ui-iconElement-icon {
			display: inline-block;
			margin-right: 0.5em;
		}
	}
}

Replace outdated `border-radius` value with WikimediaUI one

.mw-echo-ui-confirmationPopupWidget {
	position: relative;
	bottom: 1em;
	width: 100%;
	text-align: center;

	&-popup {
		display: inline-block;
		background-color: #333;
		border-radius: 2px;
		padding: 0.5em 1em;
		text-align: left;
		color: #fff;

		span {
			vertical-align: middle;
		}

		.oo-ui-iconElement-icon {
			display: inline-block;
			margin-right: 0.5em;
		}
	}
}


//
// Toolbar group
//

@toolbar-group-background-color: transparent;
@toolbar-group-border: none;
@toolbar-group-border-radius: 0;
@toolbar-group-padding-x: 4px;
@toolbar-group-separator-color: @toolbar-border-color;
@toolbar-group-separator-width: 1px;
@toolbar-group-spacing-x: 0;

.tox-toolbar__group {
  align-items: center;
  background: @toolbar-group-background-color;
  border: @toolbar-group-border;
  border-radius: @toolbar-group-border-radius;
  display: flex;
  margin: 0 @toolbar-group-spacing-x 0 0;
  padding: 0 @toolbar-group-padding-x;
}

.tox-toolbar__group:not(:last-of-type) {
  border-right: @toolbar-group-separator-width solid @toolbar-group-separator-color;
}

// Align toolbar group to the right
.tox-toolbar__group--pull-right {
  margin-left: auto;
}

Apply flex-wrap within groups as well as around groups, to stop long groups extending outside the editor container

//
// Toolbar group
//

@toolbar-group-background-color: transparent;
@toolbar-group-border: none;
@toolbar-group-border-radius: 0;
@toolbar-group-padding-x: 4px;
@toolbar-group-separator-color: @toolbar-border-color;
@toolbar-group-separator-width: 1px;
@toolbar-group-spacing-x: 0;

.tox-toolbar__group {
  align-items: center;
  background: @toolbar-group-background-color;
  border: @toolbar-group-border;
  border-radius: @toolbar-group-border-radius;
  display: flex;
  flex-wrap: wrap;
  margin: 0 @toolbar-group-spacing-x 0 0;
  padding: 0 @toolbar-group-padding-x;
}

.tox-toolbar__group:not(:last-of-type) {
  border-right: @toolbar-group-separator-width solid @toolbar-group-separator-color;
}

// Align toolbar group to the right
.tox-toolbar__group--pull-right {
  margin-left: auto;
}


@import "ui-variables";

atom-text-editor .highlights {
  .highlight.highlight-selected .region {
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }

  .highlight-selected .region {
    border-radius: 3px;
    box-sizing: border-box;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
  }

  // Box
  .highlight-selected .region {
    border-color: #ddd;
  }
  // Background
  .highlight-selected.background .region {
    background-color: rgba(155, 149, 0, 0.6);
  }
  // Light theme box (set in settings)
  .highlight-selected.light-theme .region {
    border-color: rgba(255, 128, 64, 0.4);
  }
  // Light theme background (set in settings)
  .highlight-selected.light-theme.background .region {
    background-color: rgba(255, 128, 64, 0.2);
  }
}

status-bar {
  .highlight-selected-status {
    display: inline-block;
  }
  .highlight-selected-hidden {
    display: none;
  }
}

Add back the shadow selector so it doesnt break in versions below 1.13

@import "ui-variables";

atom-text-editor::shadow,
atom-text-editor .highlights {
  .highlight.highlight-selected .region {
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }

  .highlight-selected .region {
    border-radius: 3px;
    box-sizing: border-box;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
  }

  // Box
  .highlight-selected .region {
    border-color: #ddd;
  }
  // Background
  .highlight-selected.background .region {
    background-color: rgba(155, 149, 0, 0.6);
  }
  // Light theme box (set in settings)
  .highlight-selected.light-theme .region {
    border-color: rgba(255, 128, 64, 0.4);
  }
  // Light theme background (set in settings)
  .highlight-selected.light-theme.background .region {
    background-color: rgba(255, 128, 64, 0.2);
  }
}

status-bar {
  .highlight-selected-status {
    display: inline-block;
  }
  .highlight-selected-hidden {
    display: none;
  }
}


.reference-book {

  .navbar {
    height: 60px;
    .teacher-edition {
      line-height: 60px;
      cursor: pointer;
    }
    .section-title {
      line-height: 60px;
      margin-left: 40px;
    }
    .dropdown-menu {
      width: 300px;

      ul{ padding-left: 0rem; }
      h3 {
        #fonts > .sans();
        border-top: 1px dotted @tutor-neutral;
      }
      li {
        #fonts > .sans(1.4rem);
        border-top: 1px dotted @tutor-neutral;
      }
      // no top border on the first element
      ul:first-of-type {
        h3, a { border-top: 0; }
      }
    }

  }
}

Fix reference view toc position to left side of screen

.reference-book {

  .navbar {
    height: 60px;

    .teacher-edition {
      line-height: 60px;
      cursor: pointer;
    }

    .section-title {
      line-height: 60px;
      margin-left: 40px;
    }

    .dropdown-menu {
      position: fixed;
      top: 60px;
      left: 0;
      bottom: 0;
      width: 300px;

      ul {
        padding-left: 0rem;
      }

      h3 {
        #fonts > .sans();
        border-top: 1px dotted @tutor-neutral;
      }

      li {
        #fonts > .sans(1.4rem);
        border-top: 1px dotted @tutor-neutral;
      }

      // no top border on the first element
      ul:first-of-type {
        h3,
        a {
          border-top: 0;
        }
      }
    }

  }
}


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

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

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

Make excerpts look a little cooler

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

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

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


.SiteChangeSelector {
  margin-bottom: 15px;

  .SiteChangeSelector-option {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;

    input {
      margin-right: 5px;
    }

    &::after {
      display: block;
      width: 20px;
      height: 25px;
      margin-left: 10px;
      float: right;
      content: "";
      background-color: transparent;
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: top right;
      opacity: 0.6;
    }

    &.SiteChangeSelector-option--selected::after {
      opacity: 1;
    }

    &.SiteChangeSelector-option--cannula::after {
      background-image: url(../../components/sitechange/sitechange_cannula.png);
    }

    &.SiteChangeSelector-option--tubing::after {
      background-image: url(../../components/sitechange/sitechange_tubing.png);
    }
  }
}

Increase margin between site change radio and label

.SiteChangeSelector {
  margin-bottom: 15px;

  .SiteChangeSelector-option {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;

    input {
      margin-right: 10px;
    }

    &::after {
      display: block;
      width: 20px;
      height: 25px;
      margin-left: 10px;
      float: right;
      content: "";
      background-color: transparent;
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: top right;
      opacity: 0.6;
    }

    &.SiteChangeSelector-option--selected::after {
      opacity: 1;
    }

    &.SiteChangeSelector-option--cannula::after {
      background-image: url(../../components/sitechange/sitechange_cannula.png);
    }

    &.SiteChangeSelector-option--tubing::after {
      background-image: url(../../components/sitechange/sitechange_tubing.png);
    }
  }
}


& {
  height: 100%;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background-color: @colorBgTheme;
}

&.night-mode, &.late-night-mode {
  #header {
    background-color: @colorBgNightMode;
  }
}

#middle {
  height: 100%;
  padding-top: @barSize;

  .CM_Page_Abstract {
    padding: 8px;

    @media (min-width: @breakpointSmall) {
      padding: 8px 20px;
    }
  }

}

.sheet {
  max-width: @siteMaxWidth;
  margin: 0 auto;
}

.Denkmal_Component_PushNotifications {
  display: none;
}

Remove push cmp from layout


.page.changelog {
  // Styles specific to changelog page on outer
  @avatar: 4em;
  @spacing: ((1 / 2) * @avatar);
  h3 {
    margin-top: 0;
  }
  strong {
    text-transform: capitalize;
  }
  .entry {
    .flexBox();
    padding-bottom: @spacing;
    box-shadow: 0 1px @grayBoxBorder;
    margin-bottom: @spacing;
    &:first-child {
      margin-top: @spacing;
      padding-top: @spacing;
      box-shadow: 0 1px @grayBoxBorder inset, 0 1px @grayBoxBorder;
    }
  }
  .entry-info {
    font-size: @fontSizeSmall;
    color: @grayLight;
    a {
      &:not(:hover) {
        color: inherit;
      }
    }
  }
  .changeTypeColor(@color) {
    strong {
      color: @color;
    }
  }
  .bugfix {
    .changeTypeColor(@orange);
  }
  .feature {
    .changeTypeColor(@green);
  }
  .performance {
    .changeTypeColor(@blue);
  }
  .entry-main {
    .flex(1, 1);
    margin-right: @spacing;
  }
  .entry-avatar {
    .flexBox();
    .align-items(center);
    .flex(0, 0, @avatar);
    img {
      max-height: @avatar;
      border-radius: ((1 / 2) * @avatar);
    }
  }
}

Update to the new way to use FlexBox

.page.changelog {
  // Styles specific to changelog page on outer
  @avatar: 4em;
  @spacing: ((1 / 2) * @avatar);
  h3 {
    margin-top: 0;
  }
  strong {
    text-transform: capitalize;
  }
  .entry {
    .displayFlex();
    padding-bottom: @spacing;
    box-shadow: 0 1px @grayBoxBorder;
    margin-bottom: @spacing;
    &:first-child {
      margin-top: @spacing;
      padding-top: @spacing;
      box-shadow: 0 1px @grayBoxBorder inset, 0 1px @grayBoxBorder;
    }
  }
  .entry-info {
    font-size: @fontSizeSmall;
    color: @grayLight;
    a {
      &:not(:hover) {
        color: inherit;
      }
    }
  }
  .changeTypeColor(@color) {
    strong {
      color: @color;
    }
  }
  .bugfix {
    .changeTypeColor(@orange);
  }
  .feature {
    .changeTypeColor(@green);
  }
  .performance {
    .changeTypeColor(@blue);
  }
  .entry-main {
    .flex(1, 1);
    margin-right: @spacing;
  }
  .entry-avatar {
    .displayFlex();
    .align-items(center);
    .flex(0, 0, @avatar);
    img {
      max-height: @avatar;
      border-radius: ((1 / 2) * @avatar);
    }
  }
}


.get-started {
    padding: 120px 0 220px 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    line-height: 28px;
    background: #04394e;

    .box {
      text-align: center;
      a.btn {
        background-color: #d34913;
        color: #eee;
        &:hover {
          background-color: #ea5116;
          color: @white;
        }
      }
      ol {
        margin: 10px 0px 15px 17%;
        text-align: left;
        li {
          font-size: 22px;
          line-height: 32px;
        }
      }

      h2 {
        margin: 10px 0 15px 0;
        font-weight: 300;
        text-align: center;
        line-height: 52px;
        font-size: 42px;
      }

      hr {
        margin: 10px 0;
        border-top: 1px solid #ccc;
      }

      // needs a high specificity to override defaults
      .main-cta .ctabox a.btn-jumbo {
        margin: -10px 0 20px 0;
        padding: 12px 24px 12px 24px;
        font-size: 22px;
      }

      background: #ffffff;
      .border-radius(10px);
      padding: 20px 20px 40px 20px;
    }
  }

Make the spacing in 'get-started' less horrible

.get-started {
    padding: 80px 0 80px 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    line-height: 28px;
    background: #04394e;

    .box {
      text-align: center;
      a.btn {
        background-color: #d34913;
        color: #eee;
        &:hover {
          background-color: #ea5116;
          color: @white;
        }
      }
      ol {
        margin: 10px 0px 15px 17%;
        text-align: left;
        li {
          font-size: 22px;
          line-height: 32px;
        }
      }

      h2 {
        margin: 10px 0 15px 0;
        font-weight: 300;
        text-align: center;
        line-height: 52px;
        font-size: 42px;
      }

      hr {
        margin: 10px 0;
        border-top: 1px solid #ccc;
      }

      // needs a high specificity to override defaults
      .main-cta .ctabox a.btn-jumbo {
        margin: -10px 0 20px 0;
        padding: 12px 24px 12px 24px;
        font-size: 22px;
      }

      background: #ffffff;
      .border-radius(10px);
      padding: 20px 20px 40px 20px;
    }
  }


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

    .SVGIcon {
        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 icon 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: 34px;
        color: inherit;
    }

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


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

.nju-app
{
    width: 100%;
    height: 100%;

    &, *
    {
        box-sizing: border-box;
        outline: none;
    }

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

    h1, .h1
    {
        font-size: @font-size-h1;
        font-weight: bold;
    }

    h2, .h2
    {
        font-size: @font-size-h2;
        font-weight: bold;
    }

    h3, .h3
    {
        font-size: @font-size-h3;
        font-weight: bold;
    }

    small, .small
    {
        font-size: @font-size-small;
    }
}

@import "./theme.less";

Set margin:0 to h1, h2, h3.

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

.nju-app
{
    width: 100%;
    height: 100%;

    &, *
    {
        box-sizing: border-box;
        outline: none;
    }

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

    h1, h2, h3
    {
        margin: 0;
    }

    h1, .h1
    {
        font-size: @font-size-h1;
        font-weight: bold;
    }

    h2, .h2
    {
        font-size: @font-size-h2;
        font-weight: bold;
    }

    h3, .h3
    {
        font-size: @font-size-h3;
        font-weight: bold;
    }

    small, .small
    {
        font-size: @font-size-small;
    }
}

@import "./theme.less";


.add-dataset-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.dataset-list {
  width: 100%;
}

.dataset-list-button {
  text-align: left;
}

.dataset-list-panel {
  overflow-y: auto;
  height: 300px;
}

Fix the dataset list height

.add-dataset-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.dataset-list {
  width: 100%;
}

.dataset-list-button {
  text-align: left;
}

.dataset-list-panel {
  overflow-y: auto;
  height: calc(~"100vh - 270px");
}


.qn-Input[type], // Fixes for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  line-height: 1;
  margin: 0;

  &:focus {
    .focus();
  }

  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea {
    line-height: 1.4;
    min-height: 10em;
  }
}

Fix issue with textarea after adjusting for specificity issues

.qn-Input[type], // Fixes for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  line-height: 1;
  margin: 0;
}

.qn-Input {
  &:focus {
    .focus();
  }

  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea {
    line-height: 1.4;
    min-height: 10em;
  }
}


@import 'mediawiki.ui/variables';

// Override for minerva's "hack.less" that tries to fix Template:Multiple_image
@media all and ( max-width: @width-breakpoint-tablet ) {
	.content .mw-kartographer-container.thumb .thumbinner {
		// Override the 'flex' rules
		display: block;
		flex-wrap: unset;

		justify-content: inherit;
		align-content: normal;

		> .thumbcaption {
			display: block;
		}
	}

}

Fix thumb with full width in MinervaNeue

@import 'mediawiki.ui/variables';

// Override for MinervaNeue's "hack.less" that tries to fix Template:Multiple_image
@media all and ( max-width: @width-breakpoint-tablet ) {
	.content .mw-kartographer-container.thumb .thumbinner {
		// Override the 'flex' rules
		display: block;
		flex-wrap: unset;

		justify-content: inherit;
		align-content: normal;

		> .thumbcaption {
			display: block;
		}
	}
}

// Override for MinervaNeue's "common.less" rule that specifically
// enforces width: 320px for thumbs, which means that thumb/maps that
// are set for width=100% are overrided and remain small. We need
// to override that override.
@media screen and ( min-width: @width-breakpoint-tablet ) {
	.content .mw-kartographer-container.mw-kartographer-full.thumb {
		width: 100%;
	}
}


body {
   /* Move the content so the Bootstrap topbar doesn't sit over it*/
   padding-top: 40px;
}

.development {
  /* For developers, highlight the environment */
  background-color: red;
}

span.build_status a {
   color: white;
}

td.build_column {
   text-align: right;

   a {
      color: white;
   }
}

Move content past the sidebar

body {
   /* Move the content so the Bootstrap topbar doesn't sit over it*/
   padding-top: 40px;
}

.development {
  /* For developers, highlight the environment */
  background-color: red;
}

span.build_status a {
   color: white;
}

td.build_column {
   text-align: right;

   a {
      color: white;
   }
}

.content {
   padding-left: 60px;
}


@import 'defs.less';

.input-textarea {
	& > .-textarea {
		border: 1px solid @COL_NLLL;

		background: @COL_NLLLL;

		border-radius: 0.25em;
		overflow: hidden;

		& > textarea {
			width: 100%;
			max-width: 100%;			/* don't let the width exceed the width of the parent (do we need this anymore?) */
			min-height: 6em;

			background: inherit;		/* let the parent dictate background color */
			display: block;				/* removes gap on line after element */

			padding: 0.5em;
			border: 0;

			overflow: hidden;			/* We're going to resize the box automatically (hopefully this is mobile friendly) */
			resize: none;

			box-sizing: border-box;		/* Correctly fit to div-like shapes */

			outline: none;				/* Remove Chrome outline when focused (handled by a bg color change instead) */

			&:focus {
				background: @COL_W;
			}
		}
	}

	& > .-footer {
		font-size: 0.8em;
		overflow: hidden;

		& a {
			font-weight: bold;
		}

		& > .-left {
			.-upload {
				cursor: pointer;	/* hack */
			}
		}

		& > .-right {
			float: right;
		}
	}
}

Fix textarea focus colour on dark themes.

@import 'defs.less';

.input-textarea {
	& > .-textarea {
		border: 1px solid @COL_NLLL;

		background: @COL_NLLLL;

		border-radius: 0.25em;
		overflow: hidden;

		& > textarea {
			width: 100%;
			max-width: 100%;			/* don't let the width exceed the width of the parent (do we need this anymore?) */
			min-height: 6em;

			background: inherit;		/* let the parent dictate background color */
			display: block;				/* removes gap on line after element */

			padding: 0.5em;
			border: 0;

			overflow: hidden;			/* We're going to resize the box automatically (hopefully this is mobile friendly) */
			resize: none;

			box-sizing: border-box;		/* Correctly fit to div-like shapes */

			outline: none;				/* Remove Chrome outline when focused (handled by a bg color change instead) */

			&:focus {
				background: @COL_W;
				color: @COL_K;
			}
		}
	}

	& > .-footer {
		font-size: 0.8em;
		overflow: hidden;

		& a {
			font-weight: bold;
		}

		& > .-left {
			.-upload {
				cursor: pointer;	/* hack */
			}
		}

		& > .-right {
			float: right;
		}
	}
}


@slick-grid: "../vendor/slick-grid-2.1.0";

@import (inline) "@{slick-grid}/controls/slick.columnpicker.css";
@import (inline) "@{slick-grid}/controls/slick.pager.css";
@import (inline) "@{slick-grid}/plugins/slick.headerbuttons.css";
@import (inline) "@{slick-grid}/plugins/slick.headermenu.css";
@import (inline) "@{slick-grid}/slick-default-theme.css";
@import (inline) "@{slick-grid}/slick.grid.css";

Fix order of SlickGrid's CSS includes

@slick-grid: "../vendor/slick-grid-2.1.0";

@import (inline) "@{slick-grid}/slick.grid.css";
@import (inline) "@{slick-grid}/slick-default-theme.css";
@import (inline) "@{slick-grid}/plugins/slick.headerbuttons.css";
@import (inline) "@{slick-grid}/plugins/slick.headermenu.css";
@import (inline) "@{slick-grid}/controls/slick.columnpicker.css";
@import (inline) "@{slick-grid}/controls/slick.pager.css";


.apos-modal
{
  @apos-tabs-width: 220px;

  .apos-schema-tabs
  {
    float: left;
    height: 100%;
    width: @apos-tabs-width;
    background-color: @apos-light;
  }

  .apos-schema--with-tabs .apos-schema-tabs {}

  .apos-schema-tab
  {
    padding: @apos-padding-2;
    border-bottom: 1px solid @apos-dark;
    font-size: 16px;
    cursor: pointer;
    &.apos-active
    {
      background-color: @apos-white;
      cursor: default;
    }
  }

  .apos-schema-group
  {
    display: none;
    float: left;
    width: calc(~"100% - " @apos-tabs-width);
    height: 100%;
    overflow-y: scroll;
    .apos-scrollbar;
  }

  .apos-schema-group.apos-active
  {
    display: block;
  }

  .apos-schema-group-inner
  {
    width: 100%;
    max-width: 540px;
    min-height: 100%;
    padding: @apos-padding-2;
    background-color: @apos-white;
  }
}

Add fixed position to modal tabs

.apos-modal
{
  @apos-tabs-width: 220px;

  .apos-schema-tabs
  {
    position: fixed;
    float: left;
    height: 100%;
    width: @apos-tabs-width;
    background-color: @apos-light;
    // If tab number exceeds viewport allow scroll
    overflow: scroll;
  }

  .apos-schema--with-tabs .apos-schema-tabs {}

  .apos-schema-tab
  {
    padding: @apos-padding-2;
    border-bottom: 1px solid @apos-dark;
    font-size: 16px;
    cursor: pointer;
    &.apos-active
    {
      background-color: @apos-white;
      cursor: default;
    }
  }

  .apos-schema-group
  {
    display: none;
    float: left;
    width: calc(~"100% - " @apos-tabs-width);
    height: 100%;
    overflow-y: scroll;
    .apos-scrollbar;
  }

  .apos-schema-group.apos-active
  {
    display: block;
  }

  .apos-schema-group-inner
  {
    width: 100%;
    max-width: 540px;
    min-height: 100%;
    margin-left: @apos-tabs-width;
    padding: @apos-padding-2;
    background-color: @apos-white;
  }
}


.qn-Input[type], // Fix for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  line-height: 1;
  margin: 0;

  &:focus {
    .focus();
    // Fixes for specificity issues.
    border-color: @color-Interactive--400;
  }
}

.qn-Input {

  &--disabled[type], // Fix for specificity issues.
  &[disabled][type], // Fix for specificity issues.
  fieldset[disabled] &[type], // Fix for specificity issues.
  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea[type], // Fix for specificity issues.
  &--textarea {
    line-height: 1.4;
    min-height: 10em;
  }
}

Increase line-height in inputs to accomodate Firefox wanting to clip text

.qn-Input[type], // Fix for specificity issues.
.qn-Input {
  border: unit(1/16, em) solid @color-Interactive--400;
  box-sizing: border-box;
  line-height: @scale-FontSize--05;
  padding: 0.5em;
  width: 100%;
  // Fixes for specificity issues.
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  height: auto;
  margin: 0;

  &:focus {
    .focus();
    // Fixes for specificity issues.
    border-color: @color-Interactive--400;
  }
}

.qn-Input {

  &--disabled[type], // Fix for specificity issues.
  &[disabled][type], // Fix for specificity issues.
  fieldset[disabled] &[type], // Fix for specificity issues.
  &--disabled,
  &[disabled],
  fieldset[disabled] & {
    color: @color-Text--400;
    background-color: inherit;
    // Override Safari wanting to lighten the text color value.
    -webkit-text-fill-color: @color-Text--400;
  }

  &--textarea[type], // Fix for specificity issues.
  &--textarea {
    line-height: 1.4;
    min-height: 10em;
  }
}


@import "~uiw-iconfont/fonts/w-iconfont.css";
.w-icon-spin:before {
  animation: loading-circle 1s infinite linear;
}
[class^="w-icon-"]:before, {
  vertical-align: middle;
  display: inline-block;
}
[class^="w-icon-"]:after, [class*=" w-icon-"]:after {
  vertical-align: middle;
  content: '';
  height: 100%;
  width: 0;
  display: inline-block;
}

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

Modify icon default font size.

@import "~uiw-iconfont/fonts/w-iconfont.css";
.w-icon-spin:before {
  animation: loading-circle 1s infinite linear;
}
[class^="w-icon-"], [class*=" w-icon-"] {
  font-size: 12px;
}
[class^="w-icon-"]:before, {
  vertical-align: middle;
  display: inline-block;
}
[class^="w-icon-"]:after, [class*=" w-icon-"]:after {
  vertical-align: middle;
  content: '';
  height: 100%;
  width: 0;
  display: inline-block;
}

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


header {
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  font-size: 20px;
  position: fixed;
  z-index: 100;
  background: rgb(247, 247, 248);
  border-bottom: 1px solid #cbcbcb;
  backface-visibility: hidden;
  color: #000;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  h1 {
    flex-grow: 1;
    justify-content: center;
  }
  a.back,
  a.menu {
    display: flex;
    flex-grow: 0;
    align-items: center;
    line-height: 44px;
    height: 44px;
    padding: 0 16px;

    span {
      color: @primary_color;
      padding-left: 8px;
      max-width: 56px;
      font-size: 17px;
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 100%;
    }
  }
  & ~ main {
    margin: 44px 0 0;
  }
}

Fix page title position for ios to be absolute centered independend of left and right icons

header {
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  font-size: 20px;
  position: fixed;
  z-index: 100;
  background: rgb(247, 247, 248);
  border-bottom: 1px solid #cbcbcb;
  backface-visibility: hidden;
  color: #000;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  h1 {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    justify-content: center;
    z-index: 0;
  }
  a.back,
  a.menu {
    position: relative;
    display: flex;
    flex-grow: 0;
    align-items: center;
    line-height: 44px;
    height: 44px;
    padding: 0 16px;
    z-index: 1;

    span {
      color: @primary_color;
      padding-left: 8px;
      max-width: 56px;
      font-size: 17px;
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 100%;
    }
  }
  & ~ main {
    margin: 44px 0 0;
  }
}


@import "syntax-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

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

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

    &.git-line-removed {
      border-left: 2px solid @syntax-color-removed;
      padding-left: ~"calc(0.5em - 2px)";
    }
  }
  .gutter.git-diff-icon .line-number {
    width: 100%;
    border-left: none;
    padding-left: 0.4em;

    &:before {
     .octicon-font();
      display: inline-block;
      width: 14px;
      content: " ";
      padding-right: 6px;
    }

    &.git-line-modified:before {
      content: @primitive-dot;
      color: @syntax-color-modified;
    }

    &.git-line-added:before {
      content: @plus;
      color: @syntax-color-added;
    }

    &.git-line-removed:before {
      content: @dash;
      color: @syntax-color-removed;
    }
  }
}

Fix padding of gutter markers

@import "syntax-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

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

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

    &.git-line-removed {
      border-left: 2px solid @syntax-color-removed;
      padding-left: ~"calc(0.5em - 2px)";
    }
  }
  .gutter.git-diff-icon .line-number {
    width: 100%;
    border-left: none;
    padding-left: 0.4em;

    &:before {
     .octicon-font();
      display: inline-block;
      position: relative;
      // Centering the icons while not changing the gutter height is hard.
      top: -.04em;
      width: 1em;
      height: 1em;
      content: " ";
      padding-right: 0.4em;
    }

    &.git-line-modified:before {
      content: @primitive-dot;
      color: @syntax-color-modified;
    }

    &.git-line-added:before {
      content: @plus;
      color: @syntax-color-added;
    }

    &.git-line-removed:before {
      content: @dash;
      color: @syntax-color-removed;
    }
  }
}


.Form-group {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0 !important;
  }
}

.Form--centered {
  text-align: center;

  .FormControl, .Button {
    margin: 0 auto;
    text-align: center;
    height: 50px;
    padding: 15px 20px;
    font-size: 15px;
  }

  .Form-group {
    margin-bottom: 12px;
  }
}

.Form-group > label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: @text-color;
  display: block;
}

Align checkboxes and textareas to the left in centered forms

.Form-group {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0 !important;
  }
}

.Form--centered {
  text-align: center;

  .FormControl[type=text],
  .FormControl[type=email],
  .FormControl[type=password],
  .Button {
    margin: 0 auto;
    text-align: center;
    height: 50px;
    padding: 15px 20px;
    font-size: 15px;
  }

  .Form-group {
    margin-bottom: 12px;
  }
  .checkbox {
    text-align: left;
  }
}

.Form-group > label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: @text-color;
  display: block;
}


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

@import "/vendor/twbs/bootstrap/less/bootstrap.less";
@import "/vendor/nostalgiaz/bootstrap-switch/src/less/bootstrap3/bootstrap-switch.less";
@import (inline) "/vendor/datatables/datatables/media/css/jquery.dataTables.css";
@import (inline) "https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css";

@import "variables.less";
@import "table.less";
@import "footer.less";

Use only bootstrap style for datatables

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

@import "/vendor/twbs/bootstrap/less/bootstrap.less";
@import "/vendor/nostalgiaz/bootstrap-switch/src/less/bootstrap3/bootstrap-switch.less";
@import (inline) "https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css";

@import "variables.less";
@import "table.less";
@import "footer.less";


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

.table-pager {
    text-align: right;

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

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

Add floating group in table pager

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

.table-pager {
    text-align: right;

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

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

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


@import 'colors';

.editor {
  height: 100%;

  .editor-box {
    height: calc(~'100% - 80px');
  }

  .tabs {
    margin: 8px;
    margin-bottom: 8px;
  }

  .title {
    background-color: @base;
    color: #f0f0f0;
    display: flex;
    padding: 4px 8px;

    b {
      background-color: desaturate(lighten(@base, 79%), 40%);
      border: 1px solid darken(@base, 20%);
      border-bottom-left-radius: 4px;
      border-right: 0px;
      border-top-left-radius: 4px;
      color: @base;
      display: block;
      font-size: 120%;
      height: 100%;
      margin-bottom: 8px;
      margin-top: 8px;
      padding: 8px;
    }

    input {
      border: 1px solid darken(@base, 20%);
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      flex-grow: 1;
      font-size: 110%;
      margin: 8px;
      margin-left: 0px;
      padding: 8px;
    }
  }

  .variable-box {
    label:before {
      content: '$';
    }
  }
}

Add Style for hotkey selection

@import 'colors';

.editor {
  height: 100%;

  .editor-box {
    height: calc(~'100% - 80px');
  }

  .tabs {
    margin: 8px;
    margin-bottom: 8px;
  }

  .title {
    background-color: @base;
    color: #f0f0f0;
    display: flex;
    padding: 4px 8px;

    b {
      background-color: desaturate(lighten(@base, 79%), 40%);
      border: 1px solid darken(@base, 20%);
      border-bottom-left-radius: 4px;
      border-right: 0px;
      border-top-left-radius: 4px;
      color: @base;
      display: block;
      font-size: 120%;
      height: 100%;
      margin-bottom: 8px;
      margin-top: 8px;
      padding: 8px;
    }

    input,
    select {
      border: 1px solid darken(@base, 20%);
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 110%;
      margin: 8px;
      margin-left: 0px;
      padding: 8px;
    }

    input {
      flex-grow: 3;
    }

    select {
      flex-grow: 1;
    }
  }

  .variable-box {
    label:before {
      content: '$';
    }
  }
}


// ===============================================================
//    Apostrophe Modal-Blackout
//
//    -  Opaque overlay which appears in between page and modals
//
// ===============================================================

// Variables  ===================================
@apos-z-index-blackout: @apos-z-index-5;

// Base Class ===================================
.apos-modal-blackout
{
	position: fixed;

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

	z-index: @apos-z-index-blackout;

	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;

	&.apos-modal-blackout-fade
	{
		opacity: 0;
	}
	.apos-transition(opacity, @apos-modal-timing, @apos-modal-transition-curve);
}

body.apos-active-blackout
{
	position: fixed;
}

Fix bug where body would rescale when a modal was open

// ===============================================================
//    Apostrophe Modal-Blackout
//
//    -  Opaque overlay which appears in between page and modals
//
// ===============================================================

// Variables  ===================================
@apos-z-index-blackout: @apos-z-index-5;

// Base Class ===================================
.apos-modal-blackout
{
	position: fixed;

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

	z-index: @apos-z-index-blackout;

	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;

	&.apos-modal-blackout-fade
	{
		opacity: 0;
	}
	.apos-transition(opacity, @apos-modal-timing, @apos-modal-transition-curve);
}

body.apos-active-blackout
{
	position: fixed;
	width: 100%;
}


/**
 * Currently not used
 */
div#ccm-modal-overlay {
	position: fixed;
	width: 100%;
	background-color: transparent;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: @index-level-modal-overlay;

	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);

	.transition(all 1.0s linear);

	&.ccm-modal-overlay-active {
		background-color: rgba(0, 0, 0, 0.4);
	}

	#ccm-loader {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		.opacity(0);
		position: absolute;
		width: 100px;
		height: 100px;
		.border-radius(10px);
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -50px;
		z-index: @index-level-modal-loader;
		background-color: rgba(0,0,0,0.8);

		&.ccm-loader-active {
			.opacity(1);
			.transition(opacity 0.3s linear);
		}
	}

}

Add Bootstrap Mixins vendor prefixes

/**
 * Currently not used
 */
div#ccm-modal-overlay {
	position: fixed;
	width: 100%;
	background-color: transparent;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: @index-level-modal-overlay;

	.translate3d(0, 0, 0);

	.transition(all 1.0s linear);

	&.ccm-modal-overlay-active {
		background-color: rgba(0, 0, 0, 0.4);
	}

	#ccm-loader {
		.translate3d(0, 0, 0);
		.opacity(0);
		position: absolute;
		width: 100px;
		height: 100px;
		.border-radius(10px);
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -50px;
		z-index: @index-level-modal-loader;
		background-color: rgba(0,0,0,0.8);

		&.ccm-loader-active {
			.opacity(1);
			.transition(opacity 0.3s linear);
		}
	}

}


@import "colors";

.syntax--source.syntax--perl {

  .syntax--pod {
    &.syntax--displayed-text {
      color: @constant;
    }

    &.syntax--inline.syntax--tag {
      .syntax--punctuation.syntax--begin,
      .syntax--punctuation.syntax--end {
        color: @punctuation;
      }
    }
  }
}

Add error highlighting to illegal whitespace in Pod

@import "colors";

.syntax--source.syntax--perl {

  .syntax--pod {
    &.syntax--displayed-text {
      color: @constant;
    }

    &.syntax--inline.syntax--tag {
      .syntax--punctuation.syntax--begin,
      .syntax--punctuation.syntax--end {
        color: @punctuation;
      }
    }

    .syntax--invalid.syntax--illegal.syntax--whitespace {
      background-color: @error;
    }
  }
}


ul {
  margin: 0;
  padding: 0;

  > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}
input, textarea {
  font-family: inherit;
}

Fix font size for text area

ul {
  margin: 0;
  padding: 0;

  > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}
input, textarea {
  font-family: inherit;
  font-size: inherit;
}


@import "ui-variables";

.build {
  h1.error {
    color: white;
    background-image: none;
    background-color: @background-color-error;
  }

  h1.success {
    color: white;
    background-image: none;
    background-color: @background-color-success;
  }

  h1.warning {
    color: white;
    background-image:none;
    background-color: @background-color-warning;
  }

  ol {
    transition: height 0.5s ease-in-out;
    padding: 10px 0 0 10px;
    min-height: 100px;
    overflow-y: auto;
  }

  li {
    word-wrap: break-word;
    white-space: pre-wrap;
    list-style: none;
    font-family: monospace;
  }

  li.error {
    animation: none;
    -webkit-animation: none;
    color: @text-color-error;
  }

}

.btn-container {
  .btn {
    float: right;
    margin: 10px 10px 0 0;
    color: #fff;

    &:focus, &:active, &:hover {
      color: #fff;
    }
  }

  .icon::before {
    margin: 0;
  }

  .new-row {
    clear: both;
  }
}

Use button color specified by theme

@import "ui-variables";

.build {
  h1.error {
    color: white;
    background-image: none;
    background-color: @background-color-error;
  }

  h1.success {
    color: white;
    background-image: none;
    background-color: @background-color-success;
  }

  h1.warning {
    color: white;
    background-image:none;
    background-color: @background-color-warning;
  }

  ol {
    transition: height 0.5s ease-in-out;
    padding: 10px 0 0 10px;
    min-height: 100px;
    overflow-y: auto;
  }

  li {
    word-wrap: break-word;
    white-space: pre-wrap;
    list-style: none;
    font-family: monospace;
  }

  li.error {
    animation: none;
    -webkit-animation: none;
    color: @text-color-error;
  }

}

.btn-container {
  .btn {
    float: right;
    margin: 10px 10px 0 0;
    color: @text-color-info;
  }

  .icon::before {
    margin: 0;
  }

  .new-row {
    clear: both;
  }
}


@import "~dnn-global-styles/index";
.date-picker{
    .calendar-dropdown {
        .calendar-dropdown-action-buttons {
            width: "100%";
            text-align: "center";
            height: "30%";
        }
    }
}

Fix date-picker style for long description on field

@import "~dnn-global-styles/index";
.date-picker{
    .calendar-dropdown {
        .calendar-dropdown-action-buttons {
            width: "100%";
            text-align: "center";
            display: "inline-block";
        }
    }
}


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

.featured-books {
    .make-row();
    // Override bootstrap css
    margin: 0 !important;
    overflow: hidden;

    .books {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .book {
        .make-column(6);
        display: none;
        margin-bottom: 15px;

        img {
            float: left;
            margin-right: 20px;
            border: 0;
        }

        h4 {
            a {
                color: @link-color;
                font-weight: 300;
            }
        }

        p {
            color: @gray-dark;
            font-weight: 300;
        }
    }

    .book:after {
        visibility: hidden;
    	display: block;
        height: 0;
    	font-size: 0;
    	content: " ";
    	clear: both;
    }

    .book:first-child, .book:nth-child(2) {
        display: block;
    }

    .book:nth-child(2n+1) {
        padding-left: 0;
        padding-right: 15px;
    }

    .book:nth-child(2n) {
        padding-left: 15px;
    }
}

Fix featured book layout on small screens

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

.featured-books {
    .make-row();
    // Override bootstrap css
    margin: 0 !important;
    overflow: hidden;

    .books {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .book {
        .make-column(6);
        display: none;
        margin-bottom: 15px;

        @media screen and (max-width: @screen-tiny-max) {
            padding-left: 0 !important;
        }

        img {
            float: left;
            margin-right: 20px;
            border: 0;
        }

        h4 {
            a {
                color: @link-color;
                font-weight: 300;
            }
        }

        p {
            color: @gray-dark;
            font-weight: 300;
        }
    }

    .book:after {
        visibility: hidden;
    	display: block;
        height: 0;
    	font-size: 0;
    	content: " ";
    	clear: both;
    }

    .book:first-child, .book:nth-child(2) {
        display: block;
    }

    .book:nth-child(2n+1) {
        padding-left: 0;
        padding-right: 15px;
    }

    .book:nth-child(2n) {
        padding-left: 15px;
    }
}


//
// Editor area
//

@edit-area-border-color: @border-color;

.tox {
  .tox-edit-area {
    border: 1px solid @edit-area-border-color;
    display: flex;
    flex: 1;
  }

  .tox-edit-area__iframe {
    border: 0;
    box-sizing: border-box;
    flex: 1;
    width: calc(100% - 2px); //deduce border width
  }
}

Fix width on edit area

//
// Editor area
//

@edit-area-border-color: @border-color;

.tox {
  .tox-edit-area {
    border: 1px solid @edit-area-border-color;
    display: flex;
    flex: 1;
  }

  .tox-edit-area__iframe {
    border: 0;
    box-sizing: border-box;
    flex: 1;
    width: calc(~"100% - 2px"); //deduce border width
  }
}


@import '~styles/main';

.badge {
  font-family: 'Roboto Condensed', sans-serif;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  padding: @padding;
  display: flex;
  flex: 2;
  align-items: center;
}

.header__logo {
  display: flex;
  flex: 1;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.header__text {
  flex: 1;
  text-align: right;
}

.header__text--no-logo {
  flex: 1;
  text-align: left;
}

.name {
  padding: @padding;
  background: #fff;
  display: flex;
  flex: 3;
  flex-direction: column;
  justify-content: center;
}

.name--first,
.name--last {
  display: block;
  text-transform: uppercase;
}

.name--first {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: @padding / 2;
}

.footer {
  padding: @padding;
  text-align: right;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.footer--no-logo {
    composes: footer;
    text-align: left;
}

Fix badges cutting half when printing.

@import '~styles/main';

.badge {
  font-family: 'Roboto Condensed', sans-serif;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  padding: @padding;
  display: flex;
  flex: 2;
  align-items: center;
}

.header__logo {
  display: flex;
  flex: 1;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.header__text {
  flex: 1;
  text-align: right;
}

.header__text--no-logo {
  flex: 1;
  text-align: left;
}

.name {
  padding: @padding;
  background: #fff;
  display: flex;
  flex: 3;
  flex-direction: column;
  justify-content: center;
}

.name--first,
.name--last {
  display: block;
  text-transform: uppercase;
}

.name--first {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: @padding / 2;
}

.footer {
  padding: @padding;
  text-align: right;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.footer--no-logo {
    composes: footer;
    text-align: left;
}

@media print {
  .badge {
    page-break-inside: avoid;
  }
}


@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';

.Subnav {
  line-height: 4 * @grid-size;
  padding: @grid-size;
  max-width: @max-width;
  margin: 0 auto;
  height: 6 * @grid-size;
  position: relative;

  &__navLink {
    position: absolute;
    right: @grid-size;
    z-index: 2;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -3em;
      width: 3em;

      .themeify({
        background: linear-gradient(to right,
          fade(@theme-comment-body-color, 0%) 0%,
          fade(@theme-comment-body-color, 100%) 70%);
      });
    }
  }
}

Align top of SubNav navlink

@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';

.Subnav {
  line-height: 4 * @grid-size;
  padding: @grid-size;
  max-width: @max-width;
  margin: 0 auto;
  height: 6 * @grid-size;
  position: relative;

  &__navLink {
    position: absolute;
    right: @grid-size;
    top: @grid-size;
    z-index: 2;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -3em;
      width: 3em;

      .themeify({
        background: linear-gradient(to right,
          fade(@theme-comment-body-color, 0%) 0%,
          fade(@theme-comment-body-color, 100%) 70%);
      });
    }
  }
}


.NotFound {
  margin-bottom: 1em;

  h1 {
    text-transform: none;
    font-size: 4em;
    color: 4a4a4a;
    margin-bottom: 0.33em;
    color: #3e3e3e;

    @media
    (max-width: 767px),
    (max-device-width: 767px) {
      font-size: 2em;
      margin-top: 0;
      margin-bottom: 0.5em;
    }
  }

  a,
  a:hover,
  a:focus,
  a:active {
    display: inline-block;
    padding: 0.5em 1.25em 0.5em 0.95em;
    font-weight: 400;
    color: #5493BE;
    text-decoration: none;
    border: 1px solid #5493BE;
    border-radius: 5px;

    .LinkText {
      font-size: 1.25em;
    }
  }
}

Update the visual look of the 404 Not Found page

.NotFound {
  margin-bottom: 1em;

  h1 {
    text-transform: none;
    font-size: 4em;
    color: 4a4a4a;
    margin-bottom: 0.25em;
    color: #3e3e3e;

    @media
    (max-width: 767px),
    (max-device-width: 767px) {
      font-size: 2em;
      margin-top: 0;
      margin-bottom: 0.5em;
    }
  }

  a,
  a:hover,
  a:focus,
  a:active {
    display: inline-block;
    padding: 0.5em 1.5em 0.5em 1.25em;
    font-weight: 400;
    color: #5493BE;
    text-decoration: none;
    border: 1px solid #5493BE;
    border-radius: 27px;

    .LinkText {
      font-size: 1.25em;
    }
  }
}


@doubtfire-color: #da532c;

h1.logo {
  font-weight: lighter;
  letter-spacing: -1px;
  font-size: 4em;
  small {
    font-weight: lighter;
    text-align: right;
    font-size: 0.5em;
  }
  &.full.logo small {
    display: block;
  }
  &.sup.logo small {
    vertical-align: super;
    margin-left: 0.5ex;
    color: #999;
  }
}
i.logo {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: @doubtfire-color;
  background-image: url('/assets/images/doubtfire-logo-person-white.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10%;
}

i.logo + h1.logo {
  margin-left: 1ex;
  display: inline-block;
}

a:hover > i.logo {
  background-color: lighten(@doubtfire-color, 10%);
}

Improve looks of doubfire logo font rendering

@doubtfire-color: #da532c;

.apply-logo-font-rendering {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -1px;
  font-weight: 300;
}

h1.logo {
  .apply-logo-font-rendering;
  font-size: 4em;
}
i.logo {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: @doubtfire-color;
  background-image: url('/assets/images/doubtfire-logo-person-white.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10%;
}

a:hover > i.logo {
  background-color: lighten(@doubtfire-color, 10%);
}

.welcome-to-doubtfire {
  margin-top: 6em;
  margin-bottom: 3em;
  h1, p {
    .apply-logo-font-rendering;
  }
  p.lead {
    color: #666;
  }
  i.logo {
    width: 10em;
    height: 10em;
  }
}


.custom-logo {
    max-height: @grid-gutter-width - 10;
    width: auto;
    max-width: 100%;
    height: auto;
}

.page-header{
    border-bottom: transparent;
    margin-top: 0;
    margin-bottom: @grid-gutter-width/4;
}

.archive{

    .author-title,
    .entry-title{
        font-size: @font-size-h3;
    }

}

.page-title,
.entry-title{
    margin-top: 0;
    .text-uppercase;
    letter-spacing: @letter-spacing-small;
}

Update .page-title and .entry-title top margin

.custom-logo {
    max-height: @grid-gutter-width - 10;
    width: auto;
    max-width: 100%;
    height: auto;
}

.page-header{
    border-bottom: transparent;
    margin-top: 0;
    margin-bottom: @grid-gutter-width/4;
}

.archive{

    .author-title,
    .entry-title{
        font-size: @font-size-h3;
    }

}

.page-title,
.entry-title{
    @media (min-width: @screen-md-min){
        margin-top: 0;
    }
    .text-uppercase;
    letter-spacing: @letter-spacing-small;
}


.issue {
    display:block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 3px;
    box-shadow: 2px 2px 4px #000;

    .title{
        text-decoration: underline;
        font-size: 1.2em;
    }

    .avatar{
        height:30px;
        width:30px;
        position: relative;
        top:0;
        right:0;
        float:right;
    }

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

    .labels span {
        display: inline-block;
        padding: 3px 4px;
        font-size: 11px;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        border-radius: 2px;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
    }

    .baseline{
        text-align: right;
        font-style: italic;
    }
}

Hide avatar box for unassigned

.issue {
    display:block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 3px;
    box-shadow: 2px 2px 4px #000;

    .title{
        text-decoration: underline;
        font-size: 1.2em;
    }

    .avatar{
        height:30px;
        width:30px;
        position: relative;
        top:0;
        right:0;
        float:right;

        &[src=''] {
            display: none;
        }
    }

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

    .labels span {
        display: inline-block;
        padding: 3px 4px;
        font-size: 11px;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        border-radius: 2px;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
    }

    .baseline{
        text-align: right;
        font-style: italic;
    }
}


section#articles {

	h3, h4 {
		color:#666;
	}
}

Set image width 100% in ArticleWidget

section#articles {
	img {
        width: 100%;
    }

	h3, h4 {
		color:#666;
	}
}


body.ic-Login-Body {
    background-color: @darkTealColor !important;
    background-image: none           !important;

    #application.ic-app {

        .ic-Login__header__logo {
            background-image: url("https://server/bitmaps/mmooc-logo.png") !important;
            background-size: contain;
            background-repeat: no-repeat;
            width: 240px;
            height: 25px;

            img {
                display: none;
            }
        }

        .ic-Login__actions {
            margin-top: 25px;

            .ic-Login__actions--right {
                display: block;
                margin-left: 25px;
            }

            .Button--logout-link, .Button--logout-confirm, .Button--login {
                .button;
            }

        }
    }
}

Fix login and logout screen colors.

body.ic-Login-Body {
    background-color: @darkTealColor !important;
    background-image: none           !important;

    #application.ic-app {

        .ic-Login-header__logo {
            background-image: url("https://server/bitmaps/mmooc-logo.png") !important;
            background-size: contain;
            background-repeat: no-repeat;
            width: 240px;
            height: 25px;

            img {
                display: none;
            }
        }

        #main.ic-Layout-columns {
            background-color: @darkTealColor;
        }

        .ic-Login__actions {
            margin-top: 25px;

            .ic-Login__actions--right {
                display: block;
                margin-left: 25px;
            }

            .Button--logout-link, .Button--logout-confirm, .Button--login {
                .button;
            }

        }
    }
}