.addon-git-dialog {
    .modal-body {
        padding: 0px;
    }
    .modal-footer {
        margin: 0px;
    }

    .navbar {
        margin: 0px;
    }

    .git-changes {
        .git-commit {
            padding: 15px 10px;
            margin: 0px;
            background: #f8f8f8;

            textarea {
                resize: none;
            }
        }

        .git-changes-files {
            list-style: none;
            margin: 0px;
            padding: 0px;

            .file {
                background: #fdfdfd;
                box-shadow: 0px 1px 0px #fff inset;
                border-top: 1px solid #ddd;
                padding: 6px;
                padding-left: 55px;
                position: relative;

                .file-type {
                    position: absolute;
                    display: block;
                    top: 0px;
                    left: 0px;
                    width: 45px;
                    bottom: 0px;
                    padding: 6px;
                    text-align: center;
                    color: #fff;

                    &.type-M {
                        background: #3498db;
                    }
                    &.type-A {
                        background: #2ecc71;
                    }
                    &.type-D {
                        background: #e74c3c;
                    }
                }
            }
        }
    }
}

Fix files list display for long filenames in commit dialog

.addon-git-dialog {
    .modal-body {
        padding: 0px;
    }
    .modal-footer {
        margin: 0px;
    }

    .navbar {
        margin: 0px;
    }

    .git-changes {
        .git-commit {
            padding: 15px 10px;
            margin: 0px;
            background: #f8f8f8;

            textarea {
                resize: none;
            }
        }

        .git-changes-files {
            list-style: none;
            margin: 0px;
            padding: 0px;

            .file {
                background: #fdfdfd;
                box-shadow: 0px 1px 0px #fff inset;
                border-top: 1px solid #ddd;
                padding: 6px;
                padding-left: 55px;
                position: relative;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                .file-type {
                    position: absolute;
                    display: block;
                    top: 0px;
                    left: 0px;
                    width: 45px;
                    bottom: 0px;
                    padding: 6px;
                    text-align: center;
                    color: #fff;

                    &.type-M {
                        background: #3498db;
                    }
                    &.type-A {
                        background: #2ecc71;
                    }
                    &.type-D {
                        background: #e74c3c;
                    }
                }
            }
        }
    }
}


@import url('mixins.less');
@import url('core.less');
@import url('effects.less');
@import url('scrollbar.less');

Move navigation to separate file

@import url('mixins.less');
@import url('core.less');
@import url('navigation.less');
@import url('effects.less');
@import url('scrollbar.less');
@import url('preloader.less');


@font-face {
  font-family: Ahamono;
  src: url("../assets/fonts/AHAMONO-Monospaced.ttf");
}

body {
  font-family: "Ahamono", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing-page-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 40px;

  object {
    height: 171px;
    width: 370px;
  }
}

.waster-soundcloud {
  margin-top: 40px;
}

/* Media Queries */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  .landing-page-logo {
    object {
      height: 355px;
      width: 770px;
    }
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Add more margin-top to Soundcloud widget

@font-face {
  font-family: Ahamono;
  src: url("../assets/fonts/AHAMONO-Monospaced.ttf");
}

body {
  font-family: "Ahamono", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing-page-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 40px;

  object {
    height: 171px;
    width: 370px;
  }
}

.waster-soundcloud {
  margin-top: 80px;
}

/* Media Queries */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  .landing-page-logo {
    object {
      height: 355px;
      width: 770px;
    }
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* TODO Add some styles into boilerplate */

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

body {
	color: #222;
}

textarea {
	width: 100%;
	height: 140px;
	font: 14px/18px Courier;
}

body {
	padding-top: 60px;
}

.container, .content {
/* 	border: 1px solid #eee; */
}

.buttons {
	margin-top: 10px;
}

.btn {
	margin-left: 6px;
}

.btn:first-of-type {
	margin-left: 0;
}

.buttons .status {
	color: #888;
	margin-left: 4px;
}

#content {
/* 	padding: 40px 0; */
/* 	color: blue; */
}

/*  Directory  */

.directory {
	list-style-type: none;
}

Update CSS for the new hierarcy

/* TODO Add some styles into boilerplate */

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

body {
	color: #222;
}

textarea {
	width: 100%;
	height: 140px;
	font: 14px/18px Courier;
}

body {
	padding-top: 60px;
}

.container, .content {
/* 	border: 1px solid #eee; */
}

.buttons {
	margin-top: 10px;
}

.btn {
	margin-left: 6px;
}

.btn:first-of-type {
	margin-left: 0;
}

.buttons .status {
	color: #888;
	margin-left: 4px;
}

#content {
/* 	padding: 40px 0; */
/* 	color: blue; */
}

/*  Directory  */

#root ul {
	list-style-type: none;
}


@import "lib/bootswatch-cyborg/less/bootstrap.less";
@import "lib/font-awesome/less/font-awesome.less";

Change cursor for nav items

@import "lib/bootswatch-cyborg/less/bootstrap.less";
@import "lib/font-awesome/less/font-awesome.less";

.nav-item {
  cursor: pointer;
}


// Categories view
#content > .categories {
  .container;
  padding-top: 0;
  padding-bottom: 60px;
}

.categories {
  li {
    list-style: none;
  }

  a {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #1E598F;
    // #gradient > .vertical(#115EA6, #0F5391);
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
    .border-radius(5px);
    .clearfix;
  }

  i {
    font-size: 48px;
  }

  hgroup {
    float: right;
    width: 90%;
  }

  h2 {
    font-size: 20px;
    margin: 0;
    padding-top: 5px;
  }

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-top: 5px;
    color: #ABEEFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  }
}

Remove unneeded left padding from ul Fix spacing

// Categories view
#content > .categories {
  .container;
  padding-top: 0;
  padding-bottom: 60px;
}

.categories {
  ul { padding-left: 0; }

  li { list-style: none; }

  a {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #1E598F;
    // #gradient > .vertical(#115EA6, #0F5391);
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
    .border-radius(5px);
    .clearfix;
  }

  i { font-size: 48px; }

  hgroup {
    float: right;
    width: 90%;
  }

  h2 {
    font-size: 20px;
    margin: 0;
    padding-top: 7px;
  }

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-top: 5px;
    color: #ABEEFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  }
}


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

.sortable-handle {
  cursor: move;

  &--profile-page-extra {
    width: @profile-page-action;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: var(--dragdrop-margin);
    font-size: 18px; // icon size
  }

  &--score-pin {
    display: none;

    @media @desktop {
      display: flex;
      align-items: center;
      width: var(--pin-sortable-handle-width);
    }
  }
}

Disable handle when menu is showing

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

.sortable-handle {
  cursor: move;

  &--profile-page-extra {
    width: @profile-page-action;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: var(--dragdrop-margin);
    font-size: 18px; // icon size
  }

  &--score-pin {
    display: none;

    @media @desktop {
      display: flex;
      align-items: center;
      width: var(--pin-sortable-handle-width);
    }

    .play-detail-list--menu-active & {
      pointer-events: none;
    }
  }
}


@tutor-navbar-height: 61px;
@tutor-navbar-padding-horizontal: 4rem;

.navbar-fixed-top {

  .transition(transform 0.2s ease-out);

  // override the bootstrap defaults with tutor defaults
  &.navbar.navbar{
    border-bottom: 1px solid @border-color;
    background-color: @tutor-white;
  }

  .container-fluid { padding: 0 @tutor-navbar-padding-horizontal; }

  .ui-brand-logo {
    display: inline-block;
    height: 30px;
    width: 217px;
    .tutor-background-image('logo-brand.svg');
  }

  .navbar-brand {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }

  .dropdown-menu .signout {
    button {
      #fonts .sans(1.4rem, 1.4rem);
      margin: 0;
      padding-left: 0;
      text-transform: none;

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

Set fixed height to override material design

@tutor-navbar-height: 61px;
@tutor-navbar-padding-horizontal: 4rem;

.navbar-fixed-top {

  // override bootstrap material design media query for (max-width: 1199px)
  .navbar-brand {
    height: 60px;
    padding: 15px;
  }

  .transition(transform 0.2s ease-out);

  // override the bootstrap defaults with tutor defaults
  &.navbar.navbar{
    border-bottom: 1px solid @border-color;
    background-color: @tutor-white;
  }

  .container-fluid { padding: 0 @tutor-navbar-padding-horizontal; }

  .ui-brand-logo {
    display: inline-block;
    height: 30px;
    width: 217px;
    .tutor-background-image('logo-brand.svg');
  }

  .navbar-brand {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }

  .dropdown-menu .signout {
    button {
      #fonts .sans(1.4rem, 1.4rem);
      margin: 0;
      padding-left: 0;
      text-transform: none;

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


.extra-large-input{
	width:350px;
}

.vertical-centered-div {
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}

.report-label{
	display:inline-block;
	width: 200px;
}

.report-data{
    display:inline-block;
    width: 100px;
}

Fix ng-grid issue when displaying one record.

.extra-large-input{
	width:350px;
}

.vertical-centered-div {
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}

.report-label{
	display:inline-block;
	width: 200px;
}

.report-data{
    display:inline-block;
    width: 100px;
}

.gridStyleReport .ngViewport{
  min-height: 50px;
}


@import "shared/sizes.less";
@import "shared/colors.less";

#my-face {
  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border: 2px @black solid;
  background-color: @black;
  box-shadow: 0 0 0 0.5em @primary;

  padding: 0.5rem;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 2rem;
  margin-top: -1rem;

  width: auto;
  max-height: calc(100vh - 7rem);
}

@media (max-width: @mobile-breakpoint) {

  #my-face {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;

    max-height: calc(100vh - 9rem);
  }

}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}

Update my face border colors

@import "shared/sizes.less";
@import "shared/colors.less";

#my-face {

  @border-chunk-size: 0.65em;

  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  box-shadow: 0 0 0 @border-chunk-size @primary;
  border: @border-chunk-size @secondary solid;

  padding: 1px;
  background-color: @secondary;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 2rem;
  margin-top: -1rem;

  width: auto;
  max-height: calc(100vh - 7rem);
}

@media (max-width: @mobile-breakpoint) {

  #my-face {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;

    max-height: calc(100vh - 9rem);
  }

}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}


