@import "../variables";

.feedbackNoteToggle {
  align-items: center;
  display: flex;
  flex-flow: row;
  font-weight: normal;
  margin: 10px 20px;

  .feedbackNoteToggleButton {
    border: solid 1px @cc-charcoal-light1;
    border-radius: 3px;
    cursor: pointer;
    height: 24px;
    margin: 0 8px 0 0;
    padding: 14px;
    position: relative;
    width: 24px;

    &.active {
      background-color: @feedback-green;

      &:before {
        background-color: white;
      }
    }

    &:hover {
      background-color: @feedback-green-light3;
    }

    &:before {
      background-color: @feedback-green;
      content: "";
      display: block;
      height: 24px;
      left: 2px;
      -webkit-mask-image: url("../../../img/svg-icons/sticky-note-icon.svg");
      mask-image: url("../../../img/svg-icons/sticky-note-icon.svg");
      position: absolute;
      top: 2px;
      width: 24px;
    }
  }
}

Add styling for toggle button mouse down state.

@import "../variables";

.feedbackNoteToggle {
  align-items: center;
  display: flex;
  flex-flow: row;
  font-weight: normal;
  margin: 10px 20px;

  .feedbackNoteToggleButton {
    border: solid 1px @cc-charcoal-light1;
    border-radius: 3px;
    cursor: pointer;
    height: 24px;
    margin: 0 8px 0 0;
    padding: 14px;
    position: relative;
    width: 24px;

    &:hover {
      background-color: @feedback-green-light3;
    }

    &:active, &.active {
      background-color: @feedback-green;

      &:before {
        background-color: white;
      }
    }

    &:before {
      background-color: @feedback-green;
      content: "";
      display: block;
      height: 24px;
      left: 2px;
      -webkit-mask-image: url("../../../img/svg-icons/sticky-note-icon.svg");
      mask-image: url("../../../img/svg-icons/sticky-note-icon.svg");
      position: absolute;
      top: 2px;
      width: 24px;
    }
  }
}


[placeholder]:empty:before {
  color: @colorInputPlaceholder;
  content: attr(placeholder);
  pointer-events: none;
}

Use ::after instead of :before pseudo element for placeholder (fixed cursor positioning in IE)

[placeholder]:empty::after {
  color: @colorInputPlaceholder;
  content: attr(placeholder);
  pointer-events: none;
}


/*

    Copyright (C) 2010-2011 LShift Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

*/

/* Definitions for the settings page */

#settings-page {
  #elements {
    .prepend-top;
    .append-bottom;
    .span-6;

    border-top: 1px solid black;
    border-right: 1px solid black;
    padding: 10px;
    min-height: 500px;

    .element-list-panel {
      .append-bottom;
    }

    #endpoints-list, #pairs-list {
      .element-list-panel;
    }
  }

  .loading {
    display: block;
  }

  #details {
    .prepend-top;
    .span-17;
    .last;

    border-top: 1px solid black;
  }
}

Make the set category '+' button less bouncy.

/*

    Copyright (C) 2010-2011 LShift Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

*/

/* Definitions for the settings page */

#settings-page {
  #elements {
    .prepend-top;
    .append-bottom;
    .span-6;

    border-top: 1px solid black;
    border-right: 1px solid black;
    padding: 10px;
    min-height: 500px;

    .element-list-panel {
      .append-bottom;
    }

    #endpoints-list, #pairs-list {
      .element-list-panel;
    }
  }

  .loading {
    display: block;
  }

  #details {
    .prepend-top;
    .span-17;
    .last;

    border-top: 1px solid black;
  }

  .set-categories {
    button {
      float: right;
    }
  }
}


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