//
// Responsive CSS File - Large Desktops ~1200px
// --------------------------------------------------

// Grid Variables
// -------------------

@containerWidth: 1200px;
@columnCount:    12;
@gutterRatio:    30%;
@paddingRatio:   100%;

// Type Variables
// -------------------

@fontSize: 18px;
@lineHeight: 140%;

// Base Styles
// -------------------

@import "_variables.less"; // site variables
@import "_mixins.less"; // grid and mixins

@media (min-width: 1200px) {

	@import "_layout.less";
	@import "_type.less";

	// Custom Styles
	// -------------------

}

Set media query using variable

//
// Responsive CSS File - Large Desktops ~1200px
// --------------------------------------------------

// Grid Variables
// -------------------

@containerWidth: 1200px;
@columnCount:    12;
@gutterRatio:    30%;
@paddingRatio:   100%;

// Type Variables
// -------------------

@fontSize: 18px;
@lineHeight: 140%;

// Base Styles
// -------------------

@import "_variables.less"; // site variables
@import "_mixins.less"; // grid and mixins

@media (min-width: @containerWidth) {

	@import "_layout.less";
	@import "_type.less";

	// Custom Styles
	// -------------------

}


@import "../scripts/libs/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "mixins/flexbox.less";

.social-button(@url: "images/social/mail.png") {
  font-size: 0;
  line-height: 2.4rem;
  background-image: url("/@{url}");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 67%;
}

// Based on bootstrap's .button-variant() mixin
.button-variant(@color; @background) {
  padding: 5px 10px;
  font-weight: 300;
  vertical-align: baseline;
  color: @color;
  background-color: @background;
  border: none;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 4%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
    }
  }
}

Remove outline from focused buttons

@import "../scripts/libs/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "mixins/flexbox.less";

.social-button(@url: "images/social/mail.png") {
  font-size: 0;
  line-height: 2.4rem;
  background-image: url("/@{url}");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 67%;
}

// Based on bootstrap's .button-variant() mixin
.button-variant(@color; @background) {
  padding: 5px 10px;
  font-weight: 300;
  vertical-align: baseline;
  color: @color;
  background-color: @background;
  border: none;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 4%);
    outline: 0;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
    }
  }
}


@import "./hljs-railscasts";
@import "./octicons";

.footer {
  border-top: 1px solid #bbb;
  margin-bottom: 1em;
}

.info-table {
  th {
    width: 30%;
  }
}

.navigation {
  margin-top: 2em;
}

.signature {
  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
}

Change the pink to blue for code sections

@import "./hljs-railscasts";
@import "./octicons";

code {
  background-color: lighten(#337ab7, 45%);
  color: #337ab7;
  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.footer {
  border-top: 1px solid #bbb;
  margin-bottom: 1em;
}

.info-table {
  th {
    width: 30%;
  }
}

.navigation {
  margin-top: 2em;
}

.signature {
  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
}


.apos-area .apos-slideshow-button
{
  position: absolute;
  bottom: 30%;

  width: 40px;
  height: 40px;
  border-radius: 100%;

  text-align: center;

  &.default-style
  {
    border: 2px solid @apos-dark;
  }

  i
  {
    position: relative;
    top: -2px;
    left: -2px;
    line-height: 40px;
    font-size: 2em;
    color: @apos-dark;
    .apos-transition();
  }

  &.apos-slideshow-prev
  {
    left: 2.5%;
  }

  &.apos-slideshow-next
  {
    right: 2.5%;
    i { left: 2px; }
  }

  &:hover.default-style
  {
    background-color: @apos-dark;
    i { color: @apos-white; }
  }
  .apos-transition();
}

Move default slideshow controls to be vertically centered in slideshow

.apos-area .apos-slideshow-button
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;
  border-radius: 100%;

  text-align: center;

  &.default-style
  {
    border: 2px solid @apos-dark;
  }

  i
  {
    position: relative;
    top: -2px;
    left: -2px;
    line-height: 40px;
    font-size: 2em;
    color: @apos-dark;
    .apos-transition();
  }

  &.apos-slideshow-prev
  {
    left: 2.5%;
  }

  &.apos-slideshow-next
  {
    right: 2.5%;
    i { left: 2px; }
  }

  &:hover.default-style
  {
    background-color: @apos-dark;
    i { color: @apos-white; }
  }
  .apos-transition();
}


@import "elements.less";

@list-size: 6;

@max-opacity: 1;
@min-opacity: 0.25;
@opacity-step: (@max-opacity - @min-opacity) / (@list-size - 1);

@max-offset: 44%;
@min-offset: 24%;
@offset-step: (@max-offset - @min-offset) / (@list-size - 1);

.session-list {

	.session-fade(@idx) {
		@step: @list-size - @idx;

		.opacity(@max-opacity - (@opacity-step * @step));
		margin-left: @max-offset - (@offset-step * (@idx - 1));

	}

	.session:nth-child(6) {
		.session-fade(6);
	}

	.session:nth-child(5) {
		.session-fade(5);
	}

	.session:nth-child(4) {
		.session-fade(4);
	}

	.session:nth-child(3) {
		.session-fade(3);
	}

	.session:nth-child(2) {
		.session-fade(2);
	}

	.session:nth-child(1) {
		.session-fade(1);
	}
}

Adjust fade effect for list to be more dramatic

@import "elements.less";

@list-size: 6;

@max-opacity: 1;
@min-opacity: 0.05;
@opacity-step: (@max-opacity - @min-opacity) / (@list-size - 1);

@max-offset: 94%;
@min-offset: 20%;
@offset-step: (@max-offset - @min-offset) / (@list-size - 1);

.session-list {

	.session-fade(@idx) {
		@step: @list-size - @idx;

		.opacity(@max-opacity - (@opacity-step * @step));
		margin-left: @max-offset - (@offset-step * (@idx - 1));

	}

	.session:nth-child(6) {
		.session-fade(6);
	}

	.session:nth-child(5) {
		.session-fade(5);
	}

	.session:nth-child(4) {
		.session-fade(4);
	}

	.session:nth-child(3) {
		.session-fade(3);
	}

	.session:nth-child(2) {
		.session-fade(2);
	}

	.session:nth-child(1) {
		.session-fade(1);
	}
}


@import "ui-variables";

ul.background-message {
  font-weight: bold;
  color: rgba(0, 0, 0, .18);
}

Fix close all button styling

@import "ui-variables";

ul.background-message {
  font-weight: bold;
  color: rgba(0, 0, 0, .18);
}
atom-notification .close-all.btn {
  &, &:hover {
    box-shadow: none;
  }
}


// Contact --------------------------------------------------------------------

.contact {
  .container;

  form {
    background: red;
    .column(7);
  }

  // Contact items list
  aside {
    .column(5);
    font-size: 24px;
    font-weight: 300;

    p {
      margin: 0;
      color: @grayDark;
    }

    ul { padding-left: 0; }

    li {
      background-image: url("@{imgPath}/about/sprite.png");
      background-repeat: no-repeat;
      color: @link;
      font-size: 18px;
      list-style: none;
      margin: 15px 0;
      margin-left: 10px;
      padding-left: 40px;
    }

    // Icons
    .email      { background-position: -680px -102px; }
    .twitter    { background-position: -679px -138px; }
    .telephone  { background-position: -680px -178px; }
    .address    { background-position: -679px -221px; }
  }
}

Use padding on parent element instead of on children

// Contact --------------------------------------------------------------------

.contact {
  .container;

  form {
    background: red;
    .column(7);
  }

  // Contact items list
  aside {
    .column(5);
    font-size: 24px;
    font-weight: 300;

    p {
      margin: 0;
      color: @grayDark;
    }

    ul { padding-left: 15px; }

    li {
      background-image: url("@{imgPath}/about/sprite.png");
      background-repeat: no-repeat;
      color: @link;
      font-size: 18px;
      list-style: none;
      margin: 15px 0;
      padding-left: 40px;
    }

    // Icons
    .email      { background-position: -680px -102px; }
    .twitter    { background-position: -679px -138px; }
    .telephone  { background-position: -680px -178px; }
    .address    { background-position: -679px -221px; }
  }
}


@import "variables";

.git-FilePatchListItem {
  -webkit-user-select: none;
  display: flex;
  align-items: flex-start;
  padding: @component-padding/2 @component-padding;
  box-shadow:inset @separator-border-color 0 -1px 0;
  cursor:default;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;

  &-path {
    flex: 1;
  }

  &-icon {
    margin: 2px 0 0 @component-padding;
    &::before {
      margin-right: 0;
    }
  }
}

Add right margin to icon back

@import "variables";

.git-FilePatchListItem {
  -webkit-user-select: none;
  display: flex;
  align-items: flex-start;
  padding: @component-padding/2 @component-padding;
  box-shadow:inset @separator-border-color 0 -1px 0;
  cursor:default;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;

  &-path {
    flex: 1;
  }
}


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

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;
  padding: 0 @component-icon-padding;
  position: relative;
}

.tree-view-dialog.tool-panel {
  padding: @component-padding;
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

Set default width to 200px

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

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  width: 200px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;
  padding: 0 @component-icon-padding;
  position: relative;
}

.tree-view-dialog.tool-panel {
  padding: @component-padding;
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}


.select-list {
  background-color: #e5e5e5;
  border: 1px solid #c6c6c6;
  color: #323232;
  box-shadow: 0 0 10px #555;

  .error {
    color: white;
    text-shadow: 0 1px 0 #4E0000;
  }

  ol {
    border: 1px solid #d2d2d2;

    li {
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }

    li:hover {
      background-color: #f9f9f9;
    }

    li.active-item:before {
      color: #9d9d9d;
    }

    .selected {
      background-color: #e0e0e0;
    }

    .selected .right,
    .selected .directory {
      color: #333;
    }

    .right,
    .directory {
      color: #777;
    }

    .modified {
      color: #f78a46;
    }

    .new {
      color: #5293d8;
    }
  }
}

Add secondar-line class to light theme

.select-list {
  background-color: #e5e5e5;
  border: 1px solid #c6c6c6;
  color: #323232;
  box-shadow: 0 0 10px #555;

  .error {
    color: white;
    text-shadow: 0 1px 0 #4E0000;
  }

  ol {
    border: 1px solid #d2d2d2;

    li {
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }

    li:hover {
      background-color: #f9f9f9;
    }

    li.active-item:before {
      color: #9d9d9d;
    }

    .selected {
      background-color: #e0e0e0;
    }

    .selected .right,
    .selected .secondary-line {
      color: #333;
    }

    .right,
    .secondary-line {
      color: #777;
    }

    .modified {
      color: #f78a46;
    }

    .new {
      color: #5293d8;
    }
  }
}


body #p-personal {
	overflow: visible;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget {
	font-variant: normal;
	text-transform: none;
	font-weight: normal;
	// Badge
	> .oo-ui-buttonElement-button {
		border-radius: none;
	}
}

Fix lowercasing and bolding of text in popups in Modern skin

body #p-personal {
	overflow: visible;
}

#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
	font-variant: normal;
	text-transform: none;
	font-weight: normal;
	// Badge
	> .oo-ui-buttonElement-button {
		border-radius: none;
	}
}


.table {
	tr:last-child {
		border-bottom: 1px solid @tableBorder;
	}
	td:last-child {
		min-width: @actionsButtonsWidth;
	}
	th {
		a {
			.sortDirections();
		}
	}
}

table {
	.center {
		text-align: center;
		vertical-align: middle;
	}

	.item-actions {
		white-space: nowrap;
		a {
			text-align: center;
			margin-right: @crGeneralMargin;
			&:focus {
				outline: none;
			}
			&:hover {
				text-decoration: none;
			}
			&.icon-trash,
			&.delete {
				color: @red;
				&:hover {
					color: darken(@red, 25%);
				}
			}
		}
		a [class^="icon-"],
		a [class*=" icon-"] {
			vertical-align: middle;
		}
	}
}

Revert "centering icons in item-actions"

.table {
	tr:last-child {
		border-bottom: 1px solid @tableBorder;
	}
	td:last-child {
		min-width: @actionsButtonsWidth;
	}
	th {
		a {
			.sortDirections();
		}
	}
}

table {
	.center {
		text-align: center;
		vertical-align: middle;
	}

	.item-actions {
		white-space: nowrap;
		a {
			margin-right: @crGeneralMargin;
			&:focus {
				outline: none;
			}
			&:hover {
				text-decoration: none;
			}
			&.icon-trash,
			&.delete {
				color: @red;
				&:hover {
					color: darken(@red, 25%);
				}
			}
		}
		a [class^="icon-"],
		a [class*=" icon-"] {
			vertical-align: middle;
		}
	}
}


/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base rule define the default styling for how that element
 * should look in all occurrences on the page.
 * See http://smacss.com/book/type-base
 */

/**
 * Main body
 */
body {
    background-color: #000;
    background-image: url('/assets/img/background.png');
    color: #FFF;
}

/**
 * Headings
 */
h1 {
    color: @brand-color;
}

h1, h2, h3 {
    font-family: @brand-face;

    > span {
        color: @base-ui-color;
        font-weight: normal;
    }
}

/**
 * Links
 */
a {
    color: @brand-color;
    text-decoration: none;

    &:hover {
        color: darken(@brand-color, 30%);

        footer & {
            color: lighten(@brand-color, 10%);
        }
    }

    .current & {
        text-decoration: none;

        &:hover {
            color: @brand-color;
        }

        &:before {
            content: "< ";
        }

        &:after {
            content: " >";
        }
    }
}

/**
 * Emphasis
 */
em {
    font-style: normal;
    font-family: @brand-face;
}

/**
 * Code
 */
code {
    color: #445588;
    font-weight: bold;
}

Set canvas max-width to 100% so they can't move further their container

/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base rule define the default styling for how that element
 * should look in all occurrences on the page.
 * See http://smacss.com/book/type-base
 */

/**
 * Main body
 */
body {
    background-color: #000;
    background-image: url('/assets/img/background.png');
    color: #FFF;
}

/**
 * Headings
 */
h1 {
    color: @brand-color;
}

h1, h2, h3 {
    font-family: @brand-face;

    > span {
        color: @base-ui-color;
        font-weight: normal;
    }
}

/**
 * Links
 */
a {
    color: @brand-color;
    text-decoration: none;

    &:hover {
        color: darken(@brand-color, 30%);

        footer & {
            color: lighten(@brand-color, 10%);
        }
    }

    .current & {
        text-decoration: none;

        &:hover {
            color: @brand-color;
        }

        &:before {
            content: "< ";
        }

        &:after {
            content: " >";
        }
    }
}

/**
 * Emphasis
 */
em {
    font-style: normal;
    font-family: @brand-face;
}

/**
 * Code
 */
code {
    color: #445588;
    font-weight: bold;
}

/**
 * Canvas
 **/
canvas {
    max-width: 100%;
}


body {

  form#delayedForm {

    .delayed-runs {
      margin: 20px 0 0 20px;

      li.delayed-run {
        background-color: #ffffff;
        border: 1px solid black;
        margin-bottom: 10px;
        padding: 20px;
        .border-radius(5px);
        min-height: 18px;

        list-style-type: decimal;

        input {
          float: left;
        }

        label {
          margin-left: 10px;
          width: 100px;
        }

        .last-duration {
          float: left;
          font-family: @fontFamily;
          font-style: italic;
          width: 140px;
        }

        .timepicker-container {
          float: left;

          input {
            margin-top: -5px;
            width: 140px;
          }

          .add-on {
            margin-top: -5px;
          }

        }

        .build-parameters {
          clear: left;

          li {
            list-style-type: none;
          }

        }

        &:hover  {
          cursor: move;
        }

      }

    }

  }
}

Change the css to prevent the job title passes on the last duration label and pushes the schedule at input on the right.

body {

  form#delayedForm {

    .delayed-runs {
      margin: 20px 0 0 20px;

      li.delayed-run {
        background-color: #ffffff;
        border: 1px solid black;
        margin-bottom: 10px;
        padding: 20px;
        .border-radius(5px);
        min-height: 18px;

        list-style-type: decimal;

        input {
          float: left;
        }

        label {
          margin-left: 10px;
          width: 250px;;
        }

        .last-duration {
          float: left;
          font-family: @fontFamily;
          font-style: italic;
          width: 140px;
        }

        .timepicker-container {
          float: right;

          label {
            margin-right: 5px;
            width: auto;
          }

          input {
            margin-top: -5px;
            width: 120px;
          }

          .add-on {
            margin-top: -5px;
          }

        }

        .build-parameters {
          clear: left;

          li {
            list-style-type: none;
          }

        }

        &:hover  {
          cursor: move;
        }

      }

    }

  }
}


@import 'common';