.facts-view-more,
.activities-more {
  padding: 15px 0;
  border-bottom: 1px solid @baseBorderColor;
  display: none;

  > .facts-view-more-button,
  > .activities-more-button, {
    border: 1px solid #dee5ef;
    background: #f3f6fa;
    .border-radius(5px);
    text-align: center;
    line-height: 40px;
    display: block;

    > .list {
      background: image-url('stream/load_more.png') no-repeat;
      width: 12px;
      height: 11px;
      display: inline-block;
      margin-bottom: -1px;
    }

    &:hover {
      text-decoration: none;
      border: 1px solid darken(#dee5ef, 10%);
    }
  }
}

Reset main padding in load more button

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

.facts-view-more,
.activities-more {
  .reset-main-padding();
  padding: 15px 0;
  border-bottom: 1px solid @baseBorderColor;
  display: none;

  > .facts-view-more-button,
  > .activities-more-button, {
    border: 1px solid #dee5ef;
    background: #f3f6fa;
    .border-radius(5px);
    text-align: center;
    line-height: 40px;
    display: block;

    > .list {
      background: image-url('stream/load_more.png') no-repeat;
      width: 12px;
      height: 11px;
      display: inline-block;
      margin-bottom: -1px;
    }

    &:hover {
      text-decoration: none;
      border: 1px solid darken(#dee5ef, 10%);
    }
  }
}


//
// Styles
// --------------------------------------------------

body {
    background: #eec;
}

img.logo {
    height: 100px;
}

Change background colour and add some styles.


:root {
  font-size: 100%;
}

html, body {
  font-family: @font-family-main;
  font-size: 1rem;
  color: @black;
}

::selection {
  background-color: @primary;
}

:focus {
  outline: @primary-dark solid 2px;
  outline-offset: 0;
}

Make sure that the scrollbar is always visibile

:root {
  font-size: 100%;
}

html, body {
  font-family: @font-family-main;
  font-size: 1rem;
  color: @black;
}

body {
  overflow-y: scroll;
}

::selection {
  background-color: @primary;
}

:focus {
  outline: @primary-dark solid 2px;
  outline-offset: 0;
}


.grid {
  display: flex;
  &.grid--stack {
    flex-direction: column;
  }
}

.grid--gutters {
  & > .grid-cell {
    padding-left: 20px;
    padding-right: 20px;
  }
}

// grid has gutters between the cells but not at the start or end.
.grid--margin {
  & > .grid-cell + .grid-cell {
    margin-left: 1em;
  }
}

.grid-cell {
  flex: 1;
}

// squashes the flex content down to the smallest possible
// size to let other cells expand and fill the gap.
.grid-cell--squash {
  flex: 0 1 0%;
}

Change to use flex if viewport is wide enough.

.grid {
  // 840px seems a big large for this to trigger?
  @media @desktop {
    display: flex;
  }
  &.grid--stack {
    flex-direction: column;
  }
}

.grid--gutters {
  & > .grid-cell {
    padding-left: 20px;
    padding-right: 20px;
  }
}

// grid has gutters between the cells but not at the start or end.
.grid--margin {
  & > .grid-cell + .grid-cell {
    margin-left: 1em;
  }
}

.grid-cell {
  flex: 1;
}

// squashes the flex content down to the smallest possible
// size to let other cells expand and fill the gap.
.grid-cell--squash {
  flex: 0 1 0%;
}


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

.media-tabs .contents {
  margin-right: -1px; // Hide 3rd column rule
  padding: 15px;

  -moz-columns: 290px auto;
  -webkit-columns: 290px auto;
  columns: 290px auto;

  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;

  -moz-column-rule: 4px solid @gray-lightest;
  -webkit-column-rule: 1px solid @gray-lightest;
  column-rule: 1px solid @gray-lightest;

  ul {
    padding: 0 20px;
    font-size: 1.25rem;
    list-style-type: none;
  }
}

Add margin-right to expand span

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

.media-tabs .contents {
  margin-right: -1px; // Hide 3rd column rule
  padding: 15px;

  -moz-columns: 290px auto;
  -webkit-columns: 290px auto;
  columns: 290px auto;

  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;

  -moz-column-rule: 4px solid @gray-lightest;
  -webkit-column-rule: 1px solid @gray-lightest;
  column-rule: 1px solid @gray-lightest;

  .expand {
    margin-right: 5px;
  }

  ul {
    padding: 0 20px;
    font-size: 1.25rem;
    list-style-type: none;
  }
}


.fl-scrolls {
    &, & div {
        font-size:1px;
        line-height:0;
        margin:0;
        padding:0;
    }
    & {
        bottom:0;
        height:35px;
        overflow:auto;
        position:fixed;
    }
    & div {
        height:1px;
        overflow:hidden;
        pointer-events:none;
    }
    & div:before {
        content:"\A0"; /* fixes #6 */
    }
    &-hidden {
        bottom:9999px;
    }

    &-viewport {
        /* It can be any type of positioning except static. Redefine in your CSS as needed */
        position:relative;
    }
    &-body {
        overflow:auto;
    }
    &-viewport & {
        left:0;
        position:absolute;
    }

    &-hoverable & {
        opacity:0;
        transition:opacity 0.5s ease 0.3s;
    }
    &-hoverable:hover & {
        opacity:1;
    }
}

Fix eventual bug with widget re-rendering in Chrome

.fl-scrolls {
    bottom:0;
    height:35px;
    overflow:auto;
    position:fixed;

    div {
        height:1px;
        overflow:hidden;
        pointer-events:none;
        &:before {
            content:"\A0"; // fixes #6
        }
    }

    &,
    & div {
        font-size:1px;
        line-height:0;
        margin:0;
        padding:0;
    }

    &-hidden {
        bottom:9999px;
        div:before {
            content:"\A0\A0"; // changing content fixes eventual bug with widget re-rendering in Chrome
        }
    }

    &-viewport {
        // It can be any type of positioning except static. Redefine in your CSS as needed
        position:relative;
    }
    &-body {
        overflow:auto;
    }
    &-viewport & {
        left:0;
        position:absolute;
    }

    &-hoverable & {
        opacity:0;
        transition:opacity 0.5s ease 0.3s;
    }
    &-hoverable:hover & {
        opacity:1;
    }
}


//@import "../palette.less";
//@import "../variables.less";
@import "range.less";
@import "selection.less";
@import "scrollbar.less";

Add new extra, custom scrollbar

@import "../palette.less";
@import "../variables.less";
@import "range.less";
@import "selection.less";
@import "scrollbar.less";


/* CSS font colors for translated ANSI colors. */

.ansibold {font-weight: bold;}

/* use dark versions for foreground, to improve visibility */
.ansiblack {color: black;}
.ansired {color: darkred;}
.ansigreen {color: darkgreen;}
.ansiyellow {color: brown;}
.ansiblue {color: darkblue;}
.ansipurple {color: darkviolet;}
.ansicyan {color: steelblue;}
.ansigray {color: gray;}

/* and light for background, for the same reason */
.ansibgblack {background-color: black;}
.ansibgred {background-color: red;}
.ansibggreen {background-color: green;}
.ansibgyellow {background-color: yellow;}
.ansibgblue {background-color: blue;}
.ansibgpurple {background-color: magenta;}
.ansibgcyan {background-color: cyan;}
.ansibggray {background-color: gray;}

Use more yellowish color for ansiyellow

/* CSS font colors for translated ANSI colors. */

.ansibold {font-weight: bold;}

/* use dark versions for foreground, to improve visibility */
.ansiblack {color: black;}
.ansired {color: darkred;}
.ansigreen {color: darkgreen;}
.ansiyellow {color: #c4a000;}
.ansiblue {color: darkblue;}
.ansipurple {color: darkviolet;}
.ansicyan {color: steelblue;}
.ansigray {color: gray;}

/* and light for background, for the same reason */
.ansibgblack {background-color: black;}
.ansibgred {background-color: red;}
.ansibggreen {background-color: green;}
.ansibgyellow {background-color: yellow;}
.ansibgblue {background-color: blue;}
.ansibgpurple {background-color: magenta;}
.ansibgcyan {background-color: cyan;}
.ansibggray {background-color: gray;}


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

.store-payment-method {
  display: flex;
  justify-content: space-between;
  padding: 8px;

  &__cell {
    margin: 8px;
    padding: 8px;
    width: 50%;
  }

  &__provider {
    height: 20px;
    margin: 4px 4px 4px 0;

    &--tall {
      height: 30px;
    }
  }
}

Move text below buttons when viewport narrows;

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

.store-payment-method {
  display: flex;
  justify-content: space-between;
  padding: 8px;

  @media @mobile {
    flex-direction: column;
  }

  &__cell {
    margin: 8px;
    padding: 8px;
    width: 50%;
    @media @mobile {
      width: 100%;
      text-align: center;
    }
  }

  &__provider {
    height: 20px;
    margin: 4px 4px 4px 0;

    &--tall {
      height: 30px;
    }
  }
}


@import "bootstrap/mixins";

.fact-new {
  .white-block-with-shadow();
  visibility: visible;
  width: @factNewAndSignInWidth;
  margin: 0 auto;
  padding: 15px;
  position: relative;
  z-index: 1; // should be lower than Twitter tooltip z-index
  cursor: auto;

  .finish-popover {
    position: relative;
  }
}

.fact-new-fact-container {
  font-size: @baseFactFontSize;
  overflow: hidden;
}

Use display: inline-block to get a new block formatting context

@import "bootstrap/mixins";

.fact-new {
  .white-block-with-shadow();
  visibility: visible;
  width: @factNewAndSignInWidth;
  margin: 0 auto;
  padding: 15px;
  position: relative;
  z-index: 1; // should be lower than Twitter tooltip z-index
  cursor: auto;

  .finish-popover {
    position: relative;
  }
}

.fact-new-fact-container {
  font-size: @baseFactFontSize;
  display: inline-block; // for new block formatting context
}


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

.editor.editor-colors .gutter .line-number {
	&.mixed-indent-incorrect {
		color: #fff;
		background-color: @background-color-warning;
	}
	&.mixed-indent-incorrect.cursor-line {
		color: #fff;
		background-color: @background-color-warning;
	}
}

Fix styles for shadow dom

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

:host(:host) .gutter .line-number {
	&.mixed-indent-incorrect {
		color: #fff;
		background-color: @background-color-warning;
	}
	&.mixed-indent-incorrect.cursor-line {
		color: #fff;
		background-color: @background-color-warning;
	}
}


// Buttons

.btn {
  display: inline-block;
  padding: @btn-padding-y @btn-padding-x;
  font-size: @btn-font-size;
  line-height: @line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: @global-radius;
  transition: all .25s ease-in-out;

  &:focus,
  &:hover {
    text-decoration: none;
    outline: none;
  }

  // Disabled button
  &.disabled,
  &:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

// Default button
.btn-default {
  .btn-color(@btn-default-bg, @btn-default-color, @btn-default-border);
}

// Primary button
.btn-primary {
  .btn-color(@btn-primary-bg, @btn-primary-color, @btn-primary-border);
}

// Secondary button
.btn-secondary {
  .btn-color(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
}

// Transparent button
.btn-transparent {
  background-color: transparent;

  &:focus,
  &:hover {
    color: lighten(@body-color, 30);
    background-color: transparent;
  }
}

Add bg property for buttons

// Buttons

.btn {
  display: inline-block;
  padding: @btn-padding-y @btn-padding-x;
  font-size: @btn-font-size;
  line-height: @line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: @global-radius;
  transition: all .25s ease-in-out;

  &:focus,
  &:hover {
    text-decoration: none;
    outline: none;
  }

  // Disabled button
  &.disabled,
  &:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

// Default button
.btn-default {
  .btn-color(@btn-default-bg, @btn-default-color, @btn-default-border);
}

// Primary button
.btn-primary {
  .btn-color(@btn-primary-bg, @btn-primary-color, @btn-primary-border);
}

// Secondary button
.btn-secondary {
  .btn-color(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
}

// Transparent button
.btn-transparent {
  background-color: transparent;

  &:focus,
  &:hover {
    color: lighten(@body-color, 30);
    background-color: transparent;
  }
}


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

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

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

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

.dash-banner {
  width: 100%;
  border-top: 0.3rem solid @edge;
  border-bottom: 0.3rem solid @edge;
  margin-left: -25%;
  background-color: @dominant;
  transform: rotateZ(-30deg);
  text-align: center;
  font-size: 2rem;
  display: none;
  background-clip: padding-box; // Fix jagged edges in WebKit/Blink
}

Add Explicit z-index to Banner

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

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

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

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

.dash-banner {
  width: 100%;
  border-top: 0.3rem solid @edge;
  border-bottom: 0.3rem solid @edge;
  margin-left: -25%;
  background-color: @dominant;
  transform: rotateZ(-30deg);
  text-align: center;
  font-size: 2rem;
  display: none;
  z-index: 2;
  background-clip: padding-box; // Fix jagged edges in WebKit/Blink
}


.bracket-matcher .region {
  border-bottom: 1px dotted lime;
  position: absolute;
}

.line-number.bracket-matcher {
  background-color: @text-color-subtle
}

Use syntax variables for the gutter bracket-matcher

@import "syntax-variables";

.bracket-matcher .region {
  border-bottom: 1px dotted lime;
  position: absolute;
}

.line-number.bracket-matcher.bracket-matcher {
  color: @syntax-gutter-text-color-selected;
  background-color: @syntax-gutter-background-color-selected;
}


//== Cards on swipe page
//
//##

.swipe-card {
    overflow: hidden; // So square divs don't overflow rounded corners.

  > .panel-body {
    padding: 0;

    .swipe-card-img {
      height: 288px;
      width: 288px;
      background-size: cover;
      background-position: center center;
    }

    .swipe-card-info {
      margin: @card-content-margin;

      a, p {
        font-weight: 300;
        margin-bottom: 4px;
      }

      .top-line {
        margin-bottom: 8px;

        h4 {
          display: inline-block;
          margin: 0;
        }
        a {
          float: right;
        }
      }

      i {
        margin-left: -2px;
      }

    }

    .swipe-card-input {
      margin: @card-content-margin;

      textarea {
        padding: 4px 8px;
      }
    }

  }

}

Remove extra padding from bottom of page

//== Cards on swipe page
//
//##

.swipe-card.panel {
    margin-bottom: 0;
    overflow: hidden; // So square divs don't overflow rounded corners.

  > .panel-body {
    padding: 0;

    .swipe-card-img {
      height: 288px;
      width: 288px;
      background-size: cover;
      background-position: center center;
    }

    .swipe-card-info {
      margin: @card-content-margin;

      a, p {
        font-weight: 300;
        margin-bottom: 4px;
      }

      .top-line {
        margin-bottom: 8px;

        h4 {
          display: inline-block;
          margin: 0;
        }
        a {
          float: right;
        }
      }

      i {
        margin-left: -2px;
      }

    }

    .swipe-card-input {
      margin: @card-content-margin;

      textarea {
        padding: 4px 8px;
      }
    }

  }

}


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

.add-to-channel-suggested-channels {
  .action-list(#edf3f7, @linkColor, #c5d7e3);
}

Add cursor pointer on hovering suggested chanenl

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

.add-to-channel-suggested-channels {
  .action-list(#edf3f7, @linkColor, #c5d7e3);

  li:hover { cursor: pointer; }
}


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

busy-signal {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;

  &.idle,
  &.busy {
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50%;

      transition: background .5s linear;
    }
  }

  &.idle {
    &::before {
      background: @text-color-success;
    }
  }

  &.busy {
    cursor: wait;

    &::before {
      background-color: @text-color-warning;
      animation: bounce 1.0s infinite ease-in-out;
    }
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1.0);
  } 50% {
    transform: scale(.6);
  }
}

Fix the layout on the One Dark theme

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

busy-signal {
  position: relative;
  width: 6px;
  height: 100%;

  &.idle,
  &.busy {
    &::before {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      top: 50%;
      left: 0;
      margin-top: -3px;
      border-radius: 50%;

      transition: background .5s linear;
    }
  }

  &.idle {
    &::before {
      background: @text-color-success;
    }
  }

  &.busy {
    cursor: wait;

    &::before {
      background-color: @text-color-warning;
      animation: bounce 1.0s infinite ease-in-out;
    }
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1.0);
  } 50% {
    transform: scale(.6);
  }
}


// Header --------------------------------------------------------------------

// Full width wrapper
#head {
  height: 65px;
  border-top: 5px solid #105AAF;
  background: url("@{imgPath}/blocks/header/header-bg.png") repeat-x;

  // Content container
  & > header {
    .container;
  }

  // Logo
  #circle {
    .column(3);
    margin: 9px 0;

    a {
      .ir;
      width: 182px;
      height: 48px;
      margin: 0;
      background: url("@{imgPath}/blocks/sprite.png") no-repeat -2px 0;
    }
  } // /Logo

  // Navigation
  nav {
    .column(7);
    .push(2);
    margin-top: 25px;
    float: right;

    ul {
      float: right;
    }

    li {
      display: inline;
      margin: 0 0 0 2.3em; /* 40px */
      text-align: right;
    }

    a {
      color: #105AAF;
      font-family: "Myriad", sans-serif;
      font-weight: 600;
      text-decoration: none;
      font-size: 16px;

      &:visited { color: #105AAF; }

      &:hover, &:active {
        color: #023066;
        text-shadow: 0 0 8px hsla(0, 0, 60%, 0.2);
        .transition(all 300ms ease-in-out);
      }

    }
  } // /Navigation
}

Remove scaffolding mixins Update with bootstrap mixing

// Header --------------------------------------------------------------------

// Full width wrapper
#head {
  height: 65px;
  border-top: 5px solid #105AAF;
  background: url("@{imgPath}/blocks/header/header-bg.png") repeat-x;

  // Content container
  & > header {
    .container;
  }

  // Logo
  #circle {
    margin: 9px 0;

    a {
      .hide-text;
      width: 182px;
      height: 48px;
      margin: 0;
      background: url("@{imgPath}/blocks/sprite.png") no-repeat -2px 0;
    }
  } // /Logo

  // Navigation
  nav {
    margin-top: 25px;
    float: right;

    ul {
      float: right;
    }

    li {
      display: inline;
      margin: 0 0 0 2.3em; /* 40px */
      text-align: right;
    }

    a {
      color: #105AAF;
      font-family: "Myriad", sans-serif;
      font-weight: 600;
      text-decoration: none;
      font-size: 16px;

      &:visited { color: #105AAF; }

      &:hover, &:active {
        color: #023066;
        text-shadow: 0 0 8px hsla(0, 0, 60%, 0.2);
        .transition(all 300ms ease-in-out);
      }

    }
  } // /Navigation
}


@import '../echo.variables';

.mw-echo-ui-specialHelpMenuWidget {
	.oo-ui-popupWidget-body {
		// Override clippable inline rules
		overflow-y: hidden !important;
		overflow-x: hidden !important;
	}

	&-markAllRead-label {
		&-title {
			display: block;
		}

		&-subtitle {
			display: block;
			color: @grey-light;
			margin-top: 0.2em;
		}
	}

	&-menu {
		.oo-ui-buttonWidget {
			display: block;
			padding: 0.5em;
			margin-right: 0;

			.oo-ui-labelElement-label {
				white-space: normal;
				// Width of the popup (300px) minus the
				// width of the icon (1.875em) minus the
				// padding of the button (0.5em * 2)
				width: ~'calc(300px - 1.875em - 1em)';
			}

			&:hover {
				background-color: #c8ccd1;
			}
		}
	}
}

Fix help menu icon placement for monobook

@import '../echo.variables';

.mw-echo-ui-specialHelpMenuWidget {
	.oo-ui-popupWidget-body {
		// Override clippable inline rules
		overflow-y: hidden !important;
		overflow-x: hidden !important;
	}

	&-markAllRead-label {
		&-title {
			display: block;
		}

		&-subtitle {
			display: block;
			color: @grey-light;
			margin-top: 0.2em;
		}
	}

	&-menu {
		.oo-ui-buttonWidget {
			display: block;
			padding: 0.5em;
			margin-right: 0;

			.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
				// OOUI Apex sets 'display:block;' with a huge level of specificity
				// on this icon. We must override it otherwise it sticks on its
				// own line
				display: inline-block !important;
			}

			.oo-ui-labelElement-label {
				white-space: normal;
				// Width of the popup (300px) minus the
				// width of the icon (1.875em) minus the
				// padding of the button (0.5em * 2)
				width: ~'calc(300px - 1.875em - 1em)';
			}

			&:hover {
				background-color: #c8ccd1;
			}
		}
	}
}


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

.header {
    display: flex;
    align-items: baseline;
}

.title {
    margin-top: 0;
    margin-bottom: 15px;
    flex-grow: 1;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
}

.controls {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    margin-left: auto;
}

.control {
    margin-left: 15px;
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 0;

    dt {
        font-style: italic;
        margin-top: 10px;
        width: 150px;
        color: #666;
    }

    dd {
        margin-top: 10px;
        margin-left: 0;
        width: calc(~'100% - 150px');

        &.description {
            overflow: hidden;
            word-break: break-word;
            white-space: pre-wrap;
        }
    }
}

.exception-explanation {
    .line-2 {
        margin-left: 20px;
    }
}

Remove styles for strings, which now are html

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

.header {
    display: flex;
    align-items: baseline;
}

.title {
    margin-top: 0;
    margin-bottom: 15px;
    flex-grow: 1;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
}

.controls {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    margin-left: auto;
}

.control {
    margin-left: 15px;
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 0;

    dt {
        font-style: italic;
        margin-top: 10px;
        width: 150px;
        color: #666;
    }

    dd {
        margin-top: 10px;
        margin-left: 0;
        width: calc(~'100% - 150px');

        &.description {
            overflow: hidden;
        }
    }
}

.exception-explanation {
    .line-2 {
        margin-left: 20px;
    }
}


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

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

Remove breadcrumb divider after last element

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

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


.home {
  .link {
    float: left;
    height: 100px;
    width: ~"calc(50% - 65px)";

    &:first { margin-right: 20px; }

    .icon {
      &:extend(.tiny_button);
      float: left;
      height: 40px;
      width: 40px;
      margin: 30px 20px 0 20px;

      .glyphicon {
        padding: 12px 0 0 12px;
      }
    }
  }

  .playlist.soundcloud {
    height: 265px;
    margin-left: 250px;

    img.artwork {
      height: 265px;
      width: 265px;
    }

    .tracks {
      height: 100%;
      margin-left: 300px;

      h3 { margin-bottom: 1.5em; }
    }
  }
}

Remove a useless `extend` call

.home {
  .link {
    float: left;
    height: 100px;
    width: ~"calc(50% - 65px)";

    &:first { margin-right: 20px; }

    .icon {
      float: left;
      height: 40px;
      width: 40px;
      margin: 30px 20px 0 20px;

      .glyphicon {
        padding: 12px 0 0 12px;
      }
    }
  }

  .playlist.soundcloud {
    height: 265px;
    margin-left: 250px;

    img.artwork {
      height: 265px;
      width: 265px;
    }

    .tracks {
      height: 100%;
      margin-left: 300px;

      h3 { margin-bottom: 1.5em; }
    }
  }
}


@import "~fyndiq-styles-colors/colors.less";

.icon {
  border-radius: 100%;
}

@keyframes wave {
  from {
    transform: translate(0%, 100%);
  }

  49% {
    transform: translate(-50%, 0%);
  }

  50% {
    transform: translate(0%);
  }

  to {
    transform: translate(-50%, -100%);
  }
}

.wave {
  animation-name: wave;
  animation-duration: 2000ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

Use px units instead of percent

@import "~fyndiq-styles-colors/colors.less";

.icon {
  border-radius: 100%;
}

@keyframes wave {
  from {
    transform: translate(0, 150px);
  }

  49% {
    transform: translate(-200px, 0);
  }

  50% {
    transform: translate(0);
  }

  to {
    transform: translate(-200px, -150px);
  }
}

.wave {
  animation-name: wave;
  animation-duration: 2000ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}


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

  height: 20px;
  width: 30px;
  background-size: cover;
  top: -1px;
  display: inline-block;

  &--userinfo-small {
    margin: 0px 0px 0px 8px;
    box-shadow: none;
  }
}

Set white colour default for flag

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

  height: 20px;
  width: 30px;
  background-size: cover;
  background-color: #fff;
  top: -1px;
  display: inline-block;

  &--userinfo-small {
    margin: 0px 0px 0px 8px;
    box-shadow: none;
  }
}


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

.media-header {
  margin: 0 60px;
  padding-bottom: 30px;
  min-height: 129px;
  border-bottom: 1px solid @gray-lighter;

  > h2 {
    display: inline-block;
    margin-top: 35px;
    max-width: 67%;
  }

  > .info {
    display: inline-block;
    margin-top: 35px;
    float: right;
    text-align: right;

    button {
      margin: 0 0 20px auto;
    }
  }

  > .summary {
    margin-top: 15px;

    h5 {
      .user-select(none);
      cursor: pointer;

      &::before {
        margin-right: .5rem;
        content: "\25b8"; // ▸
      }

      &.active::before {
        content: "\25be"; // ▾
      }
    }

    > .abstract {
      display: none; // Hide until the summary is toggled open
      max-width: 67%;

      > ul, > list {
        display: block;
        padding-left: 40px;
        margin-top: 10px;

        > li, > item {
          display: list-item;
          margin: 3px 0;
        }
      }
    }
  }
}

Use lighter font color for summary list

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

.media-header {
  margin: 0 60px;
  padding-bottom: 30px;
  min-height: 129px;
  border-bottom: 1px solid @gray-lighter;

  > h2 {
    display: inline-block;
    margin-top: 35px;
    max-width: 67%;
  }

  > .info {
    display: inline-block;
    margin-top: 35px;
    float: right;
    text-align: right;

    button {
      margin: 0 0 20px auto;
    }
  }

  > .summary {
    margin-top: 15px;

    h5 {
      .user-select(none);
      cursor: pointer;

      &::before {
        margin-right: .5rem;
        content: "\25b8"; // ▸
      }

      &.active::before {
        content: "\25be"; // ▾
      }
    }

    > .abstract {
      display: none; // Hide until the summary is toggled open
      max-width: 67%;

      > ul, > list {
        display: block;
        padding-left: 40px;
        margin-top: 10px;

        > li, > item {
          display: list-item;
          margin: 3px 0;
          color: @gray;
        }
      }
    }
  }
}


@w-form:~"w-form";

.@{w-form} {
  &-item {
    margin-bottom: 10px;
  }
  &-item-error {
    .@{w-form}-help, .@{w-form}-label {
      color: #dc3545;
    }
    .w-input-inner, .w-input-inner:hover, .w-input-inner:focus.w-input-inner:hover {
      box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
    }
  }
  &-label {
    line-height: 32px;
    min-height: 32px;
    font-weight: 600;
    font-size: 14px;
    padding-right: 5px;
    label {
      display: inline-block;
    }
  }
  &-row {
    align-items: center;
    display: flex;
  }
  &-help {
    color: #C2C2C2;
    font-size: 12px;
    padding-top: 3px;
  }
}

Modify the textarea error style.

@w-form:~"w-form";

.@{w-form} {
  &-item {
    margin-bottom: 10px;
  }
  &-item-error {
    .@{w-form}-help, .@{w-form}-label {
      color: #dc3545;
    }
    .w-input-inner, .w-input-inner:hover, .w-input-inner:focus.w-input-inner:hover,
    .w-textarea, .w-textarea:hover, .w-textarea:focus.w-textarea:hover {
      box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
    }
  }
  &-label {
    line-height: 32px;
    min-height: 32px;
    font-weight: 600;
    font-size: 14px;
    padding-right: 5px;
    label {
      display: inline-block;
    }
  }
  &-row {
    align-items: center;
    display: flex;
  }
  &-help {
    color: #C2C2C2;
    font-size: 12px;
    padding-top: 3px;
  }
}


.isloading__component {
  position: fixed;
  bottom: 5rem;
  right: 5rem;
  z-index: 5;
  min-width: 15%;
  max-width: 25%;
}

Make alert prettier on small screens.

.isloading__component {
  position: fixed;
  bottom: 5rem;
  right: 5rem;
  z-index: 5;
  min-width: 15%;
  max-width: 25%;

  @media only screen and (max-width: 768px) {
    left: 2.5rem;
    right: 2.5rem;
    max-width: 90%;
  }
}


@import "mixins.less";

.interstitial-modal {
    .modal-dialog {
        width: 980px;
    }
    .modal-body {
        position: relative;
        h1,
        h2,
        p {
            padding-left: 200px;
        }
        h1 {
            padding-top: 20px;
            margin-bottom: 10px;
        }
        h2 {
            margin-top: 0;
            font-size: 28px;
        }
        h2 .fa-stack {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 100px;
            margin-bottom: 30px;
        }
        p {
            font-weight: 300;
            font-size: 18px;
            a {
                color: @linkYellow;
            }
        }
    }
}

.interstitial-content {
    display: none;
}

.interstitial-modal-privacy .choice-privacy { display: block; }

Add styles for interstitial content toggling.

@import "mixins.less";

.interstitial-modal {
    .modal-dialog {
        width: 980px;
    }
    .modal-body {
        position: relative;
        h1,
        h2,
        p {
            padding-left: 200px;
        }
        h1 {
            padding-top: 20px;
            margin-bottom: 10px;
        }
        h2 {
            margin-top: 0;
            font-size: 28px;
        }
        h2 .fa-stack {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 100px;
            margin-bottom: 30px;
        }
        p {
            font-weight: 300;
            font-size: 18px;
            a {
                color: @linkYellow;
            }
        }
    }
}

.interstitial-content {
    display: none;
}

.interstitial-modal-privacy .choice-privacy { display: block; }
.interstitial-modal-opportunity .choice-opportunity { display: block; }
.interstitial-modal-access .choice-access { display: block; }
.interstitial-modal-freedom .choice-freedom { display: block; }
.interstitial-modal-learning .choice-learning { display: block; }
.interstitial-modal-control .choice-control { display: block; }


.environment-header {
    box-sizing: border-box;
    position: absolute;
    z-index: 600;
    top: @navbar-height;
    left: @bws-sidebar-width;
    right: 0;
    height: @environment-header-height;

    ul {
        .display-flex;
        height: @environment-header-height - 1;
        margin: 0;
        list-style: none;

        li {
            @spacer: 20px;

            .flex-basis(auto);
            padding: 0 @spacer;
            background-color: #fff;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-right-color: #d9d9d9;
            border-bottom-color: #cdcdcd;
            line-height: @environment-header-height;

            &:last-child {
                border-right: none;
            }
            &.tab {
                &.active {
                    &.services {
                        background-color: transparent;
                        border-bottom: none;
                    }
                    &.machines a {
                        background-color: #fff;
                    }
                    a {
                        height: @environment-header-height;
                        color: @text-colour;
                    }
                }
            }
            &.spacer {
                .flex(1);
            }
            a {
                display: block;
                margin: 0 (-@spacer);
                padding: 0 @spacer;
            }
        }
    }
}
body.state-sidebar-hidden .environment-header {
    left: 0;
}

Tweak service nav tab's background.

.environment-header {
    box-sizing: border-box;
    position: absolute;
    z-index: 600;
    top: @navbar-height;
    left: @bws-sidebar-width;
    right: 0;
    height: @environment-header-height;

    ul {
        .display-flex;
        height: @environment-header-height - 1;
        margin: 0;
        list-style: none;

        li {
            @spacer: 20px;

            .flex-basis(auto);
            padding: 0 @spacer;
            background-color: #fff;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-right-color: #d9d9d9;
            border-bottom-color: #cdcdcd;
            line-height: @environment-header-height;

            &:last-child {
                border-right: none;
            }
            &.tab {
                &.active {
                    &.services {
                        background-color: #f2f2f2;
                        border-bottom: none;
                    }
                    &.machines a {
                        background-color: #fff;
                    }
                    a {
                        height: @environment-header-height;
                        color: @text-colour;
                    }
                }
            }
            &.spacer {
                .flex(1);
            }
            a {
                display: block;
                margin: 0 (-@spacer);
                padding: 0 @spacer;
            }
        }
    }
}
body.state-sidebar-hidden .environment-header {
    left: 0;
}


// Tables

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

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

Support for hovering on cell's with state

// Tables

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

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


#topicList .ui-widget-content {
    background: inherit;
    color: black;
    border: none;
    cursor: pointer;
}

#topicList li {
    padding-left: 30px;
    padding-right: 30px;
}