.oo-ui-toolbar {
	clear: both;

	&-bar {
		line-height: 1em;
	}

	&-actions {
		float: right;
	}

	&-tools {
		float: left;
	}

	&-tools,
	&-actions,
	&-shadow {
		.oo-ui-unselectable();
	}

	&-actions .oo-ui-popupWidget {
		.oo-ui-selectable();
	}

	&-shadow {
		background-position: left top;
		background-repeat: repeat-x;
		position: absolute;
		width: 100%;
		pointer-events: none;
	}

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

Make tools wrapper display inline so tools wrap around actions

@import 'common';

.oo-ui-toolbar {
	clear: both;

	&-bar {
		line-height: 1em;
	}

	&-actions {
		float: right;
	}

	&-tools {
		display: inline;
	}

	&-tools,
	&-actions,
	&-shadow {
		.oo-ui-unselectable();
	}

	&-actions .oo-ui-popupWidget {
		.oo-ui-selectable();
	}

	&-shadow {
		background-position: left top;
		background-repeat: repeat-x;
		position: absolute;
		width: 100%;
		pointer-events: none;
	}

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


details {
  padding: 0.5em 0;

  & > div {
    padding-left: 20px;
    border-left: 1px solid @control-bg;
  }

  summary:focus {
    outline: none;
  }

  summary {
    cursor: pointer;
    display: block;
  }
}

.no-details {
  details {
    summary:before {
      content: '► ';
    }

    &.open {
      summary:before {
        content: '▼ ';
      }
    }
  }
}

Fix open icon for inner details icon of inner details also change to open. this fixes this issue

details {
  padding: 0.5em 0;

  & > div {
    padding-left: 20px;
    border-left: 1px solid @control-bg;
  }

  summary:focus {
    outline: none;
  }

  summary {
    cursor: pointer;
    display: block;
  }
}

.no-details {
  details {
    summary:before {
      content: '► ';
    }

    &.open > summary:before {
      content: '▼ ';
    }
  }
}


.tools-dropdown {
  height: 100%;
}

.tool-list-row {
  height: calc(~"100% - 100px");
}

Fix the tool list scrolling in Firefox

.tools-dropdown {
  height: 100%;
}

.tool-list-row {
  height: calc(~"100% - 100px");
  // otherwise scrolling doesn't work in Firefox
  flex-wrap: unset;
}


#switch
{
   position: absolute;
   padding: 3px;
}
.container-fluid
{
  padding: 10px 4px;

  .sidebar
  {
    margin-top: 100px;
  }
}
#feed
{
  input
  {
    cursor: copy;
    width: 100%;
  }
}
.sidebar {
  ul, li
  {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  label
  {
    padding: 3px 15px;
    cursor: pointer;
  }
  label:hover
  {
    background-color: #F1F1F1;
  }
  select
  {
    width: inherit;
  }
}
.boards
{
  li input
  {
    display: none;
  }
  .square
  {
    display: inline-block;
    border: solid 1px gray;
    width: 11px;
    height: 11px;
    margin-right: 4px;
  }
}

Hide the feed pane by default.

#switch
{
   position: absolute;
   padding: 3px;
}
.container-fluid
{
  padding: 10px 4px;

  .sidebar
  {
    margin-top: 100px;
  }
}
#feed
{
  display: none;

  input
  {
    cursor: copy;
    width: 100%;
  }
}
.sidebar {
  ul, li
  {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  label
  {
    padding: 3px 15px;
    cursor: pointer;
  }
  label:hover
  {
    background-color: #F1F1F1;
  }
  select
  {
    width: inherit;
  }
}
.boards
{
  li input
  {
    display: none;
  }
  .square
  {
    display: inline-block;
    border: solid 1px gray;
    width: 11px;
    height: 11px;
    margin-right: 4px;
  }
}


.mb-home {

}

.mb-section-header {
  color: #999;
}

.mb-home-section {
  height: 180px;

  .section-content {
    height: 140px;
    overflow-x: scroll;
    overflow-y: hidden;

    .movie-covers {
      width: 1600px;

      .movie-cover {
        width: 100px;
        height: 140px;
        background-size: cover;
        display: inline-block;
      }
    }
  }
}

Change title font weight to 700.

.mb-home {

}

.mb-section-header {
  font-weight: 700;
  color: #999;
}

.mb-home-section {
  height: 180px;

  .section-content {
    height: 140px;
    overflow-x: scroll;
    overflow-y: hidden;

    .movie-covers {
      width: 1600px;

      .movie-cover {
        width: 100px;
        height: 140px;
        background-size: cover;
        display: inline-block;
      }
    }
  }
}


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

.man-view {
    overflow: auto;
    background-color: @app-background-color;
    margin-left: 1em;
    margin-right: 1em;
    max-width: 50em;
}

Make text look okay even in dark themes.

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

.man-view {
    overflow: auto;
    background-color: @app-background-color;
    color: @text-color;
    margin-left: 1em;
    margin-right: 1em;
    max-width: 50em;
}


img[src*="new-tools-to-try-out.png"] {
  margin-top: 20px;
}
.to-try-out-img {
  .text-right;
}
.distributions-icon img {
  height: 57px;
}

Add case for laptop image in css

img[src*="new-tools-to-try-out.png"] {
  margin-top: 20px;
}
.to-try-out-img {
  .text-right;
}
.distributions-icon img {
  height: 57px;
}
.laptop-responsive {
  width: 100%;
  padding: 1em;
}


// Override bootstrap LESS vars before import.

@import "twitter/bootstrap.less";

.badge-success {
	background-color: #5cb85c;
}

.badge-info {
	background-color: #5bc0de;
}

.btn-toolbar {
	margin-bottom: 10px;
}

.dropdown-menu {
	li .section-header {
		padding-left: 10px;
		color: #888;
	}
}

.navbar-nav {
	& > li > .user-menu-toggle {
		padding-top: 10px;
		padding-bottom: 10px;

		img {
			max-height: 32px;
			max-width: 32px;
			border-radius: 2px;
			margin-left: 5px;
		}
	}
}

Use the brand-success and brand-info LESS variables for badge colors.

// Override bootstrap LESS vars before import.

@import "twitter/bootstrap.less";

.badge-success {
	background-color: @brand-success;
}

.badge-info {
	background-color: @brand-info;
}

.btn-toolbar {
	margin-bottom: 10px;
}

.dropdown-menu {
	li .section-header {
		padding-left: 10px;
		color: #888;
	}
}

.navbar-nav {
	& > li > .user-menu-toggle {
		padding-top: 10px;
		padding-bottom: 10px;

		img {
			max-height: 32px;
			max-width: 32px;
			border-radius: 2px;
			margin-left: 5px;
		}
	}
}


// Mixins
.box-shadow (@hor, @vert, @blur, @spread, @color) {
  -webkit-box-shadow: @hor @vert @blur @spread @color;
  -moz-box-shadow: @hor @vert @blur @spread @color;
  -o-box-shadow: @hor @vert @blur @spread @color;
  box-shadow: @hor @vert @blur @spread @color;
}

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

// Variables
@base_gray: #ccc;

body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: @base_gray;
}
canvas {
  background: #fff;
  border-left: 1px solid darken(@base_gray, 13%);
  border-right: 1px solid darken(@base_gray, 13%);
  border-bottom: 1px solid darken(@base_gray, 30%);
}

Add border-radius mixin to canvas element

// Mixins
.box-shadow (@hor, @vert, @blur, @spread, @color) {
  -webkit-box-shadow: @hor @vert @blur @spread @color;
  -moz-box-shadow: @hor @vert @blur @spread @color;
  -o-box-shadow: @hor @vert @blur @spread @color;
  box-shadow: @hor @vert @blur @spread @color;
}

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

// Variables
@base_gray: #ccc;

body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: @base_gray;
}
canvas {
  background: #fff;
  border-left: 1px solid darken(@base_gray, 13%);
  border-right: 1px solid darken(@base_gray, 13%);
  border-bottom: 1px solid darken(@base_gray, 30%);
  .border-radius;
}


.paginated-list {
  .list-items {
    ul {
      padding-left: 10px;
    }
    border-radius: 4px;
    border: 1px solid rgb(240, 244, 255);
    padding: 10px 10px 10px 0;
    border-image: initial;
  }

  .list-header {
    padding: 8px;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: -1px;
    background: rgb(250, 249, 251);
    border: 1px solid #f0f4ff;
    border-radius: 4px 4px 0 0;
  }
  .list-item {
    display: block;
    padding: 10px 0;
  }
  .list-item:not(:last-child) {
    border-bottom: 1px solid #dbdbdc;
  }
}

Update stat of item lists

.paginated-list {
  .list-items {
    ul {
      padding-left: 10px;
    }
    border-radius: 4px;
    border: 1px solid rgb(240, 244, 255);
    padding: 10px 10px 10px 0;
    border-image: initial;
  }

  .list-header {
    padding: 8px;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: -1px;
    background: rgb(250, 249, 251);
    border: 1px solid #f0f4ff;
    border-radius: 4px 4px 0 0;
  }
  .list-item {
    display: block;
    padding: 10px 0;
    .row {
      align-items: center;
      display: flex;
    }
  }
  .list-item:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
  }
}


.compact-search {
  display: none;
}

.compact {
  #search-scroll {
    top: 35px;
    bottom: 0px;
    position: absolute;
  }

  .compact-search {
    display: block;

    &.expanded {
      icon {
        display: block;

        .close-button {
          position: relative;
          float: right;
          top: -16px;
          right: 7px;
        }
      }
    }

    &.search {
      .search-result {
        &.selected.dark {
          background-color: @light-background;
        }
      }
    }
  }

  .main-search {
    display: none;
  }
}

Add background for selection on hover

.compact-search {
  display: none;
}

.compact {
  #search-scroll {
    top: 35px;
    bottom: 0px;
    position: absolute;
  }

  .compact-search {
    display: block;

    &.expanded {
      icon {
        display: block;

        .close-button {
          position: relative;
          float: right;
          top: -16px;
          right: 7px;
        }
      }
    }

    &.search {
      .search-result {
        &.selected.dark {
          background-color: transparent;

          &.darkens:hover {
            background-color: @dark-background;
          }
        }
      }
    }
  }

  .main-search {
    display: none;
  }
}


* {
	font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
}

Add some colors and basic styles from Design

@brand-color: #c82021;

@background-color: #f5f5f5;
@link-color: @brand-color;
@font-color: #333333;

* {
	font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
	color: @font-color;
}

// core html

p {
	line-height: 1.5;
	margin-bottom: 1rem;
}

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

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

// typography

.page-title {
	font-size: 2rem;
	color: @background-color;
}

.section-title {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}


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

.proportional-container {
  max-width: 100%;
  display: inline-block;

  &__height {
    display: block;
  }

  &__content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
}

Allow image slicing with bbcode

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

.proportional-container {
  max-width: 100%;
  display: inline-block;
  // "simulate" inline alignment
  // Reference: https://stackoverflow.com/a/11107671
  vertical-align: top;

  &__height {
    display: block;
  }

  &__content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
}


@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4) {
  cursor: pointer;
}

#linter-panel {
  display: block;
  overflow-y: scroll;
}

Add cursor pointer to "Line" column on table

@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4), .sb-table.linter td:nth-child(5) {
  cursor: pointer;
}

#linter-panel {
  display: block;
  overflow-y: scroll;
}


// Color Palette
@white: #FFFFFF;
@black: #000000;
@light-grey: #F1F1F1;
@dark-grey: #707070;
@green: #53B53B;
@light-green: #EBFCEB;

Update color palette with reds

// Color Palette

// Greyscale
@white: #FFFFFF;
@black: #000000;
@lighter-grey: #F1F1F1;
@light-grey: #ABABAB;
@dark-grey: #707070;

// Greens
@green: #53B53B;
@light-green: #BCF5BC;

// Reds
@lighter-red: #FF8080;
@light-red: #FF1A1A;
@dark-red: #CC0000;
@red-shadow: #330000;


/*
 This file is a part of libertysoil.org website
 Copyright (C) 2016  Loki Education (Social Enterprise)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but 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 this program.  If not, see <http://www.gnu.org/licenses/>.
*/
.schools_tool {
  @space: 20px;
  @subtextColor: #888;

  &__post_count {
    margin-left: auto;
  }

  &__details_icon {
    font-size: 100px;
  }

  &__sort {
    display: flex;
    align-items: center;
    float: right;
    margin-left: @space;
  }
}

Fix incorrect dimention of school details icon (/tools/schools)

/*
 This file is a part of libertysoil.org website
 Copyright (C) 2016  Loki Education (Social Enterprise)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but 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 this program.  If not, see <http://www.gnu.org/licenses/>.
*/
.schools_tool {
  @space: 20px;
  @subtextColor: #888;

  &__post_count {
    margin-left: auto;
  }

  &__details_icon {
    width: 100px;
    height: 100px;
    font-size: 100px;
  }

  &__sort {
    display: flex;
    align-items: center;
    float: right;
    margin-left: @space;
  }
}


@import "ui-variables";

// Atom panels

atom-panel-container.left,
atom-panel-container.right {
  display: flex;
}

.tool-panel, // deprecated: .tool-panel
atom-panel {
  display: block;
  position: relative;
}

atom-panel-container > atom-panel.left,
atom-panel-container > atom-panel.right {
  display: flex;
}

// Some packages use `height: 100%` which doesn't play nice with flexbox
atom-panel-container > atom-panel.left > *,
atom-panel-container > atom-panel.right > * {
  height: initial;
}

Fix positioning of left dock toggle button when panel container has min-width

@import "ui-variables";

// Atom panels

atom-panel-container.left,
atom-panel-container.right {
  display: flex;
}

atom-panel-container.left {
  // Align panels to the right of the panel container. The effect of this is
  // that the left dock's toggle button will appear on the right side of the
  // empty space when the panel container has a min width in the theme.
  justify-content: flex-end;
}

.tool-panel, // deprecated: .tool-panel
atom-panel {
  display: block;
  position: relative;
}

atom-panel-container > atom-panel.left,
atom-panel-container > atom-panel.right {
  display: flex;
}

// Some packages use `height: 100%` which doesn't play nice with flexbox
atom-panel-container > atom-panel.left > *,
atom-panel-container > atom-panel.right > * {
  height: initial;
}


#overlay {
  display:none;
  background-color:rgba(0, 0, 0, 0.1);
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
div.layer {
  display:none;
  position:fixed;
  z-index:101;
  margin-left:-30%;
  left:50%;
  top:15%;
  width:60%;
  min-width:300px;
  min-height:300px;
  padding:30px;
  background-color:#FFF;
  box-shadow: 0 0 20px 1px #888;
  &.small {
    margin-left:-15%;
    width:30%;
  }
}

Fix display of overlay on small window

#overlay {
  display:none;
  background-color:rgba(0, 0, 0, 0.1);
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
div.layer {
  display:none;
  position:fixed;
  z-index:101;
  margin-left:-30%;
  left:50%;
  top:15%;
  width:60%;
  min-width:400px;
  min-height:300px;
  padding:30px;
  background-color:#FFF;
  box-shadow: 0 0 20px 1px #888;
  &.small {
    margin-left:-15%;
    width:30%;
  }
}


.bottom-footer {
	margin-bottom: 40px !important;  // Make room for Gitter buttons
}

.gitter-open-chat-button {
	right: 90px;
}

.gitter-chat-embed {
	top: 49px;
	border-top: 1px solid #000;
	z-index: 10000;
}

ul.share-buttons{
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

ul.share-buttons img{
  width: 32px;
}

Add padding to top of tab pane

// Tab pane styling
div.tab-pane {
  padding-top: 15px;
}

// Giter button
.bottom-footer {
	margin-bottom: 40px !important;  // Make room for Gitter buttons
}

.gitter-open-chat-button {
	right: 90px;
}

.gitter-chat-embed {
	top: 49px;
	border-top: 1px solid #000;
	z-index: 10000;
}

// Share buttons
ul.share-buttons{
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

ul.share-buttons img{
  width: 32px;
}


html, body {
  font-family: @font-family-title;
  font-size: 14pt;
  color: @black;
}

@media (max-width: @mobile-breakpoint) {

  html, body {
    font-size: 12pt;
  }

}

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

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

Fix font size to pixels

html, body {
  font-family: @font-family-title;
  font-size: 20px;
  color: @black;
}

@media (max-width: @mobile-breakpoint) {

  html, body {
    font-size: 12pt;
  }

}

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

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


@import './custom.less';

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Whitney.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/WhitneyMedium.woff') format('woff')
}

@font-face {
  font-family: WhitneyBold;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/WhitneyBold.woff') format('woff')
}

.btn {
  font-family: @font-family-monospace;
}

.btn-outline-white {
  border-color: @white;
  background: transparent;
  color: @white;
}

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

Use one font name for all weights

@import './custom.less';

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Whitney.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/WhitneyMedium.woff') format('woff')
}

@font-face {
  font-family: Whitney;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/WhitneyBold.woff') format('woff')
}

.btn {
  font-family: @font-family-monospace;
}

.btn-outline-white {
  border-color: @white;
  background: transparent;
  color: @white;
}

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


.link {
  &:hover {
    text-decoration: none;

    > .label {
      text-decoration: underline;
    }
  }

  &.hasIcon.hasLabel > .label {
    margin-left: 4px;
  }
}

Define icon-label margin on icon, to be in line with menuContext styles

.link {
  &:hover {
    text-decoration: none;

    > .label {
      text-decoration: underline;
    }
  }

  &.hasIcon.hasLabel > .icon {
    margin-right: 5px;
  }
}


@import "ui-variables";
atom-overlay.autocomplete-plus {
    z-index: 5;
}
autocomplete-suggestion-list.select-list.popover-list {
  width: auto;
  display: inline-block;
  min-width: 200px;

  input {
    position: absolute;
    opacity: 0.00;
  }

  ol.list-group {
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 0;

    li {
      color: @text-color;
      &:after {
        clear: both;
        display: block;
        content: ' ';
      }
      .word {
        float: left;
      }
      .character-match {
        font-weight: bold;
        color: @text-color-selected;
      }
      &.selected .completion-label {
        color: @text-color;
      }
      .completion-label {
        float: right;
        padding-right: 6px;
        padding-left: 6px;
      }
    }
  }
}

Remove max height from CSS

@import "ui-variables";
atom-overlay.autocomplete-plus {
    z-index: 5;
}
autocomplete-suggestion-list.select-list.popover-list {
  width: auto;
  display: inline-block;
  min-width: 200px;

  input {
    position: absolute;
    opacity: 0.00;
  }

  ol.list-group {
    overflow-y: auto;
    margin-top: 0;

    li {
      color: @text-color;
      &:after {
        clear: both;
        display: block;
        content: ' ';
      }
      .word {
        float: left;
      }
      .character-match {
        font-weight: bold;
        color: @text-color-selected;
      }
      &.selected .completion-label {
        color: @text-color;
      }
      .completion-label {
        float: right;
        padding-right: 6px;
        padding-left: 6px;
      }
    }
  }
}


@import "ui-variables";

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

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

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

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

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

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

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

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

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

#atom-no-title-bar;

Disable drag for linter messages.

@import "ui-variables";

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

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

        .editor,
        .tab-bar,
        .tree-view .entry,
        .tree-view-resize-handle,
        atom-pane-resize-handle,
        atom-pane-resize-handle.horizontal:before,
        atom-pane-resize-handle.vertical:before,
        linter-message .linter-message-item,
        linter-message .linter-message-link
        {
            -webkit-app-region: no-drag;
        }

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

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

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

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

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

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

#atom-no-title-bar;


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

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

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

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

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

  &--narrow {
    padding-left: 17px;
    padding-right: 0;
  }
}

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

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

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

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

Remove the padding of fully displayed breadcrumb tags

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

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

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

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

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

  &--narrow {
    padding: 0;
  }
}

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

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

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

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


.img-fit {
  max-width: 100%;
}

.img-inline {
  height: 2em;
  width: auto;
}

.img-circle { border-radius: 50%; }

.img-md {
  height: 4rem;
  width: auto;
}

.img-100 {
  max-width: 100px;
}

.sm:img-fit {
  @media (min-width: @screen-sm) {
    max-width: 100%;
  }
}

.img-7r {
  height: auto;
  width: 100%;
  max-width: 7rem;
}

.img-12r {
  height: auto;
  width: 100%;
  max-width: 12rem;
}

.img-16r {
  height: auto;
  width: 100%;
  max-width: 16rem;
}

.img-24r {
  height: auto;
  width: 100%;
  max-width: 24rem;
}

Delete class that doesn't even work

.img-fit {
  max-width: 100%;
}

.img-inline {
  height: 2em;
  width: auto;
}

.img-circle { border-radius: 50%; }

.img-md {
  height: 4rem;
  width: auto;
}

.img-100 {
  max-width: 100px;
}

.img-7r {
  height: auto;
  width: 100%;
  max-width: 7rem;
}

.img-12r {
  height: auto;
  width: 100%;
  max-width: 12rem;
}

.img-16r {
  height: auto;
  width: 100%;
  max-width: 16rem;
}

.img-24r {
  height: auto;
  width: 100%;
  max-width: 24rem;
}


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

    #application.ic-app {

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

            img {
                display: none;
            }
        }

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

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

Fix styling for login and log out buttons after Canvas LMS upgrade

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

    #application.ic-app {

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

            img {
                display: none;
            }
        }

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

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

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

        }
    }
}


.iframe-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Add padding to cgroup screen

.iframe-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding-right: 30px;
  border: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


@import "mixins.less";

.number-modal {
    .modal-dialog {
        width: 980px;
    }
    h1 {
        margin-bottom: 20px;
    }
    p {
        font-weight: 300;
        font-size: 18px;
        a {
            color: @linkYellow;
        }
    }
}

Make "What is this number?" modal work in mobile

@import "mixins.less";

@media (min-width: @screen-sm-min) {
    .number-modal {
        .modal-dialog {
            width: 980px;
        }
    }
}

.number-modal {
    h1 {
        margin-bottom: 20px;
    }
    p {
        font-weight: 300;
        font-size: 18px;
        a {
            color: @linkYellow;
        }
    }
}


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

@DEBUG-NOT-IMPLEMENTED: true;

@blue: @brand-primary;
@page-width: 75%;

// Default character that separates inline list items.
@default-inline-list-item-sep: ';';

// For content with labels we have not converted yet try to show
.x-not-implemented(@msg) when (@DEBUG-NOT-IMPLEMENTED) {
  content: '[' @msg ' NOT_IMPLEMENTED_YET' ']';
}

// Mark unimplemented custom labels
*[data-label]:not([data-label=""])::before {
  content: attr(data-label) ': ';
}

.media-body {
  display: block;
  padding: 40px 60px 0 60px;
  width: auto; // override bootstrap
  min-height: 6rem;
  counter-reset: figure;
  outline: none;

  &.draft:not(.publishing) {
    padding: 40px 60px;
    background-color: #ffc;
    min-height: 4in;
  }

  .publishing();

  // Import the content styling from a separate file so it can be included in the editing code
  > #content {
    @import 'content.less';
  }
}

Remove duplicate label in notes that have a title

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

@DEBUG-NOT-IMPLEMENTED: true;

@blue: @brand-primary;
@page-width: 75%;

// Default character that separates inline list items.
@default-inline-list-item-sep: ';';