#topicList .ui-selected {
    font-weight: bold;
}

/* note, we can't get at the style of the dialog itself, because it isn't in the scope that activates this css
If we wer ever motivated enough to do that, see here: http://stackoverflow.com/questions/2199888/custom-css-scope-and-jquery-ui-dialog-themes
But more likely we'd just get a Bloom Dialog theme going and so we wouldn't care about customizing it just for this chooser
div.ui-dialog div.ui-dialog-titlebar {
  background: darkgray;
}
*/

Revert topic chooser font to Segoe UI (BL-11154)

#topicList {
    // We are going to rewrite this component in 5.4.
    // So this is just a temporary quick-fix to get the bolding to work correctly.
    // There isn't enough distinction between regular and bold in Roboto.
    font-family: "Segoe UI", Arial, sans-serif;
}

#topicList .ui-widget-content {
    background: inherit;
    color: black;
    border: none;
    cursor: pointer;
}

#topicList li {
    padding-left: 30px;
    padding-right: 30px;
}

#topicList .ui-selected {
    font-weight: bold;
}

/* note, we can't get at the style of the dialog itself, because it isn't in the scope that activates this css
If we wer ever motivated enough to do that, see here: http://stackoverflow.com/questions/2199888/custom-css-scope-and-jquery-ui-dialog-themes
But more likely we'd just get a Bloom Dialog theme going and so we wouldn't care about customizing it just for this chooser
div.ui-dialog div.ui-dialog-titlebar {
  background: darkgray;
}
*/


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

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

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

      color: @grayDark;

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

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

      &:hover {
        color: @grayDarker;
        cursor: pointer;
      }

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

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        vertical-align: initial;
        margin-right: 1ex;
        margin-left: 0;
      }

      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});

Add note explaining that icon style here is bad

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

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

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

      color: @grayDark;

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

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

      &:hover {
        color: @grayDarker;
        cursor: pointer;
      }

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

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        vertical-align: initial;
        margin-right: 1ex;
        margin-left: 0;
      }

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


@import url(http://fonts.googleapis.com/css?family=Arimo);
@import 'mixins.import.less';

body {
	margin: 0;
	padding: 10px;
	background: @background-color;
	font-family: 'Arimo', sans-serif;
	font-size: @font-size-base;
}

h1 {
	font-size: @font-size-xlarge;
}

h2 {
	font-size: @font-size-large;
}

.header {
	margin: 5px 0;
	text-align: center;
	font-size: @font-size-small;

	a, span {
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
		font-size: @font-size-base;
	}

	a {
		color: @font-color;
		text-decoration: none;
	}

	span {
		font-weight: bold;
	}

	.divider {
		margin: 0 5px;
		width: 10px;
		background: #ccc;
		width: 1px;
		height: 20px;
	}
}

@media (min-width: @screen-sm-min) {
	.header {
		text-align: left;

		a, span {
			font-size: @font-size-large;
		}
	}
}

Fix link border in IE

@import url(http://fonts.googleapis.com/css?family=Arimo);
@import 'mixins.import.less';

body {
	margin: 0;
	padding: 10px;
	background: @background-color;
	font-family: 'Arimo', sans-serif;
	font-size: @font-size-base;
}

h1 {
	font-size: @font-size-xlarge;
}

h2 {
	font-size: @font-size-large;
}

img {
	border: 0;
}

.header {
	margin: 5px 0;
	text-align: center;
	font-size: @font-size-small;

	a, span {
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
		font-size: @font-size-base;
	}

	a {
		color: @font-color;
		text-decoration: none;
	}

	span {
		font-weight: bold;
	}

	.divider {
		margin: 0 5px;
		width: 10px;
		background: #ccc;
		width: 1px;
		height: 20px;
	}
}

@media (min-width: @screen-sm-min) {
	.header {
		text-align: left;

		a, span {
			font-size: @font-size-large;
		}
	}
}


/*
 * VisualEditor
 */

.oo-ui-toolbar-bar {
  background: #f7f7f7;
  // Fix left padding problem
  margin-left: -24px;
}

// Make sure toolbar won't get sticky under our sticky header
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
  top: (@header-height + 1); //+1px for the border
}

// Make VE-Save button orange
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background-color: @hw-orange;
  border-color: @hw-orange-border;
  color: @hw-orange-text;
  text-transform: uppercase;
}