// For content with labels we have not converted yet try to show
.x-not-implemented(@msg) when (@DEBUG-NOT-IMPLEMENTED) {
  content: '[' @msg ' NOT_IMPLEMENTED_YET' ']';
}

// Mark unimplemented custom labels
*[data-label]:not([data-label=""]):not(.ui-has-child-title)::before {
  content: attr(data-label) ': ';
}

.media-body {
  display: block;
  padding: 40px 60px 0 60px;
  width: auto; // override bootstrap
  min-height: 6rem;
  counter-reset: figure;
  outline: none;

  &.draft:not(.publishing) {
    padding: 40px 60px;
    background-color: #ffc;
    min-height: 4in;
  }

  .publishing();

  // Import the content styling from a separate file so it can be included in the editing code
  > #content {
    @import 'content.less';
  }
}


@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
// Bootstrap
@import (less) "vendor/bootstrap/css/bootstrap.css";
@import (less) "vendor/bootstrap/css/bootstrap-responsive.css";

// Codemirror
@import (less) "vendor/CodeMirror/css/codemirror.css";
@import (less) "vendor/CodeMirror/css/twilight.css";

// Fontawesome
@import "vendor/font-awesome/less/font-awesome.less";
@fa-font-path: "../vendor/font-awesome/fonts";

Make google fonts served over https

// prettier-ignore
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
// Bootstrap
@import (less) 'vendor/bootstrap/css/bootstrap.css';
@import (less) 'vendor/bootstrap/css/bootstrap-responsive.css';

// Codemirror
@import (less) 'vendor/CodeMirror/css/codemirror.css';
@import (less) 'vendor/CodeMirror/css/twilight.css';

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


body {
    background: #fff;
    color: #000;
    font-size: 40px;
}

Revert "Try a dummy static CSS file"

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

hgroup {
    text-align: center;
    padding-top: @baseLine * 2;
    padding-bottom: @baseLine * 2;

    h2 {
        font-size: 48px;
    }
}

#primary {
    padding-top: @baseLine * 2;
    padding-bottom: @baseLine * 2;
    @shadow: 0 1px 1px rgba(0,0,0,0.1), 0 0 0 1px #fff;
    .box-shadow(@shadow);
    background: #fff;
    #gradient > .radial(center, 45px, ellipse, farthest-corner, #f5f1e8 0%, #ffffff 100%);
    .clearfix;
}

#signin-example figcaption {
    text-align: center;
    font-style: italic;
    color: @textColorSecondary;
    margin: auto @gridGutterWidth  @baseLine * 2  @gridGutterWidth;
}

#openphoto {
    text-align: center;
    padding: @baseLine;
    margin: @baseLine * 2  @gridColumnWidth + @gridGutterWidth;
    border-top: 1px dotted @borderColor;
    border-bottom: 1px dotted @borderColor;

    p {
        margin: 0;
        .open-sans;
        font-weight: 300;
    }
}

#persona-themes {
    text-align: center;
    margin-top: @baseLine;
    margin-bottom: @baseLine;
    @shadow: 0 1px 1px rgba(0,0,0,0.1), 0 0 0 1px #fff;
    .box-shadow(@shadow);
    background: #fff;

    h3 {
        margin: 0;
        padding: @baseLine;
    }
}

#small-print {
    text-align: center;
    padding-bottom: @baseLine * 2;
}


/* Style the element that gets rendered when dragging around
 * (The little box that follows the cursor)
 */
.dnd-content-handle {
  background-color: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
  padding: 5px;
  padding-bottom: 10px;
  max-width: 300px;
  max-height: 1em;
  box-shadow: 2px 2px 2px #888;
}
.dnd-content-handle > .title-content { font-weight: bold; }

.editor-drop-zone-hover {
  background-color: #ccc;
}

Make anchor tags black by default

a {
  color: black;
}

/* Style the element that gets rendered when dragging around
 * (The little box that follows the cursor)
 */
.dnd-content-handle {
  background-color: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
  padding: 5px;
  padding-bottom: 10px;
  max-width: 300px;
  max-height: 1em;
  box-shadow: 2px 2px 2px #888;
}
.dnd-content-handle > .title-content { font-weight: bold; }

.editor-drop-zone-hover {
  background-color: #ccc;
}


.features {

  background: lighten(@circleBlue, 10%);
  margin-top: 50px;

  h2, h3 {
    color: white;
  }

  h2 ~ h3 {
    color: darken(white, 25%);
  }

  p {
    color: @circleBlueLight;
  }

  .row {
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);

    &.right {
      text-align: right;
    }

    &:last-of-type {
      border: none;
    }
  }

  .span4 {
    text-align: center;

    &:first-of-type {
      margin-left: 0;
    }

    h3 {
      font-size: 18px;
    }

    p {
      padding: 0 10px;
      font-size: 13px;
    }
  }

  img {
    border: 2px solid rgba(255, 255, 255, .2);

    &.pull-left {
      margin-right: 50px;
    }

    &.pull-right {
      margin-left: 50px;
    }
  }
}

Fix the background color on fetures, to be the same as the rest of it

.features {

  background: @circleBlue;
  margin-top: 50px;

  h2, h3 {
    color: white;
  }

  h2 ~ h3 {
    color: darken(white, 25%);
  }

  p {
    color: @circleBlueLight;
  }

  .row {
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);

    &.right {
      text-align: right;
    }

    &:last-of-type {
      border: none;
    }
  }

  .span4 {
    text-align: center;

    &:first-of-type {
      margin-left: 0;
    }

    h3 {
      font-size: 18px;
    }

    p {
      padding: 0 10px;
      font-size: 13px;
    }
  }

  img {
    border: 2px solid rgba(255, 255, 255, .2);

    &.pull-left {
      margin-right: 50px;
    }

    &.pull-right {
      margin-left: 50px;
    }
  }
}


@defaultfontsize : 12px;
@maxvisibleitems: 8;
@lineheightoffset: 7px;
@defaultmenuwidth: 300px;

@fontsize : {font-size-param};
@lineheight: @fontsize + @lineheightoffset;

.CodeMirror {
    font-size: @fontsize !important
}

.codehint-menu .dropdown-menu li a {
    font-size: @fontsize !important;
    line-height: @lineheight  !important;
}

span.brackets-js-hints-with-type-details {
    width: @defaultmenuwidth * (@fontsize / @defaultfontsize) !important;
}

.codehint-menu .dropdown-menu {
    max-height: @maxvisibleitems * @lineheight !important;
}

Handle all units for less templating

@basefontsize: 16;

/* mixin for converting EM to PX */
.emtoPx( @emvalue ) when (isem( @emvalue)) {
    @return: (unit(@emvalue) * @basefontsize) + 0px;
}

/* mixin for passthrough other units */
.emtoPx( @emvalue ) when (isem(@emvalue) = false) {
    @return: @emvalue;
}

@fontsizeparam : {font-size-param};

@value: return;
.emtoPx(@fontsizeparam);
@fontsize: @@value;

@defaultfontsize : 12px;
@maxvisibleitems: 8;
@lineheightoffset: 5px/@defaultfontsize;
@defaultmenuwidth: 300px/@defaultfontsize;

@lineheight: @fontsize +  @fontsize * @lineheightoffset;

.CodeMirror {
    font-size: @fontsize !important;
}

.codehint-menu .dropdown-menu li a {
    font-size: @fontsize !important;
    line-height: @lineheight  !important;
}

span.brackets-js-hints-with-type-details {
    width: @defaultmenuwidth * @fontsize !important;
}