Improve Visual editor save-button styles

/**
 * VisualEditor
 */

.oo-ui-toolbar-bar {
  background: #f7f7f7;
  // Fix left padding problem
  margin-left: -24px;
}

// Make sure toolbar won't get sticky under our sticky header
//
// On documentation they suggest using `$wgVisualEditorSkinToolbarScrollOffset`
// for this but it doesn't seem to be working.
// https://www.mediawiki.org/wiki/Extension:VisualEditor#Complete_list_of_configuration_options
// https://phabricator.wikimedia.org/rEVED4981a8253d36c9fa327148b4e16fac560e573d2b
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
  top: (@header-height + 1); // +1px for the border
}

// Make VE-Save button orange
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background-color: @hw-orange;
  border-color: @hw-orange-border;
  color: @hw-orange-text;
  text-transform: uppercase;
  &:hover {
    background: darken(@hw-orange, 5%);
    border-color: darken(@hw-orange, 5%);
  }
  &:focus,
  &:active {
    background: darken(@hw-orange, 7%);
    border-color: darken(@hw-orange, 7%);
  }
}


//= require_tree ./feedback

@import "bootstrap/mixins";

@feedback_frame_width: 430px;

.modal-window.feedback-modal-window {
  width: @feedback_frame_width;
  margin-left: (-@feedback_frame_width / 2);
  position: fixed;

  .modal-window-body {
    max-height: none;
    overflow: hidden;
  }
}

.feedback-iframe {
  width: 100%;
  border: none;
}

.feedback_form { //within an iframe!
  background: #fff;
  min-width: 0;
  height:auto;

  form {
    .clearfix();
    margin: 0;

    input[type=text], textarea {
      display: block;
      width: 100%;
    }

    textarea {
      height: 145px;
      margin-bottom: 10px;
    }

    .submit {
      float: right;
    }
  }
}

Fix minor vertical layout padding.

//= require_tree ./feedback

@import "bootstrap/mixins";

@feedback_frame_width: 430px;

.modal-window.feedback-modal-window {
  width: @feedback_frame_width;
  margin-left: (-@feedback_frame_width / 2);
  position: fixed;

  .modal-window-body {
    max-height: none;
    overflow: hidden;
  }
}

.feedback-iframe {
  width: 100%;
  border: none;
  display: block;
}

.feedback_form { //within an iframe!
  background: #fff;
  min-width: 0;
  height:auto;

  form {
    .clearfix();
    margin: 0;

    input[type=text], textarea {
      display: block;
      width: 100%;
    }

    textarea {
      height: 145px;
      margin-bottom: 10px;
    }

    .submit {
      float: right;
    }
  }
}


@import "oroui/css/less/mixins";
@import "role/permissions-grid";
@import "role/capabilities";

.api-block #btn-apigen {
  display: inline;
  line-height: 1.2em;
  vertical-align: baseline;
  padding: 4px 12px;
}

form.change-password-form {
  span.icon-eye-close,
  span.icon-eye-open {
    left: 445px;
    position: absolute;
    top: 15px;
  }
}

.mobile-version {
  form.change-password-form .controls {
    input[type=text], input[type=password] {
      box-sizing: border-box;
      width: calc(~'100% - 28px') !important;
      height: 30px;
    }
  }
}

.form-horizontal .control-group-oro_user_emailsettings > .controls,
.form-horizontal .control-group-oro_user_emailsettings > .controls > div > .control-group > .controls
{
  margin-left:0;
}
.form-horizontal .control-group-oro_user_emailsettings .controls .control-label.wrap {
  width: 230px;
  text-align: right;
}
.form-horizontal .control-group-oro_organizations_select .select2-choices {
  overflow: visible;
}

h1 .popover .oro-popover-content {
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
}

Fix position of eye icon in change pass

@import "oroui/css/less/mixins";
@import "role/permissions-grid";
@import "role/capabilities";

.api-block #btn-apigen {
  display: inline;
  line-height: 1.2em;
  vertical-align: baseline;
  padding: 4px 12px;
}

form.change-password-form {
  span.icon-eye-close,
  span.icon-eye-open {
    left: 450px;
    position: absolute;
    top: 16px;
  }
}

.mobile-version {
  form.change-password-form .controls {
    input[type=text], input[type=password] {
      box-sizing: border-box;
      width: calc(~'100% - 28px') !important;
      height: 30px;
    }
  }
}

.form-horizontal .control-group-oro_user_emailsettings > .controls,
.form-horizontal .control-group-oro_user_emailsettings > .controls > div > .control-group > .controls
{
  margin-left:0;
}
.form-horizontal .control-group-oro_user_emailsettings .controls .control-label.wrap {
  width: 230px;
  text-align: right;
}
.form-horizontal .control-group-oro_organizations_select .select2-choices {
  overflow: visible;
}

h1 .popover .oro-popover-content {
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
}


.pnl-SearchField {
  display: inline-block;
  position: relative;
}

.pnl-SearchField-input {
  .control;
  border-radius: 100px;
  border: 1px solid #ccc;
  outline: none;
  padding-left: 23px;
  padding-right: 23px;
  width: 180px;
}

.pnl-SearchField-search {
  color: #999;
  position: absolute;
  left: 6px;
  top: 6px;
}

.pnl-SearchField-clear {
  color: #999;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 6px;
}

Tweak position of search field icons

.pnl-SearchField {
  display: inline-block;
  position: relative;
}

.pnl-SearchField-input {
  .control;
  border-radius: 100px;
  border: 1px solid #ccc;
  outline: none;
  padding-left: 23px;
  padding-right: 23px;
  width: 180px;
}

.pnl-SearchField-search {
  color: #999;
  position: absolute;
  left: 6px;
  top: 7px;
}

.pnl-SearchField-clear {
  color: #999;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 7px;
}


@import "../bower_components/bootstrap/less/variables.less";
//@import "../bower_components/bootstrap/less/mixins.less";

Rework import of bootstrap variables

@import (optional) "../../bootstrap/less/variables.less";
@import (optional) "../bower_components/bootstrap/less/variables.less";
//@import "../bower_components/bootstrap/less/mixins.less";


/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* UI elements that did not fit into the buttons/range elements category. */

/* This is a spacer element used to separate elements within the control
 * buttons panel. It's just an empty div of certain width. */
.shaka-spacer {

  /* Make the element shrink to accommodate things to the right. */
  .shrinkable();

  /* Make the element grow to take up the remaining space. */
  flex-grow: 1;

  /* Margins don't shrink. Remove margins in order to be more flexible when shrinking. */
  margin: 0;
}

Fix pointer cursor on UI spacer

/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* UI elements that did not fit into the buttons/range elements category. */

/* This is a spacer element used to separate elements within the control
 * buttons panel. It's just an empty div of certain width. */
.shaka-spacer {
  /* This should not have a pointer-style cursor like the other controls. */
  cursor: default;

  /* Make the element shrink to accommodate things to the right. */
  .shrinkable();

  /* Make the element grow to take up the remaining space. */
  flex-grow: 1;

  /* Margins don't shrink. Remove margins in order to be more flexible when shrinking. */
  margin: 0;
}


#left-panel,
#right-panel {
  display: none;
}
#main {
  width: 100% !important;
}

Fix page height in print version

html, body, #page, #top-page {
  height: auto;
}
#left-panel,
#right-panel {
  display: none;
}
#main {
  width: 100% !important;
}


.LogInButton {
  &:extend(.Button--block);
}
.LogInButtons {
  width: 200px;
  margin: 0 auto 20px;

  .LogInButton {
    margin-bottom: 5px;
  }
}

Remove margin when no login buttons are present

.LogInButton {
  &:extend(.Button--block);
}
.LogInButtons {
  width: 200px;
  margin: 0 auto;

  .LogInButton {
    margin-bottom: 5px;

    &:last-child {
      margin-bottom: 20px;
    }
  }
}


/******************************************
 Compatibility with Vim Notebook Extension
 contributed https://github.com/alextfkd
*******************************************/
.CodeMirror-dialog-bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 100;
  background-color: @cc-input-bg;
  color: @cc-input-fg;
  padding-right: 1.2em;
  border: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.CodeMirror-dialog-bottom input {
  border: none;
  outline: none;
  color: @cc-input-fg;
  background-color: @cc-input-bg;
  width: calc(100% - 1em);
}
/* Jupyter cell is in normal mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused.cm-fat-cursor {
  background-color: @cc-input-bg;
  color: @cc-input-fg;
}
/* Jupyter cell is in insert mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) {
  background-color: @cc-input-bg;
  color: @cc-input-fg;
}

Add color for fat cursor

/******************************************
 Compatibility with Vim Notebook Extension
 contributed https://github.com/alextfkd
*******************************************/
.CodeMirror-dialog-bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 100;
  background-color: @cc-input-bg;
  color: @cc-input-fg;
  padding-right: 1.2em;
  border: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.CodeMirror-dialog-bottom input {
  border: none;
  outline: none;
  color: @cc-input-fg;
  background-color: @cc-input-bg;
  width: calc(100% - 1em);
}
/* Jupyter cell is in normal mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused.cm-fat-cursor {
  background-color: @cc-input-bg;
  color: @cc-input-fg;
}
/* Jupyter cell is in insert mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) {
  background-color: @cc-input-bg;
  color: @cc-input-fg;
}

.cm-fat-cursor .CodeMirror-cursor {
  background: @cursor-color
}


.login {
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  > div {
    min-width:300px;
    flex:0 0 auto;
  }
  h3 {
    margin-bottom:@grid-gutter-width;
  }
}

Move the login form up from the center by 20%

.login {
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  left:0;
  right:0;
  bottom:20%;
  top:0;
  > div {
    min-width:300px;
    flex:0 0 auto;
  }
  h3 {
    margin-bottom:@grid-gutter-width;
  }
}


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

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

@gridColumns: 9;

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

Fix sidebar running into form in tablet view

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

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

@gridColumns: 9;

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

@media (min-width: 768px) and (max-width: 979px) {
  #grid > .core(42px, 25px);
}


.font-face(ProximaNova300, ProximaNova, 300);
.font-face(ProximaNova400, ProximaNova, 400);
.font-face(ProximaNova700, ProximaNova, 700);

.font-face(Roboto-Light, Roboto, 300); // Light
.font-face(Roboto-Regular, Roboto, 400); // Normal
.font-face(Roboto-Medium, Roboto, 500); // Medium
.font-face(Roboto-Bold, Roboto, 700); // Bold

.font-face(RobotoMonoRegular, RobotoMono, 400);
.font-face(RobotoMonoMedium, RobotoMono, 500);
.font-face(RobotoMonoBold, RobotoMono, 700);

Add comments to 'splain font weights

.font-face(ProximaNova300, ProximaNova, 300);
.font-face(ProximaNova400, ProximaNova, 400);
.font-face(ProximaNova700, ProximaNova, 700);

.font-face(Roboto-Light, Roboto, 300); // Light
.font-face(Roboto-Regular, Roboto, 400); // Normal
.font-face(Roboto-Medium, Roboto, 500); // Medium
.font-face(Roboto-Bold, Roboto, 700); // Bold

.font-face(RobotoMonoRegular, RobotoMono, 400); // Normal
.font-face(RobotoMonoMedium, RobotoMono, 500); // Medium
.font-face(RobotoMonoBold, RobotoMono, 700); // Bold


.service-info {
  .content {
    @media (min-width: @screen-sm-min) {
      .make-fluid-column(right, @layout-column-width-medium + @layout-margin-large);
      p {
        max-width: @layout-column-width-max;
      }
    }
  }

  .links {
    margin-top: @layout-margin-medium;
    a {
      .klm-heading-small;
    }
    @media (min-width: @screen-sm-min) {
      .make-fixed-column(left, @layout-column-width-medium);
      margin-top: 0;
    }
  }
}

Add tablet styles to service info page

.service-info {
  .content {
    p {
      max-width: @layout-column-width-max;
    }
    @media (min-width: @screen-md-min) {
      .make-fluid-column(right, @layout-column-width-medium + @layout-margin-large);
    }
  }

  .links {
    margin-top: @layout-margin-medium;
    a {
      .klm-heading-small;
    }
    @media (min-width: @screen-md-min) {
      .make-fixed-column(left, @layout-column-width-medium);
      margin-top: 0;
    }
  }
}


.lui-overlay-button--small {
  height: 24px;
  min-width: 24px;
  line-height: 20px;
  font-size: 12px;
  padding: 0 10px;

  .lui-overlay-button__icon,
  .lui-overlay-button__caret {
    &:only-child {
      min-width: 16px;
    }
  }
}

Increase height to 26px and remove icon and caret overrides

.lui-overlay-button--small {
  height: 26px;
  min-width: 26px;
  line-height: 20px;
  font-size: 12px;
  padding: 0 10px;
}


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

.profile-cover-uploader {
  border-top: @osu-colour-b1;
  padding: 10px;
  display: flex;
  flex-direction: column;

  &__button {
    margin-top: 10px;
    text-transform: none;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__info {
    padding: 10px;
    margin-bottom: -10px;
  }

  &__info-entry {
    margin-bottom: 5px;

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

Fix profile cover uploader separator line

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

.profile-cover-uploader {
  border-top: 1px solid @osu-colour-b5;
  padding: 10px;
  display: flex;
  flex-direction: column;

  &__button {
    margin-top: 10px;
    text-transform: none;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__info {
    padding: 10px;
    margin-bottom: -10px;
  }

  &__info-entry {
    margin-bottom: 5px;

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


@import (reference) "../../css/variables";

* {
  font-family: @font-family-base;
}

body {
  background-color: @main-background-color;
  color: @font-color-base;
  font-family: @font-family-base;
}

.report-layout {
  margin: @content-margin-top @content-margin-right @content-margin-bottom @content-margin-left;

  .report-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
  }

  .report-section {
    display: table-cell;
  }
}

@media screen and (max-width: 630px) {
  .report-row {
    display: block !important;
  }
  .report-section {
    width: 100%;
    display:inline-block !important;
  }
}

Make report to be responsive

@import (reference) "../../css/variables";

* {
  font-family: @font-family-base;
}

body {
  background-color: @main-background-color;
  color: @font-color-base;
  font-family: @font-family-base;
}

.report-layout {
  margin: @content-margin-top @content-margin-right @content-margin-bottom @content-margin-left;

  .report-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
  }

  .report-section {
    display: table-cell;
  }
}

@media screen and (max-width: 630px) {
  .report-row {
    display: block !important;
  }
  .report-section {
    width: 100%;
    display: inline-block !important;
  }
}


.Code {
  font-family: monospace;

  &--inline {
    white-space: nowrap;
  }

  &-part {

    &--built_in,
    &--function {
      color: #0086b3;
    }

    &--class {
      color: #458;
      font-weight: bold;
    }

    &--comment {
      color: #998;
      font-style: italic;
    }

    &--keyword,
    &--reserved {
      font-weight: bold;
    }

    &--literal,
    &--number,
    &--variable {
      color: #008080;
    }

    &--string {
      color: #d14;
    }

    &--tag {
      color: #000080;
    }
  }
}

Remove italic style for code comments

.Code {
  font-family: monospace;

  &--inline {
    white-space: nowrap;
  }

  &-part {

    &--built_in,
    &--function {
      color: #0086b3;
    }

    &--class {
      color: #458;
      font-weight: bold;
    }

    &--comment {
      color: #998;
    }

    &--keyword,
    &--reserved {
      font-weight: bold;
    }

    &--literal,
    &--number,
    &--variable {
      color: #008080;
    }

    &--string {
      color: #d14;
    }

    &--tag {
      color: #000080;
    }
  }
}


.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  box-shadow: inset 0 0 0 0.1em @color-Interactive--400;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  line-height: 1;
  padding: 0.5em;
  text-decoration: none;
  text-shadow: 0 0.05em 0 @color-White;

  &[disabled],
  &--disabled {
    background-color: @color-Interactive--100;
    box-shadow: inset 0 0 0 0.1em @color-Interactive--150;
    color: @color-Interactive--400;
  }
}

Add button state and primary styles

.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  box-shadow: inset 0 0 0 0.15em @color-Interactive--400;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  padding: 0.75em;
  text-decoration: none;
  text-shadow: 0 0.05em 0 @color-White;

  &:hover,
  &:focus {
    background-color: @color-Interactive--400;
    color: @color-White;
    text-shadow: 0 0.05em 0 @color-Interactive--750;
  }

  &:active {
    position: relative;
    top: 0.1em;
  }

  &[disabled],
  &--disabled {
    background-color: @color-Interactive--100;
    box-shadow: inset 0 0 0 0.15em @color-Interactive--150;
    color: @color-Interactive--400;
    text-shadow: inherit;
  }

  &--primary {
    background-color: @color-Interactive--750;
    box-shadow: inset 0 0 0 0.15em @color-Interactive--750;
    color: @color-White;
    text-shadow: none;

    &:hover,
    &:focus {
      background-color: @color-White;
      color: @color-Interactive--750;
      text-shadow: inherit;
    }
  }
}


@import "mixins";

.FlickrInterestingNavigator {

  font-family: Arial, Helvetica, sans-serif;
  width: 800px;

  .navigator {
    border-bottom: 1px dotted #ddd;
    font-size: 12px;
    margin-bottom: 10px;
    padding-bottom: 5px;

    .monthButtonName {
      color: #0063dc;
      display: inline;
    }

    .monthHeading {
      color: #ff0084;
      font-weight: normal !important;
      text-align: center;
    }
  }

  .dayOfWeek {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    text-align: left;
    text-transform: uppercase;
  }

  .calendar {
    border-collapse: collapse;
    font-size: 18px;
    font-weight: bold;
  }

  .BasicButton.disabled .monthButtonName {
    background-color: inherit;
    color: black;
    text-decoration: none;
  }

  .chevron {
    color: #ff0084;
    font-weight: bold;
  }

  .FlickrInterestingDay.insideMonth {
    border-style: solid;
    border-width: 1px;
  }
  .FlickrInterestingDay.outsideMonth {
    visibility: hidden;
  }

}

Fix font-size of previous/next month buttons.

@import "mixins";

.FlickrInterestingNavigator {

  font-family: Arial, Helvetica, sans-serif;
  width: 800px;

  .navigator {

    border-bottom: 1px dotted #ddd;
    margin-bottom: 10px;
    padding-bottom: 5px;

    &,
    button {
      font-size: 12px;
    }

    .monthButtonName {
      color: #0063dc;
      display: inline;
    }

    .monthHeading {
      color: #ff0084;
      font-weight: normal !important;
      text-align: center;
    }
  }

  .dayOfWeek {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    text-align: left;
    text-transform: uppercase;
  }

  .calendar {
    border-collapse: collapse;
    font-size: 18px;
    font-weight: bold;
  }

  .BasicButton.disabled .monthButtonName {
    background-color: inherit;
    color: black;
    text-decoration: none;
  }

  .chevron {
    color: #ff0084;
    font-weight: bold;
  }

  .FlickrInterestingDay.insideMonth {
    border-style: solid;
    border-width: 1px;
  }
  .FlickrInterestingDay.outsideMonth {
    visibility: hidden;
  }

}


.technology {
  .nav-tabs {
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    a {
      background: white;
    }

    .active > a, a:hover {
      background: darken(@circleBlueLight, 20%);
      color: white;
      border-radius: 3px;
    }
  }

  .tab-content {
    padding-bottom: 40px;
  }
}

Stop moving up and down

.technology {
  min-height: 450px;
  .nav-tabs {
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    a {
      background: white;
    }

    .active > a, a:hover {
      background: darken(@circleBlueLight, 20%);
      color: white;
      border-radius: 3px;
    }
  }

  .tab-content {
    padding-bottom: 40px;
  }
}


// Use this file to override Twitter Bootstrap variables or define own variables.

Update variable names to bootstrap 3 versions

// Use this file to override Twitter Bootstrap variables or define own variables.

// Base colours

@beige: #f3f1ee;
@brown: #413f3b;

@green:  #5f8e43;
@blue:   #2f4365;
@red:    #8e4d43;
@orange: #b2685c;
@yellow: #b2935c;

@body-bg: @beige;
@text-color: @brown;

@link-color: @green;

// Typography (with help from bootswatch.com's "readable" theme)
@import url('//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic');
@font-family-sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-mono:        Monaco, Menlo, Consolas, "Courier New", monospace;

@font-size-base:          15px;
@font-family-base:        @font-family-sans-serif;
@line-height-base:        @font-size-base * 1.5;
@alt-font-family:         @font-family-sans-serif;

@headings-font-family:    "Lora", Georgia, "Times New Roman", Times, serif;
@headings-font-weight:    bold;    // instead of browser default, bold
@headings-color:         inherit; // empty to use BS default, @textColor

// Hero unit
@hero-unit-background: darken(@body-bg, 10%);

// Nav bar
@navbar-background: @brown;
@navbar-background-highlight: @brown;
@navbar-text: @beige;
@navbar-link-color: darken(@beige, 20%);
@navbar-link-color-hover: @beige;
@navbar-link-color-active: @beige;
@navbar-brand-color: lighten(@green, 20%);

@dropdown-background: lighten(@beige, 10%);
@dropdown-link-color: @brown;
@dropdown-link-color-hover: @brown;
@dropdown-link-background-hover: lighten(@green, 50%);


/* ========================================================================== *\
   Utilities -> Text Alignment ($utilities-text-alignment)
\* ========================================================================== */