.codehint-menu .dropdown-menu {
    max-height: @maxvisibleitems * @lineheight !important;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

@import "seattletimes";

Remove Safari tap highlight by default, it's the worst

* {
  //border-box, you're the best
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  //Safari, you're the worst
  -webkit-tap-highlight-color: transparent;
}

@import "seattletimes";


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

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

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

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

Use atom-text-editor rather than .editor

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

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

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

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


.student-dashboard {
  .task {
    background: @tutor-white;
    border-top: thin dotted @tutor-neutral-light;
    // if the screen is wide enought, set a hight and use line-height to vertically center content.
    // This breaks when the responsive small view kicks in and it becomes multi-line
    .column-icon {
      height: @student-dashboard-row-height;
      padding: 0;
    }
    .icon {
      background-position: center;
      height: @student-dashboard-row-height;
      min-width: @student-dashboard-row-height;
      width: 100%;
    }
    .title {
      padding-left: 0;
    }
    .title, .feedback, .due-at {
      line-height: @student-dashboard-row-height;
      white-space: nowrap;
    }

    @media screen and ( max-width: @screen-sm-min ){
      .column-icon { height: @student-dashboard-row-height*2; }
      .icon {        height: @student-dashboard-row-height*2; }
    }

    // A task that is workable can be clicked
    &.workable {
      cursor: pointer;
      &:hover {
        background-color: @tutor-neutral-lighter;
        // on hover grow the icon from 4rem (40pxish) to 56
        .icon { background-size: 56px 56px; }
      }
    }
    transition: all 0.1s ease-in;

  }
}

Use defined row height vs hardcoded value

.student-dashboard {
  .task {
    background: @tutor-white;
    border-top: thin dotted @tutor-neutral-light;
    // if the screen is wide enought, set a hight and use line-height to vertically center content.
    // This breaks when the responsive small view kicks in and it becomes multi-line
    .column-icon {
      height: @student-dashboard-row-height;
      padding: 0;
    }
    .icon {
      background-position: center;
      height: @student-dashboard-row-height;
      min-width: @student-dashboard-row-height;
      width: 100%;
    }
    .title {
      padding-left: 0;
    }
    .title, .feedback, .due-at {
      line-height: @student-dashboard-row-height;
      white-space: nowrap;
    }

    @media screen and ( max-width: @screen-sm-min ){
      .column-icon { height: @student-dashboard-row-height*2; }
      .icon {        height: @student-dashboard-row-height*2; }
    }

    // A task that is workable can be clicked
    &.workable {
      cursor: pointer;
      &:hover {
        background-color: @tutor-neutral-lighter;
        .icon { background-size: @student-dashboard-row-height - 4; }
      }
    }
    transition: all 0.1s ease-in;

  }
}


@import '../common';

.oo-ui-toggleSwitchWidget {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	.oo-ui-box-sizing( border-box );
	.oo-ui-transform( translateZ( 0 ) );

	&.oo-ui-widget-enabled {
		cursor: pointer;
	}

	&-grip {
		position: absolute;
		display: block;
		.oo-ui-box-sizing( border-box );
	}

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

Replace `transform` with dedicated mixin

@import '../common';

.oo-ui-toggleSwitchWidget {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	.oo-ui-box-sizing( border-box );
	.oo-ui-force-webkit-gpu();

	&.oo-ui-widget-enabled {
		cursor: pointer;
	}

	&-grip {
		position: absolute;
		display: block;
		.oo-ui-box-sizing( border-box );
	}

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


@import "ui-variables";

.settings-view {

  select.form-control {
    border: none;
  }

  atom-text-editor .placeholder-text, // <-- deprecated
  atom-text-editor::shadow .placeholder-text {
    color: lighten(@text-color-subtle, 15%);
  }

  .available-package-view .meta-user .author {
    color: lighten(@text-color-subtle, 10%);
  }

}

Improve contrast of select color

@import "ui-variables";

.settings-view {

  select.form-control {
    border: none;
    color: @text-color-selected;
  }

  atom-text-editor .placeholder-text, // <-- deprecated
  atom-text-editor::shadow .placeholder-text {
    color: lighten(@text-color-subtle, 15%);
  }

  .available-package-view .meta-user .author {
    color: lighten(@text-color-subtle, 10%);
  }

}


@import "variables";

// Used in the status-bar

.github-PushPull {
  &-icon.icon.icon.icon {
    margin-right: 0;
    text-align: center;
  }

  .secondary {
      color: @text-color-subtle;
  }

}

Make entire component for push/pull tile in status bar clickable.

@import "variables";

// Used in the status-bar

// click target should take up the width of the container
.push-pull-target {
  display: inline-block;
}

.github-PushPull {
  &-icon.icon.icon.icon {
    margin-right: 0;
    text-align: center;
  }

  .secondary {
      color: @text-color-subtle;
  }

}


@ui-font-size: 14px;

.atom-panel.modal .select-list ol.list-group li,
.atom-panel.modal.select-list ol.list-group li {
  font-size: @ui-font-size;
}

.pane-item {
  font-size: @ui-font-size;
}

.status-bar {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
  line-height: @ui-font-size * 2 - 4;
}

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size * 0.8;
  height: @ui-font-size * 2;
}

.tool-panel pre {
  font-size: @ui-font-size;
}

.tree-view {
  font-size: @ui-font-size;
}

Increase font size in Elmjutsu usages

@ui-font-size: 14px;

.atom-panel.modal .select-list ol.list-group li,
.atom-panel.modal.select-list ol.list-group li {
  font-size: @ui-font-size;
}

.elmjutsu-usages {
  font-size: @ui-font-size;
}

.pane-item {
  font-size: @ui-font-size;
}

.status-bar {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
  line-height: @ui-font-size * 2 - 4;
}

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size * 0.8;
  height: @ui-font-size * 2;
}

.tool-panel pre {
  font-size: @ui-font-size;
}

.tree-view {
  font-size: @ui-font-size;
}


#templates {
    padding-top: 0;

    ul {
        margin: 0 0 0 0; //Bottom margin as much as bottom tabbar.
        padding: 0;
        .clearfix;
    }

    .template-cell {
        // Spacing
        .cell {
            height: auto;
        }
        .left, .middle, .right {
            float: none;
            width: auto;
            padding: 16px;
        }
        .left {
            flex-shrink: 0;
            padding-right: 0;
        }
        .middle {
            flex-grow: 1;
            padding-right: 0;
        }
        .right {
            flex-shrink: 0;
            text-align: left;
        }

        // Type
        .title {
            font-size: 16px;
        }
        .fa-chevron-right {
            font-size: 14px;
        }

        // Colors
        color: white;
        .description {
            color: fade(white, 80%);
        }
        .app-icon {
            border: 2px solid #FFF;
        }
    }
}

Remove 1px border from first template cell. GH-930

#templates {
    padding-top: 0;

    ul {
        margin: 0 0 0 0; //Bottom margin as much as bottom tabbar.
        padding: 0;
        .clearfix;
    }

    .list-cell li:first-child {
        border-top: none;
    }

    .template-cell {
        // Spacing
        .cell {
            height: auto;
        }

        .left, .middle, .right {
            float: none;
            width: auto;
            padding: 16px;
        }
        .left {
            flex-shrink: 0;
            padding-right: 0;
        }
        .middle {
            flex-grow: 1;
            padding-right: 0;
        }
        .right {
            flex-shrink: 0;
            text-align: left;
        }

        // Type
        .title {
            font-size: 16px;
        }
        .fa-chevron-right {
            font-size: 14px;
        }

        // Colors
        color: white;
        .description {
            color: fade(white, 80%);
        }
        .app-icon {
            border: 2px solid #FFF;
        }
    }
}


@black: #000;
@white: #fff;
@purple: #6159f5;
@dark-purple: #271e68;
@light-grey: #faf8f8;
@light-green: #c9fee8;

@primary-color: @light-grey;
@secondary-color: @purple;
@text-color: @dark-purple;
@secondary-text-color: @light-green;

@x-small: ~"only screen and (max-width: 470px)";
@small: ~"only screen and (max-width: 700px)";
@medium: ~"only screen and (max-width: 970px)";
@large: ~"only screen and (max-width: 1300px)";
@retina: ~"only screen and (min-width: 2880px)";

Add some extra colours to be used later

@black: #000;
@white: #fff;
@light-purple: #dedafe;
@purple: #6159f5;
@dark-purple: #271e68;
@light-grey: #faf8f8;
@light-green: #c9fee8;
@light-blue: #c1f2fe;

@primary-color: @light-grey;
@secondary-color: @purple;
@text-color: @dark-purple;
@secondary-text-color: @light-green;

@x-small: ~"only screen and (max-width: 470px)";
@small: ~"only screen and (max-width: 700px)";
@medium: ~"only screen and (max-width: 970px)";
@large: ~"only screen and (max-width: 1300px)";
@retina: ~"only screen and (min-width: 2880px)";


@import 'pt_mono';
@import url(//fonts.googleapis.com/css?family=Cuprum:400,700,700italic,400italic&subset=latin,cyrillic);

body {
	font-family: 'Cuprum', sans-serif;
}

pre, code {
	font-family: 'pt_monoregular', monospace;
	font-size: 14px;
}

Use HTTPS for font downloading for more comfortable local file surfing.

@import 'pt_mono';
@import url(https://fonts.googleapis.com/css?family=Cuprum:400,700,700italic,400italic&subset=latin,cyrillic);

body {
	font-family: 'Cuprum', sans-serif;
}

pre, code {
	font-family: 'pt_monoregular', monospace;
	font-size: 14px;
}


//noinspection CssUnknownTarget
@import "syntax-variables";
@import "octicon-utf-codes";
@import "ui-variables";
@import "tooltips";

// Using the git-diff colors so they are visible on your syntax theme.
@gutter: @syntax-color-removed;
@underline: #00a188;

.highlight-blue .region {
  border-bottom: 1px dashed @underline
}
.highlight-red .region {
  border-bottom: 1px dashed @gutter;
}
:host(:host) .gutter .line-number{
  &.gutter-blue {
    color:white;
    background-color: @underline
  }
  &.gutter-red {
    color:white;
    background-color: @gutter;
  }
}
.ide-hack-error {
  background-color: @background-color-highlight;
  z-index: 3;
}

.highlight {
  &.ide-hack-error .region {
    background: linear-gradient(to right, fadeout(@background-color-error, 30%) 0%, fadeout(@background-color-error, 35%) 100%);
    z-index: 3;
  }
}

.gutter .line-number {
  &.ide-hack-error .icon-right {
    visibility: visible;
    &:before {
      content: @alert;
      color: @text-color-error;
      z-index: 3;
    }
  }
}

Remove an un-needed CSS Selector

//noinspection CssUnknownTarget
@import "syntax-variables";
@import "octicon-utf-codes";
@import "ui-variables";
@import "tooltips";

// Using the git-diff colors so they are visible on your syntax theme.
@gutter: @syntax-color-removed;
@underline: #00a188;

.highlight-blue .region {
  border-bottom: 1px dashed @underline
}
.highlight-red .region {
  border-bottom: 1px dashed @gutter;
}
.gutter .line-number{
  &.gutter-blue {
    color:white;
    background-color: @underline
  }
  &.gutter-red {
    color:white;
    background-color: @gutter;
  }
}
.ide-hack-error {
  background-color: @background-color-highlight;
  z-index: 3;
}

.highlight {
  &.ide-hack-error .region {
    background: linear-gradient(to right, fadeout(@background-color-error, 30%) 0%, fadeout(@background-color-error, 35%) 100%);
    z-index: 3;
  }
}

.gutter .line-number {
  &.ide-hack-error .icon-right {
    visibility: visible;
    &:before {
      content: @alert;
      color: @text-color-error;
      z-index: 3;
    }
  }
}


#footer {
	margin-bottom: 0;
	background: #333;
	padding: 30px;
	margin-top: 100px;

	.contact-info {
		.contact-item {
			font-weight: 300;
			font-size: 14px;
			margin-bottom: 5px;
			color: #BBB;

			span {
				color: #666;
				margin-right: 10px;
			}
		}
	}

	.address {
		font-weight: 300;
		font-size: 14px;
		margin-top: 30px;
		color: #BBB;
    margin-bottom: 30px;

		.address-heading {
			color: #666;
		}
	}

	#footer-map {
	   width: 100%;
	   height: 300px;
	}

	#footer-map .gmnoprint,
	#footer-map div a img {
		display: none;
	}

	.socialIcon-link {
		margin-right: 18px;

		img {
			width: 32px;
		}
	}
}

Reduce opacity of social images on hover