//
// Text alignment
//
// t = text-align
// l = left
// r = right
// c = center
// j = justify
//

.tl {
  text-align: left !important;
}

.tr {
  text-align: right !important;
}

.tc {
  text-align: center !important;
}

.tj {
  text-align: justify !important;
}

.screens({
  .xs-tl {
    text-align: left !important;
  }

  .xs-tr {
    text-align: right !important;
  }

  .xs-tc {
    text-align: center !important;
  }

  .xs-tj {
    text-align: justify !important;
  }
},{
  .sm-tl {
    text-align: left !important;
  }

  .sm-tr {
    text-align: right !important;
  }

  .sm-tc {
    text-align: center !important;
  }

  .sm-tj {
    text-align: justify !important;
  }
},{
  .md-tl {
    text-align: left !important;
  }

  .md-tr {
    text-align: right !important;
  }

  .md-tc {
    text-align: center !important;
  }

  .md-tj {
    text-align: justify !important;
  }
},{
  .lg-tl {
    text-align: left !important;
  }

  .lg-tr {
    text-align: right !important;
  }

  .lg-tc {
    text-align: center !important;
  }

  .lg-tj {
    text-align: justify !important;
  }
},{
  .xl-tl {
    text-align: left !important;
  }

  .xl-tr {
    text-align: right !important;
  }

  .xl-tc {
    text-align: center !important;
  }

  .xl-tj {
    text-align: justify !important;
  }
},{
  .xxl-tl {
    text-align: left !important;
  }

  .xxl-tr {
    text-align: right !important;
  }

  .xxl-tc {
    text-align: center !important;
  }

  .xxl-tj {
    text-align: justify !important;
  }
});

Use mixin to generate text alignment breakpoint classes

/* ========================================================================== *\
   Utilities -> Text Alignment ($utilities-text-alignment)
\* ========================================================================== */

//
// Text alignment
//
// t = text-align
// l = left
// r = right
// c = center
// j = justify
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}tl {
    text-align: left !important;
  }

  .@{breakpoint-prefix}tr {
    text-align: right !important;
  }

  .@{breakpoint-prefix}tc {
    text-align: center !important;
  }

  .@{breakpoint-prefix}tj {
    text-align: justify !important;
  }
});


.umb-tags-editor {
    border: @inputBorder solid 1px;
    padding: 5px;
    min-height: 54px;
    font-size: 13px;
    text-shadow: none;
    box-sizing: border-box;

    .tag {
        cursor: default;
        margin: 10px;
        padding: 10px 15px;
        background: @blueExtraDark;
        position: relative;
        user-select: all;

        .umb_confirm-action {

            > .btn-icon {
                color: @white;
                padding: 0;
                position: relative;
                cursor: pointer;
                padding-left: 2px;
                font-size: 15px;
                right: -5px;
                bottom: -1px;
                user-select: none;
            }

            .umb_confirm-action__overlay.-left {
                top: 8px;
                left: auto;
                right: 15px;
            }
        }
    }

    input {
        border: none;
        background: @white;
    }

    .twitter-typeahead {
        margin: 10px;
        margin-top: 16px;
        vertical-align: top;

        input {
            padding-left: 0;
        }
    }
}

Adjust tags editor typeahead to fit within container in splitview

.umb-tags-editor {
    border: @inputBorder solid 1px;
    padding: 5px;
    min-height: 54px;
    font-size: 13px;
    text-shadow: none;
    box-sizing: border-box;

    .tag {
        cursor: default;
        margin: 10px;
        padding: 10px 15px;
        background: @blueExtraDark;
        position: relative;
        user-select: all;

        .umb_confirm-action {

            > .btn-icon {
                color: @white;
                padding: 0;
                position: relative;
                cursor: pointer;
                padding-left: 2px;
                font-size: 15px;
                right: -5px;
                bottom: -1px;
                user-select: none;
            }

            .umb_confirm-action__overlay.-left {
                top: 8px;
                left: auto;
                right: 15px;
            }
        }
    }

    .twitter-typeahead {
        margin: 10px;
        margin-top: 16px;
        vertical-align: top;
        max-width: calc(100% - 20px);

        input {
            border: none;
            background: @white;
            padding-left: 0;
            max-width: 100%;
        }
    }
}


.learning-guide {

  .guide-heading {
    .row();
  }

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

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

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

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

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

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

}

Add a bit more margin below the explanation

.learning-guide {

  .guide-heading {
    .row();
  }

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

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

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

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

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

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

}


@import "ui-variables";

.lt-server-info a,
.lt-server-info a:hover {
  color: @text-color;
  text-decoration: underline;
  text-decoration-style: wavy;
}

Use the wavy style from the linter package for the status bar item

@import "ui-variables";

.wavy_border(@color) {
  background-image:
    linear-gradient(45deg, transparent 65%, @color 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, @color 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, @color 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, @color 35%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.lt-server-info a,
.lt-server-info a:hover {
  color: @text-color;
  .wavy_border(@background-color-info);
}


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

.media-footer > .metadata {
  h3 {
    font-weight: 300;
  }

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

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

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

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

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

Reduce margin at the bottom of the dl

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

.media-footer > .metadata {
  h3 {
    font-weight: 300;
  }

  dl {
    margin-bottom: 0;

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

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

      &:last-child {
        border: none;
      }

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

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

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


// Article Renderer
.framework-perseus.perseus-article {
    .perseus-widget-container {
        &.widget-float-left {
            float: left;
            margin-right: 1em;
        }

        &.widget-float-right {
            float: right;
            margin-left: 1em;
        }
    }

    .perseus-renderer > .paragraph {
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
    }

    .paragraph.perseus-paragraph-full-width {
        margin-left: 0;
        margin-right: 0;
        max-width: none;

        > .paragraph {
            margin: 0;
            max-width: none;
        }
    }
}

Fix image floats to be visible.

// Article Renderer
.framework-perseus.perseus-article {
    .perseus-widget-container {
        &.widget-float-left {
            float: left;
            padding-right: 1em;
            max-width: 50%;
            width: 100%;        }

        &.widget-float-right {
            float: right;
            padding-left: 1em;
            max-width: 50%;
            width: 100%;        }
    }

    .perseus-renderer > .paragraph {
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
    }

    .paragraph.perseus-paragraph-full-width {
        margin-left: 0;
        margin-right: 0;
        max-width: none;

        > .paragraph {
            margin: 0;
            max-width: none;
        }
    }
}


#storyForm {
  .modal-dialog {
    width: 900px;
  }
}

.storyDetails {
  width: 300px;
  margin-right: 30px;
  float: left;
}

.tasksDetails {
  border-left: 1px #e5e5e5 solid;
  width: 500px;
  float: left;
  padding-left: 30px;
}

.taskList {
  width: 220px;
  float: left;
}

Fix up the task form

#storyForm {
  .modal-dialog {
    width: 1100px;
  }

  .taskForm {
    float: left;
    width: 350px;
    margin-top: 30px;
    padding: 22px;
    border: 1px #ccc solid;
  }
}

.storyDetails {
  width: 300px;
  margin-right: 30px;
  float: left;
}

.tasksDetails {
  border-left: 1px #e5e5e5 solid;
  width: 700px;
  float: left;
}


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

  .background {
    stroke: @gridline-colour;
  }
  .annotations {
    .annotation line {
      stroke: @gridline-colour;
      stroke-dasharray: 20px;
    }
  }
  .x-axis {
    path {
      stroke: @gridline-colour;
    }
  }

  &.secondary-rsi {
    .right-handle {
      text {
        display: none;
      }
    }
  }

  .rsi {
    stroke: @rsi-line-colour;
    stroke-width: @stroke-width;

    .annotation line {
      shape-rendering: crispEdges;
    }
  }

  .macd-divergence {
    .bar {
      stroke: @primary-blue;
      fill: @secondary-grey;
    }
  }

  .macd-signal {
    .line {
      stroke: @macd-signal-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .macd {
    .line {
      stroke: @macd-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .zero {
    .annotation line {
      visibility: hidden;
    }
  }

  .bar {
    stroke: @primary-blue;
    fill: @secondary-grey;
  }
}

Update RSI annotation line dash array

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

  .background {
    stroke: @gridline-colour;
  }
  .annotations {
    .annotation line {
      stroke: @gridline-colour;
      stroke-dasharray: 5px 2px;
    }
  }
  .x-axis {
    path {
      stroke: @gridline-colour;
    }
  }

  &.secondary-rsi {
    .right-handle {
      text {
        display: none;
      }
    }
  }

  .rsi {
    stroke: @rsi-line-colour;
    stroke-width: @stroke-width;

    .annotation line {
      shape-rendering: crispEdges;
    }
  }

  .macd-divergence {
    .bar {
      stroke: @primary-blue;
      fill: @secondary-grey;
    }
  }

  .macd-signal {
    .line {
      stroke: @macd-signal-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .macd {
    .line {
      stroke: @macd-line-colour;
      stroke-width: @stroke-width;
    }
  }

  .zero {
    .annotation line {
      visibility: hidden;
    }
  }

  .bar {
    stroke: @primary-blue;
    fill: @secondary-grey;
  }
}


.input_group {
  display: flex;
  align-items: center;
  position: relative;
}

.input_group__before {
  margin: 0 10px 0 0;

  &-outside {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}

.input_group__after {
  margin: 0 0 0 10px;

  &-outside_bottom {
    position: absolute;
    right: 0;
    top: 100%;
    margin: 10px 0 0 0;
    font-size: 14px;
  }
}

.input_group__input {
  flex: 1;
}

Fix safari input focus bug

.input_group {
  display: flex;
  align-items: center;
  position: relative;
}

.input_group__before {
  margin: 0 10px 0 0;

  &-outside {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}

.input_group__after {
  margin: 0 0 0 10px;

  &-outside_bottom {
    position: absolute;
    right: 0;
    top: 100%;
    margin: 10px 0 0 0;
    font-size: 14px;
  }
}

.input_group__input {
  flex: 1;
  position: relative;
  z-index: 10
}


.queue-inner table.data-grid {
  table-layout:fixed;

  th:first-of-type {
    width: 20px;
  }

  td * {
    word-wrap: break-word;
  }
}

Improve editor queues column width

.queue-inner table.data-grid {
  th:first-of-type {
    width: 20px;
  }

  td {
    max-width: 18em;

    * {
      word-wrap: break-word;
    }
  }
}


#job_runner {
    h4 {
        margin-bottom: 30px;
        text-align: center;
    }

    h5 {
        margin: 0px;
    }

    .job-run, .job {
        padding: 10px;
        border-radius: 15px;
        margin-bottom: 15px;

        ul {
            list-style: none;
            margin-left: 0px;
            margin-bottom: 0px;
        }
    }

    .job {
        background: #d9edf7;
    }

    .job-scheduled, .job-in-queue, .job-started {
        background: #d9edf7;
    }

    .job-completed {
        background: #dff0d8;
    }

    .job-completed-with-error {
        background: #f2dede;
    }

}

.modal {
    width: 900px;
    margin-left: -450px;
}

Make space for two title lines.

#job_runner {
    h4 {
        margin-bottom: 30px;
        text-align: center;
    }

    h5 {
        margin: 0px;
    }

    .job-run, .job {
        padding: 10px;
        border-radius: 15px;
        margin-bottom: 15px;

        h5 {
            height: 40px;
        }

        ul {
            list-style: none;
            margin-left: 0px;
            margin-bottom: 0px;
        }
    }

    .job {
        background: #d9edf7;
    }

    .job-scheduled, .job-in-queue, .job-started {
        background: #d9edf7;
    }

    .job-completed {
        background: #dff0d8;
    }

    .job-completed-with-error {
        background: #f2dede;
    }

}

.modal {
    width: 900px;
    margin-left: -450px;
}


//
// Thumbnails
// --------------------------------------------------

// Mixin and adjust the regular image class
.thumbnail {
  .img-thumbnail();
  display: block; // Override the inline-block from `.img-thumbnail`
  margin-bottom: @line-height-computed;

  > img {
    .img-responsive();
    margin-left: auto;
    margin-right: auto;
  }
}

// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: @link-color;
}

// Image captions
.thumbnail .caption {
  padding: @thumbnail-caption-padding;
  color: @thumbnail-caption-color;
}

Use nesting for thumbnail styles

//
// Thumbnails
// --------------------------------------------------

// Mixin and adjust the regular image class
.thumbnail {
  .img-thumbnail();
  display: block; // Override the inline-block from `.img-thumbnail`
  margin-bottom: @line-height-computed;

  > img {
    .img-responsive();
    margin-left: auto;
    margin-right: auto;
  }

  // Add a hover state for linked versions only
  a&:hover,
  a&:focus,
  a&.active {
    border-color: @link-color;
  }

  // Image captions
  .caption {
    padding: @thumbnail-caption-padding;
    color: @thumbnail-caption-color;
  }
}


.mw-echo-ui-notificationBadgeButtonPopupWidget {
	text-transform: none;
	font-weight: normal;
	// Badge
	> .oo-ui-buttonElement-button:hover {
		.oo-ui-labelElement-label {
			color: black !important;
		}
	}

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

}

Adjust margins for the notification badge in MonoBook

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

.mw-echo-ui-notificationBadgeButtonPopupWidget {
	text-transform: none;
	font-weight: normal;
	// Badge
	> .oo-ui-buttonElement-button {
		padding-right: (@badge-padding + 0.25em);
		&:hover {
			.oo-ui-labelElement-label {
				color: black !important;
			}
		}
	}

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

}


@import "bootstrap/mixins";

@evidencePadding: 18px;

.ndp-evidenceish {
  .new-design-font();
}

.ndp-evidenceish-heading {
  position: absolute;
  top: -23px;
  left: @evidencePadding;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ndp-evidenceish-box {
  position: relative;
  .new-design-white-block-with-shadow();
}

.ndp-evidenceish-content {
  padding: @evidencePadding @evidencePadding 13px;

  // HACK until we have "small Factwheels" (per NDP design, in-line with text)
  // -- this looks better for now
  > .fact-base {
    margin-left: -3px;
  }
}

.ndp-evidenceish-bottom {
  box-shadow: 0px -1px @NDPMutedBorderBottomColor, 0px -2px @NDPMutedBorderTopColor;
  margin: 0 @evidencePadding;
  padding: 5px 0;
  color: @mutedFontColor;
  font-size: @metaFontSize;
}

Break crazy long words inside evidenceish content (comments / subcomments)

@import "bootstrap/mixins";

@evidencePadding: 18px;

.ndp-evidenceish {
  .new-design-font();
}

.ndp-evidenceish-heading {
  position: absolute;
  top: -23px;
  left: @evidencePadding;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ndp-evidenceish-box {
  position: relative;
  .new-design-white-block-with-shadow();
}

.ndp-evidenceish-content {
  padding: @evidencePadding @evidencePadding 13px;
  word-wrap: break-word;

  // HACK until we have "small Factwheels" (per NDP design, in-line with text)
  // -- this looks better for now
  > .fact-base {
    margin-left: -3px;
  }
}

.ndp-evidenceish-bottom {
  box-shadow: 0px -1px @NDPMutedBorderBottomColor, 0px -2px @NDPMutedBorderTopColor;
  margin: 0 @evidencePadding;
  padding: 5px 0;
  color: @mutedFontColor;
  font-size: @metaFontSize;
}