#footer {
	margin-bottom: 0;
	background: #333;
	padding: 30px;
	margin-top: 100px;

	.contact-info {
		.contact-item {
			font-weight: 300;
			font-size: 14px;
			margin-bottom: 5px;
			color: #BBB;

			span {
				color: #666;
				margin-right: 10px;
			}
		}
	}

	.address {
		font-weight: 300;
		font-size: 14px;
		margin-top: 30px;
		color: #BBB;
    margin-bottom: 30px;

		.address-heading {
			color: #666;
		}
	}

	#footer-map {
	   width: 100%;
	   height: 300px;
	}

	#footer-map .gmnoprint,
	#footer-map div a img {
		display: none;
	}

	.socialIcon-link {
		margin-right: 18px;

		img {
			width: 32px;
		}

		&:hover {
			opacity: .7;
		}
	}
}


.dropdown-menu {

  border: 1px solid @tutor-neutral-light;

  // The QuestionLibrary is hidden until it's ready for release
  // it's re-enabled below when spy mode is engaged
  .viewQuestionsLibrary {
    display: none;
  }

}

// enable the Question Library link when spy mode is active
// This and the above 'display: none' should be removed when the
// Question Library is released
.openstax-debug-content.is-enabled {
  .dropdown-menu .viewQuestionsLibrary { display: block; }
}

Move question library out of spy mode

.dropdown-menu {

  border: 1px solid @tutor-neutral-light;

}


@import "ui-variables";

atom-text-editor::shadow .gutter .line-number {
  &.line-number-error {
    background-color: @background-color-error;
  }
}

Fix shadow DOM deprecation warnings

@import "ui-variables";

atom-text-editor.editor .gutter .line-number {
  &.line-number-error {
    background-color: @background-color-error;
  }
}


// z-index
@z-index-fullscreen-overlay: 500;
@z-index-navbar: 100;
@z-index-tooltip: 100;
// @z-index-toast: 90;
@z-index-sidebar: 50;
@z-index-action-button: 20;

// Icon
@icon-size: 2.4rem;

// Navbar
// @navbar-height: 64px;

// Device sizes
@device-x-large: ~"only screen and (max-width: 1800px)";
@device-large:  ~"only screen and (max-width: 1264px)";
@device-medium:   ~"only screen and (max-width: 960px)";
@device-small: ~"only screen and (max-width: 600px)";

Remove useless text from css media queries

// z-index
@z-index-fullscreen-overlay: 500;
@z-index-navbar: 100;
@z-index-tooltip: 100;
// @z-index-toast: 90;
@z-index-sidebar: 50;
@z-index-action-button: 20;

// Icon
@icon-size: 2.4rem;

// Navbar
// @navbar-height: 64px;

// Device sizes
@device-large: ~"screen and (max-width: 1600px)";
@device-medium:  ~"screen and (max-width: 1280px)";
@device-small:   ~"screen and (max-width: 960px)";
@device-x-small: ~"screen and (max-width: 600px)";


.tree-view {
  font-size: @font-size;
  background: @tree-view-background-color;

  .selected:before {
  	background: @background-color-highlight;
  }
}

.tree-view-resizer {
  .tree-view-resize-handle {
    width: 8px;
  }
}

.focusable-panel {
  opacity: 1;
  background: @tree-view-background-color;

  &:focus {
    // Disabled for now. Might be better to move it to panes
    //background: lighten(@tree-view-background-color, 2%);

    .selected:before {
      background: @background-color-selected;
    }

    .selected > .name,
    .selected > .name:before,
    .selected > .list-item > .name,
    .selected > .list-item > .name:before {
      color: @text-color-selected;
    }
  }
}

Make treeview header the same height as tabs

.tree-view {
  font-size: @font-size;
  background: @tree-view-background-color;

  .project-root {
    &:before,
    & > .header {
      height: @tab-height + 1px; // + 1px border
      border-bottom: 1px solid @base-border-color;
      .name {
        line-height: @tab-height + 1px; // + 1px border
      }
    }
  }

  .selected:before {
  	background: @background-color-highlight;
  }
}

.tree-view-resizer {
  .tree-view-resize-handle {
    width: 8px;
  }
}

.focusable-panel {
  opacity: 1;
  background: @tree-view-background-color;

  &:focus {
    // Disabled for now. Might be better to move it to panes
    //background: lighten(@tree-view-background-color, 2%);

    .selected:before {
      background: @background-color-selected;
    }

    .selected > .name,
    .selected > .name:before,
    .selected > .list-item > .name,
    .selected > .list-item > .name:before {
      color: @text-color-selected;
    }
  }
}


.search {
  display:block;
  background:rgba(255,255,255,.8);

  * {
    box-sizing:border-box;
    }

  &_wrapper {
    display:block;
    max-width:1024px;
    margin:auto;
    padding:20px;
    }

  &_field {
    border:2px solid #6D8DBA;
    display:block;
    width:100%;
    background:#fff url('../search/search.svg') 100% 12px no-repeat;
    background-size:50px 26px;
    padding: 10px 40px 10px 15px;
    outline-color: #F58A1F;
    color:#3C4E67;
    font-size:24px;
    font-family:'Open Sans', sans-serif;
    font-weight:300;
    &:focus {
      border-color: #F58A1F;
      }
    &::-webkit-input-placeholder {
      color:#C7D4E5;
      }
    }
  @media screen and (max-width:480px) {
    &_wrapper {
      padding:20px 10px;
      }

    &_field {
      border-width:1px;
      background-position:100% 5px;
      background-size:34px 20px;
      padding: 5px 32px 5px 10px;
      font-size:16px;
      }
    }
  }

Fix icon issue in firefox.

.search {
  display: block;
  background: rgba(255,255,255,.8);

  * {
    box-sizing: border-box;
    }

  &_wrapper {
    display: block;
    max-width: 1024px;
    margin: auto;
    padding: 20px;
    }

  &_field {
    border: 2px solid #6D8DBA;
    display: block;
    width: 100%;
    background: #fff url('../search/search.svg') 98.8% 13px no-repeat;
    background-size: 26px 26px;
    padding: 10px 40px 10px 15px;
    outline-color: #F58A1F;
    color: #3C4E67;
    font-size: 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    &:focus {
      border-color: #F58A1F;
      }
    &::-webkit-input-placeholder {
      color: #C7D4E5;
      }
    }
  @media screen and (max-width:480px) {
    &_wrapper {
      padding: 20px 10px;
      }

    &_field {
      border-width: 1px;
      background-position: 98.8% 6px;
      background-size: 20px 20px;
      padding: 5px 32px 5px 10px;
      font-size: 16px;
      }
    }
  }


//
// Base
//

// Set default font family to `sans-serif`.
// Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

// Remove default body margin.
body {
  margin: 0;
}

Improve comment as fix isn't just for iOS

//
// Base
//

// Set default font family to `sans-serif`.
// Prevent text size adjust after orientation change, without disabling
// the user zoom.
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

// Remove default body margin.
body {
  margin: 0;
}


@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4), .sb-table.linter td:nth-child(5) {
  cursor: pointer;
}

#linter-panel {
  display: block;
  overflow-y: scroll;
}

Decrease font size to make panel more compact

@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  font-size: 12px;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4), .sb-table.linter td:nth-child(5) {
  cursor: pointer;
}

#linter-panel {
  display: block;
  overflow-y: scroll;
}


@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  font-size: 12px;
  border-color: @base-border-color;
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4), .sb-table.linter td:nth-child(5) {
  cursor: pointer;
}

Fix two borders in Bottom Table

@import (inline) "../node_modules/sb-react-table/styles/base.css";
@import "ui-variables";

.sb-table.linter {
  color: @text-color;
  font-size: 12px;
  border: 0;
  // sb-table adds a border and Atom UI adds a border to wrapper element, so we end up with two
}

.sb-table.linter thead {
  background-color: @base-background-color;
}

.sb-table.linter tbody {
  background-color: @inset-panel-background-color;
}

.sb-table.linter td, .sb-table.linter th {
  padding: 3px 10px;
}

.sb-table.linter td {
  min-width: 100px;
}

.sb-table.linter th {
  border-right-color: @base-border-color;
  border-bottom-color: @base-border-color;
}

.sb-table.linter td:nth-child(4), .sb-table.linter td:nth-child(5) {
  cursor: pointer;
}


.changeHistory {
  .jumbotron {
    padding: 20px !important;
    .personActions {
      display: none !important;
    }
  }
  h1 {
    font-size: 18px !important;
  }
  .lifeSpan, .pid {
    font-size: 16px;
  }
  .jumbotron .icon-rounded {
    height: 60px !important;
    width: 60px !important;
    font-size: 32px !important;
    line-height: 58px !important;
    //margin-left: -10px !important;
    &:before {
      margin-left: 14px !important;
    }
  }
  .changeInformation {
    width: 170px;
  }
  .changeActions {
    width: 150px;
    text-align: center;
  }
  table {
    margin-bottom: 0;
    tbody {
      background: #fff;
    }
  }
  @media (max-width: 768px) {
    .changeInformation {
      width: 70px;
    }
    .changeActions {
      width: 15%;
    }
  }
  @media (max-width: 530px) {
    .pid {
      display: none !important;
    }
  }
}

Clean up change history modal

.changeHistory {
  .jumbotron {

    padding: 20px !important;
    .personActions {
      display: none !important;
    }
  }
  h1 {
    font-size: 18px !important;
    padding-top: 10px !important;
  }
  .lifeSpan, .pid {
    font-size: 16px;
  }
  .jumbotron .icon-rounded {
    height: 60px !important;
    width: 60px !important;
    font-size: 32px !important;
    line-height: 58px !important;
    padding-left: 0;
    //margin-left: -10px !important;
    &:before {
      margin-left: 14px !important;
    }
  }
  .changeInformation {
    width: 170px;
  }
  .changeActions {
    width: 150px;
    text-align: center;
  }
  table {
    margin-bottom: 0;
    tbody {
      background: #fff;
    }
  }
  @media (max-width: 768px) {
    .changeInformation {
      width: 70px;
    }
    .changeActions {
      width: 15%;
    }
  }
  @media (max-width: 530px) {
    .pid {
      display: none !important;
    }
  }
}


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

.table-edit {
  position: relative;

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

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

Complete stylesheets with basic table styles

@import "ui-variables";

.table-edit {
  position: relative;

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

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

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

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

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